/* korelcraft — "Overworld console".
   The dashboard borrows Minecraft's material language instead of dressing up as a generic dark
   admin: blocky panels with a hard 4px bottom edge (no blurred shadows), inventory-slot inputs
   (dark top-left / light bottom-right bevel), launcher-green buttons that physically press down,
   a pixel display face for names and numbers, and a hand-built pixel-art sky as the only
   atmosphere. Palette: deepslate ground, grass green, gold, redstone red, diamond blue.
   Shared by every page; mc.css adds the panel-specific pieces. */

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&family=Schibsted+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ground:#16181c;
  --panel:#1f2227;
  --panel-2:#272b31;
  --panel-3:#2f343b;
  --slot:#0f1114;
  --edge:#353a42;
  --edge-hi:#4a505a;
  --edge-dark:#0a0b0d;
  --ink:#ece9e2;
  --ink-2:#aaa79f;
  --ink-3:#77756f;
  --grass:#63b94c;
  --grass-hi:#8fe36b;
  --grass-dk:#3f8f2f;
  --gold:#f5c542;
  --red:#e9463f;
  --diamond:#5ad3d1;
  --oak:#c39a5d;
  --btn:#3d8b2f;
  --btn-hi:#5db24a;
  --btn-edge:#1f4b19;
  --btn-shadow:#143310;
  --font-px:'Pixelify Sans',ui-monospace,monospace;
  --font-body:'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:6px;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--ink);
  font:400 14.5px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;
  min-height:100vh;padding:0 0 80px;
}
::selection{background:rgba(99,185,76,.45)}
a{color:var(--diamond)}
.dim{color:var(--ink-3)}
.mut{color:var(--ink-2)}
.small{font-size:12px}
.mono{font-family:var(--font-mono)}
.px{font-family:var(--font-px)}
.hidden{display:none!important}

/* ── grass block icon (pure CSS) ────────────────────────────────────────── */
.blk{
  width:24px;height:24px;flex:0 0 24px;display:inline-block;position:relative;border-radius:3px;
  background:linear-gradient(180deg,#8fe36b 0 30%,#63b94c 30% 44%,#7a5030 44% 100%);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.28),inset 3px 3px 0 rgba(255,255,255,.14),0 2px 0 var(--edge-dark);
}
.blk::after{content:"";position:absolute;left:5px;top:13px;width:4px;height:3px;background:#5e3f22;box-shadow:9px 5px 0 #5e3f22,-2px 6px 0 #8b6038}

/* ── app bar ────────────────────────────────────────────────────────────── */
.appbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:20px;
  padding:12px 28px;
  background:rgba(22,24,28,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:2px solid var(--edge);box-shadow:0 4px 0 var(--edge-dark);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand-name{font:600 20px/1 var(--font-px);letter-spacing:.01em}
.brand-name span{color:var(--grass)}
.tabs-nav{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs-nav::-webkit-scrollbar{display:none}
.tabs-nav a{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:0 0 auto;
  font:600 13px/1 var(--font-body);color:var(--ink-2);text-decoration:none;
  padding:9px 13px;border-radius:4px;border:2px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
}
.tabs-nav a:hover{color:var(--ink);background:var(--panel-2)}
.tabs-nav a.active{color:var(--ink);background:var(--panel-2);border-color:var(--edge);box-shadow:0 3px 0 var(--edge-dark)}
.tabs-nav a.mc.active{color:#fff;background:var(--btn);border-color:var(--btn-edge);box-shadow:0 3px 0 var(--btn-shadow);text-shadow:0 1px 0 rgba(0,0,0,.4)}
.tabs-nav .live{font:600 11px/1 var(--font-mono);padding:3px 6px;border-radius:3px;background:rgba(0,0,0,.35);color:var(--grass-hi)}
.tabs-nav a.mc.active .live{background:rgba(0,0,0,.3);color:#e6ffd8}
.appbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.appbar-meta{font:500 12px/1.3 var(--font-mono);color:var(--ink-3);text-align:right}
.appbar-meta b{display:block;color:var(--ink-2);font-weight:500}

/* ── buttons: flat, bordered, physically pressable ───────────────────────── */
.btn{
  position:relative;top:0;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:600 13.5px/1 var(--font-body);color:var(--ink);
  background:var(--panel-2);border:2px solid var(--edge);border-radius:4px;
  padding:9px 14px;cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:0 3px 0 var(--edge-dark);
  transition:top .08s,box-shadow .08s,background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--panel-3);border-color:var(--edge-hi)}
.btn:active{top:3px;box-shadow:0 0 0 var(--edge-dark)}
.btn:disabled{opacity:.45;cursor:default;top:0}
.btn.sm{padding:7px 11px;font-size:12.5px}
.btn.lg{padding:14px 22px;font-size:15px;border-radius:5px}
.btn.primary{
  color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.45);
  background:var(--btn);border-color:var(--btn-edge);
  box-shadow:0 3px 0 var(--btn-shadow),inset 0 2px 0 var(--btn-hi);
}
.btn.primary:hover{background:#469a37;border-color:var(--btn-edge)}
.btn.primary:active{box-shadow:0 0 0 var(--btn-shadow),inset 0 2px 0 var(--btn-hi)}
.btn.primary::after{                      /* enchantment glint on hover */
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.38) 50%,transparent 58%);
  transform:translateX(-130%);
}
.btn.primary:hover::after{animation:glint .75s var(--ease)}
@keyframes glint{to{transform:translateX(130%)}}
.btn.danger{color:#ffdad7;background:#7a2823;border-color:#4a1512;box-shadow:0 3px 0 #2c0c0a,inset 0 2px 0 #a63a33}
.btn.danger:hover{background:#8f2f29;border-color:#4a1512}
.btn.danger:active{box-shadow:0 0 0 #2c0c0a,inset 0 2px 0 #a63a33}
.btn.warn{color:#fff0c2;background:#7a5a15;border-color:#4a370c;box-shadow:0 3px 0 #2c2007,inset 0 2px 0 #a8811f}
.btn.warn:hover{background:#8d6819;border-color:#4a370c}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--panel-2);color:var(--ink);border-color:transparent}
.btn.ghost:active{top:0}
.btn .spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── layout ─────────────────────────────────────────────────────────────── */
main{max-width:1180px;margin:0 auto;padding:0 28px}
section{margin-top:40px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
section h2{
  font:500 15px/1 var(--font-px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;gap:10px;
}
section h2::before{content:"";width:10px;height:10px;background:var(--grass);box-shadow:inset -2px -2px 0 rgba(0,0,0,.35)}
section h2 .count{font:500 12px/1 var(--font-mono);color:var(--ink-3);letter-spacing:0;text-transform:none;padding:3px 6px;background:var(--slot);border-radius:3px}

.grid{display:grid;gap:16px}
.system-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.domain-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.service-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* ── blocks (cards) ─────────────────────────────────────────────────────── */
.card{
  position:relative;
  background:var(--panel);border:2px solid var(--edge);border-radius:var(--r);
  padding:18px;box-shadow:0 4px 0 var(--edge-dark);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s;
}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--edge-dark);border-color:var(--edge-hi)}
.card.static:hover{transform:none;box-shadow:0 4px 0 var(--edge-dark);border-color:var(--edge)}
.card .label{font:500 12px/1 var(--font-px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.card .big{font:600 28px/1.05 var(--font-px);letter-spacing:.01em}
.card .meta{font-size:12.5px;color:var(--ink-2);margin-top:7px;display:flex;gap:10px;flex-wrap:wrap}
.card .name{font:600 15px/1.3 var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* blocks get "placed": drop in with a small bounce, staggered (first render only) */
.enter>*{animation:place .55s var(--bounce) both;animation-delay:calc(var(--i,0)*60ms)}
@keyframes place{0%{opacity:0;transform:translateY(-22px) scale(.96)}65%{opacity:1;transform:translateY(3px) scale(1.01)}100%{opacity:1;transform:none}}
/* and break when removed */
.break{animation:break .5s ease-in both;pointer-events:none}
@keyframes break{0%{transform:none}15%{transform:translate(-2px,1px) rotate(-.6deg)}30%{transform:translate(2px,-1px) rotate(.6deg)}45%{transform:translate(-2px,0)}60%{transform:translate(2px,1px)}80%{transform:scale(.92);opacity:.7}100%{transform:scale(.6);opacity:0}}

/* ── meters ─────────────────────────────────────────────────────────────── */
.bar-bg{height:10px;border:2px solid var(--edge-dark);background:var(--slot);margin-top:12px;overflow:hidden;border-radius:2px}
.bar{height:100%;background:var(--grass);box-shadow:inset 0 2px 0 var(--grass-hi);transition:width .6s var(--ease)}
.bar.warn{background:var(--gold);box-shadow:inset 0 2px 0 #ffe08a}
.bar.bad{background:var(--red);box-shadow:inset 0 2px 0 #ff8a84}

/* ── status dots (pixel squares) ────────────────────────────────────────── */
.dot{width:10px;height:10px;border-radius:2px;flex:0 0 10px;background:var(--ink-3);display:inline-block;position:relative;box-shadow:inset -2px -2px 0 rgba(0,0,0,.3)}
.dot.ok{background:var(--grass-hi)}
.dot.ok::after{content:"";position:absolute;inset:-3px;border:2px solid var(--grass);border-radius:3px;animation:ping 2s var(--ease) infinite}
.dot.warn{background:var(--gold);animation:blink 1s steps(2) infinite}
.dot.bad{background:var(--red)}
@keyframes ping{0%{transform:scale(.7);opacity:.9}80%,100%{transform:scale(2);opacity:0}}
@keyframes blink{50%{opacity:.3}}
.code-ok{color:var(--grass-hi)}.code-warn{color:var(--gold)}.code-bad{color:var(--red)}

/* legacy service buttons (overview) */
.svc-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn-svc{
  position:relative;top:0;font:600 12.5px/1 var(--font-body);color:var(--ink);
  background:var(--panel-2);border:2px solid var(--edge);border-radius:4px;padding:8px 11px;cursor:pointer;
  box-shadow:0 3px 0 var(--edge-dark);transition:top .08s,box-shadow .08s,background .15s;
}
.btn-svc:hover{background:var(--panel-3)}
.btn-svc:active{top:3px;box-shadow:none}
.btn-svc.danger{color:#ffdad7;background:#7a2823;border-color:#4a1512;box-shadow:0 3px 0 #2c0c0a}
.btn-svc.danger:active{box-shadow:none}

/* ── chips ──────────────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font:500 11.5px/1 var(--font-mono);color:var(--ink-2);
  padding:5px 8px;border-radius:3px;background:var(--slot);border:1px solid var(--edge);
}
.chip.grass{color:var(--grass-hi);border-color:rgba(99,185,76,.45)}
.chip.sky{color:var(--diamond);border-color:rgba(90,211,209,.4)}
.chip.warn{color:var(--gold);border-color:rgba(245,197,66,.4)}
.chip.bad{color:#ff9a95;border-color:rgba(233,70,63,.45)}

/* ── inventory slots (inputs, addresses) ────────────────────────────────── */
.slot{background:var(--slot);border:2px solid;border-color:#0a0b0d #454a53 #454a53 #0a0b0d;border-radius:2px}

/* copy: floats a little "+kopiert" like XP */
.copy{cursor:pointer;position:relative}
.xp-float{
  position:fixed;z-index:80;pointer-events:none;
  font:600 13px/1 var(--font-px);color:var(--grass-hi);text-shadow:0 1px 0 #000;
  animation:xp 1s ease-out both;
}
@keyframes xp{0%{opacity:0;transform:translateY(4px)}15%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}

/* ── modal ──────────────────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:50;background:rgba(6,7,9,.78);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade .18s ease both;
}
.modal.hidden{display:none}
.modal.leaving{animation:fade .16s ease reverse both}
.modal.leaving .modal-panel{animation:chest .16s ease reverse both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-panel{
  width:min(1000px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:2px solid var(--edge);border-radius:8px;overflow:hidden;
  box-shadow:0 6px 0 var(--edge-dark),0 0 0 4px rgba(0,0,0,.4);
  animation:chest .38s var(--bounce) both;
}
@keyframes chest{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:2px solid var(--edge);background:var(--panel-2);
}
.modal-title{font:600 22px/1.1 var(--font-px);display:flex;align-items:center;gap:10px}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.logs-stream{
  flex:1;overflow:auto;padding:16px 20px;background:#0b0c0e;
  font:400 12.5px/1.7 var(--font-mono);color:#cfcbc2;white-space:pre-wrap;word-break:break-word;
}
.logs-stream::-webkit-scrollbar{width:12px}
.logs-stream::-webkit-scrollbar-thumb{background:var(--edge);border:3px solid #0b0c0e;border-radius:6px}

/* ── toast ──────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:2px solid var(--edge);border-radius:5px;
  padding:11px 16px;font-size:13.5px;font-weight:500;box-shadow:0 4px 0 var(--edge-dark);
  animation:toast-in .4s var(--bounce) both;
}
.toast::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--ink-3);flex:0 0 9px}
.toast.ok::before{background:var(--grass-hi)}
.toast.bad::before{background:var(--red)}
.toast.hidden{display:none}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}

/* ── forms ──────────────────────────────────────────────────────────────── */
.form-body{padding:20px 22px;overflow:auto}
.form-body label,.field{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:14px}
.form-body input:not([type=checkbox]),.form-body textarea,.input{
  display:block;width:100%;margin-top:6px;
  font:500 14px/1.4 var(--font-body);color:var(--ink);
  background:var(--slot);border:2px solid;border-color:#0a0b0d #454a53 #454a53 #0a0b0d;border-radius:2px;
  padding:10px 12px;outline:none;transition:box-shadow .15s;
}
.form-body input:not([type=checkbox]):focus,.form-body textarea:focus,.input:focus{box-shadow:0 0 0 2px var(--grass)}
.form-body input::placeholder{color:var(--ink-3)}
.form-body .mono-input,.input.mono{font-family:var(--font-mono)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row.three{grid-template-columns:1fr 1fr 1fr}
.form-sec{
  font:500 14px/1 var(--font-px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  margin:6px 0 14px;padding-top:16px;border-top:2px dashed var(--edge);display:flex;align-items:center;gap:8px;
}
.form-sec::before{content:"";width:8px;height:8px;background:var(--oak)}
.form-sec:first-child{border-top:0;padding-top:0}
.form-body p{margin:-6px 0 14px;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
.form-foot.sticky{position:sticky;bottom:-20px;margin:12px -22px -20px;padding:14px 22px;background:var(--panel);border-top:2px solid var(--edge)}
.form-hint{font-size:12px;color:var(--ink-3);flex:1;min-width:0}
.form-hint.bad{color:#ff9a95}

/* lever-style toggles */
label.check{
  display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;
  padding:9px 10px;border-radius:4px;border:2px solid transparent;transition:background .15s,border-color .15s;
}
label.check:hover{background:var(--panel-2);border-color:var(--edge)}
label.check a{color:var(--ink-2)}
label.check input{
  appearance:none;-webkit-appearance:none;width:42px;height:22px;flex:0 0 42px;border-radius:3px;
  background:var(--slot);border:2px solid;border-color:#0a0b0d #454a53 #454a53 #0a0b0d;position:relative;cursor:pointer;
  transition:background .2s;
}
label.check input::after{
  content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:2px;
  background:#8d9199;box-shadow:inset -2px -2px 0 rgba(0,0,0,.35),inset 2px 2px 0 rgba(255,255,255,.25);
  transition:transform .2s var(--bounce),background .2s;
}
label.check input:checked{background:var(--grass-dk)}
label.check input:checked::after{transform:translateX(20px);background:var(--grass-hi)}
label.check input:focus-visible{box-shadow:0 0 0 2px var(--grass)}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 10px;margin:0 0 12px}

/* custom dropdown (UI.enhanceSelects) */
.dd{position:relative;margin-top:6px}
.dd-native{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.dd-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  font:500 14px/1.4 var(--font-body);color:var(--ink);text-align:left;
  background:var(--slot);border:2px solid;border-color:#0a0b0d #454a53 #454a53 #0a0b0d;border-radius:2px;
  padding:10px 12px;cursor:pointer;transition:box-shadow .15s;
}
.dd-btn:focus-visible,.dd.open .dd-btn{outline:none;box-shadow:0 0 0 2px var(--grass)}
.dd-btn .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink-2);transition:transform .2s;flex:0 0 auto}
.dd.open .dd-btn .arrow{transform:rotate(180deg)}
.dd-btn:disabled{opacity:.5;cursor:default}
.dd-btn .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-list{
  position:fixed;z-index:90;min-width:180px;max-height:300px;overflow:auto;
  background:var(--panel-2);border:2px solid var(--edge);border-radius:5px;box-shadow:0 5px 0 var(--edge-dark),0 0 0 3px rgba(0,0,0,.35);
  padding:6px;animation:chest .18s var(--ease) both;
}
.dd-search{width:100%;margin:0 0 6px;font:500 13px/1.3 var(--font-mono);color:var(--ink);background:var(--slot);border:2px solid;border-color:#0a0b0d #454a53 #454a53 #0a0b0d;border-radius:2px;padding:8px 10px;outline:none}
.dd-opt{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:500 13.5px/1.3 var(--font-body);color:var(--ink);padding:9px 10px;border-radius:3px;cursor:pointer;
}
.dd-opt:hover,.dd-opt.focus{background:var(--panel-3)}
.dd-opt.sel{color:#fff;background:var(--btn);box-shadow:inset 0 2px 0 var(--btn-hi)}
.dd-opt .sub{font:500 11px/1 var(--font-mono);color:var(--ink-3)}
.dd-opt.sel .sub{color:#d8f5cc}
.dd-empty{padding:10px;color:var(--ink-3);font-size:12.5px}

/* segmented control */
.seg{display:inline-flex;padding:3px;border-radius:4px;background:var(--slot);border:2px solid;border-color:#0a0b0d #454a53 #454a53 #0a0b0d}
.seg button{font:600 12.5px/1 var(--font-body);color:var(--ink-2);background:transparent;border:none;padding:8px 13px;border-radius:3px;cursor:pointer;transition:background .15s,color .15s}
.seg button.active{background:var(--panel-3);color:var(--ink)}
.seg button.active.mc{background:var(--btn);color:#fff}

/* ── pixel scene ────────────────────────────────────────────────────────── */
.scene{position:relative;overflow:hidden;background:#0a1128}
.scene svg{display:block;width:100%;height:100%}
.scene-hero{height:360px}
.scene-full{position:fixed;inset:0;z-index:0;height:100vh}
.scene .star{animation:twinkle 3.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.scene .l-clouds .band{animation:drift 110s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-1200px)}}
.scene .flame{animation:flicker .32s steps(2) infinite alternate;transform-box:fill-box;transform-origin:center bottom}
@keyframes flicker{from{transform:scaleY(1)}to{transform:scaleY(.72) translateY(1px)}}
.scene .glow{animation:glowf .9s ease-in-out infinite alternate}
@keyframes glowf{from{opacity:.07}to{opacity:.16}}
.scene .orb{animation:orb 6s ease-in infinite}
@keyframes orb{0%{transform:translateY(0);opacity:0}12%{opacity:1}85%{opacity:.5}100%{transform:translateY(-150px);opacity:0}}
.scene .water{animation:water 2.6s ease-in-out infinite}
@keyframes water{0%,100%{fill:#2f74d8}50%{fill:#4c90f2}}

/* ── misc ───────────────────────────────────────────────────────────────── */
.banner{max-width:1180px;margin:18px auto 0;padding:13px 16px;border-radius:5px;border:2px solid var(--edge);background:var(--panel);font-size:13.5px;box-shadow:0 3px 0 var(--edge-dark)}
.banner.bad{border-color:#7a2823;color:#ffb3ae}
.skeleton{border-radius:var(--r);height:96px;border:2px solid var(--edge);background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.empty{grid-column:1/-1;text-align:center;padding:44px 20px;border:2px dashed var(--edge);border-radius:var(--r);color:var(--ink-2)}
.empty .big{font:600 24px/1.2 var(--font-px);color:var(--ink);margin-bottom:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:1100px){.appbar-meta{display:none}}
@media (max-width:900px){
  .appbar{flex-wrap:wrap;gap:10px 14px}
  .tabs-nav{order:3;flex-basis:100%}
  .appbar-right{margin-left:auto}
}
@media (max-width:640px){
  main{padding:0 16px}
  .appbar{padding:10px 16px}
  .brand-name{font-size:18px}
  .card .big{font-size:24px}
  .form-row,.form-row.three{grid-template-columns:1fr}
  .modal{padding:8px}
  .modal-head{padding:12px 14px}
  .form-body{padding:16px}
  .scene-hero{height:260px}
}