:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e8f5ee;background:#081310;line-height:1.5;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}label{display:block;font-size:12px;color:#9aada3;font-weight:700;letter-spacing:.02em;margin-bottom:7px}input,textarea,select{display:block;width:100%;background:#10231b;color:#f4faf6;border:1px solid #284334;border-radius:11px;padding:12px 14px;outline:none}input:focus,textarea:focus,select:focus{border-color:#69e7a5;box-shadow:0 0 0 3px #69e7a51c}textarea{resize:vertical;min-height:100px}input[type=date]{color-scheme:dark}input::placeholder,textarea::placeholder{color:#617b6b}button{border:0;border-radius:10px;background:transparent;color:inherit;font-weight:700;transition:background .15s,transform .15s,border-color .15s}button:hover:not(:disabled){filter:brightness(1.12)}button:active{transform:scale(.98)}button:focus-visible{outline:2px solid #78eeae;outline-offset:2px}.muted{color:#91aa9b}.subtle{color:#718d7d}.small{font-size:12px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#82eab1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;background:#172c22;border:1px solid #304938;white-space:nowrap}.btn-primary{background:#79f2a7;border:1px solid #9ef7ba;color:#062015;box-shadow:0 4px 25px #49d98618}.btn-outline{background:transparent;border:1px solid #365341;color:#d1eadd}.btn-danger{background:#49251f;border:1px solid #8a473e;color:#ffb4a9}.btn-sm{padding:7px 11px;font-size:12px;border-radius:8px}.btn:focus{outline:2px solid #79f2a7}.link-btn{padding:0;color:#93efb9;text-decoration:underline;text-underline-offset:3px}.stack{display:grid;gap:15px}.flex{display:flex;gap:10px;align-items:center}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.hidden{display:none!important}
/* Login */
.auth-view{display:grid;grid-template-columns:minmax(340px,.96fr) minmax(400px,1.04fr);min-height:100vh;background:#081310}.auth-brand{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:44px clamp(28px,6vw,90px);overflow:hidden;background:radial-gradient(ellipse at 30% 78%,#236642a0 0%,transparent 44%),radial-gradient(ellipse at 85% 10%,#17402bd9 0%,transparent 40%),#0b2119;border-right:1px solid #274234}.auth-brand:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#78ffb035 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(150deg,transparent 20%,#000 90%);pointer-events:none}.logo{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.04em;font-size:23px}.logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#8bffc0;color:#103223;font-size:25px;font-weight:950;box-shadow:0 5px 25px #52ffa82d}.brand-center{position:relative;z-index:1;max-width:530px}.brand-center h1{font-size:clamp(38px,4.4vw,66px);line-height:1.04;letter-spacing:-.065em;margin:17px 0}.brand-center h1 em{font-style:normal;color:#8df8b5}.brand-center p{max-width:370px;color:#b4ccbd;line-height:1.8}.orbit{height:214px;position:relative;margin-top:20px}.orbit-ring{border:1px solid #68e9a751;position:absolute;border-radius:50%;left:20%;width:210px;height:210px}.orbit-ring:nth-child(2){left:28%;top:24px;width:150px;height:150px;border-color:#a2ffca7c}.orbit-core{position:absolute;left:calc(20% + 70px);top:70px;width:70px;height:70px;border-radius:23px;background:linear-gradient(135deg,#92ffc1,#349960);color:#07341f;display:grid;place-items:center;box-shadow:0 0 80px #62ffab70;font-size:35px}.orbit-dot{position:absolute;width:46px;height:46px;background:#163c2c;border:1px solid #80efad8a;display:grid;place-items:center;border-radius:15px;color:#b3ffd0;font-size:21px}.orbit-dot.one{top:14px;left:calc(20% + 7px)}.orbit-dot.two{top:150px;left:calc(20% + 190px)}.orbit-dot.three{top:88px;left:calc(20% + 265px)}.auth-brand footer{font-size:12px;color:#88a996;z-index:1}.auth-right{display:grid;place-items:center;padding:36px 20px}.auth-box{width:100%;max-width:420px}.auth-box .eyebrow{margin-bottom:14px}.auth-box h2{margin:0;font-size:34px;letter-spacing:-.045em}.auth-box>p{color:#97b29f;margin:9px 0 34px}.form-field{margin-bottom:17px}.auth-box .btn-primary{width:100%;padding:14px}.auth-footer{margin-top:23px;text-align:center;color:#94b09e;font-size:13px}.auth-footer button{font-weight:800;margin-left:4px}.auth-note{display:flex;gap:12px;align-items:flex-start;background:#173121;border:1px solid #365841;padding:14px;border-radius:12px;font-size:13px;color:#bde3c9;margin-top:22px}
/* Main shell */
.shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:28px 17px;display:flex;flex-direction:column;background:#0b1a14;border-right:1px solid #1c3327;z-index:12}.sidebar .logo{padding-left:12px;margin-bottom:38px}.sidebar .logo-mark{width:33px;height:33px;font-size:21px}.nav-caption{color:#637f6d;font-size:10px;letter-spacing:.17em;font-weight:800;padding:0 17px;margin:24px 0 11px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;color:#97b3a0;border-radius:11px;width:100%;text-align:left;font-size:13px;margin-bottom:4px}.nav-item .ico{font-size:17px;width:21px;text-align:center}.nav-item.active{background:#1e3d2b;color:#c9ffdc;box-shadow:inset 3px 0 #83f3ab}.nav-item:hover{background:#172d20;color:#d4f9df}.nav-bottom{margin-top:auto;background:#11271b;border:1px solid #294835;border-radius:13px;padding:15px}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#2e5c3d;color:#b6ffca;font-weight:900}.user-brief{min-width:0}.user-brief strong,.user-brief span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-brief strong{font-size:12px}.user-brief span{font-size:11px;color:#86aa93}.sidebar-logout{width:100%;text-align:left;padding:10px 0 0;color:#91b29d;font-size:12px}.main{min-width:0;padding:29px clamp(20px,3.1vw,54px) 55px;max-width:1700px;width:100%;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:30px}.topbar h2{font-size:13px;letter-spacing:.02em;font-weight:600;margin:0;color:#a2bdad}.topbar-actions{display:flex;gap:12px;align-items:center}.top-date{font-size:12px;color:#779584}.status-pill,.badge{display:inline-flex;gap:7px;align-items:center;padding:6px 10px;border-radius:100px;font-size:11px;font-weight:800;background:#183526;color:#8ff5b0;border:1px solid #2b6f43;white-space:nowrap}.status-pill:before{content:"";width:7px;height:7px;background:currentColor;border-radius:50%;box-shadow:0 0 8px currentColor}.status-pill.off,.badge.warn{background:#3a2c1a;color:#f5bd7c;border-color:#765633}.badge.danger{background:#422720;color:#ffafa0;border-color:#7b3a32}.badge.neutral{background:#203029;color:#9eb7a7;border-color:#395146}.mobile-toggle{display:none}.page-title{font-size:29px;letter-spacing:-.048em;margin:0 0 6px}.page-subtitle{color:#8aa796;margin:0 0 26px;font-size:14px}.card{background:#10231a;border:1px solid #234031;border-radius:16px;padding:23px;min-width:0}.card:hover{border-color:#31533e}.card h3{margin:0 0 6px;font-size:15px}.card p{color:#8ba897;margin:0;font-size:13px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0 13px}.section-heading h3{margin:0;font-size:16px;letter-spacing:-.025em}.hero{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:35px 40px;min-height:270px;border:1px solid #34764c;border-radius:19px;overflow:hidden;position:relative;background:radial-gradient(circle at 80% 40%,#34894c70 0%,transparent 37%),linear-gradient(120deg,#1c4f34,#103320 65%,#0d2119)}.hero:after{content:"";width:330px;height:330px;border:1px solid #b2ffd04a;position:absolute;right:2%;top:-50px;border-radius:50%;box-shadow:0 0 0 48px #71eb9b12,0 0 0 95px #71eb9b0c}.hero-copy{position:relative;z-index:2;max-width:530px}.hero h1{font-size:clamp(25px,2.7vw,40px);letter-spacing:-.065em;line-height:1.15;margin:10px 0 12px}.hero p{max-width:480px;color:#bce2c8;font-size:13px;line-height:1.75;margin:0 0 21px}.hero-device{width:155px;height:155px;background:#8efcbd;border:15px solid #1d6041;border-radius:39px;display:grid;place-items:center;font-size:75px;color:#0b4629;transform:rotate(-13deg);box-shadow:0 0 85px #89ffc783;z-index:1;margin-right:8%}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}.stat-card{padding:20px;border:1px solid #244332;background:#10231a;border-radius:15px}.stat-icon{display:inline-grid;place-items:center;background:#214532;color:#9bf7ba;border-radius:10px;width:37px;height:37px;font-size:20px;margin-bottom:18px}.stat-card .stat-label{font-size:12px;color:#8ba998;margin-bottom:9px}.stat-card .stat-number{font-weight:850;font-size:28px;letter-spacing:-.045em;line-height:1.1}.stat-card .stat-small{font-size:11px;color:#6fa486;margin-top:6px}.chart{height:195px;display:flex;align-items:flex-end;gap:14px;padding-top:22px}.chart-col{display:flex;align-items:center;flex:1;flex-direction:column;gap:8px;justify-content:flex-end;height:100%}.chart-col .bar-area{height:146px;display:flex;align-items:flex-end;width:100%;max-width:54px}.chart-col .bar{background:linear-gradient(180deg,#80ffc1,#277f4d);width:100%;border-radius:7px 7px 2px 2px;min-height:3px;position:relative}.chart-col .bar:hover{background:#b1ffce}.chart-col small{font-size:10px;color:#819b8b}.chart-col .count{font-size:10px;color:#b5dac0}.activity-area{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-top:17px}.quick-list{display:grid;gap:12px;margin-top:20px}.quick-row{display:flex;gap:13px;align-items:flex-start}.quick-row .bubble{background:#244836;color:#8df2b0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}.quick-row strong{font-size:13px}.quick-row p{margin-top:3px;font-size:12px}.quick-row button{margin-top:5px;color:#8ff5b1;text-decoration:underline;font-size:12px}
/* Connection */
.connection-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.88fr);gap:19px}.connection-state{padding:38px 20px;text-align:center;background:radial-gradient(ellipse at top,#1a5232,#10251b 55%);border:1px solid #2b6241;border-radius:16px;min-height:350px}.connect-art{width:86px;height:86px;border:1px solid #4b9564;border-radius:27px;display:grid;place-items:center;background:#235138;color:#a5ffd1;font-size:44px;margin:0 auto 20px;box-shadow:0 0 45px #4eec8340}.connection-state h3{font-size:21px;letter-spacing:-.035em;margin:0 0 10px}.connection-state p{max-width:340px;margin:0 auto 22px;color:#94b7a0;font-size:13px;line-height:1.7}.qr-img{width:min(260px,90%);margin:6px auto 13px;border:8px solid white;border-radius:13px;background:white}.pair-code{font-size:29px;letter-spacing:.12em;font-weight:900;color:#9fffbb;background:#153b27;border:1px dashed #5fb97a;border-radius:13px;padding:14px;margin:15px auto;max-width:280px}.connect-help{padding-left:20px;color:#abc9b7;font-size:13px;line-height:2}.connect-method{display:flex;gap:9px;margin:15px 0}.mode-btn{flex:1;padding:11px;background:#173123;border:1px solid #355441}.mode-btn.active{border-color:#87f8b0;color:#bfffd4;background:#255039}.info-box{border:1px solid #31563e;border-radius:13px;padding:17px;background:#173523;color:#b0d3bd;font-size:12px;line-height:1.8}.info-box strong{color:#dbf6e3}.info-box.danger{background:#33251f;border-color:#7d4b34;color:#eec7b1}
/* API, tables, admin */
.api-token-list{display:grid;gap:10px}.token-row{display:flex;justify-content:space-between;gap:13px;align-items:center;border:1px solid #284837;border-radius:12px;padding:13px 15px;background:#132b1e}.token-row .prefix{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#8fcca6;font-size:11px}.token-row strong{font-size:13px}.endpoint{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 16px;border-radius:11px;background:#071a11;border:1px solid #315340;font-size:12px;overflow-wrap:anywhere}.endpoint code{color:#a2ffc3}.method{padding:5px 8px;background:#25683f;color:#c3ffdc;font-weight:800;border-radius:6px;font-size:10px}.code-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 0}.code-tab{padding:9px 14px;border-radius:9px 9px 0 0;color:#92a99a;font-size:12px}.code-tab.active{background:#1e4030;color:#baffd2}.code-panel{background:#071711;border:1px solid #2a4c35;border-radius:0 11px 11px 11px;padding:20px;overflow-x:auto;position:relative}.code-panel pre{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#bfe6c8;font-size:12px;line-height:1.85;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.code-copy{float:right}.table-wrap{overflow-x:auto;border:1px solid #244433;border-radius:14px;background:#11231a}table{width:100%;border-collapse:collapse;text-align:left;min-width:630px}th{font-size:10px;letter-spacing:.095em;text-transform:uppercase;color:#81a08c;font-weight:800;padding:15px 17px;background:#152b1e}td{padding:14px 17px;font-size:12px;border-top:1px solid #254333;color:#b9d3c0}td strong{font-size:12px;color:#e0f1e5}tr.clickable{cursor:pointer;transition:background .15s}tr.clickable:hover{background:#1b3b29}th:last-child,td:last-child{text-align:right}.table-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.chip{display:inline-flex;font-size:10px;padding:5px 8px;border-radius:7px;background:#1e3a28;color:#92ddb0}.search-input{max-width:270px}.pagination{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:15px;color:#8fa997;font-size:12px}.blank{padding:35px;text-align:center;color:#829e8a}.blank .big{font-size:34px;margin-bottom:8px}.blank h3{color:#d5e9d9}.notice{padding:26px;background:#2a251a;border:1px solid #796039;border-radius:15px;color:#f1d2a0}.notice h2{margin:0 0 6px}.notice p{color:#e0c49c}.top-helper{font-size:11px;color:#6b8e76}
/* Modal + toast */
.modal-backdrop{position:fixed;inset:0;z-index:60;background:#000b;backdrop-filter:blur(9px);display:grid;place-items:center;padding:22px}.modal{width:100%;max-width:550px;max-height:90vh;overflow-y:auto;background:#10251b;border:1px solid #46704e;box-shadow:0 20px 120px #000c;border-radius:19px;padding:25px}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}.modal h2{font-size:21px;letter-spacing:-.03em;margin:0}.modal-close{font-size:20px;width:33px;height:33px;border:1px solid #3e6048;border-radius:9px;background:#23402e}.modal-foot{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:22px}.modal .grid2{gap:13px}.secret-view{padding:15px;border:1px dashed #77ce95;background:#092014;border-radius:10px;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#a8f9bf;overflow-wrap:anywhere;margin:12px 0}.detail{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #294635}.detail strong{font-size:12px;color:#799b88}.detail span{font-size:12px;color:#e3f4e8;overflow-wrap:anywhere}#toast{position:fixed;right:20px;bottom:20px;z-index:100;display:grid;gap:9px;max-width:min(420px,calc(100% - 40px))}.toast-msg{padding:13px 18px;border:1px solid #5fbb7b;border-radius:11px;background:#1e4a2e;color:#e2ffed;box-shadow:0 15px 45px #0009;font-size:13px}.toast-msg.error{background:#512b27;border-color:#c16b5d;color:#ffe6df}.spinner{border:3px solid #254b36;border-top-color:#7cf6af;width:31px;height:31px;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}.boot{min-height:100vh;display:grid;align-content:center;text-align:center;gap:14px;color:#83a991}.boot p{font-size:13px}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1080px){.stat-grid{grid-template-columns:repeat(2,1fr)}.activity-area{grid-template-columns:1fr}.auth-brand{padding:35px}.auth-brand .brand-center h1{font-size:44px}.hero-device{margin:0}.sidebar{width:216px}.shell{grid-template-columns:216px 1fr}.connection-layout{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.auth-view{grid-template-columns:1fr}.auth-brand{display:none}.auth-right{min-height:100vh;padding:32px 23px}.shell{display:block}.sidebar{position:fixed;left:-280px;top:0;width:260px;transition:left .2s;box-shadow:18px 0 80px #0009}.sidebar.open{left:0}.mobile-toggle{display:inline-flex}.main{padding:18px 15px 42px}.topbar{margin-bottom:25px}.top-date{display:none}.hero{padding:25px 24px;min-height:240px}.hero h1{font-size:29px}.hero-device{display:none}.stat-grid{gap:10px}.stat-card{padding:16px}.stat-card .stat-number{font-size:24px}.stat-card .stat-icon{margin-bottom:12px}.page-title{font-size:25px}.card{padding:17px}.grid2,.grid3{grid-template-columns:1fr}.modal{padding:18px}.modal .grid2{grid-template-columns:1fr}.section-heading{align-items:flex-start}.search-input{max-width:170px}.token-row{align-items:flex-start;flex-direction:column}.token-row .btn{align-self:flex-end}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}