/* ── LAYOUT ─────────────────────────────────────── */
.layout{display:flex;height:100vh;overflow:hidden;}
/* ── SIDEBAR ─────────────────────────────────────── */
.sidebar{width:215px;min-width:215px;background:var(--bg-s);border-right:1px solid var(--bdr);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;}
/* ── MAIN ─────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
/* [UI REFINE] tb-l removed from HTML (duplicate of pg-title).
   Topbar now right-aligns its single .tb-r group. */
.topbar{display:flex;align-items:center;justify-content:flex-end;padding:0 24px;height:56px;border-bottom:1px solid var(--bdr);flex-shrink:0;background:var(--bg-s);}
/* ── GLOBAL ACTION BAR ─────────────────────────────────────── */
/* [UI REFINE] Global-bar: padding wrapper + gap layout replaces flush border-right dividers.
   Result: card-strip feel with breathing room, not a compressed toolbar. */
.global-bar{display:flex;align-items:stretch;gap:8px;padding:10px 24px;background:var(--bg-s);border-bottom:1px solid var(--bdr);flex-shrink:0;}
/* ── CONTENT ─────────────────────────────────────── */
.content{flex:1;overflow-y:auto;padding:20px 24px 80px;}
.pg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
button,textarea,input,select{font-family:inherit;}a{text-decoration:none;}
html,body{height:100%;background:var(--bg);color:var(--t1);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.s-logo{display:flex;align-items:center;gap:10px;padding:20px 16px 16px;border-bottom:1px solid var(--bdr);}
.s-logo-ico{width:32px;height:32px;border-radius:8px;background:#f2f5f3;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.s-logo-ico img{width:24px;height:24px;display:block;}
.s-logo-txt{font-size:17px;font-weight:800;letter-spacing:.04em;}
.s-logo-txt img{display:block;height:22px;width:auto;}
.s-logo-txt .neo{color:var(--green);}.s-logo-txt .proxy{color:var(--t1);}
.s-user{padding:14px 12px;border-bottom:1px solid var(--bdr);}
.s-u-in{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--bg-c);border:1px solid var(--bdr);}
.av{width:36px;height:36px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#111;flex-shrink:0;}
.u-n{font-size:13.5px;font-weight:700;}.u-e{font-size:10px;color:var(--t3);margin-top:1px;}
.badge-plan{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:4px;font-size:8.5px;font-weight:800;letter-spacing:.05em;background:var(--green);color:#111;}
.s-nav{padding:10px 8px;flex:1;}
.ni{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--t2);font-size:14px;font-weight:500;cursor:pointer;transition:background .13s,color .13s;margin-bottom:3px;border:1px solid transparent;}
.ni:hover{background:var(--bg-c);color:var(--t1);}
.ni.active{background:var(--gd);color:var(--green);border-color:var(--gb);}
.ni svg{width:16px;height:16px;flex-shrink:0;}
.s-bot{padding:8px 8px;border-top:1px solid var(--bdr);}
.ref{margin:10px 8px 14px;padding:14px;border-radius:12px;background:radial-gradient(circle at top left, rgba(66,211,130,.10), transparent 42%),linear-gradient(180deg, rgba(66,211,130,.035), rgba(255,255,255,.012));border:1px solid rgba(66,211,130,.25);box-shadow:0 0 0 1px rgba(66,211,130,.035), 0 12px 26px rgba(0,0,0,.22);}
.ref-h{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;margin-bottom:10px;}
.ref-badge{display:flex;align-items:center;justify-content:center;width:100%;margin:9px 0 11px;padding:8px 10px;border-radius:10px;font-size:18px;font-weight:900;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--green);background:linear-gradient(135deg, rgba(66,211,130,.18), rgba(66,211,130,.07));border:1px solid rgba(66,211,130,.42);box-shadow:inset 0 0 0 1px rgba(66,211,130,.05), 0 0 18px rgba(66,211,130,.08);white-space:nowrap;}
.ref-ico{width:34px;height:34px;border-radius:9px;background:var(--gd);border:1px solid var(--gb);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ref-ico svg{width:17px;height:17px;}
.ref-t{font-size:14px;font-weight:800;line-height:1.15;color:var(--t1);white-space:nowrap;}
.ref-d{display:flex;flex-direction:column;gap:4px;margin-top:0;line-height:1.4;}
.ref-line{display:block;font-size:11.5px;color:var(--t2);}
.btn-ref{margin-top:13px;height:31px;width:100%;padding:8px;border-radius:7px;border:none;background:var(--green);color:#111;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:opacity .18s,transform .18s;}
/* Dashboard version label — discrete, single source via DASHBOARD_VERSION constant */
.s-ver{padding:6px 16px 14px;font-size:10px;font-weight:600;color:var(--t3);letter-spacing:.05em;text-align:center;}
.btn-ref:hover{opacity:.9;transform:translateY(-1px);}
.tb-l{font-size:12px;font-weight:700;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;}
.tb-r{display:flex;align-items:center;gap:14px;}
.tr-info .lbl{font-size:10px;color:var(--t3);text-align:right;}.tr-info .val{font-size:13px;font-weight:700;color:var(--t1);font-family:var(--mono);text-align:right;}
.tb-ico{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--bdr2);background:var(--bg-c);display:flex;align-items:center;justify-content:center;color:var(--t2);transition:background .13s,color .13s;}
.tb-ico:hover{background:var(--bg-h);color:var(--t1);}
.ndot{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--green);border-radius:50%;border:2px solid var(--bg-s);}
.av-sm{width:34px;height:34px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#111;cursor:pointer;transition:box-shadow .15s,opacity .15s;outline:none;flex-shrink:0;}
.av-sm:hover{box-shadow:0 0 0 2px var(--bg-s),0 0 0 4px rgba(66,211,130,.5);}
.av-sm:focus-visible{box-shadow:0 0 0 2px var(--bg-s),0 0 0 4px rgba(66,211,130,.7);}
/* ── GLOBAL ACTION TRIGGERS — enterprise redesign ─────────────────────────────────────
   Icon container + title/subtitle + current-value chip + chevron.
   Left accent bar animates via ::before on hover/active.
   Pattern: Cloudflare / Tailscale control-plane action strips. */
.gb-btn{flex:1;display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--bdr);background:var(--bg-c);border-radius:10px;color:var(--t2);font-family:var(--font);cursor:pointer;position:relative;overflow:hidden;transition:border-color .18s,background .18s,color .18s,box-shadow .18s;text-align:left;}
.gb-btn::before{content:'';position:absolute;left:0;top:16%;bottom:16%;width:2px;border-radius:0 2px 2px 0;background:var(--green);opacity:0;transform:scaleY(.4);transition:opacity .18s,transform .22s;}
.gb-btn:hover{border-color:var(--bdr2);background:var(--bg-c2);box-shadow:0 2px 12px rgba(0,0,0,.25);}
.gb-btn:hover::before{opacity:1;transform:scaleY(1);}
.gb-btn:active{background:var(--bg-in);box-shadow:none;}
.gb-btn.active{border-color:var(--gb);background:rgba(66,211,130,.04);}
.gb-btn.active::before{opacity:1;transform:scaleY(1);}
.gb-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
/* Icon container */
/* [STYLE SYNC] gb-icon-wrap matches tcp-k-icon: orange stroke, same border/bg, same hover */
.gb-icon-wrap{width:36px;height:36px;flex-shrink:0;border-radius:8px;border:1px solid var(--bdr2);background:var(--bg-in);display:flex;align-items:center;justify-content:center;transition:border-color .18s,background .18s;}
.gb-icon-wrap svg{width:15px;height:15px;color:var(--orange);}
.gb-btn:hover .gb-icon-wrap{border-color:rgba(249,115,22,.3);background:rgba(249,115,22,.06);}
/* Labels */
.gb-lbl{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.gb-title{font-size:13px;font-weight:700;color:var(--t1);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gb-sub{font-size:10.5px;font-weight:500;color:var(--t3);white-space:nowrap;}
/* Meta: current-value chip + chevron */
.gb-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.gb-current{font-size:10.5px;font-weight:600;color:var(--t3);background:var(--bg-in);border:1px solid var(--bdr);border-radius:4px;padding:2px 8px;white-space:nowrap;transition:color .18s,border-color .18s,background .18s;}
.gb-btn:hover .gb-current{color:var(--green);border-color:var(--gb);background:var(--gd);}
.gb-arrow{width:14px;height:14px;flex-shrink:0;color:var(--t3);transition:transform .18s,color .18s;}
.gb-btn:hover .gb-arrow{transform:translateX(2px);color:var(--green);}
@media(max-width:900px){.global-bar{flex-direction:column;gap:6px;padding:10px 16px;}.gb-btn{width:100%;}}
/* ── END GLOBAL ACTION TRIGGERS ─────────────────────────────────────── */
.pg-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);}
.btn-customize{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:8px;border:1px solid var(--bdr2);background:var(--bg-c);color:var(--t2);font-size:12px;font-weight:600;transition:background .13s,color .13s,border-color .13s;cursor:pointer;font-family:var(--font);}
.btn-customize:hover{background:var(--bg-h);color:var(--t1);}
.btn-customize:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.btn-customize svg{width:14px;height:14px;flex-shrink:0;}
.btn-customize.open{background:var(--bg-in);color:var(--t1);}
/* ── CUSTOMIZE PANEL — Enterprise dropdown redesign ─────────────────────────────────
   Floating dropdown anchored to .pg-header-actions.
   Checkbox rows, lock state, enterprise typography. No emoji. */
/* Count badge */
.cp-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;background:var(--bg-in);border:1px solid var(--bdr);color:var(--t3);font-size:10.5px;font-weight:700;letter-spacing:.04em;margin-left:2px;transition:color .13s,background .13s,border-color .13s;}
.btn-customize.open .cp-badge{color:var(--green);border-color:var(--gb);background:var(--gd);}
/* Anchor for dropdown */
.pg-header-actions{position:relative;}
/* Floating panel */
.customize-panel{position:absolute;top:calc(100% + 6px);right:0;width:280px;background:var(--bg-c);border:1px solid var(--bdr2);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);z-index:400;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .18s,transform .18s;display:block;}
.customize-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
/* Panel header */
.cp-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 12px;}
.cp-header-left{display:flex;flex-direction:column;gap:3px;}
.cp-header-title{font-size:12.5px;font-weight:700;color:var(--t1);letter-spacing:.01em;}
.cp-header-sub{font-size:10.5px;color:var(--t3);line-height:1.4;}
/* Close btn */
.cp-close{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;border:none;background:transparent;color:var(--t3);cursor:pointer;flex-shrink:0;transition:background .13s,color .13s;}
.cp-close:hover{background:var(--bg-in);color:var(--t1);}
.cp-close:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
/* Divider */
.cp-divider{height:1px;background:var(--bdr);}
/* Rows */
.cp-grid{display:flex;flex-direction:column;padding:6px;}
.cp-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:7px;cursor:pointer;transition:background .12s;border:1px solid transparent;user-select:none;}
.cp-row:hover{background:var(--bg-in);}
.cp-row.locked{cursor:not-allowed;opacity:.45;}
.cp-row:focus-visible{outline:2px solid var(--green);outline-offset:1px;}
/* Checkbox */
.cp-check{width:16px;height:16px;flex-shrink:0;border-radius:4px;border:1.5px solid var(--bdr2);background:var(--bg-in);display:flex;align-items:center;justify-content:center;transition:background .13s,border-color .13s;color:transparent;}
.cp-row.active .cp-check{background:var(--green);border-color:var(--green);color:#111;}
/* Row icon */
.cp-row-icon{width:13px;height:13px;flex-shrink:0;color:var(--t3);transition:color .13s;}
.cp-row.active .cp-row-icon,.cp-row:hover .cp-row-icon{color:var(--t2);}
/* Row label */
.cp-row-label{flex:1;font-size:12.5px;font-weight:500;color:var(--t2);transition:color .13s;}
.cp-row.active .cp-row-label{color:var(--t1);font-weight:600;}
.cp-row:hover .cp-row-label{color:var(--t1);}
/* Lock icon */
.cp-lock{display:flex;align-items:center;color:var(--t3);flex-shrink:0;}
/* Footer */
.cp-footer{padding:10px 16px;}
.cp-footer-note{font-size:10.5px;color:var(--t3);}
/* ── END CUSTOMIZE PANEL ─────────────────────────────────────── */
/* ── ACCORDION ─────────────────────────────────────── */
.proxy-list{display:flex;flex-direction:column;gap:8px;}
/* [DROPDOWN FIX] overflow:hidden removed — was clipping absolutely-positioned bar dropdowns.
   border-radius still renders correctly; flex children never touch the corner pixels.
   Same fix applied to .bc earlier (line below) — .proxy-bar had the same oversight. */
/* ── BAR ─────────────────────────────────────── */
/* flex-wrap intentionally absent (default nowrap):
   column-hiding at each breakpoint ensures remaining columns always fit on one row.
   Wrapping was causing unintended multi-row layout at typical desktop widths. */
.proxy-bar{display:flex;align-items:stretch;background:var(--bg-c);min-height:60px;cursor:pointer;border-radius:12px;transition:background .13s;user-select:none;min-width:0;}
.proxy-bar:hover{background:var(--bg-h);}
/* open: top corners only + merge visually with panel below */
.proxy-item.open .proxy-bar{background:var(--bg-c2);border-bottom:1px solid var(--bdr);border-radius:12px 12px 0 0;}
/* [DROPDOWN FIX] overflow:hidden removed from .bc — min-width:0 handles flex shrink/truncation */
/* overflow:hidden intentionally absent — min-width:0 handles flex shrink;
   overflow:hidden would clip absolute-positioned bar dropdowns (proto/tcp/rot).
   justify-content:flex-start + padding-top anchors all labels to the same
   vertical start point regardless of content height below each label. */
.bc{display:flex;flex-direction:column;justify-content:flex-start;padding:10px 10px 8px;flex:1;min-width:0;max-width:none;position:relative;}
.bc[data-fixed]{flex:0 0 auto;}
/* display:flex + align-items:center keeps SVG icons (Protocollo label) level with
   plain-text labels; gap replaces inline spacing; line-height:1 removes ascender variance. */
.bc-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);margin-bottom:7px;display:flex;align-items:center;gap:3px;line-height:1;white-space:nowrap;}
.bc-val{font-size:14px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
/* ── NOTES COLUMN — compact inline input in proxy bar ──────────────────────────
   Designed to match bar height. stopPropagation handled inline to prevent
   accordion toggle on click/focus/input. */
.bc-note-input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--bdr2);
  color:var(--t1);
  font-size:12.5px;
  font-family:var(--font);
  font-weight:500;
  padding:3px 0;
  outline:none;
  transition:border-color .15s, background .15s;
  border-radius:0;
  caret-color:var(--green);
}
.bc-note-input::placeholder{color:var(--t3);font-weight:400;}
.bc-note-input:focus{
  border-bottom-color:var(--green);
  background:transparent;
}
.bc-note-input:hover:not(:focus){border-bottom-color:var(--bdr2);}
/* ── END NOTES COLUMN ─────────────────────────────────────── */

/* ── TCP FINGERPRINT & ROTATION IP CHIPS ────────────────────────────────────────────
   Read-only synthetic chips shown in the proxy bar when columns are enabled.
   .proxy-meta-chip        — base chip: compact badge with label
   .proxy-meta-chip--active  — green-tinted for active/configured values
   .proxy-meta-chip--neutral — muted for default / disabled values
   .proxy-meta-subvalue    — secondary technical line below the chip */
.proxy-meta-chip{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid var(--bdr);
  background: var(--bg-in);
  color: var(--t2);
  transition: border-color .13s, color .13s, background .13s;
}
.proxy-meta-chip--active{
  background: var(--gd);
  border-color: var(--gb);
  color: var(--green);
}
.proxy-meta-chip--neutral{
  background: var(--bg-in);
  border-color: var(--bdr);
  color: var(--t3);
}
.proxy-meta-subvalue{
  font-size: 9.5px;
  font-weight: 500;
  color: var(--t3);
  font-family: var(--mono);
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* bc with column layout for chips (overrides default row bc-val) */
.bc[data-col="tcp"] .bc-val,
.bc[data-col="rotation"] .bc-val{
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  white-space: normal;
}
/* ── END TCP / ROTATION CHIPS ─────────────────────────────────────── */

/* ── PROTOCOL INLINE — badge · CS · trigger on one row ───────────────
   .protocol-inline           — compact flex row, hugs its content
   .protocol-connection-string — monospace CS, truncated, selectable
   .protocol-trigger          — always-visible pencil trigger, sits right after CS
   .protocol-dropdown         — floating option list (extends .dropdown) */
.protocol-inline{
  display:inline-flex;   /* shrinks to content width — trigger follows CS immediately */
  align-items:center;
  gap:4px;
  min-width:0;
  max-width:100%;        /* never overflows the .bc column */
  vertical-align:middle;
}
/* Closed-bar protocol badge: keep multi-word labels (e.g. "VPN WireGuard") on one line */
.protocol-inline .pb{
  white-space:nowrap;
}
.protocol-connection-string{
  flex:0 1 auto;         /* shrinks if needed but does NOT grow to fill remaining space */
  min-width:0;
  max-width:100%;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  color:#5fa87d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.02em;
  user-select:text;
  cursor:text;
}
.protocol-trigger{
  flex:0 0 auto;         /* never grows or shrinks — always right next to CS end */
  width:20px;height:20px;
  border-radius:4px;
  border:1px solid transparent;
  background:transparent;
  color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:.65;
  transition:opacity .15s,background .13s,color .13s,border-color .13s;
}
.protocol-trigger:hover{
  opacity:1;
  background:var(--gd);
  color:var(--green);
  border-color:var(--gb);
}
.protocol-trigger svg{width:10px;height:10px;pointer-events:none;}
/* ── END PROTOCOL INLINE ──────────────────────────────────────────── */

/* ── BAR INTERACTIVE CONTROLS ─────────────────────────────────────────────────────
   .bc-edit-btn     — pencil icon that appears on hover inside interactive columns.
                      Kept invisible by default; fades in on .bc:hover.
   .bc-cred-form    — credentials edit popover (extends .dropdown base styles).
   .bc-cred-*       — label, input, save button inside the credentials form.     */
.bc-edit-btn{
  width: 20px; height: 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  /* Matched to .protocol-trigger: 0.65 rest opacity, full on parent hover */
  opacity: 0.65;
  transition: opacity .15s, background .13s, color .13s, border-color .13s;
}
.bc-interactive:hover .bc-edit-btn,
.bc-edit-btn:focus { opacity: 1; }
/* Green NeoProxy hover — identical to .protocol-trigger:hover */
.bc-edit-btn:hover { opacity:1; background: var(--gd); color: var(--green); border-color: var(--gb); }
.bc-edit-btn svg   { width: 10px; height: 10px; pointer-events: none; }

/* ── CREDENTIALS DROPDOWN ─────────────────────────────────────────────────────────
   .credentials-trigger        — compact clickable pill in the proxy bar
   .credentials-dropdown       — floating panel extending .dropdown base
   .credentials-field          — individual field wrapper (username / password)
   .credentials-field-row      — input + action buttons in a row
   .credentials-copy-btn       — copy-to-clipboard icon button
   .credentials-eye-btn        — show/hide password toggle button
   .credentials-actions        — footer with Cancel / Save buttons             */

/* Trigger pill */
.credentials-trigger{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--bdr); background: var(--bg-in);
  cursor: pointer; min-width: 0;
  transition: border-color .13s, background .13s;
}
.credentials-trigger:hover{ border-color: var(--bdr2); background: var(--bg-h); }
.credentials-trigger-info{
  display: flex; flex-direction: row; align-items: center; gap: 5px;
  min-width: 0; overflow: hidden; flex: 1;
}
.credentials-trigger-user{
  font-size: 12px; font-weight: 600; color: var(--t1);
  font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.credentials-trigger-sep{ font-size: 10px; color: var(--t3); flex-shrink: 0; }
.credentials-trigger-pass{ font-size: 12px; color: var(--t2); letter-spacing: .1em; flex-shrink: 0; }
.credentials-trigger-chevron{
  width: 12px; height: 12px; color: var(--t3); flex-shrink: 0;
  transition: transform .2s;
}

/* Dropdown panel (extends .dropdown for position/shadow/z-index) */
.credentials-dropdown{ min-width: 260px; left: 0; right: auto; }
.credentials-dropdown-header{
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px;
  font-size: 12px; font-weight: 700; color: var(--t1);
  border-bottom: 1px solid var(--bdr); letter-spacing: .01em;
}
.credentials-dropdown-body{
  padding: 12px 14px; display: flex; flex-direction: column; gap: 11px;
}

/* Field */
.credentials-field{}
.credentials-field-label{
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--t3);
  margin-bottom: 5px;
}
.credentials-field-row{ display: flex; align-items: center; gap: 4px; }
.credentials-field-input{
  flex: 1; background: var(--bg-in); border: 1px solid var(--bdr);
  border-radius: 5px; color: var(--t1);
  font-size: 12.5px; font-family: var(--mono);
  padding: 6px 9px; outline: none; min-width: 0;
  transition: border-color .13s;
}
.credentials-field-input:focus{ border-color: var(--green); }

/* Icon action buttons */
.credentials-copy-btn,
.credentials-eye-btn{
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 5px; border: 1px solid var(--bdr);
  background: var(--bg-in); color: var(--t3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.credentials-copy-btn:hover,
.credentials-eye-btn:hover{ background: var(--bg-h); color: var(--t1); border-color: var(--bdr2); }
.credentials-copy-btn svg,
.credentials-eye-btn svg{ width: 12px; height: 12px; }

/* Footer */
.credentials-actions{
  display: flex; gap: 6px;
  padding: 10px 14px 12px; border-top: 1px solid var(--bdr);
}
.credentials-btn-cancel{
  flex: 1; padding: 7px; border-radius: 5px;
  border: 1px solid var(--bdr2); background: var(--bg-in);
  color: var(--t2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: background .13s, color .13s;
}
.credentials-btn-cancel:hover{ background: var(--bg-h); color: var(--t1); }
.credentials-btn-save{
  flex: 2; padding: 7px; border-radius: 5px; border: none;
  background: var(--green); color: #111;
  font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  transition: opacity .18s;
}
.credentials-btn-save:hover{ opacity: .85; }
/* ── END CREDENTIALS DROPDOWN ─────────────────────────────────────── */

/* ── IP WHITELIST — panel card + bar chip ─────────────────────────────────────
   .wl-input-row   — input + Aggiungi button in a row
   .wl-list        — container for IP items
   .wl-item        — single IP row with remove button
   .wl-empty       — empty state text
   .wl-badge-*     — Opzionale / Obbligatoria inline badges            */
.wl-panel-desc{font-size:11.5px;color:var(--t3);margin-bottom:12px;line-height:1.55;}
/* wl-badge-opt/req removed — setPanelAuthMode now uses acc-badge-opt/req which carry border+padding */
.wl-input-row{display:flex;gap:8px;}
.wl-input{flex:1;background:var(--bg-in);border:1px solid var(--bdr2);border-radius:7px;color:var(--t1);font-size:12.5px;font-family:var(--mono);padding:7px 10px;outline:none;transition:border-color .13s;}
.wl-input:focus{border-color:var(--green);}
.wl-input::placeholder{color:var(--t3);font-family:var(--font);}
.wl-add-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:7px;border:1px solid var(--bdr2);background:var(--bg-in);color:var(--t2);font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font);flex-shrink:0;transition:background .13s,color .13s;}
.wl-add-btn:hover{background:var(--bg-h);color:var(--t1);}
.wl-list{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.wl-empty{font-size:11.5px;color:var(--t3);}
.wl-item{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-radius:6px;background:var(--bg-in);border:1px solid var(--bdr);}
.wl-ip{font-size:12px;font-family:var(--mono);color:var(--t1);}
.wl-remove{background:transparent;border:none;color:var(--t3);display:flex;align-items:center;cursor:pointer;padding:2px;transition:color .13s;}
.wl-remove:hover{color:var(--red);}
/* ── END IP WHITELIST ─────────────────────────────────────────────── */
/* Resize handle */
.rh{width:5px;flex-shrink:0;background:transparent;cursor:col-resize;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.rh::after{content:'';width:1px;height:55%;background:var(--bdr);transition:background .15s;}
.rh:hover::after,.rh.drag::after{background:var(--green);}
/* Status dot */
.st-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;animation:glow 2.2s infinite;}
.st-dot.off{background:var(--t3);animation:none;}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(66,211,130,.5);}50%{box-shadow:0 0 0 4px rgba(66,211,130,0);}}
/* Signal bars */
.sig-bars{display:flex;align-items:flex-end;gap:2px;}
.sig-bar{width:4px;border-radius:1px;transition:background .2s;}
/* Pills */
.pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.pill-4g{background:var(--bg-in);color:var(--t1);border:1px solid var(--bdr2);}
.pill-5g{background:var(--gd);color:var(--green);border:1px solid var(--gb);}
/* Bar right */
/* .bc-acts — fixed-width action column at bar end.
   flex:0 0 auto + min-width prevents the Ruota IP loading-state text
   change from redistributing flex space across the other columns. */
.bc-acts{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0 10px;flex:0 0 auto;min-width:120px;}
.bc-chev{display:flex;align-items:center;justify-content:center;padding:0 16px;flex-shrink:0;}
.chevron{color:var(--t3);transition:transform .28s,color .22s;}
.proxy-item.open .chevron{transform:rotate(180deg);color:var(--green);}
/* ── BUTTONS ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--bdr2);background:var(--bg-in);color:var(--t2);font-size:12.5px;font-weight:600;transition:background .13s,color .13s;white-space:nowrap;font-family:var(--font);}
.btn:hover{background:var(--bg-h);color:var(--t1);}
.btn svg{width:13px;height:13px;}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:7px;}
/* Ruota IP button — restored to natural size, no artificial width on the button itself.
   Layout stability is handled by the .bc-acts container (flex:0 0 auto; min-width). */
[id^="rotbtn-"]{padding:6px 12px;font-size:12px;white-space:nowrap;}
.btn-green{background:var(--green);border-color:var(--green);color:#111;font-weight:700;}
.btn-green:hover{opacity:.85;}
/* ── PANEL ─────────────────────────────────────── */
/* ── ACCORDION ANIMATION ───────────────────────────────────────────────────────────────
   ROOT CAUSE of the overlap: proxy items are painted in DOM order, so proxy #2
   (later in DOM) paints ON TOP of proxy #1's expanding panel in normal stacking order.

   FIX STRATEGY:
   1. position:relative + z-index:1 on every .proxy-item establishes a stacking context.
   2. .proxy-item.open gets z-index:2 — it rises above its siblings, so its panel always
      paints on top of the bars of proxy items below. No overlap possible.
   3. .pan-in starts at opacity:0 and fades in after .15s delay (OPEN direction).
      By t=.15s the panel has already pushed proxy items below far enough — zero visual
      bleed even on slow machines. On CLOSE, opacity snaps to 0 immediately (no delay)
      so content disappears before the container collapses.
   4. overflow:hidden on .proxy-panel clips content during the max-height animation.
      overflow:visible is granted after .32s (matching the open transition) so dropdowns
      inside the panel can escape their container once fully expanded.
   5. border-radius is applied to .proxy-bar (top) and .proxy-panel (bottom) directly
      since overflow:hidden is NOT on .proxy-item (would clip internal dropdowns).   */

.proxy-panel{
  background: var(--bg);
  border-radius: 0 0 12px 12px;
  max-height: 0;
  overflow: hidden;
  /* CLOSE direction: ease-in collapses fast → no empty frame */
  transition: max-height .28s ease-in;
}
.proxy-item.open .proxy-panel{
  max-height: 4000px;
  overflow: visible;
  /* OPEN direction: ease-out expands smoothly; overflow:visible only after done */
  transition: max-height .32s ease-out,
              overflow 0s linear .32s;
}

/* pan-in: CLOSE = instant fade (no delay), OPEN = fades in after .15s */
.pan-in{
  padding: 20px;
  opacity: 0;
  /* CLOSE direction: .28s ease-in matches .proxy-panel collapse exactly —
     content and container fade/collapse at the same rate, no empty frame. */
  transition: opacity .28s ease-in;
}
.proxy-item.open .pan-in{
  opacity: 1;
  /* OPEN direction: unchanged — .15s delay keeps the open animation correct. */
  transition: opacity .22s ease .15s;
}

/* [DROPDOWN LAYERING FIX] When a bar dropdown (TCP/ROT/Credentials) is open, the
   containing .proxy-item must outrank all siblings.
   Each .proxy-item has z-index:1; open accordion has z-index:2.
   .has-dropdown raises to z-index:10 so the absolute dropdown escapes sibling contexts.
   Class is toggled by openDD() / closeOpenDD() in JS.                              */
.proxy-item.has-dropdown{ z-index: 10; }

/* border frame only.
   position:relative enables z-index without clipping children (no overflow:hidden). */
.proxy-item{
  position: relative;
  z-index: 1;
  border: 1px solid var(--bdr);
  border-radius: 12px;
  transition: border-color .28s ease-in;
}
/* Elevate open item above siblings so its panel paints over their bars */
.proxy-item.open{
  z-index: 2;
  border-color: var(--bdr2);
  transition: border-color .32s ease-out;
}

/* ── END ACCORDION ANIMATION ─────────────────────────────────────── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.ph-title{font-size:26px;font-weight:800;color:var(--t1);display:flex;align-items:center;gap:10px;}
.ph-meta{font-size:11px;color:var(--t3);margin-top:4px;}
.ph-acts{display:flex;gap:8px;align-items:center;}
/* ── STAT CARDS (4 col) ─────────────────────────────────────── */
.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.sc{background:var(--bg-c);border:1px solid var(--bdr);border-radius:10px;padding:16px;}
.sc-l{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:5px;}
.sc-l svg{width:11px;height:11px;}
.sc-v{font-size:22px;font-weight:800;color:var(--t1);font-family:var(--mono);display:flex;align-items:center;gap:8px;}
.sc-v small{font-size:12px;font-weight:500;color:var(--t2);font-family:var(--font);}
.sc-sub{font-size:10px;margin-top:5px;display:flex;align-items:center;gap:5px;}
.b-exc{display:inline-block;padding:2px 8px;border-radius:5px;background:var(--gd);border:1px solid var(--gb);color:var(--green);font-size:10px;font-weight:700;}
.b-bad{background:rgba(240,82,82,.1);border:1px solid rgba(240,82,82,.2);color:var(--red);}
.b-mid{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);color:var(--amber);}
.rep-icon{width:28px;height:28px;border-radius:50%;background:var(--gd);border:1px solid var(--gb);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* ── Stats summary — single-row layout ──────────────────────────────────────── */
/* .si-row   — flex row containing all 5 cells                                   */
/* .si-c     — compact data cell (IP / Conn / Op / Loc)                          */
/* .si-rep   — featured Reputazione cell, slightly wider, green-accented border  */
/* .si-divider — 1px vertical separator between standard cells                   */
.si-row{display:flex;align-items:stretch;gap:0;margin-bottom:14px;background:var(--bg-c);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;}
.si-c{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 18px;flex:1;min-width:0;}
.si-divider{width:1px;background:var(--bdr);flex-shrink:0;margin:10px 0;}
.si-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);display:flex;align-items:center;gap:4px;}
.si-lbl svg{width:10px;height:10px;flex-shrink:0;}
.si-val{font-size:13.5px;font-weight:700;color:var(--t1);font-family:var(--mono);display:flex;align-items:center;gap:6px;}
.si-mono{font-size:13.5px;} /* +1px — consistent with bar IP size */
.si-conn-pill{display:inline-block;padding:2px 11px;border-radius:20px;font-size:13px;font-weight:800;background:var(--bg-in);border:1px solid var(--bdr2);color:var(--t1);}
.si-5g{background:var(--gd);border-color:var(--gb);color:var(--green);}
.si-op-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
/* Reputazione featured cell */
.si-rep{flex:0 0 240px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 20px;border-left:1px solid var(--gb);background:linear-gradient(135deg,rgba(66,211,130,.05) 0%,transparent 70%);}
.si-rep-top{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.si-rep-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--green);display:flex;align-items:center;gap:4px;opacity:.8;}
.si-rep-lbl svg{width:10px;height:10px;color:var(--green);}
.si-rep-body{display:flex;align-items:center;gap:14px;}
.si-rep-score-wrap{display:flex;align-items:baseline;gap:3px;flex-shrink:0;}
.si-rep-num{font-size:38px;font-weight:800;font-family:var(--mono);line-height:1;}
.si-rep-den{font-size:14px;font-weight:600;color:var(--t2);font-family:var(--mono);}
.si-rep-right{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
.si-rep-stars{display:flex;gap:2px;}
.si-rep-bar{height:4px;background:rgba(66,211,130,.12);border-radius:2px;overflow:hidden;}
.si-rep-fill{height:100%;border-radius:2px;}
.si-signal-val{align-items:center;gap:6px;}
@media(max-width:1100px){.si-row{flex-wrap:wrap;}.si-rep{flex:1 1 100%;border-left:none;border-top:1px solid var(--bdr);background:none;}.si-divider{display:none;}}
/* ── end stats summary ──────────────────────────────────────────────────────── */
.cpb{background:none;border:none;color:var(--t3);padding:0;display:inline-flex;align-items:center;transition:color .13s;cursor:pointer;}
.cpb:hover{color:var(--green);}
.ip-inline{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;}
.ip-val{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* ── PROXY CONTROL GRID — desktop >1100px: [Credenziali | IP Whitelist] ──────
   Two sibling cards on one row, equal columns.
   ≤1100px collapses to a single stacked column.
   overflow:visible on cards so inner dropdowns are never clipped.          */
.proxy-control-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-bottom: 14px;
  align-items: stretch;
}
.acc-card-adv{ grid-column: auto; }
@media(max-width:1100px){.proxy-control-grid{grid-template-columns:minmax(0,1fr);}}

/* ── ADVANCED MINI-CARDS — desktop >1100px: [TCP | Rotazione | URL] ──────────
   Configurazione Avanzata split into 3 sibling mini-cards on one row.
   Each mini-card wraps a single existing .adv-row, stretched to full height.
   ≤1100px collapses to a single stacked column.                            */
.adv-cards-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.adv-mini-card{
  min-height:auto;
}
.adv-mini-card .adv-row{
  height:100%;
}
@media(max-width:1100px){
  .adv-cards-row{
    grid-template-columns:minmax(0,1fr);
  }
}
/* Advanced mini-cards — green brand icons + compact sizing (scoped, specificity-based) */
.adv-mini-card .adv-row-icon{
  border-color:rgba(66,211,130,.3);
  background:rgba(66,211,130,.08);
}
.adv-cards-row .adv-mini-card{
  min-height:0;
  padding:14px;
}
.adv-mini-card .adv-row{
  padding:4px 0;
}

.proxy-control-card{
  display: flex; flex-direction: column;
  min-height: 230px;
  background: var(--bg-c); border: 1px solid var(--bdr); border-radius: 10px;
  overflow: visible;         /* matches acc-card — never clips content */
}
.pcc-hd{padding:12px 16px 11px;border-bottom:1px solid var(--bdr);font-size:13px;font-weight:700;color:var(--t1);flex-shrink:0;}
.pcc-bd{padding:14px 16px;flex:1;display:flex;flex-direction:column;gap:12px;}
.pcc-foot{padding:10px 16px 14px;border-top:1px solid var(--bdr);flex-shrink:0;margin-top:auto;}
.pcc-field{display:flex;flex-direction:column;gap:6px;}
.pcc-bd-wl{gap:7px;}
/* ── Compact credentials card — Salva in header, fields stacked full-width ──
   pcc-hd-actions: title left, Save button right in the same header bar.
   cred-row: each field label + input+icons as a vertical column.           */
.pcc-cred-compact .pcc-bd{ gap: 12px; }
.pcc-hd-actions{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pcc-save-inline{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 6px; border: none;
  background: var(--green); color: #111;
  font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: var(--font);
  transition: opacity .18s; white-space: nowrap;
}
.pcc-save-inline:hover{ opacity: .85; }
.cred-row{ display: flex; flex-direction: column; gap: 5px; }

/* ── ACCESSO & CONFIGURAZIONE — 2-col sub-row ─────────────────────────────── */
.acc-cfg-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;   /* IP Whitelist and Config Avanzata same height */
}
@media(max-width:1100px){.acc-cfg-row{grid-template-columns:1fr;}}

/* Shared card base — NO overflow:hidden so dropdowns escape */
.acc-card{
  background: var(--bg-c);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 230px;
}
/* Header */
.acc-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.acc-hd-title{font-size:13px;font-weight:700;color:var(--t1);}
.acc-badge-opt{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:4px;background:var(--bg-in);border:1px solid var(--bdr2);color:var(--t3);}
.acc-badge-req{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:4px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);color:var(--amber);}
/* acc-badge-inline: sits inline in the acc-hd flex row, vertically centred with title */
.wl-title-group{display:inline-flex;align-items:center;gap:7px;}
/* Modal wl-badge: same visual tokens as acc-badge */
.m-wl-badge{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:4px;background:var(--bg-in);border:1px solid var(--bdr2);color:var(--t3);}
.m-wl-badge-req{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);color:var(--amber);}
/* Description */
.acc-desc{font-size:11px;color:var(--t3);line-height:1.5;margin:0;}
/* Mode switch — compact pill toggle */
.acc-mode-switch{display:flex;gap:6px;}
.acc-mode-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 10px;border-radius:7px;border:1px solid var(--bdr);
  background:var(--bg-in);color:var(--t3);font-size:11px;font-weight:600;
  font-family:var(--font);cursor:pointer;transition:background .13s,color .13s,border-color .13s;
}
.acc-mode-btn:hover{border-color:var(--bdr2);color:var(--t2);}
.acc-mode-btn.active{background:var(--gd);border-color:var(--gb);color:var(--green);}
.acc-mode-btn svg{flex-shrink:0;}

/* Info zone — always in DOM, visibility toggled */
.wl-info-zone{flex-shrink:0;height:42px;}
.wl-info-box{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:6px;background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.22);font-size:10px;color:#93c5fd;line-height:1.4;height:100%;box-sizing:border-box;}
.wl-info-hidden{visibility:hidden;}

/* Whitelist input + chips */
.wl-input-row{display:flex;gap:6px;}
.wl-input{flex:1;background:var(--bg-in);border:1px solid var(--bdr2);border-radius:6px;color:var(--t1);font-size:11px;font-family:var(--mono);padding:5px 8px;outline:none;transition:border-color .13s;min-width:0;}
.wl-input:focus{border-color:var(--green);}
.wl-input::placeholder{color:var(--t3);font-family:var(--font);font-size:10.5px;}
.wl-add-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;border:1px solid var(--bdr2);background:var(--bg-in);color:var(--t2);font-size:10.5px;font-weight:600;cursor:pointer;font-family:var(--font);flex-shrink:0;transition:background .13s,color .13s;white-space:nowrap;}
.wl-add-btn:hover{background:var(--bg-h);color:var(--t1);}
.whitelist-list{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;overflow-y:auto;max-height:72px;min-height:24px;padding-right:2px;}
.whitelist-list::-webkit-scrollbar{width:3px;}
.whitelist-list::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px;}
.wl-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px 3px 9px;border-radius:5px;background:var(--bg-in);border:1px solid var(--bdr2);font-size:11px;font-family:var(--mono);color:var(--t1);height:fit-content;}
.wl-chip .wl-remove{background:transparent;border:none;color:var(--t3);display:flex;align-items:center;cursor:pointer;padding:1px;transition:color .13s;}
.wl-chip .wl-remove:hover{color:var(--red);}
.wl-empty{font-size:10.5px;color:var(--t3);}
.wl-panel-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);}

/* ── ADVANCED CONFIG CARD — row layout ──────────────────────────────────────
   adv-row: icon | body | ctrl
   adv-row-ctrl: position:relative so .dropdown(position:absolute) escapes the
   card boundary without being clipped. z-index:500 places it above all cards. */
.adv-card{justify-content:flex-start;}
.adv-row{display:flex;align-items:center;gap:12px;padding:12px 0;}
.adv-row:first-of-type{padding-top:0;}
.adv-divider{height:1px;background:var(--bdr);margin:0;}
.adv-row-icon{width:32px;height:32px;flex-shrink:0;border-radius:8px;border:1px solid rgba(249,115,22,.3);background:rgba(249,115,22,.06);display:flex;align-items:center;justify-content:center;}
.adv-row-icon svg{width:15px;height:15px;}
.adv-row-body{flex:1;min-width:0;}
.adv-row-title{font-size:13px;font-weight:700;color:var(--t1);}
.adv-row-val{font-size:12px;font-family:var(--mono);color:var(--t1);margin-top:4px;word-break:break-word;opacity:.82;}
.adv-row-ctrl{flex-shrink:0;}
/* URL rotazione IP — Info + Copy side by side */
.adv-rot-url-row .adv-row-ctrl{display:flex;gap:6px;align-items:center;}
/* URL rotazione IP row — scoped. Desktop: same 4 declarations formerly inline (rendering unchanged). Mobile: stacked layout. */
.adv-rot-url-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal;color:var(--green);}
@media(max-width:640px){
  .adv-rot-url-row{flex-wrap:wrap;align-items:flex-start;}
  .adv-rot-url-row .adv-row-ctrl{flex-basis:100%;display:flex;justify-content:flex-end;}
  .adv-rot-url-val{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-all;}
}
/* Dropdown escapes: position:relative on .adv-row-ctrl + absolute .dropdown */
.adv-dropdown{
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  z-index: 500;
  min-width: 220px;
}

/* Legacy list classes */
.wl-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.wl-item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:5px;background:var(--bg-in);border:1px solid var(--bdr);}
.wl-ip{font-size:11px;font-family:var(--mono);color:var(--t1);}
.wl-remove{background:transparent;border:none;color:var(--t3);display:flex;align-items:center;cursor:pointer;padding:2px;transition:color .13s;}
.wl-remove:hover{color:var(--red);}
/* Stale class no-ops */
.ctrl-row,.card-box-flex,.card-bd-flex,.wl-content,.wl-header-row,.wl-chips,.wl-auth-tabs,.wl-auth-tab,.wl-info-zone-old,.pcc-bd-wl,.pcc-adv-divider,.wl-add-row,.wl-label-row{}
.wl-empty{font-size:10.5px;color:var(--t3);}
.wl-panel-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);}

/* Adv config card: distribute rows vertically */
.pcc-bd-adv{ justify-content: space-evenly; gap: 0; }
.pcc-adv-divider{ height:1px; background:var(--bdr); margin:0 0; flex-shrink:0; }

/* Legacy list classes */
.wl-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.wl-item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:5px;background:var(--bg-in);border:1px solid var(--bdr);}
.wl-ip{font-size:11px;font-family:var(--mono);color:var(--t1);}
.wl-remove{background:transparent;border:none;color:var(--t3);display:flex;align-items:center;cursor:pointer;padding:2px;transition:color .13s;}
.wl-remove:hover{color:var(--red);}
/* Also keep old ctrl-row / card-box-flex as no-ops to avoid any stale reference errors */
.ctrl-row{display:none;}
.card-box-flex,.card-bd-flex,.wl-content,.wl-info-zone-old,.wl-chips{}
.wl-empty{font-size:11px;color:var(--t3);}

/* Legacy list classes (kept for compatibility) */
.wl-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.wl-item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:5px;background:var(--bg-in);border:1px solid var(--bdr);}
.wl-ip{font-size:11.5px;font-family:var(--mono);color:var(--t1);}
.wl-remove{background:transparent;border:none;color:var(--t3);display:flex;align-items:center;cursor:pointer;padding:2px;transition:color .13s;}
.wl-remove:hover{color:var(--red);}
/* [DROPDOWN FIX] overflow:hidden removed — was the primary container clipping the dropdown */
.card-box{background:var(--bg-c);border:1px solid var(--bdr);border-radius:10px;}
.card-hd{padding:13px 16px;border-bottom:1px solid var(--bdr);font-size:13.5px;font-weight:700;color:var(--t1);}
.card-bd{padding:16px;}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cf-l{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);margin-bottom:5px;}
.cf-v{display:flex;align-items:center;justify-content:space-between;background:var(--bg-in);border:1px solid var(--bdr);border-radius:7px;padding:9px 12px;font-size:13.5px;font-weight:600;font-family:var(--mono);color:var(--t1);}
.eyb{background:none;border:none;color:var(--t3);padding:0 0 0 5px;display:flex;align-items:center;transition:color .13s;}
.eyb:hover{color:var(--green);}

/* ── PANEL CREDENTIALS — editable card ────────────────────────────────────────────
   .panel-cred-inp    — borderless input inside .cf-v; inherits container style
   .panel-cred-footer — save button row below the .cg grid
   .panel-cred-save   — green save button                                         */
.panel-cred-inp{
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--t1);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--mono);
  min-width: 0;
  caret-color: var(--green);
}
.panel-cred-inp::placeholder{ color: var(--t3); font-weight: 400; }
.panel-cred-footer{
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--bdr);
}
.panel-cred-save{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  border-radius: 7px; border: none;
  background: var(--green); color: #111;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  transition: opacity .18s;
}
.panel-cred-save:hover{ opacity: .85; }
.panel-cred-save svg{ flex-shrink: 0; }
/* ── END PANEL CREDENTIALS ─────────────────────────────────────────── */
/* ── CONFIG AVANZATA ─────────────────────────────────────── */
/* ── CONFIGURAZIONE AVANZATA — premium restyling ────────────────────────────────────
   Row structure:  [ icon-wrap ]  [ label + desc ]  ···  [ value ]  [ Modifica ]
   Icon-wrap:      32px square, subtle bg/border, orange accent stroke
   Label:          primary color, medium weight
   Desc:           secondary muted subtitle below label
   Value:          mono, visible but not dominant
   Modifica btn:   ghost, aligns with .btn base style              */
.tcp-r{
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; border-bottom: 1px solid var(--bdr);
  transition: background .13s;
}
.tcp-r:last-child{ border-bottom: none; }
.tcp-r:hover{ background: rgba(255,255,255,.018); }

/* Left group: icon + label stack */
.tcp-k{
  display: flex; align-items: center; gap: 12px;
}
/* Icon container */
.tcp-k-icon{
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--bdr2);
  background: var(--bg-in);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  transition: border-color .13s, background .13s;
}
.tcp-r:hover .tcp-k-icon{ border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.06); }
.tcp-k-icon svg{ width: 15px; height: 15px; }

/* Label + description stack */
.tcp-k-label{ display: flex; flex-direction: column; gap: 2px; }
.tcp-k-title{ font-size: 13px; font-weight: 600; color: var(--t1); }
.tcp-k-desc { font-size: 10.5px; color: var(--t3); font-weight: 400; }

/* Right group: value + dropdown + button */
.tcp-v{
  font-size: 11.5px; font-family: var(--mono);
  color: var(--t2);
  /* Allow full value to display — no truncation */
  white-space: normal;
  word-break: break-word;
}
/* Allow Modifica button to wrap below the value on narrow containers */
.tcp-ri{ display: flex; align-items: flex-start; gap: 10px; position: relative; flex-wrap: wrap; }/* Modifica button — ghost, aligns with dashboard button system */
.bmdf{
  padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--bdr2); background: var(--bg-in);
  color: var(--t2); font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: var(--font); flex-shrink: 0;
  transition: background .13s, color .13s, border-color .13s;
}
.bmdf:hover{ background: var(--bg-h); color: var(--t1); border-color: var(--bdr2); }
/* ── END CONFIGURAZIONE AVANZATA ─────────────────────────────────────── */
/* ── DROPDOWN ─────────────────────────────────────── */
/* [DROPDOWN FIX] z-index raised to 500 — above all dashboard stacking contexts */
.dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--bg-c2);border:1px solid var(--bdr2);border-radius:8px;min-width:230px;z-index:500;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.dd-item{padding:9px 14px;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;transition:background .12s,color .12s;}
.dd-item:hover{background:var(--bg-h);color:var(--t1);}
.dd-item.selected{color:var(--green);background:var(--gd);}
/* ── NOTE SECTION ─────────────────────────────────────── */

/* ── PROTOCOLS ─────────────────────────────────────── */
.bottom-row{display:grid;grid-template-columns:1fr;gap:10px;}
.pc{background:var(--bg-c);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;}
.pc-h{padding:13px 16px;border-bottom:1px solid var(--bdr);font-size:13.5px;font-weight:700;color:var(--t1);}
.pt{width:100%;border-collapse:collapse;}
.pt th{padding:8px 12px;text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);background:var(--bg-c2);border-bottom:1px solid var(--bdr);}
.pt td{padding:9px 12px;border-bottom:1px solid var(--bdr);font-size:12.5px;color:var(--t2);vertical-align:middle;}
.pt tr:last-child td{border-bottom:none;}
.pt tr:hover td{background:rgba(255,255,255,.02);}
.pb{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
  border:1px solid transparent;
}
.pb-http{
  background:rgba(37,99,235,.22);
  color:#60a5fa;
  border-color:rgba(96,165,250,.68);
}
.pb-https{
  background:rgba(66,211,130,.22);
  color:#42d382;
  border-color:rgba(66,211,130,.68);
}
.pb-s5{
  background:rgba(124,58,237,.22);
  color:#a78bfa;
  border-color:rgba(167,139,250,.68);
}
.pb-s5s{
  background:rgba(6,182,212,.22);
  color:#22d3ee;
  border-color:rgba(34,211,238,.68);
}
.pb-wg{
  background:rgba(240,82,82,.20);
  color:#ff6b6b;
  border-color:rgba(255,107,107,.62);
}
.tls-y{display:inline-block;padding:2px 7px;border-radius:4px;font-size:9.5px;font-weight:700;background:var(--gd);color:var(--green);border:1px solid var(--gb);}
.tls-n{display:inline-block;padding:2px 7px;border-radius:4px;font-size:9.5px;font-weight:700;background:var(--bg-in);color:var(--t3);border:1px solid var(--bdr);}
.cs{font-family:var(--mono);font-size:10.5px;color:#5fa87d;}
.proto-actions{display:flex;gap:5px;align-items:center;}
.proto-action-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--bdr);background:var(--bg-in);display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;flex-shrink:0;}
.proto-action-btn:hover{background:var(--gd);border-color:var(--gb);color:var(--green);box-shadow:inset 0 0 0 1px var(--gb);}
.proto-action-btn svg{width:12px;height:12px;display:block;pointer-events:none;}
/* ── STATO SERVIZI (right col) ─────────────────────────────────────── */
.status-col{display:flex;flex-direction:column;gap:10px;}
.stc{background:var(--bg-c);border:1px solid var(--bdr);border-radius:12px;padding:16px;}
.stt{font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.stt-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:glow 2.2s infinite;}
.str{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--bdr);font-size:13px;}
.str:last-child{border-bottom:none;}
.strn{color:var(--t2);display:flex;align-items:center;gap:7px;}
.strn svg{width:13px;height:13px;color:var(--t3);}
.str-info{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.stok{display:flex;align-items:center;gap:5px;color:var(--green);font-size:11.5px;font-weight:700;}
.stok::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);display:block;}
.st-uptime{font-size:9.5px;color:var(--t3);}
.uptime-bar{display:flex;gap:1.5px;margin-top:8px;}
.ub{width:6px;height:10px;border-radius:1px;background:var(--green);}
.ub.miss{background:var(--red);}
/* ── FLOATING HELP ─────────────────────────────────────── */
.help-widget{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.help-popup{background:var(--bg-c2);border:1px solid var(--bdr2);border-radius:12px;padding:16px;width:220px;box-shadow:0 8px 32px rgba(0,0,0,.6);display:none;}
.help-popup.open{display:block;}
.help-popup-title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:12px;text-align:center;}
.help-opt{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:6px;font-family:var(--font);transition:opacity .15s;}
.help-opt:last-child{margin-bottom:0;}
.help-wa{background:#25d366;color:#fff;}
.help-tg{background:#229ed9;color:#fff;}
.help-em{background:var(--bg-in);color:var(--t1);border:1px solid var(--bdr2);}
.help-opt:hover{opacity:.85;}
.help-fab{width:52px;height:52px;border-radius:50%;background:var(--green);border:none;color:#111;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(66,211,130,.35);transition:transform .2s,box-shadow .2s;cursor:pointer;}
.help-fab:hover{transform:scale(1.07);box-shadow:0 6px 28px rgba(66,211,130,.5);}
.help-fab svg{width:22px;height:22px;}
/* ── TOAST ─────────────────────────────────────── */
/* [UI REFINE] top updated: 56px topbar + 74px global-bar + 14px gap = 144px.
   Toast now appears below the global action bar, no overlap. */
.toast{position:fixed;top:16px;left:50%;z-index:1100;padding:11px 18px;border-radius:8px;background:var(--green);color:#111;font-size:13px;font-weight:700;opacity:0;transform:translateX(-50%) translateY(-8px);transition:opacity .2s,transform .2s;pointer-events:none;display:flex;align-items:center;gap:7px;white-space:nowrap;}
/* ── GLOBAL MODAL — TCP Fingerprint ─────────────────────────────────────────────
   .m-overlay  — full-screen dim backdrop, flex-centers .m-box
   .m-box      — modal card
   .m-warning  — amber enterprise warning strip
   .m-select   — styled select matching dashboard dark inputs
   .m-btn-*    — cancel and primary action buttons                              */
.m-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px;}
.m-box{background:var(--bg-c);border:1px solid var(--bdr2);border-radius:12px;width:100%;max-width:480px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.6);}
/* Header */
.m-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 16px;border-bottom:1px solid var(--bdr);}
.m-header-left{display:flex;align-items:center;gap:12px;min-width:0;}
.m-icon-wrap{width:36px;height:36px;flex-shrink:0;border-radius:8px;border:1px solid rgba(249,115,22,.3);background:rgba(249,115,22,.07);display:flex;align-items:center;justify-content:center;color:var(--orange);}
.m-icon-wrap svg{width:16px;height:16px;}
.m-title{font-size:14px;font-weight:700;color:var(--t1);line-height:1.3;}
.m-close{width:28px;height:28px;flex-shrink:0;border-radius:6px;border:none;background:transparent;color:var(--t3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .13s,color .13s;}
.m-close:hover{background:var(--bg-in);color:var(--t1);}
.m-close:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
/* Warning strip */
.m-warning{display:flex;align-items:flex-start;gap:10px;margin:16px 20px 0;padding:11px 14px;border-radius:7px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.22);font-size:12px;color:var(--t2);line-height:1.5;}
.m-warning strong{color:var(--amber);font-weight:700;}
/* Field */
.m-field{padding:18px 20px 0;}
.m-field-label{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);margin-bottom:7px;}
.m-select{width:100%;background:var(--bg-in);border:1px solid var(--bdr2);border-radius:7px;color:var(--t1);font-size:13px;font-family:var(--font);padding:9px 12px;outline:none;appearance:none;cursor:pointer;transition:border-color .13s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23717171' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
.m-select:focus{border-color:var(--orange);}
.m-select option{background:var(--bg-c2);color:var(--t1);}
.m-field-desc{margin-top:9px;font-size:11px;color:var(--t3);line-height:1.55;}
/* Footer */
.m-footer{display:flex;justify-content:flex-end;gap:8px;padding:18px 20px 20px;margin-top:6px;}
.m-btn-cancel{padding:8px 16px;border-radius:7px;border:1px solid var(--bdr2);background:var(--bg-in);color:var(--t2);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:background .13s,color .13s;}
.m-btn-cancel:hover{background:var(--bg-h);color:var(--t1);}
.m-btn-cancel:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.m-btn-primary{display:flex;align-items:center;gap:7px;padding:8px 18px;border-radius:7px;border:none;background:var(--green);color:#111;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:opacity .18s;}
.m-btn-primary:hover{opacity:.87;}
.m-btn-primary:focus-visible{outline:2px solid var(--green);outline-offset:3px;}
/* ── END GLOBAL MODAL ──────────────────────────────────────────────────────── */

/* ── CREDENTIALS MODAL EXTRAS ────────────────────────────────────────────────
   Reuses .m-overlay .m-box .m-header .m-warning .m-footer .m-btn-* from above.
   Adds: wider box, auth cards, credential grid, whitelist section, info box.  */
.m-box-wide{ max-width: 540px; }

/* Generic text input — mirrors .m-select for consistency */
.m-input{width:100%;background:var(--bg-in);border:1px solid var(--bdr2);border-radius:7px;color:var(--t1);font-size:13px;font-family:var(--font);padding:9px 12px;outline:none;transition:border-color .13s;box-sizing:border-box;}
.m-input:focus{border-color:var(--green);}
.m-input::placeholder{color:var(--t3);}

/* Password input wrapper with eye button */
.m-input-wrap{position:relative;display:flex;align-items:center;}
.m-input-wrap .m-input{padding-right:38px;}
.m-eye{position:absolute;right:10px;width:24px;height:24px;border:none;background:transparent;color:var(--t3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .13s;}
.m-eye:hover{color:var(--t1);}
.m-eye svg{width:14px;height:14px;}
.m-field-hint{font-size:10.5px;color:var(--t3);margin-top:6px;line-height:1.5;}

/* Auth mode cards */
.m-auth-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.m-auth-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--bdr);border-radius:8px;background:var(--bg-in);cursor:pointer;transition:border-color .13s,background .13s;user-select:none;}
.m-auth-card:hover{border-color:var(--bdr2);background:var(--bg-h);}
.m-auth-card.selected{border-color:var(--gb);background:var(--gd);}
.m-auth-card-icon{width:30px;height:30px;flex-shrink:0;border-radius:7px;border:1px solid var(--bdr2);background:var(--bg-c2);display:flex;align-items:center;justify-content:center;color:var(--t2);}
.m-auth-card.selected .m-auth-card-icon{border-color:var(--gb);background:rgba(66,211,130,.08);color:var(--green);}
.m-auth-card-icon svg{width:14px;height:14px;}
.m-auth-card-body{flex:1;min-width:0;}
.m-auth-card-title{font-size:12.5px;font-weight:700;color:var(--t1);}
.m-auth-card-desc{font-size:10.5px;color:var(--t3);margin-top:2px;line-height:1.4;}
.m-auth-card-check{width:18px;height:18px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity .13s;}
.m-auth-card-check svg{color:#111;}
.m-auth-card.selected .m-auth-card-check{opacity:1;}

/* Username / Password 2-col grid */
.m-cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* IP-only info box */
.m-info-box{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:7px;background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.2);font-size:12px;color:var(--t2);line-height:1.5;color:#93c5fd;}

/* Whitelist section */
.m-wl-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:0;}
.m-wl-input-row{display:flex;gap:8px;margin-top:10px;}
.m-wl-input-row .m-input{flex:1;}
.m-btn-add{padding:9px 16px;border-radius:7px;border:1px solid var(--bdr2);background:var(--bg-in);color:var(--t2);font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font);flex-shrink:0;transition:background .13s,color .13s;}
.m-btn-add:hover{background:var(--bg-h);color:var(--t1);}
.m-wl-list{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.m-wl-empty{font-size:11.5px;color:var(--t3);padding:6px 0;}
.m-wl-item{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-radius:6px;background:var(--bg-in);border:1px solid var(--bdr);font-size:12px;font-family:var(--mono);color:var(--t1);}
.m-wl-remove{background:transparent;border:none;color:var(--t3);display:flex;align-items:center;cursor:pointer;padding:2px;transition:color .13s;}
.m-wl-remove:hover{color:var(--red);}
/* ── END CREDENTIALS MODAL EXTRAS ─────────────────────────────────────────── */
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:3px;}
@media(max-width:1300px){.sr{grid-template-columns:repeat(2,1fr);}.bottom-row{grid-template-columns:1fr;}.mr{grid-template-columns:1fr;}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── Proxy bar responsive: flex-wrap + min-width enforcement ─────────────
   ROOT CAUSE: every .bc has an inline style="flex:X;min-width:0" which has
   specificity 1000 and overrides any stylesheet rule without !important.
   The min-width:0 inline style allowed columns to compress to zero width,
   causing white-space:nowrap content to overflow and overlap adjacent columns.

   FIX STRATEGY — two layers working together:
   1. flex-wrap:wrap on .proxy-bar (see line 136) — columns wrap to the next
      row rather than compressing past their min-width on a single row.
   2. Per-column min-width + flex-basis with !important — physically prevents
      compression below a readable size, triggering wrap at the right moment.

   BREAKPOINTS keep progressive column hiding from the previous pass, now
   working correctly because the !important rules are in scope.

   Column order / handle map (for reference):
   0:name  1:ip  2:conn  3:operator  4:loc  5:signal  6:rep
   7:credentials  8:protocol  9:tcp  10:rotation  11:notes
   rh0..rh10 sit between col[i] and col[i+1].
────────────────────────────────────────────────────────────────────────── */

/* ── Per-column minimum widths ──────────────────────────────────────────
   !important on min-width overrides the inline style="min-width:0" set in renderBar().
   !important is NOT on flex — the JS resize sets el.style.flex (inline) and it must win.
   flex values here are reference/fallback only; inline style takes precedence.
   Sum of all 12 min-widths = 1104px < 1163px available at 1400px viewport → no overflow. */
.proxy-bar .bc[data-col="name"]        { flex: 2 1 120px; min-width: 120px !important; }
.proxy-bar .bc[data-col="ip"]          { flex: 2 1 110px; min-width: 110px !important; }
.proxy-bar .bc[data-col="conn"]        { flex: 1 1 60px;  min-width: 60px  !important; }
.proxy-bar .bc[data-col="operator"]    { flex: 1 1 88px;  min-width: 88px  !important; }
.proxy-bar .bc[data-col="loc"]         { flex: 1 1 60px;  min-width: 60px  !important; }
.proxy-bar .bc[data-col="signal"]      { flex: 1 1 68px;  min-width: 68px  !important; }
.proxy-bar .bc[data-col="rep"]         { flex: 1 1 78px;  min-width: 78px  !important; }
.proxy-bar .bc[data-col="credentials"] { flex: 1 1 128px; min-width: 128px !important; }
.proxy-bar .bc[data-col="protocol"]    { flex: 2 1 88px;  min-width: 88px  !important; }
.proxy-bar .bc[data-col="tcp"]         { flex: 2 1 108px; min-width: 108px !important; }
.proxy-bar .bc[data-col="rotation"]    { flex: 1 1 88px;  min-width: 88px  !important; }
.proxy-bar .bc[data-col="notes"]       { flex: 2 1 108px; min-width: 108px !important; }

/* ── bc-acts + bc-chev: always stay compact, never stretch on wrapped rows */
.bc-acts { flex-shrink: 0 !important; align-self: center; }
.bc-chev { flex-shrink: 0; align-self: center; }

/* ── Hide all resize handles below 1400px —
      with flex-wrap they can end up orphaned between rows.
      At ≥1400px all 12 columns fit on one row and handles work as designed. */
@media (max-width: 1400px) {
  .proxy-bar .rh { display: none; }
}

/* ── ≤1200px: hide Signal, Notes, Operator, Reputazione, Rotazione ─── */
@media (max-width: 1200px) {
  .proxy-bar .bc[data-col="signal"],
  .proxy-bar .bc[data-col="notes"],
  .proxy-bar .bc[data-col="operator"],
  .proxy-bar .bc[data-col="rep"],
  .proxy-bar .bc[data-col="rotation"]  { display: none !important; }
}

/* rotationUrl (optional long-URL column): hidden in the CLOSED bar on narrow/mobile,
   like its "rotation" sibling. Targets only the .proxy-bar .bc cell; the expanded
   detail card lives in .proxy-panel (different markup) so it stays visible.
   Plain rule (no override flag): selector specificity already beats base .bc. */
@media (max-width: 1200px) {
  .proxy-bar .bc[data-col="rotationUrl"] { display: none; }
}

/* ── ≤900px: + TCP, Connessione, Località ───────────────────────────── */
@media (max-width: 900px) {
  .proxy-bar .bc[data-col="tcp"],
  .proxy-bar .bc[data-col="conn"],
  .proxy-bar .bc[data-col="loc"]       { display: none !important; }
  /* compact fixed elements */
  .bc-acts { min-width: 90px !important; padding: 0 6px; }
  .bc-chev { padding: 0 10px; }
}

/* ── ≤640px: + Credenziali, Protocollo — only Name + IP remain ──────── */
@media (max-width: 640px) {
  .proxy-bar .bc[data-col="credentials"],
  .proxy-bar .bc[data-col="protocol"]  { display: none !important; }
  .bc-acts { min-width: 80px !important; padding: 0 4px; }
}
/* ── END Proxy bar responsive ─────────────────────────────────────────── */

/* ── IP Change History Page ───────────────────────────────────────────────
   Scoped under .ip-history-page — zero risk of bleeding into proxy pages.
   Uses existing design tokens: --bg-c, --bg-c2, --bg-in, --bdr, --bdr2,
   --t1, --t2, --t3, --green, --gd, --gb, --orange, --red, --mono, --font.
──────────────────────────────────────────────────────────────────────────── */
.ip-history-page{padding:0 2px;}

/* ── Card ─────────────────────────────────────────────────────────────── */
.ip-history-card{
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:14px;
  overflow:hidden;
}

/* ── Card header ──────────────────────────────────────────────────────── */
.ip-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px 14px;
  border-bottom:1px solid var(--bdr);
  gap:12px;
  flex-wrap:wrap;
}
.iph-head-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.iph-title{font-size:14px;font-weight:700;color:var(--t1);}
.iph-count{
  font-size:11px;font-weight:700;
  color:var(--green);
  background:var(--gd);
  border:1px solid var(--gb);
  border-radius:20px;
  padding:2px 10px;
  font-family:var(--mono);
  letter-spacing:.02em;
}
.iph-sub{font-size:11px;color:var(--t3);font-weight:500;}
.iph-refresh-btn{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;
  background:var(--bg-in);
  border:1px solid var(--bdr2);
  border-radius:7px;
  color:var(--t2);
  font-size:12px;font-weight:600;
  cursor:pointer;
  transition:background .13s,color .13s,border-color .13s;
  flex-shrink:0;
}
.iph-refresh-btn:hover{background:var(--gd);color:var(--green);border-color:var(--gb);}
.iph-refresh-btn svg{flex-shrink:0;}

/* ── Legend ───────────────────────────────────────────────────────────── */
.ip-history-legend{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 20px;
  border-bottom:1px solid var(--bdr);
  background:var(--bg-c2);
}
.iph-legend-item{display:flex;align-items:center;}

/* ── History badge variants ───────────────────────────────────────────── */
.history-badge{
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:700;
  padding:2px 9px;
  border-radius:20px;
  white-space:nowrap;
  letter-spacing:.02em;
}
.history-badge--manual{
  background:rgba(249,115,22,.12);
  border:1px solid rgba(249,115,22,.28);
  color:#f97316;
}
.history-badge--scheduled{
  background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.25);
  color:#38bdf8;
}
.history-badge--reboot{
  background:rgba(240,82,82,.1);
  border:1px solid rgba(240,82,82,.25);
  color:#f05252;
}
.history-badge--natural{
  background:var(--bg-in);
  border:1px solid var(--bdr2);
  color:var(--t2);
}
.history-badge--first{
  background:var(--gd);
  border:1px solid var(--gb);
  color:var(--green);
}

/* ── Current badge ────────────────────────────────────────────────────── */
.history-current-badge{
  font-size:9.5px;font-weight:700;
  padding:1px 7px;
  border-radius:20px;
  background:var(--gd);
  border:1px solid var(--gb);
  color:var(--green);
  letter-spacing:.04em;
  white-space:nowrap;
}

/* ── Table wrapper (horizontal scroll on narrow viewports) ────────────── */
.ip-history-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ── Table ────────────────────────────────────────────────────────────── */
.ip-history-table{
  width:100%;border-collapse:collapse;
  font-size:13px;
}
.ip-history-table thead tr{
  background:var(--bg-c2);
  border-bottom:1px solid var(--bdr2);
}
.ip-history-table th{
  padding:9px 16px;
  text-align:left;
  font-size:9.5px;font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--t3);
  white-space:nowrap;
}
.iph-row{
  border-bottom:1px solid var(--bdr);
  transition:background .1s;
}
.iph-row:last-child{border-bottom:none;}
.iph-row:hover{background:var(--bg-h);}
.ip-history-table td{
  padding:9px 16px;
  color:var(--t2);
  vertical-align:middle;
  white-space:nowrap;
}
/* IP cell */
.iph-ip-cell{min-width:200px;}
.iph-ip{
  font-family:var(--mono);
  font-size:13px;font-weight:700;
  color:var(--green);
  user-select:text;
}
.iph-device{color:var(--t1);font-weight:600;}
.iph-provider{color:var(--t2);}
.iph-ts{font-family:var(--mono);font-size:12px;color:var(--t3);}
/* ── Head right controls (filter + page-size selects) ────────────────── */
.iph-head-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.iph-select{
  background:var(--bg-in);
  border:1px solid var(--bdr2);
  border-radius:7px;
  color:var(--t2);
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  padding:6px 14px;
  cursor:pointer;
  outline:none;
  transition:background .13s,color .13s,border-color .13s;
  flex-shrink:0;
}
.iph-select:hover{background:var(--bg-h);color:var(--t1);border-color:var(--bdr2);}
.iph-select:focus{border-color:var(--green);}
.iph-select option{background:var(--bg-c2);color:var(--t1);font-family:var(--font);}

/* ── Pagination bar ───────────────────────────────────────────────────── */
.ip-history-pagination{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:12px 16px;
  border-top:1px solid var(--bdr);
}
.iph-page-btn{
  display:flex;align-items:center;gap:6px;
  background:var(--bg-in);
  border:1px solid var(--bdr);
  border-radius:8px;
  color:var(--t1);
  font-size:12px;font-weight:600;
  padding:6px 12px;
  cursor:pointer;
}
.iph-page-btn:hover:not(:disabled){background:var(--gd);color:var(--green);border-color:var(--gb);}
.iph-page-btn:disabled{opacity:.4;cursor:not-allowed;}
.iph-page-info{font-size:12px;color:var(--t3);font-weight:600;}
/* ── END IP Change History Page ───────────────────────────────────────── */


/* ── Subscription Page ────────────────────────────────────────────────────
   Scoped under .subscription-page — zero bleed to proxy/history pages.
   Token-based: all colours from variables.css design system.
──────────────────────────────────────────────────────────────────────────── */
.subscription-page{padding:0 2px;}

/* ── Two-column layout: main card left, actions card right ───────────── */
.subscription-layout{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:16px;
  align-items:start;
}
@media(max-width:900px){
  .subscription-layout{grid-template-columns:1fr;}
}

/* ── Card base ────────────────────────────────────────────────────────── */
.subscription-card{
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:14px;
  overflow:hidden;
}

/* ── Card header row ──────────────────────────────────────────────────── */
.sub-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 20px 12px;
  border-bottom:1px solid var(--bdr);
  font-size:13px;
  font-weight:700;
  color:var(--t1);
  background:var(--bg-c2);
}
.sub-card-head svg{color:var(--t3);flex-shrink:0;}

/* ── Info grid — 2 columns of field/value pairs ──────────────────────── */
.subscription-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
@media(max-width:600px){
  .subscription-grid{grid-template-columns:1fr;}
}
.subscription-field{
  padding:14px 20px;
  border-bottom:1px solid var(--bdr);
  border-right:1px solid var(--bdr);
}
.subscription-field:nth-child(even){border-right:none;}
.subscription-field:nth-last-child(-n+2){border-bottom:none;}
@media(max-width:600px){
  .subscription-field{border-right:none;}
  .subscription-field:last-child{border-bottom:none;}
  .subscription-field:nth-last-child(2){border-bottom:1px solid var(--bdr);}
}

.subscription-label{
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--t3);
  margin-bottom:6px;
}
.subscription-value{
  font-size:14px;
  font-weight:600;
  color:var(--t1);
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.sub-plan-name{font-size:15px;font-weight:800;color:var(--t1);}
.sub-price{font-family:var(--mono);font-size:15px;font-weight:700;}

/* ── Status badge — green "Attivo" ───────────────────────────────────── */
.subscription-status-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  background:var(--gd);
  border:1px solid var(--gb);
  color:var(--green);
}
.sub-status-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}

/* ── Auto-renew off indicator ────────────────────────────────────────── */
.subscription-renew-off{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;
  color:var(--red);
  opacity:.9;
}
.subscription-renew-off svg{flex-shrink:0;}

/* ── Days remaining sub-label ────────────────────────────────────────── */
.sub-days-left{
  display:block;
  font-size:11px;
  font-weight:500;
  color:var(--t3);
  margin-top:3px;
}

/* ── Actions card ────────────────────────────────────────────────────── */
.subscription-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
}

/* ── Action buttons base ─────────────────────────────────────────────── */
.subscription-action-btn{
  display:flex;align-items:center;gap:9px;
  width:100%;
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  text-align:left;
  transition:filter .13s,opacity .13s;
}
.subscription-action-btn:hover{filter:brightness(1.12);}
.subscription-action-btn svg{flex-shrink:0;}

/* ── Button variants ─────────────────────────────────────────────────── */
.subscription-action-btn--purchase{
  background:var(--gd);
  border-color:var(--gb);
  color:var(--green);
}
.subscription-action-btn--renew{
  background:rgba(66,211,130,.06);
  border-color:rgba(66,211,130,.15);
  color:var(--green);
  opacity:.85;
}
.subscription-action-btn--change{
  background:var(--od);
  border-color:var(--ob);
  color:var(--orange);
}
.subscription-action-btn--payments{
  background:rgba(56,189,248,.08);
  border-color:rgba(56,189,248,.2);
  color:#38bdf8;
}
.subscription-action-btn--cancel{
  background:rgba(240,82,82,.08);
  border-color:rgba(240,82,82,.2);
  color:var(--red);
}
/* ── END Subscription Page ────────────────────────────────────────────── */

/* ── Statistics Page ──────────────────────────────────────────────────────
   Scoped under .stats-page. Token-based, zero external dependencies.
   Grafici via Canvas HTML5.
──────────────────────────────────────────────────────────────────────────── */
.stats-page{display:flex;flex-direction:column;gap:14px;}

/* ── Filter bar ───────────────────────────────────────────────────────── */
.stats-filter-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
}
.stats-filter-label{
  font-size:12px;font-weight:700;color:var(--t2);
  white-space:nowrap;margin-right:4px;
}
.stats-filter-pills{display:flex;gap:6px;flex-wrap:wrap;}
.stats-filter-pill{
  padding:5px 14px;
  border-radius:20px;
  font-size:12px;font-weight:600;
  cursor:pointer;
  border:1px solid var(--bdr2);
  background:var(--bg-in);
  color:var(--t2);
  transition:background .13s,color .13s,border-color .13s;
}
.stats-filter-pill.active,
.stats-filter-pill:hover{
  background:var(--gd);
  border-color:var(--gb);
  color:var(--green);
}

/* ── Status row ───────────────────────────────────────────────────────── */
.stats-status-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.stats-ts{font-size:11px;color:var(--t3);font-family:var(--mono);}
.stats-agg-badge{
  font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;
  background:var(--bg-in);border:1px solid var(--bdr2);color:var(--t2);
}
.stats-online-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;
  background:var(--gd);border:1px solid var(--gb);color:var(--green);
}
.stats-offline-badge{
  font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;
  background:rgba(240,82,82,.1);border:1px solid rgba(240,82,82,.25);color:var(--red);
}

/* ── KPI grid ─────────────────────────────────────────────────────────── */
.stats-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@media(max-width:900px){.stats-kpi-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.stats-kpi-grid{grid-template-columns:1fr;}}

.stats-kpi-card{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
}
.kpi-icon{
  width:34px;height:34px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
}
.kpi-icon--up { background:var(--gd);  color:var(--green);  border:1px solid var(--gb); }
.kpi-icon--dn { background:rgba(56,189,248,.1); color:#38bdf8; border:1px solid rgba(56,189,248,.25);}
.kpi-icon--gb { background:var(--od);  color:var(--orange); border:1px solid var(--ob); }
.kpi-icon--rot{ background:var(--gd);  color:var(--green);  border:1px solid var(--gb); }
.kpi-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:4px;}
.kpi-value{font-size:17px;font-weight:800;color:var(--t1);font-family:var(--mono);}
.kpi-unit{font-size:10px;font-weight:500;color:var(--t3);}

/* ── Chart card shared ────────────────────────────────────────────────── */
.stats-card{
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
  overflow:hidden;
}
.stats-card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:12px 16px;
  background:var(--bg-c2);
  border-bottom:1px solid var(--bdr);
  font-size:13px;font-weight:700;color:var(--t1);
  flex-wrap:wrap;
}

/* ── Chart grid (main + donut) ────────────────────────────────────────── */
.stats-chart-grid{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:12px;
  align-items:start;
}
@media(max-width:900px){.stats-chart-grid{grid-template-columns:1fr;}}

/* ── Toolbar (range btns) ─────────────────────────────────────────────── */
.stats-chart-toolbar{display:flex;gap:3px;}
.stats-range-btn{
  padding:3px 9px;border-radius:6px;
  font-size:11px;font-weight:600;
  border:1px solid var(--bdr2);
  background:var(--bg-in);
  color:var(--t3);cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.stats-range-btn.active,.stats-range-btn:hover{
  background:var(--gd);border-color:var(--gb);color:var(--green);
}

/* ── Legend row ───────────────────────────────────────────────────────── */
.stats-chart-legend,.stats-rot-legend{
  display:flex;align-items:center;gap:14px;
  padding:8px 16px 0;
}
.scl-item{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--t2);}
.scl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.scl-dot--up{background:#42d382;}
.scl-dot--dn{background:#38bdf8;}

/* ── Canvas wrap ──────────────────────────────────────────────────────── */
.stats-canvas-wrap{
  position:relative;
  height:200px;
  padding:8px 0 0;
}
.stats-canvas-wrap canvas{
  width:100%!important;
  height:100%!important;
  display:block;
}
.stats-canvas-wrap--sm{height:130px;}

/* ── Tooltip ──────────────────────────────────────────────────────────── */
.stats-chart-tooltip{
  position:absolute;
  pointer-events:none;
  background:rgba(13,13,13,0.92);
  border:1px solid var(--bdr2);
  border-radius:8px;
  padding:8px 12px;
  font-size:11.5px;
  min-width:130px;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
  z-index:10;
}
.stt-time{font-size:10px;font-weight:700;color:var(--t3);margin-bottom:6px;font-family:var(--mono);}
.stt-row{display:flex;align-items:center;gap:6px;color:var(--t1);font-weight:600;margin-bottom:3px;}
.stt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.stt-val{margin-left:auto;font-family:var(--mono);font-size:11px;}

/* ── Donut card ───────────────────────────────────────────────────────── */
.stats-donut-card .stats-card-head{justify-content:flex-start;}
.stats-donut-wrap{display:flex;justify-content:center;padding:16px 0 8px;}
.stats-donut-legend{display:flex;flex-direction:column;gap:6px;padding:0 16px 14px;}
.donut-leg-item{display:flex;align-items:center;gap:8px;font-size:12px;}
.donut-leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.donut-leg-label{color:var(--t2);font-weight:500;flex:1;}
.donut-leg-val{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--t1);}

/* ── Lower grid ───────────────────────────────────────────────────────── */
.stats-lower-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:700px){.stats-lower-grid{grid-template-columns:1fr;}}

/* ── Subscription mini-card ───────────────────────────────────────────── */
.stats-sub-mini{padding:14px 16px;display:flex;flex-direction:column;gap:9px;}
.ssm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ssm-label{font-size:11px;font-weight:600;color:var(--t3);}
.ssm-value{font-size:13px;font-weight:700;color:var(--t1);}
.ssm-plan{color:var(--green);font-size:14px;font-weight:800;}
.ssm-progress-wrap{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.ssm-progress-track{height:4px;background:var(--bg-in);border-radius:2px;overflow:hidden;}
.ssm-progress-fill{height:100%;background:var(--green);border-radius:2px;transition:width .3s;}
.ssm-progress-label{font-size:10px;color:var(--t3);}

/* ── Mini history ─────────────────────────────────────────────────────── */
.stats-mini-history{}
.stats-table{font-size:12px;}
/* ── END Statistics Page ──────────────────────────────────────────────── */

/* ── API Keys Page ────────────────────────────────────────────────────────
   Scoped under .api-keys-page. Modal uses existing .m-* classes — no extra modal CSS.
──────────────────────────────────────────────────────────────────────────── */
.api-keys-page{padding:0 2px;}

.api-keys-card{
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:14px;
  overflow:hidden;
}

/* ── Card header ──────────────────────────────────────────────────────── */
.api-keys-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 20px;
  background:var(--bg-c2);
  border-bottom:1px solid var(--bdr);
  flex-wrap:wrap;
}
.aki-head-left{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--t1);
}
.aki-head-left svg{color:var(--t3);}

/* ── Empty state ──────────────────────────────────────────────────────── */
.api-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:52px 24px;gap:12px;
}
.api-empty-icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:var(--bg-in);
  border:1px solid var(--bdr2);
  color:var(--t3);
}
.api-empty-title{font-size:14px;font-weight:700;color:var(--t1);}
.api-empty-sub{font-size:12px;color:var(--t3);text-align:center;max-width:300px;line-height:1.5;}

/* ── Table ────────────────────────────────────────────────────────────── */
.api-keys-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.api-keys-table{width:100%;border-collapse:collapse;font-size:13px;}
.api-keys-table thead tr{background:var(--bg-c2);border-bottom:1px solid var(--bdr2);}
.api-keys-table th{
  padding:9px 16px;text-align:left;
  font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--t3);white-space:nowrap;
}
.akt-row{border-bottom:1px solid var(--bdr);transition:background .1s;}
.akt-row:last-child{border-bottom:none;}
.akt-row:hover{background:var(--bg-h);}
.api-keys-table td{padding:10px 16px;color:var(--t2);vertical-align:middle;white-space:nowrap;}
.akt-name{color:var(--t1);font-weight:600;}
.akt-rate{font-family:var(--mono);font-size:12px;}
.akt-date{font-family:var(--mono);font-size:12px;color:var(--t3);}

/* ── Masked key ───────────────────────────────────────────────────────── */
.api-key-masked{
  font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--t2);letter-spacing:.04em;
  cursor:default;
}

/* ── Status badge ─────────────────────────────────────────────────────── */
.api-key-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;
  padding:2px 9px;border-radius:20px;
  background:var(--gd);border:1px solid var(--gb);color:var(--green);
}

/* ── Row action buttons ───────────────────────────────────────────────── */
.api-key-actions{display:flex;align-items:center;gap:5px;}
.api-key-action-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;
  font-size:11px;font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .13s,color .13s,border-color .13s;
}
.api-key-action-btn--copy{
  background:var(--bg-in);border-color:var(--bdr2);color:var(--t2);
}
.api-key-action-btn--copy:hover{
  background:var(--gd);border-color:var(--gb);color:var(--green);
}
.api-key-action-btn--regen{
  background:var(--bg-in);border-color:var(--bdr2);color:var(--t2);
}
.api-key-action-btn--regen:hover{
  background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.2);color:#38bdf8;
}
.api-key-action-btn--del{
  background:var(--bg-in);border-color:var(--bdr2);color:var(--t2);
}
.api-key-action-btn--del:hover{
  background:rgba(240,82,82,.08);border-color:rgba(240,82,82,.2);color:var(--red);
}
/* ── END API Keys Page ────────────────────────────────────────────────── */

/* ── Notifications Page ───────────────────────────────────────────────────
   Scoped under .notifications-page.
   Toggles use .notification-option-check / .checked pattern — no JS framework.
──────────────────────────────────────────────────────────────────────────── */
.notifications-page{display:flex;flex-direction:column;gap:14px;}

/* ── Info bar ─────────────────────────────────────────────────────────── */
.notifications-info-bar{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 16px;
  background:rgba(56,189,248,.07);
  border:1px solid rgba(56,189,248,.2);
  border-radius:10px;
  font-size:12px;font-weight:500;
  color:#7dd3fc;
  line-height:1.5;
}

/* ── Two-column layout ────────────────────────────────────────────────── */
.notifications-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:14px;
  align-items:start;
}
@media(max-width:900px){.notifications-layout{grid-template-columns:1fr;}}

/* ── Notification section (left column) ──────────────────────────────── */
.notification-section{
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:12px;
}
.notification-section:last-child{margin-bottom:0;}
.notification-section-head{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  background:var(--bg-c2);
  border-bottom:1px solid var(--bdr);
  font-size:12px;font-weight:700;color:var(--t1);
}
.notification-section-head svg{color:var(--t3);}

/* ── Notification option row ──────────────────────────────────────────── */
.notification-option{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 16px;
  border-bottom:1px solid var(--bdr);
  cursor:pointer;
  transition:background .1s;
  user-select:none;
}
.notification-option:last-child{border-bottom:none;}
.notification-option:hover{background:var(--bg-h);}

/* Custom checkbox */
.notification-option-check{
  width:18px;height:18px;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--bdr2);
  border-radius:4px;
  background:var(--bg-in);
  display:flex;align-items:center;justify-content:center;
  transition:background .13s,border-color .13s;
}
.notification-option-check svg{opacity:0;transition:opacity .1s;color:#111;}
.notification-option-check.checked{
  background:var(--green);
  border-color:var(--green);
}
.notification-option-check.checked svg{opacity:1;}

.notification-option-icon{
  width:28px;height:28px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  background:var(--bg-in);
  border:1px solid var(--bdr);
  color:var(--t3);
}
.notification-option-body{flex:1;min-width:0;}
.notification-option-title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:3px;}
.notification-option-desc{font-size:11.5px;color:var(--t3);line-height:1.5;}

/* ── Side column shared card base ────────────────────────────────────── */
.notif-side-card{
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:12px;
  padding:0 0 14px;
}
.notif-side-head{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px 10px;
  background:var(--bg-c2);
  border-bottom:1px solid var(--bdr);
  font-size:12px;font-weight:700;color:var(--t1);
  margin-bottom:10px;
}
.notif-side-head svg{color:var(--t3);}
.notif-side-desc{font-size:11.5px;color:var(--t3);padding:0 16px 8px;line-height:1.5;}

/* ── Delivery options ─────────────────────────────────────────────────── */
.delivery-options{display:flex;flex-direction:column;gap:5px;padding:0 12px;}
.delivery-option{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;
  border-radius:8px;
  font-size:12px;font-weight:600;
  color:var(--t2);
  cursor:pointer;
  border:1px solid transparent;
  background:var(--bg-in);
  transition:background .13s,color .13s,border-color .13s;
  user-select:none;
}
.delivery-option:hover{background:var(--bg-h);color:var(--t1);}
.delivery-option.active{
  background:var(--gd);
  border-color:var(--gb);
  color:var(--green);
  font-weight:700;
}

/* ── Form field inside side cards ────────────────────────────────────── */
.notif-field{padding:0 14px;}
.notif-field-label{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);margin-bottom:6px;}
.notif-field-desc{font-size:11px;color:var(--t3);margin-top:7px;line-height:1.5;}
.notif-tg-row{display:flex;gap:7px;align-items:stretch;}
.notif-test-btn{
  display:flex;align-items:center;gap:5px;
  padding:0 12px;
  border-radius:7px;
  border:1px solid var(--bdr2);
  background:var(--bg-in);
  color:var(--t2);
  font-size:12px;font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .13s,color .13s,border-color .13s;
}
.notif-test-btn:hover{background:var(--gd);color:var(--green);border-color:var(--gb);}

/* ── Telegram info/warning boxes ──────────────────────────────────────── */
.telegram-info-box{
  margin:0 14px 10px;
  padding:10px 13px;
  background:rgba(56,189,248,.07);
  border:1px solid rgba(56,189,248,.2);
  border-radius:8px;
  font-size:11.5px;color:#7dd3fc;
}
.tib-title{font-weight:700;margin-bottom:6px;}
.tib-steps{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px;line-height:1.5;}
.telegram-warning-box{
  display:flex;align-items:flex-start;gap:8px;
  margin:0 14px 12px;
  padding:9px 12px;
  background:rgba(249,115,22,.08);
  border:1px solid rgba(249,115,22,.22);
  border-radius:8px;
  font-size:11.5px;color:#fdba74;line-height:1.5;
}
.telegram-warning-box svg{color:var(--orange);margin-top:1px;}

/* ── Save button ──────────────────────────────────────────────────────── */
.notification-save-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px 16px;
  border-radius:9px;
  border:none;
  background:var(--green);
  color:#111;
  font-size:13px;font-weight:700;
  cursor:pointer;
  font-family:var(--font);
  transition:opacity .15s;
}
.notification-save-btn:hover{opacity:.87;}
/* ── END Notifications Page ───────────────────────────────────────────── */

/* ── Language Selector ────────────────────────────────────────────────── */
.top-language-selector{position:relative;}

.lang-trigger{
  display:flex;align-items:center;gap:5px;
  padding:5px 9px;
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:8px;
  cursor:pointer;
  color:var(--t2);
  font-family:var(--font);
  font-size:12px;font-weight:600;
  transition:border-color .15s, background .15s, color .15s;
  white-space:nowrap;
  height:32px;
}
.lang-trigger:hover{border-color:var(--bdr2);background:var(--bg-h);color:var(--t1);}
.lang-trigger .lang-flag{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.lang-trigger .lang-flag svg{width:17px;height:12.75px;display:block;border-radius:2.5px;overflow:hidden;}
.lang-trigger .lang-code{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--t1);}
.lang-chevron{color:var(--t3);transition:transform .18s;flex-shrink:0;}
.top-language-selector.open .lang-trigger{border-color:var(--green);color:var(--t1);}
.top-language-selector.open .lang-chevron{transform:rotate(180deg);}

.lang-menu{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  left:auto;
  min-width:100%;
  width:max-content;
  background:var(--bg-c);
  border:1px solid var(--bdr2);
  border-radius:10px;
  padding:4px;
  box-shadow:0 8px 28px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
  z-index:9100;
}
.top-language-selector.open .lang-menu{display:block;}

.lang-option{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  border-radius:7px;
  cursor:pointer;
  color:var(--t2);
  font-family:var(--font);
  font-size:12.5px;
  transition:background .12s, color .12s;
}
.lang-option:hover{background:var(--bg-h);color:var(--t1);}
.lang-option.active{background:var(--gd);color:var(--green);}
.lang-option.active .lang-code{color:var(--green);}
.lang-option .lang-flag{display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;flex-shrink:0;}
.lang-option .lang-flag svg{width:18px;height:13.5px;display:block;border-radius:2.5px;overflow:hidden;}
.lang-option .lang-code{font-size:11px;font-weight:700;letter-spacing:.4px;min-width:20px;color:var(--t3);}
.lang-option.active .lang-code{color:var(--green);}
.lang-option .lang-label{font-size:12.5px;color:inherit;}
/* ── END Language Selector ────────────────────────────────────────────── */

/* ── Dashboard Overview Page ──────────────────────────────────────────── */

/* Refresh button in header */
.pg-header-actions-dashboard{display:flex;align-items:center;}
.btn-dashboard-refresh{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid var(--bdr2);
  background:var(--bg-c);
  color:var(--t2);
  font-family:var(--font);font-size:12.5px;font-weight:600;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.btn-dashboard-refresh:hover{border-color:var(--green);color:var(--green);background:var(--bg-h);}
.btn-dashboard-refresh svg{color:inherit;}

/* Page wrapper */
.dashboard-page{display:flex;flex-direction:column;gap:20px;padding:0 0 32px;}

/* ── KPI Grid ── */
.dashboard-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.dashboard-kpi-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
  transition:border-color .15s;
}
.dashboard-kpi-card:hover{border-color:var(--bdr2);}
.dashboard-kpi-body{display:flex;flex-direction:column;gap:3px;}
.dashboard-kpi-label{font-size:10px;font-weight:700;letter-spacing:.7px;color:var(--t3);text-transform:uppercase;}
.dashboard-kpi-value{font-size:26px;font-weight:800;color:var(--t1);font-family:var(--mono);line-height:1.1;}
.dashboard-kpi-sub{font-size:11px;color:var(--t3);margin-top:2px;}
.dashboard-kpi-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--gd);border:1px solid var(--gb);
  display:flex;align-items:center;justify-content:center;
  color:var(--green);flex-shrink:0;
}
.dashboard-kpi-icon svg{width:18px;height:18px;}

/* ── Main 2-col grid ── */
.dashboard-main-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  align-items:stretch;
}

/* ── Shared card chrome ── */
.dashboard-devices-card,
.dashboard-subscription-card{
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
  overflow:hidden;
}
.dash-card-header{
  display:flex;align-items:center;gap:8px;
  padding:14px 18px;
  background:var(--bg-c2);
  border-bottom:1px solid var(--bdr);
  font-size:13px;font-weight:700;color:var(--t1);
}
.dash-card-header svg{color:var(--t3);}
.dash-card-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;}

/* ── Plan strip ── */
.dashboard-plan-strip{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;
  background:var(--od);
  border:1px solid var(--ob);
  border-radius:8px;
  font-size:12.5px;
}
.dashboard-plan-strip svg{color:var(--orange);flex-shrink:0;}
.dashboard-plan-name{font-weight:700;color:var(--orange);}
.dashboard-plan-meta{color:var(--t3);font-size:12px;margin-left:2px;}

/* ── Device list ── */
.dashboard-device-list{display:flex;flex-direction:column;}
.dashboard-device-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--bdr);
  transition:background .12s;
}
.dashboard-device-row:last-child{border-bottom:none;}
.dashboard-device-row:hover{background:var(--bg-h);margin:0 -18px;padding-left:18px;padding-right:18px;}
.dashboard-device-left{display:flex;align-items:center;}
.dashboard-device-main{display:flex;flex-direction:column;gap:2px;}
.dashboard-device-label{font-size:9.5px;font-weight:700;letter-spacing:.7px;color:var(--t3);text-transform:uppercase;}
.dashboard-device-line{display:flex;align-items:center;gap:6px;}
.dashboard-device-name{font-size:13px;font-weight:700;color:var(--t1);}
.dashboard-device-status{
  width:7px;height:7px;border-radius:50%;
  background:var(--t3);flex-shrink:0;
}
.dashboard-device-status.online{background:var(--green);box-shadow:0 0 5px rgba(66,211,130,.5);}
.dashboard-device-state{font-size:12px;font-weight:600;color:var(--t3);}
.dashboard-device-status.online + .dashboard-device-state{color:var(--green);}
.dashboard-device-ip{font-family:var(--mono);font-size:11.5px;color:var(--green);}
.dashboard-device-right{display:flex;align-items:center;}
.dashboard-protocol-count{
  display:flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:600;
  color:var(--orange);
  background:var(--od);
  border:1px solid var(--ob);
  border-radius:6px;
  padding:3px 8px;
}
.dashboard-protocol-count svg{color:inherit;}

/* ── Subscription card ── */
.dashboard-sub-field{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:2px 0;}
.dashboard-sub-sep{height:1px;background:var(--bdr);margin:4px 0;}
.dashboard-sub-label{font-size:11.5px;color:var(--t3);font-weight:600;letter-spacing:.3px;flex-shrink:0;}
.dashboard-sub-value{font-size:13px;font-weight:700;color:var(--t1);text-align:right;}
.dashboard-sub-date-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.dashboard-sub-days{font-size:11px;color:var(--t3);}
.dashboard-status-badge{
  display:inline-block;
  padding:2px 9px;
  border-radius:6px;
  background:var(--gd);
  border:1px solid var(--gb);
  color:var(--green);
  font-size:11.5px;font-weight:700;
}

/* ── Responsive ── */
@media(max-width:900px){
  .dashboard-kpi-grid{grid-template-columns:repeat(2,1fr);}
  .dashboard-main-grid{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .dashboard-kpi-grid{grid-template-columns:1fr;}
}
/* ── END Dashboard Overview Page ─────────────────────────────────────── */

/* ── Payments Page ────────────────────────────────────────────────────── */
.payments-page{display:flex;flex-direction:column;gap:20px;padding:0 0 32px;}

.payments-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--green);
}
.payments-title-block{display:flex;flex-direction:column;gap:4px;margin-top:-8px;}
.payments-title{font-size:22px;font-weight:800;color:var(--t1);line-height:1.2;}
.payments-subtitle{font-size:13px;color:var(--t3);}

/* Table card */
.payments-table-card{
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
  overflow:hidden;
}
.payments-table-wrap{overflow-x:auto;}
.payments-table{
  width:100%;border-collapse:collapse;
  font-family:var(--font);font-size:13px;
}
.pt-th{
  padding:11px 16px;
  background:var(--bg-c2);
  border-bottom:1px solid var(--bdr);
  text-align:left;
  font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--t3);
  white-space:nowrap;
}
.pt-th svg{vertical-align:middle;margin-right:5px;color:var(--t3);}
.payments-row{border-bottom:1px solid var(--bdr);transition:background .12s;}
.payments-row:last-child{border-bottom:none;}
.payments-row:hover{background:var(--bg-h);}
.pt-cell{
  padding:12px 16px;
  color:var(--t2);
  vertical-align:middle;
  white-space:nowrap;
}
.pt-cell--desc{color:var(--t1);font-weight:600;}

/* Badges */
.payment-amount{
  font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--green);
}
.payment-status-badge{
  display:inline-block;padding:3px 9px;border-radius:6px;
  font-size:11.5px;font-weight:700;
  background:var(--bg-in);color:var(--t2);border:1px solid var(--bdr2);
}
.payment-status-badge--green{background:var(--gd);color:var(--green);border-color:var(--gb);}
.payment-status-badge--orange{background:var(--od);color:var(--orange);border-color:var(--ob);}
.payment-status-badge--red{background:rgba(240,82,82,.1);color:var(--red);border-color:rgba(240,82,82,.25);}

.payment-method-badge{
  display:inline-block;padding:3px 9px;border-radius:6px;
  font-size:11.5px;font-weight:600;
  background:var(--bg-in);color:var(--t2);border:1px solid var(--bdr);
}
.payment-id-badge{
  display:inline-block;padding:3px 9px;border-radius:6px;
  font-size:11px;font-weight:600;font-family:var(--mono);
  background:var(--bg-in);color:var(--t3);border:1px solid var(--bdr);
  letter-spacing:.3px;
}

/* Summary grid */
.payments-summary-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.payments-summary-card{
  padding:18px 20px;
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .15s;
}
.payments-summary-card:hover{border-color:var(--bdr2);}
.payments-summary-label{
  font-size:10px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--t3);
}
.payments-summary-value{
  font-size:28px;font-weight:800;color:var(--t1);
  font-family:var(--mono);line-height:1.1;
}
.payments-summary-value--green{color:var(--green);}

/* Responsive */
@media(max-width:700px){
  .payments-summary-grid{grid-template-columns:1fr;}
  .payments-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
/* ── END Payments Page ────────────────────────────────────────────────── */

/* ── Profile Page ─────────────────────────────────────────────────────── */
.profile-page{display:flex;flex-direction:column;gap:20px;padding:0 0 32px;}
.profile-layout{display:grid;grid-template-columns:1fr 280px;gap:14px;align-items:start;}
.profile-main-col{display:flex;flex-direction:column;gap:14px;}

/* Shared card chrome reuse: .profile-card, .danger-zone-card use .dash-card-header / .dash-card-body */
.profile-card,
.danger-zone-card,
.profile-avatar-card{
  background:var(--bg-c);
  border:1px solid var(--bdr);
  border-radius:12px;
  overflow:hidden;
}

/* Form grid */
.profile-form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.profile-field{display:flex;flex-direction:column;gap:5px;}
.profile-field-label{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);}
.profile-input{
  width:100%;padding:8px 12px;
  background:var(--bg-in);
  border:1px solid var(--bdr);
  border-radius:8px;
  color:var(--t1);
  font-family:var(--font);font-size:13px;
  outline:none;
  transition:border-color .15s;
  box-sizing:border-box;
}
.profile-input:focus{border-color:var(--green);}
.profile-input--readonly{color:var(--t2);cursor:default;}
.profile-input--readonly:focus{border-color:var(--bdr);}

.profile-actions{display:flex;justify-content:flex-end;padding-top:4px;}
.profile-save-btn{
  display:flex;align-items:center;gap:7px;
  padding:8px 18px;
  background:var(--green);color:#111;
  border:none;border-radius:8px;
  font-family:var(--font);font-size:13px;font-weight:700;
  cursor:pointer;transition:opacity .15s;
}
.profile-save-btn:hover{opacity:.87;}

/* Avatar card */
.profile-avatar-card .dash-card-body{padding:20px 18px;}
.profile-avatar-preview{
  width:96px;height:96px;border-radius:50%;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.profile-avatar-img{width:96px;height:96px;object-fit:cover;border-radius:50%;display:block;}
.profile-avatar-initial{font-size:34px;font-weight:800;color:#111;}
.profile-avatar-desc{font-size:12px;color:var(--t3);line-height:1.5;text-align:center;}
.profile-avatar-actions{display:flex;flex-direction:column;gap:8px;width:100%;}
.profile-avatar-upload-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:8px 14px;
  background:var(--green);color:#111;
  border:none;border-radius:8px;
  font-family:var(--font);font-size:12.5px;font-weight:700;
  cursor:pointer;transition:opacity .15s;
}
.profile-avatar-upload-btn:hover{opacity:.87;}
.profile-avatar-remove-btn{
  width:100%;padding:7px 14px;
  background:transparent;color:var(--t3);
  border:1px solid var(--bdr);border-radius:8px;
  font-family:var(--font);font-size:12.5px;font-weight:600;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.profile-avatar-remove-btn:hover{border-color:var(--red);color:var(--red);}
.profile-avatar-hint{font-size:11px;color:var(--t3);}

/* Danger zone */
.danger-zone-header{color:var(--red);}
.danger-zone-header svg{color:var(--red);}
.danger-zone-card{border-color:rgba(240,82,82,.2);}
.danger-zone-content{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.danger-zone-text{display:flex;flex-direction:column;gap:4px;}
.danger-zone-title{font-size:13px;font-weight:700;color:var(--t1);}
.danger-zone-desc{font-size:12px;color:var(--t3);line-height:1.5;max-width:420px;}
.danger-action-btn{
  display:flex;align-items:center;gap:7px;flex-shrink:0;
  padding:8px 16px;
  background:rgba(240,82,82,.1);
  border:1px solid rgba(240,82,82,.3);
  border-radius:8px;color:var(--red);
  font-family:var(--font);font-size:12.5px;font-weight:700;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.danger-action-btn:hover{background:rgba(240,82,82,.18);border-color:rgba(240,82,82,.5);}

/* Delete account modal extras */
.delete-confirm-input{letter-spacing:.5px;}
.m-btn-danger{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:8px;border:none;
  background:var(--red);color:#fff;
  font-family:var(--font);font-size:13px;font-weight:700;
  cursor:pointer;transition:opacity .15s;
}
.m-btn-danger:hover:not(:disabled){opacity:.87;}
.m-btn-danger:disabled{opacity:.38;cursor:not-allowed;}

/* Responsive */
@media(max-width:860px){
  .profile-layout{grid-template-columns:1fr;}
  .profile-form-grid{grid-template-columns:1fr;}
  .profile-avatar-card{order:-1;}
  .profile-avatar-preview{width:72px;height:72px;}
  .profile-avatar-img{width:72px;height:72px;}
  .danger-zone-content{flex-direction:column;align-items:flex-start;}
}
/* ── END Profile Page ─────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════
   MOBILE HAMBURGER — STEP H1 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Pure presentation. No HTML/JS hooked up yet — by
   design. Desktop is untouched: the toggle and the
   backdrop are hidden by default, and only inside
   @media(max-width:900px) does the sidebar become
   an off-canvas drawer with overlay.
═══════════════════════════════════════════════ */
.mobile-nav-toggle {
  display: none;
}
.sidebar-backdrop {
  display: none;
}
@media (max-width: 900px) {
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(66, 211, 130, .35);
    background: rgba(66, 211, 130, .08);
    color: var(--green);
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:focus-visible {
    background: rgba(66, 211, 130, .14);
    border-color: var(--green);
    color: var(--green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 211, 130, .12);
  }
  .mobile-nav-toggle svg {
    width: 23px;
    height: 23px;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    transform: translateX(-105%);
    transition: transform .22s ease;
    will-change: transform;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .55);
  }
  .sidebar-backdrop.show {
    display: block;
  }
  body.sidebar-open {
    overflow: hidden;
  }
}
/* ── END MOBILE HAMBURGER STEP H1 ─────────────────────────────────────── */

/* ═══════════════════════════════════════════════
   MOBILE TOPBAR LAYOUT — STEP H4 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   The desktop .topbar uses justify-content:flex-end,
   which on mobile pushes the freshly-added hamburger
   button to the right alongside .tb-r. On mobile only
   we switch to space-between so the hamburger sits on
   the left and the language/traffic/avatar group on
   the right. Desktop is untouched.
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .topbar {
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
  }
  .tb-r {
    margin-left: auto;
  }
}
/* ── END MOBILE TOPBAR LAYOUT STEP H4 ─────────────────────────────────── */

/* ═══════════════════════════════════════════════
   MOBILE PROXY-BAR MINIMAL — STEP H5 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   On mobile only, the closed proxy bar shows just:
     - Proxy # + Online/Offline status (data-col="name")
     - the chevron (.bc-chev)
   IP, credentials, protocol columns and the inline
   actions cluster (.bc-acts) are hidden so the row
   fits comfortably on a phone. The expanded detail
   panel is rendered separately and is NOT touched.
   The "Personalizza visualizzazione" trigger and its
   dropdown panel are also hidden — column visibility
   makes no sense in a single-column phone layout.
   Desktop is fully untouched.
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .btn-customize,
  .customize-panel {
    display: none !important;
  }
  .proxy-bar .bc[data-col="ip"],
  .proxy-bar .bc[data-col="credentials"],
  .proxy-bar .bc[data-col="protocol"],
  .proxy-bar .bc-acts {
    display: none !important;
  }
}
/* ── END MOBILE PROXY-BAR MINIMAL STEP H5 ─────────────────────────────── */

/* ═══════════════════════════════════════════════
   MOBILE PROXY DETAIL — STEP H6 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Scoped to .proxy-panel so the desktop .si-row inside
   the open proxy detail is left fully intact above 900px.
   On mobile the .si-row turns into a 2-column grid of
   sober card-style cells; the .si-rep (Reputazione IP)
   spans the full row width while keeping its green accent.
   On very narrow phones (≤380px) the grid collapses to
   a single column so each box gets the full width.
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .proxy-panel .si-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 14px;
  }
  .proxy-panel .si-c {
    padding: 12px;
    background: var(--bg-c);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    min-width: 0;
  }
  .proxy-panel .si-divider {
    display: none !important;
  }
  .proxy-panel .si-rep {
    grid-column: 1 / -1;
    flex: none;
    padding: 14px;
    border: 1px solid var(--gb);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(66,211,130,.05) 0%, transparent 70%);
  }
  .proxy-panel .si-lbl,
  .proxy-panel .si-val {
    min-width: 0;
  }
  .proxy-panel .si-val {
    flex-wrap: wrap;
    word-break: break-word;
  }
}
@media (max-width: 380px) {
  .proxy-panel .si-row {
    grid-template-columns: 1fr;
  }
}
/* ── END MOBILE PROXY DETAIL STEP H6 ──────────────────────────────────── */

/* ═══════════════════════════════════════════════
   MOBILE CRED MODAL FIT — STEP H7 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   All rules are scoped to #cred-modal-overlay so the
   other modals (TCP fingerprint, ROT rotation, alerts,
   etc.) are not affected. On small phones the dialog
   becomes top-aligned, edge-padded, internally scrollable,
   with a sticky footer that keeps Annulla/Applica reachable.
   Below 380px the mode cards collapse to a single column
   and the footer buttons stack full-width.
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  #cred-modal-overlay {
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
    overflow-y: auto;
  }

  #cred-modal-overlay .m-box {
    width: 100%;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    margin: 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #cred-modal-overlay .m-header {
    padding: 14px 16px 12px;
  }

  #cred-modal-overlay .m-warning {
    margin: 12px 16px 0;
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.45;
  }

  #cred-modal-overlay .m-field {
    padding: 14px 16px 0;
  }

  #cred-modal-overlay .m-auth-cards {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #cred-modal-overlay .m-auth-card {
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
  }

  #cred-modal-overlay .m-auth-card-icon {
    width: 28px;
    height: 28px;
  }

  #cred-modal-overlay .m-auth-card-title {
    font-size: 12px;
    line-height: 1.25;
  }

  #cred-modal-overlay .m-auth-card-desc {
    font-size: 10px;
    line-height: 1.35;
  }

  #cred-modal-overlay .m-cred-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #cred-modal-overlay .m-wl-input-row {
    gap: 8px;
  }

  #cred-modal-overlay .m-wl-input-row .m-input {
    min-width: 0;
  }

  #cred-modal-overlay .m-btn-add {
    padding: 9px 12px;
    flex-shrink: 0;
  }

  #cred-modal-overlay .m-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-c);
    border-top: 1px solid var(--bdr);
    padding: 12px 16px;
    margin-top: 12px;
  }
}

@media (max-width: 380px) {
  #cred-modal-overlay {
    padding: 8px;
  }

  #cred-modal-overlay .m-box {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  #cred-modal-overlay .m-auth-cards {
    grid-template-columns: 1fr;
  }

  #cred-modal-overlay .m-footer {
    flex-direction: column;
  }

  #cred-modal-overlay .m-footer button {
    width: 100%;
    justify-content: center;
  }
}
/* ── END MOBILE CRED MODAL FIT STEP H7 ────────────────────────────────── */

/* ═══════════════════════════════════════════════
   SIDEBAR ACCOUNT — STEP H9 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   No duplicated avatar (the G dot was removed from
   the sidebar HTML; the topbar .av-sm still shows it).
   Centers the remaining "Il mio account / — / Enterprise"
   stack and slightly upgrades the .badge-plan look as
   a pill with a green outline accent. Override appended
   in tail so it's easy to revert.
═══════════════════════════════════════════════ */
.s-u-in {
  justify-content: center;
  text-align: center;
}
.s-u-in > div {
  min-width: 0;
}
.badge-plan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gd);
  border: 1px solid var(--gb);
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* ── END SIDEBAR ACCOUNT STEP H9 ──────────────────────────────────────── */

/* ═══════════════════════════════════════════════
   SIDEBAR PLAN BADGE — STEP H11 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Compact pill between the NeoProxy logo and the
   nav. Shows the account plan (Enterprise today;
   could be Standard / Pro / Enterprise in the future).
   Visual: pill verde tenue, same palette as the
   topbar accents and the previous .badge-plan
   (var --gd / --gb / --green) so it integrates
   coherently with the existing dashboard aesthetic.
═══════════════════════════════════════════════ */
.sidebar-plan-row {
  display: flex;
  justify-content: center;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--bdr);
}
.sidebar-plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gd);
  border: 1px solid var(--gb);
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* ── END SIDEBAR PLAN BADGE STEP H11 ──────────────────────────────────── */

/* ═══════════════════════════════════════════════
   SIDEBAR PLAN BADGE — STEP H12 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Wording refinement: badge now reads "Piano Enterprise"
   instead of just "Enterprise". Slightly more breathing
   room (min-width, padding, font-size, letter-spacing)
   so the longer label feels intentional rather than
   cramped. Override appended in tail; the H11 base rule
   is preserved untouched.
═══════════════════════════════════════════════ */
.sidebar-plan-badge {
  min-width: 132px;
  padding: 4px 12px;
  font-size: 9.5px;
  letter-spacing: .055em;
}
/* ── END SIDEBAR PLAN BADGE STEP H12 ──────────────────────────────────── */

/* ═══════════════════════════════════════════════
   SIDEBAR PLAN BADGE — STEP H13 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Splits the badge content into two visual layers:
   the translatable prefix ("Piano" / "Plan" / "Tarif"
   / "套餐" / "Тариф" / "Forfait" / "Plano") in bright
   white (--t1), and the plan name "Enterprise" in
   NeoProxy green (--green), heavier weight, and a
   small left margin for breathing room. Higher
   specificity than the base .sidebar-plan-badge rule
   so colors override the inherited green tint
   without needing !important.
═══════════════════════════════════════════════ */
.sidebar-plan-badge .plan-prefix {
  color: var(--t1);
  font-weight: 600;
}
.sidebar-plan-badge .plan-name {
  color: var(--green);
  font-weight: 800;
  margin-left: 6px;
}
/* ── END SIDEBAR PLAN BADGE STEP H13 ──────────────────────────────────── */

/* ═══════════════════════════════════════════════
   SIDEBAR PLAN BADGE — STEP H14 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Visual refinement of the badge introduced in H11/H13.
   Slightly larger (min-width / min-height / padding),
   softer corners (radius 9px instead of pill), filled
   gradient instead of flat tint, subtle inset highlight
   and a sturdier border so the badge integrates more
   visually with the rest of the dashboard chrome.
   Prefix color/weight (var --t1) and plan-name green
   weight (var --green) are reaffirmed so this override
   wins cleanly without !important.
═══════════════════════════════════════════════ */
.sidebar-plan-row {
  padding: 12px 16px 10px;
}
.sidebar-plan-badge {
  min-width: 154px;
  min-height: 26px;
  padding: 5px 14px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(66,211,130,.14), rgba(66,211,130,.08));
  border: 1px solid rgba(66,211,130,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-size: 10px;
  letter-spacing: .04em;
}
.sidebar-plan-badge .plan-prefix {
  color: var(--t1);
  font-weight: 650;
}
.sidebar-plan-badge .plan-name {
  color: var(--green);
  font-weight: 850;
  margin-left: 6px;
}
/* ── END SIDEBAR PLAN BADGE STEP H14 ──────────────────────────────────── */

/* ═══════════════════════════════════════════════
   SIDEBAR PLAN BADGE — STEP H15 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Full-width section refinement. The badge stops
   reading as a small isolated pill and becomes a
   compact strip that spans the available width
   inside .sidebar-plan-row, integrating visually
   with the rest of the sidebar chrome. Border-bottom
   added on the row separates the badge from the nav
   below; gradient + inset + outer halo give a filled,
   homogeneous look. Prefix (var --t1) and plan-name
   (var --green) colors/weights reaffirmed to keep
   cascade priority over earlier blocks without
   resorting to !important.
═══════════════════════════════════════════════ */
.sidebar-plan-row {
  padding: 10px 12px 10px;
  border-bottom: 1px solid var(--bdr);
}
.sidebar-plan-badge {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(66,211,130,.16), rgba(66,211,130,.075));
  border: 1px solid rgba(66,211,130,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 0 1px rgba(66,211,130,.04);
  font-size: 10px;
  letter-spacing: .045em;
}
.sidebar-plan-badge .plan-prefix {
  color: var(--t1);
  font-weight: 650;
}
.sidebar-plan-badge .plan-name {
  color: var(--green);
  font-weight: 850;
  margin-left: 6px;
}
/* ── END SIDEBAR PLAN BADGE STEP H15 ──────────────────────────────────── */

/* ═══════════════════════════════════════════════
   TOPBAR READABILITY — STEP H16 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Slightly enlarges the topbar elements (height,
   gap, language trigger, traffic label/value, avatar)
   so longer translations (RU, DE) read more comfortably.
   On mobile (≤480px) values shrink back close to the
   original baseline so the topbar stays compact on
   phones. No structural change, no @media for
   hamburger/drawer touched.
═══════════════════════════════════════════════ */
.topbar {
  height: 62px;
}
.tb-r {
  gap: 16px;
}
.lang-trigger {
  min-height: 34px;
  padding: 0 12px;
}
.lang-code {
  font-size: 12px;
  font-weight: 800;
}
.tr-info .lbl {
  font-size: 10.5px;
  line-height: 1.15;
}
.tr-info .val {
  font-size: 14px;
  line-height: 1.15;
}
.av-sm {
  width: 38px;
  height: 38px;
  font-size: 14px;
}
@media (max-width: 480px) {
  .topbar {
    height: 58px;
  }
  .tb-r {
    gap: 10px;
  }
  .lang-trigger {
    min-height: 32px;
    padding: 0 10px;
  }
  .tr-info .lbl {
    font-size: 9.5px;
  }
  .tr-info .val {
    font-size: 12.5px;
  }
  .av-sm {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
}
/* ── END TOPBAR READABILITY STEP H16 ──────────────────────────────────── */

/* ═══════════════════════════════════════════════
   TOPBAR TRAFFIC LABEL SPACING — STEP H17 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Tiny vertical-rhythm fix for the .tr-info block
   (label "Traffico rimanente / Остатшийся трафик /
   剩余流量" above the value "347d 12h 46m"). On
   some languages the label sits glued to the value;
   adding a 3px column gap and a 1px bottom margin
   on the label gives the pair a more even spacing
   without making the block any taller than needed.
   On mobile (≤480px) the spacing collapses close
   to baseline so the topbar stays compact.
═══════════════════════════════════════════════ */
.tr-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}
.tr-info .lbl {
  margin-bottom: 1px;
  line-height: 1.2;
}
.tr-info .val {
  line-height: 1.15;
}
@media (max-width: 480px) {
  .tr-info {
    gap: 2px;
  }
  .tr-info .lbl {
    margin-bottom: 0;
    line-height: 1.15;
  }
}
/* ── END TOPBAR TRAFFIC LABEL SPACING STEP H17 ────────────────────────── */

/* ═══════════════════════════════════════════════
   MOBILE TAP HIGHLIGHT — STEP H18 (CSS-ONLY, ADDITIVE)
   ───────────────────────────────────────────────
   Neutralizes the default Chrome Mobile tap highlight
   (rgba(0,0,0,.18) semi-transparent flash) on the main
   interactive surfaces of the dashboard. Hover/active
   states declared elsewhere keep working unchanged.
   Native <select> popups are system-rendered and not
   affected by this rule.
═══════════════════════════════════════════════ */
button,
a,
[role="button"],
select,
summary,
label,
input[type="checkbox"],
input[type="radio"],
.proxy-bar,
.ni,
.lang-trigger,
.lang-option,
.gb-btn,
.dd-item,
.m-btn-cancel,
.m-btn-apply,
.m-btn-primary,
.m-btn-add,
.btn,
.btn-customize,
.av-sm,
.btn-ref,
.sidebar-plan-badge {
  -webkit-tap-highlight-color: transparent;
}
/* ── END MOBILE TAP HIGHLIGHT STEP H18 ────────────────────────────────── */

/* ── PROTOCOLS TABLE MOBILE CARDS (added by i18n session, append-only) ────
   Transforms the .pc .pt table into vertical per-row cards on viewports
   ≤ 700px so that the TLS and Actions columns remain visible and the
   QR/download/copy buttons stay tappable. Desktop layout untouched. */
@media (max-width: 700px) {
  .pc .pt {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .pc .pt thead {
    display: none;
  }

  .pc .pt tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pc .pt tr {
    display: block;
    background: var(--bg-c);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    overflow: hidden;
  }

  .pc .pt td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--bdr);
    min-width: 0;
  }

  .pc .pt td:last-child {
    border-bottom: none;
  }

  .pc .pt td::before {
    content: attr(data-label);
    flex: 0 0 108px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t3);
    line-height: 1.2;
  }

  .pc .pt td:nth-child(5) {
    align-items: flex-start;
  }

  .pc .pt td:nth-child(5) .cs {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: right;
  }

  .pc .pt td:nth-child(6) {
    align-items: center;
  }

  .pc .pt td:nth-child(6) .proto-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }

  .pc .pt td:nth-child(6) .proto-action-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }
}

/* ── PROXY PANEL MOBILE OVERFLOW FIX (append-only, scoped, zero specificity overrides) ──
   Keeps the open proxy detail inside the viewport on phones (≤640px):
   tighter pan-in padding, wrapping Whitelist header (mode switch drops
   below the title), shrink/wrap guarantees on Credenziali values/inputs,
   and whitelist chips capped to container width. Desktop untouched —
   every rule lives inside this media block and is prefixed .proxy-panel. */
@media(max-width:640px){
  .proxy-panel .pan-in{
    padding:14px;
  }
  .proxy-panel .acc-hd{
    flex-wrap:wrap;
  }
  .proxy-panel .acc-mode-switch{
    flex:1 1 100%;
  }
  .proxy-panel .cf-v{
    flex-wrap:wrap;
    min-width:0;
    overflow-wrap:anywhere;
  }
  .proxy-panel .panel-cred-inp{
    min-width:0;
  }
  .proxy-panel .wl-chip{
    max-width:100%;
  }
  .proxy-panel .wl-chip .wl-ip{
    overflow-wrap:anywhere;
  }
}

/* Protocolli & Endpoints — light desktop-only zebra striping (≥701px; mobile card layout untouched) */
@media (min-width:701px){
  .pc .pt tbody tr:nth-child(odd) td{
    background:transparent;
  }
  .pc .pt tbody tr:nth-child(even) td{
    background:rgba(255,255,255,.020);
  }
  .pc .pt tbody tr:hover td{
    background:rgba(255,255,255,.045);
  }
}

/* ═══════════════════════════════════════════════
   AFFILIAZIONE PAGE — scoped affiliate-* (FASE 2G)
═══════════════════════════════════════════════ */
.affiliate-page{display:flex;flex-direction:column;gap:16px;}
/* Banner "sezione in sviluppo" */
.affiliate-wip-banner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 24px;border-radius:14px;background:radial-gradient(circle at top,rgba(66,211,130,.10),transparent 55%),linear-gradient(180deg,rgba(66,211,130,.04),rgba(255,255,255,.012));border:1px solid rgba(66,211,130,.22);color:var(--green);}
.affiliate-wip-title{font-size:18px;font-weight:800;color:var(--t1);}
.affiliate-wip-desc{font-size:13px;color:var(--t3);max-width:460px;line-height:1.5;}
.affiliate-hero{padding:18px 20px;border-radius:12px;background:radial-gradient(circle at top left,rgba(66,211,130,.10),transparent 45%),linear-gradient(180deg,rgba(66,211,130,.04),rgba(255,255,255,.012));border:1px solid rgba(66,211,130,.22);}
.affiliate-hero-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.affiliate-hero-title{font-size:18px;font-weight:800;color:var(--t1);}
.affiliate-hero-badge{font-size:11px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:var(--green);background:rgba(66,211,130,.14);border:1px solid rgba(66,211,130,.4);border-radius:999px;padding:4px 10px;}
.affiliate-hero-desc{font-size:12.5px;color:var(--t2);line-height:1.5;margin:0;max-width:680px;}
.affiliate-ref-card{padding:16px;border-radius:10px;background:var(--bg-c);border:1px solid var(--bdr);display:flex;flex-direction:column;gap:12px;}
.affiliate-ref-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.affiliate-ref-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
.affiliate-ref-k{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);}
.affiliate-ref-code{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--green);}
.affiliate-ref-status{font-size:12px;color:var(--t3);}
.affiliate-ref-status strong{color:var(--green);}
.affiliate-ref-linkrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.affiliate-ref-link{font-family:var(--mono);font-size:12px;color:var(--green);word-break:break-all;}
.affiliate-copy-btn{padding:7px 14px;border-radius:7px;border:none;background:var(--green);color:#111;font-size:12px;font-weight:700;cursor:pointer;transition:opacity .15s;}
.affiliate-copy-btn:hover{opacity:.9;}
.affiliate-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.affiliate-kpi{padding:14px;border-radius:10px;background:var(--bg-c);border:1px solid var(--bdr);}
.affiliate-kpi-value{font-size:20px;font-weight:800;color:var(--t1);line-height:1.1;}
.affiliate-kpi-label{font-size:11px;color:var(--t3);margin-top:4px;}
.affiliate-contracts{display:flex;flex-direction:column;gap:12px;}
.affiliate-section-head{margin-bottom:2px;}
.affiliate-section-title{font-size:15px;font-weight:800;color:var(--t1);}
.affiliate-section-intro{font-size:12px;color:var(--t3);line-height:1.5;margin:4px 0 0;max-width:680px;}
.affiliate-contract-card{padding:16px;border-radius:11px;background:var(--bg-c);border:1px solid var(--bdr);display:flex;flex-direction:column;gap:14px;}
.affiliate-contract-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.affiliate-contract-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
.affiliate-contract-code{font-family:var(--mono);font-size:11px;color:var(--t3);}
.affiliate-contract-name{font-size:14px;font-weight:700;color:var(--t1);}
.affiliate-contract-email{font-size:11.5px;color:var(--t3);}
.affiliate-badge-status{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:4px 10px;white-space:nowrap;flex-shrink:0;}
.affiliate-badge-paying{color:#7dd3fc;background:rgba(14,165,233,.16);border:1px solid rgba(125,211,252,.45);}
.affiliate-badge-paidout{color:var(--green);background:rgba(66,211,130,.16);border:1px solid rgba(66,211,130,.45);}
.affiliate-badge-registered{color:#fb923c;background:rgba(249,115,22,.16);border:1px solid rgba(251,146,60,.45);}
.affiliate-stage-row{display:flex;gap:6px;flex-wrap:wrap;}
.affiliate-stage{flex:1;min-width:84px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:9px 10px;border-radius:8px;background:rgba(255,255,255,.018);border:1px solid var(--bdr);}
.affiliate-stage-dot{width:9px;height:9px;border-radius:50%;background:var(--t3);}
.affiliate-stage-label{font-size:10.5px;font-weight:700;color:var(--t2);}
.affiliate-stage-state{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.02em;}
.affiliate-stage-completed .affiliate-stage-dot{background:var(--green);box-shadow:0 0 8px rgba(66,211,130,.5);}
.affiliate-stage-completed .affiliate-stage-state{color:var(--green);}
.affiliate-stage-pending .affiliate-stage-dot{background:#f59e0b;}
.affiliate-stage-pending .affiliate-stage-state{color:#f59e0b;}
.affiliate-stage-unavailable{opacity:.55;}
.affiliate-contract-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px;}
.affiliate-meta-item{display:flex;flex-direction:column;gap:2px;}
.affiliate-meta-k{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--t3);}
.affiliate-meta-v{font-size:12px;color:var(--t1);font-weight:600;}
.affiliate-summary{display:flex;flex-direction:column;gap:10px;}
.affiliate-summary-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--bdr);}
.affiliate-summary-table{width:100%;border-collapse:collapse;font-size:12px;min-width:560px;}
.affiliate-summary-table th{text-align:left;padding:10px 12px;background:rgba(255,255,255,.02);color:var(--t3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
.affiliate-summary-table td{padding:11px 12px;border-top:1px solid var(--bdr);color:var(--t1);}
.affiliate-summary-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.015);}
.affiliate-td-sub{display:block;font-size:10.5px;color:var(--t3);margin-top:2px;}
@media (max-width:760px){
  .affiliate-kpi-grid{grid-template-columns:repeat(2,1fr);}
  .affiliate-contract-meta{grid-template-columns:repeat(2,1fr);}
  .affiliate-stage{min-width:calc(50% - 3px);}
}
@media (max-width:460px){
  .affiliate-kpi-grid{grid-template-columns:1fr;}
  .affiliate-contract-meta{grid-template-columns:1fr;}
  .affiliate-stage{min-width:100%;}
}

/* ═══════════════════════════════════════════════
   AFFILIAZIONE — scalable contracts list (FASE 2H, scoped affiliate-*)
═══════════════════════════════════════════════ */
.affiliate-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0;}
.affiliate-search{flex:1 1 220px;min-width:0;padding:8px 12px;border-radius:8px;border:1px solid var(--bdr);background:var(--bg-in);color:var(--t1);font-size:12.5px;font-family:inherit;}
.affiliate-search::placeholder{color:var(--t3);}
.affiliate-filter-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.affiliate-filter{padding:8px 10px;border-radius:8px;border:1px solid var(--bdr);background:var(--bg-in);color:var(--t1);font-size:12px;font-family:inherit;cursor:pointer;}
.affiliate-page-size{min-width:64px;}
.affiliate-contract-list{display:flex;flex-direction:column;gap:8px;}
.affiliate-contract-row{border-radius:10px;background:var(--bg-c);border:1px solid var(--bdr);overflow:hidden;}
.affiliate-contract-row-open{border-color:rgba(66,211,130,.35);}
.affiliate-contract-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.95fr) minmax(0,.9fr) minmax(0,.7fr) minmax(0,.95fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,.9fr) auto;align-items:start;column-gap:16px;row-gap:10px;padding:14px 16px;}
.affiliate-row-cust{display:flex;flex-direction:column;gap:3px;min-width:0;}
.affiliate-row-name{font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.affiliate-row-email{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.affiliate-row-cell{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;font-size:12px;color:var(--t1);min-width:0;}
.affiliate-row-code{font-family:var(--mono);color:var(--green);font-size:11.5px;}
.affiliate-contract-actions{display:flex;justify-content:flex-end;align-items:center;align-self:center;}
.affiliate-details-btn{padding:6px 12px;border-radius:7px;border:1px solid var(--bdr);background:transparent;color:var(--t1);font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;white-space:nowrap;}
.affiliate-details-btn:hover{background:rgba(255,255,255,.04);border-color:var(--bdr2);}
.affiliate-details-btn:disabled{opacity:.4;cursor:not-allowed;}
.affiliate-clear-btn{color:var(--green);border-color:rgba(66,211,130,.35);}
.affiliate-contract-details{padding:14px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--bdr);background:rgba(255,255,255,.012);}
.affiliate-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;}
.affiliate-pagination-info{font-size:12px;color:var(--t3);}
.affiliate-pagination-btns{display:flex;gap:8px;}
.affiliate-empty-state{padding:28px 16px;text-align:center;color:var(--t3);font-size:13px;border:1px dashed var(--bdr);border-radius:10px;}
@media (max-width:1100px){
  .affiliate-contract-main{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:14px;}
  .affiliate-contract-actions{grid-column:1 / -1;justify-content:flex-start;}
}
@media (max-width:460px){
  .affiliate-contract-main{grid-template-columns:1fr;}
  .affiliate-search,.affiliate-filter,.affiliate-page-size,.affiliate-filter-field{flex:1 1 100%;width:100%;}
  .affiliate-filter-group{width:100%;}
}

/* ═══════════════════════════════════════════════
   AFFILIAZIONE — visual polish (FASE 2I-1, scoped affiliate-*, CSS-only)
═══════════════════════════════════════════════ */
/* KPI premium: deeper card, accent bar + value tint per metric, hover */
.affiliate-kpi{padding:15px 16px;border-radius:11px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0)),var(--bg-c);transition:border-color .15s,transform .15s,box-shadow .15s;}
.affiliate-kpi:hover{transform:translateY(-1px);border-color:var(--bdr2);box-shadow:0 6px 16px rgba(0,0,0,.16);}
.affiliate-kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bdr2);}
.affiliate-kpi-value{font-size:22px;letter-spacing:-.01em;}
.affiliate-kpi-label{text-transform:uppercase;letter-spacing:.04em;font-size:10px;}
.affiliate-kpi-grid .affiliate-kpi:nth-child(1)::before{background:var(--green);}
.affiliate-kpi-grid .affiliate-kpi:nth-child(2)::before{background:#f59e0b;}
.affiliate-kpi-grid .affiliate-kpi:nth-child(3)::before{background:var(--green);}
.affiliate-kpi-grid .affiliate-kpi:nth-child(4)::before{background:#60a5fa;}
.affiliate-kpi-grid .affiliate-kpi:nth-child(5)::before{background:#60a5fa;}
.affiliate-kpi-grid .affiliate-kpi:nth-child(6)::before{background:#22d3ee;}
.affiliate-kpi-grid .affiliate-kpi:nth-child(1) .affiliate-kpi-value{color:var(--green);}
.affiliate-kpi-grid .affiliate-kpi:nth-child(2) .affiliate-kpi-value{color:#f59e0b;}
.affiliate-kpi-grid .affiliate-kpi:nth-child(3) .affiliate-kpi-value{color:var(--green);}
.affiliate-kpi-grid .affiliate-kpi:nth-child(6) .affiliate-kpi-value{color:#22d3ee;}
/* Toolbar tidy: wider search, aligned filters, ghost clear */
.affiliate-search{flex:1 1 260px;}
.affiliate-search:focus{outline:none;border-color:rgba(66,211,130,.5);}
.affiliate-filter{transition:border-color .15s;}
.affiliate-filter:hover{border-color:var(--bdr2);}
.affiliate-filter:focus{outline:none;border-color:rgba(66,211,130,.5);}
.affiliate-filter-group{margin-left:auto;}
.affiliate-clear-btn{color:var(--t3);border-color:transparent;}
.affiliate-clear-btn:hover{color:var(--green);border-color:rgba(66,211,130,.3);background:rgba(66,211,130,.06);}
/* Toolbar filter fields: separate label above each select (FASE 2V, scoped) */
.affiliate-toolbar{align-items:flex-end;}
.affiliate-filter-group{align-items:flex-end;}
.affiliate-filter-field{display:flex;flex-direction:column;gap:6px;min-width:150px;}
.affiliate-filter-label{font-size:9px;font-weight:800;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);white-space:nowrap;}
.affiliate-filter-field .affiliate-filter{min-height:34px;width:100%;}
/* Card rows: elegant hover, mono chip code, emphasized commission */
.affiliate-contract-row{transition:border-color .15s,background .15s,box-shadow .15s;}
.affiliate-contract-row:hover{border-color:rgba(66,211,130,.3);background:rgba(66,211,130,.02);box-shadow:0 2px 12px rgba(0,0,0,.16);}
.affiliate-row-code{display:inline-block;justify-self:start;padding:3px 8px;border-radius:6px;background:rgba(66,211,130,.10);border:1px solid rgba(66,211,130,.22);font-size:11px;line-height:1.3;}
.affiliate-contract-main > div:nth-child(7){color:var(--green);font-weight:700;font-size:12.5px;}
.affiliate-details-btn{letter-spacing:.01em;}
/* Expandable detail — more compact */
.affiliate-contract-details{padding:13px;gap:12px;}
.affiliate-stage{min-width:78px;padding:8px 9px;gap:4px;}
.affiliate-stage-label{font-size:10px;}
.affiliate-stage-state{font-size:9px;}
.affiliate-contract-meta{gap:9px 16px;}
.affiliate-meta-k{font-size:9.5px;}
@media (max-width:760px){
  .affiliate-filter-group{margin-left:0;}
  .affiliate-contract-main > div:nth-child(7){font-size:12px;}
}

/* ═══════════════════════════════════════════════
   AFFILIAZIONE — row cell labels (FASE 2K, scoped affiliate-*)
═══════════════════════════════════════════════ */
.affiliate-row-label{display:block;margin-bottom:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:800;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);white-space:nowrap;}
.affiliate-row-value{display:flex;align-items:center;min-height:22px;line-height:1.25;min-width:0;max-width:100%;}

/* ═══════════════════════════════════════════════
   AFFILIAZIONE — row label/value spacing refine (FASE 2M, scoped affiliate-*)
═══════════════════════════════════════════════ */
.affiliate-row-value.affiliate-row-code{display:inline-flex;width:fit-content;}
.affiliate-row-value .affiliate-badge-status{align-self:flex-start;}

/* ═══════════════════════════════════════════════
   PROXY BAR — IP rotation URL column (FASE 2O, scoped)
═══════════════════════════════════════════════ */
.bar-roturl-wrap{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;}
.bar-roturl-val{font-family:var(--mono);color:#5fa87d;font-size:10px;font-weight:500;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.bar-roturl-copy{flex-shrink:0;}

/* === UI Polish Phase 2A Safe: isolated cards & affiliate KPI text === */
/* Scoped to the 4 authorized classes only. Aesthetic properties only:
   radii, backgrounds, shadows, gentle hover and KPI typography.
   No structural or responsive changes. */

.api-keys-card{
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),var(--bg-c);
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:border-color .15s,box-shadow .15s;
}
.api-keys-card:hover{
  border-color:var(--bdr2);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}

.payments-summary-card{
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),var(--bg-c);
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:border-color .15s,box-shadow .15s;
}
.payments-summary-card:hover{
  border-color:var(--bdr2);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}

.affiliate-kpi-value{
  font-size:23px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
}

.affiliate-kpi-label{
  font-size:9.5px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--t3);
  margin-top:5px;
}

/* ── 2FA STATUS BADGE (Profile page) ─────────────────────────── */
.tfa-status-badge{
  margin-left:auto;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  letter-spacing:.02em;
}
.tfa-status-on{
  background:rgba(66,211,130,.12);
  color:var(--green);
  border:1px solid rgba(66,211,130,.3);
}
.tfa-status-off{
  background:rgba(255,255,255,.05);
  color:var(--t2);
  border:1px solid rgba(255,255,255,.1);
}
.tfa-backup-code{
  padding:4px 8px;
  text-align:center;
  letter-spacing:.03em;
}