:root{--navy: #1F3A5F;--navy-deep: #16293F;--teal: #0F6E56;--teal-light: #E1F2EC;--amber: #8C5A12;--amber-light: #FBF0DC;--paper: #FAF8F3;--card: #FFFFFF;--ink: #2B2B28;--ink-soft: #5B5A54;--ink-faint: #8C8B84;--line: #E4E0D5;--line-strong: #D3CDBB;--danger: #9A3412;--danger-bg: #FCEADF;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:Noto Sans SC,PingFang SC,sans-serif;-webkit-tap-highlight-color:transparent}#root{max-width:560px;margin:0 auto;min-height:100vh;background:var(--paper);position:relative}h1,h2,h3,.serif{font-family:"Noto Serif SC",serif;color:var(--navy);font-weight:700;margin:0}button{font-family:inherit}a{color:inherit;text-decoration:none}.page{padding:20px 20px calc(96px + var(--safe-bottom));min-height:100vh}.page-no-nav{padding:20px 20px calc(24px + var(--safe-bottom));min-height:100vh}.top-bar{display:flex;align-items:center;gap:8px;padding:calc(14px + var(--safe-top)) 16px 14px;position:sticky;top:0;background:var(--paper);z-index:10;border-bottom:1px solid var(--line)}.top-bar .back{font-size:20px;color:var(--navy);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}.top-bar .back:active{background:var(--line)}.top-bar h1{font-size:17px;flex:1}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:999px;padding:13px 22px;font-size:15.5px;font-weight:500;cursor:pointer}.btn-primary{background:var(--navy);color:#fff}.btn-primary:active{background:var(--navy-deep)}.btn-teal{background:var(--teal);color:#fff}.btn-outline{background:transparent;color:var(--navy);border:1px solid var(--line-strong)}.btn-block{width:100%}.btn:disabled{opacity:.5}input,textarea,select{font-family:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink);width:100%}input:focus,textarea:focus{outline:2px solid var(--teal-light);border-color:var(--teal)}.audio-progress{-moz-appearance:none;appearance:none;-webkit-appearance:none;height:18px;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}.audio-progress:focus{outline:none;border:0}.audio-progress::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--navy) 0,var(--navy) var(--audio-progress),var(--line-strong) var(--audio-progress),var(--line-strong) 100%)}.audio-progress::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--navy)}.audio-progress::-moz-range-track{height:4px;border-radius:999px;background:var(--line-strong)}.audio-progress::-moz-range-progress{height:4px;border-radius:999px;background:var(--navy)}.audio-progress::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--navy)}.field{margin-bottom:16px}.field label{display:block;font-size:13px;color:var(--ink-faint);margin-bottom:6px}.badge{display:inline-block;font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--teal-light);color:var(--teal)}.badge-amber{background:var(--amber-light);color:var(--amber)}.empty-state{text-align:center;color:var(--ink-faint);padding:60px 20px;font-size:14.5px}.bottom-nav{position:fixed;left:50%;transform:translate(-50%);bottom:0;width:100%;max-width:560px;background:#faf8f3f0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;padding-bottom:var(--safe-bottom);z-index:20}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 8px;color:var(--ink-faint);font-size:11px}.bottom-nav a.active{color:var(--teal)}.bottom-nav .icon{font-size:21px;line-height:1}.spin{animation:spin 1s linear infinite;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-bottom));transform:translate(-50%);background:#2b2b28eb;color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;z-index:100;max-width:80%;text-align:center}