/* ==========================================================================
   My BioLLM — film theme. Loaded after styles.css: a cinematic film runs
   under the whole page, every surface becomes dark glass.
   ========================================================================== */
:root{
  --bg:#070b08;
  --surface:rgba(10,16,12,.56);
  --surface-2:rgba(255,255,255,.06);
  --surface-3:rgba(255,255,255,.13);
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.86);
  --ink-dark:#111512;
  --muted:rgba(255,255,255,.64);
  --muted-2:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.22);
  --green:#8cc796;
  --green-2:#a9dcb0;
  --green-soft:rgba(120,180,130,.16);
  --green-ink:#c6e8cb;
  --dark:#0b100c;
  --dark-2:#141a15;
  --warn:#e08c8c;--warn-soft:rgba(181,84,84,.18);
  --amber:#e8ab8d;--amber-soft:rgba(160,92,65,.2);
  --blue:#a9cbe9;--blue-soft:rgba(65,109,146,.22);
  --violet:#cbbcee;--violet-soft:rgba(108,88,147,.22);
  --shadow-soft:inset 0 1px 0 rgba(255,255,255,.05),0 20px 60px rgba(0,0,0,.35);
  --shadow-float:inset 0 1px 0 rgba(255,255,255,.07),0 30px 90px rgba(0,0,0,.55);
}
body{background:var(--bg);color:var(--ink)}
::selection{background:rgba(140,199,150,.3)}

/* ---------- The film ---------- */
.film{position:fixed;inset:0;z-index:-1;background:#070b08;overflow:hidden;pointer-events:none}
.film-stage{position:absolute;inset:-6%;will-change:transform}
.film-poster,.film-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.film-v{opacity:0;transition:opacity 1.6s linear}
.film-v.on{opacity:1}
.film-grade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,11,8,.6) 0%,rgba(7,11,8,.1) 28%,rgba(7,11,8,.25) 60%,rgba(7,11,8,.7) 100%),
  radial-gradient(120% 80% at 50% 50%,transparent 40%,rgba(7,11,8,.45) 100%)}
.film-dim{position:absolute;inset:0;background:#070b08;opacity:var(--dim,0);transition:opacity .2s linear}
.aurora{display:none}

/* ---------- Header ---------- */
.site-header{background:rgba(7,11,8,.28);border-bottom-color:transparent}
.site-header.scrolled{background:rgba(7,11,8,.62);border-bottom-color:var(--line)}
.brand,.nav nav a{color:#fff}
.brand em{color:rgba(255,255,255,.72)}
.brand .mark-dark{display:none}.brand .mark-light{display:block}
.menu-toggle i,.menu-toggle i:before,.menu-toggle i:after{background:#fff}
.nav-open nav{background:rgba(7,11,8,.94)}
.nav-open nav a{color:#fff}

/* ---------- Buttons ---------- */
.button-dark,.nav .button-dark,.hero .button-dark{background:#fff;color:var(--ink-dark);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.button-dark:hover,.hero .button-dark:hover{background:#eef3ef}
.button-light,.hero .button-light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.button-light:hover,.hero .button-light:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
.filters button.active,.feed-filters button.active,.leaderboard-tabs button.active{background:#fff;color:var(--ink-dark);border-color:#fff}
.live-controls button:hover,.feed-filters button:hover,.leaderboard-tabs button:hover{background:rgba(255,255,255,.12);color:#fff;border-color:var(--line-strong)}
.trade-tabs{background:rgba(255,255,255,.07)}
.trade-tabs button.active{background:#fff;color:var(--ink-dark)}
.contract-copy,.contract-explorer{background:var(--surface-2)}

/* ---------- Hero ---------- */
.hero{background:transparent;margin-top:-60px;min-height:100svh;padding:120px 0 110px;isolation:auto}
.hero:after,.hero-gl,.hero-fallback{display:none}
.hero-inner{width:min(1180px,calc(100% - 48px));margin:0 auto}
.hero-copy{align-items:center;text-align:center;margin:0 auto;max-width:900px}
.hero h1{font-size:clamp(40px,5.6vw,78px);line-height:1.02;letter-spacing:-.04em;font-weight:600;text-shadow:0 12px 40px rgba(0,0,0,.45)}
.hero h1 em{background:linear-gradient(100deg,#e2f3e4 0%,#b4ddb9 40%,#8cc796 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p{margin:0 auto;max-width:620px;color:rgba(255,255,255,.74);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.actions{justify-content:center}
.hero .network-line{background:rgba(7,11,8,.35);border-color:rgba(255,255,255,.14)}
.scroll-cue{color:rgba(255,255,255,.55)}

/* ---------- Surfaces ---------- */
.panel,.metrics article{background:var(--surface);border-color:var(--line);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.terminal{background:rgba(5,8,6,.62);border-color:var(--line)}
.terminal-line b{color:var(--green-2)}
.launch-form input,.launch-form select,.trade-panel input,.agent-editor input,.agent-editor select,.agent-editor textarea,.field input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.08);color:#fff}
.launch-form input:focus,.launch-form select:focus,.trade-panel input:focus,.agent-editor input:focus,.agent-editor select:focus,.agent-editor textarea:focus,.field input:focus{background:rgba(255,255,255,.1);border-color:var(--green)}
::placeholder{color:rgba(255,255,255,.38)}
.launch-form select,.agent-editor select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select option{background:#101512;color:#fff}
.toggle-row{background:rgba(255,255,255,.06)}
.toggle-row i{background:rgba(255,255,255,.22)}
.toggle-row input:checked+i{background:var(--green)}
.my-agents-empty{background:rgba(255,255,255,.05);border:1px dashed var(--line)}
.my-agents-empty .agent-avatar{background:rgba(255,255,255,.1)}
.agent-avatar,.event-icon,.rank-agent>i,.profile-avatar,.metric-icon{background:var(--green-soft);color:var(--green-2)}
.consensus-step{background:rgba(255,255,255,.05)}
.consensus-step i{background:rgba(255,255,255,.1);color:var(--green-2)}
.consensus-step.review{background:var(--amber-soft)}
.capsule-score,.profile-score,.graph-detail,.agent-verdicts div,.stat{background:rgba(255,255,255,.06)}
.asset-logo{background:rgba(255,255,255,.08);border-color:var(--line);color:var(--green-2)}
.amount-field button{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.registry-card{background:rgba(255,255,255,.07);border:1px solid var(--line)}
.registry-card button{background:#fff;color:var(--ink-dark)}
.graph-canvas{background:radial-gradient(circle at 50% 50%,rgba(120,180,130,.18),transparent 45%),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),rgba(0,0,0,.25);background-size:auto,28px 28px,28px 28px,auto;border-color:var(--line)}
.graph-node{background:rgba(10,16,12,.78);border-color:var(--line);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.graph-node:hover,.graph-node.active{border-color:var(--green)}
.graph-node i{background:var(--green-soft);color:var(--green-2)}
.graph-link{background:linear-gradient(90deg,rgba(140,199,150,.2),var(--green))}
.contradiction-box{background:var(--amber-soft);border:1px solid rgba(232,171,141,.2)}
.contradiction-box p{color:rgba(255,255,255,.72)}
.flow-node>circle:first-child{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.18)}
.flow-node .inner{fill:rgba(120,180,130,.2)}
.flow-node .icon{fill:var(--green-2)}
.flow-path.base{stroke:rgba(255,255,255,.12)}
.story-bar{background:rgba(255,255,255,.12)}
.table-head{background:rgba(255,255,255,.05)}
.market-row:hover{background:rgba(255,255,255,.05)}
.market-row.active{background:var(--green-soft)}
.proof-row button{background:rgba(255,255,255,.08);color:#fff}
.modal,.evidence-modal{background:rgba(0,0,0,.62)}
.modal-card,.evidence-modal-card{background:rgba(12,18,14,.94);border:1px solid var(--line)}
.modal-close,.evidence-modal-close{background:rgba(255,255,255,.1);color:#fff}
.docs.shell{background:rgba(10,16,12,.6);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.docs p{color:rgba(255,255,255,.66)}
.docs .button-light{background:#fff;color:var(--ink-dark);border-color:#fff}
.docs .button-light:hover{background:#eef3ef}
.x-float{background:#fff;color:var(--ink-dark)}
.toast{background:rgba(255,255,255,.95);color:var(--ink-dark)}
.section-title span,.docs span{color:var(--green-2)}
.section-title h2{text-shadow:0 10px 36px rgba(0,0,0,.4)}
footer{color:var(--muted)}

/* ---------- Vault page ---------- */
.vault-top h1{text-shadow:0 12px 40px rgba(0,0,0,.45)}
.badge{background:var(--green-soft);color:var(--green-ink)}
.log{background:rgba(5,8,6,.7);border:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){.film-v{display:none}}