@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:         #0a0c12;
  --surface:    #10131c;
  --surface2:   #161a26;
  --surface3:   #1e2333;
  --border:     rgba(255,255,255,0.07);
  --border2:    rgba(255,255,255,0.13);
  --text:       #eef2ff;
  --muted:      #8891aa;
  --soft:       #555e78;
  --accent:     #3b3757;
  --accent2:    #5f5381;
  --glow:       rgba(124,106,247,0.22);
  --pink:       #f472b6;
  --teal:       #2dd4bf;
  --green:      #4ade80;
  --amber:      #fbbf24;
  --red:        #f87171;
  --font-head:  'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-body:  'Inter', ui-sans-serif, system-ui, sans-serif;
  --r-sm:       10px;
  --r-md:       16px;
  --r-lg:       22px;
  --r-xl:       28px;
  --r-pill:     999px;
  --sidebar-w:  272px;
  --topbar-h:   64px;
  --shadow:     0 20px 60px rgba(0,0,0,0.45);
  --shadow-sm:  0 6px 24px rgba(0,0,0,0.28);
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Ambient */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(124,106,247,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 90% 15%, rgba(244,114,182,0.07) 0%, transparent 50%);
}

/* ─── SCROLL BAR ─────────────────────────────────────────── */
#scroll-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--pink));
  box-shadow:0 0 12px var(--glow);
  z-index:200; border-radius:0 3px 3px 0;
  transition:width 80ms linear;
}

/* ─── SHELL ──────────────────────────────────────────────── */
.shell { position:relative; z-index:1; min-height:100dvh; }

/* ══════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════ */
.login-screen { min-height:100dvh; display:flex; flex-direction:column; }

.site-header {
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:68px; display:flex; align-items:center; gap:0; padding:0 28px;
  background:rgba(10,12,18,0.88);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 20px rgba(0,0,0,0.3);
}

.site-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }

.brand-orb {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:13px; color:#fff;
  box-shadow:0 0 20px var(--glow);
}
.brand-orb.large  { width:48px; height:48px; font-size:16px; }
.brand-orb.small  { width:32px; height:32px; font-size:11px; }

.site-brand strong { font-family:var(--font-head); font-weight:700; font-size:16px; display:block; letter-spacing:0.02em; }
.site-brand small  { display:block; font-size:11px; color:var(--muted); margin-top:1px; }

.site-nav { flex:1; display:flex; align-items:center; justify-content:center; gap:2px; }
.site-nav a {
  padding:7px 12px; border-radius:var(--r-pill);
  font-size:13px; font-weight:500; color:var(--muted);
  transition:color 160ms, background 160ms;
}
.site-nav a:hover  { color:var(--text); background:rgba(255,255,255,0.06); }
.site-nav a.active { color:var(--accent2); }

.nav-status {
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--muted); flex-shrink:0;
}
.status-pulse {
  width:7px; height:7px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 8px rgba(45,212,191,0.7);
  animation:blink 2.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }

.panel-login-view {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:104px 20px 48px;
}

.login-card {
  width:min(100%, 460px);
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--r-xl);
  padding:28px; display:grid; gap:20px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(124,106,247,0.08);
  position:relative; overflow:hidden;
}
.login-card::before {
  content:'';
  position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}

.panel-login-brand { display:flex; align-items:center; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.panel-login-brand h1 { font-family:var(--font-head); font-weight:700; font-size:2rem; line-height:1; margin:4px 0 6px; }
.login-copy { color:var(--muted); font-size:14px; line-height:1.5; }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--soft); }

.login-form {
  background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; display:grid; gap:14px;
}

.form-section-label {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:2px;
}
.form-section-label span  { font-weight:700; font-size:15px; }
.form-section-label small { font-size:12px; color:var(--muted); }

/* Fields */
label {
  display:grid; gap:7px;
  font-size:12px; font-weight:600; color:var(--muted); letter-spacing:0.05em; text-transform:uppercase;
}
input, select, textarea {
  width:100%; min-height:44px; padding:0 14px;
  background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r-md);
  color:var(--text); font-size:15px; outline:none;
  transition:border-color 160ms, box-shadow 160ms;
}
textarea { padding:12px 14px; min-height:96px; resize:vertical; line-height:1.5; }
input::placeholder, textarea::placeholder { color:var(--soft); }
input:focus, select:focus, textarea:focus {
  border-color:rgba(124,106,247,0.6);
  box-shadow:0 0 0 3px rgba(124,106,247,0.14);
}
select option { background:var(--surface2); }

/* Buttons */
button, .btn-primary, .btn-secondary, .btn-danger {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:0 18px;
  border:1px solid transparent; border-radius:var(--r-pill);
  font-family:var(--font-head); font-weight:600; font-size:14px;
  cursor:pointer; white-space:nowrap; background:transparent;
  transition:all 0.18s;
}
button:hover, .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover {
  transform:translateY(-1px);
}
button:disabled { opacity:0.45; cursor:not-allowed; transform:none !important; }

.btn-primary {
  background:linear-gradient(135deg, var(--accent), #6254e8);
  color:#fff; border-color:transparent;
  box-shadow:0 4px 20px var(--glow);
}
.btn-primary:hover { box-shadow:0 6px 28px var(--glow); }

.btn-secondary {
  background:var(--surface2); border-color:var(--border2); color:var(--text);
}
.btn-secondary:hover { background:var(--surface3); }

.btn-danger {
  background:rgba(248,113,113,0.1); border-color:rgba(248,113,113,0.3); color:#fca5a5;
}
.btn-danger:hover { background:rgba(248,113,113,0.18); }

/* default buttons that are not .btn-* get primary style */
button:not([class]) { background:linear-gradient(135deg,var(--accent),#6254e8); color:#fff; border-color:transparent; box-shadow:0 4px 20px var(--glow); }

.full { width:100%; }

.token-card {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-radius:var(--r-lg);
  background:rgba(124,106,247,0.07); border:1px solid rgba(124,106,247,0.18);
}
.token-card strong { display:block; font-size:14px; font-weight:600; }
.token-card span   { display:block; font-size:12px; color:var(--muted); margin-top:2px; }

.notice {
  padding:12px 16px; border-radius:var(--r-lg);
  background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.25);
  color:var(--muted); font-size:14px; line-height:1.5;
}
.form-error  { color:#fca5a5; font-size:13px; min-height:16px; }
.form-message{ color:var(--accent2); font-size:13px; min-height:16px; }
.field-error { color:#fca5a5; font-size:12px; min-height:14px; }
.field-hint  { color:var(--soft); font-size:12px; }
.muted-text  { color:var(--muted); font-size:13px; }

/* ══════════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════════ */
.app-shell {
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  height:100dvh; overflow:hidden;
  position:relative; z-index:1;
}

/* ─── SIDEBAR ────────────────────────────────── */
.sidebar {
  display:flex; flex-direction:column; gap:12px;
  padding:18px 12px;
  background:var(--surface);
  border-right:1px solid var(--border);
  overflow:hidden; position:relative; z-index:10;
}
.sidebar::before {
  content:'';
  position:absolute; top:0; left:25%; right:25%; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.5;
}

.sidebar-brand { display:flex; align-items:center; gap:10px; padding:4px 6px 16px; border-bottom:1px solid var(--border); }
.sidebar-brand strong { font-family:var(--font-head); font-weight:700; font-size:15px; display:block; }
.sidebar-brand span   { font-size:11px; color:var(--soft); display:block; margin-top:2px; }

.nav { display:grid; gap:4px; }
.nav button {
  justify-content:flex-start; width:100%;
  min-height:44px; padding:0 12px;
  background:transparent; border-color:transparent;
  color:var(--soft); border-radius:var(--r-md);
  font-size:13px; font-weight:500; gap:10px;
  transition:all 160ms;
}
.nav button:hover { background:var(--surface2); border-color:transparent; color:var(--text); transform:none; box-shadow:none; }
.nav button.active {
  background:rgba(124,106,247,0.14); border-color:rgba(124,106,247,0.25);
  color:var(--accent2); box-shadow:none;
}
.nav-icon { font-size:15px; flex-shrink:0; }
.nav-short { display:none; }
.nav-label { flex:1; }

.sidebar-footer { margin-top:auto; display:grid; gap:10px; }
.session-chip {
  padding:10px 12px; border-radius:var(--r-md);
  background:rgba(124,106,247,0.06); border:1px solid var(--border);
  font-size:12px; color:var(--muted); overflow-wrap:anywhere; line-height:1.5;
}

/* ─── WORKSPACE ──────────────────────────────── */
.workspace {
  overflow-y:auto; overflow-x:hidden;
  padding:16px 22px 28px;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.workspace::-webkit-scrollbar { width:5px; }
.workspace::-webkit-scrollbar-thumb { background:var(--border2); border-radius:999px; }

/* ─── TOPBAR ─────────────────────────────────── */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--topbar-h); padding:0 20px;
  background:rgba(16,19,28,0.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border2); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); margin-bottom:16px;
  position:sticky; top:0; z-index:30;
}
.topbar-title { display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.topbar h2 { font-family:var(--font-head); font-weight:700; font-size:clamp(1.4rem,2vw,1.85rem); margin:3px 0 0; line-height:1; }
.mobile-back, .mobile-logout { display:none; }

/* ─── PANELS ─────────────────────────────────── */
.view-panel { display:grid; gap:14px; }

.panel, .hero-card {
  background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);
  transition:border-color 160ms;
}
.panel { padding:18px 20px; }
.panel:hover, .hero-card:hover { border-color:rgba(124,106,247,0.2); }

/* Hero */
.hero-card {
  padding:22px;
  display:grid; grid-template-columns:minmax(200px,0.65fr) minmax(280px,1.35fr); gap:20px;
  border-color:rgba(124,106,247,0.2);
  background:linear-gradient(135deg, var(--surface2), rgba(124,106,247,0.06));
  position:relative; overflow:hidden;
}
.hero-card::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:40%;
  background:radial-gradient(circle at 100% 0%, rgba(244,114,182,0.08), transparent 60%);
  pointer-events:none;
}
.hero-card > * { position:relative; z-index:1; }
.hero-card h3 {
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.9rem,3.2vw,2.9rem); line-height:0.95; margin:5px 0 6px;
  background:linear-gradient(135deg, var(--text), var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.quick-profile {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; align-self:center;
}
.quick-profile > button, .quick-profile > p { grid-column:1/-1; }

/* Section title */
.section-title {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:10px;
}
.section-title > div { min-width:0; }
.section-title span { font-family:var(--font-head); font-weight:700; font-size:16px; display:block; }
.section-title small { font-size:12px; color:var(--muted); display:block; margin-top:2px; }

/* Metric grid */
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.metric-card {
  padding:16px; min-height:100px;
  background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); transition:border-color 160ms, transform 160ms;
}
.metric-card:hover { transform:translateY(-2px); border-color:rgba(124,106,247,0.25); }
.metric-card span  { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--soft); display:block; margin-bottom:8px; }
.metric-card strong { font-family:var(--font-head); font-weight:700; font-size:2.2rem; color:var(--accent2); display:block; line-height:0.95; }
.metric-card:nth-child(2n) strong { color:var(--amber); }
.metric-card:nth-child(3n) strong { color:var(--teal); }

/* Details grid */
.details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.details-grid div { background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; }
.details-grid dt  { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--soft); margin-bottom:4px; }
.details-grid dd  { font-size:14px; color:var(--muted); overflow-wrap:anywhere; }

/* ─── LISTS ──────────────────────────────────── */
.compact-list, .process-list, .users-table { display:grid; gap:8px; }

.compact-row, .empty-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:50px; padding:10px 14px;
  background:rgba(0,0,0,0.25); border:1px solid var(--border); border-radius:var(--r-md);
  overflow-wrap:anywhere;
}
.compact-row:hover { background:rgba(124,106,247,0.06); border-color:rgba(124,106,247,0.18); }
.compact-row strong { font-size:14px; }
.compact-row span   { font-size:12px; color:var(--muted); }
.empty-row { color:var(--muted); font-size:14px; justify-content:center; }

.action-row { align-items:stretch; }
.action-row > div:first-child { display:grid; align-content:center; gap:4px; min-width:0; }
.compact-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }

.small-action, .inline-select {
  min-height:36px; border-radius:var(--r-pill); border:1px solid var(--border2);
  background:var(--surface3); color:var(--text); padding:0 12px; font:inherit; font-size:13px;
  cursor:pointer; transition:all 0.18s;
}
.small-action:hover:not(:disabled) { background:rgba(124,106,247,0.1); border-color:rgba(124,106,247,0.3); transform:translateY(-1px); }
.small-action:disabled { opacity:0.45; cursor:not-allowed; }
.secondary-action { color:var(--muted); }

/* Data grid */
.data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.wide { grid-column:1/-1; }

/* ─── PETS ───────────────────────────────────── */
.pet-card {
  display:grid; gap:12px; padding:16px;
  background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:var(--r-xl);
}
.pet-card.active { border-color:rgba(45,212,191,0.35); }
.pet-card-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; }
.pet-card-head strong { display:block; font-size:16px; }
.pet-card-head span   { display:block; margin-top:3px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.pet-badges  { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.pet-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.pet-stat { display:grid; gap:6px; padding:10px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--r-md); }
.pet-stat > div { display:flex; justify-content:space-between; gap:8px; }
.pet-stat span { color:var(--soft); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; }
.pet-stat strong { color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.pet-meter { height:6px; border-radius:99px; background:rgba(255,255,255,0.08); overflow:hidden; }
.pet-meter i { display:block; height:100%; min-width:4px; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--teal)); }
.pet-meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.pet-meta-row { display:grid; gap:3px; padding:9px 10px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:var(--r-md); }
.pet-meta-row span   { color:var(--soft); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; }
.pet-meta-row strong { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.pet-actions { display:grid; grid-template-columns:minmax(0,1.1fr) auto auto minmax(0,0.8fr) auto; gap:8px; align-items:center; }
.pet-actions .inline-select { width:100%; min-width:0; }
.detail-subtitle { margin-top:8px; font-size:14px; font-weight:700; }
.badge {
  display:inline-flex; align-items:center; justify-content:center; padding:4px 10px;
  border:1px solid var(--border2); border-radius:var(--r-pill);
  font-size:11px; font-weight:600; color:var(--muted); background:rgba(0,0,0,0.2);
  white-space:nowrap;
}
.badge.active  { border-color:rgba(74,222,128,0.4); color:#86efac; background:rgba(74,222,128,0.08); }
.badge.blocked { border-color:rgba(248,113,113,0.4); color:#fca5a5; background:rgba(248,113,113,0.08); }

/* ─── SHOP ───────────────────────────────────── */
.shop-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,400px); gap:14px; align-items:start; }
.shop-cart-panel { position:sticky; top:80px; }
.filters { display:grid; gap:8px; background:rgba(0,0,0,0.18); border:1px solid var(--border); border-radius:var(--r-lg); padding:10px; margin-bottom:12px; }
.filters, .log-controls { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.shop-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:5px; background:var(--surface3); border:1px solid var(--border); border-radius:var(--r-pill); margin-bottom:12px; }
.shop-tabs button { border:none; border-radius:var(--r-pill); min-height:36px; background:transparent; color:var(--muted); font-weight:600; font-size:13px; transition:all 160ms; }
.shop-tabs button.active { background:var(--accent); color:#fff; box-shadow:0 4px 16px var(--glow); }
.shop-tabs button:hover { transform:none; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.shop-product { display:grid; gap:12px; padding:14px; background:rgba(0,0,0,0.2); border:1px solid var(--border2); border-radius:var(--r-xl); }
.shop-product:hover { border-color:rgba(124,106,247,0.25); }
.shop-product-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.shop-product strong { display:block; font-size:15px; }
.shop-product-head span { font-size:13px; color:var(--muted); }
.shop-product p { color:var(--soft); font-size:13px; min-height:36px; }
.shop-buy-row { display:grid; grid-template-columns:100px 1fr; gap:8px; align-items:end; }
.shop-buy-row label { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; gap:4px; }
.cart-qty, .shop-buy-row input { min-height:38px; border-radius:var(--r-pill); border:1px solid var(--border2); background:var(--surface3); color:var(--text); padding:0 10px; width:100%; }
.cart-total { display:flex; align-items:center; justify-content:space-between; min-height:50px; padding:12px 14px; margin:10px 0; border-radius:var(--r-lg); background:rgba(0,0,0,0.18); border:1px solid var(--border); }
.cart-total span { font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.cart-total strong { font-size:16px; }
.order-title { margin-top:16px; }
.btn-row { display:flex; gap:8px; }
.btn-row .btn-primary { flex:1; }
.btn-row .btn-secondary { flex:1; }

/* ─── GAMES ──────────────────────────────────── */
.game-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.game-card { display:grid; gap:14px; min-height:240px; }
.featured-game { border-color:rgba(124,106,247,0.25) !important; }
.game-state { min-height:110px; display:grid; }
.game-result-card { display:grid; gap:10px; padding:14px; min-height:110px; border-radius:var(--r-lg); background:rgba(0,0,0,0.2); border:1px solid var(--border); }
.game-result-card > strong { color:var(--text); font-size:15px; overflow-wrap:anywhere; }
.game-result-card > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:8px; border-top:1px solid var(--border); min-height:32px; }
.game-result-card span { color:var(--soft); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; }
.game-result-card b   { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.game-controls { display:grid; grid-template-columns:minmax(100px,0.8fr) repeat(3,minmax(80px,1fr)); gap:8px; align-items:end; margin-top:auto; }
.compact-game-controls { grid-template-columns:minmax(100px,1fr) minmax(100px,1fr) minmax(110px,0.8fr); }
.game-controls label { display:grid; gap:5px; }
.game-controls input, .game-controls select { min-height:44px; }

/* ─── SUPPORT ────────────────────────────────── */
.support-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,440px); gap:14px; align-items:start; }
.support-main { display:grid; gap:14px; }
.support-detail-panel { position:sticky; top:80px; display:grid; gap:14px; }
.support-filters { grid-template-columns:minmax(0,1fr) 140px 150px; }
.double-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ticket-list { display:grid; gap:8px; }
.ticket-row {
  display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:12px; align-items:center;
  min-height:76px; width:100%; padding:14px 16px; text-align:left; cursor:pointer;
  border-radius:var(--r-xl); border:1px solid var(--border2); background:rgba(0,0,0,0.2);
  color:var(--text); transition:all 160ms;
}
.ticket-row:hover   { background:rgba(124,106,247,0.07); border-color:rgba(124,106,247,0.25); transform:translateY(-1px); }
.ticket-row.selected { background:rgba(124,106,247,0.12); border-color:rgba(124,106,247,0.4); }
.ticket-main { display:grid; gap:5px; min-width:0; }
.ticket-main strong { color:var(--text); font-size:15px; overflow-wrap:anywhere; }
.ticket-main span   { color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.ticket-badges { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.ticket-detail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ticket-detail-row, .ticket-message, .reply-row { border:1px solid var(--border); border-radius:var(--r-md); background:rgba(0,0,0,0.18); }
.ticket-detail-row { display:grid; gap:4px; min-height:56px; padding:10px 12px; }
.ticket-detail-row span   { color:var(--soft); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.ticket-detail-row strong { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.ticket-message { grid-column:1/-1; padding:12px; color:var(--muted); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.ticket-image-previews { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.ticket-image-preview { display:block; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--border2); background:rgba(0,0,0,0.2); }
.ticket-image-preview img { display:block; width:100%; aspect-ratio:1; object-fit:contain; }
.ticket-replies { max-height:280px; overflow:auto; display:grid; gap:8px; }
.reply-row { display:grid; gap:8px; padding:12px; }
.reply-row strong { color:var(--accent2); font-size:13px; overflow-wrap:anywhere; }
.reply-row p { color:var(--muted); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.ticket-status-controls, .reply-form { display:grid; gap:10px; }
.ticket-status-controls { grid-template-columns:1fr 1fr; }
.ticket-status-controls button { grid-column:1/-1; }

/* ─── PROFILE/ACCOUNT ────────────────────────── */
.profile-editor { display:grid; grid-template-columns:160px minmax(0,1fr); gap:14px; align-items:start; }
.avatar-preview-wrap { display:grid; place-items:center; min-height:160px; border-radius:var(--r-xl); border:1px solid var(--border); background:rgba(0,0,0,0.2); }
.avatar-preview { width:128px; height:128px; object-fit:cover; border-radius:22px; border:1px solid rgba(45,212,191,0.2); background:var(--surface2); }
.avatar-preview.empty { opacity:0.25; }
.avatar-tools { display:grid; gap:10px; }
.avatar-crop-canvas { width:min(100%,320px); aspect-ratio:1; border-radius:var(--r-xl); border:1px solid var(--border2); background:rgba(0,0,0,0.3); touch-action:none; cursor:grab; }

/* ─── MESSENGER ──────────────────────────────── */
.messenger-layout { display:grid; grid-template-columns:minmax(300px,360px) minmax(0,1fr); gap:14px; align-items:start; min-height:calc(100dvh - 120px); }
.conversation-list-panel { display:grid; gap:14px; position:sticky; top:80px; max-height:calc(100dvh - 110px); overflow:auto; }
.messenger-search { grid-template-columns:1fr; }
.conversation-list { display:grid; gap:8px; }
.user-suggestions { display:grid; gap:6px; }
.user-suggestion {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 8px; align-items:center;
  min-height:52px; padding:8px 12px; border-radius:var(--r-md); border:1px solid var(--border); background:rgba(0,0,0,0.18);
  color:var(--text); text-align:left; cursor:pointer; transition:all 160ms;
}
.user-suggestion:hover { border-color:rgba(124,106,247,0.3); background:rgba(124,106,247,0.07); }
.user-suggestion .mini-avatar { grid-row:span 2; }
.user-suggestion span  { font-weight:600; overflow-wrap:anywhere; }
.user-suggestion small { color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.conversation-row {
  display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:12px; align-items:center;
  width:100%; min-height:76px; padding:14px 16px; border-radius:var(--r-xl);
  border:1px solid var(--border2); background:rgba(0,0,0,0.2); color:var(--text);
  text-align:left; cursor:pointer; transition:all 160ms;
}
.conversation-row:hover   { background:rgba(124,106,247,0.07); border-color:rgba(124,106,247,0.25); transform:translateY(-1px); }
.conversation-row.selected { background:rgba(124,106,247,0.12); border-color:rgba(124,106,247,0.4); }
.conversation-main { display:grid; gap:5px; min-width:0; }
.conversation-main strong { color:var(--text); font-size:15px; overflow-wrap:anywhere; }
.conversation-main span   { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-side { display:grid; justify-items:end; gap:6px; }
.conversation-side b { min-width:22px; min-height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-pill); background:rgba(124,106,247,0.2); border:1px solid rgba(124,106,247,0.35); color:var(--accent2); font-size:11px; }
.compose-label { font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--muted); padding-bottom:8px; border-bottom:1px solid var(--border); }
.messenger-compose { display:grid; gap:10px; padding:14px; border-radius:var(--r-xl); border:1px solid var(--border); background:rgba(0,0,0,0.12); }
.selected-users { display:grid; gap:6px; }
.selected-user-chip { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(60px,max-content) auto; gap:8px; align-items:center; min-height:44px; padding:7px 10px; border-radius:var(--r-md); border:1px solid var(--border); background:rgba(124,106,247,0.08); }
.selected-user-chip strong { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selected-user-chip small  { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; }
.group-add-form { display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:8px; align-items:end; padding:12px; border-radius:var(--r-lg); border:1px solid var(--border); background:rgba(0,0,0,0.12); }
.group-add-form label, .group-add-form .user-suggestions, .group-add-form button { grid-column:1/-1; }
.chat-panel { display:grid; gap:14px; height:min(860px,calc(100dvh - 124px)); min-height:560px; grid-template-rows:auto auto auto minmax(0,1fr) auto auto; overflow:hidden; }
.chat-members { display:flex; flex-wrap:wrap; gap:8px; }
.chat-member-chip { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:center; min-height:46px; padding:8px; border-radius:var(--r-md); border:1px solid var(--border); background:rgba(0,0,0,0.15); }
.chat-member-text { display:grid; gap:2px; min-width:0; }
.chat-member-text strong { color:var(--text); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-member-text small   { color:var(--muted); font-size:11px; }
.chat-member-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.chat-member-actions button { min-height:32px; font-size:12px; }
.mini-avatar { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:50%; border:1px solid var(--border2); background:rgba(124,106,247,0.15); color:var(--accent2); font-weight:700; overflow:hidden; }
.mini-avatar.tiny { width:22px; height:22px; font-size:12px; }
.mini-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-messages { min-height:0; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:var(--r-xl); background:rgba(0,0,0,0.18); border:1px solid var(--border); }
.chat-message { width:min(74%,680px); display:grid; gap:7px; padding:12px 14px; }
.chat-message.own { align-self:flex-end; }
.message-row.user .bubble, .chat-message.own {
  background:linear-gradient(135deg, rgba(124,106,247,0.2), rgba(124,106,247,0.08));
  border:1px solid rgba(124,106,247,0.28); border-radius:22px 22px 6px 22px;
}
.message-row.assistant .bubble, .chat-message:not(.own) {
  background:var(--surface2); border:1px solid var(--border2); border-radius:22px 22px 22px 6px;
  color:var(--text);
}
.chat-message.deleted { opacity:0.6; }
.chat-message.system  { align-self:center; width:min(88%,560px); text-align:center; background:rgba(0,0,0,0.15); border:1px solid var(--border); border-radius:var(--r-pill); }
.chat-message > div { display:flex; justify-content:space-between; gap:12px; }
.chat-author { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.chat-message strong { color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.chat-message span   { color:var(--soft); font-size:11px; white-space:nowrap; }
.chat-message p      { color:var(--muted); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-tombstone { color:var(--soft) !important; font-style:italic; }
.chat-image-link { display:block; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--border2); background:rgba(0,0,0,0.2); }
.chat-image-link img { display:block; width:100%; max-height:360px; object-fit:contain; }
.chat-message-actions { display:flex; justify-content:flex-end; }
.chat-message-actions button { min-height:30px; font-size:12px; padding:0 10px; }
.chat-image-preview { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; align-items:center; padding:10px; border-radius:var(--r-lg); border:1px solid var(--border2); background:rgba(0,0,0,0.2); }
.chat-image-preview img { width:90px; height:90px; object-fit:cover; border-radius:var(--r-md); }
.chat-reply { display:grid; grid-template-columns:74px minmax(0,1fr) 116px; gap:8px; align-items:end; flex-shrink:0; }
.chat-reply textarea { min-height:52px; max-height:160px; resize:vertical; }

/* ─── ADMIN ──────────────────────────────────── */
.admin-layout { display:grid; grid-template-columns:minmax(360px,0.9fr) minmax(420px,1.1fr); gap:14px; align-items:start; }
.admin-detail-panel { position:sticky; top:80px; }
.form-grid { display:grid; gap:14px; }
.triple-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.form-section { display:grid; gap:10px; border-top:1px solid var(--border); padding-top:14px; }
.form-section:first-of-type { border-top:0; padding-top:0; }
.form-section-label { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal); }
.checkbox-row { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; background:rgba(0,0,0,0.18); border:1px solid var(--border); border-radius:var(--r-md); }
.checkbox-row input { width:auto; min-height:auto; accent-color:var(--accent); }
.ban-status { padding:10px 14px; border-radius:var(--r-md); font-weight:600; font-size:14px; color:var(--muted); background:rgba(0,0,0,0.18); border:1px solid var(--border); min-height:44px; overflow-wrap:anywhere; }
.ban-status.active  { border-color:rgba(74,222,128,0.35); color:#86efac; }
.ban-status.blocked { border-color:rgba(248,113,113,0.35); color:#fca5a5; }
.ban-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.admin-details { border-top:1px solid var(--border); margin-top:6px; padding-top:12px; }
#selectedUserJid { font-size:12px; color:var(--accent2); font-weight:500; }
.admin-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }

/* User rows */
.user-row {
  display:grid; grid-template-columns:minmax(200px,1fr) minmax(130px,0.55fr) max-content;
  align-items:center; gap:14px; min-height:74px; padding:12px 16px;
  background:rgba(0,0,0,0.2); border:1px solid var(--border2); border-radius:var(--r-xl);
  cursor:pointer; width:100%; text-align:left; color:var(--text); transition:all 160ms;
}
.user-row:hover   { background:rgba(124,106,247,0.07); border-color:rgba(124,106,247,0.25); transform:translateY(-1px); }
.user-row.selected { background:rgba(124,106,247,0.12); border-color:rgba(124,106,247,0.4); }
.user-row.storm-banned { background:rgba(248,113,113,0.06); border-color:rgba(248,113,113,0.2); }
.user-main strong { font-size:15px; font-weight:600; color:var(--text); overflow-wrap:anywhere; display:block; }
.user-main span, .user-meta span { font-size:12px; color:var(--muted); overflow-wrap:anywhere; display:block; margin-top:2px; }
.user-badges { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }

/* Process rows */
.process-row {
  display:grid; grid-template-columns:minmax(120px,0.8fr) minmax(130px,1fr) minmax(130px,1fr) max-content;
  align-items:center; gap:10px; min-height:50px; padding:10px 14px;
  background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:var(--r-md);
  cursor:pointer; width:100%; text-align:left; transition:all 160ms;
}
.process-row:hover { background:rgba(124,106,247,0.06); border-color:rgba(124,106,247,0.2); transform:translateY(-1px); }
.process-row strong { font-size:14px; color:var(--text); overflow-wrap:anywhere; }
.process-row span   { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }

/* ─── SYSTEM ─────────────────────────────────── */
.system-layout { display:grid; grid-template-columns:minmax(280px,0.75fr) minmax(0,1.25fr); gap:14px; }
.log-controls { display:grid; gap:8px; margin-bottom:12px; }
.log-output {
  background:rgba(0,0,0,0.5); border:1px solid var(--border2); border-radius:var(--r-xl);
  padding:16px; font-family:monospace; font-size:13px; line-height:1.55; color:var(--muted);
  white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto;
  min-height:280px; max-height:55vh; margin:0;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.log-output.is-live { border-color:rgba(74,222,128,0.4); box-shadow:0 0 0 3px rgba(74,222,128,0.07); }

/* ─── SKELETON ───────────────────────────────── */
.skeleton-card { background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:var(--r-xl); padding:14px; display:grid; gap:9px; min-height:64px; }
.skeleton-line { height:9px; border-radius:var(--r-pill); background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04)); background-size:200% 100%; animation:skelPulse 1.4s ease-in-out infinite; }
.skeleton-line.short  { width:40%; }
.skeleton-line.medium { width:65%; }
@keyframes skelPulse { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ─── APP MENU ───────────────────────────────── */
.app-menu-overlay { position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:22px; background:rgba(0,0,0,0.6); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.app-menu-sheet { width:min(860px,100%); max-height:min(760px,calc(100dvh - 44px)); display:grid; gap:14px; overflow:auto; padding:20px; border-radius:var(--r-xl); border:1px solid var(--border2); background:var(--surface); box-shadow:var(--shadow); }
.app-menu-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.app-menu-head h3 { font-family:var(--font-head); font-weight:700; font-size:1.6rem; }
.app-menu-grid, .dashboard-menu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
.app-menu-card {
  min-height:130px; display:grid; align-content:start; justify-items:start; gap:10px; padding:16px;
  border-radius:var(--r-xl); border:1px solid var(--border2); background:var(--surface2);
  color:var(--text); text-align:left; transition:all 160ms;
}
.app-menu-card:hover, .app-menu-card.active { transform:translateY(-2px); border-color:rgba(124,106,247,0.4); background:rgba(124,106,247,0.1); box-shadow:none; }
.app-menu-card strong { color:var(--text); font-size:15px; }
.app-menu-card small  { color:var(--muted); font-size:13px; line-height:1.35; }
.app-menu-icon { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-md); border:1px solid var(--border2); background:rgba(124,106,247,0.12); font-size:20px; }
.app-menu-logout { width:100%; }
body.app-menu-open { overflow:hidden; }
.dashboard-menu-panel { display:grid; gap:14px; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width:1280px) {
  .admin-layout, .system-layout, .shop-layout, .support-layout, .messenger-layout { grid-template-columns:1fr; }
  .admin-detail-panel, .shop-cart-panel, .support-detail-panel, .conversation-list-panel { position:static; max-height:none; overflow:visible; }
  .chat-panel { height:auto; min-height:620px; }
}

@media (max-width:900px) {
  .site-nav, .nav-status { display:none; }
  .site-header { padding:0 16px; }
  .panel-login-view { padding:90px 14px 32px; }
  .hero-card { grid-template-columns:1fr; }
  .quick-profile { grid-template-columns:1fr; }
  .data-grid { grid-template-columns:1fr; }
  .details-grid { grid-template-columns:1fr; }
  .game-layout { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .app-shell { display:block; height:auto; min-height:100dvh; overflow:visible; padding-bottom:calc(76px + env(safe-area-inset-bottom)); }

  .sidebar {
    position:fixed; left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom));
    height:auto; top:auto; flex-direction:column; gap:6px; padding:8px;
    border-radius:var(--r-xl); border:1px solid var(--border2); box-shadow:var(--shadow);
    z-index:70;
  }
  .sidebar::before, .sidebar-brand, .sidebar-footer { display:none; }
  .nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
  .sidebar { display:none !important; }
  .app-shell { padding-bottom:20px; }
  .nav button { min-height:50px; padding:0 4px; border-radius:var(--r-md); justify-content:center; text-align:center; flex-direction:column; gap:3px; font-size:11px; }
  .nav button:hover { transform:none; }
  .nav-icon { font-size:18px; }
  .nav-label { display:none; }
  .nav-short { display:block; }

  .workspace { padding:max(8px,env(safe-area-inset-top)) 10px calc(80px + 20px + env(safe-area-inset-bottom)); overflow:visible; }

  .topbar { top:max(8px,env(safe-area-inset-top)); min-height:56px; padding:8px 12px; border-radius:var(--r-lg) !important; margin-bottom:8px; }
  .topbar h2 { font-size:1.1rem !important; }
  .mobile-back:not(.hidden) { display:inline-flex; min-height:38px; }
  .mobile-logout { display:inline-flex; min-height:38px; }

  .panel, .hero-card, .metric-card, .login-card { border-radius:var(--r-lg) !important; }
  .panel, .hero-card { padding:14px; }

  .metric-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .metric-card { min-height:84px; padding:12px; }
  .metric-card strong { font-size:1.7rem; }

  .data-grid, .admin-layout, .system-layout, .shop-layout, .shop-grid, .game-layout, .support-layout, .support-form-grid, .messenger-layout, .ticket-detail, .triple-grid, .game-controls, .compact-game-controls, .ticket-status-controls, .log-controls { grid-template-columns:1fr !important; gap:8px; }
  .double-grid { grid-template-columns:1fr; }

  input, select, textarea, button { min-height:48px; font-size:16px !important; }
  textarea { min-height:110px; }

  .user-row { grid-template-columns:1fr; min-height:100px; }
  .user-badges, .ticket-badges, .conversation-side { justify-content:flex-start; }
  .compact-actions { grid-template-columns:1fr; }
  .compact-actions .small-action { width:100%; min-height:46px; }
  .pet-actions, .pet-stat-grid, .pet-meta-grid, .pet-card-head, .shop-buy-row { grid-template-columns:1fr !important; }
  .pet-badges { justify-content:flex-start; }

  .ticket-row, .conversation-row { grid-template-columns:1fr; min-height:88px; }
  .conversation-side { display:flex; align-items:center; }
  .conversation-main span { white-space:normal; }
  .ticket-replies { max-height:none; }

  .support-filters, .admin-search-bar, .messenger-search {
    position:sticky; top:calc(66px + env(safe-area-inset-top)); z-index:32;
    padding:8px; border-radius:var(--r-lg); background:rgba(10,12,18,0.94);
    backdrop-filter:blur(18px); border:1px solid var(--border);
  }

  .admin-actions {
    position:sticky; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:45;
    grid-template-columns:1fr 1fr !important; padding:8px;
    border:1px solid var(--border2); border-radius:var(--r-lg);
    background:rgba(10,12,18,0.96); backdrop-filter:blur(18px);
  }
  .admin-actions #toggleBlockButton { grid-column:1/-1; }
  #adminPanel:not(.mobile-detail) .admin-detail-panel { display:none; }
  #adminPanel.mobile-detail .admin-list-panel { display:none; }

  .chat-panel { height:auto; min-height:auto; overflow:visible; grid-template-rows:auto; }
  .chat-messages { min-height:360px; max-height:none; }
  .chat-message { width:100%; max-width:none; }
  .chat-reply {
    position:sticky; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:44;
    grid-template-columns:1fr !important; padding:8px;
    border:1px solid var(--border2); border-radius:var(--r-lg);
    background:rgba(10,12,18,0.96); backdrop-filter:blur(18px);
  }
  .chat-reply textarea { min-height:80px; }

  .conversation-list-panel { position:static; max-height:none; overflow:visible; }
  .process-row { grid-template-columns:1fr; min-height:auto; }
  .log-output { max-height:50vh; }

  .app-menu-overlay { place-items:end center; padding:10px; }
  .app-menu-sheet { width:100%; max-height:calc(100dvh - 20px); padding:14px; border-radius:24px 24px 16px 16px; }
  .app-menu-grid, .dashboard-menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-menu-card { min-height:114px; padding:14px; border-radius:var(--r-lg); }
  .app-menu-head h3 { font-size:1.2rem; }
  .topbar-actions { gap:6px; }
  #refreshAppButton { display:none; }
}

@media (max-width:430px) {
  .metric-grid { grid-template-columns:1fr; }
  .nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .nav button { min-height:46px; font-size:10px !important; }
  .app-menu-grid, .dashboard-menu-grid { grid-template-columns:1fr; }
}