*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --bg:#FAF8F5; --surface:#FFFFFF; --border:#E0DBD2; --border-s:#EDE8E0;
            --ink:#3D342A; --ink-2:#8A7F72; --ink-3:#C4BCB0;
            --accent:#B09A82; --accent-bg:#F0EBE3; --accent-br:#DDD0B8;
            --green:#8A9A7E; --green-bg:#F0F2EC; --green-br:#C9D4BE;
            --blue:#9AA8B0; --blue-bg:#EFF2F3; --blue-br:#C9D4D9;
            --r:18px; --r-s:12px;
            --font-serif: "Noto Serif SC", "Songti SC", serif;
        }
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500&display=swap');
        html { font-size: 15px; }
        body {
            background: var(--bg); color: var(--ink);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            min-height: 100vh; min-height: 100dvh;
            display: flex; flex-direction: column;
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
        }
        input, textarea, button, select { font-family: inherit; }
        input[type="text"], input[type="email"], textarea { font-size: 16px !important; }
        ::-webkit-scrollbar { display: none; }
        /* 对话页时把body整体锁死不能滚动，所有滚动都发生在.chat-msgs内部——
           这是为了绕开iOS Safari一个经典问题：body本身还能滚动时，position:fixed的元素
           在"回弹"(rubber-band)过程中会跟着手指临时被拖走，松手后有时候会卡在半路上不回位。
           必须同时写明top:0和明确的height——position:fixed在没有top/height约束时，
           实际高度会按内容撑高（不会被限制在一屏内），一旦内容比一屏多出一截，
           那多出来的部分既不在可视区域内、又因为overflow:hidden/滚动被锁死而彻底够不到，
           表现出来就是"内容到一定高度后，最下面一截怎么滑都看不见" */
        body.in-chat { overflow:hidden; position:fixed; top:0; left:0; width:100%; height:100vh; height:100dvh; }

        .hd { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:var(--bg); border-bottom:1px solid var(--border-s); position:sticky; top:0; z-index:100; }
        .hd-logo { font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink); }
        .hd-logo span { color:var(--accent); }
        .hd-tag { font-size:12px; color:var(--ink-3); background:var(--border-s); padding:3px 10px; border-radius:99px; display:none; }

        /* 底部导航 */
        .bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--bg); border-top:.5px solid var(--border-s); display:flex; justify-content:space-around; padding:8px 0 max(8px,env(safe-area-inset-bottom)); z-index:99; max-width:100%; }
        .nav-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 16px; cursor:pointer; }
        .nav-icon { font-size:20px; color:var(--ink-3); }
        .nav-label { font-size:10px; color:var(--ink-3); }
        .nav-item.active .nav-icon { color:var(--accent); }
        .nav-item.active .nav-label { color:var(--accent); }
        /* 对话页和报告页隐藏底部导航 */
        /* 底部导航在登录/注册页隐藏（还没建立身份，这几个tab都无意义），其它页面始终显示 */
        body.in-auth .bottom-nav { display:none; }
        body.in-chat .bottom-nav { display:none; }
        /* 聊天页不显示bottom-nav，main默认预留给它的100px底部留白也就没必要了——
           这100px如果不去掉，会让整体布局比一屏视口多出一截，而聊天页body又是锁死不能滚动的，
           多出来的这一截就会变成"看不见也够不到"的死角，这是"消息到一屏高度后底部内容划不到"的根因 */
        body.in-chat main { padding-bottom:0; }
        main { flex:1; max-width:480px; width:100%; margin:0 auto; padding:0 20px 100px; }

        section { display:none; }
        section.active { display:block; animation:fadeUp .25s ease both; }
        #loading-step.active, #loading-q-step.active, #loading-chat-step.active { display:flex; animation:none; }
        @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

        .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px 20px; }
        .btn { display:block; width:100%; border:none; border-radius:var(--r-s); padding:14px; font-size:14px; font-weight:600; cursor:pointer; letter-spacing:.02em; transition:opacity .15s, transform .1s; }
        .btn:active { opacity:.85; transform:scale(.99); }
        .btn-ink   { background:var(--ink); color:#fff; }
        .btn-green { background:var(--green); color:#fff; }
        .btn-out   { background:transparent; color:var(--ink-2); border:1.5px solid var(--border); }
        .field { width:100%; border:1.5px solid var(--border); border-radius:var(--r-s); padding:13px 16px; background:var(--bg); color:var(--ink); outline:none; transition:border-color .2s, background .2s; resize:vertical; }
        .field:focus { border-color:var(--accent); background:var(--surface); }
        .field::placeholder { color:var(--ink-3); }
        .eyebrow { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
        .display { font-size:24px; font-weight:700; line-height:1.3; color:var(--ink); letter-spacing:-.02em; }
        .body-txt { font-size:14px; line-height:1.75; color:var(--ink-2); margin-top:10px; }

        /* Home：角色轮播首屏 */
        #welcome-step { padding-top:18px; position:relative; }
        #auth-step { padding-top:14vh; }
        .auth-wrap { max-width:360px; margin:0 auto; }
        .auth-logo { font-family:var(--font-serif); font-size:22px; color:var(--ink); text-align:center; margin-bottom:6px; }
        .auth-tagline { font-size:13px; color:var(--ink-3); text-align:center; margin-bottom:32px; }
        .auth-tabs { display:flex; gap:6px; background:var(--surface); border-radius:12px; padding:4px; margin-bottom:22px; }
        .auth-tab { flex:1; text-align:center; padding:9px 0; font-size:13px; font-weight:600; color:var(--ink-3); border-radius:9px; cursor:pointer; transition:all .15s; }
        .auth-tab.active { background:var(--bg); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.06); }
        .auth-panel { display:none; }
        .auth-panel.active { display:block; }
        .auth-hint { font-size:11px; color:var(--ink-3); line-height:1.7; margin-top:12px; text-align:center; }
        .privacy-note { margin-top:28px; }
        .privacy-note-toggle { display:flex; align-items:center; justify-content:center; gap:5px; font-size:11.5px; color:var(--ink-3); cursor:pointer; text-align:center; }
        .privacy-note-body { display:none; font-size:11px; color:var(--ink-3); line-height:1.9; margin-top:10px; padding:14px 16px; background:var(--surface); border:.5px solid var(--border-s); border-radius:var(--r-s); }
        .privacy-note-body.open { display:block; }
        .home-top-prompt { text-align:center; margin-bottom:6px; }
        .home-top-label { font-size:10px; color:var(--accent-br); letter-spacing:2px; margin-bottom:8px; }
        .home-top-text { font-family:var(--font-serif); font-size:19px; color:var(--ink); font-weight:400; line-height:1.6; }
        .home-divider { width:28px; height:1px; background:var(--border); margin:14px auto; }

        .carousel-wrap { width:100%; height:200px; position:relative; display:flex; align-items:center; justify-content:center; }
        .role-card.no-transition, .role-card.no-transition .role-avatar { transition:none !important; }
        .role-card { position:absolute; display:flex; flex-direction:column; align-items:center; transition:all .32s cubic-bezier(.4,0,.2,1); }
        .role-avatar { border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; transition:all .32s cubic-bezier(.4,0,.2,1); background:var(--accent-bg); position:relative; }
        .role-avatar img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
        .role-card.center { z-index:5; top:10px; left:50%; transform:translateX(-50%); }
        .role-card.center .role-avatar {
            width:108px; height:108px; filter:none;
            box-shadow: 0 0 0 2px var(--bg), 0 6px 20px rgba(139,115,85,.22),
                inset 0 0 0 1px rgba(176,154,130,.4), inset 0 3px 6px rgba(0,0,0,.08), inset 0 -2px 3px rgba(255,255,255,.7);
        }
        .role-card.center.matched .role-avatar {
            box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(176,154,130,.55), 0 0 20px rgba(176,154,130,.35),
                0 6px 20px rgba(139,115,85,.22), inset 0 0 0 1px rgba(176,154,130,.4), inset 0 3px 6px rgba(0,0,0,.08), inset 0 -2px 3px rgba(255,255,255,.7);
        }
        .role-play-btn { position:absolute; bottom:6px; right:6px; width:26px; height:26px; border-radius:50%; background:rgba(92,80,67,.85); border:1.5px solid rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; z-index:10; box-shadow:0 2px 8px rgba(0,0,0,.2); }
        .role-play-btn svg { width:10px; height:10px; margin-left:1px; }
        .role-name-tag { margin-top:9px; font-size:13px; color:var(--ink); font-weight:500; letter-spacing:.3px; }
        .role-card.left  { z-index:3; top:42px; left:50%; transform:translateX(calc(-50% - 125px)); }
        .role-card.left  .role-avatar { width:62px; height:62px; filter:blur(.8px) brightness(.85) saturate(.7); opacity:.65; }
        .role-card.right { z-index:3; top:42px; left:50%; transform:translateX(calc(-50% + 125px)); }
        .role-card.right .role-avatar { width:62px; height:62px; filter:blur(.8px) brightness(.85) saturate(.7); opacity:.65; }
        .role-card.back  { z-index:1; top:56px; left:50%; transform:translateX(-50%); }
        .role-card.back  .role-avatar { width:38px; height:38px; filter:blur(2px) brightness(.7) saturate(.5); opacity:.3; }

        .role-info { text-align:center; padding:0 16px; margin-bottom:4px; min-height:64px; }
        .role-info-name { font-family:var(--font-serif); font-size:15px; color:var(--ink); font-weight:500; margin-bottom:5px; }
        .role-info-desc { font-size:11px; color:var(--ink-2); line-height:1.7; }
        .role-info-tag { display:inline-block; background:var(--accent-bg); border:.5px solid var(--border); color:var(--ink-2); font-size:10px; padding:3px 12px; border-radius:20px; margin-top:7px; letter-spacing:.5px; }
        .role-info-tag.matched { background:#E8DCC8; border-color:#C9B393; color:#7A6448; }

        .dots { display:flex; gap:5px; justify-content:center; margin:10px 0 12px; }
        .dot { width:5px; height:5px; border-radius:50%; background:var(--border); transition:all .3s; }
        .dot.active { width:18px; border-radius:3px; background:var(--accent); }

        .smart-hint { display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 12px; padding:8px 14px; background:rgba(176,154,130,.08); border:.5px solid rgba(176,154,130,.18); border-radius:14px; transition:all .3s; color:var(--ink-2); }
        .smart-hint.matching { background:rgba(176,154,130,.14); border-color:rgba(176,154,130,.3); }
        .smart-hint-icon { width:13px; height:13px; flex-shrink:0; }
        .smart-hint-icon.spin { animation:spinIcon 1s linear infinite; }
        @keyframes spinIcon { from{transform:rotate(0)} to{transform:rotate(360deg)} }
        .smart-hint-text { font-size:11px; line-height:1.5; }
        .smart-hint-text b { color:var(--accent); font-weight:500; }

        .home-input-wrap { background:var(--surface); border:.5px solid var(--border); border-radius:20px; padding:11px 14px; display:flex; align-items:center; gap:8px; box-shadow:0 1px 8px rgba(0,0,0,.04); }
        .home-input-field { flex:1; border:none; outline:none; background:none; font-size:14px; font-family:inherit; color:var(--ink); resize:none; min-height:40px; max-height:110px; line-height:20px; padding:10px 0; overflow-y:auto; }
        .home-input-field::placeholder { color:var(--ink-3); }
        .home-voice-btn { width:30px; height:30px; border-radius:50%; border:.5px solid var(--border); background:var(--bg); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; color:var(--ink-2); }
        #home-input.recording { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-bg); }
        .voice-row .field.recording, #situation-input.recording { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-bg); animation:pulse .8s ease-in-out infinite; }
        #chat-input.recording { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-bg); animation:pulse .8s ease-in-out infinite; }
        .home-send-btn { width:30px; height:30px; border-radius:50%; background:var(--accent); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }



        /* Situation：选定角色后的描述页 */
        #situation-step { padding-top:20px; }
        .sit-header { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
        .sit-back { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--ink-2); cursor:pointer; flex-shrink:0; }
        .sit-avatar { width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--accent-bg); flex-shrink:0; box-shadow:0 0 0 1px var(--bg), inset 0 1px 2px rgba(0,0,0,.06); }
        .sit-avatar img { width:100%; height:100%; object-fit:cover; object-position:top center; }
        .sit-header-name { font-size:14px; font-weight:500; color:var(--ink); }
        .sit-header-tag { font-size:11px; color:var(--ink-3); }
        .char-count { font-size:11px; color:var(--ink-3); text-align:right; margin-top:4px; }
        .example-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
        .chip { font-size:11px; color:var(--ink-3); background:var(--border-s); border:1px solid var(--border); border-radius:99px; padding:4px 10px; cursor:pointer; transition:all .15s; }
        .chip:active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent-br); }
        .voice-row { display:flex; gap:8px; align-items:flex-start; }
        .voice-btn { flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; transition:all .2s; margin-top:0; }
        @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

        /* Questions */
        #question-step { padding-top:20px; }
        .prog-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
        .prog-lbl { font-size:12px; color:var(--ink-3); }
        .prog-track { height:2px; background:var(--border); border-radius:99px; overflow:hidden; margin-bottom:18px; }
        .prog-fill  { height:100%; background:var(--accent); border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
        .q-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px 20px; }
        .q-title { font-size:15px; font-weight:600; line-height:1.65; color:var(--ink); margin-bottom:14px; }
        .opts { display:flex; flex-direction:column; gap:8px; }
        .opt { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--r-s); cursor:pointer; font-size:13.5px; color:var(--ink-2); line-height:1.5; transition:border-color .12s, background .12s, color .12s; }
        .opt:active { background:var(--accent-bg); }
        .opt.on { border-color:var(--accent); background:var(--accent-bg); color:var(--ink); font-weight:500; }
        .opt-circle { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .12s; }
        .opt-square { width:18px; height:18px; border-radius:4px; border:1.5px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .12s; }
        .opt.on .opt-circle, .opt.on .opt-square { background:var(--accent); border-color:var(--accent); }
        .opt-dot { width:6px; height:6px; border-radius:50%; background:white; display:none; }
        .opt-check { font-size:10px; color:white; display:none; }
        .opt.on .opt-dot, .opt.on .opt-check { display:block; }
        .other-input { display:none; margin-top:8px; }
        .other-input.on { display:block; }
        .q-hint { font-size:11px; color:var(--ink-3); margin-bottom:10px; }
        .nav { display:flex; gap:10px; margin-top:12px; }
        .btn-back { background:transparent; border:1.5px solid var(--border); border-radius:var(--r-s); padding:13px 16px; font-size:13px; color:var(--ink-2); cursor:pointer; white-space:nowrap; display:none; transition:border-color .2s; }
        .btn-back.on { display:block; }
        .btn-next { flex:1; background:var(--ink); color:white; border:none; border-radius:var(--r-s); padding:14px; font-size:14px; font-weight:600; cursor:pointer; letter-spacing:.02em; transition:opacity .15s, transform .1s, background .3s; }
        .btn-next:active { opacity:.85; transform:scale(.99); }
        .btn-next.last { background:var(--green); }

        /* Chat */
        #chat-step.active { display:flex; flex-direction:column; height:calc(100vh - var(--header-h, 50px)); height:calc(100dvh - var(--header-h, 50px)); padding-top:14px; overflow:hidden; }
        .chat-header { display:flex; align-items:center; gap:10px; padding:10px 0 14px; border-bottom:.5px solid var(--border-s); margin-bottom:14px; }
        .chat-back { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--ink-2); cursor:pointer; flex-shrink:0; }
        .chat-header-avatar { width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--accent-bg); flex-shrink:0; box-shadow:0 0 0 1px var(--bg), inset 0 1px 2px rgba(0,0,0,.06); }
        .chat-header-avatar img { width:100%; height:100%; object-fit:cover; object-position:top center; }
        .chat-header-name { font-size:13px; color:var(--ink); font-weight:500; }
        .chat-header-tag { font-size:10px; color:var(--ink-3); }

        .chat-msgs { flex:1; display:flex; flex-direction:column; gap:14px; padding-bottom:130px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
        .bubble-row { display:flex; gap:8px; align-items:flex-end; }
        .bubble-row.user { justify-content:flex-end; }
        .bubble-row.ai { justify-content:flex-start; }
        .bubble-avatar { width:26px; height:26px; border-radius:50%; overflow:hidden; background:var(--accent-bg); flex-shrink:0; }
        .bubble-avatar img { width:100%; height:100%; object-fit:cover; object-position:top center; }
        .bubble { max-width:78%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.7; white-space:pre-wrap; }
        .bubble.ai { background:var(--surface); color:var(--ink); border:.5px solid var(--border-s); border-bottom-left-radius:4px; }
        .bubble.user { background:var(--accent); color:#fff; border-bottom-right-radius:4px; }

        .typing-indicator { display:flex; gap:4px; padding:12px 14px; background:var(--surface); border:.5px solid var(--border-s); border-radius:16px; border-bottom-left-radius:4px; width:fit-content; }
        .typing-dot { width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:typingBounce 1.2s infinite; }
        .typing-dot:nth-child(2) { animation-delay:.15s; }
        .typing-dot:nth-child(3) { animation-delay:.3s; }
        @keyframes typingBounce { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-4px);opacity:1} }

        .chat-bottom-area {
            position:fixed; left:50%; transform:translateX(-50%); bottom:var(--kb-offset,0px);
            width:100%; max-width:480px; box-sizing:border-box;
            padding:10px 20px calc(10px + env(safe-area-inset-bottom));
            background:rgba(250,248,245,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
            border-top:.5px solid var(--border-s); z-index:50;
        }
        #chat-step:not(.active) .chat-bottom-area { display:none; }
        .chat-disclaimer { text-align:center; padding:10px 0 4px; font-size:10.5px; color:var(--ink-3); letter-spacing:.03em; }

        .chat-input-row { display:flex; gap:8px; align-items:flex-end; }
        .chat-input-wrap { flex:1; position:relative; }
        .chat-input { width:100%; border:1.5px solid var(--border); border-radius:var(--r-s); padding:11px 14px; background:var(--surface); color:var(--ink); outline:none; font-size:15px; resize:none; min-height:44px; max-height:140px; line-height:19px; overflow-y:auto; transition:border-color .2s; }
        .chat-input::placeholder { color:var(--ink-3); }
        .chat-input:focus { border-color:var(--accent); }
        .chat-send { width:40px; height:40px; border-radius:50%; background:var(--accent); border:none; color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; transition:opacity .15s; }
        .chat-send:active { opacity:.8; }
        .chat-voice { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; transition:all .2s; }

        .note-entry-row { display:none; justify-content:center; padding:10px 0 6px; }
        .note-entry-row.show { display:flex; }
        .note-entry { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2);
            padding:8px 18px; border:1px solid var(--accent-br); border-radius:20px;
            background:var(--accent-bg); cursor:pointer; font-weight:500; }
        .note-entry svg { width:12px; height:12px; stroke:var(--accent); flex-shrink:0; }
        .note-entry:active { opacity:.75; }

        /* Role video overlay */
        .video-overlay { position:fixed; inset:0; background:rgba(61,52,42,.75); backdrop-filter:blur(4px); z-index:1000;
            display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; animation:fadeUp .2s ease both; }
        .video-overlay-circle { width:220px; height:220px; border-radius:50%; overflow:hidden;
            box-shadow:0 0 0 3px rgba(250,248,245,.9), 0 12px 40px rgba(0,0,0,.4),
            inset 0 0 0 1px rgba(176,154,130,.5), inset 0 4px 8px rgba(0,0,0,.15); }
        .video-overlay-circle video { width:100%; height:100%; object-fit:cover; }
        .video-overlay-hint { font-size:12px; color:rgba(255,255,255,.7); letter-spacing:.5px; }

        /* Loading */
        #loading-step, #loading-q-step, #loading-chat-step {
            padding-top:80px; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; min-height:60vh;
        }
        .ring { width:32px; height:32px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--accent); animation:spin .8s linear infinite; }
        @keyframes spin { to{ transform:rotate(360deg); } }

        /* Report — swipeable cards */
        #report-step { padding-top:16px; padding-bottom:76px; }
        #history-step { padding-top:16px; padding-bottom:76px; }
        #memory-step { padding-top:16px; padding-bottom:76px; }
        #me-step { padding-top:16px; padding-bottom:76px; }
        .memory-item { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:.5px solid var(--border-s); border-radius:var(--r-s); padding:13px 16px; margin-bottom:10px; }
        .memory-item-text { font-size:13px; color:var(--ink); line-height:1.6; }
        .memory-item-del { flex-shrink:0; background:none; border:none; color:var(--ink-3); font-size:12px; cursor:pointer; padding:4px 8px; }
        .memory-item-del:active { color:var(--red,#C0503E); }
        .me-list-btn { width:100%; text-align:left; background:none; border:none; padding:10px 0; font-size:14px; color:var(--ink); cursor:pointer; display:block; }
        .history-item { background:var(--surface); border:.5px solid var(--border-s); border-radius:var(--r-s); padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:border-color .15s; }
        .history-item:active { border-color:var(--accent); }
        .history-item-top { display:flex; justify-content:space-between; align-items:center; }
        .history-item-cat { font-size:13px; font-weight:600; color:var(--ink); }
        .history-item-date { font-size:11px; color:var(--ink-3); }
        .history-item-sub { font-size:12px; color:var(--ink-2); margin-top:4px; }
        .history-empty { text-align:center; color:var(--ink-3); font-size:13px; padding:70px 20px; line-height:1.8; }
        .rpt-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
        .rpt-nav-title { font-size:13px; font-weight:600; color:var(--ink); }
        .rpt-nav-meta  { font-size:11px; color:var(--ink-3); }
        .rpt-menu-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:700; color:var(--ink-2); cursor:pointer; letter-spacing:1px; }
        .rpt-menu-btn:active { background:var(--border-s); }
        .rpt-menu { display:none; position:absolute; top:44px; right:20px; background:var(--surface); border:.5px solid var(--border-s); border-radius:var(--r-s); box-shadow:0 4px 20px rgba(0,0,0,.1); z-index:80; overflow:hidden; min-width:150px; }
        .rpt-menu.open { display:block; }
        .rpt-menu-item { padding:13px 16px; font-size:13px; color:var(--ink); cursor:pointer; white-space:nowrap; }
        .rpt-menu-item:active { background:var(--border-s); }
        .rpt-menu-item + .rpt-menu-item { border-top:.5px solid var(--border-s); }
        .rpt-dots { display:flex; gap:5px; justify-content:center; margin-bottom:14px; }
        .rpt-dot { width:6px; height:6px; border-radius:50%; background:var(--border); transition:all .3s; }
        .rpt-dot.on { background:var(--accent); width:18px; border-radius:3px; }
        .cards-viewport { overflow:hidden; border-radius:var(--r); }
        .cards-track { display:flex; transition:transform .35s cubic-bezier(.4,0,.2,1); }
        .rpt-card { min-width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px 20px; }
        .rpt-card-label { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
        .swipe-hint { text-align:center; font-size:11px; color:var(--ink-3); margin:10px 0 14px; }
        .rpt-card-nav { display:flex; gap:8px; margin-top:12px; }
        .rpt-card-nav button { flex:1; padding:11px; border-radius:var(--r-s); border:1.5px solid var(--border); background:transparent; color:var(--ink-2); font-size:13px; cursor:pointer; }
        .rpt-card-nav button.primary { background:var(--ink); color:white; border-color:var(--ink); font-weight:600; }

        /* Report content styles */
        .rpt-card-content { font-size:14px; line-height:1.8; color:var(--ink-2); }
        .rpt-card-content h3 { font-size:14px; font-weight:700; color:var(--ink); margin:16px 0 6px; }
        .rpt-card-content h3:first-child { margin-top:0; }
        .rpt-card-content p { margin-bottom:8px; }
        .rpt-card-content strong { color:var(--ink); }
        .rpt-card-content table.rpt-table { width:100%; border-collapse:collapse; font-size:12px; margin:10px 0; }
        .rpt-card-content table.rpt-table th { background:var(--border-s); color:var(--ink); font-weight:600; padding:8px 10px; text-align:left; }
        .rpt-card-content table.rpt-table td { padding:8px 10px; border-bottom:1px solid var(--border-s); color:var(--ink-2); vertical-align:top; }
        .rpt-card-content .rpt-section { margin-bottom:4px; }
        .rpt-card-content .action-box { background:var(--green-bg); border:1px solid var(--green-br); border-radius:var(--r-s); padding:14px; margin-top:8px; }
        .rpt-card-content .action-box h3 { color:var(--green); }
        .rpt-card-content .warn-box { background:#FEF9EC; border:1px solid #F5E0A0; border-radius:var(--r-s); padding:14px; margin-top:8px; }
        .rpt-card-content .warn-box h3 { color:#B45309; }
        .rpt-card-content .blind-box { background:var(--blue-bg); border:1px solid var(--blue-br); border-radius:var(--r-s); padding:14px; margin-top:8px; }
        .rpt-card-content .blind-box h3 { color:var(--blue); }

        /* Continue asking */
        .followup-wrap { margin-top:12px; }
        .followup-label { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
        .followup-input-row { display:flex; gap:8px; align-items:flex-end; }
        .followup-input { flex:1; border:1.5px solid var(--border); border-radius:var(--r-s); padding:11px 14px; background:var(--surface); color:var(--ink); outline:none; font-size:14px; resize:none; transition:border-color .2s; }
        .followup-input:focus { border-color:var(--accent); }
        .followup-send { width:40px; height:40px; border-radius:50%; background:var(--accent); border:none; color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
        .followup-msgs { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
        .fmsg { font-size:13px; line-height:1.7; padding:10px 14px; border-radius:12px; }
        .fmsg-q { background:var(--accent-bg); color:var(--ink); border-radius:4px 12px 12px 12px; }
        .fmsg-a { background:var(--surface); border:1px solid var(--border); color:var(--ink-2); border-radius:12px 4px 12px 12px; }

        /* Feedback & footer */
        .burn { text-align:center; font-size:12px; color:var(--ink-3); padding:14px; background:var(--bg); border:1px dashed var(--border); border-radius:var(--r-s); line-height:1.7; margin-top:12px; }
        .burn strong { color:var(--accent); }
        .burn-btn { background:none; border:none; font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; display:inline-block; }
        .fb-card { margin-top:12px; }
        .fb-label { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:4px; }
        .fb-sub   { font-size:12px; color:var(--ink-3); margin-bottom:10px; line-height:1.6; }
        .fb-row   { display:flex; gap:8px; align-items:center; margin-top:8px; }
        .fb-btn   { background:var(--ink); color:white; border:none; border-radius:8px; padding:9px 16px; font-size:12px; font-weight:600; cursor:pointer; }
        .fb-choice { flex:1; background:var(--surface); border:.5px solid var(--border-s); border-radius:10px; padding:11px 0; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; text-align:center; transition:all .15s; }
        .fb-choice:active { transform:scale(0.97); }
        .fb-choice.chosen { background:var(--accent); color:white; border-color:var(--accent); }
        .fb-choice.dimmed { opacity:0.4; }
        .fb-ok    { font-size:12px; color:var(--green); display:none; }
        .restart-btn { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-s); padding:14px; margin-top:14px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; text-align:center; }
        .restart-btn:active { background:var(--border-s); }

        /* Overlay */
        .overlay { display:none; position:fixed; inset:0; background:rgba(28,25,23,.5); z-index:200; align-items:flex-end; justify-content:center; }
        .overlay.on { display:flex; }
        .sheet { background:var(--surface); border-radius:20px 20px 0 0; padding:28px 24px 44px; width:100%; max-width:480px; max-height:85vh; overflow-y:auto; box-sizing:border-box; }
        .quote-option-loading { text-align:center; font-size:13px; color:var(--ink-3); padding:30px 0; }
        .quote-option { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-s); padding:13px 16px; margin-bottom:10px; font-size:14px; line-height:1.6; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s; }
        .quote-option:active { background:var(--accent-bg); }
        .quote-option.selected { border-color:var(--accent); background:var(--accent-bg); font-weight:600; }
        .quote-refresh-link { text-align:center; font-size:12px; color:var(--accent); cursor:pointer; padding:6px 0 18px; }
        .quote-custom-label { font-size:12px; color:var(--ink-3); margin-bottom:8px; }
        .profile-label { display:block; font-size:12px; color:var(--ink-2); margin-bottom:6px; font-weight:500; }
        .sheet-title { font-size:18px; font-weight:700; color:var(--ink); text-align:center; margin-bottom:6px; }
        .sheet-sub   { font-size:13px; color:var(--ink-3); text-align:center; line-height:1.65; margin-bottom:20px; }

        /* Admin */
        #admin-step { padding-top:24px; }
        .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .stat-cell { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-s); padding:16px; text-align:center; }
        .stat-n { font-size:24px; font-weight:700; color:var(--accent); }
        .stat-l { font-size:11px; color:var(--ink-3); margin-top:2px; }