:root { --taro:#b8a9c9; --sakura:#f8c8dc; --peach:#fbd9c9; --ink:#4a3b52; --muted:#7a6b83; --deep:#6f5b86; --rose:#c7739a; --glass:rgba(255,255,255,.56); --line:rgba(255,255,255,.76); --font:ui-rounded,"SF Pro Rounded","Yuanti SC","YouYuan","PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { width:390px; margin:0; overflow-x:hidden; color:var(--ink); font:14px/1.5 var(--font); background:linear-gradient(160deg,#fbf7fa,#f6eff6 50%,#fbf2f6); }
.panel { position:relative; padding:16px 18px 14px; }
.topbar { display:flex; justify-content:space-between; align-items:center; }
.topbar strong { font-size:15px; font-weight:800; letter-spacing:.02em; }
.local-badge { padding:4px 9px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.44); color:var(--deep); font-size:11px; font-weight:800; }
.local-only-note { margin:7px 2px 0; color:var(--rose); font-size:11px; font-weight:700; }
.cards { display:grid; gap:10px; margin-top:14px; }
.card,.drawer { border:1px solid var(--line); border-radius:16px; background:var(--glass); backdrop-filter:blur(16px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(111,91,134,.1); }
.card { min-width:0; padding:12px 14px; }
.capability-card,.advanced-model { display:flex; flex-direction:column; gap:6px; }
.card-label { display:block; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; }
.card-value { display:block; margin-top:3px; color:var(--deep); font-size:16px; font-weight:800; overflow-wrap:anywhere; }
.card-state { display:flex; align-items:center; gap:5px; min-height:17px; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.auto-translate-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 12px; min-height:54px; margin-top:10px; padding:9px 14px; border:1px solid var(--line); border-radius:16px; background:var(--glass); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(111,91,134,.08); }
.auto-translate-copy { display:grid; gap:1px; margin-right:auto; cursor:pointer; }
.auto-translate-copy strong { color:var(--deep); font-size:13px; }
.auto-translate-copy small { color:var(--muted); font-size:11px; }
.toggle-control { position:relative; display:inline-flex; flex:0 0 auto; align-items:center; cursor:pointer; }
.toggle-input { position:absolute; width:1px; height:1px; opacity:0; }
.toggle-track { position:relative; display:block; width:44px; height:24px; border-radius:999px; background:rgba(122,107,131,.35); transition:.25s ease; }
.toggle-track::after { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(74,59,82,.2); content:""; transition:.25s ease; }
.toggle-input:checked + .toggle-track { background:linear-gradient(120deg,var(--deep),var(--rose)); }
.toggle-input:checked + .toggle-track::after { transform:translateX(20px); }
.toggle-input:focus-visible + .toggle-track { outline:3px solid rgba(199,115,154,.7); outline-offset:2px; }
.compact-action { min-height:30px; padding:0 10px; font-size:11px; }
.auto-translate-row progress { width:100%; }
.button { width:100%; min-height:46px; margin-top:12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.38); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 22px rgba(111,91,134,.12); font:800 14px var(--font); cursor:pointer; transition:.35s ease; }
.button:hover,.button.active { background:linear-gradient(120deg,var(--taro),var(--sakura)); color:#fff; box-shadow:0 14px 30px rgba(199,115,154,.35); transform:translateY(-1px); }
.button:disabled { cursor:wait; opacity:.7; }
.capture-notice { margin:8px 4px 0; color:var(--muted); font-size:11px; line-height:1.45; }
.advanced-model { padding:10px 0; border-top:1px solid rgba(111,91,134,.14); }
.advanced-model:first-child { border-top:0; padding-top:0; }
.advanced-model > span { color:var(--muted); font-size:11px; }
.model-notice { min-height:16px; margin:0; color:var(--rose); font-size:11px; }
.drawer { margin-top:10px; padding:0 14px; }
.drawer summary { display:flex; justify-content:space-between; align-items:center; padding:12px 2px; font-weight:800; cursor:pointer; list-style:none; }
.drawer summary::-webkit-details-marker { display:none; }
.drawer-content { display:grid; gap:9px; padding:0 2px 13px; color:var(--muted); font-size:12px; }
.drawer-content label { display:grid; gap:4px; font-weight:700; }
.drawer-content select,.drawer-content input { width:100%; min-height:34px; border:1px solid rgba(111,91,134,.18); border-radius:10px; background:rgba(255,255,255,.55); padding:6px 9px; color:var(--ink); font:13px var(--font); }
.drawer-content input[type="range"] { min-height:auto; padding:0; accent-color:var(--rose); }
.drawer-content output { justify-self:end; margin-top:-20px; color:var(--deep); font-weight:800; }
.sub-button { min-height:36px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.42); color:var(--ink); font:800 13px var(--font); cursor:pointer; transition:.25s ease; }
.sub-button:hover { background:linear-gradient(120deg,var(--taro),var(--sakura)); color:#fff; }
.notice { min-height:16px; margin:0; color:var(--rose); }
footer { margin-top:12px; text-align:center; color:var(--muted); font-size:11px; }
.diagnostics { margin:0 0 12px; max-height:120px; overflow:auto; white-space:pre-wrap; word-break:break-all; color:var(--muted); font:10px/1.45 ui-monospace,Consolas,monospace; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid rgba(199,115,154,.7); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
