/* ============================================================
   Chase VPN — panel design system
   Dark theme · white type (accent only for emphasis)
   accent = oklch(85% .18 210)
   ============================================================ */

:root{
  --bg:#0a0b0d; --panel:#131418; --panel-2:#191a1f; --elev:#202229;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.15);
  --fg:#ffffff; --muted:rgba(255,255,255,.56); --faint:rgba(255,255,255,.40);
  --accent:#9eff00; --accent-2:#b2ff3a;
  --accent-fg:#0c1700; --accent-soft:rgba(158,255,0,.13);
  --accent-line:rgba(158,255,0,.36); --accent-glow:rgba(158,255,0,.5);
  --danger:oklch(68% .2 22); --danger-soft:oklch(68% .2 22 / .14);
  --danger-line:oklch(68% .2 22 / .42); --danger-glow:oklch(68% .2 22 / .5);
  --ok:oklch(76% .17 152); --ok-soft:oklch(76% .17 152 / .14);
  --ok-line:oklch(76% .17 152 / .42); --ok-glow:oklch(76% .17 152 / .5);
  --radius:16px; --radius-sm:10px; --radius-xs:8px;
  --shadow-card:0 1px 0 rgba(255,255,255,.025) inset, 0 18px 40px -28px rgba(0,0,0,.9);
  --mono:ui-monospace,"SF Mono","Cascadia Code","Cascadia Mono",Consolas,monospace;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--fg);
  font:14.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
  background:
    radial-gradient(1200px 560px at 82% -12%, oklch(85% .18 210 / .08), transparent 58%),
    radial-gradient(900px 500px at -10% 8%, oklch(80% .12 250 / .05), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--accent);text-decoration:none;transition:color .12s}
.brand,.btn,button{text-decoration:none}
/* ---- animated decorative background (modern CSS) ---- */
@property --aurora-shift{syntax:"<percentage>";inherits:false;initial-value:0%}
body::before,body::after{content:"";position:fixed;pointer-events:none}
/* masked dot-grid, fades toward edges (front-most bg layer) */
body::before{z-index:-1;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1.4px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(125% 95% at 50% -8%,#000 32%,transparent 76%);
  mask-image:radial-gradient(125% 95% at 50% -8%,#000 32%,transparent 76%)}
/* slow-drifting aurora orbs (back glow layer) */
body::after{z-index:-3;inset:-25%;filter:blur(46px);opacity:.7;
  background:
    radial-gradient(34% 42% at calc(20% + var(--aurora-shift)) 26%, rgba(158,255,0,.12), transparent 70%),
    radial-gradient(30% 38% at calc(82% - var(--aurora-shift)) 72%, oklch(70% .14 200 / .08), transparent 70%),
    radial-gradient(26% 32% at calc(60% + var(--aurora-shift)) 8%,  oklch(80% .12 250 / .06), transparent 70%);
  animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{from{--aurora-shift:0%}to{--aurora-shift:14%}}
/* concentric "signal" rings radiating from opposite corners */
.bg-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bg-fx::before,.bg-fx::after{content:"";position:absolute;inset:0}
.bg-fx::before{
  background:repeating-radial-gradient(circle at 100% -3%,
    transparent 0 60px, rgba(158,255,0,.05) 60px 61px);
  -webkit-mask-image:radial-gradient(62% 56% at 100% 0,#000,transparent 72%);
  mask-image:radial-gradient(62% 56% at 100% 0,#000,transparent 72%);
  animation:ringPulse 9s ease-in-out infinite}
.bg-fx::after{
  background:repeating-radial-gradient(circle at 0 103%,
    transparent 0 78px, oklch(72% .12 220 / .045) 78px 79px);
  -webkit-mask-image:radial-gradient(58% 54% at 0 100%,#000,transparent 72%);
  mask-image:radial-gradient(58% 54% at 0 100%,#000,transparent 72%);
  animation:ringPulse 13s ease-in-out infinite reverse}
@keyframes ringPulse{0%,100%{opacity:.4}50%{opacity:.85}}
@media(prefers-reduced-motion:reduce){
  body::after,.bg-fx::before,.bg-fx::after{animation:none}}
a:hover{color:var(--accent-2)}
::selection{background:var(--accent-soft);color:#fff}

/* ---- header ---- */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:14px clamp(16px,4vw,26px);
  border-bottom:1px solid var(--border);
  background:rgba(10,12,15,.66);backdrop-filter:saturate(140%) blur(14px)}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;
  letter-spacing:.2px;color:var(--fg)}
.brand .mark{color:var(--accent);display:flex;margin-left:4px;
  filter:drop-shadow(0 0 10px var(--accent-glow));transform-origin:center}
.brand .mark img,.login-mark img{display:block}
@keyframes brandPulse{
  0%,100%{filter:drop-shadow(0 0 5px var(--accent-soft));transform:scale(1)}
  50%{filter:drop-shadow(0 0 14px var(--accent-glow));transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.brand .mark{animation:none}}
.brand b{font-weight:700}
.brand .accent{color:var(--accent)}
nav.top{display:flex;align-items:center;gap:8px}

/* ---- layout ---- */
main{max-width:1060px;margin:0 auto;padding:30px clamp(16px,4vw,26px) 72px}
h1{font-size:clamp(20px,5vw,24px);font-weight:700;margin:0 0 5px;letter-spacing:.2px}
h2{font-size:11.5px;font-weight:600;margin:30px 0 13px;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.2px}
.sub{color:var(--muted);margin:0 0 22px;max-width:60ch}

.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  -webkit-backdrop-filter:blur(13px) saturate(125%);backdrop-filter:blur(13px) saturate(125%);
  border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  margin-bottom:18px;box-shadow:var(--shadow-card)}
.card.tight{padding:15px 17px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:15px}
.card-h h3{margin:0;font-size:15px;font-weight:650;letter-spacing:.1px}

/* ---- buttons ---- */
input,select,button,textarea{font:inherit}
button,.btn{display:inline-flex;align-items:center;gap:7px;justify-content:center;
  background:var(--accent);color:var(--accent-fg);border:1px solid transparent;
  border-radius:var(--radius-sm);padding:10px 16px;cursor:pointer;font-weight:650;
  letter-spacing:.2px;transition:filter .12s,background .12s,border-color .12s,
  color .12s,box-shadow .12s;white-space:nowrap}
button:hover,.btn:hover{background:var(--accent-2);
  box-shadow:0 6px 22px -10px var(--accent-glow)}
button:active,.btn:active{filter:brightness(.95);box-shadow:none}
.btn-ghost{background:transparent;border-color:var(--border-2);color:var(--fg);box-shadow:none}
.btn-ghost:hover{background:var(--elev);border-color:var(--border-2);box-shadow:none}
.btn-bad{background:transparent;border-color:var(--border-2);color:var(--fg);box-shadow:none}
.btn-bad:hover{background:var(--danger-soft);border-color:var(--danger-line);
  color:#fff;box-shadow:none}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:var(--radius-xs)}
.btn-eq{min-width:58px}
.ico-ext{flex:0 0 auto;transition:transform .15s ease}
.btn:hover .ico-ext{transform:translate(1.5px,-1.5px)}
.btn-eq-w{min-width:96px}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* back-button arrow icon (inline SVG) — clean borderless text link */
.btn-back{gap:7px;padding:6px 2px;font-weight:600;color:var(--muted);
  background:transparent;border:none;box-shadow:none}
.btn-back:hover{color:var(--accent);background:transparent;box-shadow:none}
.btn-back:active{filter:none}
.ico-back{flex:0 0 auto;transition:transform .16s ease}
.btn-back:hover .ico-back{transform:translateX(-3px)}

/* ---- inputs ---- */
input[type=text],input[type=password],input[type=number],select{
  background:var(--panel-2);border:1px solid var(--border);color:var(--fg);
  border-radius:var(--radius-sm);padding:10px 13px;outline:none;
  transition:border-color .12s,box-shadow .12s}
input::placeholder{color:var(--faint)}
input:focus,select:focus{border-color:var(--accent-line)}
select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
label.fld{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}

/* password field with soft show/hide eye */
.pwd-field{position:relative;display:flex;align-items:stretch}
.pwd-field input{flex:1;min-width:0;padding-right:46px}
.pwd-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;background:transparent;border:none;border-radius:8px;
  color:var(--faint);cursor:pointer;box-shadow:none;
  transition:color .15s,background .15s}
.pwd-toggle:hover{color:var(--fg);background:transparent}
.pwd-toggle:focus-visible{outline:none;color:var(--fg);
  box-shadow:0 0 0 2px var(--accent-line)}
.pwd-toggle svg{width:20px;height:20px;display:block;overflow:visible}
.pwd-toggle .eye-slash,.pwd-toggle .eye-cut{stroke-linecap:round;
  stroke-dasharray:26;stroke-dashoffset:0;
  transition:stroke-dashoffset .3s ease,opacity .3s ease}
.pwd-toggle .eye-cut{stroke:var(--panel-2);stroke-width:4}
.pwd-toggle .eye-slash{stroke:currentColor;stroke-width:2}
.pwd-toggle.shown .eye-slash,.pwd-toggle.shown .eye-cut{stroke-dashoffset:26;opacity:0}

/* ---- pretty checkbox ---- */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:21px;height:21px;border-radius:7px;cursor:pointer;position:relative;
  border:1.5px solid var(--border-2);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),var(--panel-2);
  transition:background .16s,border-color .16s,box-shadow .16s,transform .08s}
input[type=checkbox]:hover{border-color:var(--accent-line)}
input[type=checkbox]:active{transform:scale(.92)}
input[type=checkbox]:checked{border-color:var(--accent);
  background:var(--accent)
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.6%206.3L4.9%208.6L9.4%203.6'%20fill='none'%20stroke='%230c1700'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E")
    center/72% no-repeat}
input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
input[type=checkbox]:indeterminate{border-color:var(--accent);
  background:var(--accent)
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cline%20x1='3.2'%20y1='6'%20x2='8.8'%20y2='6'%20stroke='%230c1700'%20stroke-width='1.9'%20stroke-linecap='round'/%3E%3C/svg%3E")
    center/72% no-repeat}

/* tappable cell wrapper for matrix checkboxes */
.ckcell{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  padding:9px;border-radius:10px;transition:background .12s}
/* column header: label on top, select-all checkbox centered below the column */
.colhead{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  margin:0;font-size:inherit;letter-spacing:inherit}
.ckcell:hover{background:rgba(255,255,255,.03)}
table.responsive tbody tr:has(input:checked){border-color:var(--accent-line)}

/* ---- table ---- */
.tablewrap{margin:-4px 0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 11px;border-bottom:1px solid var(--border);
  vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.8px}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s}
tbody tr:hover{background:rgba(255,255,255,.02)}
td.tight{width:1%;white-space:nowrap}
.cellname{font-weight:600}
.loc{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;white-space:nowrap}
.flag{display:inline-block;width:21px;height:14px;border-radius:3px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);flex:0 0 auto;line-height:0}
.flag svg{display:block}
.namelink{color:var(--fg);font-weight:600}
.namelink:hover{color:var(--accent)}
.namecell{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.presence{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  color:var(--muted);margin-top:4px;text-transform:none;letter-spacing:0}
.presence::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  flex:0 0 auto}
.presence.online{color:var(--ok)}
.presence.online::before{animation:dotPing 1.9s ease-out infinite}
.presence.offline{color:var(--faint)}
.cellsub{color:var(--faint);font-size:11.5px;margin-top:2px}

/* ---- pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:0;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  line-height:1.5;border:none;background:transparent;color:var(--muted);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  flex:0 0 auto;position:relative;top:-1px}
.pill.on{color:var(--ok)}
.pill.on::before{animation:dotPing 1.9s ease-out infinite}
.pill.off{color:var(--muted)}
.pill.off::before{opacity:.5}
.pill.exp{color:var(--danger)}
.pill.exp::before{box-shadow:0 0 7px var(--danger-glow)}
@keyframes dotPing{
  0%{box-shadow:0 0 0 0 var(--ok-glow)}
  70%{box-shadow:0 0 0 6px transparent}
  100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){
  .pill.on::before{animation:none;box-shadow:0 0 7px var(--ok-glow)}}

/* segmented mode control */
.seg{display:inline-flex;gap:0;padding:3px;border:1px solid var(--border);
  border-radius:11px;background:var(--panel-2)}
.seg form{display:inline;margin:0}
.mode{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:8px;
  font-size:12px;font-weight:600;border:1px solid transparent;color:var(--muted);
  background:transparent;cursor:pointer;transition:all .14s;box-shadow:none}
.mode:hover{color:var(--fg);background:rgba(255,255,255,.04)}
.mode.activm{color:var(--accent-fg);background:var(--accent);box-shadow:none}
.mode.activm:hover{background:var(--accent);color:var(--accent-fg)}

/* ---- helpers ---- */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.accent{color:var(--accent)}
.mono{font-family:var(--mono);font-size:12.5px}
.forever{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--muted)}
.forever svg{color:var(--accent);flex:0 0 auto}
form.inline{display:inline}
.err{color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger-line);
  border-radius:var(--radius-sm);padding:10px 13px;margin:0 0 14px;font-size:13px}

/* ---- stat cards ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;
  margin-bottom:22px}
.stat{position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014));
  -webkit-backdrop-filter:blur(13px) saturate(125%);backdrop-filter:blur(13px) saturate(125%);
  border:1px solid var(--border);border-radius:var(--radius);padding:17px 18px;
  box-shadow:var(--shadow-card)}
.stat::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(200px 170px at 100% -12%, var(--accent-soft), transparent 70%)}
.stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted);
  font-weight:600}
.stat .v{font-size:30px;font-weight:700;margin-top:6px;letter-spacing:.4px;
  line-height:1;display:flex;align-items:baseline;gap:2px}
.stat .v small{font-size:15px;font-weight:500;color:var(--faint)}
.stat .v .hot{color:var(--accent)}

/* ---- copy field ---- */
.copyfield{display:flex;align-items:stretch;gap:8px}
.copyfield code{flex:1;display:flex;align-items:center;background:var(--panel-2);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 13px;
  min-height:38px;word-break:break-all;font-family:var(--mono);font-size:12.5px;
  color:var(--fg);min-width:0}
[data-copy]{flex:0 0 auto}
[data-copy].ok{background:var(--accent);color:var(--accent-fg);border-color:transparent}

/* ---- QR ---- */
.qrwrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.qr{background:#fff;border-radius:14px;padding:11px;line-height:0;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--border),0 14px 30px -18px rgba(0,0,0,.8)}
.qr img,.qr svg{display:block;width:150px;height:150px}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--elev);border:1px solid var(--accent-line);color:var(--fg);
  padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:50;
  box-shadow:0 10px 34px rgba(0,0,0,.55)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- subscription activity card ---- */
.actgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.actitem{background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 15px}
.actitem .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--muted);font-weight:600}
.actitem .v{font-size:14.5px;font-weight:650;margin-top:7px;letter-spacing:.2px}
.actitem .v.big{font-size:26px;line-height:1.1}
.actitem .v.big .hot{color:var(--accent)}
.actitem .v.dim{color:var(--faint);font-weight:600}
.actitem .v .faint{font-weight:500;font-size:12px}

/* ============================================================
   Responsive — tables collapse to cards on narrow screens
   ============================================================ */
@media(max-width:680px){
  th.hide-sm,td.hide-sm{display:none}

  table.responsive thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  table.responsive,table.responsive tbody{display:block}
  table.responsive tr{display:grid;grid-template-columns:1fr;gap:2px;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    background:var(--panel-2);padding:6px 4px;margin-bottom:12px}
  table.responsive tr:hover{background:var(--panel-2)}
  table.responsive tr:last-child{margin-bottom:0}
  table.responsive td{display:flex;align-items:center;justify-content:space-between;
    gap:14px;border:none;padding:9px 14px;width:auto}
  table.responsive td::before{content:attr(data-label);color:var(--muted);
    font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;
    flex:0 0 auto}
  table.responsive td.tight{width:auto}
  table.responsive td.tight .row{justify-content:flex-end;width:100%;flex-wrap:wrap}
  table.responsive td.actioncell{border-top:1px solid var(--border);margin-top:2px;
    padding-top:12px}
  table.responsive td.actioncell::before{display:none}
}