@import url("/brand-core.css?v=20260912a");
html, body { overflow-x: hidden; }
.account-hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 54px; }
.account .orb { right: 170px; width: 440px; height: 440px; opacity: .46; }
.hero-panel {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.025));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(24px);
  transform: perspective(900px) rotateY(-3deg);
}
.hero-panel::before { position: absolute; inset: -50% 30% 55% -20%; background: radial-gradient(circle, rgba(var(--accent-rgb),.25), transparent 68%); content: ""; pointer-events: none; }
.panel-top { position: relative; display: flex; align-items: center; gap: 8px; padding-bottom: 20px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.panel-top b { margin-left: auto; color: var(--text); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.identity-mark { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 0; border-block: 1px solid var(--line); }
.identity-mark > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 18px; background: linear-gradient(135deg,var(--accent),var(--accent2)); color: #080b17; font-weight: 900; }
.identity-mark strong,.identity-mark small { display: block; }
.identity-mark small { margin-top: 5px; color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 20px 0; }
.metric { padding: 14px 9px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.035); text-align: center; }
.metric b,.metric small { display: block; }
.metric b { font-size: 19px; }
.metric small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.panel-foot { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-foot span { padding: 6px 8px; border-radius: 999px; background: rgba(var(--accent-rgb),.09); color: var(--muted); font-size: 9px; text-transform: uppercase; }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link .arrow { position: absolute; bottom: 24px; left: 26px; color: var(--accent); font-size: 12px; font-weight: 800; opacity: 0; transform: translateY(6px); transition: .2s ease; }
.card-link:hover .arrow { opacity: 1; transform: none; }
.card-link:not(.compact) p { padding-bottom: 22px; }
.policy-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.policy-grid .compact { min-height: 205px; }
.policy-grid .icon { margin-bottom: 30px; }
@media(max-width:980px) {
  .account-hero { grid-template-columns: 1fr; }
  .hero-panel { max-width: 560px; transform: none; }
  .account .orb { right: -180px; }
  .policy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px) {
  .hero-panel { padding: 20px; }
  .policy-grid { grid-template-columns: 1fr; }
  .card-link .arrow { opacity: 1; transform: none; }
}

/* Minimal account console treatment. */
.account-hero { grid-template-columns:minmax(0,1fr) 320px; gap:48px; }
.hero-panel { padding:22px; border-color:var(--line); border-radius:20px; background:#111216; box-shadow:none; backdrop-filter:none; transform:none; }
.hero-panel::before { opacity:.28; }
.identity-mark > span { border-radius:14px; background:#f3f3ef; color:#101114; }
.metric { border-radius:12px; background:#0d0e11; }
.panel-foot span { background:#17191e; }
.policy-grid .compact { min-height:190px; }
@media(max-width:980px){.account-hero{grid-template-columns:1fr}}

/* Security-console artwork and subtle live-state motion. */
.hero-panel { isolation:isolate; transition:transform .35s ease,border-color .35s ease; }
.hero-panel:hover { transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.32); }
.hero-panel::after { position:absolute;inset:auto -58px -72px auto;width:190px;height:190px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(var(--accent-rgb),.12) 0 1px,transparent 1px 23px);opacity:.42;content:"";pointer-events:none;animation:account-radar 28s linear infinite; }
.pulse { animation:account-pulse 2.8s ease-in-out infinite; }
@keyframes account-radar{to{transform:rotate(360deg)}}
@keyframes account-pulse{50%{opacity:.5;box-shadow:0 0 5px var(--accent)}}
@media(prefers-reduced-motion:reduce){.hero-panel::after,.pulse{animation:none!important}.hero-panel:hover{transform:none}}