
:root{
  --bg:#050505;--ink:#f8f0df;--muted:#a99f8b;--gold:#d9a441;--gold2:#ffe2a0;--blue:#51d6ff;
  --line:rgba(255,226,160,.22);--panel:rgba(9,10,13,.84);--panel2:rgba(255,255,255,.055);--radius:24px;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.95)),url("assets/batman-bg.jpg") center top/cover fixed no-repeat,#050505;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{border:0;cursor:pointer}
.primary,.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;padding:.82rem 1rem;font-weight:900;transition:.25s}.primary{color:#080704;background:linear-gradient(135deg,var(--gold2),var(--gold));box-shadow:0 16px 48px rgba(217,164,65,.18)}.ghost{color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line)}.primary:hover,.ghost:hover{transform:translateY(-2px)}
.kicker{margin:0;color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:900}.small{color:var(--muted);font-size:13px;line-height:1.5}
.splash{min-height:100vh;display:grid;place-items:center;padding:18px;background:linear-gradient(rgba(0,0,0,.56),rgba(0,0,0,.94)),url("assets/batman-bg.jpg") center/cover no-repeat}.splash-panel{width:min(92vw,590px);text-align:center;padding:32px;border-radius:36px;border:1px solid rgba(255,226,160,.35);background:rgba(0,0,0,.72);box-shadow:0 40px 130px rgba(0,0,0,.75),0 0 80px rgba(217,164,65,.12);backdrop-filter:blur(18px)}.logo3d{width:145px;height:145px;margin:0 auto 16px;border-radius:38px;background:url("assets/bat-logo.jpg") center/cover no-repeat;border:1px solid rgba(255,226,160,.42);box-shadow:0 25px 90px rgba(0,0,0,.55);animation:logo 4.8s ease-in-out infinite}.splash h1{font-size:clamp(38px,8vw,74px);line-height:.9;letter-spacing:-.06em;margin:8px 0 18px}.loadbar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 0 18px}.loadbar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--blue));animation:load 2s ease}
.app{display:grid;grid-template-columns:290px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;overflow:auto;padding:18px;background:rgba(0,0,0,.78);border-right:1px solid var(--line);backdrop-filter:blur(20px)}.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}.brand-logo{width:54px;height:54px;border-radius:18px;background:url("assets/bat-logo.jpg") center/cover no-repeat;border:1px solid rgba(255,226,160,.38)}.brand h1{margin:0;font-size:24px}.brand p{margin:2px 0 0;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}.nav{display:grid;gap:8px}.nav a{display:flex;gap:10px;align-items:center;padding:12px 13px;border-radius:18px;color:#bdb39f;border:1px solid transparent;font-weight:850}.nav a.active,.nav a:hover{color:white;background:linear-gradient(135deg,rgba(217,164,65,.14),rgba(81,214,255,.06));border-color:var(--line)}
.main{min-width:0;padding-bottom:90px}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;background:rgba(0,0,0,.72);border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}.topbar h2{margin:3px 0 0;font-size:28px;letter-spacing:-.04em}.view{width:min(1240px,100%);margin:0 auto;padding:24px}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:22px;align-items:center;min-height:360px;margin-bottom:18px;padding:24px;border-radius:34px;overflow:hidden;background:linear-gradient(115deg,rgba(0,0,0,.93),rgba(0,0,0,.58)),url("assets/batman-bg.jpg") center/cover no-repeat;border:1px solid rgba(255,226,160,.25);box-shadow:0 34px 110px rgba(0,0,0,.55)}.hero::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 82% 14%,rgba(255,226,160,.20),transparent 23%),linear-gradient(120deg,transparent,rgba(81,214,255,.10),transparent 44%);animation:heroLight 7s ease-in-out infinite}.hero-copy,.hero-visual{position:relative;z-index:1}.hero h3{font-size:clamp(38px,5vw,72px);line-height:.88;letter-spacing:-.075em;margin:.2rem 0 .7rem;text-shadow:0 10px 36px rgba(0,0,0,.5)}.hero p{color:#d7cfbe;line-height:1.68;max-width:690px}.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.badges span{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);padding:.45rem .7rem;border-radius:999px;font-size:12px;font-weight:900;color:#e7faff;text-transform:uppercase;letter-spacing:.08em}
.hero-card{position:relative;min-height:350px;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:var(--page-panel) center/cover no-repeat;box-shadow:0 36px 110px rgba(0,0,0,.55),0 0 70px rgba(81,214,255,.08);transform:rotateY(-9deg) rotateX(5deg);animation:float3d 7s ease-in-out infinite}.hero-card::before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.16);border-radius:24px}.holo{position:absolute;right:18px;top:18px;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(81,214,255,.62) 22%,rgba(81,214,255,.12) 55%,transparent 72%);box-shadow:0 0 45px rgba(81,214,255,.22);animation:orb 4s ease-in-out infinite}.hero-tag{position:absolute;left:18px;bottom:18px;padding:12px 14px;border-radius:18px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px)}.hero-tag strong{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:13px}.hero-tag small{color:#cabfa9}
.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(4,1fr)}.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.panel,.stat,.module-card,.road-card,.script-card,.protocol{position:relative;overflow:hidden;border-radius:var(--radius);padding:20px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.28);backdrop-filter:blur(16px)}.panel::before,.stat::before{content:"";position:absolute;right:12px;bottom:12px;width:160px;height:160px;background:url("assets/bat-logo.jpg") center/contain no-repeat;opacity:.045}.panel>*{position:relative;z-index:1}.panel h3,.module-card h3{margin:0 0 10px;font-size:25px}.panel p,.panel li,.module-card p,.protocol p{color:#d4ccbb;line-height:1.65}.stat span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.stat strong{display:block;font-size:34px;color:#fff;margin-top:5px}.clean-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}.clean-list li,.mission-row{padding:13px;border-radius:17px;border:1px solid rgba(255,255,255,.08);background:var(--panel2)}.mission-row{display:flex;gap:10px;align-items:flex-start}.mission-row input{width:20px;height:20px;margin-top:4px}.progress-ring{width:165px;height:165px;border-radius:50%;display:grid;place-items:center;margin:auto;background:conic-gradient(var(--gold) 72%,rgba(255,255,255,.08) 0);box-shadow:0 0 45px rgba(217,164,65,.12)}.progress-ring span{width:122px;height:122px;border-radius:50%;display:grid;place-items:center;background:#080808;font-size:32px;font-weight:950}.module-grid,.protocol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.roadline{display:grid;gap:12px}.road-card{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:start}.road-card b{color:#ffe2a0;font-size:22px}.script-card pre{white-space:pre-wrap;color:#d8d1c4;line-height:1.55;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}input,textarea,select{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.45);color:var(--ink);border-radius:16px;padding:.88rem;outline:none;font-size:16px}textarea{min-height:120px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:800}.full{grid-column:1/-1}.chat{min-height:260px;padding:14px;border-radius:20px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);display:grid;gap:10px}.msg{padding:12px;border-radius:16px;line-height:1.55}.bot{background:rgba(217,164,65,.10);border:1px solid rgba(217,164,65,.18)}.user{background:rgba(81,214,255,.08);border:1px solid rgba(81,214,255,.16);justify-self:end;max-width:85%}.bottom-nav{display:none}@keyframes logo{0%,100%{transform:perspective(900px) rotateY(-18deg) rotateX(7deg)}50%{transform:perspective(900px) rotateY(18deg) rotateX(-4deg) translateY(-8px)}}@keyframes load{from{width:0}to{width:100%}}@keyframes heroLight{0%,100%{transform:translateX(-3%)}50%{transform:translateX(4%)}}@keyframes float3d{0%,100%{transform:rotateY(-9deg) rotateX(5deg) translateY(0)}50%{transform:rotateY(-5deg) rotateX(8deg) translateY(-8px)}}@keyframes orb{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}@media(max-width:980px){.app{grid-template-columns:1fr}.sidebar{display:none}.topbar{padding:14px 16px}.topbar h2{font-size:24px}.view{padding:14px 14px 104px}.hero{grid-template-columns:1fr;padding:16px;border-radius:26px;min-height:auto}.hero h3{font-size:38px}.hero-card{min-height:320px;transform:rotateY(-6deg) rotateX(4deg)}.stats,.two,.three,.module-grid,.protocol-grid,.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.road-card{grid-template-columns:1fr}.bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px;border-radius:24px;background:rgba(2,3,5,.86);border:1px solid var(--line);backdrop-filter:blur(18px)}.bottom-nav a{text-align:center;padding:9px 5px;border-radius:17px;color:#bcb29f;font-size:11px;font-weight:900}.bottom-nav a.active,.bottom-nav a:hover{background:rgba(217,164,65,.13);color:#fff}}@media(max-width:520px){.splash-panel{padding:24px 18px}.logo3d{width:116px;height:116px}.hero-card{min-height:290px}.panel,.stat{padding:16px}}
