@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f4f6fa;--ink:#172235;--muted:#748095;--line:#e6eaf1;--blue:#315eea;--nav:#111c2e;--white:#fff;--green:#16865c}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}h1,h2,strong{font-family:'Manrope','DM Sans',sans-serif}h1{font-size:30px;letter-spacing:-1px;margin:4px 0 8px}h2{font-size:16px;margin:0 0 7px}p{margin:0 0 8px}.muted{color:var(--muted);line-height:1.55}.tiny{font-size:11px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#8491a7;font-weight:700;margin:0 0 8px}.shell{min-height:100vh}.sidebar{width:246px;background:var(--nav);position:fixed;inset:0 auto 0 0;color:#dbe3f2;padding:25px 17px;display:flex;flex-direction:column;z-index:2}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 32px}.brand strong{display:block;color:#fff;font-size:14px}.brand small{display:block;color:#8796ad;font-size:11px;margin-top:3px}.brandmark{width:36px;height:36px;border-radius:12px;background:#315eea;color:white;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-family:Manrope;letter-spacing:-1px;flex-shrink:0}.brandmark.big{width:52px;height:52px;border-radius:17px;font-size:18px}.sidebar nav{display:grid;gap:6px}.sidebar nav a{color:#9cabc2;text-decoration:none;padding:12px 13px;border-radius:9px;display:flex;gap:13px;align-items:center;font-size:13px}.sidebar nav a:hover,.sidebar nav a:focus{background:#1c2c46;color:#fff}.sidebottom{margin-top:auto;border-top:1px solid #29364a;padding:18px 8px 0;color:#dbe3f2;font-size:12px}.sidebottom small{display:block;color:#8493aa;margin:7px 0 12px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#38c995;margin-right:6px}.logout{border:1px solid #3b4960;background:transparent;color:#dbe3f2;padding:9px 12px;border-radius:7px;cursor:pointer;width:100%}.main{margin-left:246px;padding:32px 34px 20px;max-width:1800px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.userpill{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--line);padding:8px 12px;border-radius:12px}.avatar{background:#e9efff;color:#315eea;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-weight:700}.userpill strong,.userpill small{display:block}.userpill small{color:var(--muted);font-size:11px;margin-top:2px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat,.panel{background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 8px #192b4405}.stat{padding:19px 20px}.statlabel{color:var(--muted);font-size:12px;display:flex;justify-content:space-between}.statlabel span{font-size:18px;color:#8796ac}.stat>strong{font-size:32px;display:block;letter-spacing:-1px;margin:10px 0 4px}.stat small{color:#8a95a7;font-size:11px}.twocol{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-bottom:18px}.panel{padding:21px;margin-bottom:18px;min-width:0}.sectionhead{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:17px}.sectionhead p{font-size:12px;margin:0}.textlink{color:var(--blue);text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}.notice{border:1px solid #dbe6ff;background:#eef3ff;border-radius:11px;padding:13px 15px;display:flex;gap:12px;margin-bottom:18px;color:#405273;font-size:12px;line-height:1.5}.notice strong{color:#2345a8;white-space:nowrap}.empty{padding:28px 15px;text-align:center;color:var(--muted)}.empty>span{font-size:25px;display:block;color:#aab6c8;margin-bottom:8px}.empty strong{display:block;color:#435069;margin-bottom:6px}.empty p{font-size:12px;margin-bottom:13px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}th{text-align:left;color:#8994a7;font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;padding:10px 11px;border-bottom:1px solid var(--line)}td{padding:13px 11px;border-bottom:1px solid #f0f2f6;color:#59667a}tbody tr:last-child td{border-bottom:0}td strong{color:#29364a;font-size:12px}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#43516a;background:#f3f5f9;padding:4px 6px;border-radius:5px}.eventlist{display:grid}.event{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid #eff2f6}.event:last-child{border:0}.eventicon{width:28px;height:28px;border-radius:8px;background:#edf2ff;color:#315eea;display:grid;place-items:center;flex-shrink:0}.event strong{font-size:12px}.event p{color:#657186;font-size:11px;margin:4px 0}.event small{color:#9aa4b4;font-size:10px}.tag{font-size:10px;font-weight:700;color:#596780;background:#f0f3f8;padding:6px 8px;border-radius:6px;white-space:nowrap}.stack{display:grid;gap:14px}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:13px}label{display:grid;gap:7px;font-size:12px;color:#526077;font-weight:600}input,select{width:100%;border:1px solid #dce2eb;background:white;border-radius:8px;padding:11px 12px;font:inherit;color:#25334a;outline:none}input:focus,select:focus{border-color:#7391f4;box-shadow:0 0 0 3px #315eea13}button{font:inherit;cursor:pointer}.primary{border:0;border-radius:8px;background:var(--blue);color:white;padding:11px 14px;font-weight:700;font-size:12px;display:inline-flex;justify-content:center;align-items:center;gap:16px;text-decoration:none}.primary:hover{background:#244bd0}.primary.full{width:100%;margin-top:5px}.secondary{background:white;border:1px solid #dfe5ee;color:#526078;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:700}.dangerbtn{background:white;border:1px solid #f1d4d4;color:#b44343;border-radius:7px;padding:8px 10px;font-size:11px}.actions{display:flex;gap:7px}.featurelist{padding-left:18px;color:#647187;font-size:12px;line-height:2}.tablepanel{padding-bottom:12px}.cellsub{display:block;color:#a0a9b7;font-size:10px;margin-top:4px}.status{font-size:11px;font-weight:700}.status:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px}.status.on{color:#16865c}.status.on:before{background:#28b883}.status.off{color:#b44343}.status.off:before{background:#d65b5b}.alert{border-radius:9px;padding:13px 15px;margin:0 0 16px;font-size:12px;line-height:1.5}.alert.danger{background:#fff0f0;border:1px solid #f3d2d2;color:#a73b3b}.alert.success{background:#edfbf5;border:1px solid #c9f0df;color:#176a4d}.alert.warning{background:#fff8e8;border:1px solid #f5e5b7;color:#8d6816}.alert p{margin-top:7px}.loginwrap{max-width:900px;margin:8vh auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.authmain{margin:0 auto;padding:24px;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center}.loginbrand h1{font-size:42px}.loginbrand .eyebrow{margin-top:25px}.loginform{padding:28px}.loginform h2{font-size:20px}.loginform>p{font-size:12px;margin-bottom:22px}.loginform label{margin-bottom:14px}.loginform .tiny{font-size:10px;margin:13px 0 0;text-align:center}.sidebottom form{margin-top:12px}footer{text-align:center;color:#a4adbb;font-size:10px;padding:25px 0 5px}
@media(max-width:1000px){.sidebar{width:205px}.main{margin-left:205px;padding:25px 22px}.twocol{grid-template-columns:1fr}.loginwrap{gap:25px}}
@media(max-width:700px){.sidebar{position:static;width:100%;height:auto;padding:12px 14px}.brand{padding:0 5px 12px}.sidebar nav{display:flex;overflow:auto}.sidebar nav a{padding:9px;white-space:nowrap}.sidebottom{display:none}.main{margin:0;padding:20px 13px}.stats{grid-template-columns:1fr}.topbar{align-items:flex-start}.userpill{display:none}.formrow{grid-template-columns:1fr}.loginwrap{grid-template-columns:1fr;margin:15px auto;max-width:440px}.loginbrand{padding:12px}.loginbrand h1{font-size:34px}.authmain{padding:16px}.loginform{padding:21px}.notice{display:block}.notice strong{display:block;margin-bottom:4px}}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:end;margin-top:16px}.formgrid label{display:flex;flex-direction:column;gap:7px;font-size:.9rem;color:var(--muted,#667085)}.formgrid input,.formgrid select{width:100%;padding:10px 12px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#101828}.formgrid .checkline{display:flex;flex-direction:row;align-items:center}.formgrid .checkline input{width:auto}

/* Dashboard 8083 improvements: clear white cards and responsive real-data metrics. */
.dashboard-stats{grid-template-columns:repeat(6,minmax(0,1fr))}.dashboard-secondary{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:-2px}.statstatus{font-size:20px!important;letter-spacing:-.4px!important}.stat .textlink{display:inline-block;margin-top:8px;font-size:11px}
@media(max-width:1250px){.dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.dashboard-stats,.dashboard-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.dashboard-stats,.dashboard-secondary{grid-template-columns:1fr}}

/* v6: orderly client workspace, role permissions, and clear session-data limitations */
.clients-stats{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:18px}
.create-client-panel{padding:24px}
.client-create-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:end}
.client-create-form>label{display:flex;flex-direction:column;gap:8px;min-width:0}
.client-create-form .demo-option{grid-column:span 2;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;min-height:54px}
.demo-option input{width:auto;flex-shrink:0}.demo-option strong,.demo-option small{display:block}.demo-option small{font-size:11px;color:var(--muted);font-weight:400;margin-top:4px}
.create-button{min-height:48px}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px;border-bottom:1px solid var(--line);padding-bottom:14px}
.filter-tabs a{padding:8px 13px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:#58677e;background:#fff;font-size:12px;font-weight:700}
.filter-tabs a.selected{background:#eaf0ff;border-color:#cbd8ff;color:#2345b5}
.client-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:16px}.client-filters label{min-width:240px;flex:1}
.secondary-link{color:#526078;font-size:12px;text-decoration:none;padding:9px 10px}
.clients-table{min-width:1120px}.clients-table td{vertical-align:middle}.clients-table td:first-child{min-width:145px}.clients-table td:first-child small{display:block;margin-top:5px}
.client-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.inlineform{display:flex;gap:5px;align-items:center}.inlineform select{max-width:110px;padding:8px;font-size:11px}
.connection-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.connection-pill i{width:7px;height:7px;border-radius:50%;display:inline-block;background:#9aa4b2}.connection-pill.unknown{color:#667085;background:#f2f4f7}.connection-note{margin-top:14px;line-height:1.6}
.permission-box{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:11px;background:#fbfcfe}.permission-box>.checkline{display:flex;flex-direction:row;align-items:center;gap:9px}.permission-box input{width:auto}.server-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}.server-check-grid .checkline{display:flex;flex-direction:row;align-items:flex-start;gap:9px;padding:11px;border:1px solid var(--line);border-radius:9px}.server-check-grid input{width:auto;margin-top:2px}.permission-edit{margin-top:8px}.permission-edit form{padding:12px;min-width:230px;background:#fbfcfe;border:1px solid var(--line);border-radius:8px}.permission-edit .checkline{display:flex;flex-direction:row;align-items:center;gap:8px}.permission-edit input{width:auto}
@media(max-width:1100px){.client-create-form{grid-template-columns:repeat(2,minmax(0,1fr))}.clients-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.client-create-form{grid-template-columns:1fr}.client-create-form .demo-option{grid-column:auto}.clients-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.client-filters label{min-width:100%}}

.credential-panel{max-width:900px;padding:28px}.credential-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.credential-grid>div{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:10px;min-width:0}.credential-grid>div strong{font-size:14px}.credential-grid code{white-space:normal;overflow-wrap:anywhere}.copy-credentials{width:100%;min-height:48px;margin:4px 0 12px}.copy-credentials.copied{background:#16865c}.credential-panel .secondary-link{display:inline-block;margin-top:14px}@media(max-width:600px){.credential-grid{grid-template-columns:1fr}}

.connection-pill.connected{color:#087443;background:#e8f8ef}.connection-pill.connected i{background:#16a36a}.connection-pill.waiting{color:#956500;background:#fff5d8}.connection-pill.waiting i{background:#e7a008}.connection-pill.unknown{color:#667085;background:#f2f4f7}.clients-table{min-width:1240px}

/* v7 navigation: collapsible, scrollable, and with persistent active-route highlight. */
.sidebar{overflow-y:auto;overflow-x:hidden;transition:width .18s ease,padding .18s ease}.sidebar nav{flex:1;align-content:start;overflow-y:auto;padding-right:2px}.sidebar nav a{position:relative;min-height:42px}.sidebar nav a.active{background:#243653;color:#fff;box-shadow:inset 3px 0 0 #4d79ff;font-weight:700}.sidebar nav a.active .nav-icon{color:#8eabff}.nav-icon{width:17px;min-width:17px;text-align:center;font-size:16px;line-height:1}.brand{position:relative;flex-shrink:0}.brand-copy{min-width:0}.sidebar-toggle{margin-left:auto;width:27px;height:27px;flex-shrink:0;border:1px solid #33435b;border-radius:7px;background:#17253a;color:#dbe3f2;font-size:20px;line-height:1;display:grid;place-items:center}.sidebar-toggle:hover{background:#293b58}.logout-short{display:none}.sidebar-collapsed .sidebar{width:78px;padding:22px 11px}.sidebar-collapsed .main{margin-left:78px}.sidebar-collapsed .brand{padding:0 4px 28px;justify-content:center;flex-wrap:wrap}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label{display:none}.sidebar-collapsed .sidebar-toggle{margin:8px auto 0}.sidebar-collapsed .sidebar nav a{justify-content:center;padding:12px 5px}.sidebar-collapsed .sidebar nav a.active{box-shadow:inset 0 -3px 0 #4d79ff}.sidebar-collapsed .sidebottom{padding:15px 2px 0;text-align:center}.sidebar-collapsed .sidebottom .dot{margin-right:0}.sidebar-collapsed .logout{padding:9px 4px}.sidebar-collapsed .logout-short{display:inline}.fslb-endpoint-note{display:flex;gap:10px;align-items:flex-start;background:#f5f7fb;border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin:12px 0 18px;color:#536179;font-size:12px;line-height:1.5}.fslb-endpoint-note strong{color:#27364d}.dns-add-grid{display:grid;grid-template-columns:1.2fr .6fr 1.4fr auto;gap:12px;align-items:end}.dns-proxy-toggle{display:flex;align-items:center;gap:8px;min-height:42px}.dns-proxy-toggle input{width:auto}.proxy-state{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700}.proxy-state.on{color:#bd6b00}.proxy-state.on:before{content:'';width:8px;height:8px;border-radius:50%;background:#f59e0b}.proxy-state.off{color:#667085}.proxy-state.off:before{content:'';width:8px;height:8px;border-radius:50%;background:#9aa4b2}
@media(max-width:700px){.sidebar{position:fixed;width:78px;height:100vh;padding:14px 10px}.sidebar .brand-copy,.sidebar .nav-label{display:none}.sidebar .brand{padding:0 4px 18px;flex-wrap:wrap;justify-content:center}.sidebar .sidebar-toggle{margin:8px auto 0}.sidebar nav a{justify-content:center;padding:12px 5px}.sidebar nav a.active{box-shadow:inset 0 -3px 0 #4d79ff}.sidebar .sidebottom{padding:12px 2px 0;text-align:center}.sidebar .sidebottom .dot{margin-right:0}.sidebar .logout{padding:9px 4px}.sidebar .logout-short{display:inline}.main{margin-left:78px;padding:18px 12px}.sidebar-collapsed .sidebar{width:78px}.sidebar-collapsed .main{margin-left:78px}.dns-add-grid{grid-template-columns:1fr}}
.firewall-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.firewall-options article{display:grid;gap:12px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:11px;min-width:0}.firewall-options article>strong{font-size:13px}.firewall-options article p{font-size:12px;min-height:54px}.firewall-options button:disabled,.firewall-options input:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.firewall-options{grid-template-columns:1fr}}

/* v7.1: public IP/country and compact client actions */
.compact-actions{gap:5px;max-width:290px}.compact-actions .inlineform{gap:4px}.compact-actions .inlineform select{max-width:84px;padding:7px 5px}.compact-actions .secondary,.compact-actions .dangerbtn{padding:7px 8px}.more-actions{position:relative}.more-actions summary{list-style:none;cursor:pointer;border:1px solid #f1d4d4;color:#b44343;background:#fff;border-radius:7px;padding:7px 9px;font-size:11px;font-weight:700}.more-actions summary::-webkit-details-marker{display:none}.more-actions form{position:absolute;right:0;top:calc(100% + 5px);z-index:5;background:#fff;padding:8px;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #17223520}.more-actions:not([open]) form{display:none}.copy-client:disabled{opacity:.6;cursor:wait}

/* v7.2: make country flag emoji reliably visible and keep endpoint access controls compact */
.geo-flag{display:inline-block;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:16px;line-height:1;vertical-align:-2px;margin-right:3px}.endpoint-access{position:relative}.endpoint-access>summary{cursor:pointer;list-style:none;background:#fff;border:1px solid #dfe5ee;color:#526078;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:700}.endpoint-access[open] form{position:absolute;right:0;top:32px;z-index:5;min-width:210px;padding:12px;background:white;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 24px #192b4418}.endpoint-access .checkline{display:flex;align-items:center;gap:8px}.endpoint-access .checkline input{width:auto}


/* IKS visual readability and copy controls */
.clients-table { font-size: 13px; }
.clients-table th { font-size: 11px; padding: 13px 12px; }
.clients-table td { padding: 15px 12px; vertical-align: middle; }
.clients-table td strong { font-size: 13px; }
.clients-table .cellsub { font-size: 11px; color: #68768b; line-height: 1.45; }
.clients-table tbody tr:hover { background: #f7f9ff; }
.clients-table .geo-flag { font-size: 19px; }
.client-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.client-actions button, .client-actions select { min-height: 36px; }
.copy-client, .copy-generated, .copy-credentials { white-space: nowrap; }
.generated-account { padding: 17px 18px; }
.generated-account code { display: inline-block; font-size: 13px; overflow-wrap: anywhere; }
.generated-account .copy-generated { margin: 6px 0; }
.tablewrap { max-width: 100%; }
@media (max-width: 900px) {
  .main { margin-left: 0; padding: 20px 14px; }
  .clients-table th, .clients-table td { padding: 12px 10px; }
  .panel { padding: 15px; }
}

/* Integrated v7.3 readability and compact action controls */
:root{--muted:#59677d;--line:#dce3ed}
body{font-size:14px;color:#172235}
.muted{color:#59677d}
.stat small,.cellsub,.userpill small{color:#65738a}
td{color:#3f4d63}
th{color:#65738a}
.clients-table .cellsub{color:#58677e}
.sidebar nav{gap:5px}
.sidebar nav a{font-weight:600}
.client-actions{max-width:420px;gap:5px}
.client-actions .secondary,.client-actions .dangerbtn{padding:7px 9px}
.client-actions .inlineform select{max-width:88px}
.more-actions{display:none}
.metric-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.metric-row>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12px;color:#344258}
.metric-row>div:first-child span{font-weight:800;color:#172235}
.metric-track{height:10px;background:#edf1f7;border-radius:99px;overflow:hidden}
.metric-track i{display:block;height:100%;background:linear-gradient(90deg,#315eea,#5b8cff);border-radius:99px;min-width:2px}
@media(max-width:850px){.metric-bars{grid-template-columns:1fr}.client-actions{max-width:340px}}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f4f6fa;--ink:#172235;--muted:#748095;--line:#e6eaf1;--blue:#315eea;--nav:#111c2e;--white:#fff;--green:#16865c}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}h1,h2,strong{font-family:'Manrope','DM Sans',sans-serif}h1{font-size:30px;letter-spacing:-1px;margin:4px 0 8px}h2{font-size:16px;margin:0 0 7px}p{margin:0 0 8px}.muted{color:var(--muted);line-height:1.55}.tiny{font-size:11px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#8491a7;font-weight:700;margin:0 0 8px}.shell{min-height:100vh}.sidebar{width:246px;background:var(--nav);position:fixed;inset:0 auto 0 0;color:#dbe3f2;padding:25px 17px;display:flex;flex-direction:column;z-index:2}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 32px}.brand strong{display:block;color:#fff;font-size:14px}.brand small{display:block;color:#8796ad;font-size:11px;margin-top:3px}.brandmark{width:36px;height:36px;border-radius:12px;background:#315eea;color:white;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-family:Manrope;letter-spacing:-1px;flex-shrink:0}.brandmark.big{width:52px;height:52px;border-radius:17px;font-size:18px}.sidebar nav{display:grid;gap:6px}.sidebar nav a{color:#9cabc2;text-decoration:none;padding:12px 13px;border-radius:9px;display:flex;gap:13px;align-items:center;font-size:13px}.sidebar nav a:hover,.sidebar nav a:focus{background:#1c2c46;color:#fff}.sidebottom{margin-top:auto;border-top:1px solid #29364a;padding:18px 8px 0;color:#dbe3f2;font-size:12px}.sidebottom small{display:block;color:#8493aa;margin:7px 0 12px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#38c995;margin-right:6px}.logout{border:1px solid #3b4960;background:transparent;color:#dbe3f2;padding:9px 12px;border-radius:7px;cursor:pointer;width:100%}.main{margin-left:246px;padding:32px 34px 20px;max-width:1800px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.userpill{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--line);padding:8px 12px;border-radius:12px}.avatar{background:#e9efff;color:#315eea;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-weight:700}.userpill strong,.userpill small{display:block}.userpill small{color:var(--muted);font-size:11px;margin-top:2px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat,.panel{background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 8px #192b4405}.stat{padding:19px 20px}.statlabel{color:var(--muted);font-size:12px;display:flex;justify-content:space-between}.statlabel span{font-size:18px;color:#8796ac}.stat>strong{font-size:32px;display:block;letter-spacing:-1px;margin:10px 0 4px}.stat small{color:#8a95a7;font-size:11px}.twocol{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-bottom:18px}.panel{padding:21px;margin-bottom:18px;min-width:0}.sectionhead{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:17px}.sectionhead p{font-size:12px;margin:0}.textlink{color:var(--blue);text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}.notice{border:1px solid #dbe6ff;background:#eef3ff;border-radius:11px;padding:13px 15px;display:flex;gap:12px;margin-bottom:18px;color:#405273;font-size:12px;line-height:1.5}.notice strong{color:#2345a8;white-space:nowrap}.empty{padding:28px 15px;text-align:center;color:var(--muted)}.empty>span{font-size:25px;display:block;color:#aab6c8;margin-bottom:8px}.empty strong{display:block;color:#435069;margin-bottom:6px}.empty p{font-size:12px;margin-bottom:13px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}th{text-align:left;color:#8994a7;font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;padding:10px 11px;border-bottom:1px solid var(--line)}td{padding:13px 11px;border-bottom:1px solid #f0f2f6;color:#59667a}tbody tr:last-child td{border-bottom:0}td strong{color:#29364a;font-size:12px}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#43516a;background:#f3f5f9;padding:4px 6px;border-radius:5px}.eventlist{display:grid}.event{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid #eff2f6}.event:last-child{border:0}.eventicon{width:28px;height:28px;border-radius:8px;background:#edf2ff;color:#315eea;display:grid;place-items:center;flex-shrink:0}.event strong{font-size:12px}.event p{color:#657186;font-size:11px;margin:4px 0}.event small{color:#9aa4b4;font-size:10px}.tag{font-size:10px;font-weight:700;color:#596780;background:#f0f3f8;padding:6px 8px;border-radius:6px;white-space:nowrap}.stack{display:grid;gap:14px}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:13px}label{display:grid;gap:7px;font-size:12px;color:#526077;font-weight:600}input,select{width:100%;border:1px solid #dce2eb;background:white;border-radius:8px;padding:11px 12px;font:inherit;color:#25334a;outline:none}input:focus,select:focus{border-color:#7391f4;box-shadow:0 0 0 3px #315eea13}button{font:inherit;cursor:pointer}.primary{border:0;border-radius:8px;background:var(--blue);color:white;padding:11px 14px;font-weight:700;font-size:12px;display:inline-flex;justify-content:center;align-items:center;gap:16px;text-decoration:none}.primary:hover{background:#244bd0}.primary.full{width:100%;margin-top:5px}.secondary{background:white;border:1px solid #dfe5ee;color:#526078;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:700}.dangerbtn{background:white;border:1px solid #f1d4d4;color:#b44343;border-radius:7px;padding:8px 10px;font-size:11px}.actions{display:flex;gap:7px}.featurelist{padding-left:18px;color:#647187;font-size:12px;line-height:2}.tablepanel{padding-bottom:12px}.cellsub{display:block;color:#a0a9b7;font-size:10px;margin-top:4px}.status{font-size:11px;font-weight:700}.status:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px}.status.on{color:#16865c}.status.on:before{background:#28b883}.status.off{color:#b44343}.status.off:before{background:#d65b5b}.alert{border-radius:9px;padding:13px 15px;margin:0 0 16px;font-size:12px;line-height:1.5}.alert.danger{background:#fff0f0;border:1px solid #f3d2d2;color:#a73b3b}.alert.success{background:#edfbf5;border:1px solid #c9f0df;color:#176a4d}.alert.warning{background:#fff8e8;border:1px solid #f5e5b7;color:#8d6816}.alert p{margin-top:7px}.loginwrap{max-width:900px;margin:8vh auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.authmain{margin:0 auto;padding:24px;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center}.loginbrand h1{font-size:42px}.loginbrand .eyebrow{margin-top:25px}.loginform{padding:28px}.loginform h2{font-size:20px}.loginform>p{font-size:12px;margin-bottom:22px}.loginform label{margin-bottom:14px}.loginform .tiny{font-size:10px;margin:13px 0 0;text-align:center}.sidebottom form{margin-top:12px}footer{text-align:center;color:#a4adbb;font-size:10px;padding:25px 0 5px}
@media(max-width:1000px){.sidebar{width:205px}.main{margin-left:205px;padding:25px 22px}.twocol{grid-template-columns:1fr}.loginwrap{gap:25px}}
@media(max-width:700px){.sidebar{position:static;width:100%;height:auto;padding:12px 14px}.brand{padding:0 5px 12px}.sidebar nav{display:flex;overflow:auto}.sidebar nav a{padding:9px;white-space:nowrap}.sidebottom{display:none}.main{margin:0;padding:20px 13px}.stats{grid-template-columns:1fr}.topbar{align-items:flex-start}.userpill{display:none}.formrow{grid-template-columns:1fr}.loginwrap{grid-template-columns:1fr;margin:15px auto;max-width:440px}.loginbrand{padding:12px}.loginbrand h1{font-size:34px}.authmain{padding:16px}.loginform{padding:21px}.notice{display:block}.notice strong{display:block;margin-bottom:4px}}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:end;margin-top:16px}.formgrid label{display:flex;flex-direction:column;gap:7px;font-size:.9rem;color:var(--muted,#667085)}.formgrid input,.formgrid select{width:100%;padding:10px 12px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#101828}.formgrid .checkline{display:flex;flex-direction:row;align-items:center}.formgrid .checkline input{width:auto}

/* Dashboard 8083 improvements: clear white cards and responsive real-data metrics. */
.dashboard-stats{grid-template-columns:repeat(6,minmax(0,1fr))}.dashboard-secondary{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:-2px}.statstatus{font-size:20px!important;letter-spacing:-.4px!important}.stat .textlink{display:inline-block;margin-top:8px;font-size:11px}
@media(max-width:1250px){.dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.dashboard-stats,.dashboard-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.dashboard-stats,.dashboard-secondary{grid-template-columns:1fr}}

/* v6: orderly client workspace, role permissions, and clear session-data limitations */
.clients-stats{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:18px}
.create-client-panel{padding:24px}
.client-create-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:end}
.client-create-form>label{display:flex;flex-direction:column;gap:8px;min-width:0}
.client-create-form .demo-option{grid-column:span 2;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;min-height:54px}
.demo-option input{width:auto;flex-shrink:0}.demo-option strong,.demo-option small{display:block}.demo-option small{font-size:11px;color:var(--muted);font-weight:400;margin-top:4px}
.create-button{min-height:48px}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px;border-bottom:1px solid var(--line);padding-bottom:14px}
.filter-tabs a{padding:8px 13px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:#58677e;background:#fff;font-size:12px;font-weight:700}
.filter-tabs a.selected{background:#eaf0ff;border-color:#cbd8ff;color:#2345b5}
.client-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:16px}.client-filters label{min-width:240px;flex:1}
.secondary-link{color:#526078;font-size:12px;text-decoration:none;padding:9px 10px}
.clients-table{min-width:1120px}.clients-table td{vertical-align:middle}.clients-table td:first-child{min-width:145px}.clients-table td:first-child small{display:block;margin-top:5px}
.client-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.inlineform{display:flex;gap:5px;align-items:center}.inlineform select{max-width:110px;padding:8px;font-size:11px}
.connection-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.connection-pill i{width:7px;height:7px;border-radius:50%;display:inline-block;background:#9aa4b2}.connection-pill.unknown{color:#667085;background:#f2f4f7}.connection-note{margin-top:14px;line-height:1.6}
.permission-box{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:11px;background:#fbfcfe}.permission-box>.checkline{display:flex;flex-direction:row;align-items:center;gap:9px}.permission-box input{width:auto}.server-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}.server-check-grid .checkline{display:flex;flex-direction:row;align-items:flex-start;gap:9px;padding:11px;border:1px solid var(--line);border-radius:9px}.server-check-grid input{width:auto;margin-top:2px}.permission-edit{margin-top:8px}.permission-edit form{padding:12px;min-width:230px;background:#fbfcfe;border:1px solid var(--line);border-radius:8px}.permission-edit .checkline{display:flex;flex-direction:row;align-items:center;gap:8px}.permission-edit input{width:auto}
@media(max-width:1100px){.client-create-form{grid-template-columns:repeat(2,minmax(0,1fr))}.clients-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.client-create-form{grid-template-columns:1fr}.client-create-form .demo-option{grid-column:auto}.clients-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.client-filters label{min-width:100%}}

.credential-panel{max-width:900px;padding:28px}.credential-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.credential-grid>div{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:10px;min-width:0}.credential-grid>div strong{font-size:14px}.credential-grid code{white-space:normal;overflow-wrap:anywhere}.copy-credentials{width:100%;min-height:48px;margin:4px 0 12px}.copy-credentials.copied{background:#16865c}.credential-panel .secondary-link{display:inline-block;margin-top:14px}@media(max-width:600px){.credential-grid{grid-template-columns:1fr}}

.connection-pill.connected{color:#087443;background:#e8f8ef}.connection-pill.connected i{background:#16a36a}.connection-pill.waiting{color:#956500;background:#fff5d8}.connection-pill.waiting i{background:#e7a008}.connection-pill.unknown{color:#667085;background:#f2f4f7}.clients-table{min-width:1240px}

/* v7 navigation: collapsible, scrollable, and with persistent active-route highlight. */
.sidebar{overflow-y:auto;overflow-x:hidden;transition:width .18s ease,padding .18s ease}.sidebar nav{flex:1;align-content:start;overflow-y:auto;padding-right:2px}.sidebar nav a{position:relative;min-height:42px}.sidebar nav a.active{background:#243653;color:#fff;box-shadow:inset 3px 0 0 #4d79ff;font-weight:700}.sidebar nav a.active .nav-icon{color:#8eabff}.nav-icon{width:17px;min-width:17px;text-align:center;font-size:16px;line-height:1}.brand{position:relative;flex-shrink:0}.brand-copy{min-width:0}.sidebar-toggle{margin-left:auto;width:27px;height:27px;flex-shrink:0;border:1px solid #33435b;border-radius:7px;background:#17253a;color:#dbe3f2;font-size:20px;line-height:1;display:grid;place-items:center}.sidebar-toggle:hover{background:#293b58}.logout-short{display:none}.sidebar-collapsed .sidebar{width:78px;padding:22px 11px}.sidebar-collapsed .main{margin-left:78px}.sidebar-collapsed .brand{padding:0 4px 28px;justify-content:center;flex-wrap:wrap}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label{display:none}.sidebar-collapsed .sidebar-toggle{margin:8px auto 0}.sidebar-collapsed .sidebar nav a{justify-content:center;padding:12px 5px}.sidebar-collapsed .sidebar nav a.active{box-shadow:inset 0 -3px 0 #4d79ff}.sidebar-collapsed .sidebottom{padding:15px 2px 0;text-align:center}.sidebar-collapsed .sidebottom .dot{margin-right:0}.sidebar-collapsed .logout{padding:9px 4px}.sidebar-collapsed .logout-short{display:inline}.fslb-endpoint-note{display:flex;gap:10px;align-items:flex-start;background:#f5f7fb;border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin:12px 0 18px;color:#536179;font-size:12px;line-height:1.5}.fslb-endpoint-note strong{color:#27364d}.dns-add-grid{display:grid;grid-template-columns:1.2fr .6fr 1.4fr auto;gap:12px;align-items:end}.dns-proxy-toggle{display:flex;align-items:center;gap:8px;min-height:42px}.dns-proxy-toggle input{width:auto}.proxy-state{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700}.proxy-state.on{color:#bd6b00}.proxy-state.on:before{content:'';width:8px;height:8px;border-radius:50%;background:#f59e0b}.proxy-state.off{color:#667085}.proxy-state.off:before{content:'';width:8px;height:8px;border-radius:50%;background:#9aa4b2}
@media(max-width:700px){.sidebar{position:fixed;width:78px;height:100vh;padding:14px 10px}.sidebar .brand-copy,.sidebar .nav-label{display:none}.sidebar .brand{padding:0 4px 18px;flex-wrap:wrap;justify-content:center}.sidebar .sidebar-toggle{margin:8px auto 0}.sidebar nav a{justify-content:center;padding:12px 5px}.sidebar nav a.active{box-shadow:inset 0 -3px 0 #4d79ff}.sidebar .sidebottom{padding:12px 2px 0;text-align:center}.sidebar .sidebottom .dot{margin-right:0}.sidebar .logout{padding:9px 4px}.sidebar .logout-short{display:inline}.main{margin-left:78px;padding:18px 12px}.sidebar-collapsed .sidebar{width:78px}.sidebar-collapsed .main{margin-left:78px}.dns-add-grid{grid-template-columns:1fr}}
.firewall-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.firewall-options article{display:grid;gap:12px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:11px;min-width:0}.firewall-options article>strong{font-size:13px}.firewall-options article p{font-size:12px;min-height:54px}.firewall-options button:disabled,.firewall-options input:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.firewall-options{grid-template-columns:1fr}}

/* v7.1: public IP/country and compact client actions */
.compact-actions{gap:5px;max-width:290px}.compact-actions .inlineform{gap:4px}.compact-actions .inlineform select{max-width:84px;padding:7px 5px}.compact-actions .secondary,.compact-actions .dangerbtn{padding:7px 8px}.more-actions{position:relative}.more-actions summary{list-style:none;cursor:pointer;border:1px solid #f1d4d4;color:#b44343;background:#fff;border-radius:7px;padding:7px 9px;font-size:11px;font-weight:700}.more-actions summary::-webkit-details-marker{display:none}.more-actions form{position:absolute;right:0;top:calc(100% + 5px);z-index:5;background:#fff;padding:8px;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #17223520}.more-actions:not([open]) form{display:none}.copy-client:disabled{opacity:.6;cursor:wait}

/* v7.2: make country flag emoji reliably visible and keep endpoint access controls compact */
.geo-flag{display:inline-block;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:16px;line-height:1;vertical-align:-2px;margin-right:3px}.endpoint-access{position:relative}.endpoint-access>summary{cursor:pointer;list-style:none;background:#fff;border:1px solid #dfe5ee;color:#526078;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:700}.endpoint-access[open] form{position:absolute;right:0;top:32px;z-index:5;min-width:210px;padding:12px;background:white;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 24px #192b4418}.endpoint-access .checkline{display:flex;align-items:center;gap:8px}.endpoint-access .checkline input{width:auto}


/* IKS visual readability and copy controls */
.clients-table { font-size: 13px; }
.clients-table th { font-size: 11px; padding: 13px 12px; }
.clients-table td { padding: 15px 12px; vertical-align: middle; }
.clients-table td strong { font-size: 13px; }
.clients-table .cellsub { font-size: 11px; color: #68768b; line-height: 1.45; }
.clients-table tbody tr:hover { background: #f7f9ff; }
.clients-table .geo-flag { font-size: 19px; }
.client-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.client-actions button, .client-actions select { min-height: 36px; }
.copy-client, .copy-generated, .copy-credentials { white-space: nowrap; }
.generated-account { padding: 17px 18px; }
.generated-account code { display: inline-block; font-size: 13px; overflow-wrap: anywhere; }
.generated-account .copy-generated { margin: 6px 0; }
.tablewrap { max-width: 100%; }
@media (max-width: 900px) {
  .main { margin-left: 0; padding: 20px 14px; }
  .clients-table th, .clients-table td { padding: 12px 10px; }
  .panel { padding: 15px; }
}

/* Integrated v7.3 readability and compact action controls */
:root{--muted:#59677d;--line:#dce3ed}
body{font-size:14px;color:#172235}
.muted{color:#59677d}
.stat small,.cellsub,.userpill small{color:#65738a}
td{color:#3f4d63}
th{color:#65738a}
.clients-table .cellsub{color:#58677e}
.sidebar nav{gap:5px}
.sidebar nav a{font-weight:600}
.client-actions{max-width:420px;gap:5px}
.client-actions .secondary,.client-actions .dangerbtn{padding:7px 9px}
.client-actions .inlineform select{max-width:88px}
.more-actions{display:none}
.metric-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.metric-row>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12px;color:#344258}
.metric-row>div:first-child span{font-weight:800;color:#172235}
.metric-track{height:10px;background:#edf1f7;border-radius:99px;overflow:hidden}
.metric-track i{display:block;height:100%;background:linear-gradient(90deg,#315eea,#5b8cff);border-radius:99px;min-width:2px}
@media(max-width:850px){.metric-bars{grid-template-columns:1fr}.client-actions{max-width:340px}}


/* IKS visual system v2: consistent typography, controls and spacing across modules */
:root{
  --bg:#f3f5f9;--ink:#152238;--muted:#58677d;--line:#d9e1ec;
  --blue:#315eea;--nav:#101c30;--white:#fff;--green:#16865c;
  --control-h:42px;--radius:9px;
}
body{font-family:'DM Sans',Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--ink)}
h1,h2,h3,h4,strong,b,label,button,.primary,.secondary,.dangerbtn,.sidebar nav a,.tag,.status,th{font-weight:700}
h1{font-size:clamp(25px,2vw,30px);line-height:1.22;letter-spacing:-.55px;margin:4px 0 9px}
h2{font-size:17px;line-height:1.35;letter-spacing:-.15px;margin:0 0 9px}
p,.muted{font-size:13px;line-height:1.55}
.sidebar nav a{min-height:44px;font-size:13px;letter-spacing:0}
.sidebar nav a.active{background:#243652;color:#fff;box-shadow:inset 3px 0 0 #4f76ff}
.sidebar nav a.active .nav-label{font-weight:800}
.main{min-width:0}
.panel,.stat{border-color:#d9e2ef;border-radius:13px;box-shadow:0 2px 7px rgba(18,38,68,.035)}
.panel{padding:22px;margin-bottom:18px}
.sectionhead{align-items:center}
label{font-size:13px;color:#34445c;line-height:1.4;gap:7px}
input,select,textarea{min-height:var(--control-h);font-family:inherit;font-size:13px;font-weight:600;color:#18263c;border:1px solid #cbd5e3;border-radius:9px;padding:10px 12px;line-height:1.35}
input::placeholder,textarea::placeholder{color:#8995a7;font-weight:500;opacity:1}
input:focus,select:focus,textarea:focus{border-color:#315eea;box-shadow:0 0 0 3px rgba(49,94,234,.14);outline:0}
button,.primary,.secondary,.dangerbtn,.secondary-link{font-family:inherit;font-size:12px;font-weight:800;line-height:1.2;min-height:38px;border-radius:9px;letter-spacing:.05px}
.primary{padding:11px 16px;background:#315eea;color:#fff}
.primary:focus-visible,.secondary:focus-visible,.dangerbtn:focus-visible,.sidebar nav a:focus-visible{outline:3px solid rgba(49,94,234,.35);outline-offset:2px}
.secondary{padding:10px 14px;border-color:#cbd5e3;color:#263954}
.dangerbtn{padding:10px 13px}
.formgrid{gap:14px}
.formgrid label{font-size:13px;color:#34445c}
.formgrid input,.formgrid select{min-height:var(--control-h);font-size:13px;font-weight:600}
table{font-size:13px;line-height:1.45;white-space:normal}
th{font-size:11px;color:#42536b;letter-spacing:.55px;padding:12px}
td{font-size:13px;color:#34445c;padding:13px 12px;vertical-align:middle}
td strong{font-size:13px;color:#152238}
.tag{font-size:11px;padding:6px 9px;border-radius:7px}
.status{font-size:12px}
.cellsub,.tiny{font-size:12px;line-height:1.45}
.eyebrow{font-size:11px;letter-spacing:1.2px;font-weight:800}
.tablewrap{max-width:100%;border-radius:8px}
.tablewrap table{min-width:760px}
.clients-table{min-width:1120px}
.details,details{max-width:100%}
details summary{cursor:pointer;font-size:12px;font-weight:800;color:#315eea;padding:7px 0}
details[open] summary{margin-bottom:8px}
.client-actions,.actions{gap:8px;align-items:center;flex-wrap:wrap}
.filter-tabs a{min-height:38px;display:inline-flex;align-items:center;font-size:12px;font-weight:800}
.topbar{align-items:flex-start}
.topbar .muted{max-width:760px}
@media(max-width:900px){
 .clients-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .client-create-form{grid-template-columns:repeat(2,minmax(0,1fr))}
 .main{padding:24px 20px}
}
@media(max-width:700px){
 .sidebar nav a{font-size:12px}
 .panel{padding:16px}
 .client-create-form,.formrow{grid-template-columns:1fr}
 .client-create-form .demo-option{grid-column:auto}
 .clients-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .topbar{gap:10px}
 h1{font-size:25px}
}

/* FIX-ACCIONES-LINEALES-V1: acciones claras y alineadas */
.clients-table {
  min-width: 1320px;
  table-layout: auto;
}

.clients-table th:last-child,
.clients-table td:last-child {
  min-width: 340px;
  width: 340px;
  white-space: nowrap;
}

.clients-table td:last-child .actions,
.clients-table td:last-child .client-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  white-space: nowrap;
}

.clients-table td:last-child button,
.clients-table td:last-child .primary,
.clients-table td:last-child .secondary,
.clients-table td:last-child .dangerbtn,
.clients-table td:last-child .secondary-link {
  flex: 0 0 auto;
  min-height: 36px;
  margin: 0;
}

.clients-table td {
  vertical-align: middle;
}

.tablewrap {
  overflow-x: auto;
  max-width: 100%;
}

@media (max-width: 700px) {
  .clients-table {
    min-width: 1320px;
  }

  .clients-table th:last-child,
  .clients-table td:last-child {
    min-width: 340px;
  }
}

/* IKS-RESALTE-FILAS-V1: resalte suave al pasar sobre clientes y paneles */
.tablewrap table tbody tr {
  transition: background-color .16s ease, box-shadow .16s ease;
}

.tablewrap table tbody tr:hover > td {
  background-color: #eaf2ff !important;
}

.tablewrap table tbody tr:hover > td:first-child {
  box-shadow: inset 3px 0 0 #4778ee;
}

.tablewrap table tbody tr:focus-within > td {
  background-color: #f0f5ff;
}

.clients-table tbody tr:hover > td {
  background-color: #eaf2ff !important;
}

.clients-table tbody tr:hover > td:first-child {
  box-shadow: inset 3px 0 0 #4778ee;
}

@media (prefers-reduced-motion: reduce) {
  .tablewrap table tbody tr {
    transition: none;
  }
}


/* IKS-UX-REBUILD-2026-V1: clean, consistent tables and controls */
:root{--iks-blue:#1765f5;--iks-blue-soft:#eaf2ff;--iks-line:#dce5f2;--iks-text:#16243b;--iks-muted:#63738b}
body{font-family:'DM Sans',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--iks-text);font-size:13px;line-height:1.45}
h1,h2,h3{letter-spacing:-.025em}
.panel{border-color:var(--iks-line);border-radius:14px;box-shadow:0 5px 20px rgba(26,52,93,.045);padding:22px}
.sectionhead{align-items:center}
.tablewrap{max-width:100%;overflow:auto;border:1px solid var(--iks-line);border-radius:10px;background:#fff;scrollbar-gutter:stable}
.tablewrap table{width:100%;border-collapse:separate;border-spacing:0;margin:0;font-size:12px}
.tablewrap thead th{position:sticky;top:0;z-index:1;background:#f6f9fe;color:#42536e;font-size:10px;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--iks-line);padding:12px 13px}
.tablewrap tbody td{padding:12px 13px;border-bottom:1px solid #eaf0f7;vertical-align:middle;line-height:1.45}
.tablewrap tbody tr:last-child td{border-bottom:0}
.tablewrap tbody tr{transition:background-color .14s ease,box-shadow .14s ease}
.tablewrap tbody tr:hover>td{background:#eaf2ff!important}
.tablewrap tbody tr:hover>td:first-child{box-shadow:inset 3px 0 0 #3978ff}
.tablewrap tbody tr:focus-within>td{background:#f0f5ff}
.tablewrap td .tag{display:inline-flex;max-width:190px;white-space:normal;overflow-wrap:anywhere;line-height:1.35;margin:2px 3px 2px 0}
.tablewrap td button,.tablewrap td a.secondary-link{white-space:nowrap}
.accounts-table{min-width:1060px;table-layout:auto}
.accounts-table th:nth-child(1){min-width:125px}.accounts-table th:nth-child(2),.accounts-table th:nth-child(3){min-width:95px}
.accounts-table th:nth-child(5){min-width:145px}.accounts-table th:nth-child(6){min-width:100px}
.accounts-table .assigned-servers{min-width:180px;max-width:280px}
.server-tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center;max-width:270px}
.server-tag{font-size:10px!important;padding:5px 7px!important;background:#eef4ff!important;color:#234a92!important;border:1px solid #dce8ff}
.credit-balance{display:inline-flex;align-items:center;gap:4px;border-radius:8px;background:#eff6ff;padding:6px 9px;color:#184ea8;font-weight:800;white-space:nowrap}
.credit-balance small{font-weight:600;font-size:10px;color:#5b6d89}
.credit-link{display:block;margin-top:5px;color:#1765f5;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
.credit-link:hover{text-decoration:underline}
.account-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:120px;max-width:160px}
.account-actions form{margin:0}
.account-actions button,.account-actions summary{width:100%;min-height:34px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.25}
.account-actions details{position:relative}
.account-actions details>summary{cursor:pointer;list-style:none;border:1px solid #d8e2f0;border-radius:8px;padding:8px 10px;color:#2457ad;background:#fff;font-weight:700;font-size:11px}
.account-actions details>summary::-webkit-details-marker{display:none}
.account-actions details[open]>form{position:relative;z-index:2;background:#f8faff;border:1px solid #dce5f2;border-radius:8px;padding:10px;margin-top:5px;min-width:190px;box-shadow:0 8px 24px rgba(25,43,69,.08)}
.account-actions .stack{gap:8px}
.account-actions .danger-text{color:#c43f4b}
.account-filters{display:grid;grid-template-columns:minmax(200px,1.5fr) repeat(3,minmax(125px,1fr)) auto auto;gap:10px;align-items:end;margin:0 0 16px;padding:14px;background:#f8faff;border:1px solid #e4ebf6;border-radius:11px}
.account-filters label,.client-filters label{display:grid;gap:6px;min-width:0;color:#455771;font-size:11px;font-weight:700}
.account-filters input,.account-filters select,.client-filters input,.client-filters select{width:100%;min-width:0;min-height:38px;border:1px solid #d5dfed;border-radius:8px;background:#fff;padding:8px 10px;color:#1b2b44;font:inherit;font-size:12px}
.account-filters button,.client-filters button{min-height:38px;white-space:nowrap}
.account-filters .secondary-link,.client-filters .secondary-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 10px;border:1px solid #d5dfed;border-radius:8px;background:#fff;white-space:nowrap;text-decoration:none}
.client-filters{display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(220px,1fr) auto auto;align-items:end;gap:10px;padding:13px;margin-bottom:16px;background:#f8faff;border:1px solid #e4ebf6;border-radius:11px}
.clients-table{min-width:1280px}
.clients-table .compact-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;max-width:none;min-width:max-content}
.clients-table td:last-child{min-width:330px}
.clients-table .compact-actions .inlineform{display:flex;align-items:center;gap:5px;flex-shrink:0}
.clients-table .compact-actions select{width:92px;min-width:92px;max-width:92px;height:36px;padding:6px 8px;font-size:11px;border:1px solid #d5dfed;border-radius:8px;background:#fff}
.clients-table .compact-actions button{min-height:36px;padding:7px 10px;font-size:11px}
.clients-table td{white-space:normal}
.clients-table td:nth-child(7),.clients-table td:nth-child(8){min-width:100px}
.status,.connection-pill{white-space:nowrap}
@media(max-width:1200px){.account-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.account-filters .search-field{grid-column:span 2}.client-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.main{padding:16px 12px}.panel{padding:14px}.account-filters,.client-filters{grid-template-columns:1fr}.account-filters .search-field{grid-column:auto}.accounts-table{min-width:980px}.sectionhead{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.tablewrap tbody tr{transition:none}}


/* IKS-CLIENT-TABLE-FIX-V2 */
.tablewrap .clients-table {
  width: 100%;
  min-width: 1550px;
  table-layout: fixed;
}

.tablewrap .clients-table th:nth-child(1),
.tablewrap .clients-table td:nth-child(1) { width: 150px; }

.tablewrap .clients-table th:nth-child(2),
.tablewrap .clients-table td:nth-child(2) { width: 200px; }

.tablewrap .clients-table th:nth-child(3),
.tablewrap .clients-table td:nth-child(3) {
  width: 190px;
  min-width: 190px;
}

.tablewrap .clients-table th:nth-child(4),
.tablewrap .clients-table td:nth-child(4) { width: 125px; }

.tablewrap .clients-table th:nth-child(5),
.tablewrap .clients-table td:nth-child(5) { width: 145px; }

.tablewrap .clients-table th:nth-child(6),
.tablewrap .clients-table td:nth-child(6) { width: 165px; }

.tablewrap .clients-table th:nth-child(7),
.tablewrap .clients-table td:nth-child(7) { width: 115px; }

.tablewrap .clients-table th:nth-child(8),
.tablewrap .clients-table td:nth-child(8) { width: 145px; }

.tablewrap .clients-table th:nth-child(9),
.tablewrap .clients-table td:nth-child(9) {
  width: 315px;
  min-width: 315px;
}

.tablewrap .clients-table td:nth-child(3) .tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.4;
  padding: 6px 8px;
}

.tablewrap .clients-table td {
  vertical-align: middle;
  line-height: 1.45;
}

.tablewrap .clients-table tbody tr:hover > td {
  background-color: #eaf2ff !important;
}

@media (max-width: 760px) {
  .tablewrap .clients-table {
    min-width: 1550px;
  }
}


/* IKS-CLIENT-SEARCH-FOCUS-V1 */
#client-results {
  scroll-margin-top: 20px;
  outline: none;
}

#client-results tbody tr.search-result-focus > td {
  background: #dce9ff !important;
  box-shadow: inset 0 1px 0 #8bb0ff, inset 0 -1px 0 #8bb0ff;
}

#client-results tbody tr.search-result-focus > td:first-child {
  box-shadow: inset 4px 0 0 #3563ee, inset 0 1px 0 #8bb0ff, inset 0 -1px 0 #8bb0ff;
}

#client-results tbody tr:focus {
  outline: 2px solid #3563ee;
  outline-offset: -2px;
}



/* IKS-UX-CONSOLIDATED-V3: compact, consistent controls and tables */
.tablewrap td .tag {
  overflow-wrap: normal;
  word-break: normal;
  max-width: 220px;
}
.clients-table { min-width: 1120px !important; table-layout: auto; }
.clients-table th:nth-child(1), .clients-table td:nth-child(1) { min-width: 170px; }
.clients-table th:nth-child(2), .clients-table td:nth-child(2) { min-width: 165px; }
.clients-table th:nth-child(3), .clients-table td:nth-child(3) { min-width: 125px; }
.clients-table th:nth-child(4), .clients-table td:nth-child(4) { min-width: 125px; }
.clients-table th:nth-child(5), .clients-table td:nth-child(5) { min-width: 145px; }
.clients-table th:nth-child(6), .clients-table td:nth-child(6) { min-width: 110px; }
.clients-table th:nth-child(7), .clients-table td:nth-child(7) { min-width: 135px; }
.clients-table th:nth-child(8), .clients-table td:nth-child(8) { min-width: 330px; }
.clients-table td:nth-child(2) .tag { display:inline-flex; white-space:nowrap; overflow-wrap:normal; }
.clients-table .compact-actions { display:flex!important; flex-flow:row nowrap!important; align-items:center; gap:6px; min-width:max-content; max-width:none; }
.clients-table .compact-actions .inlineform { display:flex; flex:0 0 auto; flex-flow:row nowrap; align-items:center; gap:5px; margin:0; }
.clients-table .compact-actions button,.clients-table .compact-actions select { min-height:34px; white-space:nowrap; }
.clients-table .compact-actions select { width:88px; min-width:88px; max-width:88px; padding:6px; }

.accounts-table { min-width:1180px; }
.accounts-table td { vertical-align:middle; }
.accounts-table td .tag { white-space:nowrap; overflow-wrap:normal; }
.accounts-table .account-actions { display:flex!important; flex-flow:row nowrap!important; align-items:center; gap:6px; min-width:315px; max-width:none; }
.accounts-table .account-actions > form,.accounts-table .account-actions > details { flex:0 0 auto; margin:0; }
.accounts-table .account-actions button,.accounts-table .account-actions summary { width:auto; min-width:88px; min-height:33px; padding:7px 9px; white-space:nowrap; line-height:1.2; font-size:11px; }
.accounts-table .account-actions details,.accounts-table .permission-edit,.accounts-table .server-edit { position:relative; }
.accounts-table .account-actions details[open]>form,.accounts-table .permission-edit[open]>form,.accounts-table .server-edit[open]>form {
  position:absolute; z-index:30; top:calc(100% + 5px); left:0; width:240px; min-width:0;
  max-width:min(280px,75vw); max-height:260px; overflow:auto; margin:0; padding:11px;
  border:1px solid #dce5f2; border-radius:10px; background:#fff;
  box-shadow:0 10px 28px rgba(22,36,59,.14);
}
.accounts-table .account-actions details:last-child[open]>form { left:auto; right:0; width:250px; }
.accounts-table .permission-edit,.accounts-table .server-edit { display:inline-block; margin-top:6px; }
.accounts-table .permission-edit>summary,.accounts-table .server-edit>summary { display:inline-flex; align-items:center; min-height:28px; padding:4px 0; white-space:nowrap; font-size:11px; }
.accounts-table .permission-edit .checkline,.accounts-table .server-edit .checkline { display:flex; flex-flow:row nowrap; align-items:center; gap:8px; padding:5px 2px; white-space:normal; font-size:11px; }
.accounts-table .permission-edit input[type="checkbox"],.accounts-table .server-edit input[type="checkbox"] { flex:0 0 14px; width:14px!important; min-width:14px; height:14px; margin:0; padding:0; }
.accounts-table .server-edit button,.accounts-table .permission-edit button { width:100%; margin-top:8px; }
.account-filters input::placeholder,.client-filters input::placeholder { color:#8795aa; opacity:1; }
@media(max-width:760px) { .accounts-table{min-width:1180px}.clients-table{min-width:1120px!important} }


/* IKS-UX-V4: compact edit credentials and credit management */
.accounts-table .account-actions details:first-child[open] > form { width:250px; max-height:300px; }
.accounts-table .account-actions details:first-child > form label { display:block; margin-bottom:8px; font-size:12px; }
.accounts-table .account-actions details:first-child > form input { width:100%; min-width:0; margin-top:4px; }
.credits-filters {
 display:grid; grid-template-columns:minmax(220px,1.6fr) minmax(170px,1fr) auto auto;
 align-items:end; gap:10px; padding:12px; border:1px solid var(--border,#d8e2f0);
 border-radius:12px; background:var(--surface-soft,#f7f9fd);
}
.credits-assign-form {
 display:grid; grid-template-columns:minmax(240px,1.4fr) minmax(130px,.7fr) minmax(180px,1fr) auto;
 align-items:end; gap:12px;
}
.credits-assign-form input,.credits-assign-form select { min-width:0; }
.credits-table { width:100%; min-width:720px; }
.credits-table td,.credits-table th { vertical-align:middle; }
@media(max-width:850px) {
 .credits-filters { grid-template-columns:1fr 1fr; }
 .credits-assign-form { grid-template-columns:1fr 1fr; }
}
@media(max-width:520px) {
 .credits-filters,.credits-assign-form { grid-template-columns:1fr; }
}


/* IKS-UX-V6: use centered dialogs for editing instead of clipped table dropdowns */
.edit-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(82vh, 680px);
  padding: 0;
  border: 1px solid #d6e0ef;
  border-radius: 14px;
  background: #fff;
  color: #17253d;
  box-shadow: 0 24px 70px rgba(17, 31, 53, .25);
  overflow: auto;
}
.edit-dialog::backdrop {
  background: rgba(12, 24, 43, .42);
  backdrop-filter: blur(2px);
}
.edit-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}
.edit-dialog-form h3 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 650;
}
.edit-dialog-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #354762;
  font-size: 12px;
  font-weight: 600;
}
.edit-dialog-form input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #ccd8e9;
  border-radius: 8px;
  background: #fff;
  color: #17253d;
  font: inherit;
  font-weight: 400;
}
.edit-dialog-form input[readonly] {
  background: #f3f6fb;
  color: #65758d;
}
.edit-dialog-form p { margin: 0; line-height: 1.5; }
.edit-dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 5px;
}
.edit-dialog-actions button {
  min-height: 36px;
  padding: 8px 14px;
  white-space: nowrap;
}
.accounts-table .account-actions > .edit-dialog,
.clients-table .compact-actions > .edit-dialog {
  position: fixed;
  z-index: 1000;
  min-width: 0;
}
@media (max-width: 520px) {
  .edit-dialog-form { padding: 16px; }
  .edit-dialog-actions { flex-direction: column-reverse; }
  .edit-dialog-actions button { width: 100%; }
}


/* IKS-UX-V8: alineacion estable de datos y acciones en tablas */
.tablewrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}
.tablewrap table {
  border-collapse: separate;
  border-spacing: 0;
}
.tablewrap th {
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25;
}
.tablewrap td {
  vertical-align: middle;
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
}
.clients-table {
  min-width: 1120px !important;
  table-layout: auto;
}
.clients-table th, .clients-table td {
  padding: 12px 13px;
}
.clients-table th:nth-child(1), .clients-table td:nth-child(1) { min-width: 145px; }
.clients-table th:nth-child(2), .clients-table td:nth-child(2) { min-width: 125px; }
.clients-table th:nth-child(3), .clients-table td:nth-child(3) { min-width: 140px; }
.clients-table th:nth-child(4), .clients-table td:nth-child(4) { min-width: 125px; }
.clients-table th:nth-child(5), .clients-table td:nth-child(5) { min-width: 155px; }
.clients-table th:nth-child(6), .clients-table td:nth-child(6) { min-width: 135px; }
.clients-table th:nth-child(7), .clients-table td:nth-child(7) { min-width: 135px; }
.clients-table th:nth-child(8), .clients-table td:nth-child(8) { min-width: 330px; }
.clients-table td:nth-child(5) .ip-country,
.clients-table td:nth-child(5) .ip-country-row,
.clients-table .ip-country-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  min-width: 135px;
  white-space: nowrap;
}
.clients-table td:nth-child(5) .tag {
  display: inline-flex;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.clients-table td:nth-child(6) > *,
.clients-table td:nth-child(7) > * {
  white-space: nowrap;
}
.clients-table td:nth-child(7) small,
.clients-table .cellsub {
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  line-height: 1.35;
}
.clients-table .compact-actions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  white-space: nowrap;
}
.clients-table .compact-actions button,
.clients-table .compact-actions select {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 35px;
}
.accounts-table {
  min-width: 1160px;
  table-layout: auto;
}
.accounts-table th, .accounts-table td {
  padding: 12px 12px;
  vertical-align: middle;
}
.accounts-table td:first-child strong,
.accounts-table td .tag,
.accounts-table .credit-balance,
.accounts-table .status {
  white-space: nowrap;
}
.accounts-table .account-actions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: max-content;
  white-space: nowrap;
}
.accounts-table .account-actions > form,
.accounts-table .account-actions > details {
  flex: 0 0 auto;
  margin: 0;
}
.accounts-table .account-actions button,
.accounts-table .account-actions summary {
  min-height: 35px;
  white-space: nowrap;
  line-height: 1.25;
}
.accounts-table .assigned-servers .server-tags {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 5px;
}
.accounts-table .permission-edit,
.accounts-table .server-edit {
  margin-top: 5px;
}
.accounts-table .permission-edit > summary,
.accounts-table .server-edit > summary {
  white-space: nowrap;
}
.accounts-table .created-cell,
.accounts-table .created-cell small {
  white-space: nowrap;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .clients-table { min-width: 1120px !important; }
  .accounts-table { min-width: 1160px; }
}


/* IKS-UX-V10: selectores verificados contra clients.html y accounts.html de V8 */
.clients-table th:last-child,
.accounts-table th:last-child {
  text-align: center !important;
}
.clients-table td:last-child,
.accounts-table td:last-child {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Clientes: la clase real del grupo es client-actions compact-actions */
.clients-table .client-actions.compact-actions {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 9px !important;
  border: 1px solid #e0e7f2 !important;
  border-radius: 12px !important;
  background: #fbfcff !important;
  box-shadow: 0 3px 9px rgba(23, 42, 72, .09), 0 1px 2px rgba(23, 42, 72, .04) !important;
  box-sizing: border-box !important;
}
.clients-table .client-actions.compact-actions > form,
.clients-table .client-actions.compact-actions > button,
.clients-table .client-actions.compact-actions > select {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Cuentas: agrupa solo los controles de la columna Acciones */
.accounts-table td:last-child > .account-actions {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 9px !important;
  border: 1px solid #e0e7f2 !important;
  border-radius: 12px !important;
  background: #fbfcff !important;
  box-shadow: 0 3px 9px rgba(23, 42, 72, .09), 0 1px 2px rgba(23, 42, 72, .04) !important;
  box-sizing: border-box !important;
}
.accounts-table .account-actions > form,
.accounts-table .account-actions > details,
.accounts-table .account-actions > button {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Menú de servidores asignados: más legible y con controles espaciados */
.accounts-table td.assigned-servers details.server-edit {
  position: relative !important;
}
.accounts-table td.assigned-servers details.server-edit[open] > form {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 1200 !important;
  width: 290px !important;
  max-width: min(320px, 78vw) !important;
  max-height: min(340px, 55vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px !important;
  border: 1px solid #dce5f2 !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(22, 39, 66, .16) !important;
  text-align: left !important;
}
.accounts-table td.assigned-servers details.server-edit[open] > form .checkline {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  padding: 8px 7px !important;
  margin: 2px 0 !important;
  border-radius: 7px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.accounts-table td.assigned-servers details.server-edit[open] > form .checkline:hover {
  background: #f0f5ff !important;
}
.accounts-table td.assigned-servers details.server-edit[open] > form input[type="checkbox"] {
  flex: 0 0 15px !important;
  width: 15px !important;
  min-width: 15px !important;
  height: 15px !important;
  margin-top: 2px !important;
}
.accounts-table td.assigned-servers details.server-edit[open] > form button {
  position: sticky !important;
  bottom: 0 !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px !important;
  background: #315cf5 !important;
  color: #fff !important;
  box-shadow: 0 -5px 12px rgba(255,255,255,.9) !important;
}


/* IKS V12: IP a la izquierda y país a la derecha; sin superposición */
.clients-table .client-ip-country {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}
.clients-table .client-ip-country .client-ip,
.clients-table .client-ip-country .client-country {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.clients-table .client-ip-country .client-country {
  color: #60718d;
  gap: 4px;
}
.clients-table .client-ip-country .cellsub {
  display: inline !important;
  margin: 0 !important;
}

/* Dialog compacto, centrado y sin overflow horizontal */
dialog.edit-dialog.client-edit-dialog {
  width: min(500px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 0 !important;
  margin: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid #dce5f2 !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(12, 27, 52, .28) !important;
}
dialog.edit-dialog.client-edit-dialog::backdrop {
  background: rgba(12, 24, 42, .48) !important;
  backdrop-filter: blur(3px);
}
dialog.edit-dialog.client-edit-dialog .edit-dialog-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 13px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 24px !important;
  overflow: visible !important;
}
dialog.edit-dialog.client-edit-dialog .edit-dialog-form h3 {
  margin: 0 0 2px !important;
  text-align: center !important;
}
dialog.edit-dialog.client-edit-dialog .edit-dialog-form label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
  min-width: 0 !important;
}
dialog.edit-dialog.client-edit-dialog .edit-dialog-form input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
dialog.edit-dialog.client-edit-dialog .edit-dialog-actions {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
@media (max-width: 520px) {
  dialog.edit-dialog.client-edit-dialog .edit-dialog-form {
    padding: 18px !important;
  }
  dialog.edit-dialog.client-edit-dialog .edit-dialog-actions > button {
    flex: 1 1 auto;
  }
}

/* Desplegable de servidores: compacto y anclado al control, no a la tabla */
.accounts-table td.assigned-servers details.server-edit[open] > form {
  width: 245px !important;
  max-width: min(270px, 75vw) !important;
  max-height: min(260px, 42vh) !important;
  top: auto !important;
  bottom: calc(100% + 7px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1500 !important;
}
.accounts-table td.assigned-servers details.server-edit[open] > form .checkline {
  display: flex !important;
  align-items: flex-start !important;
  flex-flow: row nowrap !important;
  gap: 8px !important;
  padding: 6px 5px !important;
}


/* V15 — Clientes: encabezados y datos centrados, IP/país en una sola línea,
   y todas las acciones agrupadas visualmente como en Cuentas del panel. */
#client-results .clients-table {
  min-width: 1320px !important;
  table-layout: auto;
}
#client-results .clients-table thead th {
  text-align: center !important;
  vertical-align: middle;
  white-space: nowrap;
}
#client-results .clients-table tbody td {
  vertical-align: middle;
}
#client-results .clients-table tbody td:nth-child(1),
#client-results .clients-table tbody td:nth-child(2),
#client-results .clients-table tbody td:nth-child(3),
#client-results .clients-table tbody td:nth-child(4),
#client-results .clients-table tbody td:nth-child(5),
#client-results .clients-table tbody td:nth-child(6),
#client-results .clients-table tbody td:nth-child(7) {
  text-align: center !important;
}
#client-results .clients-table tbody td:first-child strong,
#client-results .clients-table tbody td:first-child .cellsub {
  display: block;
  text-align: center;
}
#client-results .clients-table tbody td:first-child .cellsub {
  white-space: nowrap;
}
#client-results .clients-table td:nth-child(2) .tag {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
#client-results .clients-table .status,
#client-results .clients-table .connection-pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
#client-results .clients-table .client-ip-country {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: max-content;
  max-width: none;
  margin-inline: auto;
  white-space: nowrap !important;
}
#client-results .clients-table .client-ip-country .client-ip,
#client-results .clients-table .client-ip-country .client-country {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 4px;
  white-space: nowrap !important;
  min-width: max-content;
  margin: 0;
}
#client-results .clients-table .client-ip-country .client-ip code {
  white-space: nowrap;
}
#client-results .clients-table td:nth-child(6) .cellsub,
#client-results .clients-table td:nth-child(7) .cellsub {
  display: block;
  text-align: center;
  white-space: nowrap;
}
#client-results .clients-table td:last-child {
  min-width: 360px !important;
  text-align: center !important;
}
#client-results .clients-table .client-actions.compact-actions {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: max-content;
  min-width: max-content;
  max-width: none !important;
  padding: 9px 10px;
  margin: 2px auto;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 13px rgba(24, 45, 78, .10);
}
#client-results .clients-table .client-actions.compact-actions > form,
#client-results .clients-table .client-actions.compact-actions > button,
#client-results .clients-table .client-actions.compact-actions > select {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
#client-results .clients-table .client-actions.compact-actions button,
#client-results .clients-table .client-actions.compact-actions select {
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  #client-results .clients-table { min-width: 1320px !important; }
  #client-results .clients-table .client-ip-country {
    flex-flow: row nowrap !important;
  }
}


/* V16 — Asignación de servidores mediante mini ventana modal */
.accounts-table .server-assign-open {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin-top: 7px;
  padding: 7px 10px;
  min-height: 32px;
  font-size: 11px;
}
dialog.server-assign-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(82vh, 620px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e3f2;
  border-radius: 16px;
  background: #fff;
  color: var(--ink, #172b4d);
  box-shadow: 0 22px 65px rgba(14, 31, 58, .24);
}
dialog.server-assign-dialog::backdrop {
  background: rgba(15, 27, 47, .46);
  backdrop-filter: blur(2px);
}
dialog.server-assign-dialog .server-assign-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(82vh, 620px);
  padding: 22px;
  overflow: hidden;
}
dialog.server-assign-dialog .server-assign-form h3 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}
dialog.server-assign-dialog .server-assign-form > .muted {
  margin: 0;
  text-align: center;
}
dialog.server-assign-dialog .server-assign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 3px;
  max-height: min(45vh, 340px);
  overflow: auto;
}
dialog.server-assign-dialog .server-assign-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e0e8f4;
  border-radius: 9px;
  background: #fbfcff;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
dialog.server-assign-dialog .server-assign-option:has(input:checked) {
  border-color: #9bb8ff;
  background: #edf3ff;
  box-shadow: inset 0 0 0 1px rgba(49, 92, 245, .10);
}
dialog.server-assign-dialog .server-assign-option input {
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #315cf5;
}
dialog.server-assign-dialog .edit-dialog-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid #edf1f7;
}
dialog.server-assign-dialog .edit-dialog-actions button {
  min-height: 38px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  dialog.server-assign-dialog .server-assign-form { padding: 16px; }
  dialog.server-assign-dialog .server-assign-grid { grid-template-columns: 1fr; }
}


/* V17 — Modales consistentes para permisos y créditos en Cuentas del panel */
.modal-action {
  display: inline-flex !important;
  border: 0;
  background: transparent;
  padding: 5px 0;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.action-config-dialog {
  width: min(420px, calc(100vw - 32px));
}
.action-config-dialog .action-config-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-height: min(82vh, 620px);
  overflow: auto;
  padding: 22px;
}
.action-config-dialog .action-config-form h3 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}
.action-config-dialog .action-config-form > .muted {
  margin: -3px 0 2px;
  text-align: center;
}
.action-config-dialog .action-config-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.action-config-dialog .server-assign-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e0e8f4;
  border-radius: 10px;
  background: #fbfcff;
  cursor: pointer;
  font-size: 13px;
}
.action-config-dialog .server-assign-option:has(input:checked) {
  border-color: #9bb8ff;
  background: #edf3ff;
}
.action-config-dialog .server-assign-option input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #315cf5;
}
.action-config-dialog .action-config-form > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.action-config-dialog .action-config-form input[type="number"],
.action-config-dialog .action-config-form input[type="text"] {
  width: 100%;
}


/* V19 — Desk en una sola línea, editable también en servidores existentes */
.serverlayout input[name="desk"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .015em;
  white-space: nowrap;
}
.server-desk-cell { min-width: 330px; }
.server-desk-edit {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 320px;
}
.server-desk-edit input[name="desk"] {
  width: 255px;
  min-width: 255px;
  padding: 8px 9px;
  font-size: 11px;
}
.server-desk-edit button { flex: 0 0 auto; white-space: nowrap; }


/* V20 — IP arriba, país debajo y tiempo conectado legible */
#client-results .clients-table .client-ip-country {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  white-space: normal !important;
}
#client-results .clients-table .client-ip-country .client-ip,
#client-results .clients-table .client-ip-country .client-country {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  line-height: 1.35;
}
#client-results .clients-table .client-country {
  font-size: 11px;
  color: var(--muted, #64748b);
}
#client-results .clients-table .connection-duration {
  display: block;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #64748b);
}


/* V21 — Endpoints alineados y acciones agrupadas en panel sombreado */
.endpoints-table { min-width: 1060px; }
.endpoints-table th, .endpoints-table td { vertical-align: middle; text-align: center; }
.endpoints-table th { white-space: nowrap; }
.endpoints-table .endpoint-name { min-width: 175px; text-align: center; }
.endpoints-table .endpoint-ip { min-width: 150px; }
.endpoints-table .endpoint-address { min-width: 180px; white-space: nowrap; }
.endpoints-table .server-desk-cell { min-width: 300px; text-align: center; }
.desk-display { display: inline-block; white-space: nowrap; font-size: 11px; letter-spacing: .015em; }
.endpoint-action-cell { min-width: 230px; }
.endpoint-action-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 5px auto; padding: 12px; width: fit-content; min-width: 175px; max-width: 100%; background: var(--surface-soft, rgba(100,116,139,.10)); border: 1px solid var(--border, rgba(100,116,139,.22)); border-radius: 12px; box-shadow: 0 4px 12px rgba(15,23,42,.10); }
.endpoint-action-box > form, .endpoint-action-box > details { width: 100%; display: flex; justify-content: center; }
.endpoint-action-box button, .endpoint-action-box summary { white-space: nowrap; }
.endpoint-action-box summary { cursor: pointer; list-style-position: inside; padding: 7px 10px; border-radius: 8px; background: rgba(100,116,139,.12); text-align: center; }
.endpoint-edit { position: relative; }
.endpoint-edit[open] { display: block !important; }
.endpoint-edit-form { width: min(320px, 75vw); padding: 14px; margin-top: 8px; text-align: left; background: var(--panel, #fff); border: 1px solid var(--border, #d1d5db); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.18); }
.endpoint-edit-form label { text-align: left; }
.endpoint-edit-form input[name="desk"] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }

/* V21 — Endpoints: acciones ordenadas y formularios en ventana centrada */
.endpoint-action-cell { min-width: 290px; width: 290px; }
.endpoint-action-box { display:flex; flex-flow:row wrap; align-items:center; justify-content:center; gap:8px; margin:6px auto; padding:12px; width:min(100%,280px); min-width:0; box-sizing:border-box; background:var(--surface-soft,rgba(100,116,139,.10)); border:1px solid var(--border,rgba(100,116,139,.22)); border-radius:12px; box-shadow:0 4px 12px rgba(15,23,42,.10); }
.endpoint-action-box > form { display:flex; justify-content:center; margin:0; }
.endpoint-action-box button { white-space:nowrap; min-height:38px; }
.endpoint-action-box .endpoint-open-modal { flex:0 1 auto; }
dialog.endpoint-dialog { width:min(520px,calc(100vw - 32px)); max-width:520px; max-height:calc(100dvh - 32px); overflow:auto; padding:0; border:1px solid var(--border,#d1d5db); border-radius:16px; background:var(--panel,#fff); color:var(--text,#111827); box-shadow:0 24px 70px rgba(0,0,0,.28); }
dialog.endpoint-dialog::backdrop { background:rgba(15,23,42,.58); backdrop-filter:blur(2px); }
.endpoint-dialog-form { padding:24px; gap:14px; }
.endpoint-dialog-form h3 { margin:0; font-size:1.2rem; }
.endpoint-dialog-form > .muted { margin:0 0 4px; }
.endpoint-dialog-form label { display:flex; flex-direction:column; gap:6px; }
.endpoint-dialog-form input:not([type=checkbox]) { width:100%; box-sizing:border-box; }
.endpoint-dialog-form input[name=desk] { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; }
.endpoint-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.endpoint-access-list { display:grid; gap:8px; max-height:45vh; overflow:auto; padding:10px; border:1px solid var(--border,#d1d5db); border-radius:10px; }
@media(max-width:600px){ .endpoint-action-cell { min-width:230px; width:230px; } .endpoint-action-box { width:210px; } .endpoint-dialog-form { padding:17px; } .endpoint-dialog-actions { flex-direction:column-reverse; } .endpoint-dialog-actions button { width:100%; } }

/* V23: Endpoints uses a compact action entry; actions run in a centered modal. */
.endpoints-table { width:100%; table-layout:auto; }
.endpoints-table th,.endpoints-table td { vertical-align:middle; }
.endpoints-table .endpoint-name { min-width:130px; text-align:left; }
.endpoints-table .endpoint-ip { min-width:115px; }
.endpoints-table .endpoint-address { min-width:135px; white-space:nowrap; }
.endpoints-table .server-desk-cell { min-width:155px; }
.endpoint-action-cell { width:105px !important; min-width:105px !important; text-align:center; }
.endpoint-action-cell > button { min-width:92px; }
dialog.endpoint-actions-dialog { width:min(860px,calc(100vw - 32px)); max-width:860px; max-height:calc(100dvh - 32px); overflow:auto; padding:0; border:1px solid var(--border,#d1d5db); border-radius:16px; background:var(--panel,#fff); color:var(--text,#111827); box-shadow:0 24px 70px rgba(0,0,0,.28); }
dialog.endpoint-actions-dialog::backdrop { background:rgba(15,23,42,.58); backdrop-filter:blur(2px); }
.endpoint-dialog-inner { padding:22px; }
.endpoint-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.endpoint-dialog-head h3 { margin:0 0 4px; }
.endpoint-dialog-head p { margin:0; overflow-wrap:anywhere; }
.endpoint-actions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.endpoint-action-card { min-width:0; display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--border,#d1d5db); border-radius:12px; background:var(--surface-soft,rgba(100,116,139,.08)); box-shadow:0 3px 10px rgba(15,23,42,.08); }
.endpoint-action-card p { margin:0; }
.endpoint-action-card label { display:flex; flex-direction:column; gap:5px; min-width:0; }
.endpoint-action-card input:not([type=checkbox]) { width:100%; box-sizing:border-box; min-width:0; }
.endpoint-action-card input[name=desk] { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }
.endpoint-action-card .endpoint-access-list { max-height:220px; overflow:auto; }
.endpoint-action-card .checkline { display:flex; flex-direction:row; align-items:center; gap:8px; overflow-wrap:anywhere; }
.endpoint-action-card .checkline input { width:auto; flex:0 0 auto; }
.endpoint-delete-card { border-color:rgba(190,50,50,.28); }
@media(max-width:680px){ .endpoint-actions-grid { grid-template-columns:minmax(0,1fr); } .endpoint-dialog-inner { padding:15px; } .endpoints-table .server-desk-cell { min-width:120px; } }

/* V27: separated client/demo workflows in the navigation */
.nav-submenu{display:flex;flex-direction:column;gap:3px;margin:-5px 0 8px 34px;padding-left:10px;border-left:1px solid var(--border, #d7dce3)}
.nav-submenu a{display:block;padding:7px 9px;border-radius:7px;font-size:.82rem;line-height:1.25;color:var(--muted, #667085);text-decoration:none;white-space:normal}
.nav-submenu a:hover,.nav-submenu a.active{background:var(--surface-soft, rgba(127,127,127,.12));color:var(--text, inherit)}
.workflow-tabs{margin-bottom:16px;flex-wrap:wrap}
.demo-permission-note{grid-column:1/-1}

/* V28: compact action column with server-style Manage dialogs */
.manage-cell { min-width: 112px; text-align: center; vertical-align: middle; }
.manage-open { min-width: 96px; white-space: nowrap; }
dialog.manage-dialog { width: min(650px, calc(100vw - 28px)); max-width: 650px; max-height: calc(100dvh - 28px); overflow: auto; padding: 0; border: 1px solid var(--border,#d1d5db); border-radius: 16px; background: var(--panel,#fff); color: var(--text,#111827); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
dialog.manage-dialog::backdrop { background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }
.manage-actions-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.manage-actions-grid > button, .manage-action-form { min-width: 0; border: 1px solid var(--border,#d7dee8); border-radius: 10px; background: var(--surface-muted,#f7f9fc); padding: 12px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.manage-actions-grid > button { align-items: center; min-height: 44px; }
.manage-action-form label { display: flex; flex-direction: column; gap: 6px; }
.manage-action-form input, .manage-action-form select { width: 100%; box-sizing: border-box; }
.manage-action-form p { margin: 0; }
.manage-delete { border-color: #efc7cb; background: #fff8f8; }
.manage-actions-grid .copy-client { min-height: 44px; }
@media(max-width:600px) { .manage-actions-grid { grid-template-columns: minmax(0,1fr); } .manage-dialog .endpoint-dialog-inner { padding: 15px; } }

/* V30: collapsible Clients/Demos group, separate Multilogin routes. */
.nav-dropdown{margin:0;padding:0}.nav-dropdown-summary{position:relative;display:flex;align-items:center;gap:11px;min-height:42px;padding:11px 12px;border-radius:9px;color:var(--muted,#667085);cursor:pointer;list-style:none;user-select:none}.nav-dropdown-summary::-webkit-details-marker{display:none}.nav-dropdown-summary:hover{background:var(--surface-soft,rgba(127,127,127,.12));color:var(--text,inherit)}.nav-dropdown[open]>.nav-dropdown-summary{background:#243653;color:#fff;font-weight:700}.nav-dropdown[open]>.nav-dropdown-summary .nav-icon{color:#8eabff}.nav-chevron{margin-left:auto;font-size:15px;transition:transform .15s ease}.nav-dropdown[open]>.nav-dropdown-summary .nav-chevron{transform:rotate(180deg)}.nav-dropdown .nav-submenu{margin-top:0}


/* V33 — acabado SaaS moderno, consistente y responsive */
:root{
  --bg:#f3f6fc;
  --ink:#13213a;
  --muted:#687891;
  --line:#dfe7f4;
  --blue:#315cf5;
  --nav:#101d33;
  --green:#14966b;
}
body{background:linear-gradient(180deg,#f7f9fd 0%,#f1f5fb 100%);color:var(--ink)}
h1,h2,h3{letter-spacing:-.035em}
h1{font-size:clamp(25px,2.2vw,32px);font-weight:800}
.sidebar{background:linear-gradient(180deg,#111f36 0%,#0d192d 100%);box-shadow:8px 0 28px #0e1b2c0b}
.brandmark{box-shadow:0 5px 14px #315cf52c}
.sidebar nav{gap:5px}
.sidebar nav a,.nav-dropdown-summary{transition:background .18s ease,color .18s ease,transform .18s ease}
.sidebar nav a:hover,.sidebar nav a:focus,.nav-dropdown-summary:hover{background:#1b2d4a;color:#fff}
.sidebar nav a.active,.sidebar nav a[class~="active"]{background:linear-gradient(100deg,#243957,#20334f);color:#fff;box-shadow:inset 3px 0 0 #5278ff}
.main{padding-top:30px}
.panel,.stat{border-color:#dce5f3;border-radius:16px;box-shadow:0 5px 18px #18345a08;transition:box-shadow .18s ease,border-color .18s ease}
.panel:hover,.stat:hover{border-color:#d1def2;box-shadow:0 9px 26px #18345a0c}
.stat{padding:21px 22px}
.stat>strong{font-size:clamp(28px,2.4vw,34px);letter-spacing:-.055em}
.statlabel{font-weight:600}
.panel{padding:22px}
th{color:#687995;background:#f8faff;letter-spacing:.8px}
th:first-child{border-top-left-radius:8px}
th:last-child{border-top-right-radius:8px}
td{color:#52627a}
tbody tr{transition:background .15s ease}
tbody tr:hover td{background:#f7f9ff}
.accounts-table tbody tr:target td{background:#eef4ff}
.tag{border:1px solid #e7edf7;background:#f5f7fc;color:#4b5c77}
input,select,textarea{border-color:#d5dfef;border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{border-color:#7896ff;box-shadow:0 0 0 4px #315cf514}
.primary{background:linear-gradient(135deg,#3865ff,#2d55e8);border-radius:10px;box-shadow:0 3px 8px #315cf51c;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.primary:hover{background:linear-gradient(135deg,#2d58ed,#2348d4);box-shadow:0 5px 13px #315cf52b;transform:translateY(-1px)}
.secondary{border-color:#d4dfef;border-radius:10px;color:#405573;transition:background .15s ease,border-color .15s ease}
.secondary:hover{background:#f5f8ff;border-color:#b9cafa}
.accounts-table .manage-open{background:linear-gradient(135deg,#3865ff,#2d55e8)!important;color:#fff!important;border:1px solid #315cf5!important;border-radius:10px;box-shadow:0 3px 8px #315cf51c;font-weight:700}
.accounts-table .manage-open:hover{background:linear-gradient(135deg,#2d58ed,#2348d4)!important;border-color:#244bd0!important}
.edit-dialog,.endpoint-dialog{border:1px solid #dce5f3;border-radius:18px;box-shadow:0 24px 80px #0b19334a;padding:0}
dialog::backdrop{background:#101c32a6;backdrop-filter:blur(3px)}
.edit-dialog-form,.endpoint-dialog-inner{padding:24px}
.edit-dialog h3,.endpoint-dialog h3{font-size:19px;margin:0 0 8px}
.edit-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.status.on{color:#11835f}
.status.on:before{box-shadow:0 0 0 3px #1db7841a}
.account-filters{background:#f7f9fe;border:1px solid #e1e9f6;border-radius:13px;padding:14px;margin-bottom:17px}
@media(max-width:700px){
 .main{padding:19px 13px}
 .panel{padding:16px;border-radius:13px}
 .stat{padding:17px}
 .account-filters{padding:12px}
}


/* V34 — Auditoría agrupada por IP */
.audit-notice{margin-bottom:18px}
.audit-groups-panel,.audit-ungrouped-panel{margin-top:16px}
.audit-ip-list{display:flex;flex-direction:column;gap:10px}
.audit-ip-group{border:1px solid #dfe7f4;border-radius:13px;background:#fff;overflow:hidden}
.audit-ip-group[open]{border-color:#bfd0ff;box-shadow:0 5px 18px #18345a08}
.audit-ip-group>summary{list-style:none;display:grid;grid-template-columns:minmax(170px,1.3fr) minmax(110px,.8fr) minmax(175px,1fr) auto 18px;align-items:center;gap:16px;padding:15px 17px;cursor:pointer}
.audit-ip-group>summary::-webkit-details-marker{display:none}
.audit-ip-group>summary:hover{background:#f7f9ff}
.audit-ip-main,.audit-ip-time{display:flex;flex-direction:column;gap:4px;min-width:0}
.audit-ip-main strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#2448b5;overflow-wrap:anywhere}
.audit-ip-main small,.audit-ip-time small{color:#71809a;font-size:12px}
.audit-ip-time strong{font-size:13px;color:#263752}
.audit-ip-country{font-size:13px;color:#52627a}
.audit-chevron{color:#315cf5;transition:transform .15s ease}
.audit-ip-group[open] .audit-chevron{transform:rotate(180deg)}
.audit-events-table{border-top:1px solid #e6edf7}
.audit-events-table table{min-width:800px}
.audit-detail-text{max-width:460px;overflow-wrap:anywhere}
@media(max-width:800px){
 .audit-ip-group>summary{grid-template-columns:minmax(0,1fr) auto 18px;gap:10px}
 .audit-ip-country{grid-column:1}
 .audit-ip-time{grid-column:1}
 .audit-ip-group>summary>.tag{grid-column:2;grid-row:1}
 .audit-chevron{grid-column:3;grid-row:1}
}


/* V35 — búsqueda por IP y retención de auditoría */
.audit-ip-search-form{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;padding:15px;background:#f7f9fe;border:1px solid #e1e9f6;border-radius:12px}
.audit-ip-search-form label{font-size:13px;font-weight:700;color:#52627a}
.audit-ip-search-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.audit-ip-search-row input{flex:1;min-width:220px;max-width:520px;background:#fff}
.audit-clear-search{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 13px;border:1px solid #d4dfef;border-radius:10px;color:#405573;background:#fff}
.audit-clear-search:hover{background:#f0f5ff}
@media(max-width:560px){.audit-ip-search-row input{min-width:100%;max-width:none}.audit-ip-search-row button,.audit-clear-search{width:100%}}

/* V36: versión oficial visible en el pie del menú lateral */
.app-version{display:block;margin-top:5px;font-size:11px;letter-spacing:.04em;color:#94a3b8}

/* V38 — indicador visual claro del estado de los respaldos automáticos */
.backup-state{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em}
.backup-state-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.backup-state-on{color:#1457d9;background:#e8f0ff;border:1px solid #b9d0ff}
.backup-state-on .backup-state-dot{background:#2160f5;box-shadow:0 0 0 3px #d4e3ff}
.backup-state-off{color:#667085;background:#f1f3f6;border:1px solid #d9dee7}
.backup-state-off .backup-state-dot{background:#98a2b3}
.backup-control-row{display:grid;grid-template-columns:minmax(230px,1.3fr) minmax(130px,.7fr) minmax(170px,.8fr) auto;gap:18px;align-items:center;margin:16px 0;padding:16px;border:1px solid #dbe5f7;border-radius:14px;background:linear-gradient(110deg,#f5f8ff,#fff)}
.backup-current-state{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px}
.backup-current-state.is-on{background:#eaf1ff;color:#174ea6;border:1px solid #c6d8ff}
.backup-current-state.is-off{background:#f3f4f6;color:#475467;border:1px solid #e0e3e8}
.backup-current-state.is-on .backup-state-dot{background:#2160f5;box-shadow:0 0 0 4px #d4e3ff}
.backup-current-state.is-off .backup-state-dot{background:#98a2b3}
.backup-current-state strong,.backup-current-state small{display:block}
.backup-current-state small{margin-top:5px;color:#667085}
.backup-current-state.is-on small b{color:#2160f5}
.backup-current-state.is-off small b{color:#667085}
.backup-schedule-meta{display:flex;flex-direction:column;gap:4px;padding-left:12px;border-left:1px solid #d8e3f5}
.backup-schedule-meta strong{font-size:16px;color:#102a56}
.backup-schedule-meta small,.backup-meta-label{font-size:12px;color:#667085}
.backup-disable-btn{background:#fff!important;color:#344054!important;border:1px solid #cbd5e1!important;border-radius:10px;padding:11px 14px;font-weight:700;cursor:pointer}
.backup-disable-btn:hover{background:#f2f5fa!important}
.backup-enable-btn{background:#285cf6!important;color:#fff!important;border:1px solid #285cf6!important;border-radius:10px;padding:11px 14px;font-weight:700;cursor:pointer}
.backup-enable-btn:hover{background:#1747d4!important}
@media(max-width:900px){.backup-control-row{grid-template-columns:1fr 1fr}.backup-current-state{grid-column:1/-1}}
@media(max-width:560px){.backup-control-row{grid-template-columns:1fr}.backup-current-state{grid-column:auto}.backup-schedule-meta{border-left:0;padding-left:0}.backup-control-row form,.backup-control-row button{width:100%}}

/* V39 — monitorización CSP en solo lectura */
.csp-note{border-left:4px solid #2563eb;background:#f5f8ff}
.csp-note p{margin-bottom:0;color:#52627a}
.csp-config-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:16px}
.csp-config-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#344054}
.csp-config-form input{width:100%;min-width:0}
.csp-config-form button{align-self:end;min-height:42px}
.csp-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #e4eaf3}
.csp-status-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.csp-pill{display:inline-flex;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800}
.csp-online{background:#e8f1ff;color:#1d4ed8}
.csp-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.csp-metric{border:1px solid #dbe5f5;background:#fbfcff;border-radius:12px;padding:14px}
.csp-metric>strong{display:block;margin-bottom:10px;color:#16345e}
.csp-metric div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid #edf1f7;font-size:12px}
.csp-metric div span{color:#667085}.csp-metric div b{max-width:65%;overflow-wrap:anywhere;text-align:right;color:#344054}
@media(max-width:600px){.csp-config-form{grid-template-columns:1fr}.csp-status-head{align-items:flex-start}}

.csp-server-select{max-width:560px;margin:12px 0}.csp-server-select label{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:13px}.csp-server-select select{width:100%;padding:11px;border:1px solid #d6e0ef;border-radius:10px;background:#fff}

.csp-back-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.csp-back-actions a{display:inline-flex;align-items:center;text-decoration:none;padding:9px 13px;border:1px solid #d6e0ef;border-radius:10px;background:#fff;color:#1d4ed8;font-weight:700;font-size:13px}.fslb-type{background:#edf2f7;color:#344054}

/* V42: compact sidebar navigation and grouped server integrations */
.sidebar nav{gap:3px}
.sidebar nav>a{padding:9px 11px;gap:10px}
.sidebar .nav-dropdown-summary{min-height:36px;padding:8px 10px;gap:9px;font-size:12.5px}
.sidebar .nav-submenu{gap:2px;margin:-3px 0 5px 29px;padding-left:8px}
.sidebar .nav-submenu a{padding:6px 7px;font-size:12px;display:flex;align-items:center;gap:8px}
.sidebar .nav-submenu a .nav-icon{font-size:13px;min-width:14px}
.sidebar .nav-dropdown-summary .nav-icon{min-width:16px}
.sidebar-collapsed .sidebar nav .nav-dropdown-summary{justify-content:center;padding:9px 5px}
.sidebar-collapsed .sidebar nav .nav-dropdown-summary .nav-chevron{display:none}
.sidebar-collapsed .sidebar nav .nav-dropdown[open] .nav-submenu{margin:0;padding:5px 0;border:0;align-items:center}
.sidebar-collapsed .sidebar nav .nav-submenu a{justify-content:center;padding:8px 3px;font-size:0}
.sidebar-collapsed .sidebar nav .nav-submenu a .nav-icon{font-size:14px}

/* V44: one compact navigation group for infrastructure and client/account types */
.sidebar .nav-submenu a{min-height:29px}
.sidebar .nav-submenu a.active{background:rgba(71,116,255,.16);border-left:2px solid #4774ff;border-radius:8px}
.sidebar .nav-dropdown-summary{font-weight:650}

/* V45: modern server performance dashboard */
.performance-hero{align-items:center;margin-bottom:22px}
.performance-live{display:inline-flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #dbe5f7;background:#fff;border-radius:999px;color:#294166;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 5px 18px rgba(24,49,91,.04)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#21bd91;box-shadow:0 0 0 4px rgba(33,189,145,.12);flex:0 0 auto}
.performance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 20px}
.metric-card{min-width:0;background:linear-gradient(160deg,#fff 0%,#fbfcff 100%);border:1px solid #dce6f6;border-radius:18px;padding:20px;box-shadow:0 8px 25px rgba(28,54,96,.045)}
.metric-cpu{background:linear-gradient(145deg,#fff 0%,#f5f8ff 100%)}
.metric-head{display:flex;align-items:center;gap:10px;margin-bottom:17px}
.metric-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:#eaf0ff;color:#365cf5;font-size:20px;font-weight:700}
.metric-icon.blue{background:#e9f2ff;color:#3277e9}.metric-icon.violet{background:#f0eaff;color:#8255d9}.metric-icon.green{background:#e4faf2;color:#159b72}
.metric-label{font-size:12px;font-weight:650;color:#627493}
.metric-value{font-size:clamp(28px,2.4vw,36px);line-height:1.12;letter-spacing:-1.2px;font-weight:750;color:#142544;margin-bottom:9px}
.metric-value small{font-size:16px;letter-spacing:0;font-weight:650}
.metric-caption{font-size:11px;line-height:1.65;color:#7383a0;min-height:19px}
.metric-track{height:7px;background:#edf1f8;border-radius:99px;overflow:hidden;margin-top:15px}
.metric-track span{display:block;height:100%;min-width:0;max-width:100%;border-radius:99px;background:linear-gradient(90deg,#355cf6,#6093ff)}
.violet-track span{background:linear-gradient(90deg,#8054d8,#b18bff)}
.load-chips{display:flex;gap:5px;margin-top:14px;flex-wrap:wrap}
.load-chips span{display:flex;gap:5px;align-items:center;padding:5px 7px;border-radius:7px;background:#edf2ff;color:#6a7b9b;font-size:10px}
.load-chips b{color:#2445b9}
.metric-uptime{background:linear-gradient(145deg,#fff 0%,#f3fcf8 100%)}
.performance-details{padding:24px;margin-bottom:18px}
.performance-details .sectionhead{margin-bottom:20px}
.resource-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.resource-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#5f7191;font-size:12px;font-weight:600;margin-bottom:10px}
.resource-meta strong{color:#172849}
.large-track{height:10px;margin-top:0}
.performance-note{display:flex;align-items:flex-start;gap:13px;padding:17px 19px;border:1px solid #dce6f6;border-radius:15px;background:#f7f9fe;color:#667795;font-size:12px;line-height:1.7;margin-bottom:20px}
.performance-note p{margin:4px 0 0}.performance-note strong{color:#243653}
.note-icon{display:flex;align-items:center;justify-content:center;flex:0 0 25px;width:25px;height:25px;border-radius:50%;background:#e5edff;color:#3157e9;font-weight:800}
@media(max-width:1100px){.performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.performance-grid{grid-template-columns:1fr}.resource-list{grid-template-columns:1fr}.performance-hero{align-items:flex-start;flex-direction:column}.metric-card{padding:17px}.performance-details{padding:18px}}

.csp-password-wrap{display:flex;gap:8px;align-items:stretch}.csp-password-wrap input{flex:1;min-width:0}.csp-password-wrap button{flex:0 0 auto}

/* V48: consistent contextual back links */
.context-back-wrap{margin:0 0 12px;display:flex;align-items:center}.context-back{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line,#dce2eb);border-radius:8px;background:#fff;color:var(--muted,#526077);text-decoration:none;font-size:12px;font-weight:700}.context-back:hover{border-color:#9eb2ff;color:var(--blue,#315eea);background:#f8faff}.context-back:focus-visible{outline:3px solid #315eea35;outline-offset:2px}

.csp-browse-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:14px 0}.csp-browse-form label{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:13px;min-width:240px}.csp-browse-form select{padding:10px;border:1px solid #d6e0ef;border-radius:10px;background:#fff}.csp-browse-summary{margin:14px 0;padding:10px 12px;border-radius:9px;background:#f5f8ff;color:#344054;font-size:13px}.csp-browse-form button{min-height:40px}

/* Firewall delete confirmation: compact checkbox row matching account permission controls. */
.firewall-delete-form label.checkline {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 5px 2px;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  cursor: pointer;
}
.firewall-delete-form label.checkline input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  flex: 0 0 15px;
  width: 15px !important;
  min-width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
}
.firewall-delete-form button.dangerbtn {
  width: 100%;
  min-height: 38px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}


/* IKS bulk actions: compact, aligned with the existing Control Center design */
.bulk-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;margin:10px 0 12px;background:#f8faff;border:1px solid var(--line);border-radius:9px;min-height:48px}
.bulk-select-all{display:inline-flex!important;align-items:center;gap:8px;margin:0!important;white-space:nowrap;font-size:12px!important;color:#42516a}
.bulk-hint{flex:1;min-width:180px;font-size:11px;color:var(--muted);line-height:1.4}
.bulk-actions .dangerbtn{min-height:32px;padding:7px 11px;white-space:nowrap}
input[type=checkbox].bulk-panel-id,input[type=checkbox].bulk-client-id,input[type=checkbox].bulk-credit-id,.bulk-select-all input[type=checkbox]{appearance:auto!important;-webkit-appearance:checkbox!important;display:inline-block!important;flex:0 0 14px!important;width:14px!important;min-width:14px!important;max-width:14px!important;height:14px!important;min-height:14px!important;margin:0!important;padding:0!important;border:initial!important;border-radius:3px!important;box-shadow:none!important;accent-color:#315eea;vertical-align:middle}
.bulk-check-cell{width:92px}
.accounts-table td:has(> .bulk-panel-id),.clients-table td:has(> .bulk-client-id),.credits-table td:has(> .bulk-credit-id){width:92px;text-align:center}
@media(max-width:720px){.bulk-actions{align-items:flex-start;gap:9px}.bulk-hint{flex-basis:100%;order:3}.bulk-actions .dangerbtn{margin-left:auto}}


/* IKS UX patch: keep panel usernames on one line and give assigned servers room. */
.accounts-table th:nth-child(2),
.accounts-table td:nth-child(2) {
  width: 155px !important;
  min-width: 155px !important;
  max-width: 190px;
}
.accounts-table td:nth-child(2) strong {
  display: inline-block;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
.accounts-table th:nth-child(7),
.accounts-table td:nth-child(7) {
  min-width: 205px !important;
}
.accounts-table th:nth-child(8),
.accounts-table td:nth-child(8) {
  min-width: 105px;
}
@media (max-width: 760px) {
  .accounts-table th:nth-child(2),
  .accounts-table td:nth-child(2) {
    width: 155px !important;
    min-width: 155px !important;
  }
}