/* RefugeBot SaaS — frost theme, matched to PlayerShop hub palette */
:root {
  --bg:        #060a0f;
  --bg2:       #0f1620;
  --bg3:       #1a2432;
  --panel:     rgba(15,22,32,.78);
  --border:    rgba(125,211,252,.14);
  --border-hi: rgba(125,211,252,.38);
  --accent:    #26c6da;
  --accent2:   #7dd3fc;
  --accent3:   #a5e3ff;
  --ember:     #ff8340;
  --text:      #e5f2ff;
  --muted:     #7ea0bd;
  --green:     #4ade80;
  --red:       #f87171;
  --gold:      #fbbf24;
  --radius:    12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --mono:      'JetBrains Mono','Consolas',monospace;
  --sans:      'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-pop:  cubic-bezier(.34,1.3,.64,1);
  --shadow-md: 0 10px 30px rgba(0,10,20,.45);
  --shadow-lg: 0 24px 60px rgba(0,20,40,.55);
  --glow:      0 0 24px rgba(38,198,218,.3);
}
*           { box-sizing: border-box; margin: 0; padding: 0; }
html        { min-height: 100%; background: #040608; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  /* min-height accounts for the iOS Safari URL bar's safe-area inset so the
     wallpaper can bleed all the way to the bottom of the viewport without a
     visible black strip where the URL bar sits. */
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport height — adjusts as the URL bar shows/hides */
  padding: 28px 20px calc(100px + env(safe-area-inset-bottom));
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
  padding-top: calc(28px + env(safe-area-inset-top));
  background-color: #04070b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Wallpaper lives on a fixed-position pseudo-element instead of the body's
   background-attachment:fixed. iOS Safari ignores background-attachment:fixed
   (silently treats it as scroll), and even Chrome can flash repaint seams
   when scrolling huge radial gradients on long pages. A real fixed pseudo
   bypasses both quirks — it's a regular fixed element so it paints to the
   viewport once and stays put while content scrolls over it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #04070b;
  background-image:
    radial-gradient(1200px 800px at 15% -10%, rgba(38,198,218,.18), transparent 65%),
    radial-gradient(1000px 700px at 92% 112%, rgba(255,131,64,.10), transparent 60%),
    radial-gradient(1600px 900px at 50% 50%,  rgba(125,211,252,.05), transparent 70%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* Cover the viewport — sizes are intrinsically relative to the pseudo's
     own box (which IS the viewport because of position:fixed inset:0). */
  background-size: 100% 100%, 100% 100%, 100% 100%;
}
a       { color: var(--accent2); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent3); }

.wrap { max-width: 1120px; margin: 0 auto; }

/* Console toolbar (port of legacy .term-badge / .term-btn) */
.con-badge { padding:5px 9px; border:1px solid var(--border); border-radius:6px; background:rgba(0,0,0,.3); color:var(--muted); font-family:var(--mono); font-size:11px; cursor:pointer; transition:all .12s; display:inline-flex; align-items:center; gap:6px; }
.con-badge:hover { color:var(--text); border-color:var(--border-hi); }
.con-badge.active { color:var(--accent); border-color:var(--accent); background:rgba(38,198,218,.08); }
.con-bct { font-size:9px; padding:1px 5px; border-radius:3px; background:rgba(0,0,0,.4); color:var(--muted); }
.con-badge.active .con-bct { background:rgba(38,198,218,.2); color:var(--accent); }
.con-btn { padding:5px 10px; border:1px solid var(--border); border-radius:6px; background:rgba(0,0,0,.3); color:var(--muted); font-family:var(--mono); font-size:11px; cursor:pointer; transition:all .12s; }
.con-btn:hover { color:var(--text); border-color:var(--border-hi); }
.con-btn.active { color:var(--accent); border-color:var(--accent); background:rgba(38,198,218,.08); }

/* Admin sidebar nav (port of legacy .nav-btn vertical sidebar) */
.admin-shell { max-width: 100%; }
.side-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 0 6px;
  color: var(--muted); font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  border-radius: 8px; border-left: 2px solid transparent;
  transition: all .15s ease;
}
.side-tab:hover { color: var(--text); background: rgba(38,198,218,.06); }
.side-tab.active {
  color: var(--accent); background: rgba(38,198,218,.1);
  border-left-color: var(--accent);
}
.side-tab .ico { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.side-tab .ico svg { width: 16px; height: 16px; transition: transform .15s; }
.side-tab:hover .ico svg { transform: scale(1.1); }
.side-tab.active .ico svg { filter: drop-shadow(0 0 4px currentColor); }
.side-tab .lbl { flex: 1; }
@media (max-width: 800px) {
  .admin-shell { grid-template-columns: 1fr !important; }
  .admin-side { position: static !important; flex-direction: row !important; flex-wrap: wrap; overflow-x: auto; }
  .side-tab { padding: 8px 10px; font-size: 12px; }
  .side-tab .lbl { display: none; }
}

/* Themed scrollbars — match the frost cyan accent so admin pages don't show
   the OS-default chrome scrollbar. Webkit (Chrome/Edge/Safari) + Firefox. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,.35); border-radius: 5px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(38,198,218,.45), rgba(38,198,218,.25)); border-radius: 5px; border: 1px solid rgba(38,198,218,.15); }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(38,198,218,.7), rgba(38,198,218,.4)); }
*::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-color: rgba(38,198,218,.4) rgba(0,0,0,.35); scrollbar-width: thin; }

/* Animations */
/* fadeIn used to combine opacity + transform:translateY, but `both` fill-mode
   leaves the final transform applied permanently, which creates a containing
   block for descendant position:fixed elements (CSS spec: any non-none transform
   makes the element a CB for fixed children). That broke the player profile
   modal — it positioned relative to body instead of viewport. Use opacity only. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Tab pane fade — applied by Admin.cshtml's setTab() so swiping between
   tabs on mobile feels like a real page transition instead of a hard cut.
   Opacity-only on purpose: any transform here would create a containing
   block and re-break the modal positioning we fixed earlier. */
@keyframes paneFadeIn { from { opacity: 0; } to { opacity: 1; } }
section[data-pane].pane-enter { animation: paneFadeIn 220ms var(--ease) both; }

/* Hub (server selector) layout — desktop default + mobile collapse */
.hub-main-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-bottom: 28px; }
.hub-server-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.hub-side { display: flex; flex-direction: column; gap: 14px; }
/* Grid items default to min-width:auto which prevents shrinking below content
   width — that's what was making cards push past the viewport on phones when
   a child element (long server name, etc.) was wider than the viewport. */
.hub-main-grid > *,
.hub-server-grid > *,
.hub-side > * { min-width: 0; }
.server-card { box-sizing: border-box; min-width: 0; max-width: 100%; overflow: hidden; }
.server-card a.title { word-break: break-word; overflow-wrap: anywhere; display: block; }
.server-card .tenant { word-break: break-word; }
@media (max-width: 800px) {
  .hub-main-grid { grid-template-columns: 1fr !important; gap: 14px; margin-bottom: 18px; }
  .hub-server-grid { grid-template-columns: 1fr !important; }
  .server-card { padding: 14px !important; max-width: 100% !important; }
  .server-card .meta-row { font-size: 11px; flex-wrap: wrap !important; }
  .server-card .meta-row > * { max-width: 100%; }
  .kpi-tile { padding: 12px 14px !important; }
  .kpi-n { font-size: 20px !important; }
  /* Agent-key modal etc. — anything injected via JS into the page top with a
     fixed-width card breaks on narrow screens; force it to the viewport. */
  .wrap > section, .wrap > div { max-width: 100%; }
}
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 0 rgba(38,198,218,.3)} 50%{box-shadow:0 0 20px rgba(38,198,218,.35)} }
.page-fade { animation: fadeIn 320ms var(--ease) both; }

/* Hero */
.hero {
  max-width: 920px;
  margin: 80px auto 56px;
  padding: 56px 40px;
  text-align: center;
  background: linear-gradient(180deg, rgba(15,22,32,.88), rgba(10,16,24,.72));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--border-hi);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.hero h1 {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
.hero .tagline { font-size: 20px; color: var(--accent2); font-weight: 500; margin-bottom: 28px; }
.hero .lede    { font-size: 16px; color: var(--muted); max-width: 620px; margin: 0 auto 36px; }

/* Pricing cards */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 920px; margin: 0 auto 56px; }
.tier {
  background: var(--panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: left;
  transition: all .25s var(--ease);
}
.tier:hover { border-color: var(--border-hi); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tier.featured { border-color: var(--border-hi); box-shadow: var(--glow); }
.tier h3 { color: var(--accent); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.tier .price { font-size: 36px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.tier .price small { font-size: 14px; color: var(--muted); font-weight: 500; }
.tier .seats { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.tier ul { list-style: none; padding: 0; margin: 0 0 24px; font-size: 14px; }
.tier li { padding: 6px 0; color: var(--muted); }
.tier li::before { content: "✓ "; color: var(--accent); font-weight: 700; margin-right: 4px; }
.tier li.dim { color: rgba(126,160,189,.55); }
.tier li.dim::before { content: "— "; color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text);
  padding: 11px 22px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--sans); font-size: .9rem; font-weight: 500;
  transition: all .18s var(--ease); user-select: none; text-decoration: none;
}
.btn:hover  { border-color: var(--border-hi); background: rgba(125,211,252,.06); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,10,20,.3); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0a1420; border: none; font-weight: 700;
  box-shadow: 0 4px 14px rgba(38,198,218,.25);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(38,198,218,.4); filter: brightness(1.08); }

/* Status pill */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.32);
  color: var(--green); font-size: 12px; font-weight: 600; font-family: var(--mono);
}
.status-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulseGlow 2s var(--ease) infinite;
}

/* Status pill variants */
.status-pill-offline {
  background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.32); color: var(--red);
}
.status-pill-offline::before { background: var(--red); box-shadow: 0 0 8px var(--red); }
.status-pill-unknown {
  background: rgba(126,160,189,.10); border-color: rgba(126,160,189,.32); color: var(--muted);
}
.status-pill-unknown::before { background: var(--muted); box-shadow: none; animation: none; }

/* Status dots — small inline indicators in tables */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-online  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-offline { background: var(--muted); }

/* ─ Admin page ──────────────────────────────────────────────────────── */
.admin-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin: 28px 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.muted-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 600; }
.server-title { font-size: 32px; font-weight: 700; color: var(--text); margin: 4px 0; }

.admin-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.admin-tab {
  padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent; transition: all .18s var(--ease); text-decoration: none;
  margin-bottom: -1px;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tab.dim { opacity: .55; pointer-events: none; }
.admin-tab .soon {
  font-size: 10px; font-family: var(--mono); padding: 2px 6px; margin-left: 6px;
  background: rgba(126,160,189,.10); border-radius: var(--radius-pill); color: var(--muted);
}

.section-header { display: flex; justify-content: space-between; align-items: baseline; margin: 24px 0 12px; }
.section-header h2 { font-size: 18px; font-weight: 700; color: var(--text); }
.section-meta { font-size: 13px; color: var(--muted); font-family: var(--mono); }

.card {
  background: var(--panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  overflow: hidden;
}

.players-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.players-table th {
  text-align: left; padding: 12px 14px; color: var(--muted); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
}
.players-table td { padding: 12px 14px; border-bottom: 1px solid rgba(125,211,252,.06); color: var(--text); }
.players-table tr:last-child td { border-bottom: none; }
.players-table tr:hover td { background: rgba(125,211,252,.03); }
.players-table .mono { font-family: var(--mono); font-size: 12px; color: var(--accent2); }
.muted  { color: var(--muted); }
.center { text-align: center; padding: 24px !important; }

/* ─ Player shop ─────────────────────────────────────────────────────── */
.shop-identity { text-align: right; }
.wallet-pill {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(38,198,218,.10), rgba(125,211,252,.06));
  border: 1px solid var(--border-hi);
  box-shadow: var(--glow);
}
.wallet-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 600; }
.wallet-amt   { font-size: 24px; font-weight: 800; color: var(--accent2); font-family: var(--mono); }
.wallet-coin  { font-size: 11px; color: var(--coin); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

.btn-tiny { padding: 2px 8px !important; font-size: 11px !important; }
.btn-sm   { padding: 7px 14px; font-size: .82rem; }

.conn-banner {
  padding: 12px 18px; border-radius: var(--radius); margin-bottom: 24px;
  font-size: 14px; backdrop-filter: blur(8px);
}
.conn-banner-offline {
  background: rgba(248,113,113,.10);
  border: 1px solid rgba(248,113,113,.32);
  color: var(--text);
}
.conn-banner-offline strong { color: var(--red); }

.catalog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
  margin-bottom: 32px;
}
.shop-card {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; transition: all .2s var(--ease);
}
.shop-card:hover { border-color: var(--border-hi); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.shop-card-cat  { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); font-weight: 700; }
.shop-card-name { font-size: 18px; font-weight: 700; margin: 4px 0 8px; color: var(--text); }
.shop-card-meta { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.shop-card-meta code { color: var(--accent2); }
.shop-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.shop-price     { font-size: 18px; font-weight: 700; color: var(--coin); font-family: var(--mono); }
.shop-price .coin { font-size: 10px; color: var(--coin); text-transform: uppercase; letter-spacing: 1px; opacity: .8; margin-left: 2px; }

/* Footer — global brand line via ::before so every page gets it without
   touching every Razor file. The existing inline footer markup keeps its links. */
.footer {
  text-align: center; color: var(--muted); font-size: 12px;
  margin-top: 64px; padding: 32px 0 40px;
  border-top: 1px solid var(--border);
  position: relative;
}
.footer::before {
  content: "✦ Refuge Gaming · est 2025 · © 2026";
  display: block;
  background: linear-gradient(135deg, var(--accent3), var(--accent), var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family: var(--mono);
}
.footer a { margin: 0 8px; transition: color .15s; }
.footer a:hover { color: var(--accent2); }

/* Brand wordmark — used in the page header on Hub / Admin / Shop / Settings.
   Drop-in: <a class="rb-mark" href="/"><span class="rb-mark-glyph">RB</span> RefugeBot</a> */
.rb-mark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
  font-weight: 700; letter-spacing: .5px; font-size: 14px;
}
.rb-mark-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #0a1420, #060a0f);
  border: 1px solid var(--border-hi);
  font-family: var(--sans); font-weight: 800; font-size: 13px; letter-spacing: -1px;
  color: var(--accent2);
  box-shadow: 0 4px 12px rgba(38,198,218,.15);
}
.rb-mark:hover .rb-mark-glyph {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0a1420;
  border-color: var(--accent);
}

/* Top brand bar (small, above page header on logged-in pages) */
.brand-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; margin-bottom: 4px;
  border-bottom: 1px solid rgba(125,211,252,.05);
}
.brand-bar-right { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.brand-bar-right a { color: var(--muted); }
.brand-bar-right a:hover { color: var(--accent2); }

/* Landing-page feature trio — what RefugeBot uniquely does, under pricing. */
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;
  max-width: 980px; margin: 64px auto 16px;
}
.feature {
  background: var(--panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: all .25s var(--ease);
}
.feature:hover { border-color: var(--border-hi); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature .ico {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, rgba(38,198,218,.18), rgba(125,211,252,.10));
  border: 1px solid var(--border-hi);
}
.feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.feature p  { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Section divider used between hero and pricing */
.section-divider {
  text-align: center; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 4px;
  margin: 56px 0 24px;
  font-family: var(--mono);
}
.section-divider::before, .section-divider::after {
  content: ""; display: inline-block; width: 60px; height: 1px;
  background: linear-gradient(to right, transparent, var(--border-hi), transparent);
  vertical-align: middle; margin: 0 14px;
}

/* (No body animation — earlier ambientDrift was retiling the gradient layers
   and producing visible seams. Static fixed-to-viewport background is clean.) */

/* ─ Plugins page — port from legacy AdminPanel.html (theme-adjusted to cyan/ember) ─ */
.plg-page { max-width: 1100px; margin: 0 auto; }
.plg-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.plg-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.plg-hub-err { padding: 8px 12px; margin-bottom: 10px; background: rgba(244,67,54,.05); border-left: 3px solid #f44336; color: #ffb0b0; font-size: 12px; border-radius: 0 3px 3px 0; }
.plg-ci { padding: 12px 14px; margin-bottom: 16px; background: rgba(38,198,218,.04); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.plg-ci strong { color: var(--accent); }
.plg-ci code { background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 3px; font-family: var(--mono); font-size: 11px; color: var(--accent); }

.plg-section { margin-top: 26px; }
.plg-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.plg-section-title { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; letter-spacing: .3px; }
.plg-section-title .plg-sect-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.plg-section-sub { color: var(--muted); font-size: 12px; font-family: var(--mono); margin-left: 6px; font-weight: 400; }
.plg-section-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.plg-lib-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.plg-tab { padding: 5px 11px; border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .4px; transition: all .12s; }
.plg-tab:hover { color: var(--text); border-color: var(--accent); }
.plg-tab.active { background: rgba(38,198,218,.12); color: var(--accent); border-color: var(--accent); }
.plg-tab-c { margin-left: 5px; opacity: .75; font-size: 10px; }
.plg-tab-c.hot { opacity: 1; color: #ffa502; }

.plg-lib-search, .plg-market-search { width: 100%; padding: 9px 12px; background: rgba(0,0,0,.2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: var(--mono); font-size: 13px; margin-bottom: 10px; box-sizing: border-box; }
.plg-lib-search:focus, .plg-market-search:focus { outline: none; border-color: var(--accent); background: rgba(0,0,0,.3); }

.plg-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.1); }
.plg-empty { padding: 32px; text-align: center; color: var(--muted); font-size: 13px; font-family: var(--mono); }
.plg-row { display: grid; grid-template-columns: 44px 1fr auto auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.plg-row:last-child { border-bottom: none; }
.plg-row:hover { background: rgba(38,198,218,.05); }
.plg-row-on { border-left: 3px solid #2ed573; }
.plg-row-off { border-left: 3px solid rgba(244,67,54,.3); }
.plg-row-update { border-left: 3px solid #ffa502; background: rgba(255,165,2,.03); }
.plg-row-avail { border-left: 3px solid var(--border); }
.plg-row-err { border-left: 3px solid #f44336; background: rgba(244,67,54,.04); }
/* "Just installed" flash on the Library row that landed after a hub install.
   Mirrors legacy plgJustInstalled — green inset glow that pulses then fades. */
.plg-row-just-installed { position: relative; animation: plgJustInstalled 2.4s ease-out; border-radius: 6px; }
@keyframes plgJustInstalled {
    0%   { background-color: transparent; box-shadow: inset 0 0 0 0 rgba(46,213,115,0), 0 0 0 0 rgba(46,213,115,0); }
    12%  { background-color: rgba(46,213,115,.16); box-shadow: inset 0 0 0 2px rgba(46,213,115,.55), 0 0 22px rgba(46,213,115,.35); }
    55%  { background-color: rgba(46,213,115,.10); box-shadow: inset 0 0 0 2px rgba(46,213,115,.30), 0 0 14px rgba(46,213,115,.20); }
    100% { background-color: transparent; box-shadow: inset 0 0 0 0 rgba(46,213,115,0), 0 0 0 0 rgba(46,213,115,0); }
}
/* Marketplace tile pulse — fires on the source tile right after install
   so the eye sees both ends of the journey (origin tile flashes orange,
   library row flashes green). */
.hub-pulse { animation: hubPulse 1.1s ease-out; }
@keyframes hubPulse {
    0%   { box-shadow: 0 0 0 0 rgba(232,101,46,.55); }
    100% { box-shadow: 0 0 0 14px rgba(232,101,46,0); }
}
/* Inline spinner used in the "installing…" action bar swap. */
.hub-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--accent); border-radius: 50%; animation: hubSpin .7s linear infinite; vertical-align: -2px; }
@keyframes hubSpin { to { transform: rotate(360deg); } }
.plg-row-icon { font-size: 26px; line-height: 1; text-align: center; color: var(--accent); }
.plg-row-icon svg { width: 1em; height: 1em; }
.plg-row-body { min-width: 0; }
.plg-row-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plg-row-desc { color: var(--muted); font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.plg-row-ver { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.plg-row-status { min-width: 0; }
.plg-row-actions { display: flex; gap: 6px; align-items: center; }
.plg-src { font-size: 9px; padding: 1px 5px; border-radius: 2px; font-family: var(--mono); letter-spacing: .4px; font-weight: 700; }
.plg-src-builtin { background: rgba(255,255,255,.08); color: var(--muted); }
.plg-src-hub { background: rgba(138,180,248,.12); color: #8ab4f8; }
.plg-src-local { background: rgba(231,210,124,.12); color: #e7d27c; }
.plg-pill { display: inline-block; padding: 3px 8px; border-radius: 10px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; background: rgba(255,255,255,.06); color: var(--muted); white-space: nowrap; }
.plg-pill-ok { background: rgba(46,213,115,.12); color: #2ed573; }
.plg-pill-off { background: rgba(244,67,54,.08); color: #ff7a88; }
.plg-pill-warn { background: rgba(255,165,2,.12); color: #ffa502; }
.plg-pill-err { background: rgba(244,67,54,.15); color: #ff7a88; }

/* Toggle switch — port of legacy .plug-toggle */
.plug-toggle { position: relative; display: inline-block; width: 42px; height: 22px; cursor: pointer; flex-shrink: 0; }
.plug-toggle input { opacity: 0; width: 0; height: 0; position: absolute; padding: 0; margin: 0; border: 0; }
.plug-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 22px; transition: background-color .28s, border-color .28s, box-shadow .28s; }
.plug-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 2px; bottom: 2px; background: var(--muted); border-radius: 50%; transition: transform .32s cubic-bezier(.34,1.3,.64,1), background-color .28s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.plug-toggle input:checked + .plug-slider { background: rgba(38,198,218,.22); border-color: var(--accent); }
.plug-toggle input:checked + .plug-slider::before { transform: translateX(20px); background: var(--accent); box-shadow: 0 2px 6px rgba(38,198,218,.4); }

.plg-row-kebab { width: 26px; height: 26px; padding: 0; font-size: 18px; line-height: 1; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; border-radius: 4px; font-family: var(--mono); }
.plg-row-kebab:hover { border-color: var(--border); color: var(--accent); background: rgba(255,255,255,.04); }

/* Marketplace tiles */
.plg-tag-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.plg-tag-chip { padding: 4px 11px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--muted); font-family: var(--mono); font-size: 11px; cursor: pointer; transition: all .12s; }
.plg-tag-chip:hover { color: var(--text); border-color: var(--accent); }
.plg-tag-chip.active { background: var(--accent); color: #0a1a24; border-color: var(--accent); font-weight: 700; }

.plg-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding: 2px 0; }
.plg-tile { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.10)); border: 1px solid var(--border); border-radius: 10px; padding: 18px 16px 14px; cursor: pointer; transition: transform .18s, border-color .15s, box-shadow .18s; display: flex; flex-direction: column; gap: 10px; min-height: 208px; overflow: hidden; }
.plg-tile:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(38,198,218,.2); }
.plg-tile-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: linear-gradient(135deg, var(--accent), var(--ember, #ff8340)); color: #0a1a24; border-radius: 13px; box-shadow: 0 4px 14px rgba(38,198,218,.22), inset 0 1px 0 rgba(255,255,255,.15); flex-shrink: 0; }
.plg-tile-icon svg { width: 1em; height: 1em; }
.plg-tile-head { display: flex; gap: 12px; align-items: flex-start; }
.plg-tile-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plg-tile-name-row { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.plg-tile-name { font-weight: 700; font-size: 15px; color: var(--text); line-height: 1.25; flex: 1; min-width: 0; word-break: break-word; }
.plg-tile-meta { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.plg-tile-desc { font-size: 12px; color: var(--muted); line-height: 1.45; flex: 1; }
.plg-tile-foot { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-top: auto; }
.plg-tile-tags { display: flex; gap: 4px; flex-wrap: wrap; overflow: hidden; max-height: 18px; }
.plg-tile-tag { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,.05); color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.plg-tile-cta { padding: 6px 14px; font-size: 11px; font-family: var(--mono); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border-radius: 5px; border: 1px solid var(--accent); background: var(--accent); color: #0a1a24; cursor: pointer; transition: all .12s; }
.plg-tile-cta:hover { filter: brightness(1.1); }
.plg-tile-cta.cta-update { background: #ffa502; border-color: #ffa502; }
.plg-tile-cta.cta-installed { background: transparent; color: #2ed573; border-color: rgba(46,213,115,.4); cursor: default; }
.plg-tile-badge { flex-shrink: 0; padding: 2px 8px; border-radius: 10px; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; align-self: flex-start; margin-top: 2px; white-space: nowrap; }
.plg-tile-badge-installed { background: rgba(46,213,115,.12); color: #2ed573; border: 1px solid rgba(46,213,115,.3); }
.plg-tile-badge-update { background: rgba(255,165,2,.15); color: #ffa502; border: 1px solid rgba(255,165,2,.3); }
.plg-tile-badge-new { background: rgba(138,180,248,.12); color: #8ab4f8; border: 1px solid rgba(138,180,248,.3); }
.plg-tile-badge-builtin { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border); }
.plg-market-empty, .plg-lib-empty { padding: 36px 20px; text-align: center; color: var(--muted); font-size: 13px; background: rgba(0,0,0,.08); border: 1px dashed var(--border); border-radius: 6px; }
.plg-market-empty strong, .plg-lib-empty strong { color: var(--text); font-weight: 700; display: block; margin-bottom: 6px; }
.plg-local-summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 10px 14px; background: rgba(0,0,0,.07); border: 1px solid var(--border); border-radius: 6px; user-select: none; font-family: var(--mono); font-size: 12px; color: var(--text); }
.plg-local-summary:hover { background: rgba(0,0,0,.12); border-color: var(--accent); }
.plg-local-summary .plg-caret { transition: transform .2s; color: var(--muted); display: inline-block; width: 14px; }
.plg-local-section.open .plg-local-summary .plg-caret { transform: rotate(90deg); color: var(--accent); }
.plg-local-body { display: none; padding-top: 10px; }
.plg-local-section.open .plg-local-body { display: block; }

/* Plugin details modal — Details + Settings tabs */
.pd-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.pd-head .pd-icon { font-size: 28px; line-height: 1; flex-shrink: 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(38,198,218,.08); border: 1px solid var(--border); border-radius: 10px; color: var(--accent); }
.pd-head-text { flex: 1; min-width: 0; }
.pd-name { font-weight: 700; font-size: 20px; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.2; }
.pd-meta { color: var(--muted); font-size: 12px; font-family: var(--mono); margin-top: 5px; }
.pd-desc { margin: 14px 0; color: var(--text); font-size: 14px; line-height: 1.6; }
.pd-section { margin: 20px 0; }
.pd-section-label { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 10px; font-family: var(--mono); font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.pd-readme { padding: 14px 18px; border-left: 3px solid var(--accent); background: rgba(38,198,218,.05); font-family: var(--mono); font-size: 13px; white-space: pre-wrap; line-height: 1.65; max-height: 45vh; overflow: auto; border-radius: 0 4px 4px 0; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.pd-tag { font-family: var(--mono); font-size: 11px; padding: 3px 9px; background: rgba(38,198,218,.08); border: 1px solid rgba(38,198,218,.25); border-radius: 999px; color: var(--accent); }
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.pd-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border); }
.pd-pill-ok { background: rgba(46,213,115,.1); color: #2ed573; border-color: rgba(46,213,115,.3); }
.pd-pill-off { background: rgba(122,106,90,.08); }
.pd-pill-warn { background: rgba(255,159,67,.12); color: #ffa540; border-color: rgba(255,159,67,.35); }
.pd-tabs { display: flex; gap: 2px; padding: 2px; background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 8px; margin: 4px 0 16px; width: fit-content; }
.pd-tab { padding: 8px 16px; background: transparent; border: none; color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 6px; letter-spacing: .5px; text-transform: uppercase; transition: color .12s, background .12s; }
.pd-tab:hover { color: var(--text); }
.pd-tab.active { background: rgba(38,198,218,.12); color: var(--accent); }
.pd-pane { display: none; }
.pd-pane.active { display: block; }
.pd-settings-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 13px; background: rgba(0,0,0,.15); border: 1px dashed var(--border); border-radius: 6px; }

/* ─ Mobile — comprehensive pass so the panel is fully usable on phones ─ */
@media (max-width: 800px) {
  /* Outer wrap */
  body { font-size: 14px; }
  .wrap { padding: 12px !important; }
  .brand-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px !important; }
  .brand-bar-right { font-size: 12px; }
  .admin-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .admin-header h1, .admin-header .server-title { font-size: 18px !important; }
  .footer { font-size: 11px; padding: 10px 0; }

  /* Sidebar → horizontal icon scroll bar (sticky at top of content) */
  .admin-shell { grid-template-columns: 1fr !important; gap: 10px !important; }
  .admin-side { position: sticky !important; top: 6px !important; z-index: 50; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
    padding: 6px !important; gap: 4px !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .admin-side > * { flex: 0 0 auto; scroll-snap-align: start; }
  .side-tab { padding: 8px 10px !important; min-width: 44px; min-height: 40px; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; border-radius: 8px; }
  .side-tab .lbl { display: block; font-size: 9px; line-height: 1; text-transform: uppercase; letter-spacing: .3px; opacity: .85; }
  .side-tab .ico { width: 22px; height: 22px; }
  .side-tab .ico svg { width: 22px; height: 22px; }
  .admin-side > div { display: none; } /* divider lines clutter the horizontal bar */

  /* Section headers — let titles + actions wrap cleanly */
  .section-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .section-header h2 { font-size: 16px; }
  .section-meta { font-size: 11px; flex-wrap: wrap; gap: 6px; }

  /* Cards — tighter padding */
  .card { padding: 12px !important; }
  .card .card-pad-tight { padding: 8px !important; }

  /* Tables — horizontal scroll instead of squashed columns */
  table.players-table, .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  table.players-table thead, .card table thead { white-space: nowrap; }
  table.players-table td, .card table td { white-space: nowrap; }

  /* Modals — fullscreen on phones, internal scroll for body */
  [id$="Modal"], #plgDetailsModal, #profileModal, #invModal, #skillsModal, #catModal, #packModal, #itemPickerModal, #givePackModal, #giveItemModal, #adminAddModal, #schedModal {
    padding: 0 !important;
  }
  [id$="Modal"] > .card, #plgDetailsModal > .card, #profileModal > .card, #invModal > .card, #skillsModal > .card, #catModal > .card, #packModal > .card, #itemPickerModal > .card, #givePackModal > .card, #giveItemModal > .card, #adminAddModal > .card, #schedModal > .card {
    width: 100% !important; max-width: 100% !important; min-height: 100vh; max-height: 100vh; border-radius: 0 !important;
    padding: 16px !important; box-sizing: border-box; overflow: auto;
  }

  /* Forms — stack tight, full-width inputs */
  form input, form select, form textarea { font-size: 16px !important; /* iOS no-zoom-on-focus */ box-sizing: border-box; }
  form[id="schedForm"], form[id="catForm"], form[id="packForm"] { gap: 10px !important; }
  /* Buttons stay at default but actions row wraps */
  .modal-actions, [style*="justify-content:flex-end"], [style*="justify-content: flex-end"] { flex-wrap: wrap !important; }

  /* Console */
  #consoleOut { height: calc(100vh - 360px) !important; min-height: 240px; font-size: 11px !important; line-height: 1.4 !important; }
  #consoleForm { padding: 8px !important; }
  #consoleCmd { font-size: 16px !important; padding: 8px 10px !important; }
  .con-badge, .con-btn { padding: 4px 8px !important; font-size: 10px !important; }

  /* Map viewport gets most of the visible height */
  #mapVP { height: calc(100vh - 280px) !important; min-height: 360px !important; }
  #mapLegend { font-size: 10px !important; padding: 6px 8px !important; min-width: 120px !important; }

  /* Items grid — smaller tiles, tighter gap */
  #itemsGrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; gap: 6px !important; }
  .items-card img { width: 48px !important; height: 48px !important; }
  .items-card { padding: 6px !important; font-size: 11px !important; }

  /* Dashboard — already collapses to 1fr at 980/1100 thresholds. Tighten. */
  .dash-strip { padding: 8px 10px; gap: 10px; font-size: 11px; }
  .dash-strip-tile { min-width: 80px; }
  .dash-strip-tile .dsv { font-size: 12px; }
  /* Hero cards on phones — keep them in a 3-column row so they don't eat
     scroll space, drop the sparkline + sub-text (the strip above already
     shows the same numbers in finer detail), shrink padding and fonts. */
  .dash-hero { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .hero-card { padding: 10px 8px !important; text-align: center; }
  .hero-card .hero-label { font-size: 9px !important; letter-spacing: .8px !important; }
  .hero-card .hero-val { font-size: 22px !important; margin-top: 2px !important; }
  .hero-card .hero-val span { font-size: .7em !important; }
  .hero-card .hero-sub { display: none; }
  .hero-card .hero-spark { display: none; }
  .dash-online-row { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 4px 6px; }
  .dash-online-name { font-size: 12px; }
  .dash-info-table td { padding: 4px 0; font-size: 11px; }
  .dash-info-table td:first-child { width: 100px; font-size: 10px; }
  .kpi-card .v { font-size: 22px; }
  .chart-body { min-height: 80px; }
  .chart-body canvas { height: 80px; }

  /* Plugins — single column for marketplace + library rows */
  .plg-page { max-width: 100%; }
  .plg-row { grid-template-columns: 36px 1fr auto; gap: 8px; padding: 8px 10px; }
  .plg-row-ver, .plg-row-status { display: none; }
  .plg-market-grid { grid-template-columns: 1fr !important; }
  .plg-tile { padding: 14px 12px 12px; min-height: 0; }

  /* Context menu — fullscreen overlay on phones for thumb reach */
  #ctxMenu { left: 8px !important; right: 8px !important; top: auto !important; bottom: 12px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    padding: 8px !important; font-size: 14px !important; box-shadow: 0 -8px 32px rgba(0,0,0,.6) !important; }
  #ctxMenu div[data-idx] { padding: 12px 14px !important; }

  /* Hide oversized hover-only effects on touch */
  .plg-tile:hover { transform: none !important; }
  .items-card:hover { transform: none !important; }

  /* Scheduler cards */
  .sched-card { padding: 10px 12px !important; }
  .sched-card > div { flex-direction: column !important; gap: 6px !important; }

  /* Hub dashboard tiles */
  .tiles, .hub-grid, .pack-grid, .shop-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ─ Smaller phones — extra compression ─ */
@media (max-width: 480px) {
  .wrap { padding: 8px !important; }
  .admin-header { padding: 8px 0 !important; }
  .side-tab { min-width: 42px; padding: 6px 8px !important; }
  .side-tab .lbl { display: none; } /* on tiny screens, icons-only */
  .dash-strip-tile { min-width: 70px; }
  .hero-card { padding: 8px 6px !important; }
  .hero-card .hero-val { font-size: 18px !important; }
  .hero-card .hero-label { font-size: 8px !important; }
  #itemsGrid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; }
  /* Player rows — collapse columns we don't strictly need */
  table.players-table th:nth-child(3), table.players-table td:nth-child(3),
  table.players-table th:nth-child(4), table.players-table td:nth-child(4) { display: none; }
}

/* ─ Dashboard — port of legacy AdminPanel dashboard, theme-adjusted ─ */
.dash-strip { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; background: linear-gradient(90deg, rgba(38,198,218,.04), rgba(0,0,0,.2)); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; font-family: var(--mono); font-size: 12px; margin-bottom: 14px; }
.dash-strip-tile { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.dash-strip-tile .dsl { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.dash-strip-tile .dsv { font-weight: 700; font-size: 14px; }

.dash-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.hero-card { padding: 18px 20px; background: linear-gradient(180deg, rgba(38,198,218,.06), rgba(0,0,0,.2)); border: 1px solid var(--border); border-radius: 10px; text-align: center; position: relative; overflow: hidden; }
.hero-card .hero-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; font-family: var(--mono); }
.hero-card .hero-val { font-size: 38px; font-weight: 800; color: var(--text); line-height: 1.1; margin-top: 4px; font-family: var(--mono); }
.hero-card .hero-sub { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--mono); }
.hero-card .hero-spark { width: 100%; height: 50px; margin-top: 10px; display: block; }

.dash-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 16px; align-items: stretch; }
@media (max-width: 1100px) { .dash-info-grid { grid-template-columns: 1fr; } }
.dash-info-card { padding: 14px 16px; display: flex; flex-direction: column; }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.dash-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.dash-info-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dash-info-table td { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.dash-info-table td:first-child { color: var(--muted); width: 130px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.dash-info-table td:last-child { color: var(--text); font-family: var(--mono); }
.dash-info-table tr:last-child td { border-bottom: none; }

.dash-online { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.dash-online-empty { padding: 30px 0; text-align: center; color: var(--muted); font-size: 13px; font-family: var(--mono); }
.dash-online-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background .12s; }
.dash-online-row:hover { background: rgba(38,198,218,.06); }
.dash-online-ava { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--ember, #ff8340)); color: #0a1a24; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--mono); }
.dash-online-info { min-width: 0; }
.dash-online-name { font-weight: 600; color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-online-sid { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-online-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.dash-perf-row { display: grid; grid-template-columns: 240px 1fr 1fr; gap: 14px; margin-bottom: 16px; align-items: stretch; }
@media (max-width: 1100px) { .dash-perf-row { grid-template-columns: 1fr; } }
.dash-perf-kpis { display: flex; flex-direction: column; gap: 14px; }
.kpi-card { padding: 14px 16px; background: linear-gradient(180deg, rgba(38,198,218,.04), rgba(0,0,0,.2)); border: 1px solid var(--border); border-radius: 10px; }
.kpi-card .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; font-family: var(--mono); }
.kpi-card .v { font-size: 28px; font-weight: 800; color: var(--text); margin: 4px 0; font-family: var(--mono); }
.kpi-card .meter { width: 100%; height: 6px; background: rgba(0,0,0,.4); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.kpi-card .meter .fill { height: 100%; transition: width .25s; }
.kpi-card .meter.m-ok .fill { background: linear-gradient(90deg, #2ed573, #26c6da); }
.kpi-card .meter.m-warn .fill { background: linear-gradient(90deg, #ffa502, #ff8340); }
.kpi-card .meter.m-bad .fill { background: linear-gradient(90deg, #f44336, #ff7070); }
.kpi-card .kpi-sub { font-size: 11px; color: var(--muted); margin-top: 6px; font-family: var(--mono); }
.chart-panel { padding: 14px 16px; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.25)); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; }
.chart-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.chart-hdr .ch-name { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; font-family: var(--mono); font-weight: 700; }
.chart-hdr .ch-cur { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.chart-body { flex: 1; min-height: 110px; }
.chart-body canvas { width: 100% !important; height: 110px; display: block; }

/* ─ Roles & Permissions page ────────────────────────────────────────────
   Direct port of legacy AdminPanel.html .perm-* / .role-badge classes so
   the Roles editor behaves identically to RefugeBot's. */
.perm-role-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 7px 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .14s cubic-bezier(.22,.9,.3,1);
}
.perm-role-btn:hover { color: var(--text); background: rgba(255,255,255,.08); }
.perm-role-btn.active {
  background: linear-gradient(135deg, rgba(38,198,218,.18), rgba(125,211,252,.08));
  color: var(--accent2);
  border-color: rgba(38,198,218,.4);
  box-shadow: 0 2px 10px rgba(38,198,218,.18);
}
.perm-role-dirty {
  background: rgba(255,183,77,.25);
  color: #ffb74d;
  font-size: .62rem;
  font-family: var(--mono);
  padding: 1px 6px;
  border-radius: 999px;
}

.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px;
  padding: 6px;
}
.perm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.perm-row:hover { border-color: var(--border-hi); background: rgba(125,211,252,.04); }
.perm-tog { position: relative; flex-shrink: 0; padding-top: 2px; }
.perm-tog input { position: absolute; opacity: 0; pointer-events: none; }
.perm-slider {
  display: inline-block;
  width: 34px; height: 18px;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  position: relative;
  transition: background .15s;
}
.perm-slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s, background .15s;
}
.perm-tog input:checked + .perm-slider { background: var(--accent); }
.perm-tog input:checked + .perm-slider::after { transform: translateX(16px); background: #fff; }
.perm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.perm-label { font-size: .85rem; font-weight: 600; color: var(--text); }
.perm-desc { font-size: .72rem; color: var(--muted); line-height: 1.4; }
.perm-key {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--muted);
  opacity: .55;
  letter-spacing: .4px;
  margin-top: 2px;
}
.perm-group .card-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.perm-group .card-header h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.perm-group .card-header .sub { font-size: 11px; color: var(--muted); font-family: var(--mono); display: block; margin-top: 2px; }

.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.role-owner { color:#ffd54f; background:rgba(255,213,79,.12); border-color:rgba(255,213,79,.4); text-shadow:0 0 8px rgba(255,213,79,.3); }
.role-admin { color:#4fc3f7; background:rgba(79,195,247,.12); border-color:rgba(79,195,247,.4); }
.role-mod   { color:#66bb6a; background:rgba(102,187,106,.12); border-color:rgba(102,187,106,.4); }

/* ─ Donor editor (Tenant Settings → Donors tab) ─────────────────────────
   Direct port of legacy AdminPanel.html .dn-* / .donor-card classes. */
.dn-field{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
.dn-label{display:block;font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono);font-weight:700}
.dn-stepper{display:flex;align-items:stretch;background:rgba(15,22,32,.55);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:.18s;min-width:0}
.dn-stepper:hover{border-color:rgba(125,211,252,.3)}
.dn-stepper:focus-within{border-color:var(--accent,#26c6da);box-shadow:0 0 0 3px rgba(38,198,218,.15)}
.dn-step-btn{background:transparent;border:none;color:var(--muted);padding:0 12px;font-size:.85rem;cursor:pointer;transition:all .18s cubic-bezier(.2,.9,.3,1);user-select:none;min-width:34px;display:flex;align-items:center;justify-content:center}
.dn-step-btn:hover{background:rgba(125,211,252,.08);color:var(--accent,#26c6da)}
.dn-step-btn:active{background:rgba(125,211,252,.15);transform:scale(.92)}
.dn-step-btn.minus{border-right:1px solid var(--border)}
.dn-step-btn.plus {border-left:1px solid var(--border)}
.dn-step-input{flex:1;border:none;outline:none;background:transparent;color:var(--text);font-family:var(--mono);font-weight:700;font-size:.92rem;text-align:center;padding:10px 4px;min-width:0;font-variant-numeric:tabular-nums}
.dn-suffix{display:flex;align-items:center;padding:0 10px 0 0;color:var(--muted);font-family:var(--mono);font-size:.8rem;font-weight:700;background:transparent}
.dn-presets{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;min-width:0;max-width:100%}
.dn-preset{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--muted);padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:.66rem;font-weight:700;cursor:pointer;transition:all .16s cubic-bezier(.2,.9,.3,1);user-select:none;font-variant-numeric:tabular-nums}
.dn-preset:hover{border-color:rgba(125,211,252,.4);color:var(--text);transform:translateY(-1px)}
.dn-preset.active{background:linear-gradient(135deg,#26c6da,#7dd3fc);border-color:transparent;color:#0a1420;box-shadow:0 2px 8px rgba(38,198,218,.3)}

.dn-role-select, .dn-role-text{
  width:100%;background:rgba(15,22,32,.55);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;color:var(--text);font-family:inherit;font-size:.86rem;
  outline:none;transition:.18s;
  appearance:none;-webkit-appearance:none;
}
.dn-role-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2326c6da' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer;
}
.dn-role-select:hover, .dn-role-text:hover{border-color:rgba(125,211,252,.3)}
.dn-role-select:focus, .dn-role-text:focus{border-color:var(--accent,#26c6da);box-shadow:0 0 0 3px rgba(38,198,218,.15)}
.dn-role-select option{background:#0e1620;color:var(--text);padding:8px;font-size:.88rem}

.donor-card .card-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); display:flex; }
.donor-card .card-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.donor-card .card-header .sub { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.donor-card > div:last-child { padding: 14px 16px; }

/* Bazaar lock overlay (player-facing) */
.bazaar-lock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 50px 30px; text-align: center; min-height: 320px;
  background: linear-gradient(180deg, rgba(38,198,218,.06), rgba(255,131,64,.04));
  border: 1px solid var(--border); border-radius: var(--radius);
}
.bazaar-lock-icon { font-size: 3rem; margin-bottom: 14px; opacity: .85; }
.bazaar-lock h3 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.bazaar-lock p { font-size: 14px; color: var(--muted); max-width: 440px; line-height: 1.6; margin: 0 0 18px; }
.bazaar-lock .btn-donate { background: linear-gradient(135deg, var(--accent), var(--ember, #ff8340)); color: #0a1420; padding: 11px 22px; font-weight: 700; border-radius: 10px; box-shadow: 0 8px 24px rgba(38,198,218,.35); border: none; cursor: pointer; text-decoration: none; display: inline-block; }
.bazaar-lock .btn-donate:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ─ File browser (Server Admin → Files tab) ─────────────────────────────
   Direct port of legacy AdminPanel.html .fb-* / .ed-* / .fbrow classes. */
.fbrow { border-bottom: 1px solid var(--border); transition: all .15s; }
.fbrow:hover { background: rgba(125,211,252,.04); }
.fbrow td { padding: 8px 12px; vertical-align: middle; }
.fb-name { display: flex; align-items: center; gap: 8px; }
.fb-name svg { flex-shrink: 0; }
.fb-name a { color: var(--accent); text-decoration: none; transition: color .15s; }
.fb-name a:hover { color: var(--accent2); }
.fb-name span.fname { color: var(--text); }
.fb-ext { color: var(--muted); font-size: .7rem; margin-left: 4px; }
.fb-actions { display: flex; gap: 4px; justify-content: flex-end; }
.fb-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-crumb { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; font-size: 13px; font-family: var(--mono); }
.fb-crumb a { color: var(--accent); text-decoration: none; padding: 2px 4px; border-radius: 3px; transition: all .15s; }
.fb-crumb a:hover { background: rgba(38,198,218,.08); }
.fb-crumb .sep { color: var(--muted); margin: 0 1px; }
.fb-crumb .cur { color: var(--text); font-weight: 700; padding: 2px 4px; }
.fb-roots { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fbc.active { background: rgba(38,198,218,.14); border-color: rgba(38,198,218,.5); color: var(--accent2); }
.fb-drop { position: relative; min-height: 200px; }
.fb-drop-overlay { display: none; position: absolute; inset: 0; background: rgba(38,198,218,.06); border: 2px dashed var(--accent); border-radius: 8px; z-index: 10; pointer-events: none; }
.fb-drop-overlay div { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 16px; color: var(--accent); font-family: var(--mono); gap: 8px; }
.fb-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.fb-empty svg { margin-bottom: 12px; opacity: .3; }
.fb-info { position: fixed; top: 0; right: -380px; width: 380px; height: 100vh; background: var(--bg2); border-left: 1px solid var(--border); z-index: 100; transition: right .25s ease; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.4); }
.fb-info.open { right: 0; }
.fb-info-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.fb-info-head h3 { font-size: .75rem; color: var(--accent); text-transform: uppercase; letter-spacing: .8px; font-family: var(--mono); margin: 0; }
.fb-info-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.fb-info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .78rem; }
.fb-info-row .lbl { color: var(--muted); font-family: var(--mono); text-transform: uppercase; font-size: .65rem; letter-spacing: .5px; }
.fb-info-row .val { color: var(--text); font-family: var(--mono); text-align: right; word-break: break-all; }
.btn-xs { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--muted); padding: 4px 6px; border-radius: 5px; cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; justify-content: center; }
.btn-xs:hover { color: var(--text); background: rgba(125,211,252,.08); border-color: rgba(125,211,252,.3); }
.btn-xs.warn:hover { color: #f87171; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); }
.btn-xs.edit:hover { color: var(--accent); border-color: rgba(38,198,218,.4); }

/* Built-in code editor (full-screen modal). */
.fb-editor { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(0,0,0,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fb-editor.open { display: flex; align-items: stretch; justify-content: center; padding: 16px; }
.fb-editor-inner { background-color: #0b1018; background-image: linear-gradient(#0e1620, #0e1620); border: 1px solid var(--border); border-radius: 10px; width: 100%; max-width: 1400px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4); }
.ed-topbar { display: flex; align-items: center; padding: 0 12px; height: 40px; background: rgba(0,0,0,.35); border-bottom: 1px solid var(--border); gap: 8px; }
.ed-topbar .fname { font-family: var(--mono); font-size: .82rem; color: var(--accent); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-topbar .unsaved { color: #ffd54f; margin-left: 2px; display: none; }
.ed-topbar .acts { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.ed-toolbar { display: flex; align-items: center; padding: 0 12px; height: 34px; background: rgba(0,0,0,.22); border-bottom: 1px solid var(--border); gap: 4px; font-size: .7rem; }
.ed-toolbar .sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.ed-tbtn { padding: 3px 8px; font-size: .68rem; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; font-family: var(--mono); transition: all .12s; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ed-tbtn:hover { color: var(--text); background: rgba(255,255,255,.04); border-color: var(--border); }
.ed-tbtn.on { color: var(--accent); background: rgba(38,198,218,.08); border-color: rgba(38,198,218,.3); }
.ed-find { display: none; align-items: center; padding: 6px 12px; background: rgba(0,0,0,.35); border-bottom: 1px solid var(--border); gap: 6px; }
.ed-find.open { display: flex; }
.ed-find input { background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; color: var(--text); font-family: var(--mono); font-size: .78rem; outline: none; min-width: 200px; }
.ed-find input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(38,198,218,.12); }
.ed-find .info { font-size: .68rem; color: var(--muted); font-family: var(--mono); min-width: 60px; text-align: center; }
.ed-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.ed-gutter { width: 52px; background: rgba(0,0,0,.35); border-right: 1px solid var(--border); overflow: hidden; flex-shrink: 0; user-select: none; }
.ed-gutter pre { margin: 0; padding: 8px 8px 8px 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--muted); text-align: right; white-space: pre; }
.ed-code { flex: 1; position: relative; overflow: hidden; min-width: 0; }
.ed-code textarea { display: block; width: 100%; height: 100%; padding: 8px 12px; background: #0b1018; color: var(--text); border: none; resize: none; font-family: var(--mono); font-size: 13px; line-height: 1.6; tab-size: 4; outline: none; white-space: pre; overflow: auto; caret-color: var(--accent); }
.ed-code textarea.wrap { white-space: pre-wrap; word-break: break-all; }
.ed-code textarea::selection { background: rgba(38,198,218,.22); }
.ed-statusbar { display: flex; align-items: center; padding: 0 12px; height: 26px; background: rgba(0,0,0,.35); border-top: 1px solid var(--border); gap: 16px; font-family: var(--mono); font-size: .65rem; color: var(--muted); }
.ed-statusbar .right { margin-left: auto; display: flex; gap: 16px; }
.ed-hl-tag { color: #4fc3f7; }
.ed-hl-attr { color: #80deea; }
.ed-hl-str { color: #66bb6a; }
.ed-hl-num { color: #ffd54f; }
.ed-hl-cmt { color: #546e7a; font-style: italic; }
.ed-hl-kw { color: #ff8340; }
.ed-hl-key { color: #80deea; }
.ed-hl-bool { color: #ff8340; }

/* ─ In-game ESC Panel editor (Server Admin → Panel tab) ─────────────────
   Direct port of legacy AdminPanel.html .pnl-* classes, accent colors
   adapted from copper to the SaaS cyan theme. */
.pnl-wrap { max-width: 980px; margin: 0 auto; padding-bottom: 72px; }
.pnl-intro { display: flex; align-items: flex-start; gap: .9rem; padding: .9rem 1.1rem; background: linear-gradient(90deg, rgba(38,198,218,.08), rgba(38,198,218,.01)); border: 1px solid var(--border-hi); border-left: 3px solid var(--accent); border-radius: 8px; margin-bottom: 1.1rem; }
.pnl-intro .ico { font-size: 1.4rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.pnl-intro .body { flex: 1; min-width: 0; }
.pnl-intro h4 { margin: 0; color: var(--text); font-family: var(--mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.pnl-intro p { margin: .35rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.pnl-intro code { color: var(--accent); background: rgba(38,198,218,.08); padding: 1px 6px; border-radius: 3px; font-size: .72rem; }
.pnl-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; overflow: hidden; }
.pnl-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .6; }
.pnl-card.identity::before { background: var(--accent); }
.pnl-card.welcome::before { background: #ff9f43; }
.pnl-card.shops::before { background: #ffd54f; }
.pnl-card.links::before { background: #00e5ff; }
.pnl-card.feed::before { background: #a855f7; }
.pnl-card.external::before { background: #66bb6a; }
.pnl-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); gap: .7rem; }
.pnl-card-head h3 { margin: 0; font-family: var(--mono); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; display: flex; align-items: center; gap: .45rem; }
.pnl-card-head h3 .tag-ico { color: var(--text); font-size: 1em; line-height: 1; }
.pnl-card-head .sub { font-family: var(--mono); font-size: .66rem; color: var(--muted); }
.pnl-card-head .sub .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(38,198,218,.14); color: var(--accent2); font-weight: 700; letter-spacing: .4px; font-size: .6rem; text-transform: uppercase; }
.pnl-hint { color: var(--muted); font-family: var(--mono); font-size: .66rem; line-height: 1.55; margin-top: .4rem; }
.pnl-hint code { color: var(--accent); background: rgba(38,198,218,.08); padding: 1px 5px; border-radius: 3px; }
.pnl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pnl-grid.full { grid-template-columns: 1fr; }
.pnl-field { display: flex; flex-direction: column; gap: 4px; }
.pnl-field.span2 { grid-column: span 2; }
.pnl-field label { font-family: var(--mono); font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .55px; font-weight: 700; display: flex; align-items: center; gap: .35rem; }
.pnl-field label .opt { font-weight: 500; color: var(--muted); opacity: .75; letter-spacing: 0; text-transform: none; }
.pnl-field input, .pnl-field textarea, .pnl-field select { width: 100%; padding: 8px 10px; background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-family: var(--mono); font-size: .78rem; outline: none; transition: border-color .12s; }
.pnl-field input:focus, .pnl-field textarea:focus, .pnl-field select:focus { border-color: var(--accent); }
.pnl-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.pnl-shops-info { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pnl-shops-info .chip { background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 6px; padding: .7rem .9rem; display: flex; gap: .65rem; align-items: center; }
.pnl-shops-info .chip .ic { font-size: 1.3rem; line-height: 1; }
.pnl-shops-info .chip .lbl { font-family: var(--mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pnl-shops-info .chip .val { font-family: var(--mono); font-size: .8rem; color: var(--text); margin-top: 2px; }
.pnl-codeblock { background: rgba(0,0,0,.4); border: 1px solid var(--border); border-radius: 6px; padding: .75rem .9rem; color: var(--text); font-family: var(--mono); font-size: .7rem; white-space: pre; overflow-x: auto; line-height: 1.45; margin-top: .5rem; }
.pnl-links { display: flex; flex-direction: column; gap: .45rem; }
.pnl-link { display: grid; grid-template-columns: 32px 2fr 3fr 1.7fr auto; gap: .5rem; align-items: center; padding: .5rem .65rem; background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 6px; transition: border-color .12s; }
.pnl-link:hover { border-color: var(--border-hi); }
.pnl-link-badge { width: 32px; height: 32px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); font-family: var(--mono); font-size: .62rem; font-weight: 700; overflow: hidden; white-space: nowrap; padding: 0 2px; }
.pnl-link input { padding: 6px 9px; font-size: .72rem; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--mono); outline: none; }
.pnl-link input:focus { border-color: var(--accent); }
.pnl-link .lnk-btns { display: flex; gap: 2px; }
.pnl-link .lnk-btns button { width: 24px; height: 24px; padding: 0; background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 4px; cursor: pointer; font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; }
.pnl-link .lnk-btns button:hover { color: var(--accent); border-color: var(--accent); }
.pnl-link .lnk-btns button:disabled { opacity: .3; cursor: not-allowed; }
.pnl-link .lnk-btns .del:hover { color: #f87171; border-color: #f87171; }
.pnl-empty { padding: 1.5rem; text-align: center; color: var(--muted); font-family: var(--mono); font-size: .74rem; background: rgba(0,0,0,.2); border: 1px dashed var(--border); border-radius: 6px; }
.pnl-savebar { position: sticky; bottom: 0; left: 0; right: 0; margin-top: 1.2rem; padding: .85rem 0; display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.pnl-savebar .savebar-inner { display: flex; align-items: center; gap: .8rem; flex: 1; background: var(--panel); border: 1px solid var(--border-hi); border-radius: 8px; padding: .7rem 1rem; box-shadow: 0 -4px 24px rgba(0,0,0,.35); }
.pnl-savebar .hint { font-family: var(--mono); font-size: .66rem; color: var(--muted); flex: 1; }
.pnl-savebar .msg { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .3px; }
.pnl-savebar .msg.ok { color: #66bb6a; }
.pnl-savebar .msg.err { color: #f87171; }
@media (max-width: 820px) {
  .pnl-grid { grid-template-columns: 1fr; }
  .pnl-field.span2 { grid-column: auto; }
  .pnl-shops-info { grid-template-columns: 1fr; }
  .pnl-link { grid-template-columns: 1fr 1fr auto; row-gap: .35rem; }
  .pnl-link-badge { grid-column: 1/-1; width: auto; height: auto; padding: 4px 8px; }
}