:root{--bg:#07100e;--card:#0d1714;--card2:#101c18;--ink:#eef8f5;--muted:#9caea8;--line:#54625e;--brand:#75e5d2;--brand2:#14a98e;--green:#32dda7;--warn:#eab35f;--bad:#ff8b8b;--deep:#003e31;--shadow:0 16px 42px rgba(0,0,0,.24);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased}button,input{font:inherit}.hidden{display:none!important}.app-shell{min-height:100vh;padding-bottom:92px}.topbar{min-height:82px;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;display:flex;align-items:center;gap:13px;background:rgba(7,16,14,.96);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}.brandmark,.auth-logo{display:grid;place-items:center;background:linear-gradient(145deg,#003c30,#005c47);color:#fff;font-weight:950;letter-spacing:-.5px}.brandmark{width:54px;height:54px;border-radius:18px;font-size:19px}.brandtext{display:flex;flex-direction:column;line-height:1.15;flex:1}.brandtext strong{font-size:24px}.brandtext span{font-size:13px;color:#b0b9b6;margin-top:5px}.icon-btn{width:52px;height:52px;border-radius:18px;border:1px solid #9ba7a3;background:#141c1a;color:var(--brand);font-size:30px}.content{max-width:720px;margin:0 auto;padding:26px 20px 34px}.view{display:none}.view.active{display:block}.eyebrow{font-size:12px;font-weight:900;letter-spacing:2.2px;color:var(--brand);margin:0 0 10px}.muted{color:var(--muted);line-height:1.55}.hero{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:10px 2px 28px}.hero h1,.page-title h1{font-size:38px;line-height:1.08;margin:0 0 10px;letter-spacing:-1.2px}.hero .muted,.page-title .muted{font-size:18px;margin:0}.cloud-dot{font-size:14px;color:#d9e3df;border:1px solid #aab4b0;padding:10px 14px;border-radius:999px;white-space:nowrap}.cloud-dot span{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 0 5px rgba(50,221,167,.08)}
.auth-view{min-height:calc(100vh - 60px);display:none!important;align-items:center}.auth-view.active{display:grid!important}.auth-brand{padding:36px 2px 20px}.auth-logo{width:78px;height:78px;border-radius:25px;font-size:25px;margin-bottom:30px}.auth-brand h1{font-size:43px;line-height:1.04;margin:0 0 15px;letter-spacing:-1.4px}.auth-brand .muted{font-size:18px;margin:0}.auth-card,.install-card,.help-card,.add-card,.settings-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:20px;box-shadow:var(--shadow)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#08110f;padding:5px;border-radius:15px;margin-bottom:18px}.auth-tab{border:0;border-radius:11px;padding:11px;background:transparent;color:var(--muted);font-weight:800}.auth-tab.active{background:#18332c;color:var(--brand)}.auth-form{display:grid;gap:8px}.auth-form label,.add-card label,.block-label,.manual-box label{font-size:12px;font-weight:850;margin-top:7px}.auth-form input,.text-input{width:100%;border:1px solid #6d7975;background:#090f0d;color:var(--ink);border-radius:15px;padding:14px;outline:none}.auth-form input:focus,.text-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(117,229,210,.08)}.auth-note{text-align:center;color:#7f918b;font-size:11px;line-height:1.5;margin:14px}.form-message{min-height:19px;color:var(--muted);font-size:12px;line-height:1.5}.form-message.bad{color:var(--bad)}
.install-card{display:flex;align-items:center;gap:12px;margin-bottom:18px;background:linear-gradient(145deg,#0c2e27,#0c1815)}.install-card div{flex:1}.install-card p{font-size:12px;color:var(--muted);margin:4px 0 0}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 34px}.summary-card{border:1px solid #929d99;border-radius:26px;padding:18px;min-height:112px;background:#080e0c}.summary-card span{display:block;font-size:14px;color:#a8b4b0;margin-bottom:11px}.summary-card b{font-size:38px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 16px}.section-head h2{font-size:24px;margin:0}.btn{border:0;border-radius:17px;padding:14px 18px;font-weight:850;cursor:pointer}.btn.primary{background:linear-gradient(145deg,#006b55,#004d3e);color:#fff}.btn.control{background:linear-gradient(145deg,#d97706,#9a4b00);color:#fff;border:1px solid #f0a13a}.control-note{font-size:12px;line-height:1.45;color:#b8c5c0;padding:0 8px 4px;text-align:center}.btn.dark{background:#18332c;color:#fff;border:1px solid #4d6b63}.btn.ghost{background:#1a1f1d;border:1px solid #9ca7a3;color:var(--ink)}.btn.full{width:100%}.small-btn{padding:10px 14px;font-size:13px}.top-gap{margin-top:10px}.danger{color:var(--bad)!important}.device-list{display:grid;gap:14px}.device-card{background:#080e0c;border:1px solid #98a4a0;border-radius:28px;padding:20px;cursor:pointer}.device-card.local-only{border-style:dashed}.device-top{display:flex;gap:14px;align-items:center}.device-icon{width:58px;height:58px;border-radius:19px;background:#071b15;display:grid;place-items:center;font-size:28px}.device-main{flex:1;min-width:0}.device-name{font-size:21px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-sub{font-size:13px;color:var(--muted);margin-top:4px}.status-pill{font-size:11px;font-weight:950;padding:8px 11px;border-radius:999px;background:#002c21;color:#61e7b5}.status-pill.off{background:#2b2113;color:var(--warn)}.status-pill.local{background:#20262a;color:#b9c5ca}.device-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.metric-mini span{font-size:13px;color:var(--muted);display:block}.metric-mini b{font-size:20px;display:block;margin-top:4px}.empty-state{text-align:center;padding:44px 24px;border:1px dashed #64716d;border-radius:26px}.empty-icon{font-size:42px;color:var(--brand)}.empty-state h3{font-size:22px;margin:10px 0}.empty-state p{color:var(--muted);line-height:1.5;margin:0 0 18px}.help-card{margin-top:16px;box-shadow:none}.help-card p{color:var(--muted);font-size:13px;line-height:1.55;margin:8px 0 0}.back-btn{border:0;background:none;color:var(--brand);font-weight:900;padding:6px 0 22px;font-size:18px}.page-title{margin:0 2px 22px}.or{display:flex;align-items:center;gap:10px;color:#7e8c87;font-size:11px;margin:18px 0}.or:before,.or:after{content:"";height:1px;background:#48534f;flex:1}.scanner{position:fixed;inset:0;background:#03100c;z-index:80;display:grid;place-items:center}.scanner video{width:100%;height:100%;object-fit:cover}.scan-frame{position:absolute;width:min(72vw,340px);aspect-ratio:1;border:3px solid #fff;border-radius:30px;box-shadow:0 0 0 9999px rgba(0,0,0,.38)}.scanner-actions{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:0;right:0;text-align:center}.pin-input{text-align:center;font-size:28px;letter-spacing:.18em}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 2px;border-bottom:1px solid #34423d}.setting-row div{display:flex;flex-direction:column;min-width:0}.setting-row strong{font-size:14px}.setting-row span{font-size:12px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}.setting-row b{font-size:12px;color:var(--green);text-align:right}.manual-box{margin:14px 0;border:1px dashed #53635d;border-radius:18px;padding:14px}.manual-box summary{font-weight:850;cursor:pointer;color:#d9e6e1}.manual-box label{display:block;margin:12px 0 6px}.check-row{display:flex!important;gap:9px;align-items:flex-start;font-size:12px;color:var(--muted)}.check-row input{width:auto;margin-top:2px}.block-label{display:block;margin:15px 0 7px}.detail-hero{background:linear-gradient(145deg,#003d30,#001e18);border-radius:30px;padding:25px}.detail-hero .eyebrow{color:#91e8d9}.detail-hero h1{font-size:35px;margin:0 0 9px}.detail-hero p{color:#c6dbd4;margin:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}.detail-metric{border:1px solid #9aa5a1;border-radius:23px;padding:20px;background:#080d0c}.detail-metric span{display:block;color:var(--muted);font-size:14px}.detail-metric b{display:block;font-size:31px;margin-top:7px}.detail-info{border:1px solid #9aa5a1;border-radius:23px;padding:18px;margin-top:16px}.info-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid #394540}.info-row:last-child{border-bottom:0}.info-row span{color:var(--muted)}.info-row b{text-align:right;word-break:break-all}.detail-actions{display:grid;gap:10px;margin-top:18px}.bottom-nav{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,760px);height:calc(80px + env(safe-area-inset-bottom));padding:8px 12px env(safe-area-inset-bottom);background:rgba(7,16,14,.97);backdrop-filter:blur(18px);border-top:1px solid #76827e;display:grid;grid-template-columns:repeat(3,1fr)}.nav-item{border:0;background:transparent;color:#a0aaa6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:27px}.nav-item b{font-size:11px}.nav-item.active{color:var(--brand)}.toast{position:fixed;z-index:100;left:50%;bottom:106px;transform:translate(-50%,18px);opacity:0;pointer-events:none;background:#edf8f4;color:#10251f;padding:12px 16px;border-radius:14px;font-size:13px;transition:.2s;max-width:88%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.modal{position:fixed;z-index:90;inset:0;background:rgba(0,0,0,.66);display:grid;place-items:end center;padding:16px}.modal-card{position:relative;background:#0d1714;border:1px solid #68756f;border-radius:26px;width:min(100%,520px);padding:25px;margin-bottom:env(safe-area-inset-bottom)}.modal-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;border:0;background:#202a27;color:#fff;font-size:23px}.modal-card h2{margin-top:0}.modal-card p,.modal-card li{color:var(--muted);line-height:1.55}.modal-card ol{padding-left:20px}code{background:#16221e;padding:2px 5px;border-radius:6px}
@media(max-width:420px){.content{padding-left:16px;padding-right:16px}.hero h1,.page-title h1{font-size:34px}.summary-card{padding:14px;min-height:100px}.summary-card b{font-size:33px}.device-name{font-size:19px}.metric-mini b{font-size:18px}}
@media(min-width:700px){.device-list{grid-template-columns:repeat(2,1fr)}.auth-view{grid-template-columns:1fr 1fr;gap:30px}.auth-brand{padding:30px}}

.transfer-qr-wrap{display:grid;place-items:center;background:#fff;border-radius:20px;padding:14px;margin:14px 0}.transfer-qr{display:block;width:min(72vw,280px);height:auto}.transfer-pin{text-align:center;font-size:38px;font-weight:950;letter-spacing:.18em;color:var(--brand);margin:12px 0 18px}

/* V1.3.1 mobile polish */
.detail-hero h1{overflow-wrap:anywhere;word-break:break-word;font-size:clamp(28px,8vw,35px);line-height:1.05}
.info-row b{max-width:62%;overflow-wrap:anywhere}
@media(max-width:420px){.detail-hero{padding:22px 20px}.detail-grid{gap:10px}.detail-metric{padding:17px 15px}.detail-metric b{font-size:clamp(28px,9vw,34px)}.detail-info{padding:15px}.detail-actions .btn{min-height:54px}}

/* V1.3.2 polish */
.device-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.08}
.detail-hero{overflow:hidden}.detail-hero h1{font-size:clamp(25px,7.2vw,34px)!important;line-height:1.03!important;overflow-wrap:anywhere!important;word-break:break-word!important;max-width:100%;letter-spacing:-.8px}
@media(max-width:420px){.topbar{min-height:72px;padding-left:14px;padding-right:14px}.brandmark{width:48px;height:48px;border-radius:16px}.brandtext strong{font-size:22px}.brandtext span{font-size:12px}.icon-btn{width:46px;height:46px;border-radius:15px}.content{padding-top:20px}.detail-hero{padding:20px 18px}.detail-actions .btn{border-radius:15px}}

/* ===== LUX PWA V1.7 COMPACT UI ===== */
@media (max-width: 520px){
  .app-shell{padding-bottom:76px!important}
  .topbar{min-height:62px!important;padding:calc(7px + env(safe-area-inset-top)) 12px 7px!important;gap:9px!important}
  .brandmark{width:42px!important;height:42px!important;border-radius:13px!important;font-size:16px!important}
  .brandtext strong{font-size:19px!important;line-height:1!important}
  .brandtext span{font-size:10.5px!important;margin-top:3px!important;line-height:1.15!important}
  .icon-btn{width:42px!important;height:42px!important;border-radius:13px!important;font-size:24px!important}
  .content{padding:14px 12px 22px!important}
  .hero{margin:4px 0 14px!important;gap:8px!important}
  .hero h1,.page-title h1{font-size:26px!important;line-height:1.04!important;letter-spacing:-.6px!important;margin-bottom:5px!important}
  .hero .muted,.page-title .muted{font-size:13px!important}
  .cloud-dot{font-size:11px!important;padding:7px 9px!important}
  .summary-grid{gap:7px!important;margin-bottom:18px!important}
  .summary-card{min-height:76px!important;padding:10px 11px!important;border-radius:18px!important}
  .summary-card span{font-size:10.5px!important;margin-bottom:5px!important;line-height:1.15!important}
  .summary-card b{font-size:28px!important;line-height:1!important}
  .section-head{margin:2px 0 9px!important}
  .section-head h2{font-size:19px!important;line-height:1.1!important}
  .btn{border-radius:13px!important;padding:11px 13px!important;font-size:13px!important}
  .small-btn{padding:8px 11px!important;font-size:12px!important}
  .device-list{gap:9px!important}
  .device-card{border-radius:20px!important;padding:13px!important}
  .device-top{gap:10px!important}
  .device-icon{width:46px!important;height:46px!important;border-radius:15px!important;font-size:22px!important}
  .device-name{font-size:17px!important;line-height:1.05!important}
  .device-sub{font-size:11px!important;margin-top:3px!important}
  .status-pill{font-size:9.5px!important;padding:6px 8px!important}
  .device-metrics{gap:7px!important;margin-top:13px!important}
  .metric-mini span{font-size:10.5px!important}
  .metric-mini b{font-size:17px!important;margin-top:2px!important;line-height:1.1!important}
  .back-btn{padding:3px 0 12px!important;font-size:14px!important}
  .page-title{margin-bottom:13px!important}
  .detail-hero{border-radius:21px!important;padding:15px!important}
  .detail-hero h1{font-size:25px!important;line-height:1.02!important;margin-bottom:6px!important}
  .detail-hero p{font-size:11px!important;line-height:1.3!important}
  .detail-grid{gap:8px!important;margin-top:10px!important}
  .detail-metric{border-radius:18px!important;padding:12px!important;min-height:86px!important}
  .detail-metric span{font-size:11px!important}
  .detail-metric b{font-size:25px!important;margin-top:4px!important;line-height:1.05!important}
  .detail-info{border-radius:18px!important;padding:11px 13px!important;margin-top:10px!important}
  .info-row{padding:7px 0!important;font-size:11.5px!important;gap:10px!important}
  .detail-actions{gap:7px!important;margin-top:11px!important}
  .detail-actions .btn{min-height:43px!important;font-size:13px!important}
  .control-note{font-size:10.5px!important;padding:0 6px 2px!important}
  .bottom-nav{height:calc(66px + env(safe-area-inset-bottom))!important;padding:5px 8px env(safe-area-inset-bottom)!important}
  .nav-item{font-size:23px!important;gap:1px!important}
  .nav-item b{font-size:9.5px!important}
}