:root { color-scheme: dark; --bg:#0a0d11; --surface:#11161d; --surface2:#171e27; --line:#26313d; --text:#edf3f8; --muted:#92a0ad; --accent:#d7ff62; --accent2:#a6ce36; --danger:#ff6f6f; --radius:18px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:radial-gradient(circle at 75% -10%,#253323 0,transparent 34%),var(--bg); color:var(--text); min-height:100vh; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.site-header { height:68px; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(10,13,17,.88); backdrop-filter:blur(15px); position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:11px; font-weight:740; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--accent); color:#11180a; font-size:12px; letter-spacing:.06em; }
nav { display:flex; align-items:center; gap:22px; color:var(--muted); font-size:14px; }
nav a:hover,.link-button:hover { color:var(--text); }
.user-chip { color:var(--text); background:var(--surface2); border:1px solid var(--line); padding:7px 11px; border-radius:99px; }
.inline { display:inline; margin:0; }
.link-button { border:0; background:none; color:var(--muted); padding:0; cursor:pointer; }
.page { width:min(1380px,calc(100% - 40px)); margin:0 auto; padding:64px 0 90px; }
.hero-row { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:38px; }
.eyebrow { margin:0 0 12px; color:var(--accent); font-weight:800; font-size:12px; letter-spacing:.15em; }
h1 { margin:0 0 10px; font-size:clamp(34px,5vw,64px); letter-spacing:-.055em; line-height:.98; }
h2 { margin:0 0 16px; letter-spacing:-.025em; }
.muted { color:var(--muted); line-height:1.55; }
.button,button { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--surface2); color:var(--text); border-radius:10px; padding:11px 16px; cursor:pointer; font-weight:680; }
.button:hover,button:hover { border-color:#506174; }
.primary { background:var(--accent); color:#131a0b; border-color:var(--accent); }
.primary:hover { background:#e3ff91; border-color:#e3ff91; }
.secondary { background:transparent; }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.asset-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(150deg,var(--surface2),var(--surface)); transition:.2s transform,.2s border-color; }
.asset-card:hover { transform:translateY(-3px); border-color:#4d5d6e; }
.asset-placeholder { height:210px; display:grid; place-content:center; text-align:center; background:radial-gradient(circle at 50% 35%,#38472c,transparent 27%),linear-gradient(135deg,#1b222a,#0c1015); border-bottom:1px solid var(--line); }
.asset-placeholder span { color:var(--accent); font-weight:900; font-size:54px; letter-spacing:-.08em; }
.asset-placeholder small { color:var(--muted); font-weight:750; letter-spacing:.15em; }
.asset-placeholder.compact { width:120px; height:120px; border:1px solid var(--line); border-radius:28px; margin:auto; }
.asset-copy { padding:22px; }
.asset-copy h2 { margin-bottom:8px; }
.asset-copy p { color:var(--muted); min-height:42px; margin:0 0 20px; line-height:1.45; }
.asset-meta { display:flex; justify-content:space-between; color:#6f7d8a; font-size:12px; }
.empty { min-height:55vh; display:grid; place-content:center; text-align:center; gap:14px; }
.login-shell { min-height:calc(100vh - 68px); display:grid; place-items:center; padding:30px; }
.login-card { width:min(440px,100%); background:rgba(17,22,29,.92); border:1px solid var(--line); border-radius:24px; padding:38px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.login-card h1 { font-size:45px; }
.stack { display:grid; gap:17px; margin-top:28px; }
label { display:grid; gap:8px; color:#bdc8d2; font-size:13px; font-weight:650; }
input,select,textarea { width:100%; color:var(--text); background:#0b0f14; border:1px solid var(--line); border-radius:9px; padding:11px 12px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--accent2); box-shadow:0 0 0 3px rgba(215,255,98,.08); }
.flash-stack { position:fixed; right:22px; top:82px; z-index:50; width:min(400px,calc(100% - 44px)); display:grid; gap:8px; }
.flash { border:1px solid var(--line); background:#1a2129; border-radius:10px; padding:13px 15px; box-shadow:0 12px 35px rgba(0,0,0,.35); }
.flash.error { border-color:#783e45; }.flash.success { border-color:#587431; }
.viewer-page { height:calc(100vh - 68px); display:grid; grid-template-rows:auto 1fr; overflow:hidden; }
.viewer-topbar { padding:18px clamp(18px,3vw,44px); display:flex; justify-content:space-between; gap:25px; align-items:end; background:#0c1015; border-bottom:1px solid var(--line); }
.viewer-topbar h1 { font-size:clamp(24px,3vw,38px); margin:5px 0 3px; }
.viewer-topbar p,.back { margin:0; color:var(--muted); font-size:13px; }
.back:hover { color:var(--text); }
.hash { font:12px ui-monospace,SFMono-Regular,Consolas,monospace; color:#778592; }
.viewer { min-height:0; position:relative; overflow:hidden; background:#11161d; }
#canvas { width:100%; height:100%; display:block; }
.loading { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; background:#11161d; z-index:8; transition:.4s opacity; }
.loading.done { opacity:0; pointer-events:none; }
.loading span { color:var(--muted); }
.spinner { width:44px; height:44px; border:3px solid #33404c; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.viewer-tools { position:absolute; top:16px; left:16px; display:flex; flex-wrap:wrap; gap:7px; z-index:5; }
.viewer-tools button { padding:8px 11px; font-size:12px; background:rgba(10,13,17,.86); backdrop-filter:blur(10px); }
.viewer-tools button.active { color:var(--accent); border-color:#718844; }
.viewer-stats { position:absolute; right:16px; top:16px; display:grid; gap:5px; padding:13px 15px; min-width:190px; border:1px solid var(--line); background:rgba(10,13,17,.82); backdrop-filter:blur(10px); border-radius:11px; font-size:12px; color:var(--muted); }
.viewer-stats strong { color:var(--text); margin-bottom:3px; }
.viewer-help { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); padding:8px 12px; border-radius:99px; background:rgba(10,13,17,.72); color:#82909d; font-size:11px; pointer-events:none; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:25px; }
.panel.wide { margin-top:18px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:13px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
td small { display:block; color:var(--muted); margin-top:4px; }
.status { padding:5px 8px; border-radius:99px; font-size:11px; font-weight:750; }.status.ok { color:var(--accent); background:#243019; }.status.off { color:#a0a7ae; background:#24292e; }
.actions { display:flex; gap:7px; align-items:center; }.actions form { display:flex; gap:6px; }.actions input { width:150px; padding:7px 8px; }.small { padding:7px 10px; font-size:11px; }.danger { color:#ff9797; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; color:#b6c5d2; }
@media(max-width:760px){ nav a,.user-chip{display:none}.page{padding-top:40px}.hero-row{align-items:start;flex-direction:column}.admin-grid{grid-template-columns:1fr}.viewer-topbar{align-items:start}.hash{display:none}.viewer-stats{top:auto;bottom:48px;right:10px}.viewer-help{display:none}.viewer-tools{right:10px}.actions{align-items:stretch;flex-direction:column}.actions form{flex-wrap:wrap} }