:root{
  --ob-bg:#06101d; --ob-panel:rgba(13,28,48,.92); --ob-line:rgba(96,165,250,.18);
  --ob-text:#e9f4ff; --ob-muted:#8fa8c8; --ob-accent:#38bdf8; --ob-accent2:#818cf8;
  --ob-green:#34d399; --ob-warn:#fbbf24; --ob-bad:#fb7185;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(1100px 600px at 12% 0%,#122a4a 0%,#07111f 48%,#040a13 100%);color:var(--ob-text);font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif}
body{padding-bottom:30px}
a{color:var(--ob-accent);text-decoration:none}
.ob-shell{max-width:1180px;margin:0 auto;padding:0 14px}
.ob-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px 10px;position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(6,16,29,.97),rgba(6,16,29,.75),transparent);backdrop-filter:blur(12px)}
.ob-brand{display:flex;align-items:center;gap:9px;color:var(--ob-text)}
.ob-logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#38bdf8,#818cf8);color:#04101f;font-weight:900}
.ob-brand strong{display:block;font-size:15px}.ob-brand small{display:block;font-size:10px;color:var(--ob-muted);margin-top:2px}
.ob-top-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.ob-wallet{font-size:11px;color:#bae6fd;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);border-radius:999px;padding:5px 9px;white-space:nowrap}
.ob-icon{border:1px solid var(--ob-line);background:rgba(56,189,248,.06);color:var(--ob-muted);border-radius:9px;padding:5px 8px;font:inherit;font-size:11px;cursor:pointer}
.ob-main{display:flex;flex-direction:column;gap:12px;padding:8px 0 26px}
.ob-foot{text-align:center;color:#55708f;font-size:10px;padding:10px 0 20px}
.ob-eyebrow{font-size:9px;letter-spacing:.18em;color:#7dd3fc;font-weight:800}
.ob-muted{color:var(--ob-muted);font-size:12px;line-height:1.6;margin:5px 0}
.ob-hint{color:#7088a8;font-size:10px;line-height:1.55;margin-top:4px}
.ob-link{font-size:11px;color:#7dd3fc}

/* 扫码页 */
.ob-auth{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:16px;align-items:stretch;margin-top:10px}
.ob-auth-copy,.ob-auth-qr{border:1px solid var(--ob-line);border-radius:20px;padding:22px;background:linear-gradient(145deg,rgba(14,31,55,.9),rgba(8,19,34,.96));box-shadow:0 20px 50px rgba(0,0,0,.25)}
.ob-auth-copy h1{font-size:30px;line-height:1.22;margin:10px 0 6px;letter-spacing:-.02em}
.ob-auth-copy p{color:var(--ob-muted);font-size:12.5px;line-height:1.75;max-width:520px}
.ob-auth-steps{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.ob-auth-step{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;border:1px solid rgba(96,165,250,.13);background:rgba(56,189,248,.035)}
.ob-auth-no{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#7dd3fc,#818cf8);color:#04101f;font-size:10px;font-weight:900;flex:none}
.ob-auth-step strong{display:block;font-size:11.5px}.ob-auth-step small{display:block;color:var(--ob-muted);font-size:9.5px;margin-top:1px}
.ob-auth-qr{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ob-qr-title{font-weight:800;font-size:14px}
.ob-qr-box{width:min(270px,100%);aspect-ratio:1;margin:12px auto;border-radius:16px;background:#fff;padding:10px;display:grid;place-items:center;overflow:hidden}
.ob-qr-box svg{width:100%;height:100%;display:block}
.ob-qr-loading{color:#0b1728;font-size:11px;padding:10px}
.ob-qr-tip{font-size:10.5px;color:var(--ob-muted);line-height:1.5;min-height:32px}
.ob-auth-qr .ob-btn{margin-top:10px}

/* 手机绑定 */
.ob-bind{width:min(430px,100%);margin:5vh auto 0;padding:22px;border:1px solid var(--ob-line);border-radius:20px;background:linear-gradient(160deg,rgba(14,31,55,.96),rgba(8,19,34,.98));box-shadow:0 24px 60px rgba(0,0,0,.35)}
.ob-bind-icon{font-size:36px;text-align:center}
.ob-bind h1{text-align:center;font-size:21px;margin:8px 0 4px}
.ob-bind p{text-align:center;margin:0 0 16px}
.ob-bind-note{font-size:9.5px;color:#6f87a6;line-height:1.55;margin-top:10px;text-align:center}
.ob-bind .ob-link{display:block;text-align:center;margin-top:12px;font-size:10.5px}
.ob-label{display:block;font-size:11px;color:#a9bfd9;margin:11px 0 5px}
.ob-input{width:100%;padding:10px 11px;border-radius:10px;border:1px solid rgba(96,165,250,.24);background:#0a1626;color:var(--ob-text);font:inherit;font-size:13px;outline:none}
.ob-input:focus{border-color:rgba(56,189,248,.7);box-shadow:0 0 0 3px rgba(56,189,248,.1)}
.ob-textarea{resize:vertical;min-height:108px;line-height:1.6}
.ob-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(56,189,248,.3);background:rgba(56,189,248,.1);color:#bae6fd;border-radius:10px;padding:9px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none}
.ob-btn.primary{background:linear-gradient(135deg,#38bdf8,#818cf8);border-color:transparent;color:#04101f}
.ob-btn.ghost{background:transparent;color:var(--ob-muted);border-color:rgba(96,165,250,.2)}
.ob-btn:hover{filter:brightness(1.07)}
.ob-btn:disabled{opacity:.55;cursor:not-allowed}
.ob-bind .ob-btn{width:100%;margin-top:16px}
.ob-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:100;background:#0e2a44;border:1px solid rgba(56,189,248,.35);color:#dff4ff;padding:9px 14px;border-radius:10px;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.ob-toast.bad{border-color:rgba(251,113,133,.5);background:#35141f;color:#ffd9df}

/* 登录后 */
.ob-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid var(--ob-line);border-radius:18px;background:radial-gradient(600px 150px at 8% 0%,rgba(56,189,248,.16),transparent 65%),linear-gradient(140deg,rgba(14,32,57,.92),rgba(8,19,34,.96))}
.ob-hero h1{font-size:22px;margin:5px 0 3px;line-height:1.25}
.ob-next{flex:none;text-align:right;display:flex;flex-direction:column;gap:3px;max-width:220px}
.ob-next small{font-size:9px;color:#7dd3fc;letter-spacing:.1em}
.ob-next strong{font-size:11px;color:#dbeeff;line-height:1.45}
.ob-pill{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:9px;padding:3px 8px;border-radius:999px;border:1px solid rgba(96,165,250,.25);color:#9db4d2;background:rgba(56,189,248,.06)}
.ob-pill.ok{color:#6ee7b7;border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.09)}
.ob-steps{display:flex;gap:4px;overflow-x:auto;padding:2px 0}
.ob-step{flex:1 0 auto;display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:8px;border:1px solid rgba(96,165,250,.1);background:rgba(56,189,248,.025);font-size:9.5px;color:#8aa4c3;white-space:nowrap}
.ob-step.done{color:#a7f3d0;border-color:rgba(52,211,153,.22)}
.ob-step.active{color:#7dd3fc;border-color:rgba(56,189,248,.4);background:rgba(56,189,248,.08)}
.ob-step-dot{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:rgba(96,165,250,.12);font-size:8px;font-weight:800}
.ob-step.done .ob-step-dot{background:rgba(52,211,153,.2);color:#6ee7b7}
.ob-step.active .ob-step-dot{background:rgba(56,189,248,.2);color:#7dd3fc}
.ob-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr);gap:12px;align-items:start}
.ob-card{border:1px solid var(--ob-line);border-radius:16px;padding:14px;background:linear-gradient(160deg,rgba(13,29,51,.9),rgba(8,18,32,.96));min-width:0}
.ob-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.ob-card-head h2{font-size:14px;margin:0}
.ob-card>p{margin:0 0 10px}
.ob-card .ob-btn{margin-top:10px}
.ob-messages{max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px;border-top:1px solid rgba(96,165,250,.1);border-bottom:1px solid rgba(96,165,250,.1);margin:8px 0}
.ob-msg{display:flex;gap:6px;align-items:flex-start}
.ob-msg.user{flex-direction:row-reverse}
.ob-mini-avatar{width:25px;height:25px;flex:none;border-radius:50%;display:grid;place-items:center;background:#818cf8;color:#04101f;font-size:10px;font-weight:850}
.ob-mini-avatar.user{background:#fbbf24}
.ob-bubble{max-width:calc(100% - 34px);padding:7px 9px;border-radius:10px;background:rgba(18,38,64,.85);border:1px solid rgba(96,165,250,.12)}
.ob-msg.user .ob-bubble{background:rgba(3,105,161,.55)}
.ob-msg-name{font-size:8.5px;color:#7f9cbb;margin-bottom:2px}
.ob-msg-text{font-size:11px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ob-chatbar{display:flex;gap:6px;margin-top:8px}
.ob-chatbar .ob-input{flex:1}
.ob-chatbar .ob-btn{margin:0;flex:none}
.ob-price{display:flex;align-items:baseline;gap:8px;margin:6px 0 8px}
.ob-price strong{font-size:26px;color:#7dd3fc;letter-spacing:-.03em}
.ob-price small{font-size:9.5px;color:var(--ob-muted)}
.ob-quote-list{display:flex;flex-direction:column;gap:3px;margin:6px 0}
.ob-quote-row{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#a9c0db;padding:4px 6px;border-radius:6px;background:rgba(56,189,248,.035)}
.ob-kv{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:10px;color:var(--ob-muted);margin:9px 0;padding-top:8px;border-top:1px dashed rgba(96,165,250,.15)}
.ob-kv strong{color:#e5f4ff;text-align:right}
.ob-recharge{margin-top:10px;padding:9px;border:1px solid rgba(251,191,36,.28);border-radius:10px;background:rgba(251,191,36,.05)}
.ob-recharge-title{font-size:11px;color:#fde68a;font-weight:750;margin-bottom:4px}
.ob-inline{display:flex;gap:6px;margin-top:6px}
.ob-inline .ob-input{flex:1}
.ob-progress{margin-top:10px;padding-top:9px;border-top:1px dashed rgba(96,165,250,.15)}
.ob-progress-head{display:flex;justify-content:space-between;font-size:10px;color:#b9cee6;margin-bottom:4px}
.ob-bar{height:6px;border-radius:999px;background:rgba(96,165,250,.15);overflow:hidden}
.ob-bar i{display:block;height:100%;background:linear-gradient(90deg,#38bdf8,#818cf8);border-radius:999px;transition:width .5s}
.ob-delivery{margin-top:2px}
.ob-delivery-actions{display:flex;flex-wrap:wrap;gap:6px}
.ob-delivery-extra{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(96,165,250,.15)}
.ob-empty{color:#7189a7;font-size:11px;padding:12px;text-align:center}
.ob-note{padding:7px 8px;border-radius:8px;border:1px solid rgba(96,165,250,.12);margin:5px 0;background:rgba(56,189,248,.03)}
.ob-note.unread{border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.08)}
.ob-note strong{font-size:11px}.ob-note p{font-size:10px;color:var(--ob-muted);margin:3px 0}.ob-note small{font-size:8.5px;color:#68809d}
.ob-modal{position:fixed;inset:0;background:rgba(2,8,16,.72);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(5px)}
.ob-modal-card{width:min(460px,100%);max-height:80vh;overflow:auto;border:1px solid var(--ob-line);border-radius:16px;padding:14px;background:#0b1a2d}
@media (max-width:780px){
  .ob-auth{grid-template-columns:1fr}
  .ob-auth-copy{padding:18px}.ob-auth-copy h1{font-size:23px}
  .ob-auth-qr{padding:16px}.ob-qr-box{width:min(230px,80%)}
  .ob-grid{grid-template-columns:1fr}
  .ob-hero{flex-direction:column}.ob-next{text-align:left;max-width:none}
  .ob-hero h1{font-size:19px}
  .ob-messages{max-height:300px}
  .ob-step{font-size:8.5px;padding:4px 5px}
  .ob-top-actions .ob-wallet{font-size:9.5px}
}

/* 客服入口与工单 */
.ob-support-float{position:fixed;right:18px;bottom:20px;z-index:70;border:1px solid rgba(45,212,191,.45);background:linear-gradient(135deg,rgba(16,185,129,.92),rgba(56,189,248,.9));color:#04101f;border-radius:999px;padding:10px 14px;font:inherit;font-size:12px;font-weight:850;box-shadow:0 12px 28px rgba(0,0,0,.35);cursor:pointer}
.ob-support-float:hover{filter:brightness(1.06)}
.ob-stack{display:flex;flex-direction:column;gap:5px}
.ob-support-thread{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:5px;margin:6px 0}
.ob-support-thread .ob-note p{white-space:pre-wrap}

.ob-qr-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.ob-qr-actions .ob-btn{margin-top:0}

/* ===== 客户接入白天模式 ===== */
html[data-theme="light"] {
  --ob-bg:#f3f7fc; --ob-panel:#ffffff; --ob-line:#d8e3ef; --ob-text:#172b45;
  --ob-muted:#60758f; --ob-accent:#0284c7; --ob-accent2:#6366f1;
}
html[data-theme="light"] body {
  background: radial-gradient(1000px 500px at 12% 0%, rgba(2,132,199,.08), transparent 60%), var(--ob-bg);
  color: var(--ob-text);
}
html[data-theme="light"] .ob-top { background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.8),transparent); }
html[data-theme="light"] .ob-brand, html[data-theme="light"] .ob-brand strong { color:#142a44; }
html[data-theme="light"] .ob-brand small { color:#60758f; }
html[data-theme="light"] .ob-auth-copy, html[data-theme="light"] .ob-auth-qr,
html[data-theme="light"] .ob-bind, html[data-theme="light"] .ob-card,
html[data-theme="light"] .ob-hero, html[data-theme="light"] .ob-modal-card,
html[data-theme="light"] .ob-step, html[data-theme="light"] .ob-note,
html[data-theme="light"] .ob-next {
  background: #ffffff !important; border-color: var(--ob-line) !important; color: var(--ob-text) !important;
  box-shadow: 0 14px 36px rgba(30,64,110,.10);
}
html[data-theme="light"] .ob-auth-copy h1, html[data-theme="light"] .ob-hero h1,
html[data-theme="light"] .ob-card-head h2, html[data-theme="light"] .ob-bind h1 { color:#142a44; }
html[data-theme="light"] .ob-muted, html[data-theme="light"] .ob-hint,
html[data-theme="light"] .ob-bind p, html[data-theme="light"] .ob-auth-copy p { color:#60758f; }
html[data-theme="light"] .ob-auth-step { background:#f7fbff; border-color:#dbe7f3; }
html[data-theme="light"] .ob-input, html[data-theme="light"] input, html[data-theme="light"] select,
html[data-theme="light"] textarea { background:#ffffff !important; color:#172b45 !important; border-color:#c9d8e8 !important; }
html[data-theme="light"] .ob-btn { background:#eff8ff; color:#0369a1; border-color:#bae6fd; }
html[data-theme="light"] .ob-btn.primary { color:#fff; background:linear-gradient(135deg,#0284c7,#6366f1); }
html[data-theme="light"] .ob-btn.ghost { background:#f7fbff; color:#5d7590; }
html[data-theme="light"] .ob-icon { background:#f4f8fc; color:#45617e; border-color:var(--ob-line); }
html[data-theme="light"] .ob-wallet { background:#e0f2fe; color:#0369a1; border-color:#bae6fd; }
html[data-theme="light"] .ob-step { background:#f7fbff; border-color:#dbe7f3; }
html[data-theme="light"] .ob-step.done { background:#ecfdf5; border-color:#a7f3d0; }
html[data-theme="light"] .ob-step.active { background:#e0f2fe; border-color:#7dd3fc; }
html[data-theme="light"] .ob-bubble { background:#f2f7fc !important; border-color:#dbe7f3 !important; color:#1e3a5f; }
html[data-theme="light"] .ob-msg.user .ob-bubble { background:#dff1ff !important; }
html[data-theme="light"] .ob-messages { border-color:#dbe7f3; }
html[data-theme="light"] .ob-price strong { color:#0369a1; }
html[data-theme="light"] .ob-note.unread { background:#e0f2fe; border-color:#7dd3fc; }
html[data-theme="light"] .ob-modal { background:rgba(30,64,110,.28); }
html[data-theme="light"] .ob-toast { background:#fff; color:#0c4a6e; border-color:#bae6fd; }