:root{
  --bg:#0d0d0c;
  --surface:#151412;
  --surface-2:#1b1916;
  --surface-3:#201d19;
  --text:#f4ede4;
  --text-strong:#fff9f1;
  --muted:#9f978d;
  --faint:#6f685f;
  --line:#2d2924;
  --line-strong:#3c352d;
  --accent:#e39425;
  --accent-hover:#eea43a;
  --accent-pressed:#c97b15;
  --accent-ink:#1d1307;
  --success:#79bd8b;
  --warning:#d5a34d;
  --danger:#ce776a;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --radius-sm:9px;
  --radius-md:13px;
  --radius-lg:18px;
}

html[data-theme="light"]{
  --bg:#f1ede7;
  --surface:#faf7f2;
  --surface-2:#f4efe8;
  --surface-3:#ece5dc;
  --text:#27221d;
  --text-strong:#17130f;
  --muted:#72685d;
  --faint:#9d9388;
  --line:#d6cec4;
  --line-strong:#c6bbaf;
  --accent:#d98218;
  --accent-hover:#e9942b;
  --accent-pressed:#b96b10;
  --accent-ink:#fffaf4;
  --success:#3f8e5a;
  --warning:#9a6a1f;
  --danger:#af5248;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{
  font-family:"Manrope","Segoe UI Variable","Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.45;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
button,a{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none!important}

.app{
  width:min(100%,620px);
  margin:0 auto;
  padding:calc(16px + var(--safe-top)) 18px calc(92px + var(--safe-bottom));
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:48px;
  margin-bottom:28px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-logo{
  width:42px;height:42px;object-fit:contain;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0a0a09;
}
.brand-copy{display:grid;gap:1px;min-width:0}
.brand-copy strong{font-size:17px;font-weight:800;letter-spacing:-.2px}
.brand-copy span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}
.icon-button{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--muted);
}
.icon-button svg{width:18px;height:18px}
.icon-button:hover{background:var(--surface);color:var(--text)}

.notice{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 13px;margin:0 0 18px;
  border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);
}
.notice>div{display:grid;gap:2px}
.notice strong{font-size:12px}.notice span{font-size:10px;color:var(--muted)}
.notice button{border:0;background:transparent;color:var(--accent);font-size:10px;font-weight:800;padding:7px}

.home-status{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:end;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.status-caption,.eyebrow{
  display:block;color:var(--accent);font-size:9px;font-weight:800;letter-spacing:1.55px;line-height:1.2
}
.status-title-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
.status-dot.good{background:var(--success)}
.status-dot.bad{background:var(--danger)}
.status-title-row h1{
  margin:0;font-size:27px;line-height:1.05;font-weight:800;letter-spacing:-.8px;color:var(--text-strong)
}
.status-main p{margin:8px 0 0 19px;color:var(--muted);font-size:11px}
.status-meta{display:grid;gap:12px;text-align:right;min-width:100px}
.status-meta div{display:grid;gap:3px}
.status-meta span{font-size:9px;color:var(--muted)}
.status-meta strong{font-size:11px;font-weight:700;color:var(--text)}

.connection-strip{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.connection-copy{display:grid;gap:3px;min-width:0}
.connection-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.connection-copy>span:last-child{font-size:10px;color:var(--muted)}
.protocol-pill{
  padding:6px 8px;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font:600 9px/1 "JetBrains Mono",monospace;white-space:nowrap
}

.primary-actions{display:grid;grid-template-columns:1fr auto;gap:9px;margin:16px 0 34px}
.button{
  min-height:46px;border-radius:11px;padding:0 15px;font-weight:800;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease;
}
.button:active{transform:translateY(1px)}
.button.primary{
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink)
}
.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.button.primary:active{background:var(--accent-pressed);border-color:var(--accent-pressed)}
.button.primary svg{width:18px;height:18px;margin-left:auto}
#primaryAction{display:flex;align-items:center;justify-content:space-between;gap:12px}
.button.secondary{border:1px solid var(--line-strong);background:transparent;color:var(--text)}
.button.secondary:hover{background:var(--surface)}
.button.quiet{border:0;background:transparent;color:var(--muted)}
.button.quiet:hover{color:var(--text)}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px
}
.section-head h2{margin:7px 0 0;font-size:20px;line-height:1.1;font-weight:800;letter-spacing:-.35px}
.section-note{font-size:9px;color:var(--muted);text-align:right}
.section-intro{margin:-2px 0 14px;color:var(--muted);font-size:10px;max-width:470px}

.list{border-top:1px solid var(--line)}
.plan-row{
  width:100%;min-height:64px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:13px 2px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left
}
.plan-row:hover{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.plan-row.recommended{padding-left:10px;border-left:2px solid var(--accent)}
.plan-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}
.tag{padding:3px 6px;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:999px;color:var(--accent);font-size:7px;font-weight:800;letter-spacing:.5px}
.plan-note{display:block;margin-top:4px;color:var(--muted);font-size:9px}
.plan-price{font:600 16px/1 "JetBrains Mono",monospace;color:var(--text-strong)}

.key-card{
  padding:15px 2px;border-bottom:1px solid var(--line)
}
.key-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.key-top strong{font-size:12px}
.state{font-size:8px;font-weight:800;letter-spacing:.6px;color:var(--success)}
.state.off{color:var(--danger)}
.key-code-row{display:flex;align-items:center;gap:10px;margin-top:11px}
.key-code-row code{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 11px/1.4 "JetBrains Mono",monospace;color:#e9c68f
}
html[data-theme="light"] .key-code-row code{color:#8c5718}
.small-action{
  min-height:34px;border:1px solid var(--line);border-radius:9px;background:transparent;
  color:var(--muted);padding:0 10px;font-size:8px;font-weight:800
}
.small-action:hover{border-color:var(--line-strong);color:var(--text)}
.key-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;color:var(--muted);font-size:9px}

.device-group{padding:15px 2px;border-bottom:1px solid var(--line)}
.device-group-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px}
.device-group-head strong{font-size:11px}.device-group-head span{font-size:9px;color:var(--muted)}
.device-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
.device-row:first-of-type{border-top:0}
.device-copy{display:grid;gap:3px}.device-copy strong{font-size:11px}.device-copy span{font-size:9px;color:var(--muted)}
.device-id{font:600 9px/1 "JetBrains Mono",monospace;color:var(--muted)}
.empty-state{padding:24px 2px;border-bottom:1px solid var(--line);color:var(--muted)}
.empty-state strong{display:block;color:var(--text);font-size:12px;margin-bottom:5px}.empty-state span{font-size:10px}

.settings-list{border-top:1px solid var(--line)}
.settings-row{
  width:100%;min-height:58px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;
  padding:11px 2px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left
}
.settings-row:hover{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.settings-row>span{display:grid;gap:3px}.settings-row strong{font-size:12px}.settings-row small{font-size:9px;color:var(--muted)}
.settings-row svg{width:17px;height:17px;color:var(--faint)}
.about-block{display:flex;align-items:center;gap:10px;margin-top:26px;color:var(--muted)}
.about-block img{width:31px;height:31px;object-fit:contain;border-radius:8px;border:1px solid var(--line)}
.about-block div{display:grid;gap:1px}.about-block strong{font-size:10px;color:var(--text)}.about-block span{font-size:8px}

.bottom-nav{
  position:fixed;z-index:20;left:50%;bottom:calc(10px + var(--safe-bottom));transform:translateX(-50%);
  width:min(calc(100% - 24px),596px);height:66px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  padding:6px;background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--line);
  border-radius:15px;box-shadow:0 14px 42px rgba(0,0,0,.38);backdrop-filter:blur(14px)
}
.nav-item{
  border:0;border-radius:10px;background:transparent;color:var(--faint);display:grid;place-items:center;align-content:center;gap:3px;
  padding:4px;font-size:8px;font-weight:700
}
.nav-item svg{width:17px;height:17px}
.nav-item.active{background:var(--surface-3);color:var(--accent)}

.modal-backdrop{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.68);backdrop-filter:blur(3px)}
.sheet{
  position:fixed;z-index:31;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,620px);
  padding:11px 18px calc(20px + var(--safe-bottom));background:var(--surface);
  border:1px solid var(--line-strong);border-bottom:0;border-radius:19px 19px 0 0;
  box-shadow:0 -16px 48px rgba(0,0,0,.48)
}
.sheet-handle{width:34px;height:3px;margin:0 auto 18px;border-radius:999px;background:var(--line-strong)}
.sheet h3{margin:7px 0 5px;font-size:23px;line-height:1.1;font-weight:800;letter-spacing:-.45px}
.sheet>p{margin:0 0 17px;color:var(--muted);font-size:10px}
.sheet .button{width:100%;margin-top:8px}
.sensitive-note{max-width:460px}
.key-reveal{
  display:flex;align-items:center;gap:10px;margin:15px 0 8px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.key-reveal code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 12px/1.4 "JetBrains Mono",monospace;color:var(--text)}
.key-reveal button{border:0;background:transparent;color:var(--accent);font-size:9px;font-weight:800}
.download-list{border-top:1px solid var(--line);margin:14px 0}
.download-row{
  width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:13px 2px;
  border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left
}
.download-row:hover{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.os-mark{font:700 9px/1 "JetBrains Mono",monospace;color:var(--accent)}
.download-row>span:nth-child(2){display:grid;gap:2px}.download-row strong{font-size:12px}.download-row small{font-size:9px;color:var(--muted)}
.download-row svg{width:17px;height:17px;color:var(--muted)}
.success-logo{width:52px;height:52px;object-fit:contain;margin:0 0 13px;border-radius:13px;border:1px solid var(--line)}
.toast{
  position:fixed;z-index:50;left:50%;bottom:calc(84px + var(--safe-bottom));transform:translateX(-50%);
  max-width:calc(100% - 36px);padding:10px 13px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--surface-3);color:var(--text);font-size:9px;font-weight:800;box-shadow:0 14px 38px rgba(0,0,0,.42);text-align:center
}
.loading-list::before,.loading-list::after{
  content:"";display:block;height:58px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--surface-2) 60%,transparent) 50%,transparent 100%);
  background-size:220% 100%;animation:loading 1.2s ease-in-out infinite
}
@keyframes loading{from{background-position:100% 0}to{background-position:-100% 0}}
.spinning{animation:spin .65s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:380px){
  .app{padding-left:14px;padding-right:14px}
  .home-status{grid-template-columns:1fr}
  .status-meta{grid-template-columns:1fr 1fr;text-align:left}
  .primary-actions{grid-template-columns:1fr}
  .section-head{align-items:flex-start}
}
@media(min-width:700px){
  .app{padding-left:26px;padding-right:26px}
  .sheet{padding-left:26px;padding-right:26px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


.device-loading{
  padding:10px 0;
}
.device-loading span{
  display:block;
  height:44px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb,var(--surface-2) 72%,transparent),
    transparent
  );
  background-size:220% 100%;
  animation:loading 1.05s ease-in-out infinite;
}


.promo-box{
  margin:4px 0 10px;
  padding:10px 0 12px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.promo-toggle{
  min-height:32px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--accent);
  font-size:9px;
  font-weight:800;
}
.promo-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:8px;
}
.promo-input{
  width:100%;
  min-width:0;
  height:38px;
  padding:0 11px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  outline:none;
  background:var(--surface-2);
  color:var(--text);
  font:600 11px/1 "JetBrains Mono",monospace;
  text-transform:uppercase;
}
.promo-input:focus{
  border-color:var(--accent);
}
.promo-input::placeholder{
  color:var(--faint);
}
.promo-apply{
  min-height:38px;
}
.promo-result{
  margin-top:8px;
  font-size:9px;
  color:var(--success);
}
.promo-result.error{
  color:var(--danger);
}

.download-update-note{margin:7px 0 13px!important;color:var(--muted);font-size:9px;line-height:1.45}