/* Exact visual baseline from the owner-approved RTL panel source. */
@font-face{font-family:Vazirmatn;src:url('/static/Vazirmatn-Regular.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/static/Vazirmatn-SemiBold.ttf') format('truetype');font-weight:600 800;font-display:swap}
:root{
    --bg-deep:#050f0c; --bg-deep-2:#0a231b; --sidebar:#050b09;
    --panel:#ffffff; --panel-alt:#f4f7f6; --line:#e6ebe9;
    --mint:#22c98a; --mint-strong:#1aa972; --mint-soft:rgba(34,201,138,0.12);
    --ink:#10241f; --ink-soft:#5c6b67; --ink-faint:#9aa8a4;
    --amber:#d99a2b; --amber-soft:rgba(217,154,43,0.12);
    --danger:#e0563f; --danger-soft:rgba(224,86,63,0.1);
    --radius:16px; --radius-sm:10px;
    --shadow:0 20px 50px -20px rgba(6,35,28,0.45);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{ font-family:'Vazirmatn',sans-serif; background:radial-gradient(120% 140% at 15% 0%, var(--bg-deep-2) 0%, var(--bg-deep) 55%, #010504 100%); min-height:100vh; color:var(--ink); }
  .app{ display:flex; min-height:100vh; }
  .support-ticket{background:var(--panel-alt);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:12px 0;}
  .support-ticket header{display:flex;justify-content:space-between;align-items:center;gap:12px;}
  .support-ticket header div{display:flex;flex-direction:column;gap:3px;}
  .support-ticket header small,.support-message small{color:var(--ink-soft);}
  .support-messages{display:flex;flex-direction:column;gap:8px;margin:16px 0;max-height:320px;overflow:auto;}
  .support-message{display:flex;flex-direction:column;gap:5px;align-self:flex-start;max-width:88%;margin:0;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;}
  .support-message.from-support{align-self:flex-end;background:var(--mint-soft);}
  .support-actions{display:flex;align-items:start;gap:8px;flex-wrap:wrap;}
  .support-actions textarea{flex:1 1 300px;min-height:72px;resize:vertical;}

  /* Sidebar */
  .sidebar{ width:234px; flex-shrink:0; background:var(--sidebar); padding:22px 16px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; }
  .sidebar .brand{ display:flex; align-items:center; gap:10px; color:#eafff6; padding:0 6px; }
  .sidebar .brand .dot{ width:10px;height:10px;border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(34,201,138,0.18); }
  .sidebar .brand h1{ font-size:18px; font-weight:800; margin:0; }
  .menu{ display:flex; flex-direction:column; gap:4px; }
  .menu-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:11px; color:#bcd6cd; font-size:13.5px; font-weight:600; cursor:pointer; border:none; background:none; font-family:inherit; text-align:right; width:100%; }
  .menu-item svg{ width:17px; height:17px; flex-shrink:0; opacity:.85; }
  .menu-item:hover{ background:rgba(255,255,255,0.06); color:#eafff6; }
  .menu-item.active{ background:var(--mint); color:#06231b; }
  .menu-item.active svg{ opacity:1; }
  .menu-spacer{ flex:1; }
  .sidebar-logout{ display:flex; align-items:center; gap:8px; color:var(--mint); border:1px solid rgba(34,201,138,0.4); background:rgba(34,201,138,0.08); padding:10px 14px; border-radius:11px; font-size:13px; font-weight:600; cursor:pointer; justify-content:center; }

  .mobile-header{ display:none; align-items:center; justify-content:space-between; padding:16px 16px; color:#eafff6; }
  .mobile-header .brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px; }
  .mobile-header .dot{ width:9px;height:9px;border-radius:50%; background:var(--mint); }
  .burger{ background:none; border:none; color:#eafff6; cursor:pointer; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
  .burger svg{ width:22px; height:22px; }

  .drawer-overlay{ position:fixed; inset:0; background:rgba(4,20,16,0.55); z-index:60; display:none; }
  .drawer-overlay.open{ display:block; }
  .drawer{ position:fixed; top:0; bottom:0; right:0; width:78%; max-width:300px; background:var(--sidebar); z-index:61; padding:22px 16px; transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column; gap:22px; }
  .drawer.open{ transform:translateX(0); }
  .drawer .brand{ display:flex; align-items:center; gap:10px; color:#eafff6; padding:0 6px; }
  .drawer .close-btn{ margin-inline-start:auto; background:none;border:none;color:#bcd6cd;cursor:pointer; }
  .drawer .close-btn svg{ width:20px;height:20px; }

  .bottom-nav{ display:none; position:fixed; bottom:0; right:0; left:0; background:var(--sidebar); border-top:1px solid rgba(255,255,255,0.08); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); z-index:40; }
  .bottom-nav-inner{ display:flex; }
  .bn-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; color:#8fa79e; font-family:inherit; font-size:10.5px; font-weight:600; padding:4px 2px; cursor:pointer; }
  .bn-item svg{ width:18px;height:18px; }
  .bn-item.active{ color:var(--mint); }

  .main{ flex:1; min-width:0; padding:28px 26px 100px; }
  .view{ display:none; }
  .view.active{ display:block; }
  .page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; }
  .page-head h2{ color:#eafff6; font-size:21px; font-weight:800; margin:0; }
  .page-head p{ color:#9fc7ba; font-size:12.5px; margin:4px 0 0; }
  .logout-desktop{ display:flex; align-items:center; gap:8px; color:var(--mint); border:1px solid rgba(34,201,138,0.45); background:rgba(34,201,138,0.08); padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; flex-shrink:0; }

  .btn{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:13.5px; font-weight:700; border-radius:var(--radius-sm); padding:11px 18px; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
  .btn svg{ width:16px; height:16px; flex-shrink:0; }
  .btn-primary{ background:var(--mint); color:#06231b; }
  .btn-primary:hover{ background:var(--mint-strong); }
  .btn-secondary{ background:var(--panel-alt); color:var(--ink); border-color:var(--line); }
  .btn-ghost{ background:var(--panel-alt); color:var(--ink-soft); border-color:var(--line); }
  .btn-sm{ padding:8px 13px; font-size:12.5px; }

  .card{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); overflow:visible; }
  .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 26px; flex-wrap:wrap; position:relative; z-index:5; }
  .toolbar-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{ border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); font-family:inherit; font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:999px; cursor:pointer; }
  .chip.active{ background:var(--mint); border-color:var(--mint); color:#06231b; }
  .search{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--panel); border-radius:var(--radius-sm); padding:10px 14px; font-size:13.5px; color:var(--ink-soft); flex:1; max-width:320px; }
  .search input{ border:none; outline:none; background:none; font-family:inherit; font-size:13.5px; width:100%; color:var(--ink); }
  .search input::placeholder{ color:var(--ink-faint); }
  .search svg{ width:16px; opacity:.55; flex-shrink:0; }
  .select-native{ border:1px solid var(--line); background:var(--panel); border-radius:var(--radius-sm); padding:10px 12px; font-family:inherit; font-size:13px; color:var(--ink-soft); }

  .pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; white-space:nowrap; }
  .pill.active{ background:var(--mint-soft); color:var(--mint-strong); }
  .pill.inactive{ background:var(--danger-soft); color:var(--danger); }
  .pill.pending{ background:var(--amber-soft); color:var(--amber); }
  .pill .dot{ width:6px;height:6px;border-radius:50%; background:currentColor; }
  .muted{ color:var(--ink-soft); }

  .switch{ position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch .track{ position:absolute; inset:0; background:#d7ddda; border-radius:999px; transition:.15s; cursor:pointer; }
  .switch .track::before{ content:""; position:absolute; width:16px; height:16px; right:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
  .switch input:checked + .track{ background:var(--mint); }
  .switch input:checked + .track::before{ transform:translateX(-16px); }

  .section-gap{ margin-bottom:16px; }

  /* ===== Overview: monitoring grid ===== */
  .monitoring-grid{ display:grid; grid-template-columns:1fr 1fr 220px; gap:16px; margin-bottom:16px; }
  .sensor-card{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
  .sensor-card header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .sensor-card header strong{ display:block; font-size:14px; }
  .sensor-card header small{ color:var(--ink-faint); font-size:11.5px; }
  .sensor-state{ background:var(--mint-soft); color:var(--mint-strong); font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:999px; letter-spacing:.5px; }
  .sensor-row{ margin-bottom:11px; }
  .sensor-row > div{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); margin-bottom:5px; }
  .sensor-row b{ color:var(--ink); font-size:13px; }
  .sensor-track{ display:block; height:6px; background:var(--panel-alt); border-radius:6px; overflow:hidden; }
  .sensor-track i{ display:block; height:100%; width:var(--sensor-value); background:linear-gradient(90deg,var(--mint),var(--mint-strong)); border-radius:6px; }
  .sensor-track i.warning-value{ background:linear-gradient(90deg,var(--amber),#c98420); }
  .sensor-card footer{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; margin-top:4px; font-size:11px; color:var(--ink-faint); font-weight:700; letter-spacing:.4px; }
  .sensor-card footer b{ color:var(--mint-strong); font-size:12px; }

  .health-card{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
  .health-ring{ width:118px; height:118px; border-radius:50%; background:conic-gradient(var(--mint) var(--ring,92%), var(--panel-alt) 0); display:flex; align-items:center; justify-content:center; }
  .health-ring span{ width:88px; height:88px; border-radius:50%; background:var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .health-ring b{ font-size:19px; font-weight:800; }
  .health-ring small{ font-size:10.5px; color:var(--ink-faint); }
  .health-card footer{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-faint); font-weight:700; }
  .health-card footer b{ color:var(--mint-strong); }

  /* route map */
  .route-map{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; margin-bottom:16px; }
  .route-map header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .route-map .kicker{ font-size:10.5px; color:var(--ink-faint); font-weight:800; letter-spacing:.6px; margin:0 0 2px; }
  .route-map header strong{ font-size:14.5px; }
  .route-legend{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--mint-strong); font-weight:700; }
  .route-legend i{ width:7px;height:7px;border-radius:50%; background:var(--mint); }
  .route-flow{ display:flex; align-items:center; gap:0; }
  .route-station{ flex:1; background:var(--panel-alt); border-radius:14px; padding:16px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; }
  .route-station .station-icon{ width:34px;height:34px;border-radius:10px; background:var(--mint-soft); color:var(--mint-strong); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; margin-bottom:4px; }
  .route-station small{ font-size:11px; color:var(--ink-faint); }
  .route-station strong{ font-size:13.5px; }
  .route-station b{ font-size:10.5px; color:var(--mint-strong); font-weight:700; }
  .route-link{ flex:0 0 60px; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink-faint); }
  .route-link i{ width:100%; height:2px; background:repeating-linear-gradient(90deg, var(--mint) 0 6px, transparent 6px 10px); }
  .route-link em{ font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.4px; }

  /* expandable panel */
  .expandable-panel{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; }
  .expandable-panel summary{ list-style:none; display:flex; align-items:center; gap:12px; padding:18px 22px; cursor:pointer; }
  .expandable-panel summary::-webkit-details-marker{ display:none; }
  .section-icon{ width:32px;height:32px;border-radius:10px; background:var(--danger-soft); color:var(--danger); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
  .section-icon.server-section-icon{ background:var(--mint-soft); color:var(--mint-strong); }
  .expandable-panel summary h2{ font-size:14.5px; margin:0; }
  .expandable-panel summary p{ font-size:11.5px; color:var(--ink-soft); margin:2px 0 0; }
  .expand-chevron{ margin-inline-start:auto; width:10px; height:10px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:rotate(45deg); transition:.15s; flex-shrink:0; }
  .expandable-panel[open] .expand-chevron{ transform:rotate(-135deg); }
  .attention-list, .dashboard-server-list{ padding:0 22px 6px; display:flex; flex-direction:column; gap:10px; }
  .attention-item{ display:flex; align-items:center; justify-content:space-between; background:var(--danger-soft); border-radius:12px; padding:12px 14px; gap:10px; }
  .attention-item .a-text strong{ display:block; font-size:13px; }
  .attention-item .a-text small{ font-size:11.5px; color:var(--ink-soft); }
  .expandable-panel footer{ padding:12px 22px 18px; }
  .text-button{ background:none; border:none; color:var(--mint-strong); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
  .dash-server-row{ display:flex; align-items:center; justify-content:space-between; background:var(--panel-alt); border-radius:12px; padding:11px 14px; gap:10px; }
  .dash-server-row .ds-name{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:13px; }
  .dash-server-row .ds-name small{ display:block; font-weight:500; color:var(--ink-faint); font-size:11px; }

  .dashboard-note{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; }
  .dashboard-note header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .dashboard-note .kicker{ font-size:10.5px; color:var(--ink-faint); font-weight:800; letter-spacing:.6px; margin:0 0 2px; }
  .dashboard-note h2{ font-size:14.5px; margin:0; }
  .dashboard-note span{ font-size:11px; color:var(--ink-faint); }
  .dashboard-note textarea{ width:100%; min-height:100px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; font-family:inherit; font-size:13px; resize:vertical; outline:none; }
  .dashboard-note footer{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
  .dashboard-note footer small{ color:var(--ink-faint); font-size:11.5px; }

  /* ===== Servers ===== */
  .servers-grid, .games-grid, .catalog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; padding:20px 26px; }
  .edge-group-heading{ grid-column:1/-1; margin:10px 0 0; padding:8px 2px; color:var(--text); font-size:15px; border-bottom:1px solid var(--line); }
  .edge-card{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; border:1px solid transparent; }
  .edge-card.offline{ opacity:.72; }
  .edge-card-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; gap:8px; }
  .edge-title{ display:flex; align-items:center; gap:10px; min-width:0; }
  .server-icon{ width:34px;height:34px;border-radius:10px; background:var(--mint-soft); color:var(--mint-strong); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
  .edge-title strong{ display:block; font-size:14px; }
  .edge-title small{ color:var(--ink-faint); font-size:11.5px; }
  .route-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .tag{ background:var(--panel-alt); border:1px solid var(--line); color:var(--ink-soft); font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; }
  .endpoint{ display:block; direction:ltr; text-align:right; font-family:monospace; font-size:12px; background:var(--panel-alt); border-radius:8px; padding:7px 10px; margin-bottom:12px; color:var(--ink-soft); }
  .edge-stats{ display:flex; flex-wrap:wrap; gap:14px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line); }
  .edge-stats span{ font-size:11.5px; color:var(--ink-faint); }
  .edge-stats b{ color:var(--ink); font-size:13px; display:block; }
  .card-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .card-footer small{ font-size:11px; color:var(--ink-faint); }
  .edge-card-actions{ display:flex; gap:6px; }
  .enter-edge, .edit-edge{ font-family:inherit; font-size:11.5px; font-weight:700; border-radius:8px; padding:7px 11px; cursor:pointer; text-decoration:none; border:1px solid var(--line); }
  .enter-edge{ background:var(--mint-soft); color:var(--mint-strong); border-color:transparent; }
  .edit-edge{ background:var(--panel-alt); color:var(--ink-soft); }

  /* ===== Games ===== */
  .game-card{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
  .game-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .game-glyph{ width:38px;height:38px;border-radius:11px; background:var(--mint-soft); color:var(--mint-strong); display:flex;align-items:center;justify-content:center; font-weight:800; flex-shrink:0; }
  .game-card-head h3{ font-size:14.5px; margin:0; }
  .game-card-head small{ font-size:11.5px; color:var(--ink-faint); direction:ltr; }
  .profile-summary{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .profile-summary span{ background:var(--panel-alt); border-radius:999px; padding:5px 11px; font-size:11px; color:var(--ink-soft); }
  .profile-summary b{ color:var(--ink); }
  .region-branches{ display:flex; flex-direction:column; gap:10px; }
  .region-branch{ background:var(--panel-alt); border-radius:12px; padding:12px 14px; }
  .region-branch > span:first-child{ font-size:12.5px; font-weight:700; }
  .region-branch strong{ font-size:16px; margin-inline-start:6px; color:var(--mint-strong); }
  .region-branch > small{ font-size:11px; color:var(--ink-faint); }
  .region-server-list{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
  .region-server-pill{ background:var(--panel); border:1px solid var(--line); font-size:10.5px; padding:3px 9px; border-radius:999px; color:var(--ink-soft); }
  .manage-region{ width:100%; border:1px dashed var(--line); background:none; border-radius:9px; padding:8px; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--mint-strong); cursor:pointer; }
  .manage-region:hover{ background:var(--mint-soft); border-style:solid; border-color:transparent; }

  .catalog-panel{ padding:6px 26px 20px; }
  .catalog-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
  .catalog-panel-head .kicker{ font-size:10.5px; color:#9fc7ba; font-weight:800; letter-spacing:.6px; margin:0 0 2px; }
  .catalog-panel-head h2{ color:#eafff6; font-size:16px; margin:0; }
  .catalog-panel-head p{ color:#9fc7ba; font-size:11.5px; margin:2px 0 0; }
  .catalog-version{ background:rgba(34,201,138,0.15); color:var(--mint); font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px; flex-shrink:0; }
  .dependency-card{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; }
  .dependency-card header{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
  .dependency-card header strong{ display:block; font-size:13.5px; }
  .dependency-card header code{ font-size:10.5px; color:var(--ink-faint); direction:ltr; }
  .dependency-status{ font-size:10px; font-weight:800; padding:4px 9px; border-radius:999px; white-space:nowrap; }
  .dependency-status.reviewed{ background:var(--mint-soft); color:var(--mint-strong); }
  .dependency-status.device-verified{ background:#dbeafe; color:#2563eb; }
  .dependency-status.provisional{ background:var(--amber-soft); color:var(--amber); }
  .dependency-status.platform-variant{ background:#ede9fe; color:#7c3aed; }
  .dependency-row{ margin-bottom:8px; }
  .dependency-row small{ display:block; font-size:10.5px; color:var(--ink-faint); margin-bottom:4px; }
  .dependency-row div{ display:flex; flex-wrap:wrap; gap:5px; }
  .dependency-row span{ background:var(--panel-alt); font-size:10.5px; padding:3px 8px; border-radius:7px; }
  .dependency-row code{ background:var(--panel-alt); font-size:10px; padding:3px 8px; border-radius:7px; direction:ltr; }
  .dependency-row em{ font-style:normal; color:var(--ink-faint); font-size:11px; }
  .dependency-card p{ font-size:11.5px; color:var(--ink-soft); margin:8px 0 0; }

  /* ===== Users ===== */
  .table-wrap{ padding:0 10px 6px; overflow-x:auto; }
  table{ width:100%; border-collapse:collapse; }
  thead th{ text-align:right; font-size:12.5px; font-weight:600; color:var(--ink-faint); padding:10px 16px; white-space:nowrap; }
  thead th.center{ text-align:center; }
  tbody tr:nth-child(odd){ background:var(--panel-alt); }
  tbody td{ padding:15px 16px; font-size:13.5px; color:var(--ink); white-space:nowrap; }
  tbody tr td:first-child{ border-radius:12px 0 0 12px; font-weight:700; }
  tbody tr td:last-child{ border-radius:0 12px 12px 0; }
  .name-cell{ display:flex; align-items:center; gap:9px; }
  .name-cell .sub{ font-size:11.5px; color:var(--ink-faint); font-weight:500; direction:ltr; text-align:right; }
  .avatar{ width:30px;height:30px;border-radius:50%; background:linear-gradient(135deg, var(--mint-soft), #d7f4e8); color:var(--mint-strong); display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:800; flex-shrink:0; }
  .code-tag{ font-family:monospace; direction:ltr; background:var(--panel-alt); border:1px solid var(--line); padding:4px 9px; border-radius:7px; font-size:12.5px; font-weight:700; letter-spacing:.5px; }
  .row-actions{ display:flex; align-items:center; gap:6px; justify-content:flex-end; position:relative; }
  .view-btn, .kebab-btn{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--panel-alt); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; flex-shrink:0; }
  .view-btn:hover{ background:var(--mint-soft); color:var(--mint-strong); border-color:transparent; }
  .view-btn.detail-button{ width:auto; min-width:58px; padding:0 10px; font-size:10px; font-weight:800; }
  .kebab-btn:hover{ background:#ecf1ef; }
  .view-btn svg, .kebab-btn svg{ width:15px; height:15px; }
  .kebab-menu{ position:absolute; top:calc(100% + 6px); left:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); z-index:55; width:180px; overflow:hidden; display:none; }
  .kebab-menu.open{ display:block; }
  .kebab-menu button{ display:flex; align-items:center; gap:9px; width:100%; text-align:right; background:none; border:none; font-family:inherit; font-size:13px; padding:11px 14px; cursor:pointer; color:var(--ink); }
  .kebab-menu button svg{ width:15px;height:15px; opacity:.75; }
  .kebab-menu button:hover{ background:var(--panel-alt); }
  .kebab-menu button.danger{ color:var(--danger); }
  .kebab-menu button.danger:hover{ background:var(--danger-soft); }
  .kebab-menu hr{ border:none; border-top:1px solid var(--line); margin:2px 0; }
  .footer{ display:flex; align-items:center; justify-content:space-between; padding:16px 26px 22px; border-top:1px solid var(--line); flex-wrap:wrap; gap:12px; }
  .result-count{ font-size:12.5px; color:var(--ink-faint); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .page-size{ display:flex; align-items:center; gap:6px; }
  .page-size span{ color:var(--ink-faint); }
  .page-size-btn{ border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); font-family:inherit; font-size:12px; font-weight:700; padding:5px 11px; border-radius:8px; cursor:pointer; }
  .page-size-btn.active{ background:var(--mint); border-color:var(--mint); color:#06231b; }
  .pagination{ display:flex; align-items:center; gap:6px; }
  .pg-btn{ width:30px;height:30px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; display:flex;align-items:center;justify-content:center; }
  .pg-btn.active{ background:var(--mint); border-color:var(--mint); color:#06231b; }
  .pg-btn:disabled{ opacity:.4; cursor:not-allowed; }
  .pg-btn svg{ width:13px;height:13px; }

  .cards{ display:none; padding:4px 16px 10px; }
  .ccard{ background:var(--panel-alt); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
  .ccard-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--line); gap:8px; }
  .ccard-name{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; min-width:0; }
  .ccard-name .txt-wrap{ min-width:0; }
  .ccard-name .txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
  .ccard-name .sub{ font-size:11px; color:var(--ink-faint); direction:ltr; text-align:right; font-weight:500; }
  .ccard-head-right{ display:flex; align-items:center; gap:6px; flex-shrink:0; position:relative; }
  .ccard-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; margin-bottom:12px; }
  .ccard-field label{ display:block; font-size:11px; color:var(--ink-faint); margin-bottom:3px; }
  .ccard-field div{ font-size:13px; font-weight:600; }
  .ccard-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .ccard .btn{ padding:8px 14px; font-size:12.5px; }

  /* ===== Updates ===== */
  .release-policy{ display:flex; align-items:center; gap:12px; background:var(--amber-soft); margin:18px 26px 0; padding:14px 16px; border-radius:12px; }
  .release-policy-mark{ width:26px;height:26px;border-radius:50%; background:var(--amber); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
  .release-policy strong{ display:block; font-size:12.5px; }
  .release-policy small{ font-size:11.5px; color:var(--ink-soft); }
  .release-identity{ display:flex; flex-direction:column; gap:4px; white-space:normal; }
  .release-version{ font-weight:800; font-size:13.5px; direction:ltr; display:inline-block; }
  .badge{ display:inline-block; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; margin-inline-start:6px; }
  .badge.active{ background:var(--mint-soft); color:var(--mint-strong); }
  #view-ssh-fallback .card{ max-width:780px; }
  #view-ssh-fallback .stack-form{ padding:24px; margin-top:0; }
  #view-ssh-fallback .status-line{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  .badge.expired{ background:var(--danger-soft); color:var(--danger); }
  .release-identity small{ color:var(--ink-faint); font-size:11px; }
  .release-user-stats{ display:flex; gap:14px; white-space:normal; }
  .release-user-stats span{ display:flex; flex-direction:column; font-size:10.5px; color:var(--ink-faint); }
  .release-user-stats b{ font-size:13px; color:var(--ink); }
  .release-user-stats .online b{ color:var(--mint-strong); }
  .release-file-cell{ white-space:normal; }
  .release-file-cell strong{ display:block; font-size:12.5px; }
  .release-file-cell small{ color:var(--ink-faint); font-size:11px; }
  .release-file-cell code{ display:inline-block; margin-top:4px; direction:ltr; font-size:10.5px; background:var(--panel-alt); padding:2px 7px; border-radius:6px; color:var(--ink-soft); }
  .release-notes{ max-width:220px; white-space:normal; font-size:12px; color:var(--ink-soft); margin:0; }
  .release-row-actions{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
  .release-row-actions button{ border:1px solid var(--line); background:var(--panel-alt); color:var(--ink-soft); font-family:inherit; font-size:11px; font-weight:700; padding:6px 10px; border-radius:8px; cursor:pointer; white-space:nowrap; }
  .release-row-actions button.block{ background:var(--danger-soft); color:var(--danger); border-color:transparent; }
  .release-row-actions button.publish{ background:var(--mint-soft); color:var(--mint-strong); border-color:transparent; }
  .release-row-actions button.file-delete, .release-row-actions button.release-delete{ color:var(--danger); }
  .release-row-actions button:disabled{ opacity:.4; cursor:not-allowed; }

  /* ===== Notifications ===== */
  .notif-layout{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px 26px; }
  .notif-form{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; display:flex; flex-direction:column; gap:12px; }
  .notif-form .kicker{ font-size:10.5px; color:var(--ink-faint); font-weight:800; letter-spacing:.6px; margin:0; }
  .notif-form h2{ font-size:15px; margin:2px 0 2px; }
  .notif-form > p{ font-size:11.5px; color:var(--ink-soft); margin:0 0 6px; }
  .notif-form label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
  .notif-form input, .notif-form textarea{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 14px; font-family:inherit; font-size:13.5px; outline:none; width:100%; }
  .notif-form textarea{ resize:vertical; min-height:110px; }
  .delivery-note{ font-size:11px; color:var(--ink-faint); }
  .notif-history{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
  .notif-history-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .notif-history-head h3{ margin:0; font-size:14.5px; }
  .notif-history-head span{ font-size:11.5px; color:var(--ink-faint); }
  .notif-item{ border-bottom:1px solid var(--line); padding:12px 0; }
  .notif-item:last-child{ border-bottom:none; }
  .notif-item-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
  .notif-item .n-title{ font-weight:700; font-size:13.5px; }
  .notif-item time{ font-size:11px; color:var(--ink-faint); }
  .notif-item .n-msg{ font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; }
  .notif-item-foot{ display:flex; align-items:center; justify-content:space-between; }
  .notif-item .n-exp{ font-size:11px; color:var(--ink-faint); }
  .notif-delete{ border:none; background:var(--danger-soft); color:var(--danger); font-family:inherit; font-size:11px; font-weight:700; padding:6px 11px; border-radius:8px; cursor:pointer; }

  /* Detail overlay: modal on desktop, bottom sheet on mobile/tablet */
  .detail-overlay{ position:fixed; inset:0; background:rgba(4,20,16,0.55); z-index:80; display:none; align-items:center; justify-content:center; padding:6vh 16px; }
  .detail-overlay.open{ display:flex; }
  .detail-panel{ background:var(--panel); border-radius:18px; width:100%; max-width:460px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow); }
  .detail-overlay.sheet-mode{ align-items:flex-end; justify-content:stretch; padding:0; }
  .detail-overlay.sheet-mode .detail-panel{ max-width:none; border-radius:20px 20px 0 0; max-height:90vh; animation:sheetUp .25s ease; }
  @keyframes sheetUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
  .sheet-handle{ display:none; justify-content:center; padding:10px 0 4px; }
  .sheet-handle span{ width:38px; height:4px; border-radius:99px; background:#dfe6e3; }
  .detail-overlay.sheet-mode .sheet-handle{ display:flex; }
  .detail-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px 16px; border-bottom:1px solid var(--line); }
  .detail-head .who{ display:flex; align-items:center; gap:10px; }
  .detail-head .who .avatar{ width:38px;height:38px; font-size:14px; }
  .detail-head .who .nm{ font-weight:800; font-size:15px; }
  .detail-head .who .mb{ font-size:11.5px; color:var(--ink-faint); direction:ltr; text-align:right; }
  .detail-close{ background:var(--panel-alt); border:none; width:30px;height:30px; border-radius:9px; cursor:pointer; display:flex;align-items:center;justify-content:center; color:var(--ink-soft); flex-shrink:0; }
  .detail-close svg{ width:15px;height:15px; }
  .detail-body{ padding:18px 20px 24px; }
  .sub-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
  .sub-actions button{ flex:1; min-width:70px; border:1px solid var(--line); background:var(--panel-alt); border-radius:10px; padding:9px 6px; font-family:inherit; font-size:12px; font-weight:700; color:var(--ink); cursor:pointer; }
  .sub-actions button.reset{ color:var(--danger); }
  .sub-actions button:hover{ background:var(--mint-soft); border-color:transparent; color:var(--mint-strong); }
  .sub-actions button.reset:hover{ background:var(--danger-soft); color:var(--danger); }
  .detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 14px; }
  .detail-field.full{ grid-column:1 / -1; }
  .detail-field label{ display:block; font-size:11.5px; color:var(--ink-faint); margin-bottom:4px; }
  .detail-field div{ font-size:13.5px; font-weight:700; word-break:break-all; }
  .detail-field div.mono{ font-family:monospace; direction:ltr; text-align:right; font-weight:600; font-size:12px; }
  .install-list{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
  .install-item{ display:flex; align-items:center; justify-content:space-between; background:var(--panel-alt); border-radius:10px; padding:9px 12px; font-size:12px; }

  .detail-actions{ display:flex; flex-direction:column; gap:7px; margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
  .detail-actions .da-label{ font-size:11.5px; color:var(--ink-faint); font-weight:700; margin-bottom:2px; }
  .detail-actions button{ display:flex; align-items:center; gap:10px; width:100%; text-align:right; background:var(--panel-alt); border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-family:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; }
  .detail-actions button svg{ width:15px;height:15px; opacity:.75; flex-shrink:0; }
  .detail-actions button.danger{ color:var(--danger); background:var(--danger-soft); border-color:transparent; }
  .detail-actions button:hover{ background:var(--mint-soft); border-color:transparent; }
  .detail-actions button.danger:hover{ background:var(--danger-soft); }

  .error-report-toolbar{ align-items:center; gap:12px; flex-wrap:wrap; }
  .error-report-toolbar .chips{ flex:1 1 auto; }
  .error-report-toolbar .search{ flex:0 1 320px; }
  .error-report-sort{ display:flex; align-items:center; gap:7px; color:var(--ink-faint); font-size:11.5px; font-weight:700; }
  .error-report-sort select{ min-width:138px; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--panel-alt); color:var(--ink); font-family:inherit; padding:0 10px; }
  .error-report-item{ display:block; padding:16px; margin:10px 0; border:1px solid var(--line); border-radius:12px; transition:border-color .18s ease,background .18s ease; }
  .error-report-item.resolved{ border-color:#8fd7b3; background:#f3fcf7; }
  .error-report-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .error-report-metrics{ display:flex; flex-wrap:wrap; gap:7px; margin:9px 0 12px; }
  .error-report-metrics span{ padding:5px 9px; border-radius:8px; background:var(--panel-alt); color:var(--ink-soft); font-size:11.5px; }
  .error-report-metrics b{ color:var(--ink); }
  .error-status{ display:inline-flex; align-items:center; min-height:27px; padding:4px 10px; border-radius:999px; background:var(--panel-alt); color:var(--ink-soft); font-size:11.5px; font-weight:800; white-space:nowrap; }
  .error-status.investigating{ background:#fff5d8; color:#8a6410; }
  .error-status.resolved{ background:#dff7e9; color:#147a48; }
  .error-report-status-actions{ display:flex; gap:8px; flex-wrap:wrap; padding:16px 20px; border-bottom:1px solid var(--line); }
  .error-report-status-actions button{ border:1px solid var(--line); background:var(--panel-alt); color:var(--ink); border-radius:999px; padding:8px 14px; font-family:inherit; font-weight:700; cursor:pointer; }
  .error-report-status-actions button.active{ background:var(--mint-soft); border-color:var(--mint); color:var(--mint-strong); }
  .error-report-status-actions button[data-set-error-status="resolved"].active{ background:#dff7e9; border-color:#8fd7b3; color:#147a48; }
  .error-report-details{ padding:20px; }
  .error-report-modal{ width:min(820px,calc(100vw - 28px)); }
  .error-occurrence-list{ display:flex; flex-direction:column; gap:8px; margin-top:5px; }
  .error-occurrence{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-alt); }
  .error-occurrence div{ min-width:0; }
  .error-occurrence strong,.error-occurrence small{ display:block; }
  .error-occurrence small{ margin-top:3px; color:var(--ink-faint); font-weight:500; }
  .error-occurrence .button{ min-height:34px; padding:7px 10px; white-space:nowrap; }
  .modal-action-spacer{ flex:1; }

  .ccard{ cursor:pointer; }

  /* ================= Responsive ================= */
  @media (max-width:1100px){
    .table-wrap{ display:none; }
    #view-updates .table-wrap{ display:block; -webkit-overflow-scrolling:touch; }
    .cards{ display:block; }
    .monitoring-grid{ grid-template-columns:1fr 1fr; }
    .health-card{ grid-column:1 / -1; }
    .notif-layout{ grid-template-columns:1fr; }
    .route-flow{ flex-wrap:wrap; }
    .route-link{ flex:0 0 100%; flex-direction:row; height:20px; }
    .route-link i{ height:2px; width:100%; }
  }
  @media (max-width:980px){
    .sidebar{ display:none; }
    .mobile-header{ display:flex; }
    .bottom-nav{ display:block; }
    .main{ padding:4px 14px 90px; }
    .logout-desktop{ display:none; }
    .page-head{ margin-bottom:14px; }
    .page-head h2{ font-size:18px; }
    .servers-grid, .games-grid, .catalog-grid, .notif-layout, .catalog-panel{ padding-left:2px; padding-right:2px; }
    .monitoring-grid{ grid-template-columns:1fr; }
    .release-notes{ max-width:150px; }
  }
  @media (max-width:620px){
    .error-occurrence{ grid-template-columns:1fr auto; }
    .error-occurrence .button{ grid-column:1 / -1; justify-content:center; }
  }
  @media (max-width:420px){
    .toolbar{ padding:14px 14px; }
    .ccard-grid{ grid-template-columns:1fr 1fr; }
    .detail-grid{ grid-template-columns:1fr; }
    .sub-actions button{ min-width:60px; }
  }

  /* Operational components use the same source tokens and component language. */
  [hidden]{ display:none!important; }
  body.menu-open{ overflow:hidden; }
  button,input,select,textarea{ font:inherit; }
  button:disabled{ cursor:not-allowed; opacity:.5; }
  a{ color:inherit; }
  .brand small{ display:block; color:#9fc7ba; font-size:10px; }
  .drawer-head{ display:flex; align-items:center; }
  .drawer .brand h1{ margin:0; font-size:18px; }
  .drawer .brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(34,201,138,.18); }
  .menu-item b{ margin-inline-start:auto; min-width:22px; border-radius:999px; background:rgba(255,255,255,.08); padding:2px 7px; text-align:center; font-size:10px; }
  .menu-item.active b{ background:rgba(6,35,27,.12); }

  .route-map{ display:block; direction:rtl; }
  .route-map>.route-flow{ padding-left:0; }
  .route-map i{ height:auto; background:transparent; }
  .edge-card:after{ content:none; }
  .tag.europe,.tag.middle-east,.tag.america{ background:var(--panel-alt); color:var(--ink-soft); }
  .edge-maintenance-state,.edge-drain-control,.edge-usage-hours{ display:grid; gap:3px; margin:10px 0; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-alt); padding:10px 12px; }
  .edge-maintenance-state strong,.edge-drain-control strong,.edge-usage-hours strong{ color:var(--ink); font-size:11.5px; }
  .edge-maintenance-state small,.edge-drain-control small,.edge-usage-hours small{ color:var(--ink-faint); font-size:9px; }
  .edge-maintenance-state.draining{ border-color:var(--amber); background:var(--amber-soft); }
  .edge-maintenance-state.draining strong{ color:var(--amber); }
  .edge-maintenance-state.ready{ border-color:var(--mint); background:var(--mint-soft); }
  .edge-maintenance-state.ready strong{ color:var(--mint-strong); }
  .edge-maintenance-state.updating{ border-color:var(--mint); background:var(--mint-soft); }
  .edge-maintenance-state.updating strong{ color:var(--mint-strong); }
  .edge-drain-control{ display:flex; align-items:flex-start; cursor:pointer; }
  .edge-drain-control input{ width:auto; margin-top:3px; accent-color:var(--mint); }
  .edge-drain-control span{ display:grid; gap:2px; }
  .edge-drain-control:has(input:checked){ border-color:var(--mint); background:var(--mint-soft); }
  .edge-drain-control:has(input:disabled){ opacity:.65; cursor:not-allowed; }
  .edge-usage-hours span{ color:var(--ink-soft); }
  .edge-hour-chart{ direction:ltr; display:grid; grid-template-columns:repeat(24,1fr); align-items:end; gap:2px; height:58px; margin:5px 0 14px; padding-top:4px; border-bottom:1px solid var(--line); }
  .edge-hour-chart i{ position:relative; display:block; height:var(--hour-value); min-height:3px; border-radius:2px 2px 0 0; background:var(--ink-faint); opacity:.7; }
  .edge-hour-chart i.low{ background:var(--mint); box-shadow:0 0 8px var(--mint-soft); }
  .edge-hour-chart i.missing{ background:var(--line); opacity:.5; }
  .edge-hour-chart b{ position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%); color:var(--ink-faint); font-size:7px; }
  .edge-operation,.server-operation-strip{ border:1px solid var(--amber); border-radius:var(--radius-sm); background:var(--amber-soft); color:var(--amber); }
  .operation-spinner{ border-color:var(--amber-soft); border-top-color:var(--amber); }
  .empty-state{ display:grid; place-items:center; gap:7px; padding:48px 20px; text-align:center; color:var(--ink-soft); }
  .empty-state strong{ color:var(--ink); font-size:16px; }
  .muted{ color:var(--ink-soft); font-size:12px; }

  .button,.mini-button,.text-button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-sm); font-family:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
  .button{ border:1px solid transparent; background:var(--mint); color:#06231b; padding:11px 18px; }
  .button:hover{ background:var(--mint-strong); transform:none; }
  .button.secondary,.button.ghost{ background:var(--panel-alt); color:var(--ink); border-color:var(--line); }
  .button.danger{ background:var(--danger); color:#fff; }
  .mini-button{ border:1px solid var(--line); background:var(--panel-alt); color:var(--ink-soft); padding:7px 10px; font-size:11.5px; }
  .text-button{ border:0; background:none; color:var(--mint-strong); padding:6px; }
  .danger-text{ color:var(--danger)!important; background:var(--danger-soft)!important; border-color:transparent!important; }
  .icon-button{ display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:9px; background:var(--panel-alt); color:var(--ink-soft); font-size:21px; }

  .login-layout{ min-height:100vh; display:grid; place-items:center; padding:24px; }
  .login-card{ width:min(430px,100%); padding:34px; border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
  .login-card .brand-mark{ display:grid; place-items:center; width:48px; height:48px; margin-bottom:20px; border-radius:var(--radius-sm); background:var(--mint); color:#06231b; font-size:22px; font-weight:800; }
  .login-card h1{ margin:0 0 6px; font-size:28px; }
  .stack-form{ display:grid; gap:10px; margin-top:24px; }
  .stack-form button[type="submit"]{ border:1px solid transparent; border-radius:var(--radius-sm); background:var(--mint); color:#06231b; padding:11px 18px; font-weight:700; }
  .stack-form button[type="submit"]:hover{ background:var(--mint-strong); }
  .form-error{ min-height:20px; margin:0; color:var(--danger); font-size:12px; }

  .modal{ width:min(760px,calc(100% - 24px)); max-height:calc(100vh - 28px); padding:0; border:0; border-radius:var(--radius); background:var(--panel); color:var(--ink); box-shadow:var(--shadow); overflow:auto; }
  .modal::backdrop{ background:rgba(4,20,16,.55); }
  .wide-modal{ width:min(880px,calc(100% - 24px)); }
  .small-modal{ width:min(500px,calc(100% - 24px)); }
  .modal form{ padding:22px; }
  .modal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
  .modal-head h2{ margin:0; font-size:20px; }
  .modal-head p:not(.kicker){ margin:5px 0 0; color:var(--ink-soft); font-size:11.5px; }
  .form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
  .form-grid.one{ grid-template-columns:1fr; }
  .form-grid>div{ display:grid; gap:6px; }
  .form-grid .full{ grid-column:1/-1; }
  .form-grid small{ color:var(--ink-faint); font-size:10px; }
  label{ color:var(--ink-soft); font-size:12.5px; font-weight:700; }
  input,select,textarea{ width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--ink); padding:11px 13px; outline:none; }
  input:focus,select:focus,textarea:focus{ border-color:var(--mint); box-shadow:0 0 0 3px var(--mint-soft); }
  input:user-invalid{ border-color:var(--danger); }
  .input-action{ display:flex; }
  .input-action input{ border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
  .input-action button{ flex:0 0 auto; border:1px solid var(--line); border-left:0; border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--panel-alt); color:var(--mint-strong); font-weight:700; }
  .check-card{ display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-alt); padding:12px; }
  .check-card input,.assignment-item input{ width:auto; margin-top:3px; accent-color:var(--mint); }
  .check-card strong,.check-card small{ display:block; }
  .check-card small{ color:var(--ink-faint); font-weight:400; }
  .advanced{ margin-top:16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-alt); padding:0 14px; }
  .advanced summary{ cursor:pointer; padding:13px 0; color:var(--mint-strong); font-size:12px; font-weight:700; }
  .advanced .form-grid{ margin-top:4px; }
  .modal-actions{ display:flex; justify-content:flex-start; gap:8px; padding-top:18px; border-top:1px solid var(--line); }
  .error-summary{ margin-top:15px; border-right:4px solid var(--danger); border-radius:9px; background:var(--danger-soft); color:var(--danger); padding:11px 13px; font-size:12px; }
  .warning{ border-radius:9px; background:var(--amber-soft); color:var(--amber); padding:11px; font-size:11px; }

  .multi-select{ position:relative; }
  .multi-select-toggle{ width:100%; min-height:46px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--ink); padding:8px 12px; }
  .multi-select-chips{ display:flex; flex:1; flex-wrap:wrap; gap:5px; }
  .multi-select-chips em{ color:var(--ink-faint); font-style:normal; }
  .multi-select-menu{ position:absolute; z-index:20; top:calc(100% + 6px); right:0; left:0; max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); box-shadow:var(--shadow); padding:7px; }
  .multi-select-menu label,.assignment-item{ display:flex; align-items:center; gap:10px; border-radius:8px; padding:9px 10px; }
  .multi-select-menu label:hover{ background:var(--mint-soft); }
  .assignment-list{ display:grid; gap:8px; margin:18px 0; }
  .assignment-item{ border:1px solid var(--line); }
  .assignment-item span,.assignment-item small{ display:block; }
  .assignment-item small{ color:var(--ink-faint); }

  .badge.pending{ background:var(--amber-soft); color:var(--amber); }
  .badge.disabled{ background:var(--panel-alt); color:var(--ink-faint); }
  .switch .slider{ position:absolute; inset:0; height:auto; border-radius:999px; background:var(--line); transition:.2s; }
  .switch .slider:before{ content:""; position:absolute; right:3px; top:3px; width:17px; height:17px; border-radius:50%; background:var(--panel); box-shadow:0 2px 5px rgba(6,35,28,.25); transition:.2s; }
  .switch input:checked+.slider{ background:var(--mint); }
  .switch input:checked+.slider:before{ transform:translateX(-19px); }

  .edge-scope-bar,.edge-panel-access,.subscription-console,.release-file-options,.upload-progress,.danger-zone{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-alt); padding:14px; }
  .edge-scope-bar{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
  .edge-scope-bar>div:first-child{ display:flex; align-items:center; gap:11px; min-width:0; }
  .edge-scope-mark{ display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:var(--radius-sm); background:var(--mint-soft); color:var(--mint-strong); font-weight:800; }
  .edge-scope-bar small,.edge-scope-bar strong,.edge-scope-bar code,.edge-panel-access strong,.edge-panel-access small{ display:block; }
  .edge-scope-bar small,.edge-panel-access small{ color:var(--ink-faint); font-size:10px; }
  .edge-scope-bar code{ max-width:560px; overflow:hidden; text-overflow:ellipsis; color:var(--ink-soft); font-size:10px; white-space:nowrap; }
  .edge-scope-actions,.edge-panel-address{ display:flex; align-items:center; gap:7px; }
  .edge-panel-access{ display:grid; gap:10px; margin:14px 0; }
  .edge-panel-address input{ flex:1; }

  .subscription-console{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; }
  .subscription-console strong,.subscription-console small{ display:block; }
  .subscription-console small{ color:var(--ink-faint); font-size:10px; }
  .subscription-actions{ display:flex; flex-wrap:wrap; gap:6px; }
  .subscription-actions button{ border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--mint-strong); padding:7px 9px; font-weight:700; }
  .subscription-actions .reset{ color:var(--danger); }
  .installation-list{ display:grid; gap:7px; }
  .installation-list>div{ border-radius:8px; background:var(--panel-alt); padding:9px 11px; }
  .release-file-options{ display:grid; gap:12px; }
  .upload-progress{ display:grid; gap:8px; }
  .upload-progress>div{ display:flex; justify-content:space-between; }
  .upload-progress progress{ width:100%; accent-color:var(--mint); }

  .toast{ position:fixed; z-index:100; left:22px; bottom:22px; margin:0; border-radius:var(--radius-sm); background:var(--sidebar); color:#eafff6; padding:12px 16px; box-shadow:var(--shadow); font-size:12px; }
  .success-sheet{ position:fixed; z-index:90; left:22px; bottom:22px; display:grid; grid-template-columns:1fr auto; gap:3px 18px; width:min(430px,calc(100% - 44px)); border-right:5px solid var(--mint); border-radius:var(--radius); background:var(--panel); padding:16px 18px; box-shadow:var(--shadow); }
  .success-sheet span{ color:var(--ink-soft); font-size:11px; }
  .success-sheet .icon-button{ grid-column:2; grid-row:1/3; }

  .notifications-list{ display:block; }
  .notif-item h3,.notif-item p{ margin-top:0; }
  .notif-item .n-msg{ white-space:pre-wrap; line-height:1.9; }
  .presence{ display:inline-flex; align-items:center; gap:7px; font-weight:700; white-space:nowrap; }
  .presence i{ width:8px; height:8px; border-radius:50%; background:var(--ink-faint); }
  .presence.online i{ background:var(--mint); box-shadow:0 0 0 5px var(--mint-soft); }
  .cell-note,.expiry-cell small,.otp-cell small{ color:var(--ink-faint); font-size:9px; }
  .cell-note,.expiry-cell strong,.expiry-cell small{ display:block; }
  .otp-cell{ display:grid; gap:4px; }
  .otp-cell code{ color:var(--mint-strong); font-size:14px; font-weight:800; }
  .stage-cell{ display:grid; gap:3px; min-width:112px; }
  .stage-cell strong{ color:var(--ink); font-size:10px; }
  .stage-cell small{ color:var(--ink-faint); font-size:8.5px; }
  .stage-cell.stage-otp_requested strong{ color:#9a6b13; }
  .stage-cell.stage-otp_expired strong{ color:#b64d5c; }
  .stage-cell.stage-ready strong{ color:var(--mint-strong); }
  .usage-breakdown{ display:grid; gap:8px; }
  .usage-breakdown>div{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-alt); }
  .usage-breakdown span{ display:grid; gap:3px; }
  .usage-breakdown strong{ color:var(--ink); font-size:11px; }
  .usage-breakdown small{ color:var(--ink-faint); font-size:9px; }
  .usage-breakdown b{ color:var(--mint-strong); font-size:11px; white-space:nowrap; }
  .expired-text{ color:var(--danger); }

  :focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
  @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }
  @media (max-width:780px){
    .form-grid{ grid-template-columns:1fr; }
    .form-grid .full{ grid-column:auto; }
    .modal form{ padding:18px; }
    .modal-actions,.subscription-console,.edge-scope-bar{ align-items:stretch; flex-direction:column; }
    .edge-scope-actions,.edge-panel-address{ flex-wrap:wrap; }
    .edge-panel-address input{ flex-basis:100%; }
  }