/* ID-specific layout. The visual system is copied from the local Cinemata VF reference. */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #06090b; }
[hidden] { display: none !important; }
.home-main { position: relative; z-index: var(--vf-z-content); }
.home-top { position: fixed; left: 0; right: 0; top: var(--vf-hud-top); z-index: var(--vf-z-header); }
.home-top::before { content: ""; position: absolute; inset: 0 0 var(--vf-top-veil-ext); background: var(--vf-top-veil); pointer-events: none; }
.home-top-in { position: relative; display: flex; align-items: center; gap: var(--vf-top-gap); height: var(--vf-top-h); padding: 0 var(--vf-pad); }
.home-top-r { margin-left: auto; display: flex; align-items: center; gap: var(--vf-sp-md); }
.home-top .vf-logo { font-size: var(--vf-top-logo-fs); line-height: var(--vf-top-logo-lh); }
.id-logo-suffix { color: var(--vf-accent); font: 600 var(--vf-fs-md) / 1 var(--vf-font-mono); letter-spacing: .08em; }
.home-fh-bk { left: 45%; top: 15%; width: 50%; height: 35%; }
.home-fh-bk i { --bk-s: 110px; --bk-c: var(--vf-tone-cyan); }
.home-fh-bk i:nth-child(1) { left: 12%; top: 25%; }
.home-fh-bk i:nth-child(2) { left: 55%; top: 18%; --bk-s: 70px; --bk-c: var(--vf-tone-amber); }
.home-fh-bk i:nth-child(3) { left: 83%; top: 60%; --bk-s: 130px; --bk-c: var(--vf-accent); }
.home-fh-bk i:nth-child(4) { left: 38%; top: 80%; --bk-s: 90px; --bk-c: var(--vf-cat-4); }
.home-fh-bk i:nth-child(5) { left: 74%; top: 8%; --bk-s: 60px; }
.home-fh-bk i:nth-child(6) { left: 95%; top: 24%; --bk-s: 80px; --bk-c: var(--vf-tone-amber); }
.vf-glow { transition: transform 1.8s ease-out; }
.id-motion-toggle { position: fixed; z-index: var(--vf-z-header); bottom: 60px; right: var(--vf-pad); min-height: 32px; color: var(--vf-fg-2); font: 500 var(--vf-fs-xs) / var(--vf-lh-xs-snug) var(--vf-font-mono); }
.id-motion-toggle:hover { color: var(--vf-fg); }
.id-page-alert { position: relative; z-index: var(--vf-z-header); margin: 112px var(--vf-pad) -112px; padding: 16px; border: 1px solid var(--vf-accent); background: var(--vf-surface); color: var(--vf-fg); }
.id-account-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: start; gap: clamp(40px, 8vw, 120px); padding-top: 140px; padding-bottom: 100px; min-height: 100svh; }
.id-profile h1 { margin-top: 20px; font: 900 40px / 1.05 var(--vf-font-display); text-transform: uppercase; letter-spacing: -.035em; overflow-wrap: anywhere; }
.id-account-email { color: var(--vf-fg-2); margin-top: 12px; overflow-wrap: anywhere; }
.id-profile-description { color: var(--vf-fg-2); margin: 28px 0 24px; }
.id-settings-hint { margin-top: 12px; color: var(--vf-fg-3); font-size: var(--vf-fs-sm); }
.id-logout { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--vf-line); }
.id-logout button { color: var(--vf-fg-2); min-height: 44px; }
.id-logout button:hover { color: var(--vf-accent); }
.id-services { padding-top: 12px; }
.id-services h2 { margin-top: 16px; font: 900 clamp(32px, 3.5vw, 52px) / 1 var(--vf-font-display); letter-spacing: -.035em; text-transform: uppercase; }
.id-service-list { margin-top: 32px; }
.id-service { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--vf-line-2); text-decoration: none; }
.id-service-index { padding-top: 5px; }
.id-service h3 { font-size: 22px; font-weight: 700; }
.id-service p, .id-empty-services p { margin-top: 8px; color: var(--vf-fg-2); }
.id-service-open, .id-service .vf-cap:last-child { display: inline-block; margin-top: 16px; }
.id-service-open { font-size: var(--vf-fs-sm); color: var(--vf-accent); }
.id-service:hover h3 { color: var(--vf-accent); }
.id-motion-paused .vf-rec i { animation-play-state: paused; }
@media (max-width: 760px) {
  .id-account-layout { grid-template-columns: minmax(0, 1fr); padding-top: 110px; gap: 40px; }
  .id-profile h1 { font-size: 32px; }
  .id-profile .vf-btn { white-space: normal; height: auto; min-height: 48px; text-align: center; }
  .id-motion-toggle { bottom: 30px; left: var(--vf-pad); right: auto; }
}
@media (prefers-reduced-motion: reduce) { .vf-glow { transition: none; } }