@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{--navy:#101d30;--navy2:#17263e;--orange:#f27a42;--ink:#17263c;--muted:#718097;--line:#e8edf4;--white:#fff;--bg:#f5f7fb}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',system-ui,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f6ab7b;outline-offset:2px}
.shell{display:flex;min-height:100vh}.sidebar{width:254px;flex:none;background:var(--navy);color:#d4dfeb;position:sticky;top:0;height:100vh;overflow-y:auto;padding:25px 14px;display:flex;flex-direction:column;gap:22px}.logo{display:flex;gap:11px;align-items:center;padding:0 15px;font-size:19px;font-weight:700;color:white;letter-spacing:-.5px}.logo b{color:var(--orange)}.logo small{display:block;font-size:9px;font-weight:700;letter-spacing:2.5px;color:#8b9caf;margin-top:2px}.logo-icon{background:linear-gradient(145deg,#ff9b68,#ec6530);border-radius:12px;color:white;width:36px;height:36px;display:grid;place-items:center;font-size:24px}.location{display:flex;gap:10px;margin:0 9px;padding:13px 11px;border:1px solid #2f4057;border-radius:13px;line-height:1.3;font-size:11px;letter-spacing:.5px;font-weight:700}.location small,.sidebar-foot small{display:block;color:#92a3b8;font-weight:400;margin-top:4px}.status-dot{background:#e8ae4e;border-radius:50%;width:8px;height:8px;display:inline-block;flex:none;margin-top:3px;box-shadow:0 0 0 4px #e8ae4e20}.nav-heading{display:block;color:#8291a8;font-size:10px;letter-spacing:1.7px;font-weight:800;padding:17px 14px 9px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;margin:2px 0;border:0;background:none;color:#aebed0;border-radius:9px;text-align:left;font-weight:600}.nav-item span{font-size:18px;width:22px;text-align:center}.nav-item.active,.nav-item:hover{background:#263750;color:white}.nav-item.active{border-left:3px solid var(--orange);padding-left:10px}.sidebar-foot{font-size:12px;color:#d7dfed;padding:20px 14px;margin-top:auto;border-top:1px solid #2a394d;line-height:1.6}.sidebar-foot .status-dot{margin-right:8px}
.workspace{min-width:0;flex:1}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 38px;background:white;border-bottom:1px solid var(--line)}.breadcrumbs,.eyebrow{font-size:11px;letter-spacing:1.5px;color:#96a3b7;font-weight:800}.breadcrumbs span{color:#47576d}.top-actions{display:flex;align-items:center;gap:14px}.top-button,.plain{background:#fff;border:1px solid #e4eaf2;border-radius:9px;color:#354960;padding:10px 14px;font-weight:700}.top-button:hover,.plain:hover{background:#f2f5f9}.clock{color:#8b9aab;font-size:12px}.page{padding:35px 38px 64px;max-width:1600px}.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:23px}.heading h1{font:800 30px 'Manrope',sans-serif;margin:7px 0 5px}.heading p{margin:0;color:#7a8aa1}.chip{border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800;white-space:nowrap}.chip.gray,.chip.muted{background:#f0f3f8;color:#67758a}.chip.green{background:#e1f6eb;color:#21805b}.chip.orange{background:#fff1e8;color:#a96a41}.chip.red{background:#ffebeb;color:#ba4b4b}.notice{background:#fff9ed;border:1px solid #f5dfbb;padding:13px 17px;border-radius:11px;color:#916335;margin:0 0 22px;line-height:1.5}.notice.success{background:#eaf8f1;color:#24704d;border-color:#bfe6d2}.notice.error{background:#fff0f0;color:#b14242;border-color:#f3c3c3}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:22px}.stat,.panel{background:white;border:1px solid var(--line);border-radius:15px;box-shadow:0 5px 25px #1e355108}.stat{padding:20px;min-width:0}.stat-label{font-size:12px;color:#8796aa;font-weight:700}.stat-value{font:800 30px 'Manrope',sans-serif;margin-top:8px}.stat-footer{color:#8f9aac;font-size:11px;margin-top:7px}.panel{padding:23px;margin-bottom:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.panel h2{font:800 16px 'Manrope',sans-serif;margin:0}.panel h3{font-size:14px}.muted{color:var(--muted)}.two{display:grid;grid-template-columns:1.45fr 1fr;gap:20px}.slot-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.slot{min-height:80px;background:#f5f8fc;border:1px solid #e1e9f1;border-radius:10px;padding:11px;display:flex;flex-direction:column;gap:9px;justify-content:space-between}.slot strong{font:800 18px 'Manrope',sans-serif}.slot small{font-size:10px;color:#7e91a5}.slot.occupied{background:#fff4eb;border-color:#ffd5b7}.slot.reserved{background:#fffbe6;border-color:#f6e8ae}.slot.blocked{background:#fff0f0;border-color:#f9cccc}.table-wrap{width:100%;overflow-x:auto}.data-table{border-collapse:collapse;width:100%;text-align:left;min-width:590px}.data-table th{color:#97a4b6;font-size:10px;letter-spacing:1.1px;padding:12px 9px;border-bottom:1px solid var(--line);text-transform:uppercase}.data-table td{padding:14px 9px;border-bottom:1px solid #eff2f6;color:#39495f}.data-table tr:last-child td{border-bottom:0}.empty{padding:30px 18px;color:#8996a9;text-align:center;border:1px dashed #d8e0ec;border-radius:11px}.primary{border:0;border-radius:10px;background:var(--orange);color:white;font-weight:800;padding:11px 16px}.primary:hover{filter:brightness(.95)}.small{padding:7px 12px;font-size:12px}.info-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.info-list div{background:#f8fafc;padding:13px;border-radius:9px}.info-list small{display:block;color:#8391a4;margin-bottom:6px}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.designer{display:grid;grid-template-columns:minmax(310px,0.95fr) minmax(360px,1.3fr);gap:22px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field.full{grid-column:1/-1}.field label{font-size:12px;color:#63748a;font-weight:800}.field input,.field select,.field textarea{border:1px solid #dae3ee;border-radius:9px;background:white;padding:11px 12px;color:#21354a;width:100%}.field input[type=color]{padding:3px;height:43px}.checkbox-row{display:flex;align-items:center;gap:10px;font-weight:700;color:#50627a}.checkbox-row input{width:17px;height:17px}.preview-holder{background:#edf1f7;padding:28px;border-radius:15px;min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;color:#65768d;margin-bottom:12px}.terminal-preview{width:100%;max-width:750px;margin:auto;aspect-ratio:16/9;background:linear-gradient(130deg,#101d30,#254765);border-radius:16px;border:9px solid #26364a;box-shadow:0 20px 30px #24354c2a;color:white;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:2%;padding:24px;position:relative;overflow:hidden}.terminal-preview.portrait{max-width:320px;aspect-ratio:9/16}.terminal-preview.light{background:linear-gradient(125deg,#fafcff,#e3ecf6);color:#20344b}.terminal-preview.ocean{background:linear-gradient(145deg,#0a243c,#0f6b85)}.preview-brand{font-size:clamp(10px,1.25vw,19px);letter-spacing:2px;font-weight:800;margin-bottom:3%}.preview-title{font-size:clamp(16px,2.5vw,36px);font-weight:800}.preview-subtitle{font-size:clamp(9px,1.1vw,16px);opacity:.8}.preview-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:5%}.preview-buttons span{padding:12px 17px;border-radius:8px;background:var(--accent,#f27a42);font-size:clamp(10px,1vw,15px);font-weight:800}.preview-ad{font-size:12px;opacity:.75;position:absolute;bottom:9px}.hint{font-size:12px;line-height:1.6;color:#8090a5}.feature-list{display:grid;gap:12px}.feature{padding:15px;background:#f8fafc;border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;justify-content:space-between;gap:10px}.tag{display:inline-flex;background:#eef2f7;color:#7f91a7;border-radius:8px;font-size:11px;padding:5px 9px}.auth-cover{position:fixed;inset:0;background:#0d182be9;display:grid;place-items:center;z-index:100;padding:24px}.auth-cover.hidden{display:none}.auth-card{background:white;border-radius:18px;max-width:460px;width:100%;padding:36px;box-shadow:0 30px 100px #0005}.auth-logo{padding:0}.auth-logo{color:#10243c}.auth-logo .logo-icon{color:white}.auth-card h2{font:800 24px 'Manrope';margin:35px 0 6px}.auth-card p{color:#7e8a9e;line-height:1.6}.auth-card label{display:block;margin:22px 0 8px;font-weight:800;font-size:12px}.auth-card input{width:100%;border:1px solid #dce4ed;border-radius:9px;padding:13px}.auth-card button{margin-top:12px}.wide{width:100%}.auth-note{font-size:12px;color:#8e9aac;line-height:1.5;margin:16px 0}.error-text{color:#be3a3a}.hidden{display:none!important}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.two,.designer{grid-template-columns:1fr}.page{padding:24px}.topbar{padding:0 24px}}@media(max-width:740px){.sidebar{position:relative;width:72px;padding:15px 6px}.logo{padding:0 10px}.logo>span:last-child,.location,.sidebar-foot,.nav-heading{display:none}.nav-item{font-size:0;justify-content:center;padding:10px 0}.nav-item span{font-size:20px}.nav-item.active{padding-left:0}.topbar{height:57px;padding:0 12px}.clock{display:none}.page{padding:20px 13px}.heading{align-items:flex-start}.heading h1{font-size:22px}.heading .chip{display:none}.stats{gap:9px}.stat{padding:15px}.stat-value{font-size:24px}.slot-grid{grid-template-columns:repeat(3,1fr)}.panel{padding:15px}.field-grid,.info-list{grid-template-columns:1fr}.designer{display:block}.preview-holder{margin-top:15px}.two{display:block}}

.tabsbar{display:flex;gap:5px;align-items:center;overflow-x:auto;padding:9px 35px 0;background:#fff;border-bottom:1px solid #e7edf4;scrollbar-width:thin;min-height:43px}
.open-tab{background:#f1f4f8;color:#68778b;border:1px solid #e4eaf1;padding:8px 12px;white-space:nowrap;border-radius:8px 8px 0 0;font-size:11px;font-weight:700;display:flex;gap:9px;align-items:center}
.open-tab.active{background:#fff;color:#df7440;border-bottom-color:white}
.open-tab .close{color:#9eaaba;cursor:pointer;padding-left:2px}
.report-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.report-tab{border:1px solid #e4eaf2;border-radius:9px;padding:10px 15px;color:#5c6e83;background:#f8fafc;font-weight:700}
.report-tab.active{background:#fff1e8;color:#c9683a;border-color:#f6c8a7}
.filter-form{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:13px;align-items:end}
.filter-form label{font-size:11px;font-weight:800;color:#7c8ca0;display:block;margin-bottom:5px}
.filter-form input,.filter-form select{width:100%;padding:10px 11px;border:1px solid #dfe7ef;border-radius:8px;background:white;color:#263a52;min-height:40px}
.filter-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center;grid-column:1/-1}
.pager{display:flex;justify-content:flex-end;gap:10px;align-items:center;padding-top:15px;color:#8697a8;font-size:12px}
.pager button{padding:6px 11px;background:white;border:1px solid #e1e8f0;border-radius:6px}
@media(max-width:1100px){.filter-form{grid-template-columns:repeat(2,minmax(130px,1fr))}}
@media(max-width:740px){.tabsbar{padding:6px 9px 0}.filter-form{grid-template-columns:1fr}}

/* 2026-10-24 screenshot-based EXZA screen designer */
.preview-header{position:absolute;top:6%;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:8px}
.preview-info{position:absolute;top:17%;font-size:11px;color:#94b5cc}
.preview-language{font-size:clamp(8px,.75vw,11px);opacity:.9}
.preview-pin{display:flex;flex-direction:column;align-items:center;gap:7px}
.preview-digits{font-size:clamp(11px,1.5vw,23px);border-radius:8px;background:#ffffff1a;padding:9px 18px;letter-spacing:3px}
.mini-keys{font-size:clamp(9px,1.2vw,17px);line-height:1.75;font-weight:700}
.preview-footer{position:absolute;bottom:5%;right:6%;left:6%;font-size:11px;opacity:.8}
.preview-ad:not(:empty){bottom:12%}
.size-extra-small{font-size:8px}.size-small{font-size:10px}.size-medium{font-size:12px}.size-large{font-size:15px}.size-extra-large{font-size:18px}
.terminal-preview.corners-square,.terminal-preview.corners-square .preview-buttons span{border-radius:0}
.terminal-preview.corners-round,.terminal-preview.corners-round .preview-buttons span{border-radius:27px}
.terminal-preview.buttons-gradient .preview-buttons span{background:linear-gradient(120deg,var(--accent),#ffbe8a)}
.terminal-preview.buttons-outline .preview-buttons span{background:transparent;border:2px solid var(--accent)}
.terminal-preview.header-left .preview-header{flex-direction:column;align-items:flex-start;gap:4px}
.terminal-preview.preset-7inch{max-width:490px}
.terminal-preview.preset-10land{max-width:590px}
.terminal-preview.preset-10port{max-width:335px}
.terminal-preview.preset-21inch{max-width:770px}
.terminal-preview.fontsize-large .preview-subtitle{font-size:clamp(12px,1.6vw,20px)}

/* FIXLT design system – true vector navigation, professional workstation look */
.nav-svg{width:20px;height:20px;display:block;flex-shrink:0}
.nav-item span:has(.nav-svg){width:23px;display:grid;place-items:center}
.logo-icon{border-radius:7px}
.panel,.stat,.location,.preview-holder{border-radius:10px}
.nav-item{border-radius:7px}
.auth-card{border-radius:12px}
.chip{border-radius:6px}
.stat{border-top:2px solid #f0f3f8}

.activation-code{font:800 clamp(25px,3vw,43px) 'Manrope',system-ui,sans-serif;
 letter-spacing:.18em;color:#173352;margin:18px 0;user-select:all}
.nav-svg{width:20px;height:20px}

.auth-card .logo{padding:0}.auth-card .logo-icon{color:#fff}
.auth-card form .hint{margin:16px 0 0;line-height:1.5}
.auth-card button:disabled{opacity:.55;pointer-events:none}
.account-security{max-width:670px}
.account-security form{display:grid;gap:10px}
.account-security input{border:1px solid #dce4ed;border-radius:9px;padding:12px 14px;width:100%}
.account-security label{font-weight:700;font-size:12px;color:#576780}
.account-security .hint{font-size:12px;color:#718097}

/* Real-time charts and responsive dashboard */
.charts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.charts-grid .panel{min-width:0}
.donut-chart{display:flex;align-items:center;gap:22px}
.donut-chart svg{width:175px;flex:0 0 175px}
.chart-legend{display:grid;gap:9px;flex:1}
.chart-legend-item{display:flex;align-items:center;gap:9px;color:#63748a;font-size:12px}
.chart-legend-item i{display:inline-block;width:9px;height:9px;border-radius:50%}
.chart-legend-item b{margin-left:auto;color:#20354e}
.trend-chart svg{width:100%;height:auto;max-height:230px}
@media(max-width:980px){.charts-grid{grid-template-columns:1fr}}
@media(max-width:480px){.donut-chart{flex-direction:column;align-items:stretch}.donut-chart svg{align-self:center}.chart-legend{width:100%}}
\n.slot .slot-sensor{color:#607388;border-top:1px solid #e0e7ef;padding-top:5px}\n
.slot-summary{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;margin-bottom:18px;padding:8px 0;color:#53647b;font-size:12px}
.slot-summary>b{font-size:16px;color:#25384d;margin-right:2px}.slot-summary strong{margin-left:4px}
.green-number{color:#279568}.red-number{color:#be4e50}.slot-switch{display:flex;margin-left:auto}
.slot-status{display:inline-flex;border-radius:7px;padding:5px 8px;white-space:nowrap;font-size:11px;font-weight:700}
.slot-status.available{background:#e8f7ee;color:#248d50}.slot-status.occupied{background:#fde7e8;color:#b83a47}
.slot-status.reserved{background:#fff1d6;color:#976a10}.slot-status.problem{background:#f9e4e4;color:#8a2935}
.slot-status.unknown{background:#eff2f5;color:#7a8c9d}
.slot-actions{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:142px}
.slot-actions button{font-size:11px;padding:2px 0;color:#2c78b6;text-align:left}
.slot-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.slot-detail-tile{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:14px;border:1px solid #e1e7ef;border-radius:12px;background:white}
.slot-detail-tile small,.sensor-label{color:#718095;font-size:11px}
.slot-action-results{border-top:1px solid #e7ebf1;margin-top:16px;padding-top:12px;display:grid;gap:9px;font-size:12px;color:#65768b}
#content:has(.slot-summary) .data-table{min-width:1100px}
\n.screen-sync-status{background:#f4f7fb;border-radius:8px;padding:12px;font-size:12px;color:#667994;margin-top:12px}.screen-device{padding:6px 0;border-bottom:1px solid #e8edf3}.screen-device:last-child{border-bottom:0}\n