/* TonCode V3 SPA + Admin. Single dark theme with optional light mode. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
:root{--bg:#000;--bg2:#0a0a0a;--bg3:#111;--text:#fff;--grey:#888;--dim:#555;--border:#222;--accent:#22c55e;--danger:#ff4444;--font:'JetBrains Mono',monospace;}
body.light{--bg:#f8f8f8;--bg2:#fff;--bg3:#f0f0f0;--text:#111;--grey:#666;--dim:#999;--border:#ddd;--accent:#16a34a;}
*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font);}
html,body{height:100%;}
body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;}
::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-thumb{background:var(--border);}
.hidden{display:none!important;}
.mono{font-family:var(--font);}
.small{font-size:10px;}
.dim{color:var(--dim);}
.ok{color:var(--accent);}
.err{color:var(--danger);font-size:12px;}
.status{font-size:11px;color:var(--grey);min-height:16px;margin-top:10px;letter-spacing:0.5px;}
.loading{color:var(--dim);font-size:12px;letter-spacing:2px;padding:20px;}

/* screens */
.screen{position:fixed;inset:0;background:var(--bg);display:flex;}
.screen.center{flex-direction:column;align-items:center;justify-content:center;padding:24px;}
.center-fill{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;}
.brand{font-size:34px;font-weight:700;letter-spacing:2px;}
.brand-sub{font-size:11px;color:var(--dim);letter-spacing:4px;text-transform:uppercase;margin:8px 0 40px;}
.ghost-btn{background:none;border:none;color:var(--dim);font-size:13px;letter-spacing:2px;cursor:pointer;padding:14px 30px;}
.ghost-btn:hover,.ghost-btn:active{color:var(--text);}

/* panel + inputs */
.panel{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;}
.panel-title{font-size:16px;font-weight:700;letter-spacing:1px;}
.panel-sub{font-size:10px;color:var(--dim);letter-spacing:1px;margin-bottom:8px;}
input,textarea,select{width:100%;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-size:13px;outline:none;letter-spacing:0.5px;}
input:focus,textarea:focus{border-color:#444;}
textarea{resize:vertical;}
.btn{padding:11px 16px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border:1px solid var(--border);background:transparent;color:var(--grey);cursor:pointer;transition:all .15s;}
.btn:hover{border-color:var(--text);color:var(--text);}
.btn:disabled{opacity:.35;cursor:default;}
.btn.primary{border-color:rgba(34,197,94,.4);color:var(--accent);}
.btn.danger{border-color:rgba(255,68,68,.35);color:var(--danger);}
.btn.wide{width:100%;}
.mini{padding:3px 8px;font-size:10px;border:1px solid var(--border);background:transparent;color:var(--grey);cursor:pointer;}
.mini:hover{color:var(--text);border-color:var(--text);}
.icon-btn{background:none;border:none;color:var(--grey);font-size:20px;cursor:pointer;}
.link-btn{background:none;border:none;color:var(--dim);font-size:11px;cursor:pointer;letter-spacing:.5px;text-decoration:underline;padding:6px 0;}
.link-btn:hover{color:var(--text);}
.row{display:flex;gap:8px;align-items:center;}
.row.right{justify-content:flex-end;}
.row.spread{justify-content:space-between;}

/* oauth */
.oauth-list{display:flex;flex-direction:column;gap:8px;}
.oauth-btn{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:12px;letter-spacing:.5px;background:var(--bg2);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:border-color .15s;}
.oauth-btn:hover{border-color:#555;}
.oauth-btn svg{flex-shrink:0;opacity:.9;}

/* app layout */
.screen.app{flex-direction:row;}
#sidebar{width:250px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px;gap:10px;flex-shrink:0;}
.side-head{font-size:16px;font-weight:700;display:flex;justify-content:space-between;align-items:center;}
.side-tier{font-size:9px;color:var(--dim);letter-spacing:2px;}
.chat-list{flex:1;overflow-y:auto;}
.chat-item{padding:10px 12px;font-size:12px;color:var(--grey);cursor:pointer;display:flex;justify-content:space-between;gap:6px;border:1px solid transparent;}
.chat-item:hover{background:var(--bg3);}
.chat-item.active{border-color:var(--border);color:var(--text);}
.chat-del{background:none;border:none;color:var(--dim);cursor:pointer;font-size:13px;}
.chat-del:hover{color:var(--danger);}
.side-nav{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--border);padding-top:10px;}
.nav-btn{background:none;border:none;color:var(--grey);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;text-align:left;padding:8px 4px;cursor:pointer;}
.nav-btn:hover,.nav-btn.active{color:var(--text);}
.nav-btn.danger{color:var(--danger);opacity:.8;}
.app-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);}
.model-select{width:auto;max-width:320px;padding:6px 10px;font-size:11px;}
.top-right{margin-left:auto;}
.pill{font-size:10px;letter-spacing:1px;border:1px solid var(--border);padding:4px 10px;color:var(--grey);}
.pill.low{color:var(--danger);border-color:rgba(255,68,68,.4);}
.announce{padding:8px 16px;font-size:11px;color:var(--accent);border-bottom:1px solid var(--border);background:rgba(34,197,94,.05);}
.view{flex:1;display:flex;flex-direction:column;min-height:0;}
.view.scroll{overflow-y:auto;padding:24px;gap:12px;}
.view-title{font-size:18px;letter-spacing:1px;margin-bottom:8px;}
.view-sub{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);margin:18px 0 8px;}

/* chat */
.chat-box{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;}
.greet{margin:auto;color:var(--grey);font-size:16px;letter-spacing:1px;}
.user-msg{align-self:flex-end;background:var(--bg3);border:1px solid var(--border);padding:10px 16px;max-width:85%;font-size:13px;word-wrap:break-word;}
.bot-msg{align-self:flex-start;max-width:100%;font-size:13px;line-height:1.7;word-wrap:break-word;}
.bot-msg .code{background:var(--bg2);border:1px solid var(--border);padding:12px;margin:10px 0;overflow-x:auto;font-size:12px;color:var(--accent);white-space:pre-wrap;}
.inline-code{background:var(--bg3);border:1px solid var(--border);padding:1px 5px;font-size:12px;color:var(--accent);}
.cursor{display:inline-block;width:2px;height:13px;background:var(--accent);animation:blink .7s infinite;vertical-align:middle;}
@keyframes blink{50%{opacity:0;}}
.input-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);}
.input-row textarea{flex:1;max-height:120px;}
.input-row .btn{width:46px;}

/* cards + lists + tables */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.card{background:var(--bg2);border:1px solid var(--border);padding:18px;}
.card.plan.active{border-color:rgba(34,197,94,.5);}
.card-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);margin-bottom:8px;}
.card-value{font-size:24px;font-weight:700;letter-spacing:-.5px;}
.card-sub{font-size:11px;color:var(--dim);margin-top:4px;}
.feat{list-style:none;margin:10px 0;font-size:11px;color:var(--grey);}
.feat li{padding:4px 0;border-bottom:1px solid var(--bg3);}
.feat li::before{content:'\2713 ';color:var(--accent);}
.list{display:flex;flex-direction:column;gap:6px;}
.list-row{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);font-size:12px;}
.list-row.col{flex-direction:column;}
.toggle{display:flex;gap:0;margin-bottom:14px;}
.purchase-code{font-size:12px;color:var(--accent);word-break:break-all;background:rgba(34,197,94,.05);border:1px dashed rgba(34,197,94,.35);padding:10px;margin:10px 0;cursor:pointer;letter-spacing:.5px;}
.help-text{white-space:pre-wrap;font-size:12px;color:var(--grey);line-height:1.8;}
.table-wrap{overflow-x:auto;border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;font-size:12px;}
th{background:var(--bg3);text-align:left;padding:10px 12px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);white-space:nowrap;}
td{padding:10px 12px;border-top:1px solid var(--border);vertical-align:top;}

/* modal + toast */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-box{background:var(--bg3);border:1px solid var(--border);padding:24px;width:100%;max-width:420px;max-height:80vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
.modal-title{font-size:13px;letter-spacing:1px;text-transform:uppercase;}
.modal-body{display:flex;flex-direction:column;gap:8px;font-size:12px;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--border);color:var(--accent);padding:8px 20px;font-size:11px;letter-spacing:1px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;}

/* admin */
.screen.admin{flex-direction:column;}
.admin-shell{flex:1;display:flex;min-height:0;}
.admin-side{width:220px;background:var(--bg2);border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex-shrink:0;}
.admin-brand{font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:14px;}
.admin-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.admin-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 24px;border-bottom:1px solid var(--border);}
.admin-top h1{font-size:17px;letter-spacing:.5px;}
.admin-search{max-width:260px;padding:8px 12px;font-size:12px;}
.admin-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:14px;}
.chart{display:flex;align-items:flex-end;gap:4px;height:140px;border:1px solid var(--border);background:var(--bg2);padding:12px;overflow-x:auto;}
.bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:26px;gap:4px;}
.bar{width:100%;background:rgba(34,197,94,.5);min-height:2px;}
.bar-col span{font-size:8px;color:var(--dim);white-space:nowrap;}

/* responsive */
@media (max-width:760px){
  #sidebar{position:fixed;inset:0 auto 0 0;z-index:500;transform:translateX(-100%);transition:transform .25s;width:80vw;max-width:300px;}
  #sidebar.open{transform:translateX(0);}
  .admin-side{width:170px;}
  .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}