:root{
  --accent:#338861; --accent-2:#d9b568; --danger:#e2685f;
  --bg:#0a130f; --bg-elevated:#0f1e18; --bg-elevated-2:#15271f;
  --text:#eaf2ee; --text-dim:#9fb6ab; --border:#20362d; --radius:14px; --radius-sm:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
[data-theme="light"]{--bg:#f5f8f5;--bg-elevated:#fff;--bg-elevated-2:#eaf1ec;--text:#0e1e17;--text-dim:#4c6259;--border:#d9e5de;--accent:#1f7a56;--accent-2:#8a6a1f;--danger:#c0392b}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overscroll-behavior:none;overflow-x:hidden}
.hidden{display:none!important}
.dim{color:var(--text-dim)}.small{font-size:12.5px}
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px calc(20px + env(safe-area-inset-right)) 24px calc(20px + env(safe-area-inset-left));padding-top:calc(24px + var(--safe-top))}
.auth-card{width:100%;max-width:380px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.brand{font-weight:750;font-size:20px}
.brand span{color:var(--accent)}
.tabs{display:flex;gap:6px;margin:14px 0}
.tab-btn{flex:1;background:var(--bg-elevated-2);border:1px solid var(--border);color:var(--text-dim);padding:9px;border-radius:9px;font-size:13px}
.tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab-panel{display:none}.tab-panel.active{display:block}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:12px;color:var(--text-dim)}
input,select,textarea{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:11px 12px;font-size:15px;font-family:inherit;width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:var(--bg-elevated-2);color:var(--text);border-radius:var(--radius-sm);padding:11px 16px;font-size:14.5px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{background:rgba(226,104,95,.14);border-color:var(--danger);color:var(--danger)}
.btn.wide{width:100%}
.btn.round{width:46px;height:46px;padding:0;border-radius:50%;flex:0 0 auto}
.msg{padding:10px 12px;border-radius:9px;font-size:13px;margin-top:10px}
.msg.error{background:rgba(255,91,107,.14);color:var(--danger)}
.msg.success{background:rgba(34,200,166,.14);color:var(--accent-2)}
.install-banner{position:fixed;top:0;left:0;right:0;z-index:500;background:var(--accent);color:#fff;display:flex;align-items:center;gap:10px;padding:10px calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));padding-top:calc(10px + var(--safe-top));font-size:13px}
.install-banner button{background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:8px;padding:7px 12px;font-size:12.5px}
.install-banner button.ghost{background:transparent;padding:6px}
.app-shell{display:flex;flex-direction:column;height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;padding-top:calc(12px + var(--safe-top));border-bottom:1px solid var(--border);flex:0 0 auto}
.balance-pill{background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--accent-2)}
.views{flex:1;overflow:hidden;position:relative}
.view{display:none;height:100%;overflow-y:auto;padding:16px}
.view.active{display:flex;flex-direction:column}
.view h2{font-size:17px;margin:0 0 12px}
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.chat-toolbar{padding-bottom:10px}
.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.chat-msg{padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.4;max-width:88%;white-space:pre-wrap}
.chat-msg.system{color:var(--text-dim);font-size:12.5px;align-self:center}
.chat-msg.user{align-self:flex-end;background:var(--accent);color:#fff}
.chat-msg.assistant{align-self:flex-start;background:var(--bg-elevated);border:1px solid var(--border)}
.chat-input-row{display:flex;gap:8px;align-items:flex-end;flex:0 0 auto}
.chat-input-row textarea{resize:none;max-height:120px}
.tabbar{display:flex;border-top:1px solid var(--border);flex:0 0 auto;padding-bottom:var(--safe-bottom);background:var(--bg-elevated)}
.tab-item{flex:1;background:transparent;border:none;color:var(--text-dim);padding:9px 0 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px}
.tab-item span{font-size:19px}
.tab-item.active{color:var(--accent)}
.toggle-inline{display:flex;align-items:flex-start;gap:8px;font-size:14px;flex-wrap:wrap}
.toggle-inline input[type="checkbox"]{flex:0 0 auto;margin-top:3px}
.toggle-inline span{flex:1 1 auto;min-width:0;white-space:normal;word-break:break-word;line-height:1.35}
.toast-stack{position:fixed;bottom:calc(90px + var(--safe-bottom));left:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:400}
.toast{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:13px}
.device-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px}
.device-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.device-card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.device-status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;background:var(--danger)}
.device-status-dot.online{background:var(--accent-2)}
.device-chat-panel{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.device-chat-messages{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto;margin-bottom:8px;padding:6px;background:var(--bg);border-radius:var(--radius-sm)}
.device-chat-input-row{display:flex;gap:6px}
.device-chat-input{flex:1;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font-size:14px}
.toast.success{border-color:var(--accent-2)}
.toast.error{border-color:var(--danger)}