/* ===== Master Data Vault: dark premium theme ===== */
:root{
  --bg:#09090b; --s1:#131316; --s2:#18181c; --s3:#1f1f24; --in:#0e0e11;
  --line:rgba(255,255,255,.06); --line2:rgba(255,255,255,.1);
  --ink:#f2f2f4; --ink2:#c9c9d1; --muted:#8b8b96; --mute2:#5f5f6a;
  --orange:#ff6a1f; --orange2:#e2481b; --blue:#3b63ff; --purple:#8a3ffc; --red:#ff4d4f; --green:#22c55e; --amber:#f5a524;
  --r:18px; --r2:12px;
  --glass:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{font:14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;top:-260px;right:-120px;width:900px;height:620px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(196,132,92,.30),rgba(120,72,48,.14) 45%,transparent 75%);filter:blur(30px)}
body::after{content:"";position:fixed;bottom:-300px;left:20%;width:700px;height:500px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(80,70,140,.10),transparent 70%);filter:blur(40px)}
a{color:#fff;text-decoration:none}
a:hover{color:#fff}
h1,h2,h3,h4{margin:0 0 12px;letter-spacing:-.015em;color:var(--ink);font-weight:600}
h1{font-size:22px} h2{font-size:19px} h3{font-size:16px} h4{font-size:13.5px;margin-top:22px;color:var(--ink2)}
.muted{color:var(--muted)} .small{font-size:12px} .nowrap{white-space:nowrap}
code{background:var(--s3);padding:1px 6px;border-radius:6px;font-size:12px;color:var(--ink2)}
.i{flex:none;display:block}
::selection{background:rgba(255,106,31,.35)}
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:#2a2a30;border-radius:10px;border:2px solid var(--bg)} ::-webkit-scrollbar-track{background:transparent}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:68px 1fr;min-height:100vh;position:relative;z-index:1}
.rail{position:sticky;top:0;height:100vh;padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:6px;border-right:1px solid var(--line);background:rgba(10,10,12,.7);backdrop-filter:blur(12px);z-index:20}
.logo{width:38px;height:38px;background:url(logo.svg?v=2) center/86% no-repeat;display:grid;place-items:center;margin-bottom:10px} /* white logo on transparent */
.logo span{display:none} /* old drawn ring — the logo image (same as the favicon) is used instead */
.rgroup{display:flex;flex-direction:column;align-items:center;gap:6px}
.rgroup.sites{max-height:42vh;overflow-y:auto;scrollbar-width:none;padding:2px 0}
.rgroup.sites::-webkit-scrollbar{display:none}
.rsep{width:22px;height:1px;background:var(--line2);margin:6px 0}
.rl,.rs{position:relative;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--muted);transition:.15s;border:1px solid transparent}
.rl:hover,.rs:hover{background:var(--s2);color:#fff;border-color:var(--line)}
.rl.on,.rs.on{background:var(--s3);color:#fff;border-color:var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.rs .dot{position:absolute;right:3px;bottom:3px;width:7px;height:7px;border:1.5px solid var(--bg);box-shadow:none}
.rs.paused{opacity:.45}
.rl.add{border:1px dashed var(--line2)}
.rl.bottom{margin-top:auto}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;background:#fff;color:#0b0b0d;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;pointer-events:none;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.mainwrap{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px clamp(12px,2.2vw,36px);position:sticky;top:0;z-index:15;background:linear-gradient(180deg,rgba(9,9,11,.92),rgba(9,9,11,.6));backdrop-filter:blur(14px)}
.tb-l,.tb-r{display:flex;align-items:center;gap:10px;min-width:0}
.nb{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--s1);color:var(--ink2);display:grid;place-items:center;cursor:pointer}
.nb:hover{color:#fff;border-color:var(--line2)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-left:6px;white-space:nowrap;overflow:hidden}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:#fff} .crumbs b{color:#fff;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.crumbs .i{color:var(--mute2)}
.gsearch{display:flex;align-items:center;gap:8px;background:var(--s1);border:1px solid var(--line);border-radius:11px;padding:0 12px;height:36px;width:260px;color:var(--muted)}
.gsearch:focus-within{border-color:rgba(255,106,31,.5);box-shadow:0 0 0 3px rgba(255,106,31,.12)}
.gsearch input{border:0;background:transparent;margin:0;padding:0;height:100%;color:#fff;box-shadow:none!important;font-size:13px}
.bell{position:relative;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--ink2)}
.bell:hover{background:var(--s1);color:#fff}
.bell em{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--orange);color:#fff;font:700 10px/16px Inter,sans-serif;font-style:normal;text-align:center}
.me{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;background:linear-gradient(135deg,#c08457,#6b3f26);border:2px solid rgba(255,255,255,.12)}
.content{width:100%;max-width:none;margin:0;padding:8px clamp(12px,2.2vw,36px) 60px}
main.auth{max-width:420px;margin:0 auto;padding:12vh 16px;position:relative;z-index:1}

/* ---------- Page head ---------- */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 0 20px}
.pagehead h1{margin:0;font-size:24px}
.pagehead p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.pill-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0b0b0d!important;border:0;border-radius:11px;padding:9px 16px;font:600 13px Inter,sans-serif;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.pill-btn:hover{background:#ececef}

/* ---------- Cards ---------- */
.card{background:var(--s1);background-image:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 40px -20px rgba(0,0,0,.6);position:relative}
.card.narrow{max-width:420px;margin:0 auto}
.card.flush{padding:0;overflow:hidden}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-h h3{margin:0}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ctitle{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.cico{width:32px;height:32px;border-radius:10px;background:var(--s3);border:1px solid var(--line);display:grid;place-items:center;color:#fff}

/* KPI cards (reference style) */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.kpi-h{display:flex;align-items:center;gap:9px;padding:2px 4px 10px;font-weight:500;font-size:13px;color:var(--ink2)}
.kico{width:22px;height:22px;border-radius:7px;background:#fff;color:#0b0b0d;display:grid;place-items:center}
.kpi-h .more{margin-left:auto;color:var(--muted);display:grid}
.kpi-b{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;background:var(--in);border:1px solid var(--line);border-radius:13px;padding:16px 14px 12px}
.kpi .val{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap;margin-bottom:6px}
.kpi .val span{color:var(--mute2);font-size:15px;font-weight:500;margin-left:4px}
.spark{flex:none}
.kpi-f{display:flex;justify-content:space-between;align-items:center;padding:10px 4px 2px;font-size:11.5px;color:var(--muted)}
.delta{font-weight:600;font-size:11.5px} .delta.up{color:var(--green)} .delta.dn{color:var(--red)}

/* Dashboard layout */
.dash{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px;align-items:start}
.insight{padding:16px;overflow:hidden}
.insight .ih{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.insight .tag{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:5px 10px;background:var(--s2)}
.glow{position:relative;border-radius:15px;padding:20px;min-height:250px;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.16),transparent 55%),linear-gradient(160deg,#3a3a3f 0%,#1c1c20 45%,#111114 100%);border:1px solid var(--line2)}
.glow::after{content:"";position:absolute;right:-60px;top:-40px;width:220px;height:220px;border-radius:50%;border:26px solid rgba(255,255,255,.05)}
.glow::before{content:"";position:absolute;inset:auto 0 0 0;height:60%;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:6px 6px;mask:linear-gradient(transparent,#000)}
.glow h2{font-size:24px;font-weight:600;margin:0 0 8px;position:relative;z-index:1}
.glow p{color:var(--ink2);font-size:13px;margin:0;max-width:300px;position:relative;z-index:1}
.glow .go{margin-top:auto;position:relative;z-index:1}
.cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#ff7a2e,#e5501c);color:#fff!important;border:0;border-radius:10px;padding:10px 18px;font:600 13px Inter,sans-serif;cursor:pointer;box-shadow:0 10px 24px -8px rgba(255,106,31,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.cta:hover{filter:brightness(1.08)}
.save{background:var(--s2);border:1px solid var(--line);border-radius:15px;padding:18px;font-size:15px;color:var(--ink2);line-height:1.5}
.save b{color:#fff;font-weight:700}
.save a{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--orange)}

/* Segmented pill tabs */
.seg,.tabs{display:inline-flex;gap:2px;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:4px;overflow-x:auto;max-width:100%}
.seg a,.seg button,.tabs a{border:0;background:transparent;color:var(--muted);font:500 12.5px Inter,sans-serif;padding:7px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.seg a:hover,.seg button:hover,.tabs a:hover{color:#fff}
.seg .on,.tabs a.on{background:#fff;color:#0b0b0d;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.tabs{margin:18px 0}
.tabs .cnt{background:rgba(255,255,255,.08);color:inherit;border-radius:999px;padding:0 7px;font-size:11px}
.tabs a.on .cnt{background:rgba(0,0,0,.08)}

/* Row-card tables (reference) */
.rows{width:100%;border-collapse:separate;border-spacing:0 6px}
.rows td{background:var(--s2);padding:12px 14px;border:0;border-top:1px solid var(--line);border-bottom:1px solid rgba(0,0,0,.3);vertical-align:middle;white-space:nowrap}
.rows td:first-child{border-radius:11px 0 0 11px;border-left:1px solid var(--line)}
.rows td:last-child{border-radius:0 11px 11px 0;border-right:1px solid var(--line)}
.rows tr.link{cursor:pointer}
.rows tr.link:hover td{background:var(--s3)}
.rows th{background:transparent;border:0;color:var(--mute2);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;padding:4px 14px}
.nm{display:flex;align-items:center;gap:12px;font-weight:500}
.nm small{display:block;color:var(--muted);font-weight:400;font-size:11.5px;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--in);border:1px solid var(--line);border-radius:9px;padding:5px 10px;font-size:12px;color:var(--ink2)}
.chip .i{color:var(--muted)}
.amt{font-weight:600;font-variant-numeric:tabular-nums}
.amt.neg{color:var(--red)} .amt.pos{color:var(--green)}
.st{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.tick{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font:700 10px Inter,sans-serif;font-style:normal;color:#0b0b0d}
.tick.ok{background:var(--green)} .tick.warn{background:var(--amber)} .tick.err{background:var(--red);color:#fff} .tick.muted{background:#3a3a42;color:#fff}
.tablecard{padding:16px 18px 10px;border-radius:22px}
.tablecard::before{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;background:radial-gradient(60% 40% at 90% 0%,rgba(255,255,255,.07),transparent 70%)}
.tablecard .tbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;position:relative}

/* ---------- Avatar / dots / badges ---------- */
.avatar{--c:#6366f1;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 45%,#000));color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.avatar.xs{width:28px;height:28px;border-radius:9px;font-size:10.5px}
.avatar.sm{width:32px;height:32px;border-radius:9px;font-size:11px}
.avatar.lg{width:60px;height:60px;border-radius:17px;font-size:21px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:#52525b}
.dot.ok{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.16)} .dot.warn{background:var(--amber)} .dot.err{background:var(--red);box-shadow:0 0 0 3px rgba(255,77,79,.18)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.badge.ok{background:rgba(34,197,94,.12);color:#4ade80;border-color:rgba(34,197,94,.2)}
.badge.warn{background:rgba(245,165,36,.12);color:#fbbf24;border-color:rgba(245,165,36,.2)}
.badge.err{background:rgba(255,77,79,.12);color:#ff7a7b;border-color:rgba(255,77,79,.22)}
.badge.muted{background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--line)}
.badge.new{background:rgba(59,99,255,.14);color:#8ea6ff;border-color:rgba(59,99,255,.25)}
.badge.upd{background:rgba(138,63,252,.14);color:#c4a1ff;border-color:rgba(138,63,252,.25)}

/* ---------- Site hero ---------- */
.hero{--c:#6366f1;border-radius:22px;padding:22px 24px;color:#fff;position:relative;overflow:hidden;border:1px solid var(--line2);
  background:radial-gradient(70% 140% at 0% 0%,color-mix(in srgb,var(--c) 45%,transparent),transparent 60%),radial-gradient(50% 120% at 100% 0%,rgba(255,255,255,.08),transparent 60%),var(--s1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hero::after{content:"";position:absolute;right:40px;top:-80px;width:260px;height:260px;border-radius:50%;border:30px solid rgba(255,255,255,.035)}
.hero-in{display:flex;gap:18px;align-items:center;flex-wrap:wrap;position:relative;z-index:1}
.hero h1{color:#fff;margin:0;font-size:24px}
.hero .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-top:6px;align-items:center}
.hero .meta a{color:#fff}
.hero .meta span{display:inline-flex;align-items:center;gap:6px}
.hero .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn.glass{background:rgba(255,255,255,.06);border:1px solid var(--line2);color:#fff;box-shadow:none}
.btn.glass:hover{background:rgba(255,255,255,.12)}

/* ---------- Data explorer ---------- */
.explorer{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start}
.tlist{position:sticky;top:76px;max-height:calc(100vh - 96px);display:flex;flex-direction:column}
.tlist input{margin:0 0 8px}
.tlist .items{overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.tlist a{display:flex;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:10px;color:var(--ink2);font-weight:500;font-size:13px}
.tlist a:hover{background:var(--s2);color:#fff}
.tlist a.on{background:#fff;color:#0b0b0d}
.tlist a.on small{color:#555}
.tlist a span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlist a small{color:var(--muted);font-variant-numeric:tabular-nums}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.toolbar input[type=search]{flex:1;min-width:200px;margin:0}
.toolbar select{width:auto;margin:0}
.dl{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.gridwrap{overflow:auto;max-height:68vh;padding:0 10px}
table.grid{border-collapse:separate;border-spacing:0 5px;width:max-content;min-width:100%}
table.grid th{position:sticky;top:0;z-index:2;background:var(--s1);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute2);font-weight:600;border:0;padding:12px 12px 6px;text-align:left;white-space:nowrap}
table.grid td{background:var(--s2);padding:10px 12px;border:0;border-top:1px solid var(--line);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink2)}
table.grid td:first-child{border-radius:10px 0 0 10px} table.grid td:last-child{border-radius:0 10px 10px 0}
table.grid tr.rowlink{cursor:pointer}
table.grid tr.rowlink:hover td{background:var(--s3);color:#fff}
table.grid tr.deleted td{background:rgba(255,77,79,.07);color:#ffb3b3}
table.grid td.rn,table.grid th.rn{position:sticky;left:0;z-index:1;color:var(--mute2);font-size:11px;width:44px}
table.grid th.rn{z-index:3;background:var(--s1)}
td.null{color:var(--mute2)!important;font-style:italic}
.gridfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;color:var(--muted);font-size:12.5px;flex-wrap:wrap;border-top:1px solid var(--line)}
.pager{display:flex;gap:5px;align-items:center}
.pager a,.pager span.cur{min-width:32px;text-align:center;padding:5px 10px;border:1px solid var(--line);border-radius:9px;color:var(--ink2);background:var(--s2)}
.pager a:hover{border-color:var(--line2);color:#fff}
.pager span.cur{background:#fff;border-color:#fff;color:#0b0b0d;font-weight:600}

/* Drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.2s;z-index:50}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(540px,100vw);background:var(--s1);border-left:1px solid var(--line2);z-index:51;transform:translateX(100%);transition:.25s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,.6)}
.drawer.open{transform:none} .drawer-bg.open{opacity:1;pointer-events:auto}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer header h3{margin:0}
.drawer header>div{display:flex;gap:8px;align-items:center}
.drawer .body{overflow-y:auto;padding:10px 20px 20px;flex:1}
.drawer .x{background:var(--s2);border:1px solid var(--line);width:32px;height:32px;border-radius:9px;font-size:18px;cursor:pointer;color:var(--ink2)}
.kvlist{display:grid;grid-template-columns:minmax(120px,34%) 1fr}
.kvlist div{padding:10px 0;border-bottom:1px solid var(--line);word-break:break-word}
.kvlist .k{color:var(--muted);font-weight:500;font-size:12px;padding-right:12px}
.kvlist .v{font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;color:var(--ink)}

/* Feed */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.feed li{display:flex;gap:12px;align-items:center;padding:11px 12px;background:var(--s2);border:1px solid var(--line);border-radius:11px}
.feed .when{margin-left:auto;color:var(--muted);font-size:11.5px;white-space:nowrap}
.feed .what{min-width:0} .feed .what b{font-weight:600;color:#fff}
.feed .what .muted{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:640px;font-size:12.5px}

/* Bars */
.bars{display:flex;flex-direction:column;gap:12px}
.bar{display:grid;grid-template-columns:150px 1fr 64px;gap:12px;align-items:center;font-size:13px;color:var(--ink2)}
.bar:hover{color:#fff}
.bar .track{height:8px;background:var(--in);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,#ff7a2e,#ff4d4f);border-radius:99px}
.bar span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.ov{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:18px;align-items:start}
.ov .card{margin:0}

/* Download format cards */
.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:6px}
.fmt{position:relative;display:block;margin:0;cursor:pointer}
.fmt input{position:absolute;opacity:0}
.fmt .box{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;gap:12px;align-items:center;transition:.15s;background:var(--s2)}
.fmt .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:11px;color:#fff}
.fmt .ic.x{background:linear-gradient(140deg,#22c55e,#15803d)} .fmt .ic.c{background:linear-gradient(140deg,#3b63ff,#1e3aa8)} .fmt .ic.s{background:linear-gradient(140deg,#ff7a2e,#c2410c)}
.fmt b{display:block;color:#fff} .fmt small{color:var(--muted);font-weight:400}
.fmt input:checked + .box{border-color:rgba(255,106,31,.6);box-shadow:0 0 0 3px rgba(255,106,31,.12);background:var(--s3)}
.quick{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Generic tables ---------- */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;color:var(--mute2);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
tr.dim{opacity:.5}
tr.changed th,tr.changed td{background:rgba(245,165,36,.07)}
.clip{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scroll{overflow-x:auto}
table.kv th{width:200px;text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted)}
table.kv pre{margin:0;white-space:pre-wrap;word-break:break-word;font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;color:var(--ink)}

/* ---------- Forms & buttons ---------- */
label{display:block;margin-bottom:12px;font-weight:500;font-size:12.5px;color:var(--ink2)}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line2);border-radius:11px;font:inherit;font-weight:400;background:var(--in);color:var(--ink);transition:.15s;color-scheme:dark}
input::placeholder{color:var(--mute2)}
input:focus,select:focus,textarea:focus{outline:0;border-color:rgba(255,106,31,.55);box-shadow:0 0 0 3px rgba(255,106,31,.12)}
input[type=color]{padding:4px;height:42px;width:72px}
input[type=checkbox],input[type=radio]{accent-color:var(--orange)}
label.check{display:flex;gap:9px;align-items:flex-start;font-weight:400;color:var(--ink2)}
label.check input{width:auto;margin-top:3px}
.inline-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.inline-form input,.inline-form select{width:auto;min-width:220px}
.inline-form label{margin:0}
form.inline{display:inline}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 18px}
.grid2 .actions,.grid2 .full{grid-column:1/-1}
.grid2 .actions{display:flex;gap:10px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 12px}
.btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#ff7a2e,#e5501c);color:#fff!important;border:0;border-radius:10px;padding:9px 16px;font:600 13px Inter,sans-serif;cursor:pointer;transition:.15s;box-shadow:0 8px 20px -10px rgba(255,106,31,.7),inset 0 1px 0 rgba(255,255,255,.2);white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.small{padding:7px 12px;font-size:12px;border-radius:9px}
.btn.ghost{background:var(--s2);color:var(--ink)!important;border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{background:var(--s3);filter:none}
.btn.white{background:#fff;color:#0b0b0d!important;box-shadow:none}
.btn.danger{background:linear-gradient(180deg,#ff5a5c,#d92f31);box-shadow:none}
.btn.xl{background:linear-gradient(180deg,#2ecc71,#16a34a);box-shadow:none}
.btn.sq{background:linear-gradient(180deg,#ff7a2e,#e5501c)}
.help{margin-top:16px;padding:14px 16px;background:var(--s2);border:1px dashed var(--line2);border-radius:12px;font-size:13px;color:var(--ink2)}
.help ol{margin:6px 0 0;padding-left:20px}
.flash{padding:12px 16px;border-radius:12px;margin:6px 0 16px;background:rgba(34,197,94,.1);color:#86efac;border:1px solid rgba(34,197,94,.25)}
.flash.warn{background:rgba(245,165,36,.1);color:#fcd34d;border-color:rgba(245,165,36,.25)}
.flash.err{background:rgba(255,77,79,.1);color:#fca5a5;border-color:rgba(255,77,79,.28)}
.flash.big{font-size:14.5px;font-weight:600}
.flash a{text-decoration:underline}
details{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:8px;background:var(--s2)}
summary{cursor:pointer;font-weight:600}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .big{font-size:38px;margin-bottom:6px}
.card :where(a:not(.btn):not(.cta):not(.pill-btn):not(.bar)){color:#ffb38a}
.feed a,.rows a,.kpi a{color:inherit}

/* Login */
.authcard{background:var(--s1);border:1px solid var(--line2);border-radius:22px;padding:28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)}
.authcard .logo{margin:0 0 18px}
.authcard h2{font-size:22px;margin-bottom:4px}
.authcard .btn{width:100%;justify-content:center;padding:12px;margin-top:6px}

/* ---------- Responsive ---------- */
/* Badi screens (1700px+) */
@media (min-width:1700px){
  .dash{grid-template-columns:420px 1fr}
  .kpi .val{font-size:30px}
}
@media (min-width:2200px){
  body{font-size:15px}
  .dash{grid-template-columns:480px 1fr}
}
/* Laptop / chhoti desktop */
@media (max-width:1280px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash{grid-template-columns:1fr}
  .dash > div:first-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .dash > div:first-child .card{margin:0}
  .dash{gap:18px}
}
/* Tablet */
@media (max-width:1024px){
  .gsearch{width:200px}
  .explorer{grid-template-columns:200px 1fr}
}
@media (max-width:860px){
  .dash > div:first-child{grid-template-columns:1fr}
  .explorer{grid-template-columns:1fr}
  .tlist{position:static;max-height:220px}
  .ov{grid-template-columns:1fr}
}
/* Phone: sidebar upar, table cards me */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .rail{position:sticky;top:0;height:auto;flex-direction:row;padding:8px 10px;gap:6px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rgroup,.rgroup.sites{flex-direction:row;max-height:none;overflow:visible;flex:none}
  .rsep{width:1px;height:22px;margin:0 2px;flex:none}
  .logo{margin:0 4px 0 0;flex:none;width:34px;height:34px}
  .rl,.rs{width:36px;height:36px;flex:none}
  .rl.bottom{margin:0 0 0 auto}
  [data-tip]:hover::after{display:none}
  .topbar{position:static;padding:10px 12px;gap:8px;background:transparent;backdrop-filter:none}
  .tb-l .nb,.crumbs{display:none}
  .tb-l{display:none}
  .tb-r{flex:1}
  .gsearch{flex:1;width:auto;min-width:0}
  .content{padding:4px 12px 40px}
  .pagehead{margin:4px 0 14px}
  .pagehead h1{font-size:20px}
  .kpis{grid-template-columns:1fr;gap:10px}
  .kpi .val{font-size:24px}
  .glow{min-height:210px;padding:18px}
  .glow h2{font-size:20px}
  .tablecard{padding:12px;border-radius:18px}
  .tablecard .tbar{flex-direction:column;align-items:stretch}
  .tablecard .tbar .quick{justify-content:flex-end}
  .seg{width:100%}
  .seg button,.seg a{flex:1;justify-content:center;padding:7px 10px}
  .feed li{flex-wrap:wrap;gap:6px 10px}
  .feed .what{flex:1 1 60%}
  .feed .when{margin-left:0;width:100%;padding-left:2px}
  .feed .what .muted{white-space:normal;max-width:none}
  .card{padding:16px;border-radius:16px}
  .hero{padding:18px;border-radius:18px}
  .hero .actions{margin-left:0;width:100%}
  .bar{grid-template-columns:100px 1fr 50px}
  .row-between{gap:8px}
}
@media (max-width:380px){
  .kpi .val{font-size:21px}
  .spark{width:96px}
}

/* ---------- Website cards (portal) ---------- */
.sitegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:20px}
.sitecard{background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;color:inherit;transition:.18s;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.sitecard::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 0% 0%,color-mix(in srgb,var(--c,#6366f1) 22%,transparent),transparent 70%);pointer-events:none}
.sitecard:hover{transform:translateY(-2px);border-color:var(--line2);color:inherit}
.sitecard>*{position:relative}
.sitecard .top{display:flex;gap:12px;align-items:center}
.sitecard .top b{display:block;font-size:15px;font-weight:600}
.sitecard .top .muted{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;display:block}
.sitecard .top .st{margin-left:auto}
.sitecard .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--in);border:1px solid var(--line);border-radius:12px;padding:10px}
.sitecard .nums div{text-align:center} .sitecard .nums b{display:block;font-size:16px;font-weight:600} .sitecard .nums span{font-size:11px;color:var(--muted)}
.sitecard .foot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}

/* ---------- Client portal shell ---------- */
body.portal .ptop{display:flex;align-items:center;gap:16px;padding:14px clamp(12px,2.2vw,36px);position:sticky;top:0;z-index:15;background:linear-gradient(180deg,rgba(9,9,11,.95),rgba(9,9,11,.7));backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pbrand{display:flex;align-items:center;gap:10px;font-weight:600;color:#fff}
.pbrand .logo{margin:0;width:34px;height:34px}
.pbrand small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.pnav{margin:0 auto}
.pnav a{text-decoration:none}
.pme{display:flex;align-items:center;gap:10px}
.pme .pn{font-weight:600;font-size:13px;line-height:1.2}
.pme .pn small{display:block;color:var(--muted);font-weight:400;font-size:11px}
.pcontent{position:relative;z-index:1;padding-top:20px}
.pfoot{position:relative;z-index:1;text-align:center;color:var(--mute2);font-size:11.5px;padding:10px 16px 30px;display:flex;justify-content:center;gap:6px;align-items:center}
.uchip{display:inline-flex;align-items:center;gap:5px;background:var(--in);border:1px solid var(--line);border-radius:8px;padding:2px 8px;font-size:11.5px;color:var(--ink2);margin:2px 4px 2px 0;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}
.credbox{background:var(--in);border:1px dashed rgba(255,106,31,.5);border-radius:14px;padding:16px;margin-bottom:16px}
.credbox .mono{font-size:13.5px;color:#fff}
.meter{height:6px;background:var(--in);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin-top:6px;width:120px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--amber))}
.meter i.full{background:var(--red)}
@media (max-width:760px){
  body.portal .ptop{flex-wrap:wrap;gap:10px;position:static}
  .pnav{order:3;width:100%;margin:0}
  .pnav a{flex:1;justify-content:center}
  .pnav a span{display:none}
  .pme{margin-left:auto}
  .pme .pn{display:none}
  .sitegrid{grid-template-columns:1fr}
}

/* ---------- Settings ---------- */
.switchrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px;margin:0 0 10px;background:var(--s2);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.switchrow b{display:block;color:var(--ink);font-weight:600;font-size:13px}
.switchrow small{display:block;color:var(--muted);font-weight:400;font-size:11.5px;margin-top:2px}
.switch{position:relative;flex:none;width:44px;height:24px}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:99px;background:#2a2a31;border:1px solid var(--line2);transition:.2s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#8b8b96;transition:.2s}
.switch input:checked + i{background:linear-gradient(180deg,#ff7a2e,#e5501c);border-color:transparent}
.switch input:checked + i::after{left:22px;background:#fff}
.switch input:focus-visible + i{box-shadow:0 0 0 3px rgba(255,106,31,.25)}
.checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.checklist>div{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--s2);border:1px solid var(--line);border-radius:11px}
.checklist .tick{margin-top:2px}
.checklist b{display:block;font-size:13px;font-weight:600}
.checklist small{display:block;color:var(--muted);font-size:11.5px}
.checklist .no b{color:var(--ink2)}
textarea{resize:vertical;min-height:60px;line-height:1.5}
.xbtn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:0 0 0 4px;line-height:1}
.xbtn:hover{color:var(--red)}
.pager .gap{color:var(--mute2);padding:0 2px}
.daylist{display:flex;flex-direction:column;gap:4px;max-height:540px;overflow-y:auto}
.daylist a{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-radius:10px;color:var(--ink2);font-size:13px}
.daylist a:hover{background:var(--s2);color:#fff}
.daylist a.on{background:#fff;color:#0b0b0d}
.daylist a small{color:var(--muted);font-variant-numeric:tabular-nums}
.daylist a.on small{color:#555}
.dayhead{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dayhead:first-child{margin-top:0}
.src{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;color:#fff}
.src.sync{background:rgba(255,106,31,.18);color:#ffb38a} .src.alert{background:rgba(255,77,79,.16);color:#ff9a9b}
.src.client{background:rgba(59,99,255,.16);color:#9fb3ff} .src.admin{background:rgba(138,63,252,.16);color:#c9a8ff} .src.backup{background:rgba(34,197,94,.14);color:#86efac}
.exportgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.exportgrid a,.exportgrid button{display:flex;gap:12px;align-items:center;padding:16px;background:var(--s2);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-align:left;font:inherit;cursor:pointer;width:100%}
.exportgrid a:hover,.exportgrid button:hover{border-color:rgba(255,106,31,.5);background:var(--s3);color:#fff}
.exportgrid b{display:block} .exportgrid small{display:block;color:var(--muted);font-size:11.5px}
.logpre{background:var(--in);border:1px solid var(--line);border-radius:12px;padding:14px;max-height:520px;overflow:auto;font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;color:var(--ink2);white-space:pre-wrap;word-break:break-word}

/* ---------- Website switcher ---------- */
.rl{border:1px solid transparent;background:none;cursor:pointer;font:inherit}
.rbadge{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;font:700 10px/17px Inter,sans-serif;font-style:normal;text-align:center;color:#fff;border:2px solid var(--bg)}
.rbadge.err{background:var(--red)} .rbadge.warn{background:var(--amber);color:#1a1205}
.sw-bg{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.15s}
.sw-bg.open{opacity:1;pointer-events:auto}
.switcher{position:fixed;left:80px;top:14px;z-index:41;width:360px;max-width:calc(100vw - 24px);max-height:min(640px,calc(100vh - 28px));display:flex;flex-direction:column;
  background:var(--s1);border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;transform:translateX(-8px) scale(.98);transition:.15s ease}
.switcher.open{opacity:1;transform:none}
.sw-head{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.sw-search{width:100%}
.sw-filter{width:100%}
.sw-filter button{flex:1;justify-content:center;padding:6px 8px;font-size:12px}
.sw-list{overflow-y:auto;padding:6px;flex:1;min-height:80px}
.sw-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;color:var(--ink2)}
.sw-item:hover,.sw-item.kb{background:var(--s3);color:#fff}
.sw-item.on{box-shadow:inset 2px 0 0 var(--orange)}
.sw-t{flex:1;min-width:0}
.sw-t b{display:block;font-weight:600;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-t small{display:block;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-empty{padding:24px;text-align:center;color:var(--muted)}
.sw-foot{display:flex;gap:14px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;flex-wrap:wrap}
.sw-foot a{display:inline-flex;align-items:center;gap:6px;color:var(--ink2)} .sw-foot a:hover{color:#fff}
.sw-foot span{margin-left:auto}
kbd{display:inline-block;min-width:18px;padding:0 5px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;font:600 10px/16px Inter,sans-serif;color:var(--ink2);text-align:center;background:var(--s2)}
@media (max-width:760px){
  .switcher{left:8px;right:8px;top:62px;width:auto;max-width:none;max-height:calc(100vh - 80px);transform:translateY(-6px)}
  .sw-foot span{display:none}
}
.switcher[hidden],.sw-empty[hidden]{display:none!important}

/* =========================================================
   EK JAISI CONTROL HEIGHT — poore project me
   input, select, search bar, button, filter tabs sab barabar
   Desktop/laptop: 42px · Mobile/tablet (touch): 44px
   ========================================================= */
:root{--ctl:42px;--ctl-sm:34px;--ctl-r:11px}
@media (max-width:1024px),(pointer:coarse){:root{--ctl:44px;--ctl-sm:38px}}

input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=hidden]),
select{height:var(--ctl);min-height:var(--ctl);padding:0 12px;line-height:normal;border-radius:var(--ctl-r);box-sizing:border-box}
input[type=file]{height:var(--ctl);padding:0 10px;line-height:calc(var(--ctl) - 2px);border-radius:var(--ctl-r)}
input[type=file]::file-selector-button{height:calc(var(--ctl) - 12px);margin:5px 10px 5px 0;border:1px solid var(--line2);border-radius:8px;background:var(--s3);color:var(--ink);font:500 12px Inter,sans-serif;padding:0 10px;cursor:pointer}
input[type=date],input[type=datetime-local]{-webkit-appearance:none;appearance:none}
input[type=date]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:left}
input[type=color]{height:var(--ctl);width:72px}

/* Search bars (topbar, switcher) */
.gsearch{height:var(--ctl);border-radius:var(--ctl-r);box-sizing:border-box}
.gsearch input{height:100%!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important}

/* Buttons */
.btn,.pill-btn,.cta{height:var(--ctl);min-height:var(--ctl);padding-top:0;padding-bottom:0;box-sizing:border-box;justify-content:center;border-radius:var(--ctl-r)}
.btn.small{height:var(--ctl-sm);min-height:var(--ctl-sm);padding:0 12px;border-radius:9px}
/* Input ke bagal wala button bhi input jitna hi */
.toolbar .btn,.inline-form .btn,.tbar form .btn,.sw-head .btn,form .actions .btn{height:var(--ctl);min-height:var(--ctl)}

/* Segmented filter / tabs: bahar ka dabba bhi same height */
.seg,.tabs{height:var(--ctl);min-height:var(--ctl);padding:4px;align-items:stretch;box-sizing:border-box;border-radius:var(--ctl-r)}
.seg>a,.seg>button,.tabs>a{height:auto;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
.sw-filter{height:var(--ctl)}

/* Topbar ke round buttons */
.bell,.me{width:var(--ctl);height:var(--ctl)}
.nb{width:var(--ctl-sm);height:var(--ctl-sm)}

/* Labels ke andar input: upar ki label aur control ke beech same gap */
label>input,label>select{margin-top:6px}
.inline-form{align-items:flex-end}
.inline-form label{display:flex;flex-direction:column}
.sw-head,.sw-foot,.sw-head>*{flex-shrink:0}
.switcher .sw-search{flex:none!important;height:var(--ctl)!important;width:100%}

/* =========================================================
   TABLES: har device par table hi rahe; jagah kam ho to side-scroll
   ========================================================= */
.scroll,.gridwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
.tbl-shell{position:relative}
.tbl-shell::before,.tbl-shell::after{content:"";position:absolute;top:0;bottom:0;width:28px;pointer-events:none;z-index:4;opacity:0;transition:opacity .2s}
.tbl-shell::before{left:0;background:linear-gradient(90deg,rgba(9,9,11,.75),transparent)}
.tbl-shell::after{right:0;background:linear-gradient(270deg,rgba(9,9,11,.75),transparent)}
.tbl-shell.edge-l::before,.tbl-shell.edge-r::after{opacity:1}
.scroll-hint{display:none;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);padding:6px 4px 0}
.tbl-shell.edge-r + .scroll-hint,.tbl-shell.edge-l + .scroll-hint{display:flex}
.rows{min-width:720px}
.rows th,.rows td{white-space:nowrap}
/* Pehla column (naam) scroll karte waqt dikhta rahe */
.rows td:first-child,.rows th:first-child{position:sticky;left:0;z-index:2}
.rows th:first-child{background:var(--s1)}
.rows td:first-child{box-shadow:6px 0 10px -8px rgba(0,0,0,.6)}
table.kv{min-width:420px}
/* Pagination bar */
.gridfoot{gap:12px}
.pg-info{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pg-per{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--muted);font-weight:500}
.pg-per select{width:auto;min-width:76px;margin:0;height:var(--ctl-sm);min-height:var(--ctl-sm);padding:0 8px}
.pager a,.pager span.cur,.pager span.dis{min-width:var(--ctl-sm);height:var(--ctl-sm);display:inline-flex;align-items:center;justify-content:center;padding:0 10px;box-sizing:border-box}
.pager span.dis{border:1px solid var(--line);border-radius:9px;color:var(--mute2);opacity:.5}
@media (max-width:760px){
  .gridfoot{flex-direction:column;align-items:stretch}
  .pg-info{justify-content:space-between}
  .pager{justify-content:center;flex-wrap:wrap}
  .rows{min-width:640px}
}
.dash>*,.explorer>*,.ov>*,.kpis>*,.grid2>*,.mainwrap,.content{min-width:0}
.rows td.clip{max-width:360px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){
  .pager a[aria-label="First"],.pager a[aria-label="Last"],.pager a[aria-label="Pehla"],.pager a[aria-label="Aakhri"],.pager span.dis:first-child,.pager span.dis:last-child{display:none}
  .pager{flex-wrap:nowrap;gap:4px}
}

/* =========================================================
   TABLES v2: saaf grid lines (horizontal + vertical), koi shadow nahi
   ========================================================= */
.tbl-shell::before,.tbl-shell::after{display:none!important}
.scroll,.gridwrap{border:1px solid var(--line2);border-radius:12px;background:var(--s1)}
.tablecard .scroll,.card .scroll{margin-top:6px}
.rows,table.grid,table.kv{border-collapse:separate!important;border-spacing:0!important;width:100%}
.rows th,.rows td,table.grid th,table.grid td,table.kv th,table.kv td{
  background:transparent;border:0!important;border-right:1px solid var(--line2)!important;border-bottom:1px solid var(--line2)!important;
  border-radius:0!important;box-shadow:none!important;padding:11px 14px;vertical-align:middle}
.rows tr>*:last-child,table.grid tr>*:last-child,table.kv tr>*:last-child{border-right:0!important}
.rows tbody tr:last-child td,table.grid tbody tr:last-child td,table.kv tr:last-child>*{border-bottom:0!important}
.rows thead th,table.grid thead th{background:var(--s2)!important;color:var(--ink2);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:10px 14px;position:sticky;top:0;z-index:3}
.rows td,table.grid td{background:var(--s1)!important}
.rows tbody tr:nth-child(even) td,table.grid tbody tr:nth-child(even) td{background:#16161a!important}
.rows tbody tr:hover td,table.grid tbody tr.rowlink:hover td{background:var(--s3)!important}
table.grid tr.deleted td{background:rgba(255,77,79,.07)!important}
.rows td:first-child,.rows th:first-child{position:sticky;left:0;z-index:2}
.rows thead th:first-child{z-index:4}
table.grid td.rn,table.grid th.rn{background:var(--s2)!important}
.gridwrap{padding:0!important}
table.kv th{width:200px;background:var(--s2)!important}
.scroll-hint{padding:8px 2px 0}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .18s}
.modal-bg.open{opacity:1;pointer-events:auto}
.modal{position:fixed;z-index:61;left:50%;top:50%;width:min(640px,calc(100vw - 32px));max-height:min(85vh,760px);display:flex;flex-direction:column;
  background:var(--s1);border:1px solid var(--line2);border-radius:20px;box-shadow:0 40px 100px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
  transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;transition:.2s cubic-bezier(.2,.8,.2,1)}
.modal.open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:16px}
.modal-x{width:var(--ctl-sm);height:var(--ctl-sm);border-radius:10px;border:1px solid var(--line2);background:var(--s2);color:var(--ink2);font-size:20px;line-height:1;cursor:pointer}
.modal-x:hover{color:#fff;background:var(--s3)}
.modal-b{overflow-y:auto;padding:16px 20px 20px}
.modal-b .kvlist{border:1px solid var(--line2);border-radius:12px;overflow:hidden;grid-template-columns:minmax(120px,34%) 1fr}
.modal-b .kvlist div{padding:10px 14px;border-bottom:1px solid var(--line2)}
.modal-b .kvlist .k{background:var(--s2);border-right:1px solid var(--line2)}
.modal-b .kvlist div:nth-last-child(-n+2){border-bottom:0}
.modal-b .mstat{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.modal-b .mact{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
body.noscroll{overflow:hidden}
@media (max-width:640px){
  .modal{left:0;right:0;top:auto;bottom:0;width:100%;max-height:88vh;border-radius:20px 20px 0 0;transform:translateY(100%);border-bottom:0}
  .modal.open{transform:translateY(0)}
  .modal-b .kvlist{grid-template-columns:1fr}
  .modal-b .kvlist .k{border-right:0;border-bottom:0;padding-bottom:2px;background:transparent;color:var(--muted)}
  .modal-b .kvlist .v{padding-top:0}
}

/* ===== Getting started checklist ===== */
.onboard{margin-bottom:18px;padding:18px 20px}
.onboard .ob-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.onboard .ob-head>div:first-child{flex:1;min-width:200px}
.onboard h3{margin:0 0 3px;font-size:16px}
.onboard .ob-head p{margin:0}
.ob-progress{width:160px;height:6px;border-radius:99px;background:var(--s2);overflow:hidden}
.ob-progress span{display:block;height:100%;background:linear-gradient(90deg,#3b63ff,#8a3ffc);border-radius:99px}
.ob-list{list-style:none;margin:0;padding:0;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.ob-list li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-top:1px solid var(--line2)}
.ob-list li:first-child{border-top:0}
.ob-list li.done .ob-text b{color:var(--muted);text-decoration:line-through}
.ob-num{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:var(--s2);border:1px solid var(--line2)}
.ob-list li.done .ob-num{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.3);color:#4ade80}
.ob-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ob-text b{font-size:13.5px}
.ob-text span{font-size:12px;color:var(--muted)}
.ob-list .btn,.ob-list .badge{flex:none;white-space:nowrap}
@media (max-width:640px){
  .ob-progress{width:100%;order:3}
  .ob-list li{flex-wrap:wrap}
  .ob-list li .btn,.ob-list li .badge{margin-left:42px}
}

/* ===== Clients: share login ===== */
.share-mini{display:flex;align-items:center;gap:6px}
.icobtn{width:var(--ctl-sm);height:var(--ctl-sm);display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line2);background:var(--s2);color:var(--ink2);cursor:pointer;text-decoration:none;flex:none}
.icobtn:hover{color:#fff;background:var(--s3)}
.icobtn.wa,.share-btn.wa svg{color:#25d366}
.share{display:flex;flex-direction:column;gap:14px}
.share .kvlist .v{display:flex;align-items:center;gap:8px;flex-wrap:wrap;word-break:break-all}
.share .pw-on{color:#fff;font-weight:600;background:rgba(255,106,31,.12);border:1px solid rgba(255,106,31,.35);padding:2px 8px;border-radius:6px}
.xcopy{width:26px;height:26px;display:inline-grid;place-items:center;border-radius:7px;border:1px solid var(--line2);background:var(--s2);color:var(--muted);cursor:pointer;flex:none;padding:0}
.xcopy:hover{color:#fff}
.xcopy.ok{color:#4ade80;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.12)}
.share-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;border:1px dashed rgba(255,106,31,.45);background:rgba(255,106,31,.06);font-size:12.5px;color:var(--ink2)}
.share-note span{flex:1;min-width:180px}
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.share-btn{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--s2);color:var(--ink);cursor:pointer;text-decoration:none;font:inherit;min-height:58px}
.share-btn:hover{background:var(--s3);border-color:var(--line)}
.share-btn svg{grid-row:1/3}
.share-btn b{font-size:13.5px}
.share-btn small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-mail{margin:0;padding:14px;border:1px solid var(--line2);border-radius:12px;background:var(--in)}
.share-mail label>span{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:6px}
.share-mail .inline-form{display:flex;gap:8px;flex-wrap:nowrap}
.share-mail .inline-form input{flex:1;min-width:0}
.share-mail p{margin:8px 0 0}
.share-done{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0}
.sharecard{border-color:rgba(255,106,31,.35)}
.sharecard .share{margin-top:12px}
.hintbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin-bottom:16px;border:1px solid var(--line2);border-radius:14px;background:var(--s1, var(--s2))}
.hb-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(59,99,255,.14);color:#8aa2ff;flex:none}
.hb-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:2px}
.hb-text b{font-size:13.5px}.hb-text span{font-size:12px;color:var(--muted)}
.hb-acts{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:520px){.share-actions{grid-template-columns:1fr}.share-mail .inline-form{flex-wrap:wrap}.share-mail .inline-form .btn{width:100%}}

/* ===== Settings: email ===== */
.mailstatus{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:16px;border-radius:14px;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.07)}
.mailstatus.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.07)}
.ms-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(245,158,11,.15);color:#fbbf24}
.mailstatus.ok .ms-ico{background:rgba(34,197,94,.15);color:#4ade80}
.mailstatus div{display:flex;flex-direction:column;gap:2px;min-width:0}
.mailstatus span{font-size:12.5px;color:var(--muted);word-break:break-word}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip-btn{height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line2);background:var(--s2);color:var(--ink2);font:inherit;font-size:12.5px;cursor:pointer}
.chip-btn:hover{color:#fff;background:var(--s3)}
.chip-btn.on{border-color:#ff6a1f;color:#fff;background:rgba(255,106,31,.15)}
.presets.tags .chip-btn{height:28px;font-size:12px}
.tipbox{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-top:4px;border-radius:10px;background:var(--in);border:1px solid var(--line2);font-size:12.5px;color:var(--ink2)}
.tipbox svg{flex:none;margin-top:2px;color:#fbbf24}
#test .inline-form{display:flex;gap:8px}
#test .inline-form input{flex:1;min-width:0}
@media (max-width:520px){#test .inline-form{flex-wrap:wrap}#test .inline-form .btn{width:100%}}
textarea{line-height:1.5}
.pe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pe label{min-width:0}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ===== Client profile & client-first flow ===== */
.kvlist.plain .v{font:inherit;font-size:13px;white-space:normal}
.steps{display:flex;align-items:center;gap:10px;margin:0 0 18px;flex-wrap:wrap}
.steps>div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.steps>div span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--s2);border:1px solid var(--line2)}
.steps>div.on{color:#fff}.steps>div.on span{background:#ff6a1f;border-color:#ff6a1f;color:#fff}
.steps>div.done{color:var(--ink2)}.steps>div.done span{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.35);color:#4ade80}
.steps>i{flex:0 1 48px;height:1px;background:var(--line2);min-width:16px}
.cform .card{margin-bottom:16px}
.cform .ctitle{margin-bottom:14px}
.req{color:#ff6a1f;font-style:normal}
.fhint{display:block;margin-top:5px;font-size:11.5px;color:var(--muted);font-weight:400}
details.more{margin:4px 0 14px;border:1px solid var(--line2);border-radius:12px;padding:0 14px;background:var(--in)}
details.more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:12px 0;font-weight:600;font-size:13px}
details.more summary::-webkit-details-marker{display:none}
details.more[open] summary{border-bottom:1px solid var(--line2);margin-bottom:14px}
.sticky-actions{position:sticky;bottom:0;z-index:5;padding:14px 0;background:linear-gradient(transparent,var(--bg) 35%)}
.profile-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px;margin:6px 0 18px;border:1px solid var(--line2);border-radius:18px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,106,31,.12),transparent 55%),var(--s1)}
.ph-main{flex:1;min-width:240px}
.ph-main h1{margin:0;font-size:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ph-sub{color:var(--muted);font-size:13px;margin:4px 0 10px}
.ph-chips{display:flex;flex-wrap:wrap;gap:8px}
.ph-chips a.chip{text-decoration:none}.ph-chips a.chip:hover{color:#fff;border-color:var(--line2)}
.chip.wa svg{color:#25d366}
.ph-acts{display:flex;gap:8px;flex-wrap:wrap}
.addsite{border:1px dashed rgba(255,106,31,.5);background:linear-gradient(180deg,rgba(255,106,31,.06),transparent),var(--s1)}
.as-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.as-head h3{margin:0 0 4px}.as-head p{margin:0;font-size:13px}
.as-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(255,106,31,.15);color:#ff8a4a;flex:none}
.as-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.as-opt{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line2);border-radius:14px;background:var(--s2);color:var(--ink);text-decoration:none;margin:0}
a.as-opt:hover{background:var(--s3);border-color:#ff6a1f}
.as-opt b{font-size:14px}.as-opt small{color:var(--muted);font-size:12px}
.as-opt svg{color:#ff8a4a}
.as-opt .inline-form{display:flex;gap:8px;margin-top:4px}.as-opt select{flex:1;min-width:0}
.mini-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.mini-kpis>div{padding:14px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--s1);display:flex;flex-direction:column;gap:6px;min-width:0}
.mini-kpis span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.mini-kpis b{font-size:22px}.mini-kpis b small{font-size:13px;color:var(--muted);font-weight:500}.mini-kpis b.sm{font-size:15px;padding-top:5px}
@media (max-width:820px){.mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.site-list{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.site-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line2);color:var(--ink);text-decoration:none}
.site-row:first-child{border-top:0}.site-row:hover{background:var(--s2)}
.site-row>div{flex:1;min-width:0;display:flex;flex-direction:column}
.site-row small{color:var(--muted);font-size:12px}
.site-row>svg{color:var(--muted)}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{display:flex;gap:12px;padding:0 0 16px;position:relative}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:5px;top:16px;bottom:0;width:1px;background:var(--line2)}
.tl-dot{width:11px;height:11px;border-radius:50%;margin-top:5px;flex:none;background:var(--muted)}
.tl-dot.ok{background:#22c55e}.tl-dot.upd{background:#8a3ffc}.tl-dot.warn{background:#f59e0b}.tl-dot.err{background:#ef4444}
.tl-body{flex:1;min-width:0}
.tl-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.linkbtn{background:none;border:0;padding:0;margin-top:4px;color:#ff8a4a;font:inherit;font-size:12px;cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.forclient{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:0 0 14px;border-radius:10px;background:rgba(59,99,255,.1);border:1px solid rgba(59,99,255,.3);font-size:13px}
.forclient span{flex:1}
a.plain{color:inherit;text-decoration:none}a.plain:hover{color:#fff}
a.uchip{text-decoration:none}a.uchip:hover{color:#fff;border-color:var(--line2)}
.clist .nm{color:inherit;text-decoration:none}.clist .nm:hover{color:#fff}
tr.dim td{opacity:.6}

/* ===== Spacing fix: grid sections never touch the next block ===== */
.ov,.dash,.explorer{margin-bottom:18px}
.ov:last-child,.dash:last-child,.explorer:last-child{margin-bottom:0}
.ov>div>.card,.dash>div>.card{margin:0 0 18px}
.ov>div>.card:last-child,.dash>div>.card:last-child{margin-bottom:0}
@media (max-width:640px){
  .card{margin-bottom:14px}
  .ov,.dash,.explorer{gap:14px;margin-bottom:14px}
  .ov>div>.card,.dash>div>.card{margin-bottom:14px}
}
@media (max-width:640px){
  .feed li{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}
  .feed li .when{grid-column:2;grid-row:1;justify-self:stretch;text-align:right;margin:0}
  .feed li .what{grid-column:1/-1}
}

/* Admin login: marked as a restricted console (client portal has its own light sign-in page) */
.admincard{border-color:rgba(255,106,31,.28);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,106,31,.06),inset 0 1px 0 rgba(255,255,255,.05)}
.admincard .ac-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.admincard .ac-top .logo{margin:0}
.ac-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#ffb38a;background:rgba(255,106,31,.1);border:1px solid rgba(255,106,31,.25)}
.ac-note{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;font-size:11.5px;color:var(--mute2)}
.ac-note svg{margin-top:2px}

/* Website page: records that are no longer on the website (waiting for the admin to confirm) */
.gone-card{border-color:rgba(245,165,36,.35);background-image:linear-gradient(180deg,rgba(245,165,36,.06),transparent 60%)}
.gone-card .cico{background:rgba(245,165,36,.14);color:#fbbf24;border-color:transparent}
.gone-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--s2);margin-top:8px}
.gone-row b{display:block;font-weight:600}

/* Website settings: backup mode choice */
.formats.modes{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:14px}
.formats.modes .box{align-items:flex-start;height:100%}
.formats.modes small{display:block;margin-top:3px;line-height:1.45}
.mode-ic{background:var(--s3)!important;color:#ffb38a;border:1px solid var(--line2)}
.fmt input:checked + .box .mode-ic{background:linear-gradient(140deg,#ff7a2e,#c2410c)!important;color:#fff;border-color:transparent}
.mode-tag{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#4ade80;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.daycopy-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--s2);border:1px solid var(--line);font-size:12.5px;color:var(--ink2);margin-bottom:14px}
.daycopy-note svg{flex:none;margin-top:2px;color:#ffb38a}

/* =========================================================
   Restore page
   ========================================================= */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rs-site{--c:#6366f1;position:relative;z-index:5;display:flex;gap:18px;align-items:center;padding:20px 22px;margin-bottom:18px;border-radius:22px;border:1px solid var(--line2);
  background:radial-gradient(70% 140% at 0% 0%,color-mix(in srgb,var(--c) 38%,transparent),transparent 62%),radial-gradient(50% 120% at 100% 0%,rgba(255,106,31,.10),transparent 60%),var(--s1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.rs-site::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at calc(100% - 160px) -10px,transparent 0 92px,rgba(255,255,255,.03) 93px 120px,transparent 121px)}
.rs-site-main{min-width:0;flex:1;position:relative;z-index:1}
.rs-pick select{width:auto;min-width:min(340px,100%);max-width:100%;margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:#fff;background-color:rgba(0,0,0,.25);border-color:rgba(255,255,255,.14)}
.rs-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--ink2);align-items:center}
.rs-meta span{display:inline-flex;align-items:center;gap:6px}

.rs-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.rs-steps .card{margin-bottom:18px}
.rs-step{padding:20px 22px}
.rs-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.rs-h h3{margin:2px 0 3px;font-size:16px}
.rs-h p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
.rs-n{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(180deg,#ff7a2e,#e5501c);box-shadow:0 8px 18px -8px rgba(255,106,31,.8)}

.rs-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.rs-search{flex:1;min-width:200px}
.rs-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;max-height:360px;overflow:auto;padding:2px}
.rs-t{position:relative;display:flex;align-items:center;gap:10px;margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--s2);cursor:pointer;transition:.15s;font-weight:400}
.rs-t:hover{border-color:var(--line2);background:var(--s3)}
.rs-t input{position:absolute;opacity:0;pointer-events:none}
.rs-box{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);display:grid;place-items:center;color:transparent;transition:.15s}
.rs-t input:checked ~ .rs-box{background:linear-gradient(180deg,#ff7a2e,#e5501c);border-color:transparent;color:#fff}
.rs-t:has(input:checked){border-color:rgba(255,106,31,.55);background:rgba(255,106,31,.06)}
.rs-t input:focus-visible ~ .rs-box{box-shadow:0 0 0 3px rgba(255,106,31,.3)}
.rs-tn{min-width:0;flex:1}
.rs-tn b{display:block;color:var(--ink);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-tn small{color:var(--muted);font-size:11.5px}
.rs-none{grid-column:1/-1;color:var(--muted);font-size:13px;padding:10px}
.rs-none[hidden]{display:none}

.rs-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0}
.rs-cards .box{height:100%;align-items:flex-start}
.rs-cards small{display:block;margin-top:3px;line-height:1.45}
.rs-ic{background:var(--s3)!important;color:#ffb38a;border:1px solid var(--line2)}
.rs-ic.ok{color:#4ade80} .rs-ic.warn{color:#fbbf24}
.fmt input:checked + .box .rs-ic{background:linear-gradient(140deg,#ff7a2e,#c2410c)!important;color:#fff;border-color:transparent}
.rs-past,.rs-direct{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--in);animation:rsIn .25s ease both}
.rs-past[hidden],.rs-direct[hidden]{display:none}
.rs-past label{margin-bottom:10px}
.rs-chips{display:flex;flex-wrap:wrap;gap:6px}
.rs-chips button{border:1px solid var(--line2);background:var(--s2);color:var(--ink2);border-radius:999px;padding:6px 12px;font:500 12px Inter,sans-serif;cursor:pointer;transition:.15s}
.rs-chips button:hover{color:#fff;border-color:rgba(255,106,31,.5)}
.rs-direct{border-color:rgba(245,165,36,.3);background:linear-gradient(180deg,rgba(245,165,36,.05),transparent 70%),var(--in)}

.rs-side{position:sticky;top:76px}
.rs-sum{padding:20px}
.rs-sum dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:0 0 18px;font-size:13px}
.rs-sum dt{color:var(--muted)}
.rs-sum dd{margin:0;text-align:right;color:var(--ink);font-weight:600;word-break:break-word}
.rs-go{width:100%;height:50px!important;min-height:50px!important;font-size:14.5px;border-radius:14px!important}
.rs-go.danger{background:linear-gradient(180deg,#ff5a5c,#d92f31)}
.rs-foot{margin:10px 0 0;text-align:center}
@keyframes rsIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (max-width:1100px){
  .rs-layout{grid-template-columns:1fr}
  .rs-side{position:static}
}
@media (max-width:640px){
  .rs-site{flex-direction:column;align-items:flex-start;padding:18px}
  .rs-pick select{min-width:100%;font-size:17px}
  .rs-step{padding:18px 16px}
  .rs-tables{grid-template-columns:1fr;max-height:300px}
}

/* Restore: custom website dropdown (replaces the browser's grey list) */
.rs-dd{position:relative;display:inline-block;max-width:100%;margin-bottom:10px}
.rs-dd-btn{display:flex;align-items:center;gap:14px;min-width:min(360px,100%);max-width:100%;padding:9px 12px 9px 16px;border-radius:14px;cursor:pointer;text-align:left;color:#fff;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .15s,background .15s,box-shadow .15s}
.rs-dd-btn:hover{border-color:rgba(255,255,255,.28);background:rgba(0,0,0,.36)}
.rs-dd-btn:focus-visible,.rs-dd.open .rs-dd-btn{outline:0;border-color:rgba(255,106,31,.7);box-shadow:0 0 0 4px rgba(255,106,31,.14)}
.rs-dd-cur{min-width:0;flex:1}
.rs-dd-cur b{display:block;font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-dd-cur small{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:1px}
.rs-dd-chev{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--ink2);transition:transform .2s cubic-bezier(.2,.8,.2,1),background .15s}
.rs-dd.open .rs-dd-chev{transform:rotate(180deg);background:rgba(255,106,31,.18);color:#ffb38a}
.rs-dd-panel{position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:max(100%,380px);max-width:calc(100vw - 32px);padding:8px;border-radius:16px;
  background:rgba(19,19,22,.96);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);transform-origin:top left;animation:rsDDIn .18s cubic-bezier(.2,.8,.2,1) both}
.rs-dd-panel[hidden]{display:none}
.rs-dd-search{display:flex;align-items:center;gap:8px;padding:0 10px;margin:0 0 6px;border-radius:11px;background:var(--in);border:1px solid var(--line);color:var(--muted)}
.rs-dd-search input{border:0!important;background:transparent!important;box-shadow:none!important;margin:0!important;padding:0!important;height:38px!important;min-height:38px!important}
.rs-dd-list{max-height:min(360px,60vh);overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.rs-dd-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;color:var(--ink)!important;text-decoration:none;transition:background .12s}
.rs-dd-item:hover,.rs-dd-item.kb{background:rgba(255,255,255,.06)}
.rs-dd-item.on{background:rgba(255,106,31,.1);box-shadow:inset 0 0 0 1px rgba(255,106,31,.3)}
.rs-dd-t{min-width:0;flex:1}
.rs-dd-t b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-dd-t small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-dd-tick{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ff7a2e,#e5501c);color:#fff}
.rs-dd-item .dot{margin:0 8px}
.rs-dd-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
.rs-dd-empty[hidden]{display:none}
@keyframes rsDDIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:640px){.rs-dd,.rs-dd-btn{width:100%;min-width:0}.rs-dd-panel{width:100%}.rs-dd-cur b{font-size:17px}}

/* The browser's own dropdown lists (everywhere): dark instead of grey/white */
select{color-scheme:dark}
select option,select optgroup{background:#18181c;color:#f2f2f4}
select option:checked{background:#3a2216;color:#fff}

/* =========================================================
   DATA PREVIEW GRID (admin + client portal): dynamic columns, sticky header/#, pagination
   ========================================================= */
.tl-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 4px 10px}
.tl-head b{font-size:13px;font-weight:600;color:var(--ink)}
.tl-head span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.dg{position:relative;padding:12px 16px 4px}
.dg-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dg-meta,.dg-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dg-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--s2);border:1px solid var(--line2);font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.dg-chip.dg-hidden{color:#ffb38a;border-color:rgba(255,106,31,.35);background:rgba(255,106,31,.08)}
.dg-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;border:1px solid var(--line2);background:var(--s2);color:var(--ink2);font:500 12px Inter,sans-serif;cursor:pointer;transition:.15s;white-space:nowrap}
.dg-btn:hover{background:var(--s3);color:#fff}
.dg-btn.on{border-color:rgba(255,106,31,.55);color:#fff;background:rgba(255,106,31,.14)}
.dg-pop{position:relative}
.dg-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(300px,calc(100vw - 40px));background:var(--s1);border:1px solid var(--line2);border-radius:14px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.65)}
.dg-menu[hidden],.dg-chip[hidden]{display:none}
.dg-find{width:100%;margin:0 0 8px!important}
.dg-acts{display:flex;gap:6px;margin-bottom:6px}
.dg-acts button{flex:1;height:28px;border-radius:8px;border:1px solid var(--line2);background:var(--s2);color:var(--ink2);font:500 11.5px Inter,sans-serif;cursor:pointer}
.dg-acts button:hover{background:var(--s3);color:#fff}
.dg-list{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.dg-list label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--ink2);margin:0}
.dg-list label:hover{background:var(--s2)}
.dg-list input{width:15px;height:15px;margin:0;accent-color:var(--orange);flex:none}
.dg-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-t{display:inline-grid;place-items:center;min-width:20px;height:16px;padding:0 3px;border-radius:5px;font:600 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;text-transform:none;background:rgba(255,255,255,.06);color:var(--muted);margin-right:7px;vertical-align:1px;flex:none}
.dg-t.t-num{color:#7aa2ff;background:rgba(59,99,255,.12)} .dg-t.t-date{color:#c4a2ff;background:rgba(138,63,252,.14)}
.dg-t.t-bool{color:#5fdc8f;background:rgba(34,197,94,.12)} .dg-t.t-json{color:#f5c26b;background:rgba(245,165,36,.12)}

.dg-scroll{position:relative;border-radius:12px}
.dg-scroll::before,.dg-scroll::after{content:"";position:absolute;top:1px;bottom:1px;width:26px;pointer-events:none;z-index:6;opacity:0;transition:opacity .2s}
.dg-scroll::before{left:45px;background:linear-gradient(90deg,rgba(0,0,0,.45),transparent)}
.dg-scroll::after{right:1px;border-radius:0 12px 12px 0;background:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}
.dg.edge-l .dg-scroll::before,.dg.edge-r .dg-scroll::after{opacity:1}
.dg .gridwrap{max-height:min(68vh,760px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;outline:0}
.dg .gridwrap:focus-visible{box-shadow:0 0 0 2px rgba(255,106,31,.45)}
.dg table.grid{width:max-content;min-width:100%}
.dg table.grid thead th{font-size:10.5px;letter-spacing:.06em;color:var(--ink2);white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 -1px 0 var(--line2)!important}
.dg table.grid td{font-size:13px;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s}
.dg table.grid th.rn,.dg table.grid td.rn{position:sticky;left:0;z-index:4;min-width:46px;width:46px;text-align:right;color:var(--mute2);font-size:11px;font-variant-numeric:tabular-nums}
.dg table.grid thead th.rn{z-index:5}
.dg table.grid td.num,.dg table.grid th.t-num{text-align:right;font-variant-numeric:tabular-nums}
.dg table.grid td.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:#cfd9ff}
.dg table.grid td.date{color:#d9ccf5;font-variant-numeric:tabular-nums}
.dg table.grid td.json{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#f3d9a8}
.dg table.grid td.null{color:var(--mute2)!important;font-style:italic;font-size:11.5px}
.dg table.grid tbody tr.rowlink:hover td{background:#25252c!important;color:#fff}
.dg table.grid tbody tr.rowlink:hover td.rn{color:var(--orange);box-shadow:inset 2px 0 0 var(--orange)!important}
.dg-bool{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600}
.dg-bool.y{background:rgba(34,197,94,.14);color:#5fdc8f} .dg-bool.n{background:rgba(255,77,79,.12);color:#ff9a9b}
.dg-pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;background:var(--s3);color:var(--muted)}
.dg.dense table.grid td{padding:6px 12px!important;font-size:12.5px}
.dg.dense table.grid thead th{padding:8px 12px!important}
.dg-tip{margin:0;padding:0 16px 14px}

/* Full screen */
html.dg-lock,html.dg-lock body{overflow:hidden}
.dg.full{position:fixed;inset:0;z-index:45;background:var(--bg);padding:14px 16px;display:flex;flex-direction:column}
.dg.full .dg-scroll{flex:1;min-height:0;display:flex}
.dg.full .gridwrap{max-height:none;flex:1}

/* Pagination: jump to page */
.pg-jump{display:inline-flex;align-items:center;gap:6px;margin:0}
.pg-jump label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.pg-jump input{width:70px;margin:0;height:var(--ctl-sm,32px);min-height:var(--ctl-sm,32px);padding:0 8px;text-align:center}
.pg-jump button{height:var(--ctl-sm,32px);padding:0 12px;border-radius:9px;border:1px solid var(--line2);background:var(--s2);color:var(--ink);font:600 12px Inter,sans-serif;cursor:pointer}
.pg-jump button:hover{background:var(--s3)}
.dg + .gridfoot{padding-top:10px}

/* Tablet / phone: table list becomes a sideways strip, grid stays a real table that scrolls both ways */
@media (max-width:860px){
  .tlist{max-height:none}
  .tlist .items{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:6px;padding-bottom:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .tlist a{flex:none;scroll-snap-align:start;border:1px solid var(--line2);background:var(--s2);border-radius:999px;padding:7px 12px;max-width:220px}
  .tlist a.on{border-color:#fff}
}
@media (max-width:760px){
  .dg{padding:10px 10px 4px}
  .dg .gridwrap{max-height:70vh}
  .dg-btn span{display:none}
  .dg-btn{width:34px;padding:0;justify-content:center}
  .dg [data-dg-cols] span{display:inline}
  .dg [data-dg-cols]{width:auto;padding:0 10px}
  .dg table.grid td,.dg table.grid thead th{max-width:220px}
  .dg-tip{padding:0 10px 12px}
  .pg-jump{justify-content:center}
}
@media (max-width:480px){
  .dg-meta .dg-chip:nth-child(2){display:none}
  .dg.full{padding:10px}
}
@media (max-width:480px){
  .gridfoot{min-width:0}
  .gridfoot .pager{flex-wrap:wrap;justify-content:center}
  .gridfoot .pager a,.gridfoot .pager span.cur{min-width:34px;padding:0 6px}
}

/* =========================================================
   UNDERLINE TABS — one look everywhere (page tabs, filters, table list, portal menu):
   no pill / background, thin grey line underneath, active = blue text + blue underline
   ========================================================= */
.seg,.tabs{display:flex;gap:0;height:auto;min-height:0;padding:0;background:transparent;border:0;border-radius:0;
  box-shadow:inset 0 -1px 0 var(--line2);overflow-x:auto;overflow-y:hidden;max-width:100%;align-items:stretch;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.seg::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.seg>a,.seg>button,.tabs>a{position:relative;flex:none;height:42px;padding:0 14px;border:0;border-radius:0;background:transparent;
  color:var(--muted);font:500 13px Inter,sans-serif;box-shadow:none;transition:color .15s}
.seg>a:hover,.seg>button:hover,.tabs>a:hover{color:#fff;background:transparent}
.seg .on,.tabs a.on{background:transparent!important;color:#6f8dff!important;font-weight:600;box-shadow:none}
.seg .on::after,.tabs a.on::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px 2px 0 0;
  background:var(--blue);box-shadow:0 0 10px rgba(59,99,255,.7)}
.tabs .cnt{background:rgba(255,255,255,.06);color:var(--mute2);margin-left:2px}
.tabs a.on .cnt{background:rgba(59,99,255,.16);color:#8fa6ff}
.tabs{margin:18px 0}
@media (max-width:760px){
  .seg{width:100%}
  .seg>a,.seg>button{flex:1 0 auto;justify-content:center;padding:0 12px}
}
/* Portal menu in the header: header already has its own bottom line */
body.portal .pnav{box-shadow:none}
body.portal .pnav a.on .i{color:#6f8dff}

/* Table list — desktop: plain list, active = blue text + blue bar on the left */
.tlist a.on{background:rgba(59,99,255,.08);color:#8fa6ff;font-weight:600;border-radius:8px}
.tlist a.on small{color:#8fa6ff;opacity:.8}
.tlist a{position:relative}
.tlist a.on::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--blue);box-shadow:0 0 10px rgba(59,99,255,.7)}
/* Table list — tablet / phone: sideways underline tabs */
@media (max-width:860px){
  .tlist .items{gap:0;padding-bottom:0;box-shadow:inset 0 -1px 0 var(--line2);scrollbar-width:none}
  .tlist .items::-webkit-scrollbar{display:none}
  .tlist a,.tlist a:hover,.tlist a.on{border:0;border-radius:0;background:transparent;box-shadow:none}
  .tlist a{padding:10px 14px 11px;color:var(--muted);align-items:baseline}
  .tlist a:hover{color:#fff}
  .tlist a small{font-size:11px;color:var(--mute2)}
  .tlist a.on{color:#6f8dff;font-weight:600}
  .tlist a.on small{color:#6f8dff}
  .tlist a.on::after{left:8px;right:8px;top:auto;bottom:0;width:auto;height:2px;border-radius:2px 2px 0 0}
}

/* =========================================================
   NO SIDEWAYS PAGE SCROLL: closed drawers/popups stay off-screen and cannot be scrolled into view
   ========================================================= */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.drawer{visibility:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s linear .25s}
.drawer.open{visibility:visible;transition:transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s}
img,video,iframe,svg{max-width:100%}
pre,code{overflow-wrap:anywhere}

/* Table download popup */
.dlf .dlf-k{font-size:12px;font-weight:600;color:var(--ink2);letter-spacing:.02em;margin:14px 0 8px}
.dlf .dlf-k:first-of-type{margin-top:0}
.dlf .dlf-fmts{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.dlf .fmt .box{padding:12px;gap:10px}
.dlf .fmt .ic{width:36px;height:36px;border-radius:10px;flex:none}
.dlf select{width:100%;margin:0}
.dlf-sql{display:none}
.dlf:has(input[name=format][value=sql]:checked) .dlf-sql,form:not(.dlf) .dlf-sql{display:block}
.dlf-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 6px;border:1px solid var(--line2);border-radius:12px;background:var(--s2);cursor:pointer;transition:.15s}
.dlf-opt input{margin:3px 0 0;accent-color:var(--blue);flex:none;width:16px;height:16px}
.dlf-opt b{display:block;font-size:13px;color:#fff;font-weight:600}
.dlf-opt b em{font-style:normal;font-size:10.5px;font-weight:600;color:#8fa6ff;background:rgba(59,99,255,.15);padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:1px}
.dlf-opt small{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:2px}
.dlf-opt:has(input:checked){border-color:rgba(59,99,255,.55);background:rgba(59,99,255,.07)}
.dlf-how{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:rgba(245,165,36,.08);border:1px solid rgba(245,165,36,.22);color:#f3d9a8;font-size:12px;line-height:1.5}
.dlf-how .i{margin-top:2px;color:var(--amber)}
.dlf-go{display:flex;justify-content:flex-end;margin-top:16px}
@media (max-width:480px){ .dlf-go .btn{width:100%} }
.card-h .dl{display:flex;gap:8px;flex-wrap:wrap}
.btn.host-btn{background:linear-gradient(180deg,#4f78ff,#2f55e6);box-shadow:0 8px 20px -10px rgba(59,99,255,.85),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.host-btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.row-acts{display:flex;gap:6px;align-items:center;justify-content:flex-end}
@media (max-width:760px){ .row-acts{justify-content:flex-start;flex-wrap:wrap} }

/* =========================================================
   PAGINATION v3 (whole site): no boxes behind numbers — clean text numbers,
   active page = blue with glowing underline (same as tabs), Prev / Next arrows
   ========================================================= */
.gridfoot{padding:14px 16px;gap:12px 18px;border-top:1px solid var(--line)}
.gridfoot .pg-info{gap:16px}
.gridfoot .pg-count{color:var(--muted);font-size:12.5px;white-space:nowrap}
.gridfoot .pg-count b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.gridfoot .pg-per{gap:8px;font-size:12.5px}
.gridfoot .pg-per select{min-width:68px;height:32px;min-height:32px;padding:0 26px 0 10px;border-radius:9px;font-size:12.5px}
.gridfoot .pager{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;max-width:100%;margin:0}
.gridfoot .pg-nums{display:flex;align-items:center;gap:2px;min-width:0}
.gridfoot .pager a,.gridfoot .pager span.cur,.gridfoot .pager span.dis,.gridfoot .pager .gap{
  position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-width:34px;height:34px;padding:0 8px;margin:0;border:0!important;border-radius:10px;background:transparent!important;box-shadow:none!important;
  color:var(--muted);font:600 13px Inter,sans-serif;font-variant-numeric:tabular-nums;text-decoration:none;opacity:1;transition:color .15s}
.gridfoot .pager a::after,.gridfoot .pager span.cur::after{content:"";position:absolute;left:50%;bottom:3px;width:0;height:2px;border-radius:2px;transform:translateX(-50%);
  background:rgba(255,255,255,.35);transition:width .2s cubic-bezier(.2,.8,.2,1)}
.gridfoot .pager a:hover{color:#fff}
.gridfoot .pager a:hover::after{width:14px}
.gridfoot .pager a:focus-visible{outline:2px solid rgba(59,99,255,.6);outline-offset:1px}
.gridfoot .pager span.cur{color:#8fa6ff;text-shadow:0 0 14px rgba(59,99,255,.75)}
.gridfoot .pager span.cur::after{width:18px;background:var(--blue);box-shadow:0 0 10px rgba(59,99,255,.9)}
.gridfoot .pager .gap{min-width:18px;padding:0;color:var(--mute2);letter-spacing:1px}
.gridfoot .pager .pg-arr{gap:4px;padding:0 10px;color:var(--ink2);font-size:12.5px}
.gridfoot .pager .pg-arr svg{flex:none;transition:transform .2s}
.gridfoot .pager a.pg-arr:hover svg:first-child{transform:translateX(-2px)}
.gridfoot .pager a.pg-arr:hover svg:last-child{transform:translateX(2px)}
.gridfoot .pager .pg-arr::after{display:none}
.gridfoot .pager span.pg-arr.dis{color:var(--mute2);opacity:.4;cursor:default}
.gridfoot .pg-jump input{height:32px;min-height:32px;width:64px;border-radius:9px}
.gridfoot .pg-jump button{height:32px;border-radius:9px;background:transparent;border:1px solid var(--line2);color:#8fa6ff}
.gridfoot .pg-jump button:hover{background:rgba(59,99,255,.1);border-color:rgba(59,99,255,.45);color:#fff}

/* Phones: info row on top, pages centred; very small screens drop neighbour numbers and arrow words */
@media (max-width:760px){
  .gridfoot{flex-direction:column;align-items:stretch;gap:10px}
  .gridfoot .pg-info{justify-content:space-between}
  .gridfoot .pager{justify-content:center;width:100%}
  .gridfoot .pg-jump{justify-content:center}
}
@media (max-width:420px){
  .gridfoot .pager .pg-arr span{display:none}
  .gridfoot .pager .pg-arr{padding:0 6px;min-width:32px}
  .gridfoot .pager a.nb{display:none}
  .gridfoot .pager a,.gridfoot .pager span.cur{min-width:30px;padding:0 5px}
  .gridfoot .pg-count{font-size:12px}
}
@media (max-width:340px){ .gridfoot .pg-info{flex-wrap:wrap;justify-content:center} }

/* Per-table actions: grid toolbar buttons, table-list download icon, repair popup */
.dg-extra{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;padding-right:8px;margin-right:2px;border-right:1px solid var(--line2)}
.dg-extra .btn.small{height:30px;min-height:30px;padding:0 11px;font-size:12px}
.btn.rp-btn{color:#ffb38a!important}
.btn.rp-btn:hover{border-color:rgba(255,106,31,.45);background:rgba(255,106,31,.08)}
.tlist a{align-items:center}
.tl-dl{display:grid;place-items:center;width:24px;height:24px;margin-left:4px;flex:none;border-radius:7px;color:var(--mute2);opacity:0;transition:opacity .15s,color .15s,background .15s;cursor:pointer}
.tlist a:hover .tl-dl,.tlist a.on .tl-dl,.tl-dl:focus-visible{opacity:1}
.tl-dl:hover{color:#fff;background:rgba(59,99,255,.25)}
.dlf-check{display:flex;align-items:center;gap:9px;margin:8px 0 0;font-size:12.5px;color:var(--ink2);cursor:pointer}
.dlf-check input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.dlf input[name=confirm_live]{width:100%;margin:0;letter-spacing:.12em;font-weight:600}
.dl-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.dl-custom .dlf-sql h4{margin-top:18px}
@media (max-width:860px){ .tl-dl{opacity:1;width:20px;height:20px} }
@media (max-width:760px){
  .dg-extra{border-right:0;padding-right:0;width:100%;order:-1}
  .dg-tools{width:100%}
  .dl-acts .btn{width:100%;justify-content:center}
}
.tlist a>span:first-child{margin-right:auto}

/* Row selection (Download selected) */
.dg-ck{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin:0 6px 0 0;vertical-align:middle;cursor:pointer}
.dg-ck input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.dg-ck i{width:16px;height:16px;border-radius:5px;border:1.5px solid rgba(255,255,255,.22);background:rgba(0,0,0,.25);transition:.15s;display:grid;place-items:center}
.dg-ck:hover i{border-color:rgba(111,141,255,.8)}
.dg-ck input:checked + i{background:var(--blue);border-color:var(--blue);box-shadow:0 0 10px rgba(59,99,255,.6)}
.dg-ck input:checked + i::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.dg-ck input:indeterminate + i{background:var(--blue);border-color:var(--blue)}
.dg-ck input:indeterminate + i::after{content:"";width:8px;height:2px;background:#fff;border-radius:2px}
.dg-ck input:focus-visible + i{outline:2px solid rgba(59,99,255,.6);outline-offset:2px}
.dg table.grid th.rn,.dg table.grid td.rn{min-width:72px;width:72px;text-align:left;white-space:nowrap}
.dg table.grid td.rn .dg-rn{display:inline-block;min-width:22px;text-align:right}
.dg table.grid tbody tr.sel td{background:rgba(59,99,255,.10)!important}
.dg table.grid tbody tr.sel td.rn{box-shadow:inset 2px 0 0 var(--blue)!important}
.dg-selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px 8px 14px;border-radius:12px;
  background:linear-gradient(90deg,rgba(59,99,255,.16),rgba(59,99,255,.05));border:1px solid rgba(59,99,255,.35)}
.dg-selbar[hidden]{display:none}
.dg-selcount{font-size:13px;color:#cdd8ff}
.dg-selcount b{color:#fff;font-variant-numeric:tabular-nums}
.dg-selbar .btn.small{height:30px;min-height:30px;background:linear-gradient(180deg,#4f78ff,#2f55e6);box-shadow:0 6px 16px -8px rgba(59,99,255,.9)}
.dg-selhint{margin-left:auto}
.dlf-picked{margin:0 0 12px;padding:8px 12px;border-radius:10px;background:rgba(59,99,255,.12);border:1px solid rgba(59,99,255,.3);color:#cdd8ff;font-size:12.5px}
.dlf-picked b{color:#fff}
.dr-dl{margin:6px 0 14px}
.dr-dl .btn{width:100%;justify-content:center;background:linear-gradient(180deg,#4f78ff,#2f55e6);box-shadow:0 8px 20px -10px rgba(59,99,255,.85)}
@media (max-width:760px){ .dg-selhint{display:none} .dg-selbar .btn.small{flex:1;justify-content:center} }

/* Row download icon right after the row number */
.dg table.grid th.rn,.dg table.grid td.rn{min-width:100px;width:100px}
.dg-rdl{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:6px;padding:0;vertical-align:middle;border:0;border-radius:8px;
  background:rgba(59,99,255,.12);color:#8fa6ff;cursor:pointer;transition:background .15s,color .15s,transform .15s,box-shadow .15s}
.dg-rdl:hover{background:linear-gradient(180deg,#4f78ff,#2f55e6);color:#fff;box-shadow:0 6px 14px -6px rgba(59,99,255,.9);transform:translateY(-1px)}
.dg-rdl:focus-visible{outline:2px solid rgba(59,99,255,.6);outline-offset:1px}
.dg-rdl .i{stroke:currentColor}
.dg.dense .dg-rdl{width:22px;height:22px}
@media (max-width:760px){ .dg table.grid th.rn,.dg table.grid td.rn{min-width:92px;width:92px} }

/* Password show / hide */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:46px!important}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;
  background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,background .15s}
.pw-toggle:hover{color:#fff;background:rgba(255,255,255,.06)}
.pw-toggle:focus-visible{outline:2px solid rgba(59,99,255,.6)}
label .pw-wrap{margin-top:6px}
.pw-mask{letter-spacing:.08em}
.pw-mask.shown{letter-spacing:0;color:#fff}
.pw-when{display:block;margin-top:3px;font-size:11px}
.db-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* Optional write login for Repair */
.wlogin{margin:12px 0 0;border:1px solid var(--line2);border-radius:12px;background:var(--s2);padding:0 12px}
.wlogin summary{cursor:pointer;padding:10px 0;font-size:12.5px;font-weight:600;color:var(--ink2);list-style:none}
.wlogin summary::-webkit-details-marker{display:none}
.wlogin summary::before{content:"▸";display:inline-block;margin-right:7px;color:var(--muted);transition:transform .15s}
.wlogin[open] summary::before{transform:rotate(90deg)}
.wlogin[open]{padding-bottom:12px}
.wlogin .grid2{gap:10px}
.ssl-ca[hidden]{display:none!important}
.ssl-ca textarea{font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-height:90px}
.ssl-help{margin:-4px 0 6px}

/* Phones / tablets: nothing pinned when swiping sideways — the # / checkbox / download column scrolls away with the rest.
   (The header row still stays on top while scrolling down.) */
@media (max-width:860px){
  .dg table.grid th.rn,.dg table.grid td.rn,
  .rows td:first-child,.rows th:first-child{position:static!important;left:auto!important;box-shadow:none!important}
  .dg table.grid thead th.rn,.rows thead th:first-child{position:sticky!important;top:0;left:auto!important}
  .dg-scroll::before{display:none}
  .dg table.grid tbody tr.sel td.rn{box-shadow:inset 2px 0 0 var(--blue)!important}
}

/* =========================================================
   STICKY: page tab bar under the top header; side panels (History "Days", table lists) beside the content
   ========================================================= */
.tabs{position:sticky;top:var(--tb-h,0px);z-index:12;background:linear-gradient(180deg,rgba(9,9,11,.94),rgba(9,9,11,.86));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);transition:box-shadow .2s}
.tabs.stuck{box-shadow:inset 0 -1px 0 var(--line2),0 14px 24px -16px rgba(0,0,0,.9)}
.daycard{position:sticky;top:calc(var(--tb-h,0px) + var(--tabs-h,0px) + 14px);display:flex;flex-direction:column;
  max-height:calc(100vh - var(--tb-h,0px) - var(--tabs-h,0px) - 28px)}
.daycard .daylist{flex:1;min-height:0;max-height:none}
.explorer .tlist{top:calc(var(--tb-h,0px) + var(--tabs-h,0px) + 14px);max-height:calc(100vh - var(--tb-h,0px) - var(--tabs-h,0px) - 28px)}

/* Premium thin scrollbar with a gap from the content */
.daylist,.tlist .items,.dg-list,.rs-dd-list{scrollbar-width:thin;scrollbar-color:rgba(111,141,255,.45) transparent;scrollbar-gutter:stable;padding-right:6px}
.daylist::-webkit-scrollbar,.tlist .items::-webkit-scrollbar,.dg-list::-webkit-scrollbar,.rs-dd-list::-webkit-scrollbar{width:10px}
.daylist::-webkit-scrollbar-track,.tlist .items::-webkit-scrollbar-track,.dg-list::-webkit-scrollbar-track,.rs-dd-list::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.daylist::-webkit-scrollbar-thumb,.tlist .items::-webkit-scrollbar-thumb,.dg-list::-webkit-scrollbar-thumb,.rs-dd-list::-webkit-scrollbar-thumb{
  border:3px solid transparent;background-clip:padding-box;border-radius:10px;background-color:rgba(255,255,255,.14);min-height:40px}
.daylist:hover::-webkit-scrollbar-thumb,.tlist .items:hover::-webkit-scrollbar-thumb,.dg-list:hover::-webkit-scrollbar-thumb,.rs-dd-list:hover::-webkit-scrollbar-thumb{
  background-image:linear-gradient(180deg,#6f8dff,#3b63ff);background-color:transparent}

/* Day list: same active style as the rest (blue text + blue bar) */
.daylist a{position:relative}
.daylist a.on{background:rgba(59,99,255,.1);color:#8fa6ff;font-weight:600}
.daylist a.on small{color:#8fa6ff}
.daylist a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--blue);box-shadow:0 0 10px rgba(59,99,255,.7)}

/* Phones / tablets: normal page scrolling (not enough room for sticky panels) */
@media (max-width:860px){
  .daycard{position:static;max-height:none}
  .daycard .daylist{max-height:260px}
}
@media (max-width:760px){ .tabs{top:var(--tb-h,0px)} }
.daylist::-webkit-scrollbar-button,.tlist .items::-webkit-scrollbar-button,.dg-list::-webkit-scrollbar-button,.rs-dd-list::-webkit-scrollbar-button{display:none;width:0;height:0}