:root { --navy:#0b1628; --ink:#172033; --muted:#6c768b; --line:#e5e9f1; --canvas:#f5f7fb; --card:#fff; --blue:#2764e7; --green:#18a874; --orange:#eb8b3b; --red:#df5261; --purple:#7656df; }
.action-button.disconnect{color:#9a5a1d;border-color:#f0d2ae;background:#fffaf3}.activity-time{display:grid;gap:2px;font-size:8px;font-weight:700}.activity-time b{font-size:9px;color:#44536a}.activity-time.is-online{color:#13865e}.activity-time.is-offline{color:#9a6870}
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; }
.shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { background:linear-gradient(180deg,var(--navy),#0a1424); color:#fff; padding:26px 18px 20px; display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:12px; padding:0 8px; }.brand>span:last-child { display:grid; line-height:1; font-size:21px; letter-spacing:-.02em; }.brand b { font-weight:750; }.brand small { color:#7f91aa; font-size:8px; letter-spacing:.2em; margin-top:7px; }
.brand-mark { width:38px; height:38px; background:linear-gradient(145deg,#2c72f1,#24beb0); border-radius:12px; display:flex; align-items:end; justify-content:center; gap:3px; padding:9px; box-shadow:0 8px 25px #1c63e755; }.brand-mark i { width:4px; border-radius:8px; background:white; opacity:.95; }.brand-mark i:nth-child(1){height:10px}.brand-mark i:nth-child(2){height:19px}.brand-mark i:nth-child(3){height:14px}
.environment { margin:30px 7px 16px; font-size:11px; letter-spacing:.04em; color:#90a3bc; background:#14243a; border:1px solid #20344e; border-radius:9px; padding:9px 10px; }.environment span,.live i { width:7px; height:7px; background:#2bcf8d; display:inline-block; border-radius:50%; margin-right:7px; box-shadow:0 0 0 4px #2bcf8d16; }
.sidebar nav { display:grid; gap:5px; }.sidebar nav button { border:0; background:transparent; color:#93a2b8; text-align:left; border-radius:10px; padding:10px 11px; font-size:13px; font-weight:550; display:flex; align-items:center; gap:10px; transition:.18s ease; }.sidebar nav button:hover { color:#fff; background:#ffffff0b; }.sidebar nav button.active { background:linear-gradient(90deg,#2967e42e,#1eaaad0c); color:#fff; box-shadow:inset 3px 0 #3c7bf1; }.sidebar nav em { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:#1a2a40; color:#8fa3bd; font-style:normal; font-size:9px; letter-spacing:.05em; }.sidebar nav .active em { background:#2a65d9; color:#fff; }
.nas-card { margin-top:auto; border:1px solid #22354e; border-radius:12px; background:#111f33; padding:14px; display:grid; gap:5px; }.nas-card .eyebrow { font-size:9px; text-transform:uppercase; letter-spacing:.13em; color:#71849d; }.nas-card strong { font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace; color:#dbe8f7; }.nas-card small { color:#7387a0; font-size:10px; }
.profile { display:grid; grid-template-columns:34px 1fr auto; gap:9px; align-items:center; border-top:1px solid #1e2e44; margin-top:18px; padding:18px 5px 0; }.avatar { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#263a55; color:#bcd0e8; font-size:11px; font-weight:700; }.profile>span:nth-child(2){display:grid;gap:2px}.profile b{font-size:11px}.profile small{color:#75879e;font-size:9px}.profile button{color:#778aa2;border:0;background:transparent}
.workspace { min-width:0; }.topbar { min-height:105px; padding:24px 34px 21px; display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:#ffffffdf; backdrop-filter:blur(12px); }.breadcrumb { color:#8a94a6; font-size:10px; letter-spacing:.03em; }.topbar h1 { margin:5px 0 0; font-size:25px; letter-spacing:-.035em; }.top-actions { display:flex; align-items:center; gap:9px; }.live { color:#708097; font-size:10px; margin-right:6px; }.live i { width:6px; height:6px; margin-right:5px; }
.primary,.secondary { border-radius:9px; padding:10px 15px; font-size:11px; font-weight:650; border:1px solid transparent; }.primary { background:var(--blue); color:#fff; box-shadow:0 5px 14px #2764e72d; }.primary:hover{background:#1f56ce}.secondary{background:#fff;color:#42516a;border-color:#dfe4ec}.content{padding:26px 34px 44px;max-width:1500px;margin:0 auto}
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }.metric { position:relative; background:var(--card); border:1px solid var(--line); box-shadow:0 6px 18px #17203308; border-radius:13px; padding:17px 18px; display:grid; min-height:132px; overflow:hidden; }.metric:after{content:"";position:absolute;width:78px;height:78px;right:-27px;top:-27px;border-radius:50%;background:currentColor;opacity:.055}.metric>span{font-size:10px;color:var(--muted);font-weight:650}.metric strong{font-size:29px;line-height:1.15;margin-top:8px;letter-spacing:-.04em}.metric small{color:#8b94a6;font-size:9px}.metric em{font-style:normal;font-size:9px;font-weight:650;margin-top:9px}.metric.blue{color:var(--blue)}.metric.green{color:var(--green)}.metric.purple{color:var(--purple)}.metric.orange{color:var(--orange)}
.grid-main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr);gap:15px;margin-top:15px}.panel{background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:0 7px 22px #17203308}.panel-header{padding:17px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eef1f6}.panel-header h2,.toolbar h2{margin:0;font-size:13px;letter-spacing:-.01em}.panel-header p,.toolbar p{margin:4px 0 0;color:#8a94a7;font-size:9px}.panel-header button{border:0;background:none;color:var(--blue);font-size:9px;font-weight:650}
.activity-list{padding:4px 20px 8px}.activity{min-height:60px;display:grid;grid-template-columns:20px 1fr auto;align-items:center;border-bottom:1px solid #f0f2f6}.activity:last-child{border:0}.activity div{display:grid;gap:4px}.activity b{font-size:10px}.activity small{font-size:9px;color:#8993a4}.activity time{font:9px ui-monospace,monospace;color:#9ba4b2}.event-dot{width:8px;height:8px;border-radius:50%;background:#9ba7b8}.event-dot.success{background:var(--green);box-shadow:0 0 0 4px #18a87415}.event-dot.danger{background:var(--red);box-shadow:0 0 0 4px #df526115}.event-dot.info{background:var(--blue);box-shadow:0 0 0 4px #2764e715}
.pool-visual{min-height:305px}.donut{width:128px;height:128px;border-radius:50%;margin:18px auto 13px;background:conic-gradient(var(--blue) 0 var(--used),#e9edf5 var(--used) 100%);display:grid;place-items:center;position:relative}.donut:after{content:"";width:86px;height:86px;position:absolute;background:#fff;border-radius:50%}.donut div{position:relative;z-index:1;display:grid;text-align:center}.donut strong{font-size:22px;letter-spacing:-.04em}.donut span{color:#8c96a7;font-size:8px}.legend{padding:0 22px 17px;display:grid;gap:7px}.legend span{display:grid;grid-template-columns:10px 1fr auto;align-items:center;color:#7e899c;font-size:9px}.legend i{width:6px;height:6px;border-radius:50%}.legend b{color:#38445a}.assigned{background:var(--blue)}.free{background:#c6cfdd}.quarantine{background:var(--orange)}
.clients-panel{margin-top:15px;overflow:hidden}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th{text-align:left;color:#8c96a8;font-size:8px;text-transform:uppercase;letter-spacing:.075em;background:#fafbfc;font-weight:700}th,td{padding:11px 20px;border-bottom:1px solid #eef1f5;white-space:nowrap}tbody tr:last-child td{border-bottom:0}td{font-size:10px;color:#5e6b80}td b{color:#2d394d}td code{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#485972;background:#f2f5f9;padding:4px 7px;border-radius:6px}.user-cell{display:flex;align-items:center;gap:8px}.user-cell i{width:7px;height:7px;background:#b8c1cf;border-radius:50%}.user-cell i.online{background:var(--green);box-shadow:0 0 0 3px #18a87413}
.pill{display:inline-flex;align-items:center;border-radius:20px;padding:4px 8px;font-size:8px;font-weight:700}.pill.ok{color:#13865e;background:#e8f8f2}.pill.warn{color:#b66b24;background:#fff1e3}.pill.free{color:#53637b;background:#eef2f7}.pill.error{color:#c43e4e;background:#fdecef}.table-page{overflow:hidden;min-height:490px}.toolbar{min-height:76px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #edf0f5}.search{width:260px;border:1px solid #dfe4ec;border-radius:9px;padding:8px 11px;display:flex;gap:7px;color:#91a0b4}.search input{width:100%;border:0;outline:0;font-size:10px}.menu-button{border:0;background:transparent;color:#8290a4;letter-spacing:2px}.filter-row,.log-filters{display:flex;gap:6px;padding:11px 20px;border-bottom:1px solid #eef1f5}.filter-row button,.log-filters button{border:1px solid #e2e6ed;background:#fff;color:#788397;border-radius:7px;padding:6px 9px;font-size:8px}.filter-row .selected,.log-filters .selected{color:var(--blue);border-color:#bfcff6;background:#f1f5ff}.log-filters{padding:0;border:0}
.modal-backdrop{position:fixed;inset:0;z-index:20;background:#07111fb9;backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}.modal{width:min(470px,100%);border-radius:17px;background:#fff;box-shadow:0 30px 90px #0005;padding:26px;position:relative}.close{position:absolute;top:13px;right:14px;border:0;background:#f0f3f7;border-radius:50%;width:27px;height:27px;color:#647086}.modal-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#edf3ff;color:var(--blue);font-size:9px;font-weight:800}.modal h2{margin:16px 0 5px;font-size:19px}.modal>p{margin:0 0 20px;color:#7d8798;font-size:10px;line-height:1.6}.modal form{display:grid;gap:13px}.modal label{display:grid;gap:6px;color:#526078;font-size:9px;font-weight:650}.modal input,.modal select{width:100%;border:1px solid #dfe4ed;border-radius:9px;padding:10px 11px;outline:none;color:#344157;font-size:10px;background:#fff}.modal input:focus,.modal select:focus{border-color:#78a0f5;box-shadow:0 0 0 3px #2764e710}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.full{width:100%;margin-top:5px}
@media(max-width:1050px){.shell{grid-template-columns:205px minmax(0,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}.top-actions .live{display:none}.content,.topbar{padding-left:24px;padding-right:24px}}
@media(max-width:760px){.shell{display:block}.sidebar{position:static;height:auto;min-height:0;padding:16px}.sidebar nav{grid-template-columns:repeat(7,minmax(0,1fr));margin-top:15px}.sidebar nav button{justify-content:center;padding:8px 4px;font-size:0}.sidebar nav em{font-size:8px}.environment,.nas-card,.profile{display:none}.topbar{min-height:92px;align-items:center;padding:16px}.top-actions .secondary{display:none}.content{padding:16px}.grid-main{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metric{min-height:118px;padding:14px}.metric strong{font-size:25px}.search{width:100%}.toolbar{align-items:flex-start;flex-direction:column}.field-row{grid-template-columns:1fr}}
@media(max-width:430px){.metrics{grid-template-columns:1fr}.topbar h1{font-size:20px}.top-actions .primary{padding:9px 10px}.content{padding:12px}}

.hidden { display:none !important; }
.login-view { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.15fr) minmax(420px,.85fr); background:#fff; }
.login-visual { background:radial-gradient(circle at 12% 18%,#2764e738,transparent 34%),radial-gradient(circle at 90% 85%,#1fb6b223,transparent 30%),linear-gradient(145deg,#0b1729,#0c2039); color:#fff; padding:56px clamp(40px,7vw,100px); display:flex; flex-direction:column; }
.login-brand { display:flex; align-items:center; gap:12px; }.login-brand>span:last-child{display:grid;line-height:1;font-size:22px}.login-brand small{font-size:8px;letter-spacing:.2em;color:#86a0bd;margin-top:7px}.login-copy{max-width:580px;margin:auto 0}.login-copy .eyebrow{font-size:10px;letter-spacing:.22em;color:#58c9bf;font-weight:750}.login-copy h1{font-size:clamp(38px,4.5vw,64px);line-height:1.04;letter-spacing:-.055em;margin:22px 0}.login-copy p{max-width:520px;color:#9eb0c5;font-size:16px;line-height:1.75}.login-status{display:flex;align-items:center;gap:13px;color:#a9bad0}.login-status>i{width:11px;height:11px;border-radius:50%;background:#2bd594;box-shadow:0 0 0 7px #2bd59418}.login-status span{display:grid;gap:3px}.login-status b{font-size:11px;color:#e5edf7}.login-status small{font-size:9px;color:#7e92aa}
.login-card { align-self:center; justify-self:center; width:min(390px,calc(100% - 48px)); display:grid; gap:16px; }.login-icon{width:45px;height:45px;border-radius:13px;background:#eaf1ff;color:var(--blue);display:grid;place-items:center;font-size:10px;font-weight:800}.login-card h2{font-size:25px;letter-spacing:-.035em;margin:9px 0 -8px}.login-card>p{color:#7e899b;font-size:11px;margin:0 0 8px}.login-card label,.modal label{display:grid;gap:7px;color:#526078;font-size:10px;font-weight:650}.login-card input,.modal input,.modal select,.log-controls input,.log-controls select{width:100%;border:1px solid #dce2eb;border-radius:9px;padding:11px 12px;outline:none;color:#344157;background:#fff;font-size:11px}.login-card input:focus,.modal input:focus,.modal select:focus,.log-controls input:focus,.log-controls select:focus{border-color:#78a0f5;box-shadow:0 0 0 3px #2764e710}.form-error{min-height:14px;color:#c43e4e;font-size:9px}.secure-note{text-align:center;color:#9aa4b4;font-size:9px}.full{width:100%;margin-top:4px}
.filter-actions,.log-controls{display:flex;gap:7px;align-items:center}.filter{border:1px solid #e1e6ed;background:#fff;color:#788397;border-radius:7px;padding:7px 10px;font-size:9px}.filter.selected{color:var(--blue);border-color:#bfcff6;background:#f1f5ff}.log-controls input{width:180px}.log-controls select{width:auto}.action-buttons{display:flex;gap:5px}.action-button{border:1px solid #dfe4ec;background:#fff;color:#66758b;border-radius:7px;padding:6px 8px;font-size:8px;font-weight:650}.action-button:hover{border-color:#aebbd0;color:#33435b}.action-button.danger{color:#bf4050;border-color:#f0c7cd;background:#fff8f9}.empty-row{text-align:center!important;color:#8c97a8;padding:36px!important}.loading-block{color:#8e99aa;font-size:10px;padding:25px}.status-note{font-size:8px;color:#8591a4;margin-left:5px}
.integration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.integration-card{padding:21px}.integration-card header{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center}.integration-card header h2{margin:0;font-size:14px}.integration-card header p{margin:4px 0 0;color:#8a94a7;font-size:9px}.integration-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:10px;font-weight:800}.integration-icon.netbox{color:#3466c5;background:#ebf2ff}.integration-icon.zabbix{color:#c44755;background:#fdecef}.integration-card dl{margin:20px 0 16px;display:grid;gap:0;border:1px solid #edf0f5;border-radius:10px;overflow:hidden}.integration-card dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 12px;border-bottom:1px solid #edf0f5}.integration-card dl div:last-child{border-bottom:0}.integration-card dt{font-size:9px;color:#8b95a6}.integration-card dd{margin:0;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#43526a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.integration-card dd a{color:var(--blue);text-decoration:none}.integration-card dd a:hover{text-decoration:underline}.integration-card footer{display:flex;gap:7px;flex-wrap:wrap}.integration-card button:disabled,.action-button:disabled{cursor:not-allowed;opacity:.5}.integration-error{color:#b83e4c;background:#fff1f3;border:1px solid #f6d4d9;border-radius:8px;padding:9px 11px;font-size:9px;line-height:1.5}.integration-help{color:#727f93;font-size:9px;line-height:1.6;margin:0}.integration-jobs{margin-top:15px;overflow:hidden}.job-error{max-width:320px;overflow:hidden;text-overflow:ellipsis}.field-note{font-weight:400;color:#8a95a7;font-size:8px;line-height:1.4}
.pagination{min-height:58px;padding:11px 20px;border-top:1px solid #edf0f5;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#7e8a9d;font-size:9px}.pagination>div{display:flex;align-items:center;gap:10px}.pagination strong{min-width:88px;text-align:center;color:#4d5c73;font-size:9px}.pagination button{padding:7px 11px;font-size:9px}.pagination button:disabled{cursor:not-allowed;opacity:.45}
dialog.modal { border:0; padding:0; width:min(470px,calc(100% - 32px)); border-radius:17px; background:#fff; color:var(--ink); box-shadow:0 30px 90px #0005; overflow:visible; }.modal::backdrop{background:#07111fb9;backdrop-filter:blur(4px)}.modal form{padding:27px;display:grid;gap:14px;position:relative}.modal h2{margin:3px 0 -8px;font-size:20px;letter-spacing:-.025em}.modal p{margin:0 0 5px;color:#7d8798;font-size:10px;line-height:1.6}.modal .close{position:absolute;top:14px;right:14px}.modal-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#edf3ff;color:var(--blue);font-size:9px;font-weight:800}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toast{position:fixed;right:24px;bottom:24px;z-index:50;max-width:380px;padding:12px 16px;border-radius:10px;background:#101d30;color:#fff;box-shadow:0 18px 50px #0003;font-size:10px;transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s ease}.toast.show{transform:none;opacity:1}.toast.error{background:#b93c4d}
@media(max-width:900px){.login-view{grid-template-columns:1fr}.login-visual{min-height:300px;padding:30px}.login-copy{margin:45px 0}.login-copy h1{font-size:36px}.login-status{display:none}.login-card{margin:55px auto}.filter-actions,.log-controls{flex-wrap:wrap}.toolbar{align-items:flex-start}.integration-grid{grid-template-columns:1fr}}
@media(max-width:620px){.login-visual{display:none}.login-view{display:grid;place-items:center}.login-card{margin:auto}.top-actions #add-pool-button{display:none}.filter-actions,.log-controls{width:100%}.log-controls input{width:100%}.field-row{grid-template-columns:1fr}.pagination{align-items:flex-start;flex-direction:column}.pagination>div{width:100%;justify-content:space-between}.toast{left:16px;right:16px;bottom:16px}}