/* MindChat — Material Design 3 tokens, Google-style. No external fonts: system stack
   keeps the page booting on slow / restricted networks. */
/* v1.8 配色：截图式宝蓝 + 白底浅灰（原 Material 紫调已替换，品牌仍为 MindChat 原创） */
:root{
  --primary:#2b5cff; --on-primary:#fff; --primary-container:#e3eaff; --on-primary-container:#102a7a;
  --secondary:#5f6368; --surface:#ffffff; --surface-container:#f4f6f9; --surface-container-high:#e9edf3;
  --surface-container-highest:#dde2ea; --outline:#9aa0a6; --outline-variant:#d8dce3;
  --on-surface:#111827; --on-surface-variant:#5f6368; --error:#d93025; --ink:#111827;
  --radius:16px; --radius-lg:28px; --shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --shadow2:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
}
[data-theme="dark"]{
  --primary:#8ab4ff; --on-primary:#062e6f; --primary-container:#1e3a8a; --on-primary-container:#e3eaff;
  --secondary:#c3c6d3; --surface:#12141c; --surface-container:#1e212e; --surface-container-high:#262a3a;
  --surface-container-highest:#2f3447; --outline:#9aa0a6; --outline-variant:#3c4043;
  --on-surface:#e8eaed; --on-surface-variant:#9aa0a6; --error:#f28b82; --ink:#111827;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Google Sans",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--surface);color:var(--on-surface);line-height:1.6}
a{color:var(--primary)} button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;background:var(--surface-container-high);color:var(--on-surface);border-radius:999px;padding:10px 18px;min-height:44px}
button.primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow)}
button.tonal{background:var(--primary-container);color:var(--on-primary-container)}
button.outline{background:transparent;border:1px solid var(--outline-variant)}
button.small{padding:6px 12px;min-height:36px;font-size:14px}
input,select,textarea{background:var(--surface-container);border:1px solid var(--outline-variant);color:var(--on-surface);border-radius:12px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);border-color:transparent}
.hidden{display:none!important}
.skip-link{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--primary);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip-link:focus{left:12px}
/* Landing */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;position:sticky;top:0;background:var(--surface);z-index:20;border-bottom:1px solid var(--outline-variant)}
.logo{font-weight:800;font-size:22px;letter-spacing:-.5px}.logo span{color:var(--primary)}
.spacer{flex:1}
.hero{max-width:1080px;margin:0 auto;padding:56px 20px 20px;text-align:center}
.hero h1{font-size:clamp(32px,6vw,56px);line-height:1.15;margin:12px 0}
.hero p{color:var(--on-surface-variant);font-size:18px;max-width:720px;margin:0 auto}
.pill{display:inline-block;background:var(--primary-container);color:var(--on-primary-container);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600}
.grid{max-width:1080px;margin:0 auto;padding:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface-container);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}
.card h3{margin:8px 0}.card p{color:var(--on-surface-variant);margin:0}
.price-grid{max-width:1080px;margin:0 auto;padding:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.price{border:2px solid var(--outline-variant);border-radius:var(--radius-lg);padding:22px;background:var(--surface-container)}
.price.hot{border-color:var(--primary);box-shadow:var(--shadow2)}
.price .amt{font-size:36px;font-weight:800}.price .old{text-decoration:line-through;color:var(--on-surface-variant);margin-left:8px}
.price ul{padding-left:20px;color:var(--on-surface-variant)} .price li{margin:6px 0}
.section{max-width:1080px;margin:0 auto;padding:28px 20px}.section h2{font-size:28px}
.faq details{background:var(--surface-container);border-radius:16px;padding:14px 18px;margin:10px 0}
/* App layout */
#appView{display:flex;height:100vh;height:100dvh;overflow:hidden}
.sidebar{width:300px;flex-shrink:0;background:var(--surface-container);border-right:1px solid var(--outline-variant);display:flex;flex-direction:column;padding:12px;gap:10px;overflow-y:auto}
.sidebar .row{display:flex;gap:8px;align-items:center}
.chatlist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.chat-item{padding:10px 12px;border-radius:12px;text-align:left;background:transparent;min-height:44px;display:flex;justify-content:space-between;gap:8px}
.chat-item.active{background:var(--primary-container);color:var(--on-primary-container);font-weight:600}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.appbar{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--outline-variant);flex-wrap:wrap}
.messages{flex:1;overflow-y:auto;padding:20px;max-width:900px;width:100%;margin:0 auto}
.msg{display:flex;gap:12px;margin:18px 0}
.avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--primary-container);font-weight:700}
.msg.user .avatar{background:var(--surface-container-highest)}
.bubble{background:var(--surface-container);border-radius:20px;padding:14px 18px;max-width:100%;overflow-wrap:anywhere;flex:1}
.msg.user .bubble{background:var(--primary-container);color:var(--on-primary-container)}
.bubble pre{background:#111827;color:#e5e7eb;border-radius:12px;padding:12px;overflow:auto;font-size:13px}
.bubble code{background:rgba(0,0,0,.08);padding:1px 5px;border-radius:6px}
.bubble pre code{background:none;padding:0}
.meta{font-size:12px;color:var(--on-surface-variant);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.meta button{min-height:28px;padding:4px 10px;font-size:12px}
.composer{padding:12px;border-top:1px solid var(--outline-variant);background:var(--surface)}
.composer-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.composer textarea{resize:none;min-height:56px;border-radius:20px;padding:14px 16px}
.composer-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.multi{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.multi .col{background:var(--surface-container);border-radius:20px;padding:12px;min-width:0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:50;padding:16px}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);padding:22px;max-width:640px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow2)}
.modal-box label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-container-high);border-radius:999px;padding:4px 10px;font-size:12px}
.sources{font-size:13px;background:var(--surface-container);border-radius:12px;padding:10px 12px;margin-top:8px}
.artifact{border:1px solid var(--outline-variant);border-radius:16px;overflow:hidden;margin-top:10px}
.artifact iframe{width:100%;height:380px;border:0;background:#fff}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1d1b20;color:#fff;padding:12px 20px;border-radius:999px;z-index:99;box-shadow:var(--shadow2)}
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:30}
@media(max-width:900px){
  .grid,.price-grid{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-110%);transition:.2s;width:86vw;max-width:320px}
  .sidebar.open{transform:none}
  #appView{height:100dvh}
  .messages{padding:14px}
  .multi{grid-template-columns:1fr}
  .appbar{padding:8px}
  .hero{padding-top:28px}
}

/* v1.1 polish */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.md-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px;background:var(--surface)}
.md-table th,.md-table td{border:1px solid var(--outline-variant);padding:8px 10px;text-align:left}
.md-table th{background:var(--surface-container-high)}
.stat-bar{height:12px;background:var(--primary);border-radius:999px;min-width:4px}
.mock{max-width:820px;margin:28px auto 0;text-align:left;background:var(--surface-container);border-radius:var(--radius-lg);box-shadow:var(--shadow2);overflow:hidden}
.mock-bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--outline-variant);font-size:13px;color:var(--on-surface-variant)}
.mock-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.mock-msg{max-width:80%;padding:10px 14px;border-radius:18px;background:var(--surface-container-high)}
.mock-msg.me{align-self:flex-end;background:var(--primary-container);color:var(--on-primary-container)}
.mock-note{font-size:12px;color:var(--on-surface-variant);text-align:center}
.msg:hover .meta{opacity:1}
@media(max-width:900px){
  .mock-msg{max-width:92%}
  .composer textarea{font-size:16px}
}

/* v1.2 */
details.thinking{border:1px dashed var(--outline-variant);border-radius:12px;padding:8px 12px;margin-bottom:10px;background:var(--surface-container-high)}
details.thinking summary{cursor:pointer;font-size:13px;font-weight:600}

/* v1.3 对话背景 */
.main{transition:background .2s}
.main.has-bg .bubble{box-shadow:var(--shadow)}
.main.has-bg .msg.user .bubble{box-shadow:var(--shadow)}
.skin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0}
.skin-btn{height:64px;border-radius:16px;border:2px solid var(--outline-variant);color:var(--on-surface);display:flex;align-items:flex-end;padding:8px}
.skin-btn span{background:rgba(255,255,255,.85);color:#1d1b20;border-radius:999px;padding:2px 10px;font-size:12px}
.skin-btn.active{border-color:var(--primary);outline:2px solid var(--primary)}

/* v1.4 企业级 SVG 图标 */
.ic{width:20px;height:20px;vertical-align:-4px;flex-shrink:0}
.ic-lg{width:24px;height:24px;vertical-align:-5px;margin-right:8px;flex-shrink:0}
button{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.chat-item{display:flex;align-items:center}

/* v1.5 */
@media(min-width:901px){ #appView.sidebar-hidden .sidebar{display:none} }
.chat-item span{line-height:1.4}

/* v1.6 截图式侧栏 / 底部导航 */
.sidebar-new{width:100%;justify-content:center;font-size:16px;font-weight:700;padding:14px 18px}
.search-row{display:flex;gap:8px;align-items:center}
.search-pill{flex:1;display:flex;align-items:center;gap:6px;background:var(--surface-container-high);border-radius:999px;padding:6px 12px}
.search-pill input{background:transparent;border:0;padding:6px 0}
.search-pill input:focus{outline:none}
.icon-btn{padding:6px 10px;min-height:36px}
.bottom-nav{display:none}
@media(max-width:900px){
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--outline-variant);padding:6px 4px calc(6px + env(safe-area-inset-bottom));gap:2px}
  .bottom-nav button{flex:1;background:transparent;border-radius:14px;padding:8px 2px;min-height:52px;font-size:12px;flex-direction:column;gap:2px}
  .bottom-nav button.active{background:var(--surface-container-high);font-weight:700}
  .main{padding-bottom:66px}
}

/* v1.7 用户气泡右对齐 */
.msg.user{flex-direction:row-reverse}
.msg.user>div:last-child{flex:none!important;max-width:85%;margin-left:auto}
.msg.user .meta{justify-content:flex-end}
@media(max-width:900px){ .msg.user>div:last-child{max-width:92%} }

/* v1.8 截图配色落地：落地页浅蓝渐变、定价购买按钮用深色（截图买按钮是深色）、侧栏与搜索框用浅灰 */
.hero{background:linear-gradient(180deg,#eef4ff 0%,var(--surface) 55%)}
#pricing .price button.primary{background:var(--ink);color:#fff;box-shadow:none}
#pricing .price.hot{border-color:var(--primary)}
.sidebar{background:var(--surface-container)}
.topbar{background:var(--surface)}
.composer{background:var(--surface)}
.composer textarea{background:var(--surface-container-high);border-color:transparent}

/* v2.0 聊天框：悬浮灰卡片（截图式输入框），输入区透明 */
.composer-inner{background:var(--surface-container-high);border-radius:28px;padding:16px;box-shadow:var(--shadow)}
.composer textarea{background:transparent;border:0;padding:8px 4px}
.composer textarea:focus{outline:none}
.composer{border-top:0}
.msg .avatar{font-size:13px}

/* v2.3：截图式干净聊天区 */
.msg{margin:24px 0}
.msg.assistant .avatar{display:none}
.msg.assistant .bubble{background:transparent;padding:2px 0;box-shadow:none}
.msg.user .bubble{background:var(--primary-container,#e3eaff);color:var(--on-primary-container,#111827)}
.meta{opacity:.6}
.msg:hover .meta{opacity:1}
.chat-header{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--outline-variant);margin-bottom:8px}
.chat-title{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font-size:12px;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty-state{text-align:center;padding:56px 16px 24px}
.empty-state img{width:72px;height:72px;border-radius:20px}
.empty-state h2{margin:16px 0 6px;font-size:28px}
.empty-state p{color:var(--on-surface-variant);margin:0}
.composer-top{display:flex;justify-content:space-between;font-size:12px;color:var(--on-surface-variant);padding:0 4px}
.composer-row button{border-radius:999px}
.composer-row .primary{padding:10px 22px}
/* v2.4：截图式工作区登录/创建 */
.ws-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.ws-top img{width:52px;height:52px;border-radius:14px}
.ws-title{font-size:30px;font-weight:800;margin:0 0 24px}
.ws-field label{display:block;font-size:15px;color:var(--on-surface-variant);margin:16px 0 8px}
.ws-input{width:100%;box-sizing:border-box;border:1.5px solid var(--outline-variant);border-radius:14px;padding:14px 16px;font-size:16px;background:var(--surface)}
.ws-slug{display:flex;border:1.5px solid var(--outline-variant);border-radius:14px;overflow:hidden}
.ws-slug input{border:0;border-radius:0;flex:1;min-width:0}
.ws-slug span{padding:14px 16px;color:var(--on-surface-variant);background:var(--surface-container);border-left:1px solid var(--outline-variant);white-space:nowrap}
.ws-verify{border:1.5px solid var(--outline-variant);border-radius:10px;padding:14px 16px;display:flex;gap:12px;align-items:center;margin-top:20px}
.ws-verify.ok{border-color:#34a853}
.ws-btn{width:100%;border:0;border-radius:16px;padding:16px;font-size:16px;font-weight:700;margin-top:20px;background:var(--surface-container-high);color:var(--on-surface-variant)}
.ws-btn:not(:disabled){background:var(--primary);color:#fff;cursor:pointer}
.ws-note{font-size:13px;color:var(--on-surface-variant);margin-top:16px;line-height:1.6}

/* v2.5：工作区全屏页（截图版式，非弹窗） */
.ws-page{max-width:520px;margin:0 auto;padding:24px 20px 48px;background:var(--surface);min-height:100vh;box-sizing:border-box}
.ws-page .ws-title{font-size:34px;line-height:1.2}
.ws-page .ws-top img{width:56px;height:56px;border-radius:14px}
.ws-page .ws-input{font-size:16px}

/* v2.6：企业级图标按钮 */
.composer-row .icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;background:transparent}
.composer-row .icon-btn:hover{background:var(--surface-container)}
.composer-send{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;border:0;cursor:pointer}
.composer-send .ic{width:20px;height:20px}
.buy-pill{border:0;border-radius:999px;padding:8px 14px;font-weight:700;color:#fff;background:linear-gradient(90deg,#ef4444,#f97316);cursor:pointer;white-space:nowrap}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu-item{display:flex;gap:10px;align-items:center;text-align:left;padding:12px;border-radius:16px;background:var(--surface-container)}
.menu-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;flex-shrink:0}

/* v2.7：模型卡片 + 服务商 Logo 徽标（截图版式） */
.model-card{display:flex;gap:12px;align-items:center;text-align:left;width:100%;padding:12px 14px;border:1.5px solid var(--outline-variant);border-radius:16px;background:var(--surface);margin:8px 0;cursor:pointer}
.model-card.sel{border-color:var(--primary)}
.model-logo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;flex-shrink:0}
.model-logo.sm{width:24px;height:24px;font-size:13px}
.model-radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--outline-variant);flex-shrink:0}
.model-radio.sel{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 4px var(--surface)}

/* 管理后台 v5.0 */
.admin-layout{display:flex;height:100vh;overflow:hidden}
.admin-sidebar{width:300px;flex-shrink:0;border-right:1px solid var(--outline-variant);padding:16px;background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
.admin-section-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;padding:10px 12px;font-size:13px;font-weight:700;color:var(--on-surface-variant)}
.admin-getting{margin-top:12px}
.admin-main{flex:1;overflow-y:auto;padding:24px}
.admin-main .card{padding:16px}
.admin-nav-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;padding:10px 12px;border-radius:12px;font-size:15px}
.admin-nav-btn.active{background:var(--surface-container-high);font-weight:700}
.admin-section{font-size:13px;color:var(--on-surface-variant);padding:16px 12px 6px}
.admin-getting{background:#2b5cff;color:#fff;border-radius:20px;padding:16px;margin-top:16px}
.admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.admin-big{font-size:28px;font-weight:800}
@media(max-width:800px){.admin-layout{flex-direction:column;height:auto;overflow:visible}.admin-sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--outline-variant)}.admin-main{padding:16px}}

/* 注册流程 v6.0（截图式验证码页） */
.reg-title{text-align:center;font-size:32px;margin:24px 0 12px}
.reg-sub{text-align:center;color:var(--on-surface-variant);line-height:1.6}
.reg-code{display:block;width:100%;max-width:360px;margin:0 auto;padding:14px;text-align:center;font-size:24px;letter-spacing:6px;border:2px solid var(--primary);border-radius:16px;background:var(--surface)}
.reg-btn-grey{flex:1;padding:14px;border-radius:14px;background:#e9edf3;color:#9aa0a6;font-size:16px;font-weight:700}
.reg-btn-grey:not(:disabled){background:var(--primary);color:#fff}
.reg-btn-dark{flex:1;padding:14px;border-radius:14px;background:#111827;color:#fff;font-size:16px;font-weight:700}
.hero-input{display:flex;gap:10px;justify-content:center;max-width:560px;margin:20px auto 0}
.hero-input input{flex:1;padding:14px 18px;border-radius:999px;border:1px solid var(--outline-variant);background:var(--surface);font-size:16px}
@media(max-width:600px){.reg-title{font-size:26px}}
.showcase-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.showcase-tab{border:1px solid var(--outline-variant);background:var(--surface);border-radius:999px;padding:8px 16px;cursor:pointer;font-size:14px}
.showcase-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.showcase-panel{display:none;max-width:640px;margin:0 auto;background:var(--surface);border:1px solid var(--outline-variant);border-radius:16px;padding:20px;text-align:center}
.showcase-panel.active{display:block}
.showcase-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.showcase-chips span{border:1px solid var(--outline-variant);border-radius:999px;padding:6px 14px;font-size:13px}
.showcase-duo{display:flex;gap:12px;margin-top:12px}
.showcase-box{flex:1;border:1px solid var(--outline-variant);border-radius:12px;padding:12px;text-align:left}
.showcase-box .skel{display:block;height:10px;border-radius:999px;background:var(--outline-variant);margin-top:8px;opacity:.6}
.showcase-box .skel.short{width:55%}
.showcase-lock{font-size:18px;margin-top:12px}
.landing-models{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--on-surface-variant)}
.landing-models span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--outline-variant);border-radius:999px;padding:4px 12px;background:var(--surface)}
.landing-models i{width:8px;height:8px;border-radius:50%;display:inline-block}

@media(max-width:640px){
.topbar{flex-wrap:wrap;gap:8px;padding:10px 12px}
.topbar .logo{font-size:20px}
#landingLang{max-width:110px}
.topbar button{padding:6px 10px;font-size:13px}
.appbar{padding:8px 10px;gap:6px}
.appbar .buy-pill{padding:6px 12px;font-size:13px}
#langSel{max-width:96px}
.ws-top{margin-bottom:20px}
.ws-page{padding:20px 16px 40px}
.ws-page .ws-title{font-size:28px}
.hero{padding:36px 16px 16px}
}