:root {
  --text:#1d1d1f; --muted:#6e6e73; --accent:#0a84ff; --accent2:#5e5ce6; --danger:#ff3b30; --ok:#30b350; --warn:#ff9f0a;
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.78); --edge:rgba(255,255,255,.7); --line:rgba(60,60,67,.12);
  --shadow:0 8px 32px rgba(31,38,135,.12); --field:rgba(255,255,255,.7);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bg:radial-gradient(900px 600px at 10% 0%,#b9d4ff 0,transparent 60%),radial-gradient(800px 600px at 100% 20%,#e7c8ff 0,transparent 55%),radial-gradient(900px 700px at 40% 100%,#ffd9c2 0,transparent 55%),#eef1f8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text:#f5f5f7; --muted:#9a9aa2; --accent:#64a8ff; --accent2:#7d7aff;
    --glass:rgba(40,40,48,.5); --glass-strong:rgba(58,58,68,.7); --edge:rgba(255,255,255,.1); --line:rgba(255,255,255,.1);
    --shadow:0 8px 32px rgba(0,0,0,.4); --field:rgba(30,30,38,.6);
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239a9aa2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bg:radial-gradient(900px 600px at 10% 0%,#1d3a78 0,transparent 60%),radial-gradient(800px 600px at 100% 20%,#4a2275 0,transparent 55%),radial-gradient(900px 700px at 40% 100%,#6b3320 0,transparent 55%),#0d0e14;
    color-scheme: dark;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; background:var(--bg) fixed; background-color:#eef1f8; color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
@media (prefers-color-scheme: dark) { body { background-color:#0d0e14; } }
[hidden] { display:none !important; }
.glass { background:var(--glass); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--edge); border-radius:20px; box-shadow:var(--shadow); }
.logo { width:44px; height:44px; flex:none; border-radius:12px; background:url(/favicon.svg) center/cover; box-shadow:0 4px 14px rgba(94,92,230,.4); }

/* ---------- header / nav ---------- */
header { max-width:960px; margin:28px auto 0; padding:0 16px; display:flex; align-items:center; gap:14px; }
h1 { margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em; }
.slogan { color:var(--muted); display:block; font-size:14px; margin-top:-2px; }
.me { margin-left:auto; display:flex; align-items:center; gap:8px; }
.chip { padding:6px 12px; border-radius:999px; background:var(--glass); border:1px solid var(--edge); font-size:13px; color:var(--muted); white-space:nowrap; }
.icon-btn { width:40px; height:40px; padding:0; display:grid; place-items:center; border-radius:12px; }
.icon-btn svg { width:20px; height:20px; }
.icon-btn.on { color:var(--accent); }
nav { max-width:960px; margin:18px auto 0; padding:0 16px; }
.seg { display:inline-flex; padding:4px; gap:2px; border-radius:14px; background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); max-width:100%; overflow-x:auto; }
.seg a { padding:8px 16px; border-radius:10px; color:var(--text); text-decoration:none; font-weight:500; font-size:14px; white-space:nowrap; transition:background .2s; }
.seg a.active { background:var(--glass-strong); box-shadow:0 2px 8px rgba(0,0,0,.1); }
main { max-width:960px; margin:16px auto 48px; padding:0 16px; display:grid; gap:16px; }

/* ---------- source pills ---------- */
.pills { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
.pills::-webkit-scrollbar { display:none; }
.pill { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--edge);
  color:var(--text); text-decoration:none; white-space:nowrap; font-weight:500; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.pill.active { background:linear-gradient(180deg,#3d9bff,#0a84ff); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(10,132,255,.35); }
.pill small { opacity:.75; font-variant-numeric:tabular-nums; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; box-shadow:0 0 0 3px rgba(48,179,80,.18); }
.dot.err { background:var(--danger); box-shadow:0 0 0 3px rgba(255,59,48,.18); }
.dot.off { background:var(--muted); box-shadow:none; }

/* ---------- cards / tables ---------- */
.card-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.card-head h2, .card-head h3 { margin:0; font-size:17px; letter-spacing:-.01em; }
.card-head h2 { font-size:20px; }
.card-head .sub { color:var(--muted); font-size:13px; }
.card-head .right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.table-wrap { overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th,td { padding:12px 20px; text-align:left; border-bottom:1px solid var(--line); }
th { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
tr:last-child td { border-bottom:0; }
tr.inactive td.name, tr.inactive td.count { opacity:.45; }
td.name small { color:var(--muted); margin-left:6px; font-size:12px; }
.count { font-variant-numeric:tabular-nums; min-width:110px; }
.bar { height:4px; border-radius:2px; background:var(--line); margin-top:6px; overflow:hidden; }
.bar i { display:block; height:100%; background:linear-gradient(90deg,#5ac8fa,#5e5ce6); border-radius:2px; transition:width .3s; }
.count.full { color:var(--danger); font-weight:600; }
.count.full .bar i { background:var(--danger); }
.empty { padding:32px 20px; text-align:center; color:var(--muted); }

input[type=text], input[type=password], input[type=number], input[type=url], select {
  padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--field); color:var(--text); font:inherit; outline:none; min-width:0; }
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,132,255,.22); }
input[type=number] { width:84px; }
select { max-width:100%; -webkit-appearance:none; appearance:none; padding-right:38px; cursor:pointer;
  background-image:var(--chevron); background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px; }
label.check { display:flex; align-items:center; gap:10px; cursor:pointer; }
input[type=checkbox].box { width:18px; height:18px; accent-color:var(--accent); flex:none; margin:0; }

.switch { position:relative; width:46px; height:28px; display:inline-block; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.switch i { position:absolute; inset:0; background:rgba(120,120,128,.3); border-radius:14px; cursor:pointer; transition:.2s; }
.switch i::after { content:""; position:absolute; width:24px; height:24px; left:2px; top:2px; background:#fff; border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,.25); transition:.2s; }
.switch input:checked + i { background:var(--ok); }
.switch input:checked + i::after { transform:translateX(18px); }
.switch input:focus-visible + i { box-shadow:0 0 0 3px rgba(10,132,255,.35); }

.opts { padding:4px 20px; }
.opt { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.opt:last-child { border-bottom:0; }
.opt small { display:block; color:var(--muted); font-size:13px; }

.buttons { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
button { padding:10px 16px; border-radius:12px; border:1px solid var(--edge); background:var(--glass-strong); color:var(--text); font:inherit; font-weight:500; cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:transform .1s, box-shadow .2s, opacity .2s; }
button:hover { box-shadow:0 4px 14px rgba(0,0,0,.12); }
button:active { transform:scale(.97); }
button.primary { background:linear-gradient(180deg,#3d9bff,#0a84ff); color:#fff; border-color:transparent; }
button.danger { color:var(--danger); }
button.small { padding:6px 12px; font-size:13px; border-radius:10px; }
button.link { background:none; border:0; padding:4px 6px; color:var(--accent); backdrop-filter:none; box-shadow:none; }
button:disabled { opacity:.5; pointer-events:none; }
.buttons .spacer { flex:1; }

.status { padding:14px 20px; display:grid; gap:6px; font-size:14px; color:var(--muted); }
.status b { color:var(--text); font-weight:600; }
.err-text { color:var(--danger); }
.warn-text { color:var(--warn); }
.ok-text { color:var(--ok); }
.unsaved { color:var(--warn); font-size:13px; font-weight:500; }

/* ---------- forms ---------- */
.form { padding:18px 20px; display:grid; gap:14px; }
.row { display:grid; grid-template-columns:1fr 220px; gap:12px; }
.field { display:grid; gap:6px; }
.field > span { font-size:13px; color:var(--muted); font-weight:500; }
.hint { font-size:13px; color:var(--muted); }
.tabs-list { display:flex; flex-wrap:wrap; gap:8px; }
.tab-chip { display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:10px; border:1px solid var(--line); background:var(--field); font-size:13px; cursor:pointer; }
.tab-chip.off { opacity:.5; text-decoration:line-through; }
.tab-chip b { font-variant-numeric:tabular-nums; }
.tab-chip .e { color:var(--danger); }
.access { display:grid; gap:10px; }
.access .group { border:1px solid var(--line); border-radius:14px; padding:10px 14px; background:var(--field); }
.access .group > label { font-weight:600; }
.access .members { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:6px 14px; margin:10px 0 2px 28px; font-size:14px; }
.pw { display:flex; gap:8px; }
.pw input { flex:1; }

/* ---------- toast / modal ---------- */
.toasts { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); display:grid; gap:8px; z-index:50; width:min(92vw,440px); }
.toast { padding:12px 16px; border-radius:14px; background:var(--glass-strong); border:1px solid var(--edge); box-shadow:var(--shadow);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); font-size:14px; animation:pop .25s ease; }
.toast.err { color:var(--danger); }
@keyframes pop { from { opacity:0; transform:translateY(8px) scale(.98); } }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.25); display:grid; place-items:center; z-index:60; padding:16px; animation:fade .2s; }
@keyframes fade { from { opacity:0; } }
.modal { width:min(100%,400px); padding:22px; display:grid; gap:14px; background:var(--glass-strong); }
.modal h3 { margin:0; font-size:18px; }
.modal p { margin:0; color:var(--muted); white-space:pre-line; }
.modal .buttons { justify-content:flex-end; }

/* ---------- login ---------- */
.login-body { display:grid; place-items:center; padding:16px; }
.login { width:100%; max-width:380px; padding:36px 28px 28px; text-align:center; display:grid; gap:14px; border-radius:28px; }
.login .logo { width:72px; height:72px; margin:0 auto 4px; border-radius:20px; }
.login h1 { font-size:30px; }
.login p { margin:0 0 6px; color:var(--muted); }
.login input { width:100%; padding:13px 14px; border-radius:12px; }
.login button { padding:13px; border:0; font-weight:600; }
.login .err-text { min-height:20px; font-size:14px; }
.login footer { color:var(--muted); font-size:12px; margin-top:4px; }

@media (max-width:640px) {
  header { margin-top:18px; }
  h1 { font-size:22px; }
  .slogan { font-size:12px; }
  .me .chip { display:none; }
  th,td { padding:10px 6px; }
  th:first-child, td:first-child { padding-left:14px; }
  th:last-child, td:last-child { padding-right:14px; }
  th { font-size:10px; letter-spacing:.02em; }
  .seg a { padding:7px 11px; font-size:13px; }
  .card-head { padding:14px; }
  .card-head .right { margin-left:0; }
  input[type=number] { width:64px; }
  .count { min-width:56px; font-size:14px; }
  .row { grid-template-columns:1fr; }
  .opt { flex-wrap:wrap; }
  .opt select { width:100%; }
  .buttons button { flex:1 1 auto; }
}