:root{--bg:#070912;--panel:#111626;--panel2:#171e33;--line:#27304a;--text:#f6f8ff;--muted:#8f99b3;--a:#6677ff;--b:#48d7f0;--good:#3ed291;--bad:#ff667e;--warn:#ffc35a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% -10%,#28306f 0,transparent 30%),var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,sans-serif}.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}aside{position:sticky;top:0;height:100vh;padding:24px 16px;border-right:1px solid var(--line);background:#090c16dd;backdrop-filter:blur(18px);display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;margin:4px 8px 32px}.brand span{display:block;color:var(--muted);font-size:12px}.logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:25px;background:linear-gradient(145deg,var(--b),var(--a));box-shadow:0 15px 45px #6677ff55}.logo.sm{width:42px;height:42px;border-radius:13px;font-size:18px}nav{display:grid;gap:8px;flex:1}.nav{border:0;background:transparent;color:var(--muted);padding:12px 14px;border-radius:12px;text-align:left;cursor:pointer}.nav:hover,.nav.active{background:var(--panel2);color:#fff}.nav.exit:hover{color:var(--bad)}main{padding:32px;max-width:1500px;width:100%;margin:auto}header,.head,.hero,.actions,.inline{display:flex;align-items:center;justify-content:space-between;gap:14px}header{margin-bottom:24px}h1,h2,h3{margin:.3rem 0}.kicker{font-size:11px;letter-spacing:.17em;color:#7f8aab;font-weight:800}.state{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:10px 14px;border-radius:999px;background:var(--panel)}.state i{width:9px;height:9px;border-radius:50%}.state.on i{background:var(--good);box-shadow:0 0 18px var(--good)}.state.off i{background:var(--bad);box-shadow:0 0 18px var(--bad)}.tab{display:none}.tab.active{display:block}.panel{background:linear-gradient(145deg,#171d30f5,#0e1220f5);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 22px 60px #0006}.hero{min-height:170px;margin-bottom:18px;background:linear-gradient(120deg,#1b2255,#111626 68%)}.hero p,.panel p{color:var(--muted);line-height:1.6}.btn,.mini{border:1px solid var(--line);background:#202841;color:#fff;padding:11px 15px;border-radius:12px;text-decoration:none;cursor:pointer}.mini{padding:8px 12px;font-size:13px}.btn.primary{background:linear-gradient(135deg,var(--a),#8a5cff);border:0}.btn.good{background:#173c30;color:#6ceab0}.btn.warn{background:#43341c;color:#ffd17d}.btn.bad{background:#431f2a;color:#ff8a9b}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px}.stat span,.conn span,.details span{color:var(--muted);font-size:13px}.stat strong{display:block;font-size:28px;margin:12px 0 4px}.stat small{color:#69738f}.grid2{display:grid;grid-template-columns:1.45fr .75fr;gap:18px;margin-bottom:18px}.conn{display:grid;grid-template-columns:2fr .7fr 2fr;gap:10px;margin:22px 0}.conn div,.details div,.env div{background:#0a0e19;border:1px solid var(--line);border-radius:13px;padding:14px}.conn b,.details b,.env b{display:block;margin-top:7px;overflow:hidden;text-overflow:ellipsis}.link{background:#090d17;border:1px dashed #35405f;border-radius:13px;padding:14px;word-break:break-all;color:#b6c0df;margin-bottom:16px}.qr{display:flex;align-items:center;justify-content:space-between}.qr img{width:180px;background:#fff;border-radius:16px;padding:10px}.details{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.narrow{max-width:760px}.form{display:grid;gap:16px;margin-top:22px}.form label{display:grid;gap:8px;color:#c0c8db;font-size:14px}input,textarea,select{width:100%;background:#090d17;border:1px solid var(--line);color:#fff;border-radius:11px;padding:12px;outline:none}.inline{display:grid;grid-template-columns:1fr auto}.inline input{border-radius:11px 0 0 11px}.inline .mini{border-radius:0 11px 11px 0}pre{background:#070a11;border:1px solid var(--line);border-radius:14px;padding:18px;min-height:520px;max-height:70vh;overflow:auto;white-space:pre-wrap;color:#b8c5e8;font:13px/1.55 ui-monospace,Consolas,monospace}.env{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);background:#111626ee;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:0 35px 90px #0008}.login-card .logo{margin-bottom:24px}.login-card p{color:var(--muted)}.alert{padding:12px 14px;border-radius:12px;margin:16px 0}.alert.bad{background:#431f2a;color:#ff98a7}#toast{position:fixed;right:24px;bottom:24px;max-width:420px;background:#1b2236;border:1px solid var(--line);padding:14px 18px;border-radius:12px;opacity:0;transform:translateY(15px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}#testResult{margin-top:12px;color:var(--muted)}@media(max-width:1000px){.shell{grid-template-columns:1fr}aside{position:relative;height:auto;flex-direction:row;align-items:center;overflow:auto}.brand{margin:0 18px 0 0}nav{display:flex}.stats{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.details{grid-template-columns:repeat(2,1fr)}main{padding:20px}}@media(max-width:650px){aside{display:block}.brand{margin-bottom:14px}nav{overflow:auto}header,.head,.hero{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr 1fr}.conn,.details,.env{grid-template-columns:1fr}.qr{flex-direction:column;align-items:flex-start}main{padding:14px}.panel{padding:18px}.actions{flex-wrap:wrap}.actions .btn{flex:1}}

.nav{display:flex;align-items:center;gap:11px;position:relative;overflow:hidden;font-weight:650;transition:transform .16s ease,background .16s ease,color .16s ease}
.nav svg{width:19px;height:19px;flex:0 0 19px;fill:currentColor;opacity:.78;transition:opacity .16s ease,transform .16s ease}
.nav:hover{transform:translateX(3px)}
.nav:hover svg,.nav.active svg{opacity:1;transform:scale(1.08)}
.nav.active{background:linear-gradient(135deg,#29335b,#1b2340);box-shadow:inset 3px 0 0 var(--b),0 8px 24px #0003}
.nav.active:after{content:"";position:absolute;right:10px;width:6px;height:6px;border-radius:50%;background:var(--b);box-shadow:0 0 12px var(--b)}
.brand b{font-size:17px;letter-spacing:.02em}

.logo.sm{font-size:13px;letter-spacing:-.02em}.control-actions .btn{min-width:145px}.btn:disabled{opacity:.45;cursor:wait;filter:saturate(.5)}.details .wide{grid-column:span 2}.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.charts-grid .full{grid-column:1/-1}.charts-grid canvas{width:100%;height:260px;display:block;margin-top:18px}.log-tools{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:14px;align-items:center;margin-top:18px}.check{display:flex;align-items:center;gap:8px;color:var(--muted);white-space:nowrap}.check input{width:auto}.link-btn{display:inline-flex;align-items:center;text-decoration:none}.nav span{white-space:nowrap}@media(max-width:800px){.charts-grid{grid-template-columns:1fr}.charts-grid .full{grid-column:auto}.log-tools{grid-template-columns:1fr}.details .wide{grid-column:auto}}

.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px}.users-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.user-card{display:grid;gap:16px}.user-top{display:flex;justify-content:space-between;align-items:flex-start}.badge{padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800}.badge.green{background:#153d2e;color:#64e8a8}.badge.red{background:#431e2b;color:#ff8497}.user-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.user-meta div,.traffic div{background:#090d17;border:1px solid var(--line);border-radius:12px;padding:11px}.user-meta span,.traffic span{color:var(--muted);font-size:12px}.user-meta b,.traffic b{display:block;margin-top:5px}.traffic{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.user-actions{display:flex;gap:8px;flex-wrap:wrap}.good-btn{color:#65e9aa!important}.warn-btn{color:#ffd17d!important}.bad-btn{color:#ff8295!important}.modal{position:fixed;inset:0;background:#03050bc9;display:none;place-items:center;padding:20px;z-index:20}.modal.show{display:grid}.modal-card{position:relative;width:min(520px,100%);background:#111626;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 30px 100px #000}.close{position:absolute;right:14px;top:10px;background:transparent;color:#fff;border:0;font-size:28px;cursor:pointer}.qr-modal{text-align:center}.qr-modal img{width:280px;max-width:100%;background:#fff;padding:12px;border-radius:16px}.table-wrap{overflow:auto;margin-top:18px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:#8f99b3;font-size:12px;text-transform:uppercase}.empty{text-align:center;color:var(--muted);grid-column:1/-1}@media(max-width:1100px){.users-grid{grid-template-columns:1fr}.summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.summary{grid-template-columns:1fr 1fr}.user-meta{grid-template-columns:1fr 1fr}.traffic{grid-template-columns:1fr}}

aside nav{display:flex!important;flex-direction:column;gap:10px}
aside .nav{height:56px;min-height:56px;max-height:56px;flex:0 0 56px;padding:0 14px}
aside form .nav{width:100%}
.traffic-periods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.traffic-periods>div{background:#090d17;border:1px solid var(--line);border-radius:14px;padding:16px}
.traffic-periods span,.period-table span{color:var(--muted);font-size:13px}
.traffic-periods strong{display:block;font-size:24px;margin:8px 0}
.traffic-periods small{color:#6f7a98}
.traffic{grid-template-columns:repeat(4,1fr)}
.period-table{display:grid;gap:0;margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.period-table>div{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:14px;padding:14px 16px;background:#090d17;border-bottom:1px solid var(--line)}
.period-table>div:last-child{border-bottom:0}
.period-table>div:first-child{background:#12182a}
.sponsor-card{display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;max-width:920px}
.sponsor-icon{width:64px;height:64px;border-radius:18px;background:#4b351a;color:#ffd17d;display:grid;place-items:center;font-size:34px;font-weight:900}
.compat-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.unsupported{color:#ff8295}
.resources-summary{margin-bottom:18px}
@media(max-width:1100px){.traffic-periods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.traffic-periods{grid-template-columns:1fr}.traffic{grid-template-columns:1fr 1fr}.period-table>div{grid-template-columns:1fr 1fr}.sponsor-card{grid-template-columns:1fr}}

/* ===== PFusion v5 visual system ===== */
:root{
  --bg:#070912;
  --panel:#101525;
  --panel-strong:#151b2e;
  --line:#26304a;
  --text:#f7f9ff;
  --muted:#8e99b5;
  --a:#6c7cff;
  --b:#54d9ff;
  --violet:#9b6dff;
  --good:#3ed291;
  --bad:#ff667e;
  --warn:#ffc35a;
}
body{
  background:
    radial-gradient(circle at 78% -8%,rgba(103,116,255,.24),transparent 31%),
    radial-gradient(circle at 12% 95%,rgba(85,217,255,.09),transparent 28%),
    var(--bg);
}
main{max-width:1580px;padding:38px 42px}
.panel{
  background:
    linear-gradient(145deg,rgba(24,30,50,.94),rgba(12,16,29,.97));
  border:1px solid rgba(120,138,190,.21);
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
}
header h1{font-size:34px;letter-spacing:-.035em}
.btn.primary{
  background:linear-gradient(135deg,#6577ff,#925fff);
  box-shadow:0 12px 30px rgba(108,124,255,.26);
}
.user-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.user-card:hover{transform:translateY(-3px);border-color:rgba(95,218,255,.34);box-shadow:0 28px 80px rgba(0,0,0,.42)}
.summary .stat strong{font-size:30px;letter-spacing:-.035em}
.traffic-periods>div{transition:transform .18s ease,border-color .18s ease}
.traffic-periods>div:hover{transform:translateY(-2px);border-color:rgba(108,124,255,.5)}
aside{
  background:linear-gradient(180deg,rgba(8,11,21,.98),rgba(7,9,18,.96));
  box-shadow:18px 0 60px rgba(0,0,0,.18);
}
.brand .logo{background:linear-gradient(145deg,#55dbff,#6d74ff 65%,#9d6aff)}
.brand b{font-size:18px}
.nav{border:1px solid transparent}
.nav:hover{border-color:rgba(125,143,195,.14)}
.nav.active{
  background:linear-gradient(135deg,rgba(52,65,111,.9),rgba(26,34,64,.94));
  border-color:rgba(100,219,255,.14);
  box-shadow:inset 3px 0 0 #55dcff,0 12px 28px rgba(0,0,0,.2);
}

/* ===== Login page ===== */
.auth-page{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 17% 17%,rgba(96,118,255,.2),transparent 27%),
    radial-gradient(circle at 83% 82%,rgba(74,216,255,.13),transparent 25%),
    linear-gradient(135deg,#070912,#0a0e1b 52%,#080b15);
  display:grid;
  place-items:center;
  padding:42px;
}
.auth-grid{
  position:absolute;
  inset:0;
  opacity:.23;
  background-image:
    linear-gradient(rgba(115,130,178,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(115,130,178,.08) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.auth-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.auth-orb-one{width:360px;height:360px;left:-160px;top:-120px;background:radial-gradient(circle,rgba(96,112,255,.26),transparent 67%)}
.auth-orb-two{width:480px;height:480px;right:-190px;bottom:-190px;background:radial-gradient(circle,rgba(70,219,255,.17),transparent 68%)}
.auth-shell{
  position:relative;
  z-index:2;
  width:min(1180px,100%);
  min-height:680px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  border:1px solid rgba(135,150,202,.18);
  border-radius:34px;
  overflow:hidden;
  background:rgba(9,12,23,.74);
  backdrop-filter:blur(24px);
  box-shadow:0 50px 150px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.035);
}
.auth-showcase{
  padding:52px 58px;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(145deg,rgba(29,37,76,.77),rgba(11,16,31,.84)),
    radial-gradient(circle at 15% 15%,rgba(93,223,255,.12),transparent 32%);
  border-right:1px solid rgba(130,145,195,.17);
}
.auth-brand{display:flex;align-items:center;gap:14px}
.auth-brand b{display:block;font-size:20px}
.auth-brand small{color:#8692b0}
.auth-logo{
  width:54px;height:54px;border-radius:17px;
  display:flex;align-items:center;justify-content:center;gap:1px;
  font-weight:900;font-size:14px;
  background:linear-gradient(145deg,#54dfff,#6876ff 62%,#9a65ff);
  box-shadow:0 15px 42px rgba(93,116,255,.35);
}
.auth-copy{margin:auto 0}
.auth-eyebrow{display:flex;align-items:center;gap:10px;color:#9aa7c7;font-size:11px;letter-spacing:.18em;font-weight:800}
.auth-eyebrow i{width:28px;height:2px;background:linear-gradient(90deg,#55ddff,#7d6cff)}
.auth-copy h1{font-size:52px;line-height:1.04;letter-spacing:-.052em;max-width:560px;margin:20px 0}
.auth-copy p{font-size:17px;line-height:1.75;color:#9ba6c0;max-width:560px}
.auth-features{display:grid;gap:12px}
.auth-features>div{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border:1px solid rgba(128,145,196,.16);
  border-radius:15px;background:rgba(8,12,24,.34);
}
.auth-features b{display:block;font-size:14px}
.auth-features small{color:#7f8ba7}
.feature-icon{
  width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;
  border-radius:11px;background:rgba(101,119,255,.15);color:#84dfff;font-size:11px;font-weight:900
}
.auth-card-wrap{display:grid;place-items:center;padding:48px}
.auth-card{width:min(410px,100%)}
.auth-card-head{display:flex;align-items:center;gap:15px;margin-bottom:30px}
.auth-card-head h2{font-size:30px;letter-spacing:-.035em;margin:4px 0}
.auth-card-head p{margin:0;color:#8f9ab6}
.auth-card-kicker{font-size:10px;letter-spacing:.17em;color:#7784a5;font-weight:900}
.auth-mini-logo{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:0 0 52px;
  background:linear-gradient(145deg,#54ddff,#6976ff 65%,#9668ff);font-size:13px;font-weight:900;
  box-shadow:0 13px 35px rgba(100,116,255,.28)
}
.auth-form{display:grid;gap:20px}
.auth-form label>span{display:block;color:#b9c2d7;font-size:13px;font-weight:700;margin-bottom:8px}
.auth-input{position:relative}
.auth-input svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;fill:#7683a4
}
.auth-input input{
  height:54px;padding-left:46px;border-radius:14px;
  background:rgba(7,10,19,.75);border:1px solid rgba(126,143,192,.22);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease
}
.auth-input input:focus{
  border-color:#6f80ff;background:#0b1020;
  box-shadow:0 0 0 4px rgba(108,124,255,.12),0 12px 28px rgba(0,0,0,.18)
}
.auth-submit{
  height:56px;border:0;border-radius:14px;color:white;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,#6578ff,#925fff);
  box-shadow:0 15px 35px rgba(105,117,255,.3);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease
}
.auth-submit:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 20px 45px rgba(105,117,255,.38)}
.auth-submit svg{width:19px;height:19px;fill:currentColor}
.auth-security{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:22px;color:#75819e;font-size:12px}
.auth-security i{width:7px;height:7px;border-radius:50%;background:#3ed291;box-shadow:0 0 12px #3ed291}
.auth-error{
  padding:13px 15px;margin-bottom:18px;border:1px solid rgba(255,102,126,.24);
  border-radius:13px;background:rgba(104,24,43,.33);color:#ff9caf;font-size:13px
}
@media(max-width:900px){
  .auth-page{padding:20px}
  .auth-shell{grid-template-columns:1fr;max-width:620px}
  .auth-showcase{display:none}
  .auth-card-wrap{padding:48px 28px}
}
@media(max-width:540px){
  .auth-page{padding:12px}
  .auth-shell{border-radius:24px;min-height:auto}
  .auth-card-wrap{padding:34px 22px}
  .auth-card-head h2{font-size:25px}
}

.primary-mini{background:linear-gradient(135deg,rgba(101,119,255,.3),rgba(146,95,255,.25));border-color:rgba(117,132,255,.34)}
.section-note{margin:5px 0 0!important;font-size:13px}
.secret-row{display:grid;grid-template-columns:1fr auto}
.secret-row input{border-radius:11px 0 0 11px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em}
.secret-row button{border-radius:0 11px 11px 0}
.field-help,.modal-note{display:block;color:var(--muted);line-height:1.55}
.client-modal{padding:28px}
.client-detail-card{width:min(1120px,100%);max-height:92vh;overflow:auto}
.client-detail-head,.client-history-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.client-detail-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:22px 0}
.client-detail-stats>div{background:#090d17;border:1px solid var(--line);border-radius:13px;padding:13px}
.client-detail-stats span,.client-link-block>span{color:var(--muted);font-size:12px}
.client-detail-stats b{display:block;margin-top:6px}
.client-link-block{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-bottom:24px}
.client-link-block>span{grid-column:1/-1}
.client-link-block .link{margin:0}
.client-history-head{margin-top:10px}
.history-count{min-width:34px;height:34px;padding:0 10px;border-radius:999px;display:grid;place-items:center;background:rgba(101,119,255,.17);color:#aeb8ff;font-weight:800}
.client-history-table{max-height:390px;overflow:auto;border:1px solid var(--line);border-radius:14px}
.client-history-table table{margin:0}
.client-link-button{border:0;background:transparent;color:#8fe5ff;font:inherit;font-weight:750;cursor:pointer;padding:0}
.client-link-button:hover{text-decoration:underline}
@media(max-width:1000px){.client-detail-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.client-detail-stats{grid-template-columns:1fr 1fr}.client-link-block{grid-template-columns:1fr}.client-modal{padding:10px}}

.ip-value{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:9px;
  background:rgba(84,217,255,.08);
  border:1px solid rgba(84,217,255,.15);
  color:#9be9ff;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-weight:750;
}
.client-history-head .section-note{margin-top:5px!important}

/* Compact dashboard cards */
.summary .panel.stat{
  min-height:104px;
  padding:16px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.summary .stat strong{
  font-size:27px;
  margin:6px 0 2px;
}
.summary .stat small{
  line-height:1.25;
}
.traffic-periods>div{
  min-height:88px;
  padding:12px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.traffic-periods strong{
  font-size:21px;
  margin:5px 0 2px;
}
.traffic-periods small{
  line-height:1.2;
}

/* ===== PFusion v9 refined interface ===== */
:root{
  --panel-glass:rgba(17,23,40,.86);
  --panel-deep:rgba(8,12,23,.92);
  --stroke:rgba(130,148,202,.20);
  --stroke-bright:rgba(102,219,255,.28);
  --glow-blue:rgba(84,217,255,.12);
  --glow-violet:rgba(116,105,255,.16);
}

body{
  background:
    radial-gradient(circle at 76% -12%,rgba(105,113,255,.27),transparent 31%),
    radial-gradient(circle at 10% 100%,rgba(67,213,255,.09),transparent 28%),
    linear-gradient(145deg,#070912,#090d18 50%,#070a13);
}

main{
  padding:32px 38px;
}

header{
  margin-bottom:20px;
}

header h1{
  font-size:32px;
  text-shadow:0 8px 35px rgba(108,124,255,.14);
}

.panel{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(22,28,48,.93),rgba(10,14,26,.96));
  border:1px solid var(--stroke);
  box-shadow:
    0 20px 55px rgba(0,0,0,.31),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.panel:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 24%);
}

.summary{
  gap:14px;
  margin-bottom:14px;
}

/* Ещё минус ~20% от v8 */
.summary .panel.stat{
  min-height:82px;
  padding:11px 18px;
  border-radius:17px;
}

.summary .stat span{
  font-size:12px;
  letter-spacing:.01em;
}

.summary .stat strong{
  font-size:24px;
  line-height:1.05;
  margin:4px 0 1px;
}

.summary .stat small{
  font-size:11px;
  line-height:1.1;
}

.traffic-periods{
  gap:10px;
  padding:14px;
  margin-bottom:14px;
  border-radius:18px;
}

.traffic-periods>div{
  min-height:70px;
  padding:9px 13px;
  border-radius:12px;
  background:
    linear-gradient(145deg,rgba(10,15,28,.96),rgba(8,12,22,.88));
  border:1px solid rgba(120,139,192,.18);
}

.traffic-periods>div:hover{
  transform:translateY(-2px);
  border-color:rgba(90,218,255,.34);
  box-shadow:0 12px 28px rgba(0,0,0,.22),0 0 24px rgba(84,217,255,.05);
}

.traffic-periods span{
  font-size:11px;
}

.traffic-periods strong{
  font-size:19px;
  line-height:1.05;
  margin:4px 0 1px;
}

.traffic-periods small{
  font-size:10px;
  line-height:1.05;
}

/* Sidebar */
aside{
  width:auto;
  background:
    linear-gradient(180deg,rgba(9,12,22,.99),rgba(6,9,17,.98));
  border-right:1px solid rgba(114,132,184,.19);
}

.brand{
  padding:5px 4px 20px;
}

.brand .logo{
  box-shadow:
    0 14px 36px rgba(99,118,255,.32),
    inset 0 1px 0 rgba(255,255,255,.2);
}

aside .nav{
  height:52px;
  min-height:52px;
  max-height:52px;
  border-radius:13px;
  font-size:13px;
}

.nav.active{
  background:
    linear-gradient(135deg,rgba(52,67,115,.88),rgba(24,32,61,.94));
  box-shadow:
    inset 3px 0 0 #55dcff,
    0 10px 30px rgba(0,0,0,.23),
    0 0 24px rgba(84,217,255,.04);
}

/* Client cards */
.users-grid{
  gap:14px;
}

.user-card{
  gap:13px;
  padding:20px;
  border-radius:19px;
}

.user-card:hover{
  transform:translateY(-4px);
  border-color:rgba(90,218,255,.34);
  box-shadow:
    0 28px 75px rgba(0,0,0,.38),
    0 0 34px rgba(84,217,255,.045);
}

.user-top h3{
  font-size:21px;
}

.user-meta,
.traffic{
  gap:7px;
}

.user-meta div,
.traffic div{
  padding:10px 11px;
  border-radius:11px;
  background:
    linear-gradient(145deg,rgba(8,12,23,.96),rgba(10,15,28,.9));
  border-color:rgba(121,141,195,.18);
}

.user-meta span,
.traffic span{
  font-size:11px;
}

.user-meta b,
.traffic b{
  margin-top:4px;
  font-size:15px;
}

.link{
  border-color:rgba(90,218,255,.2);
  background:rgba(7,11,20,.84);
  box-shadow:inset 0 0 22px rgba(84,217,255,.025);
}

.user-actions{
  gap:7px;
}

.mini{
  min-height:34px;
  padding:7px 11px;
  border-radius:10px;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.mini:hover{
  transform:translateY(-1px);
  border-color:rgba(110,135,210,.42);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.primary-mini{
  background:linear-gradient(135deg,rgba(91,111,255,.42),rgba(141,89,255,.33));
  border-color:rgba(126,137,255,.4);
}

/* Buttons */
.btn{
  transition:
    transform .17s ease,
    filter .17s ease,
    box-shadow .17s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn.primary{
  box-shadow:
    0 14px 32px rgba(104,116,255,.28),
    inset 0 1px 0 rgba(255,255,255,.15);
}

/* Tables */
.table-wrap{
  border-radius:16px;
}

table{
  border-collapse:separate;
  border-spacing:0;
}

thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#12182a;
  color:#98a5c5;
  letter-spacing:.035em;
}

tbody tr{
  transition:background .15s ease;
}

tbody tr:hover{
  background:rgba(94,116,180,.07);
}

th,td{
  padding:11px 13px;
}

/* Modal */
.modal{
  backdrop-filter:blur(9px);
}

.modal-card{
  background:
    linear-gradient(145deg,rgba(20,27,47,.98),rgba(9,13,24,.99));
  border:1px solid rgba(126,146,201,.24);
  box-shadow:
    0 40px 120px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.client-detail-card{
  border-radius:24px;
}

.client-detail-stats{
  gap:8px;
}

.client-detail-stats>div{
  padding:11px 12px;
  background:linear-gradient(145deg,rgba(8,12,22,.95),rgba(11,16,29,.9));
}

.ip-value{
  box-shadow:inset 0 0 18px rgba(84,217,255,.035);
}

/* Badges */
.badge{
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.badge.green{
  border-color:rgba(62,210,145,.15);
  box-shadow:0 0 18px rgba(62,210,145,.06);
}

.badge.red{
  border-color:rgba(255,102,126,.14);
}

/* Resource page */
.period-table{
  box-shadow:inset 0 0 30px rgba(84,217,255,.018);
}

@media(max-width:1000px){
  main{padding:24px 22px}
}

@media(max-width:650px){
  main{padding:14px}
  .summary .panel.stat{
    min-height:76px;
    padding:10px 13px;
  }
  .summary .stat strong{font-size:21px}
  .traffic-periods{padding:10px}
  .traffic-periods>div{
    min-height:64px;
    padding:8px 11px;
  }
}

/* ===== PFusion v10 layout/performance refinements ===== */
main{
  padding-top:16px!important;
}

header{
  margin-top:0!important;
  margin-bottom:14px!important;
  min-height:58px;
}

header h1{
  margin-top:2px;
  margin-bottom:0;
}

.kicker{
  line-height:1.1;
}

.tab.active{
  animation:tabFade .16s ease-out;
}

@keyframes tabFade{
  from{opacity:.72;transform:translateY(3px)}
  to{opacity:1;transform:none}
}

.sidebar,
aside{
  padding-top:14px;
}

.brand{
  margin-top:0!important;
  margin-bottom:18px!important;
  padding-top:0!important;
}

.summary{
  margin-top:0;
}

.panel{
  contain:layout paint;
}

.user-card{
  content-visibility:auto;
  contain-intrinsic-size:420px;
}

.table-wrap{
  content-visibility:auto;
}

.modal.show{
  animation:modalFade .14s ease-out;
}

.modal.show .modal-card{
  animation:modalCardIn .18s ease-out;
}

@keyframes modalFade{
  from{opacity:0}
  to{opacity:1}
}

@keyframes modalCardIn{
  from{opacity:.75;transform:translateY(10px) scale(.99)}
  to{opacity:1;transform:none}
}

@media(max-width:1000px){
  main{padding-top:12px!important}
}

@media(max-width:650px){
  main{padding-top:8px!important}
  header{margin-bottom:10px!important}
}

/* ===== PFusion v11 top-aligned layout and branding ===== */
html,body{
  min-height:100%;
}

.shell{
  align-items:start;
}

main{
  align-self:start;
  margin:0 auto!important;
  padding-top:4px!important;
}

header{
  min-height:48px!important;
  margin:0 0 8px!important;
  padding-top:0!important;
}

header .kicker{
  margin-top:0!important;
}

header h1{
  margin:1px 0 0!important;
  line-height:1.05;
}

.tab.active{
  margin-top:0!important;
}

aside{
  padding-top:8px!important;
}

.brand{
  min-height:58px;
  margin:0 4px 10px!important;
  padding:0 4px 8px!important;
}

.brand-logo{
  width:48px;
  height:48px;
  flex:0 0 48px;
  object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(101,120,255,.28));
}

.auth-logo-image{
  width:56px;
  height:56px;
  object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(101,120,255,.34));
}

.auth-mini-logo-image{
  width:52px;
  height:52px;
  flex:0 0 52px;
  object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(101,120,255,.3));
}

.modal{
  cursor:pointer;
}

.modal-card{
  cursor:default;
}

@media(max-width:1000px){
  main{padding-top:2px!important}
  header{margin-bottom:6px!important}
}

@media(max-width:650px){
  main{padding-top:0!important}
  header{margin-bottom:5px!important}
  .brand-logo{width:42px;height:42px;flex-basis:42px}
}

/* ===== PFusion v12 exact content offset ===== */
main{
  padding-top:80px!important;
}

header{
  margin-top:0!important;
}

@media(max-width:1000px){
  main{padding-top:80px!important}
}

@media(max-width:650px){
  main{padding-top:80px!important}
}

/* PF logo proportions */
.brand-logo{
  width:48px;
  height:48px;
  border-radius:14px;
}

.auth-logo-image{
  width:56px;
  height:56px;
  border-radius:17px;
}

.auth-mini-logo-image{
  width:52px;
  height:52px;
  border-radius:16px;
}

/* ===== PFusion v13 logo and interaction refinements ===== */
.brand-logo,
.auth-logo-image,
.auth-mini-logo-image{
  background:transparent;
  object-fit:contain;
}

.brand-logo{
  filter:drop-shadow(0 12px 25px rgba(101,120,255,.34));
}

.auth-logo-image,
.auth-mini-logo-image{
  filter:drop-shadow(0 14px 30px rgba(101,120,255,.36));
}

button:disabled{
  opacity:.55;
  cursor:wait;
  pointer-events:none;
}

.form .btn.primary{
  min-height:48px;
}

.user-card.removing{
  opacity:0;
  transform:scale(.98);
}

/* ===== PFusion v14 logo ===== */
.brand-logo{
  width:58px;
  height:48px;
  border-radius:0!important;
  filter:none!important;
}

.auth-logo-image{
  width:70px;
  height:58px;
  border-radius:0!important;
  filter:none!important;
}

.auth-mini-logo-image{
  width:64px;
  height:52px;
  border-radius:0!important;
  filter:none!important;
}

/* ===== Client creation waiting overlay ===== */
.creation-wait{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(3,5,12,.82);
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
}

.creation-wait.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.creation-wait-card{
  width:min(460px,100%);
  padding:36px 34px 30px;
  text-align:center;
  border-radius:26px;
  border:1px solid rgba(120,140,205,.25);
  background:
    radial-gradient(circle at 50% 0,rgba(103,118,255,.17),transparent 42%),
    linear-gradient(145deg,rgba(21,28,49,.98),rgba(8,12,23,.99));
  box-shadow:
    0 45px 130px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.hourglass-wrap{
  position:relative;
  width:100px;
  height:100px;
  margin:0 auto 20px;
  display:grid;
  place-items:center;
}

.hourglass{
  position:relative;
  z-index:2;
  font-size:54px;
  line-height:1;
  animation:hourglassFlip 1.8s ease-in-out infinite;
  filter:drop-shadow(0 10px 24px rgba(111,122,255,.35));
}

.hourglass-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(91,218,255,.13);
  border-top-color:#5bdcff;
  border-right-color:#8d69ff;
  animation:hourglassSpin 1.2s linear infinite;
}

.creation-wait-kicker{
  color:#8b98bb;
  font-size:10px;
  font-weight:900;
  letter-spacing:.19em;
}

.creation-wait-card h2{
  margin:8px 0 10px;
  font-size:28px;
  letter-spacing:-.035em;
}

.creation-wait-card p{
  min-height:44px;
  margin:0;
  color:#a2acc5;
  line-height:1.55;
}

.creation-wait-card small{
  display:block;
  margin-top:14px;
  color:#707c99;
}

.creation-progress{
  height:5px;
  margin-top:22px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(117,135,190,.12);
}

.creation-progress i{
  display:block;
  width:42%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#55dcff,#6c78ff,#9b63ff);
  animation:creationProgress 1.45s ease-in-out infinite;
}

.wait-open{
  overflow:hidden;
}

.new-client-highlight{
  animation:newClientGlow 2.2s ease;
}

@keyframes hourglassFlip{
  0%,40%{transform:rotate(0deg)}
  55%,90%{transform:rotate(180deg)}
  100%{transform:rotate(360deg)}
}

@keyframes hourglassSpin{
  to{transform:rotate(360deg)}
}

@keyframes creationProgress{
  0%{transform:translateX(-115%)}
  55%{transform:translateX(130%)}
  100%{transform:translateX(260%)}
}

@keyframes newClientGlow{
  0%{box-shadow:0 0 0 rgba(84,217,255,0)}
  25%{box-shadow:0 0 0 3px rgba(84,217,255,.22),0 0 48px rgba(103,118,255,.25)}
  100%{box-shadow:0 20px 55px rgba(0,0,0,.31)}
}

/* ===== PFusion v15 exact uploaded logo ===== */
.brand-logo-only{
  min-height:104px!important;
  margin:0 0 18px!important;
  padding:4px 10px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.brand-logo-only .brand-logo{
  width:178px!important;
  height:96px!important;
  max-width:100%!important;
  flex:none!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:transparent!important;
  filter:drop-shadow(0 13px 26px rgba(77,102,255,.23))!important;
}

.auth-logo-image{
  width:122px!important;
  height:74px!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:transparent!important;
}

.auth-mini-logo-image{
  width:88px!important;
  height:56px!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:transparent!important;
}

@media(max-width:1000px){
  .brand-logo-only{
    min-height:66px!important;
    width:150px;
    margin-right:14px!important;
  }
  .brand-logo-only .brand-logo{
    width:140px!important;
    height:58px!important;
  }
}

/* ===== PFusion v16 mobile connections and status refinements ===== */
.badge.orange{
  background:rgba(116,62,24,.72)!important;
  color:#d9a06c!important;
  border-color:rgba(205,126,63,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 16px rgba(154,89,35,.06)!important;
}

#tab-sessions .panel{
  background:
    radial-gradient(circle at 85% 0,rgba(91,109,255,.10),transparent 34%),
    linear-gradient(145deg,rgba(20,26,45,.96),rgba(8,12,23,.98));
}

@media(max-width:650px){
  body{
    background:
      radial-gradient(circle at 82% 0,rgba(101,112,255,.18),transparent 28%),
      radial-gradient(circle at 0 100%,rgba(77,207,255,.08),transparent 34%),
      linear-gradient(180deg,#070a13,#090d19 48%,#070a13)!important;
    background-attachment:fixed!important;
  }

  #tab-sessions{
    position:relative;
    isolation:isolate;
  }

  #tab-sessions:before{
    content:"";
    position:absolute;
    inset:-12px -14px -30px;
    z-index:-1;
    border-radius:22px;
    background:
      radial-gradient(circle at 92% 5%,rgba(105,112,255,.12),transparent 32%),
      linear-gradient(180deg,rgba(12,17,31,.74),rgba(7,10,19,.52));
    pointer-events:none;
  }

  #tab-sessions .panel{
    padding:14px!important;
    border-radius:18px!important;
    background:
      linear-gradient(145deg,rgba(19,25,43,.98),rgba(8,12,22,.99))!important;
    box-shadow:0 18px 48px rgba(0,0,0,.34)!important;
  }

  #tab-sessions .head{
    gap:10px;
  }

  #tab-sessions .table-wrap{
    margin-top:12px;
    border-radius:13px;
    background:rgba(5,8,15,.72);
  }

  #tab-sessions table{
    min-width:720px;
  }

  #tab-sessions th,
  #tab-sessions td{
    padding:10px 11px;
  }
}

/* ===== PFusion v17 date controls and labels ===== */
.date-edit-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
}

.date-edit-row input{
  min-width:0;
}

.date-apply-btn{
  color:#9be7ff!important;
  border-color:rgba(84,217,255,.24)!important;
  background:rgba(25,81,104,.24)!important;
}

.date-clear-btn{
  color:#d2a67d!important;
  border-color:rgba(194,119,58,.20)!important;
  background:rgba(102,59,25,.25)!important;
}

#editDateState{
  margin-top:3px;
}

.client-history-head h3{
  margin-top:0;
}

@media(max-width:700px){
  .date-edit-row{
    grid-template-columns:1fr 1fr;
  }

  .date-edit-row input{
    grid-column:1/-1;
  }
}

/* ===== PFusion v18 status colors and mobile authorization ===== */
.badge.green{
  background:rgba(18,82,57,.78)!important;
  color:#74e9ad!important;
  border-color:rgba(70,218,151,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 18px rgba(62,210,145,.07)!important;
}

.badge.red{
  background:rgba(93,25,39,.76)!important;
  color:#ff8799!important;
  border-color:rgba(255,102,126,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 18px rgba(255,72,105,.055)!important;
}

/* Session/IP inactivity remains dark orange. */
.client-history-table .badge.orange{
  background:rgba(116,62,24,.72)!important;
  color:#d9a06c!important;
}

/* Remove useless vertical scrolling from the mobile login screen. */
body:has(.auth-page){
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none;
}

.auth-page{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}

@media(max-width:900px){
  .auth-page{
    padding:12px!important;
  }

  .auth-shell{
    width:min(620px,100%)!important;
    min-height:0!important;
    height:auto!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:hidden!important;
  }

  .auth-card-wrap{
    min-height:0!important;
    padding:28px 24px!important;
    overflow:hidden!important;
  }

  .auth-card{
    max-height:100%!important;
  }

  .auth-card-head{
    margin-bottom:20px!important;
  }

  .auth-form{
    gap:14px!important;
  }

  .auth-input input{
    height:50px!important;
  }

  .auth-submit{
    height:52px!important;
  }

  .auth-security{
    margin-top:15px!important;
  }
}

@media(max-width:540px){
  .auth-page{
    padding:8px!important;
  }

  .auth-shell{
    max-height:calc(100dvh - 16px)!important;
    border-radius:22px!important;
  }

  .auth-card-wrap{
    padding:22px 18px!important;
  }

  .auth-card-head{
    margin-bottom:16px!important;
  }

  .auth-card-head h2{
    font-size:23px!important;
  }

  .auth-card-head p{
    font-size:13px!important;
  }

  .auth-mini-logo-image{
    width:70px!important;
    height:46px!important;
  }

  .auth-form{
    gap:12px!important;
  }

  .auth-form label>span{
    margin-bottom:5px!important;
  }

  .auth-input input{
    height:46px!important;
  }

  .auth-submit{
    height:48px!important;
  }

  .auth-security{
    margin-top:12px!important;
    font-size:11px!important;
  }
}

/* ===== PFusion v19 secret confirmation and button icons ===== */
.user-actions .mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.user-actions .mini svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  fill:currentColor;
  opacity:.88;
}

.user-actions .mini:hover svg{
  opacity:1;
  transform:scale(1.05);
}

.secret-confirm-card{
  max-width:540px;
  text-align:center;
}

.secret-warning-icon{
  width:70px;
  height:70px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(124,68,25,.52);
  border:1px solid rgba(217,137,68,.28);
  color:#e0a36b;
  font-size:38px;
  font-weight:300;
  box-shadow:0 0 30px rgba(155,91,38,.10);
}

.secret-warning-text{
  color:#aab3ca;
  line-height:1.65;
  margin:12px 0 18px;
}

.secret-warning-box{
  display:grid;
  gap:5px;
  text-align:left;
  margin:18px 0 24px;
  padding:15px 16px;
  border-radius:14px;
  background:rgba(96,53,23,.24);
  border:1px solid rgba(198,119,57,.16);
}

.secret-warning-box b{
  color:#dca16d;
}

.secret-warning-box span{
  color:#9dabc5;
  line-height:1.5;
}

.secret-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:10px;
}

.danger-confirm{
  border:1px solid rgba(224,107,70,.30)!important;
  background:linear-gradient(135deg,rgba(132,48,35,.92),rgba(92,31,35,.96))!important;
  color:#ffb09d!important;
}

.button-icon{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-right:7px;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  font-weight:800;
}

@media(max-width:560px){
  .secret-confirm-actions{
    grid-template-columns:1fr;
  }

  .user-actions .mini{
    min-height:37px;
  }
}

/* ===== PFusion v20 pending status ===== */
.badge.pending{
  min-width:42px;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(45,55,82,.72)!important;
  border-color:rgba(132,149,202,.18)!important;
  color:#9daac8!important;
}

.status-gear{
  position:relative;
  display:inline-block;
  width:19px;
  height:19px;
  border:3px dotted #91a0c4;
  border-radius:50%;
  animation:statusGearSpin .85s linear infinite;
}

.status-gear:after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:#91a0c4;
  box-shadow:0 0 10px rgba(126,145,198,.18);
}

@keyframes statusGearSpin{
  to{transform:rotate(360deg)}
}

/* ===== PFusion v21 three-column client cards ===== */
.users-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}

.user-card{
  min-width:0;
  padding:16px!important;
  gap:10px!important;
  border-radius:17px!important;
}

.user-top{
  gap:10px;
}

.user-top h3{
  max-width:210px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:18px!important;
}

.user-card .kicker{
  font-size:9px!important;
}

.user-card .badge{
  flex:0 0 auto;
  padding:6px 9px;
  font-size:11px;
}

.user-meta{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}

.traffic{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}

.user-meta div,
.traffic div{
  min-width:0;
  padding:8px 9px!important;
}

.user-meta span,
.traffic span{
  font-size:10px!important;
}

.user-meta b,
.traffic b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px!important;
}

.user-card .link{
  max-height:58px;
  margin-bottom:0!important;
  padding:10px!important;
  overflow:auto;
  font-size:11px;
  line-height:1.35;
}

.user-actions{
  gap:5px!important;
}

.user-actions .mini{
  min-height:32px!important;
  padding:6px 8px!important;
  gap:5px!important;
  font-size:11px!important;
  flex:1 1 auto;
}

.user-actions .mini svg{
  width:14px!important;
  height:14px!important;
  flex-basis:14px!important;
}

@media(max-width:1350px){
  .users-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .user-top h3{
    max-width:330px;
  }
}

@media(max-width:760px){
  .users-grid{
    grid-template-columns:1fr!important;
  }

  .user-card{
    padding:15px!important;
  }

  .user-top h3{
    max-width:220px;
  }
}