/* RK-Net Portal — light theme on a white-to-deep-blue gradient. The page reads white at
   the top and darkens to navy at the foot of the viewport; white dominates. Content sits
   on white cards that float over the gradient. */
:root {
  --ink:#12243f; --dim:#4b5c74; --faint:#74849c;
  --line:#d7e0ef; --line2:#c3d0e6;
  --panel:#ffffff; --card:#ffffff; --sunk:#f3f7ff;
  --accent:#1668e3; --accent-d:#0f52bd; --accent-soft:#e8f0fe;
  --green:#1a7f37; --yellow:#9a6a00; --red:#cf3b34;
  --idle:rgba(18,36,63,0.16);
  --console:#0e1f3d; --console-head:#16294b; --console-fg:#dbe6f7;
  --shadow:0 4px 14px rgba(18,40,80,0.10); --shadow-lg:0 10px 30px rgba(18,40,80,0.16);
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
html { background:#eef4ff; }
body {
  color:var(--ink);
  background:
    linear-gradient(180deg,
      #ffffff 0%, #ffffff 33%, #eef4ff 50%, #d5e4fb 66%, #9fbbe9 83%, #143a72 100%) fixed;
  background-color:#eef4ff;
  font:14px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden { display:none !important; }

/* Scrollbars, styled so the expanded feature set and a longer fleet scroll on-theme
   rather than with the default grey bar. */
* { scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:var(--accent); border-radius:9px;
  border:3px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover { background:var(--accent-d); }

.bar {
  display:flex; align-items:center; gap:14px;
  padding:11px 20px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,0.82); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:5; box-shadow:0 1px 0 rgba(18,40,80,0.04);
}
.brand { font-weight:700; letter-spacing:-0.2px; color:var(--accent-d); font-size:15px; }
.bar-status { color:var(--dim); font-size:12px; }
.bar-actions { margin-left:auto; display:flex; gap:8px; }

button {
  font:inherit; border-radius:8px; padding:7px 13px; cursor:pointer;
  border:1px solid var(--line2); background:#fff; color:var(--ink);
  box-shadow:0 1px 2px rgba(18,40,80,0.05); transition:border-color .12s, background .12s, transform .06s, box-shadow .12s;
}
button:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(22,104,227,0.14); }
button:active { transform:translateY(1px); }
button.primary { background:linear-gradient(180deg,#2a79ef,var(--accent)); border-color:var(--accent-d); color:#fff; }
button.primary:hover { background:linear-gradient(180deg,#3a86f4,var(--accent-d)); }
button.danger  { background:#fff; border-color:#e7b4b0; color:#b5322b; }
button.danger:hover { border-color:var(--red); background:#fdf3f2; }
button.warnbtn { background:#fff8ec; border-color:#e8c98a; color:#8a5d00; }
button.warnbtn:hover { border-color:var(--yellow); background:#fdf1d8; }
button.ghost   { background:transparent; box-shadow:none; }
button.ghost:hover { background:#fff; }
button.big     { padding:11px 20px; font-weight:600; width:100%; margin-top:14px; }
button.small   { padding:3px 9px; font-size:12px; }

.pane { padding:24px 22px; max-width:1180px; margin:0 auto; }
.panel {
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:24px; max-width:520px; margin:7vh auto; box-shadow:var(--shadow-lg);
}
.panel.wide { max-width:720px; margin:4vh auto; }
h1 { font-size:20px; margin:0 0 6px; letter-spacing:-0.2px; }
h2 { font-size:12px; text-transform:uppercase; letter-spacing:0.7px; color:var(--accent-d);
     margin:22px 0 8px; border-bottom:1px solid var(--line); padding-bottom:5px; }
/* grouping heading inside a tab body */
.grp { font-size:11px; text-transform:uppercase; letter-spacing:0.7px; color:var(--faint);
       margin:16px 0 2px; font-weight:600; }
.sub  { color:var(--dim); margin:0 0 14px; }
.hint { color:var(--faint); font-size:12px; }
.warn { color:#7a5300; font-size:12px; background:#fff7e6;
        border-left:3px solid var(--yellow); padding:8px 11px; border-radius:0 7px 7px 0; }
.err  { color:var(--red); }

label { display:inline-flex; align-items:center; gap:6px; color:var(--dim); font-size:12px; }
label.grow { flex:1; }
input, textarea {
  font:inherit; color:var(--ink); background:#fff;
  border:1px solid var(--line2); border-radius:7px; padding:7px 10px;
}
input:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input { min-width:120px; }
label.grow input { width:100%; }
#pw, #pwNew { width:100%; margin:6px 0 4px; }
textarea { width:100%; min-height:88px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; }
#clipText { min-height:120px; }

.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.row.end { justify-content:flex-end; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:5px 14px; font-size:13px; margin:10px 0; }
.kv b { color:var(--dim); font-weight:500; }
.kv span { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink); }

/* ---- Cards ---------------------------------------------------------------
   A coloured status ring around a white card. The ring is split down the middle:
   left half reports online, right half reports whether a RustDesk listener answered. */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); gap:18px; }
.frame {
  padding:3px; border-radius:16px; cursor:pointer; display:flex;
  background:linear-gradient(to right, var(--half-a) 0 50%, var(--half-b) 50% 100%);
  --half-a:var(--idle); --half-b:var(--idle);
  box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease;
}
.frame:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.gap  { padding:0; border-radius:13px; background:transparent; flex:1; display:flex; }
.card { border-radius:13px; background:var(--card); padding:15px 16px; flex:1; }
.card h3 { margin:0 0 2px; font-size:15px; color:var(--ink); }
.card .ip { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--dim); }
.card .meta { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

.legend { display:flex; gap:16px; flex-wrap:wrap; color:var(--dim); font-size:12px; margin-bottom:16px; }
.swatch { display:inline-block; width:22px; height:9px; border-radius:3px; vertical-align:middle; margin-right:5px; background:var(--idle); }
.swatch.g { background:var(--green); } .swatch.y { background:var(--yellow); } .swatch.r { background:var(--red); }
.swatch.split { background:linear-gradient(to right, var(--green) 0 50%, var(--red) 50% 100%); }

.chip { font-size:11px; padding:2px 9px; border-radius:999px; background:#eef2f8; color:var(--dim); }
.chip.g { background:#e2f4e7; color:#186c30; }
.chip.y { background:#fcf1d8; color:#8a5d00; }
.chip.r { background:#fde7e5; color:#b5322b; }
.chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }

.detail-head h1 { margin:10px 0 0; font-size:26px; }
.tabs { display:flex; gap:2px; margin:18px 0 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tab { border:0; background:transparent; color:var(--dim); border-radius:0; box-shadow:none;
       border-bottom:2px solid transparent; padding:8px 14px; }
.tab:hover { color:var(--ink); background:transparent; border-color:transparent; border-bottom-color:var(--line2); }
.tab.active { color:var(--accent-d); border-bottom-color:var(--accent); font-weight:600; }
.tabbody { padding:16px 0; }
.addr { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px;
        background:var(--sunk); border:1px solid var(--line2); border-radius:7px; padding:7px 12px; color:var(--ink); }

.console { border:1px solid var(--line2); border-radius:11px; overflow:hidden; margin-top:14px; box-shadow:var(--shadow); }
.console-head { display:flex; align-items:center; gap:8px; padding:7px 11px;
                background:var(--console-head); border-bottom:1px solid rgba(255,255,255,0.06); font-size:12px; color:#aebfdb; }
.console-head .spacer { flex:1; }
.console-head button { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.14); color:#cdd9ee; box-shadow:none; }
.console-head button:hover { background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.28); }
#out {
  margin:0; padding:13px; height:300px; overflow:auto; background:var(--console); color:var(--console-fg);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px;
  white-space:pre-wrap; word-break:break-word; user-select:text;
}
#out .e { color:#ff9d96; }
#out .m { color:#8aa0c8; }
#out { scrollbar-color:#4f79c7 transparent; }
#out::-webkit-scrollbar-thumb { background:#4f79c7; }

.modal { position:fixed; inset:0; background:rgba(12,26,52,0.42); backdrop-filter:blur(2px); overflow:auto; z-index:20; }

#auditOut { max-height:240px; overflow:auto; background:var(--console); color:var(--console-fg); border:1px solid var(--line2);
            border-radius:9px; padding:11px; font-family:ui-monospace,Menlo,Consolas,monospace;
            font-size:11.5px; white-space:pre; }
#twofaURI, #twofaSecret { word-break:break-all; }
#code, #twofaCode { letter-spacing:2px; }

.qrrow { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin:10px 0; }
.qr { background:#fff; padding:8px; border-radius:8px; line-height:0; border:1px solid var(--line); }
.qr svg { width:200px; height:200px; display:block; }

/* ---- in-browser screen viewer (stays dark; it frames a remote screen) ---- */
.viewer { position:fixed; inset:0; z-index:60; background:#0b0d10; display:flex; flex-direction:column; }
.viewer.hidden { display:none; }
.viewer-bar { display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:#14181d; border-bottom:1px solid #232a32; font-size:13px; color:#c8d2dc; }
.viewer-bar button { background:#20262e; border-color:#333c47; color:#dbe4ee; box-shadow:none; }
.viewer-bar button:hover { border-color:#4a5666; }
.viewer-bar button.danger { background:#3a1d1f; border-color:#5c2b2e; color:#ffb4ae; }
.viewer-bar .spacer { flex:1; }
.viewer-screen { flex:1; overflow:hidden; background:#0b0d10; }
.chk { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim); margin:8px 0; }
.chk input { margin:0; min-width:0; }

/* ---- narrow screens ---- */
@media (max-width: 760px) {
  .bar { flex-wrap:wrap; gap:8px 10px; padding:9px 13px; }
  .bar-status { flex:1 1 100%; order:3; font-size:11px; }
  .bar-actions { margin-left:auto; }
  .pane { padding:16px 14px; }
  .panel { padding:18px; margin:4vh auto; }
  .cards { grid-template-columns:1fr; gap:12px; }
  .kv { grid-template-columns:1fr; gap:2px 0; }
  .kv b { margin-top:8px; }
  .tabs { overflow-x:auto; flex-wrap:nowrap; }
  .tab { white-space:nowrap; }
  .detail-head h1 { font-size:21px; }
  .viewer-bar { flex-wrap:wrap; }
}

/* A disabled action should look unavailable, not broken. */
button:disabled, button.muted:disabled { opacity:0.45; cursor:not-allowed; box-shadow:none; }
button:disabled:hover { border-color:var(--line2); background:#fff; }