:root{
  --bg:#fff8ef;--bg-2:#fffdf9;--panel:rgba(255,255,255,.92);--panel-strong:#fff;
  --ink:#2b160d;--muted:#8f6c5a;--line:#f1dfd1;--line-strong:#efc9a8;
  --brand:#ff6a00;--brand-2:#ff9300;--brand-3:#ffc44d;--brand-soft:#fff0df;
  --gold:#e9a21a;--good:#19a85b;--warn:#e99713;--bad:#e84a3c;--info:#2f80ed;
  --radius:22px;--radius-sm:14px;--shadow:0 18px 55px rgba(120,54,10,.10);--shadow-brand:0 16px 32px rgba(255,106,0,.22)
}
*{box-sizing:border-box}html{background:var(--bg)}html,body{margin:0;color:var(--ink);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{min-height:100vh;background:radial-gradient(circle at 82% 5%,rgba(255,190,78,.18),transparent 24%),linear-gradient(180deg,#fffdf8 0%,#fff7ed 100%)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.app{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr)}
.sidebar{background:rgba(255,251,246,.96);border-right:1px solid var(--line);padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto;z-index:20;box-shadow:10px 0 45px rgba(121,61,20,.035)}
.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 22px;color:var(--ink)}.brand-logo{width:48px;height:48px;border-radius:15px;object-fit:cover;box-shadow:0 10px 22px rgba(255,108,0,.25);border:1px solid rgba(255,255,255,.8)}.brand-copy{display:grid;line-height:1.12}.brand-copy strong{font-size:18px;letter-spacing:-.02em}.brand-copy small{color:var(--brand);font-weight:800;font-size:10px;margin-top:4px;letter-spacing:.01em}
.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#b79582;padding:18px 12px 7px;font-weight:800}.nav a{position:relative;display:flex;gap:11px;align-items:center;padding:11px 12px;border-radius:14px;margin:3px 0;color:#755443;font-weight:690;transition:.2s ease}.nav a:hover{background:#fff3e5;color:#a53d00;transform:translateX(2px)}.nav a.active{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow-brand)}.nav .icon{width:21px;height:21px;display:grid;place-items:center;font-size:16px}.nav a.active .icon{filter:brightness(4)}
.sidebar-foot{margin-top:30px;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#fff,#fff5e9);position:relative;overflow:hidden}.sidebar-foot:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255,150,0,.13);right:-35px;bottom:-50px}.sidebar-foot strong{display:block;font-size:13px}.sidebar-foot small{display:block;color:var(--muted);margin-top:4px;position:relative;z-index:1}
.main{min-width:0}.topbar{height:78px;background:rgba(255,253,249,.78);border-bottom:1px solid rgba(239,220,206,.85);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:15;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.topbar-title strong{font-size:14px}.topbar-title .muted{font-size:11px}.topbar-search{width:min(440px,38vw);height:42px;border:1px solid var(--line);background:rgba(255,255,255,.9);border-radius:14px;display:flex;align-items:center;padding:0 14px;color:#ad8b78;gap:10px;box-shadow:0 7px 20px rgba(80,40,10,.035)}.topbar-search span:last-child{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.user-chip{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,#fff2de,#ffd7a8);color:#a23e00;display:grid;place-items:center;font-weight:900;border:1px solid #ffd2a5}.notification-bell{position:relative;width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:13px;display:grid;place-items:center;font-size:18px}.notification-bell span{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#ef4444;color:#fff;font-size:9px;display:grid;place-items:center;border:2px solid #fff}.content{padding:30px;max-width:1600px;margin:auto}
.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:24px}.page-head h1{font-size:30px;line-height:1.15;margin:0 0 7px;letter-spacing:-.035em}.page-head .muted{max-width:780px}.muted{color:var(--muted)}
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#fffaf2 0%,#fff 40%,#fff0d7 100%);border:1px solid #f3dcc3;border-radius:28px;padding:28px 30px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;margin-bottom:22px}.hero:before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;right:-130px;top:-180px;background:radial-gradient(circle,rgba(255,164,34,.38),rgba(255,106,0,.08) 44%,transparent 69%)}.hero-copy{position:relative;z-index:1}.hero-kicker{font-size:11px;font-weight:900;color:var(--brand);letter-spacing:.14em;text-transform:uppercase}.hero h1{font-size:34px;line-height:1.1;margin:8px 0 7px;letter-spacing:-.045em}.hero p{margin:0;color:var(--muted);max-width:670px}.hero-logo{position:relative;z-index:1;width:126px;height:126px;border-radius:31px;object-fit:cover;box-shadow:0 20px 46px rgba(209,82,0,.25);transform:rotate(2deg)}
.grid{display:grid;gap:18px}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;backdrop-filter:blur(8px)}.card:hover{border-color:#efd2b9}.stat{position:relative;overflow:hidden;padding:20px 20px 18px}.stat:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-55px;top:-52px;background:rgba(255,135,0,.09)}.stat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.stat-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:21px;background:linear-gradient(145deg,#fff5e8,#ffd6a8);border:1px solid #ffe0bd;box-shadow:0 8px 20px rgba(255,119,0,.10)}.stat-icon.green{background:linear-gradient(145deg,#eefff4,#bff0ce);border-color:#d4f6df}.stat-icon.blue{background:linear-gradient(145deg,#eef7ff,#c7e4ff);border-color:#d5eaff}.stat-icon.gold{background:linear-gradient(145deg,#fff9dc,#ffe19a);border-color:#ffe9ad}.stat .value{font-size:31px;font-weight:900;letter-spacing:-.045em}.stat .value small{font-size:13px;color:var(--muted);font-weight:700}.stat .label{color:#9a725e;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:850}.stat .muted{font-size:12px;margin-top:2px}
.badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;background:#fff0df;color:#b54700;border:1px solid #ffddbd}.badge.good{background:#edfff3;color:#147c43;border-color:#c9f2d8}.badge.warn{background:#fff8dd;color:#a56a00;border-color:#f5e0a2}.badge.bad{background:#fff0ed;color:#b42c25;border-color:#ffd0ca}
.btn{border:1px solid var(--line);border-radius:13px;padding:10px 15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#fff;color:#5c3a29;transition:.18s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(90,40,10,.08)}.btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 12px 24px rgba(255,106,0,.20)}.btn.primary:hover{background:linear-gradient(135deg,#f35c00,#ff8500);box-shadow:0 14px 30px rgba(255,106,0,.28)}.btn.danger{background:#fff1ee;color:#b62b20;border-color:#ffd5ce}.btn.small{padding:7px 10px;font-size:11px;border-radius:10px}
table{width:100%;border-collapse:collapse}.table-wrap{overflow:auto}.table th{text-align:left;color:#9a7561;font-size:10px;text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid var(--line);padding:12px 10px;white-space:nowrap}.table td{padding:13px 10px;border-bottom:1px solid #f7e9de;vertical-align:top}.table tbody tr{transition:.15s}.table tbody tr:hover{background:#fffaf4}.table tr:last-child td{border-bottom:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-weight:800;font-size:11px;color:#6d4b39}.input,.select,.textarea{width:100%;border:1px solid #ead6c8;background:#fff;border-radius:13px;padding:11px 12px;outline:none;color:var(--ink);transition:.18s}.input:focus,.select:focus,.textarea:focus{border-color:#ffad64;box-shadow:0 0 0 4px rgba(255,123,26,.10)}.textarea{min-height:100px;resize:vertical}.check{display:flex;align-items:center;gap:8px}.section-title{font-size:18px;font-weight:900;margin:0 0 16px;letter-spacing:-.02em}.flash{padding:13px 16px;border-radius:14px;margin-bottom:18px;font-weight:700}.flash.success{background:#eefff4;color:#137640;border:1px solid #c9f2d8}.flash.error{background:#fff0ed;color:#aa2c22;border:1px solid #ffd0ca}.reaction{font-size:26px}.bars{display:grid;gap:12px}.bar-row{display:grid;grid-template-columns:120px 1fr 48px;gap:10px;align-items:center}.bar{height:10px;background:#f4e9df;border-radius:999px;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,#ffbc44,#ff6a00);border-radius:inherit;box-shadow:0 0 10px rgba(255,113,0,.25)}.trend{display:flex;align-items:end;gap:7px;height:180px;padding-top:18px}.trend .col{flex:1;display:flex;flex-direction:column;justify-content:end;gap:5px;min-width:8px}.trend .v{background:linear-gradient(180deg,#ffb52f,#ff6800);border-radius:8px 8px 3px 3px;min-height:3px;box-shadow:0 6px 14px rgba(255,101,0,.14)}.trend small{font-size:9px;color:#aa8874;text-align:center;overflow:hidden}.split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(310px,.8fr);gap:18px}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}.tabs a{padding:8px 12px;border:1px solid var(--line);border-radius:11px;background:#fff}.tabs a.active{background:#fff0df;color:#b54700;border-color:#ffcea2}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.feature{border:1px solid var(--line);border-radius:14px;padding:11px;background:#fff}.feature strong{display:block;font-size:12px;margin-bottom:7px}.qr-box{display:flex;gap:18px;align-items:center}.qr-canvas{background:#fff;padding:12px;border:1px solid var(--line);border-radius:16px;width:184px;height:184px;display:grid;place-items:center}.empty{text-align:center;color:#9a7866;padding:40px 20px}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;background:#271006}.login-art{padding:8vw;color:#fff;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 15% 20%,rgba(255,159,46,.48),transparent 33%),radial-gradient(circle at 72% 75%,rgba(255,106,0,.22),transparent 30%),linear-gradient(145deg,#271006,#6c2207)}.login-art h1{font-size:54px;line-height:1.02;margin:0 0 18px;max-width:700px;letter-spacing:-.05em}.login-art p{font-size:18px;color:#f2d5c1;max-width:620px}.login-panel{background:#fffaf4;display:flex;align-items:center;justify-content:center;padding:38px}.login-card{width:min(440px,100%)}.login-card h2{font-size:30px;margin:0 0 8px;letter-spacing:-.04em}
.public-shell{min-height:100vh;background:radial-gradient(circle at 50% -10%,rgba(255,183,67,.28),transparent 34%),linear-gradient(180deg,#fffdf9,#fff3e5);display:grid;place-items:center;padding:24px}.public-card{width:min(920px,100%);background:#fff;border:1px solid #f2d8c0;border-radius:28px;padding:clamp(24px,5vw,52px);box-shadow:0 30px 80px rgba(162,72,16,.11)}
.notification-bell{color:#78442a}.small{font-size:11px}.device-name{display:flex;align-items:center;gap:10px}.device-dot{width:10px;height:10px;border-radius:50%;background:#bdb1aa;box-shadow:0 0 0 4px #f4ede7}.device-dot.online{background:#22c55e;box-shadow:0 0 0 4px #dcfce7}.device-dot.pending{background:#f59e0b;box-shadow:0 0 0 4px #fef3c7}
/* Pairing studio */
.pairing-studio{position:relative;overflow:hidden;background:linear-gradient(150deg,#fff 0%,#fff8ed 60%,#ffe7c7 100%);border:1px solid #f3d0ad}.pairing-studio:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,53,.32),transparent 70%);right:-80px;top:-90px}.pair-brand{position:relative;display:flex;align-items:center;gap:11px;margin-bottom:18px}.pair-brand img{width:46px;height:46px;border-radius:14px;box-shadow:0 9px 19px rgba(255,103,0,.25)}.pair-brand strong{font-size:16px}.pair-brand span{display:block;color:var(--muted);font-size:11px}.pair-code-box{background:#fff;border:1px solid #f0d6bf;border-radius:18px;padding:17px;text-align:center;box-shadow:0 13px 30px rgba(130,60,10,.07)}.pair-code{font-size:31px;letter-spacing:.18em;font-weight:950;color:#321609;margin:4px 0 7px}.pair-or{display:flex;align-items:center;gap:10px;color:#b08d78;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;margin:14px 0}.pair-or:before,.pair-or:after{content:"";height:1px;background:#ead7c9;flex:1}.pair-qr{width:188px;height:188px;background:#fff;border-radius:18px;border:1px solid #edd8c6;padding:12px;margin:0 auto;display:grid;place-items:center}.pairing-status{margin-top:18px;background:rgba(255,255,255,.76);border:1px solid #eed9c8;border-radius:17px;padding:15px}.pairing-status-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.live-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#edfff3;color:#187e45;font-size:10px;font-weight:900}.live-pill i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12);animation:pulse 1.2s infinite}.pair-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.pair-step{text-align:center;color:#b19a8b;font-size:9px;font-weight:800;position:relative}.pair-step b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;background:#eee6e1;color:#9d887a;border:2px solid #fff;box-shadow:0 3px 9px rgba(60,30,10,.06)}.pair-step.active{color:#b64a00}.pair-step.active b{background:linear-gradient(145deg,#ffb331,#ff6b00);color:#fff;box-shadow:0 7px 14px rgba(255,106,0,.22)}.pair-step.done{color:#137743}.pair-step.done b{background:#21b662;color:#fff}.pair-success{display:none;margin-top:14px;padding:14px;border-radius:15px;background:#edfff3;border:1px solid #c9f2d8;color:#166c3c;font-weight:750}.pair-success.show{display:block;animation:rise .3s ease}.pair-expired{background:#fff4e8;border-color:#ffd9b0;color:#9c4c0c}.device-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.reaction-chip{display:inline-flex;align-items:center;gap:7px}.metric-trend{display:inline-flex;align-items:center;gap:4px;color:#16824a;background:#edfff3;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900}.premium-divider{height:1px;background:linear-gradient(90deg,transparent,#efd6c1,transparent);margin:18px 0}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.75);opacity:.55}}@keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:1180px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.topbar-search{display:none}.hero-logo{width:100px;height:100px}}
@media(max-width:820px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto;display:block;padding:12px}.brand{padding-bottom:10px}.nav{display:flex;overflow:auto;gap:5px}.nav-label,.sidebar-foot{display:none}.nav a{white-space:nowrap;margin:0}.topbar{padding:0 15px;height:66px}.topbar-title{display:none}.content{padding:18px}.grid.cols-4,.grid.cols-3,.grid.cols-2,.form-grid{grid-template-columns:1fr}.hero{padding:22px;grid-template-columns:1fr}.hero-logo{display:none}.page-head{flex-direction:column}.user-chip>div:not(.avatar),.user-chip form{display:none}.pair-steps{grid-template-columns:repeat(2,1fr);row-gap:13px}.feature-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-art{display:none}}
.hidden{display:none!important}.reaction-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:30px 0}.reaction-btn{border:1px solid #f0dccb;background:linear-gradient(180deg,#fff,#fff9f2);border-radius:20px;padding:20px 12px;cursor:pointer;color:var(--ink);transition:.18s;box-shadow:0 8px 22px rgba(95,40,8,.05)}.reaction-btn:hover,.reaction-btn.active{transform:translateY(-3px);border-color:#ffac65;box-shadow:0 14px 30px rgba(255,107,0,.14);background:#fff4e7}.reaction-btn .emoji{font-size:52px;display:block;margin-bottom:8px}.reaction-btn b{font-size:14px}.privacy-note{padding:14px 15px;background:#fff8ef;border:1px solid #f1dec9;border-radius:14px;color:#765744;margin:12px 0;font-size:12px}.consent-check{padding:11px 0}.consent-check input,.check input{accent-color:var(--brand)}code{background:#fff6ea;border:1px solid #f1ddca;padding:3px 6px;border-radius:7px;color:#95420e}.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:40px;font-weight:900;font-size:18px}.login-brand img{width:62px;height:62px;border-radius:19px;box-shadow:0 14px 32px rgba(255,118,0,.28)}.login-brand span small{display:block;color:#ffc789;font-size:11px;margin-top:4px}.powered-brand{display:flex;justify-content:center;align-items:center;gap:7px;color:#9d7865;margin-top:22px;font-size:11px}.powered-brand img{width:24px;height:24px;border-radius:7px}