/* ==========================================================================
   PandA Hosting — "Bamboo & Blossom"
   Bamboo green + cherry blossom pink on panda black.
   ========================================================================== */

@font-face { font-family: 'Unbounded'; src: url(/fonts/unbounded-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url(/fonts/unbounded-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url(/fonts/unbounded-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Bricolage'; src: url(/fonts/bricolage.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'JetBrains'; src: url(/fonts/jetbrains-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains'; src: url(/fonts/jetbrains-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Silk'; src: url(/fonts/silkscreen-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Silk'; src: url(/fonts/silkscreen-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink-0: #060706;
  --ink-1: #0d0f0d;
  --ink-2: #131613;
  --ink-3: #1a1e1a;
  --ink-4: #222722;
  --line: #232823;
  --line-2: #2f362f;
  --line-3: #3d453c;

  --text: #eff4ec;
  --text-2: #b3bdb0;
  --text-3: #7c877a;
  --text-4: #556053;

  --bamboo: #8df35b;
  --bamboo-hi: #b6ff8f;
  --bamboo-lo: #4fae2d;
  --bamboo-deep: #2c6a17;
  --bamboo-ink: #0b1a06;
  --bamboo-wash: rgba(141, 243, 91, 0.09);

  --blossom: #ff6fae;
  --blossom-hi: #ff9cc8;
  --blossom-lo: #d8417f;
  --blossom-deep: #84204c;
  --blossom-ink: #2b0616;
  --blossom-wash: rgba(255, 111, 174, 0.10);

  --amber: #ffcf5a;
  --amber-wash: rgba(255, 207, 90, 0.10);
  --red: #ff4d63;
  --red-wash: rgba(255, 77, 99, 0.10);

  --f-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Bricolage', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --f-pixel: 'Silk', 'JetBrains', monospace;

  --side-w: 252px;
  --top-h: 64px;
  --r: 3px;
  --press: 0.08s;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--ink-0);
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--text);
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--blossom); color: var(--blossom-ink); }
a { color: var(--bamboo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
img { image-rendering: auto; }
.px { image-rendering: pixelated; }
:focus-visible { outline: 2px solid var(--blossom); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 26px; line-height: 1.15; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
p { margin: 0; }
.mono { font-family: var(--f-mono); }
.pixel { font-family: var(--f-pixel); text-transform: uppercase; letter-spacing: 0.06em; }
.muted { color: var(--text-3); }
.dim { color: var(--text-2); }
.green { color: var(--bamboo); }
.pink { color: var(--blossom); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 10px; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-14 { gap: 14px; } .gap-18 { gap: 18px; } .gap-24 { gap: 24px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.hide { display: none !important; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------- layout */

.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.main { min-width: 0; display: flex; flex-direction: column; }
.page { padding: 28px 34px 80px; width: 100%; max-width: 1480px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .kicker { margin-bottom: 8px; }
.kicker { font-family: var(--f-pixel); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.kicker::before { content: ''; width: 8px; height: 8px; background: var(--blossom); display: inline-block; }
.kicker.g::before { background: var(--bamboo); }

/* ---------------------------------------------------------------- sidebar */

.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--ink-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 18px 14px 14px;
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 18px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-tile {
  width: 44px; height: 44px; flex: none; position: relative;
  background: var(--blossom);
  display: grid; place-items: center;
  box-shadow: 0 3px 0 var(--blossom-deep);
}
.brand-tile::after { content: ''; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; background: var(--bamboo); box-shadow: 0 2px 0 var(--bamboo-deep); }
.wordmark { font-family: var(--f-display); font-weight: 900; font-size: 21px; letter-spacing: -0.02em; line-height: 1; }
.wordmark .p { color: var(--blossom); } /* P = Patrko (pink) */
.wordmark .a { color: var(--bamboo); }  /* A = Alien (green) */
.brand-sub { font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.18em; color: var(--text-3); margin-top: 5px; }

.nav-sec { font-family: var(--f-pixel); font-size: 9.5px; letter-spacing: 0.16em; color: var(--text-4); padding: 16px 10px 8px; text-transform: uppercase; }
.nav a, .nav button.navbtn {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; color: var(--text-2); border: 0; background: none; cursor: pointer;
  font-weight: 560; font-size: 14px; text-align: left; position: relative; border-radius: var(--r);
}
.nav a:hover, .nav button.navbtn:hover { background: var(--ink-3); color: var(--text); text-decoration: none; }
.nav a.on { background: var(--ink-3); color: var(--text); }
.nav a.on::before { content: ''; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 4px; background: var(--bamboo); }
.nav a .ic { color: var(--text-3); }
.nav a.on .ic { color: var(--bamboo); }
.nav .srv-link { padding-left: 12px; font-size: 13.5px; }
.nav .count { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--text-3); }
.side-new { margin: 6px 0 4px; }
.side-foot { margin-top: auto; padding-top: 16px; }
.device-chip { border: 1px solid var(--line); background: var(--ink-2); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.device-chip .name { font-weight: 650; font-size: 13px; }
.device-chip .ip { font-family: var(--f-mono); font-size: 11px; color: var(--text-3); }
.pa-stamp { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; font-family: var(--f-pixel); font-size: 9px; color: var(--text-4); letter-spacing: 0.12em; padding: 0 4px; }
.pa-stamp b { color: var(--text-3); font-weight: 400; }
.pa-stamp .pk { color: var(--blossom); }
.pa-stamp .gr { color: var(--bamboo); }

/* status squares */
.sq { width: 8px; height: 8px; flex: none; background: var(--text-4); display: inline-block; }
.sq.online { background: var(--bamboo); box-shadow: 0 0 0 3px rgba(141,243,91,0.15); }
.sq.starting, .sq.stopping, .sq.installing { background: var(--amber); animation: blink 1s steps(2, start) infinite; }
.sq.crashed { background: var(--red); }
@keyframes blink { to { opacity: 0.25; } }

/* ---------------------------------------------------------------- topbar */

.topbar {
  height: var(--top-h); position: sticky; top: 0; z-index: 25;
  display: flex; align-items: center; gap: 14px; padding: 0 22px 0 34px;
  background: rgba(6, 7, 6, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--text-2); }
.topbar .crumbs b { color: var(--text); font-weight: 650; }
.topbar .menu-btn { display: none; }
.meters { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.meter {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 11px; position: relative;
  border: 1px solid var(--line); background: var(--ink-1); cursor: default; min-width: 152px;
}
.meter:hover { border-color: var(--line-3); }
.meter .ml { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.meter .mk { font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.14em; color: var(--text-3); }
.meter .mv { font-family: var(--f-mono); font-size: 13px; font-weight: 700; }
.meter .mv small { font-weight: 400; color: var(--text-3); font-size: 10.5px; }
.meter .spark { margin-left: auto; }
.meter-pop {
  position: absolute; right: 0; top: calc(100% + 8px); width: 340px; padding: 14px;
  background: var(--ink-1); border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  z-index: 50;
}
.top-btn {
  position: relative; width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--ink-1); border: 1px solid var(--line); cursor: pointer; color: var(--text-2);
}
.top-btn:hover { color: var(--text); border-color: var(--line-3); }
.top-btn .dotc { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--blossom); color: var(--blossom-ink); font-family: var(--f-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.tunnel-pill { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border: 1px solid var(--line); background: var(--ink-1); font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.tunnel-pill:hover { color: var(--text); text-decoration: none; border-color: var(--line-3); }

/* ---------------------------------------------------------------- panels */

.panel { background: var(--ink-1); border: 1px solid var(--line); position: relative; min-width: 0; }
.panel.pad { padding: 18px 20px; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); min-height: 52px; }
.panel-h h2, .panel-h h3 { display: flex; align-items: center; gap: 10px; }
.panel-b { padding: 18px; }
.panel-f { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.panel.raised { background: var(--ink-2); }
.panel.hl { border-color: var(--line-3); }
.label-tab {
  position: absolute; top: -9px; left: 14px; padding: 2px 7px; background: var(--ink-0);
  font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.14em; color: var(--text-3); border: 1px solid var(--line);
}
.corners { position: relative; }
.corners::before, .corners::after { content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none; }
.corners::before { left: -1px; top: -1px; border-left: 2px solid var(--bamboo); border-top: 2px solid var(--bamboo); }
.corners::after { right: -1px; bottom: -1px; border-right: 2px solid var(--blossom); border-bottom: 2px solid var(--blossom); }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.g-side { grid-template-columns: minmax(0, 1fr) 380px; }
.g-side-l { grid-template-columns: 300px minmax(0, 1fr); }
.span-2 { grid-column: span 2; }

hr.sep { border: 0; border-top: 1px dashed var(--line-2); margin: 18px 0; }

/* ---------------------------------------------------------------- buttons */

.btn {
  --bg: var(--ink-3); --fg: var(--text); --edge: #070807; --bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 15px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg);
  font-weight: 650; font-size: 13.5px; cursor: pointer; white-space: nowrap; user-select: none;
  box-shadow: 0 3px 0 var(--edge); transform: translateY(0);
  transition: transform var(--press), box-shadow var(--press), background 0.12s, border-color 0.12s;
  border-radius: 2px; position: relative; text-decoration: none !important;
}
.btn:hover { --bg: var(--ink-4); border-color: var(--line-3); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.g { --bg: var(--bamboo); --fg: var(--bamboo-ink); --edge: var(--bamboo-deep); --bd: var(--bamboo-hi); }
.btn.g:hover { --bg: var(--bamboo-hi); }
.btn.p { --bg: var(--blossom); --fg: var(--blossom-ink); --edge: var(--blossom-deep); --bd: var(--blossom-hi); }
.btn.p:hover { --bg: var(--blossom-hi); }
.btn.danger { --bg: #2a0d12; --fg: #ff8a99; --bd: #5a1a25; --edge: #12050a; }
.btn.danger:hover { --bg: #3a1119; }
.btn.danger.solid { --bg: var(--red); --fg: #22040a; --bd: #ff8090; --edge: #7a1424; }
.btn.ghost { --bg: transparent; --bd: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { --bg: var(--ink-3); color: var(--text); }
.btn.ghost:active { transform: none; }
.btn.sm { height: 31px; padding: 0 11px; font-size: 12.5px; gap: 6px; }
.btn.xs { height: 26px; padding: 0 8px; font-size: 12px; gap: 5px; box-shadow: 0 2px 0 var(--edge); }
.btn.lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn.xl { height: 58px; padding: 0 28px; font-size: 16.5px; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; }
.btn.icon { width: 38px; padding: 0; }
.btn.sm.icon { width: 31px; }
.btn.xs.icon { width: 26px; }
.btn.block { width: 100%; }
.btn .spin { animation: spin 0.9s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.linkish { background: none; border: 0; padding: 0; color: var(--bamboo); cursor: pointer; font-weight: 600; }
.linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.linkish.p { color: var(--blossom); }

/* ---------------------------------------------------------------- form */

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > .lbl, .lbl { font-weight: 650; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 7px; }
.field .hint { font-size: 12.5px; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 12px; background: var(--ink-0); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 2px; font: inherit; font-size: 14px; outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--bamboo); box-shadow: 0 0 0 3px rgba(141,243,91,0.12); }
.input.mono, .textarea.mono { font-family: var(--f-mono); font-size: 13px; }
.input.big { height: 50px; font-size: 17px; padding: 0 16px; }
.textarea { height: auto; min-height: 100px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 34px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(-45deg, transparent 50%, var(--text-3) 50%); background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.select option { background: var(--ink-1); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .ic-l { position: absolute; left: 12px; color: var(--text-3); pointer-events: none; }
.input-wrap .input { padding-left: 38px; }
.input-wrap .suffix { position: absolute; right: 10px; color: var(--text-3); font-family: var(--f-mono); font-size: 12px; }
.err-text { color: #ff8a99; font-size: 13px; font-weight: 600; }

/* toggle */
.toggle { --w: 44px; --h: 24px; position: relative; width: var(--w); height: var(--h); flex: none; cursor: pointer; display: inline-block; }
.toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.toggle .track { position: absolute; inset: 0; background: var(--ink-0); border: 1px solid var(--line-3); transition: background 0.15s, border-color 0.15s; }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--text-3); transition: transform 0.15s steps(4), background 0.15s; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25); }
.toggle input:checked ~ .track { background: var(--bamboo-wash); border-color: var(--bamboo); }
.toggle input:checked ~ .knob { transform: translateX(20px); background: var(--bamboo); }
.toggle.pink input:checked ~ .track { background: var(--blossom-wash); border-color: var(--blossom); }
.toggle.pink input:checked ~ .knob { background: var(--blossom); }
.toggle input:focus-visible ~ .track { outline: 2px solid var(--blossom); outline-offset: 2px; }
.toggle input:disabled ~ * { opacity: 0.5; }

.switch-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .txt { flex: 1; min-width: 0; }
.switch-row .t { font-weight: 650; display: flex; align-items: center; gap: 7px; }
.switch-row .d { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

/* segmented */
.seg { display: inline-flex; border: 1px solid var(--line-2); background: var(--ink-0); padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: none; color: var(--text-2); height: 30px; padding: 0 12px; font-weight: 650; font-size: 13px; cursor: pointer; border-radius: 1px; }
.seg button:hover { color: var(--text); background: var(--ink-3); }
.seg button.on { background: var(--bamboo); color: var(--bamboo-ink); box-shadow: inset 0 -2px 0 var(--bamboo-deep); }
.seg.pink button.on { background: var(--blossom); color: var(--blossom-ink); box-shadow: inset 0 -2px 0 var(--blossom-deep); }
.seg.block { display: flex; }
.seg.block button { flex: 1; }

/* range slider (bamboo stalk) */
.range { width: 100%; appearance: none; height: 26px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 10px; background: linear-gradient(90deg, var(--bamboo) 0 var(--pct, 50%), var(--ink-0) var(--pct, 50%)); border: 1px solid var(--line-3); }
.range::-moz-range-track { height: 10px; background: var(--ink-0); border: 1px solid var(--line-3); }
.range::-moz-range-progress { height: 10px; background: var(--bamboo); }
.range::-webkit-slider-thumb { appearance: none; width: 18px; height: 24px; margin-top: -8px; background: var(--text); border: 0; box-shadow: inset 0 -4px 0 #9aa597, 0 0 0 2px var(--ink-0); }
.range::-moz-range-thumb { width: 18px; height: 24px; background: var(--text); border: 0; border-radius: 0; box-shadow: inset 0 -4px 0 #9aa597; }
.range.pink::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--blossom) 0 var(--pct, 50%), var(--ink-0) var(--pct, 50%)); }
.range.pink::-moz-range-progress { background: var(--blossom); }
.ticks { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; color: var(--text-4); margin-top: 2px; }

/* checkbox */
.check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.check input { appearance: none; width: 20px; height: 20px; flex: none; margin: 1px 0 0; border: 1px solid var(--line-3); background: var(--ink-0); cursor: pointer; display: grid; place-items: center; }
.check input:checked { background: var(--bamboo); border-color: var(--bamboo); }
.check input:checked::after { content: ''; width: 10px; height: 6px; border-left: 3px solid var(--bamboo-ink); border-bottom: 3px solid var(--bamboo-ink); transform: rotate(-45deg) translate(1px, -1px); }

/* chips + badges */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--line-2); background: var(--ink-2); font-size: 12px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.chip.g { border-color: rgba(141,243,91,0.35); background: var(--bamboo-wash); color: var(--bamboo); }
.chip.p { border-color: rgba(255,111,174,0.35); background: var(--blossom-wash); color: var(--blossom); }
.chip.a { border-color: rgba(255,207,90,0.35); background: var(--amber-wash); color: var(--amber); }
.chip.r { border-color: rgba(255,77,99,0.35); background: var(--red-wash); color: #ff8a99; }
.chip.solid-g { background: var(--bamboo); color: var(--bamboo-ink); border-color: var(--bamboo); }
.chip.solid-p { background: var(--blossom); color: var(--blossom-ink); border-color: var(--blossom); }
.chip.mono { font-family: var(--f-mono); font-weight: 400; }
.chip.sm { height: 20px; padding: 0 6px; font-size: 11px; }
.chip button.x { border: 0; background: none; cursor: pointer; color: inherit; padding: 0; margin-left: 2px; display: grid; place-items: center; opacity: 0.7; }
.chip button.x:hover { opacity: 1; }
.stamp { font-family: var(--f-pixel); font-size: 9.5px; letter-spacing: 0.12em; padding: 3px 6px 2px; text-transform: uppercase; line-height: 1; display: inline-block; }
.stamp.g { background: var(--bamboo); color: var(--bamboo-ink); }
.stamp.p { background: var(--blossom); color: var(--blossom-ink); }
.stamp.k { background: var(--ink-4); color: var(--text-2); }
.stamp.a { background: var(--amber); color: #2a1d00; }
.stamp.r { background: var(--red); color: #2a0108; }

/* ---------------------------------------------------------------- tabs */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 22px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 13px; color: var(--text-3); font-weight: 650; font-size: 13.5px;
  position: relative; white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs a.on, .tabs button.on { color: var(--text); }
.tabs a.on::after, .tabs button.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: repeating-linear-gradient(90deg, var(--bamboo) 0 18px, var(--bamboo-deep) 18px 20px); }
.tabs .badge { min-width: 18px; height: 18px; padding: 0 5px; background: var(--blossom); color: var(--blossom-ink); font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.subtabs { display: inline-flex; border: 1px solid var(--line-2); background: var(--ink-1); }
.subtabs button { border: 0; background: none; padding: 9px 14px; font-weight: 650; font-size: 13px; color: var(--text-3); cursor: pointer; display: flex; align-items: center; gap: 7px; border-right: 1px solid var(--line); }
.subtabs button:last-child { border-right: 0; }
.subtabs button:hover { color: var(--text); background: var(--ink-3); }
.subtabs button.on { color: var(--text); background: var(--ink-3); box-shadow: inset 0 -3px 0 var(--blossom); }

/* ---------------------------------------------------------------- bamboo progress */

.bar { height: 14px; background: var(--ink-0); border: 1px solid var(--line-3); position: relative; overflow: hidden; }
.bar > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0 2px, transparent 2px calc(100% - 3px), rgba(0,0,0,0.25) calc(100% - 3px)),
    repeating-linear-gradient(90deg, var(--bamboo) 0 26px, var(--bamboo-deep) 26px 28px);
  transition: width 0.3s steps(6);
}
.bar.pink > i { background: linear-gradient(180deg, rgba(255,255,255,0.28) 0 2px, transparent 2px calc(100% - 3px), rgba(0,0,0,0.25) calc(100% - 3px)), repeating-linear-gradient(90deg, var(--blossom) 0 26px, var(--blossom-deep) 26px 28px); }
.bar.busy > i { width: 100% !important; background: repeating-linear-gradient(-45deg, var(--bamboo) 0 10px, var(--bamboo-lo) 10px 20px); background-size: 28px 28px; animation: crawl 0.8s linear infinite; opacity: 0.75; }
@keyframes crawl { to { background-position: 28px 0; } }
.bar.thin { height: 6px; }
.bar.thin > i { background: var(--bamboo); }
.bar.thin.pink > i { background: var(--blossom); }
.bar.thin.warn > i { background: var(--amber); }
.bar.thin.bad > i { background: var(--red); }

/* ---------------------------------------------------------------- tooltip */

.tip-btn { width: 17px; height: 17px; display: inline-grid; place-items: center; border: 1px solid var(--line-3); background: var(--ink-2); color: var(--text-3); font-family: var(--f-pixel); font-size: 10px; cursor: help; flex: none; padding: 0; line-height: 1; }
.tip-btn:hover, .tip-btn:focus { color: var(--blossom); border-color: var(--blossom); }
.tooltip {
  position: fixed; z-index: 200; max-width: 320px; padding: 10px 12px; pointer-events: none;
  background: var(--text); color: var(--ink-0); font-size: 12.8px; line-height: 1.45; font-weight: 520;
  box-shadow: 4px 4px 0 var(--blossom);
}
.tooltip b { display: block; font-family: var(--f-display); font-size: 12px; margin-bottom: 3px; }
.tooltip .k { font-family: var(--f-mono); font-size: 10.5px; color: #59645a; display: block; margin-top: 6px; }

/* ---------------------------------------------------------------- modal */

.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(3, 4, 3, 0.74); display: grid; place-items: center; padding: 20px; animation: fade 0.12s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--ink-1); border: 1px solid var(--line-3); box-shadow: 8px 8px 0 rgba(255,111,174,0.9); animation: pop 0.14s steps(3); }
.modal.wide { width: min(880px, 100%); }
.modal.xwide { width: min(1080px, 100%); }
@keyframes pop { from { transform: translateY(10px); opacity: 0; } }
.modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-b { padding: 20px; overflow-y: auto; }
.modal-f { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- toasts */

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 40px)); }
.toast { display: flex; gap: 12px; padding: 13px 14px; background: var(--ink-2); border: 1px solid var(--line-3); box-shadow: 0 14px 34px rgba(0,0,0,0.55); position: relative; animation: slidein 0.18s steps(4); cursor: pointer; }
.toast::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--text-3); }
.toast.success::before { background: var(--bamboo); }
.toast.info::before { background: var(--blossom); }
.toast.error::before { background: var(--red); }
.toast.warn::before { background: var(--amber); }
.toast .tt { font-weight: 700; font-size: 13.5px; }
.toast .tb { color: var(--text-2); font-size: 12.8px; margin-top: 2px; }
.toast .ti { color: var(--text-3); flex: none; margin-top: 1px; }
.toast.success .ti { color: var(--bamboo); }
.toast.error .ti { color: var(--red); }
.toast.info .ti { color: var(--blossom); }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } }

/* ---------------------------------------------------------------- drawer */

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 90; background: var(--ink-1); border-left: 1px solid var(--line-3); display: flex; flex-direction: column; animation: slidein 0.16s steps(4); box-shadow: -20px 0 50px rgba(0,0,0,0.5); }
.drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; height: var(--top-h); border-bottom: 1px solid var(--line); }
.drawer-b { padding: 16px 20px; overflow-y: auto; flex: 1; }
.scrim { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,0.4); }

.task { padding: 14px 0; border-bottom: 1px dashed var(--line-2); }
.task:last-child { border-bottom: 0; }
.task .tt { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.task .ts { color: var(--text-3); font-size: 12.5px; margin: 4px 0 8px; }

/* ---------------------------------------------------------------- dashboard */

.hero-strip { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.statcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.stat { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.stat .sk { display: flex; align-items: center; justify-content: space-between; }
.stat .sv { font-family: var(--f-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.stat .sv small { font-family: var(--f-body); font-size: 13px; color: var(--text-3); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.stat .chart { margin-top: auto; }

.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.srv-card { display: flex; flex-direction: column; transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s; cursor: pointer; }
.srv-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent, var(--bamboo)); border-color: var(--line-3); }
.srv-card .stripe { height: 4px; background: repeating-linear-gradient(90deg, var(--accent, var(--bamboo)) 0 22px, transparent 22px 24px); }
.srv-card .body { padding: 16px 16px 12px; display: flex; gap: 14px; }
.srv-card .name { font-family: var(--f-display); font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.srv-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.srv-card .foot { margin-top: auto; padding: 10px 16px 14px; display: flex; align-items: center; gap: 10px; border-top: 1px dashed var(--line); }
.srv-card .players { font-family: var(--f-mono); font-size: 12.5px; color: var(--text-2); }
.srv-avatar { width: 52px; height: 52px; flex: none; background: var(--ink-0); border: 1px solid var(--line-2); display: grid; place-items: center; overflow: hidden; }
.srv-avatar img { width: 100%; height: 100%; image-rendering: pixelated; }
.srv-avatar.lg { width: 72px; height: 72px; }
.new-tile { border: 2px dashed var(--line-3); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 196px; color: var(--text-2); cursor: pointer; font-weight: 650; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.new-tile:hover { border-color: var(--blossom); color: var(--blossom); background: var(--blossom-wash); text-decoration: none; }
.new-tile .plus { width: 46px; height: 46px; background: var(--blossom); color: var(--blossom-ink); display: grid; place-items: center; box-shadow: 0 3px 0 var(--blossom-deep); }

.feed { display: flex; flex-direction: column; }
.feed .fi { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 13px; align-items: flex-start; }
.feed .fi:last-child { border-bottom: 0; }
.feed .fi .when { margin-left: auto; color: var(--text-4); font-family: var(--f-mono); font-size: 11px; white-space: nowrap; }

/* ---------------------------------------------------------------- the ticket (join card) */

.ticket { position: relative; background: var(--blossom); color: var(--blossom-ink); display: grid; grid-template-columns: minmax(0, 1fr) 132px; box-shadow: 0 4px 0 var(--blossom-deep); min-height: 196px; }
.ticket.green { background: var(--bamboo); color: var(--bamboo-ink); box-shadow: 0 4px 0 var(--bamboo-deep); }
.ticket .main-part { padding: 18px 22px 18px; min-width: 0; display: flex; flex-direction: column; }
.ticket .stub { border-left: 3px dashed rgba(43, 6, 22, 0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px; position: relative; }
.ticket.green .stub { border-left-color: rgba(11, 26, 6, 0.3); }
.ticket .stub::before, .ticket .stub::after { content: ''; position: absolute; left: -12px; width: 20px; height: 20px; background: var(--ink-0); border-radius: 50%; }
.ticket .stub::before { top: -10px; }
.ticket .stub::after { bottom: -14px; }
.ticket .t-k { font-family: var(--f-pixel); font-size: 10px; letter-spacing: 0.16em; opacity: 0.75; display: flex; align-items: center; gap: 8px; }
.ticket .t-addr { font-family: var(--f-display); font-weight: 900; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: -0.03em; line-height: 1.05; margin: 10px 0 4px; word-break: break-all; }
.ticket .t-port { font-family: var(--f-mono); font-size: 13px; font-weight: 700; opacity: 0.8; }
.ticket .t-tabs { display: flex; gap: 4px; margin-top: auto; padding-top: 14px; flex-wrap: wrap; }
.ticket .t-tabs button { border: 1.5px solid currentColor; background: transparent; color: inherit; height: 28px; padding: 0 10px; font-weight: 700; font-size: 12px; cursor: pointer; opacity: 0.75; }
.ticket .t-tabs button:hover { opacity: 1; }
.ticket .t-tabs button.on { background: var(--ink-0); color: var(--text); border-color: var(--ink-0); opacity: 1; }
.ticket .copy {
  width: 92px; height: 92px; background: var(--ink-0); color: var(--text); border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-pixel); font-size: 11px; letter-spacing: 0.12em; box-shadow: 0 4px 0 rgba(0,0,0,0.45); transition: transform var(--press), box-shadow var(--press);
}
.ticket .copy:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.45); }
.ticket .copy.done { color: var(--bamboo); }
.ticket .note { font-size: 12.5px; font-weight: 600; opacity: 0.85; }
.ticket .note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }

/* ---------------------------------------------------------------- server page */

.srv-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.srv-head .title { min-width: 0; flex: 1; }
.srv-head h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.srv-head .meta { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
.power { display: flex; gap: 8px; flex-wrap: wrap; }

.alert { display: flex; gap: 13px; padding: 13px 16px; border: 1px solid var(--line-2); background: var(--ink-2); align-items: flex-start; }
.alert .ai { flex: none; margin-top: 1px; }
.alert .at { font-weight: 700; }
.alert .ab { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.alert.error { border-color: rgba(255,77,99,0.4); background: linear-gradient(90deg, var(--red-wash), transparent 60%), var(--ink-2); }
.alert.error .ai { color: var(--red); }
.alert.warn { border-color: rgba(255,207,90,0.35); background: linear-gradient(90deg, var(--amber-wash), transparent 60%), var(--ink-2); }
.alert.warn .ai { color: var(--amber); }
.alert.ok { border-color: rgba(141,243,91,0.35); background: linear-gradient(90deg, var(--bamboo-wash), transparent 60%), var(--ink-2); }
.alert.ok .ai { color: var(--bamboo); }
.alert.info { border-color: rgba(255,111,174,0.35); background: linear-gradient(90deg, var(--blossom-wash), transparent 60%), var(--ink-2); }
.alert.info .ai { color: var(--blossom); }

.autofix { border: 1px solid rgba(141,243,91,0.45); background: var(--ink-2); display: flex; gap: 14px; align-items: center; padding: 12px 16px; position: relative; overflow: hidden; }
.autofix::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: repeating-linear-gradient(180deg, var(--bamboo) 0 8px, var(--bamboo-deep) 8px 10px); }
.autofix .ico { width: 34px; height: 34px; background: var(--bamboo); color: var(--bamboo-ink); display: grid; place-items: center; flex: none; box-shadow: 0 3px 0 var(--bamboo-deep); }

.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qa { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--line-2); background: var(--ink-2); cursor: pointer; text-align: left; font-weight: 650; font-size: 13px; transition: border-color 0.1s, transform 0.08s; box-shadow: 0 3px 0 #070807; }
.qa:hover { border-color: var(--bamboo); }
.qa:active { transform: translateY(2px); box-shadow: 0 1px 0 #070807; }
.qa .ic { color: var(--bamboo); }
.qa:disabled { opacity: 0.4; cursor: not-allowed; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-family: var(--f-mono); font-size: 12.5px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- console */

.console-wrap { display: flex; flex-direction: column; height: calc(100vh - 300px); min-height: 440px; background: #040504; border: 1px solid var(--line); }
.console-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--ink-1); flex-wrap: wrap; }
.console-bar .input { height: 31px; font-size: 13px; }
.filt { display: inline-flex; gap: 2px; }
.filt button { height: 29px; padding: 0 10px; border: 1px solid transparent; background: none; color: var(--text-3); font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.filt button:hover { color: var(--text); }
.filt button.on { border-color: var(--line-3); background: var(--ink-3); color: var(--text); }
.filt .n { font-family: var(--f-mono); font-size: 10.5px; padding: 1px 5px; background: var(--ink-4); color: var(--text-2); }
.filt .n.w { background: var(--amber); color: #241900; }
.filt .n.e { background: var(--red); color: #22040a; }
.console { flex: 1; overflow-y: auto; overflow-x: auto; padding: 10px 0 14px; font-family: var(--f-mono); font-size: 12.6px; line-height: 1.58; color: #d4ddd0; overscroll-behavior: contain; }
.console.nowrap .ln { white-space: pre; }
.console .ln { padding: 0 14px 0 12px; white-space: pre-wrap; word-break: break-word; border-left: 3px solid transparent; }
.console .ln:hover { background: rgba(255,255,255,0.025); }
.console .ln .ts { color: #4f5a4d; user-select: none; margin-right: 10px; }
.console .ln .tag { color: #6c8667; }
.console .ln .lv { display: inline-block; font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.08em; padding: 1px 4px; margin-right: 8px; vertical-align: 1px; line-height: 1.2; }
.console .ln.w { color: #ffd77a; border-left-color: var(--amber); background: rgba(255,207,90,0.045); }
.console .ln.w .lv { background: var(--amber); color: #231800; }
.console .ln.e { color: #ff8d9d; border-left-color: var(--red); background: rgba(255,77,99,0.07); }
.console .ln.e .lv { background: var(--red); color: #22040a; }
.console .ln.d { color: #75806f; }
.console .ln.p { color: var(--blossom-hi); }
.console .ln.p .lv { background: var(--blossom); color: var(--blossom-ink); }
.console .ln.i { color: var(--bamboo); }
.console .ln.i .lv { background: var(--bamboo); color: var(--bamboo-ink); }
.console .ln.ready { color: var(--bamboo); font-weight: 700; }
.console .ln .pl { color: var(--blossom); font-weight: 700; }
.console .ln .cm { color: #ffffff; }
.console .ln .join { color: var(--bamboo); }
.console .ln .url { color: #9fd6ff; text-decoration: underline; text-underline-offset: 2px; }
.console .ln mark { background: var(--blossom); color: var(--blossom-ink); padding: 0 1px; }
.console .grp > .more { display: none; }
.console .grp.open > .more { display: block; }
.console .grp .tgl { cursor: pointer; font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.08em; margin-left: 10px; padding: 1px 5px; background: rgba(255,77,99,0.18); color: #ff9fac; border: 0; vertical-align: 1px; }
.console .grp .tgl:hover { background: rgba(255,77,99,0.35); }
.console .grp.w-grp .tgl { background: rgba(255,207,90,0.18); color: #ffd77a; }
.console.f-warn .ln:not(.w):not(.e), .console.f-warn .grp:not(.has-w):not(.has-e) { display: none; }
.console.f-error .ln:not(.e), .console.f-error .grp:not(.has-e) { display: none; }
.console.f-chat .ln:not(.c) { display: none; }
.console.f-panda .ln:not(.p):not(.in) { display: none; }
.console.f-warn .grp .ln, .console.f-error .grp .ln { display: block; }
.console.searching .ln:not(.hit), .console.searching .grp:not(.hit) { display: none; }
.console.searching .grp.hit .ln { display: block; }
.console .ln.in { color: var(--bamboo-hi); }
.console .ln.in::before { content: ''; }
.console-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--ink-1); }
.console-input .prompt { width: 34px; height: 38px; display: grid; place-items: center; background: var(--bamboo); color: var(--bamboo-ink); font-family: var(--f-mono); font-weight: 700; flex: none; }
.console-input .input { font-family: var(--f-mono); font-size: 13px; height: 38px; }
.console-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-family: var(--f-body); }
.jump { position: absolute; right: 22px; bottom: 74px; z-index: 3; }

/* ---------------------------------------------------------------- players + chat */

.plist { display: flex; flex-direction: column; }
.prow { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow:hover { background: var(--ink-2); }
.head { width: 36px; height: 36px; flex: none; image-rendering: pixelated; background: var(--ink-3); box-shadow: 0 2px 0 #000; }
.head.sm { width: 26px; height: 26px; }
.head.lg { width: 48px; height: 48px; }
.prow .pn { font-weight: 700; display: flex; align-items: center; gap: 7px; }
.prow .ps { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.prow .acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.chat-box { display: flex; flex-direction: column; height: calc(100vh - 290px); min-height: 460px; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; background: #040504; }
.cmsg { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; font-size: 13.5px; }
.cmsg .head { width: 22px; height: 22px; margin-top: 1px; }
.cmsg .who { font-weight: 750; color: var(--blossom); margin-right: 6px; }
.cmsg .when { color: var(--text-4); font-family: var(--f-mono); font-size: 10.5px; margin-left: auto; padding-left: 10px; white-space: nowrap; }
.cmsg.sys { color: var(--text-3); font-size: 12.5px; }
.cmsg.sys .who { color: var(--bamboo); }
.cmsg.bc { background: var(--blossom-wash); padding: 6px 8px; border-left: 3px solid var(--blossom); }
.cmsg.death .who { color: #ff8a99; }
.bc-box { border-top: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--ink-1); }

/* ---------------------------------------------------------------- content browser */

.content-row { display: flex; align-items: center; gap: 13px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.content-row:last-child { border-bottom: 0; }
.content-row:hover { background: var(--ink-2); }
.content-row.off { opacity: 0.55; }
.c-icon { width: 40px; height: 40px; flex: none; background: var(--ink-3); border: 1px solid var(--line-2); display: grid; place-items: center; overflow: hidden; color: var(--text-3); }
.c-icon img { width: 100%; height: 100%; object-fit: cover; }
.c-icon.lg { width: 64px; height: 64px; }
.c-name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pcard { display: flex; flex-direction: column; padding: 14px; gap: 10px; background: var(--ink-1); border: 1px solid var(--line); cursor: pointer; transition: border-color 0.1s, transform 0.1s, box-shadow 0.1s; }
.pcard:hover { border-color: var(--line-3); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--bamboo); }
.pcard.cf:hover { box-shadow: 4px 4px 0 var(--blossom); }
.pcard .top-row { display: flex; gap: 12px; }
.pcard .pt { font-weight: 750; font-size: 14.5px; line-height: 1.25; }
.pcard .pa { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.pcard .pd { font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 37px; }
.pcard .pf { display: flex; align-items: center; gap: 10px; margin-top: auto; font-family: var(--f-mono); font-size: 11.5px; color: var(--text-3); }
.pcard .pf .btn { margin-left: auto; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line-2); background: var(--ink-3); }

.dropzone { border: 2px dashed var(--line-3); padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text-2); transition: border-color 0.12s, background 0.12s; cursor: pointer; }
.dropzone:hover { border-color: var(--bamboo); }
.dropzone.over { border-color: var(--blossom); background: var(--blossom-wash); color: var(--text); }
.dropzone .dz-ic { width: 48px; height: 48px; display: grid; place-items: center; background: var(--ink-3); border: 1px solid var(--line-3); color: var(--bamboo); }
.drop-veil { position: fixed; inset: 0; z-index: 150; background: rgba(255, 111, 174, 0.14); border: 4px dashed var(--blossom); display: grid; place-items: center; pointer-events: none; }
.drop-veil div { background: var(--blossom); color: var(--blossom-ink); padding: 18px 26px; font-family: var(--f-display); font-weight: 700; font-size: 20px; box-shadow: 6px 6px 0 var(--ink-0); }

/* ---------------------------------------------------------------- property + gamerule editors */

.prop-group { margin-bottom: 22px; }
.prop-group > h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.prop-group > h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.prop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.prop { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); min-width: 0; }
.prop .pl { flex: 1; min-width: 0; }
.prop .pl .t { font-weight: 650; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.prop .pl .k { font-family: var(--f-mono); font-size: 10.5px; color: var(--text-4); margin-top: 2px; }
.prop .pc { flex: none; display: flex; align-items: center; gap: 8px; }
.prop .pc .input, .prop .pc .select { width: 210px; height: 34px; font-size: 13px; }
.prop .pc .input.num { width: 110px; }
.prop.changed .t::before { content: ''; width: 7px; height: 7px; background: var(--blossom); display: inline-block; }
.prop.wide { grid-column: span 2; }
.prop.wide .pc { flex: 1; justify-content: flex-end; }
.prop.wide .pc .input { width: 100%; max-width: 520px; }
.savebar { position: sticky; bottom: 16px; z-index: 20; margin-top: 18px; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; background: var(--ink-2); border: 1px solid var(--blossom); box-shadow: 6px 6px 0 rgba(255,111,174,0.35); animation: pop 0.14s steps(3); }

.rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.rule { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--ink-1); border: 1px solid var(--line); }
.rule.on { border-color: rgba(141,243,91,0.3); }
.rule .rt { font-weight: 650; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.rule .rk { font-family: var(--f-mono); font-size: 10.5px; color: var(--text-4); margin-top: 1px; }
.rule .input { width: 92px; height: 32px; font-family: var(--f-mono); }

/* ---------------------------------------------------------------- roles */

.role { border: 1px solid var(--line); background: var(--ink-1); }
.role-h { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.role-swatch { width: 26px; height: 26px; flex: none; border: 0; padding: 0; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.6); }
.role-b { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.perm-list { display: flex; flex-wrap: wrap; gap: 6px; }
.member-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.member-list .chip { padding-left: 3px; }
.member-list .chip img { width: 18px; height: 18px; image-rendering: pixelated; }
.levels { display: flex; gap: 4px; }
.levels button { width: 34px; height: 30px; border: 1px solid var(--line-2); background: var(--ink-0); color: var(--text-3); font-family: var(--f-mono); font-weight: 700; cursor: pointer; }
.levels button.on { background: var(--blossom); border-color: var(--blossom); color: var(--blossom-ink); }

/* ---------------------------------------------------------------- files */

.fm-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.crumbs-path { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 13px; }
.crumbs-path button { border: 0; background: none; color: var(--text-2); cursor: pointer; padding: 3px 5px; }
.crumbs-path button:hover { color: var(--bamboo); background: var(--ink-3); }
.frow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 110px 150px 90px; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: default; }
.frow:hover { background: var(--ink-2); }
.frow .fname { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.frow .fname:hover { color: var(--bamboo); }
.frow .fsize, .frow .fdate { font-family: var(--f-mono); font-size: 11.5px; color: var(--text-3); }
.frow .facts { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; }
.frow:hover .facts { opacity: 1; }
.frow .fic { color: var(--text-3); display: grid; place-items: center; }
.frow .fic.dir { color: var(--bamboo); }
.editor { width: 100%; min-height: 60vh; font-family: var(--f-mono); font-size: 13px; line-height: 1.55; background: #040504; color: #dfe7db; border: 1px solid var(--line-2); padding: 14px; resize: vertical; outline: none; tab-size: 2; }
.editor:focus { border-color: var(--bamboo); }

/* ---------------------------------------------------------------- create wizard */

.wizard { max-width: 1100px; margin: 0 auto; }
.steps { display: flex; gap: 0; margin-bottom: 26px; border: 1px solid var(--line); background: var(--ink-1); }
.steps .st { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text-4); font-weight: 650; font-size: 13px; border-right: 1px solid var(--line); min-width: 0; }
.steps .st:last-child { border-right: 0; }
.steps .st .n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: 12px; border: 1px solid var(--line-3); }
.steps .st.on { color: var(--text); background: var(--ink-2); }
.steps .st.on .n { background: var(--blossom); border-color: var(--blossom); color: var(--blossom-ink); }
.steps .st.done { color: var(--text-2); }
.steps .st.done .n { background: var(--bamboo); border-color: var(--bamboo); color: var(--bamboo-ink); }
.flavors { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.flavor { display: flex; flex-direction: column; gap: 10px; padding: 18px; text-align: left; cursor: pointer; background: var(--ink-1); border: 1px solid var(--line-2); color: var(--text); position: relative; transition: transform 0.08s, box-shadow 0.08s, border-color 0.1s; }
.flavor:hover { border-color: var(--line-3); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--line-3); }
.flavor.on { border-color: var(--bamboo); box-shadow: 4px 4px 0 var(--bamboo); transform: translate(-2px, -2px); }
.flavor.pack.on { border-color: var(--blossom); box-shadow: 4px 4px 0 var(--blossom); }
.flavor .fl-ic { width: 48px; height: 48px; }
.flavor .fl-t { font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.flavor .fl-d { color: var(--text-2); font-size: 13px; }
.flavor .fl-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.flavor .rec { position: absolute; top: 14px; right: 14px; }
.motd-preview { background: #1d1d1d url() repeat; border: 2px solid #000; padding: 8px 10px; display: flex; gap: 10px; align-items: center; font-family: 'Silk', var(--f-mono); }
.motd-preview .icon { width: 48px; height: 48px; flex: none; image-rendering: pixelated; background: #333; }
.motd-preview .sn { color: #fff; font-size: 13px; letter-spacing: 0.02em; }
.motd-preview .sm { color: #aaa; font-size: 12px; margin-top: 3px; letter-spacing: 0.02em; white-space: pre; overflow: hidden; }
.motd-preview .sp { margin-left: auto; color: #aaa; font-size: 12px; align-self: flex-start; }
.ram-readout { font-family: var(--f-display); font-weight: 700; font-size: 26px; }
.ram-readout small { font-family: var(--f-body); font-size: 13px; color: var(--text-3); font-weight: 500; }

.picker { position: relative; }
.picker-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow-y: auto; background: var(--ink-1); border: 1px solid var(--line-3); box-shadow: 0 14px 30px rgba(0,0,0,0.6); }
.picker-list button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--f-mono); font-size: 13px; color: var(--text-2); }
.picker-list button:hover, .picker-list button.act { background: var(--ink-3); color: var(--text); }
.picker-list button.sel { color: var(--bamboo); }

/* ---------------------------------------------------------------- setup + login */

.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate-card { width: min(620px, 100%); }
.gate-card.wide { width: min(880px, 100%); }
.gate-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; justify-content: center; }
.hello { font-family: var(--f-display); font-weight: 900; font-size: clamp(34px, 6vw, 58px); letter-spacing: -0.035em; line-height: 0.98; }
.hello .p { color: var(--blossom); }
.hello .a { color: var(--bamboo); }
.founders { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-2); background: var(--ink-1); font-size: 13px; color: var(--text-2); }
.founders b { color: var(--text); }
.big-panda { width: 132px; height: 132px; margin: 0 auto 26px; background: var(--blossom); display: grid; place-items: center; box-shadow: 0 6px 0 var(--blossom-deep), 10px 16px 0 var(--bamboo); position: relative; }
.wifi-list { display: flex; flex-direction: column; border: 1px solid var(--line); max-height: 320px; overflow-y: auto; }
.wifi-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--ink-1); cursor: pointer; text-align: left; color: var(--text); }
.wifi-item:hover { background: var(--ink-3); }
.wifi-item.act { box-shadow: inset 4px 0 0 var(--bamboo); }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sig i { width: 4px; background: var(--line-3); display: block; }
.sig i.on { background: var(--bamboo); }
.qr { width: 150px; height: 150px; background: var(--text); padding: 8px; flex: none; }
.qr img { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- empty */

.empty { padding: 48px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; color: var(--text-3); }
.empty .et { font-family: var(--f-display); font-weight: 700; color: var(--text); font-size: 17px; }
.empty .art { width: 84px; height: 84px; background: var(--ink-3); display: grid; place-items: center; box-shadow: 0 4px 0 #000; }

.skeleton { background: linear-gradient(90deg, var(--ink-2), var(--ink-3), var(--ink-2)); background-size: 200% 100%; animation: shimmer 1.2s steps(10) infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- tables */

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-family: var(--f-pixel); font-weight: 400; font-size: 9.5px; letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.table td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--ink-2); }

/* ---------------------------------------------------------------- scrollbars */

* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid var(--ink-0); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1240px) {
  .hero-strip { grid-template-columns: 1fr; }
  .g-side { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meter { min-width: 0; }
  .meter .spark { display: none; }
}
@media (max-width: 1000px) {
  .prop-grid { grid-template-columns: 1fr; }
  .prop.wide { grid-column: auto; }
  .g3 { grid-template-columns: 1fr 1fr; }
  .g-side-l { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform 0.18s steps(5); box-shadow: 20px 0 40px rgba(0,0,0,0.5); }
  .side.open { transform: none; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar .menu-btn { display: grid; }
  .topbar .crumbs { font-size: 13px; }
  .tunnel-pill .lbl-txt { display: none; }
  .tunnel-pill { padding: 0 10px; }
  .meter { padding: 5px 8px; gap: 6px; }
  .meter .mk { font-size: 8px; }
  .meter .mv { font-size: 12px; }
  .page { padding: 18px 16px 70px; }
  .g2, .g3, .g4, .statcards { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  h1 { font-size: 21px; }
  .ticket { grid-template-columns: 1fr; }
  .ticket .stub { border-left: 0; border-top: 3px dashed rgba(43,6,22,0.35); flex-direction: row; padding: 12px; }
  .ticket .stub::before, .ticket .stub::after { display: none; }
  .ticket .copy { width: 100%; height: 52px; flex-direction: row; }
  .console-wrap { height: calc(100vh - 230px); }
  .frow { grid-template-columns: 24px minmax(0, 1fr) 80px; }
  .frow .fdate, .frow .facts { display: none; }
  .prow { flex-wrap: wrap; }
  .prow .acts { margin-left: 48px; justify-content: flex-start; }
  .prop .pc .input, .prop .pc .select { width: 150px; }
  .steps .st span.lbl-txt { display: none; }
  .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .modal { box-shadow: 5px 5px 0 rgba(255,111,174,0.9); }
  .chat-box { height: 70vh; }
}
@media (max-width: 520px) {
  .meters .meter.ram { display: none; }
  .srv-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}