/* ════════════════════════════════════════════════════════════════
   MediVoX Check — app.css
   ブランド変数 + Check固有スタイル
   ════════════════════════════════════════════════════════════════ */

:root {
  --bg:#f0f4f8; --surface:#fff; --surface2:#f8fafc; --surface3:#edf2f7;
  --accent:#1a56db; --accent-rgb:26,86,219; --accent2-rgb:124,58,237;
  --green:#0e9f6e; --yellow:#d97706; --red:#e02424;
  --text:#111827; --text-dim:#6b7280; --border:#e5e7eb;
  --glow:0 0 24px rgba(26,86,219,0.12);
  --header-bg:var(--accent);
  --shadow:0 2px 8px rgba(0,0,0,.07); --shadow-lg:0 8px 32px rgba(0,0,0,.11);
}
:root[data-theme="dark"] {
  --bg:#0a0e1a; --surface:#111827; --surface2:#1a2235; --surface3:#222d42;
  --accent:#5ba3e8; --accent-rgb:91,163,232; --accent2-rgb:124,58,237;
  --text:#f0f2ff; --text-dim:#9dafc8; --border:#2a3250;
  --glow:0 0 24px rgba(91,163,232,0.15);
  --header-bg:#1a3a62;
  --shadow:0 2px 8px rgba(0,0,0,.4); --shadow-lg:0 8px 32px rgba(0,0,0,.6);
}

/* Check は light-first なのでグリッド背景は dark 時のみ */
body::before { background-image: none; }
[data-theme="dark"] body::before {
  background-image:
    linear-gradient(rgba(var(--accent-rgb),.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),.025) 1px, transparent 1px);
}

/* ── Check固有: ヘッダーボタン（白色） ── */
/* light mode: ヘッダーが accent 色 → ボタンは白ベース */
.hbtn { background:rgba(255,255,255,.15); border:none; color:#fff; }
.hbtn:hover { background:rgba(255,255,255,.28); border:none; color:#fff; }
[data-theme="dark"] .hbtn { background:var(--surface2); border:1px solid var(--border); color:var(--text-dim); }
[data-theme="dark"] .hbtn:hover { border-color:rgba(var(--accent-rgb),.4); color:var(--accent); }

/* ── 接続バー ── */
.conn-bar { background:#fff;border-bottom:1px solid var(--border);padding:7px 14px;display:flex;align-items:center;justify-content:space-between }
[data-theme="dark"] .conn-bar { background:var(--surface);border-color:var(--border) }
.conn-status { display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-dim) }
.conn-dot    { width:7px;height:7px;border-radius:50%;background:#e5e7eb }
.conn-dot.active { background:var(--green);animation:blink 2s infinite }
.conn-open-btn { font-size:11px;color:var(--accent);background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.2);border-radius:6px;padding:4px 10px;cursor:pointer;font-family:'Space Mono',monospace;letter-spacing:.3px }

/* ── Check固有: lang-bar / mode-tabs ── */
.lang-bar { background:#fff;border-bottom:2px solid var(--border) }
[data-theme="dark"] .lang-bar { background:var(--surface);border-color:var(--border) }

/* Check の lang-btn はデフォルトで白背景に text */
.lang-btn { border-radius: 20px; border: 1.5px solid var(--border); background: transparent; color: var(--text-dim); }
.lang-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* ── Check固有: モードタブ（白ベース）── */
.mod-bar { background:#fff;border-radius:10px;padding:3px;border:1px solid var(--border);margin-bottom:12px;box-shadow:var(--shadow); border-bottom:1px solid var(--border); }
[data-theme="dark"] .mod-bar { background:var(--surface);border-color:var(--border) }
.mod-tab { flex:1;border-radius:8px;border:none;background:transparent;color:var(--text-dim);font-size:11px;min-height:unset;padding:8px 5px;display:flex;align-items:center;justify-content:center;gap:4px; }
.mod-tab.active { background:var(--accent);color:#fff;border:none;box-shadow:none; }
[data-theme="dark"] .mod-tab.active { background:var(--accent);color:#fff; }

/* ── Check固有: ロゴ ── */
.logo-icon { width:30px;height:30px;background:rgba(255,255,255,.2);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:16px }
.logo-text { color:#fff;font-weight:700;font-size:14px;white-space:nowrap }
.logo-sub  { color:rgba(255,255,255,.65);font-size:9px;font-family:'Space Mono',monospace;letter-spacing:.5px }
.header-btns { display:flex;gap:7px }

/* ── Check固有: カードタイプ ── */
.kp-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px }
.kp-card  { background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:14px 12px;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);text-align:left }
.kp-card:hover { border-color:rgba(var(--accent-rgb),.4);box-shadow:0 4px 16px rgba(var(--accent-rgb),.1) }
.kp-card:active { transform:scale(.97) }
.kp-icon  { font-size:24px;margin-bottom:8px }
.kp-label { font-size:12px;font-weight:700;color:var(--text);margin-bottom:4px }
.kp-sub   { font-size:10px;color:var(--text-dim);line-height:1.5 }

/* ── Check固有: ステージカード ── */
.stage-card { background:var(--surface);border:1.5px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow) }
.stage-head { display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none }
.stage-num  { width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.stage-title { font-size:13px;font-weight:700;color:var(--text);flex:1 }
.stage-arrow { font-size:12px;color:var(--text-dim);transition:transform .2s }
.stage-card.open .stage-arrow { transform:rotate(180deg) }
.stage-body  { display:none;padding:0 14px 14px;border-top:1px solid var(--border) }
.stage-card.open .stage-body { display:block }

/* ── Check固有: 患者選択グリッド ── */
.patient-select-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px }
.patient-select-btn  { padding:10px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface2);color:var(--text-dim);cursor:pointer;font-size:11px;transition:all .2s;text-align:center }
.patient-select-btn:hover  { border-color:rgba(var(--accent-rgb),.35);color:var(--text) }
.patient-select-btn.active { background:rgba(var(--accent-rgb),.08);border-color:var(--accent);color:var(--accent);font-weight:700 }

/* ── Check固有: スクロールmain ── */
.main { flex:1;overflow-y:auto;padding:12px 14px 16px }
.app  { max-width:520px;min-height:100vh;display:flex;flex-direction:column }

/* ── 移行済みインラインスタイル ── */
.header{background:var(--header-bg);padding:11px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 10px rgba(26,86,219,.3);position:sticky;top:0;z-index:50}
.logo{display:flex;align-items:center;gap:9px}
.logo-icon{width:30px;height:30px;background:rgba(255,255,255,.2);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:16px}
.logo-text{color:#fff;font-weight:700;font-size:14px;white-space:nowrap}
.logo-sub{color:rgba(255,255,255,.65);font-size:9px;font-family:'Space Mono',monospace;letter-spacing:.5px}
.header-btns{display:flex;gap:7px}
.hbtn{background:rgba(255,255,255,.15);border:none;border-radius:7px;width:32px;height:32px;cursor:pointer;color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .18s}
.hbtn:hover{background:rgba(255,255,255,.25)}


.conn-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:7px 14px;display:flex;align-items:center;justify-content:space-between}
.conn-status{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-dim)}
.conn-dot{width:7px;height:7px;border-radius:50%;background:#e5e7eb}
.conn-dot.active{background:var(--green);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.conn-open-btn{font-size:11px;color:var(--accent);background:rgba(26,86,219,.07);border:1px solid rgba(26,86,219,.2);border-radius:6px;padding:4px 10px;cursor:pointer;font-family:'Space Mono',monospace;letter-spacing:.3px}


.lang-bar{background:var(--surface);border-bottom:2px solid var(--border);padding:7px 12px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;align-items:center;flex-shrink:0}
.lang-bar::-webkit-scrollbar{display:none}
.lang-lbl{font-size:9px;color:var(--text-dim);font-family:'Space Mono',monospace;white-space:nowrap;letter-spacing:1px;flex-shrink:0}
.lang-btn{flex-shrink:0;padding:5px 10px;border-radius:20px;border:1.5px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;font-size:11.5px;transition:all .18s}
.lang-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.lang-btn.no-audio::after{content:'🔇';font-size:8px;margin-left:2px}


.main{flex:1;overflow-y:auto;padding:12px 14px 16px}


.mode-tabs{display:flex;gap:0;background:var(--surface);border-radius:10px;padding:3px;border:1px solid var(--border);margin-bottom:12px;box-shadow:var(--shadow)}
.mode-tab{flex:1;padding:8px 5px;border-radius:8px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:11px;font-weight:600;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:4px}
.mode-tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(26,86,219,.25)}


.stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.stage-card{background:var(--surface);border-radius:14px;padding:14px 12px;border:2px solid var(--border);cursor:pointer;transition:all .18s;text-align:center;box-shadow:var(--shadow)}
.stage-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stage-card.active{border-color:var(--accent);background:rgba(26,86,219,.04)}
.stage-icon{font-size:26px;margin-bottom:6px}
.stage-name{font-size:12px;font-weight:700}
.stage-desc{font-size:10px;color:var(--text-dim);margin-top:2px;line-height:1.4}
.stage-count{font-size:9px;color:var(--accent);font-family:'Space Mono',monospace;margin-top:4px}


.flow-bar{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:12px;box-shadow:var(--shadow);display:none}
.flow-bar.show{display:block}
.flow-bar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.flow-bar-name{font-size:11px;font-weight:700;color:var(--accent);font-family:'Space Mono',monospace}
.flow-bar-count{font-size:10px;color:var(--text-dim);font-family:'Space Mono',monospace}
.flow-track{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:8px}
.flow-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:2px;transition:width .4s ease}
.flow-controls{display:flex;gap:8px}
.fc-prev{width:44px;height:40px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--text-dim)}
.fc-prev:disabled{opacity:.25;cursor:not-allowed}
.fc-next{flex:1;height:40px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s}
.fc-next.finish{background:var(--green)}
.fc-replay{width:44px;height:40px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--text-dim)}


.phrase-section{margin-bottom:16px}
.sec-label{font-size:10px;color:var(--text-dim);font-family:'Space Mono',monospace;letter-spacing:2px;text-transform:uppercase;margin-bottom:7px;display:flex;align-items:center;gap:7px}
.sec-label::after{content:'';flex:1;height:1px;background:var(--border)}
.phrase-list{display:flex;flex-direction:column;gap:6px}
.phrase-item{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 13px;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);position:relative}
.phrase-item:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.phrase-item:active{transform:scale(.98)}
.phrase-item.sent{border-color:var(--green);background:rgba(14,159,110,.04)}
.ptype-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.type-general .ptype-dot{background:#9ca3af}
.type-greeting .ptype-dot{background:var(--accent)}
.type-question .ptype-dot{background:var(--red)}
.type-instruction .ptype-dot{background:var(--orange)}
.type-prep .ptype-dot{background:var(--purple)}
.type-safety .ptype-dot{background:var(--red)}
.type-result .ptype-dot{background:var(--green)}
.phrase-texts{flex:1;min-width:0}
.phrase-ref{font-size:10px;color:var(--text-dim);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phrase-target{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.4}
.phrase-sent-badge{position:absolute;top:6px;right:8px;font-size:9px;color:var(--green);font-family:'Space Mono',monospace;opacity:0;transition:opacity .3s}
.phrase-item.sent .phrase-sent-badge{opacity:1}
.phrase-play-icon{display:none}


.flow-start-btn{width:100%;padding:12px;background:var(--accent);border:none;border-radius:11px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 3px 10px rgba(26,86,219,.25)}


.page-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;margin:-12px -14px 14px;
}
.back-btn{
  display:flex;align-items:center;gap:4px;
  background:none;border:none;color:var(--accent);cursor:pointer;
  font-size:14px;font-weight:700;padding:4px;
}
.page-title-wrap{display:flex;align-items:center;gap:7px;flex:1;justify-content:center}
.page-title{font-size:14px;font-weight:700}
.flow-start-mini{
  font-size:11px;font-weight:700;color:#fff;
  background:var(--accent);border:none;border-radius:7px;
  padding:5px 10px;cursor:pointer;white-space:nowrap;
}


.flow-phrase-card{
  background:var(--surface);border-radius:16px;padding:24px 18px;
  border:2px solid var(--border);margin-bottom:12px;
  box-shadow:var(--shadow-lg);text-align:center;
  animation:slideUp .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.flow-phrase-type{
  font-size:10px;color:var(--text-dim);font-family:'Space Mono',monospace;
  letter-spacing:1px;margin-bottom:10px;
}
.flow-phrase-ref{font-size:13px;color:var(--text-dim);margin-bottom:8px;line-height:1.5}
.flow-phrase-target{font-size:22px;font-weight:700;color:var(--text);line-height:1.5}
.no-audio-tag{font-size:11px;color:var(--red);margin-top:10px;opacity:.7}
.flow-ctrl-bar{
  display:flex;gap:8px;margin-bottom:8px;
}
.flow-next-preview{
  font-size:11px;color:var(--text-dim);text-align:center;
  padding:6px 12px;background:var(--surface2);
  border-radius:8px;margin-bottom:12px;
}


.flow-select-panel{
  position:fixed;bottom:0;left:0;right:0;margin:0 auto;transform:translateY(100%);
  width:100%;max-width:520px;background:var(--surface);
  border-radius:20px 20px 0 0;padding:14px 16px 40px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);z-index:110;
  max-height:80vh;overflow-y:auto;
}
.flow-select-panel.show{transform:translateY(0);}
.flow-select-title{
  font-family:'Space Mono',monospace;font-size:12px;color:var(--accent);
  letter-spacing:.5px;margin-bottom:12px;text-align:center;
}


.trans-section{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px;box-shadow:var(--shadow)}
.trans-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.trans-title{font-size:11px;font-family:'Space Mono',monospace;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}
.ai-badge{font-size:9px;background:rgba(124,58,237,.1);color:var(--purple);border:1px solid rgba(124,58,237,.25);padding:2px 8px;border-radius:20px;font-family:'Space Mono',monospace}
.trans-row{display:flex;gap:8px;margin-bottom:8px}
.trans-input{flex:1;background:var(--surface2);border:1.5px solid var(--border);border-radius:9px;padding:9px 11px;color:var(--text);font-size:13px;font-family:'Noto Sans JP',sans-serif;resize:none;height:52px;outline:none;transition:border-color .18s}
.trans-input:focus{border-color:var(--accent)}
.trans-input::placeholder{color:var(--text-dim);font-size:12px}
.mic-btn{width:52px;height:52px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface2);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s}
.mic-btn.recording{border-color:var(--red);background:rgba(224,36,36,.06);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 5px rgba(224,36,36,.12)}}
.trans-btn{width:100%;padding:10px;background:var(--accent);border:none;border-radius:9px;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.trans-btn:disabled{background:var(--border);color:var(--text-dim);cursor:not-allowed}
.result-box{display:none;margin-top:9px;background:var(--surface2);border:1.5px solid var(--border);border-radius:9px;padding:12px}
.result-box.show{display:block}
.result-lang{font-size:9px;color:var(--text-dim);font-family:'Space Mono',monospace;letter-spacing:1px;margin-bottom:5px}
.result-text{font-size:17px;font-weight:700;color:var(--text);line-height:1.5;margin-bottom:9px}
.result-btns{display:flex;gap:8px}
.result-send{flex:1;padding:8px;background:var(--green);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.result-play{padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;font-size:12px;cursor:pointer;color:var(--text-dim)}
.ai-warn{margin-top:8px;padding:7px 10px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);border-radius:7px;font-size:10px;color:var(--text-dim)}
.scan-line{height:2px;background:var(--border);border-radius:2px;margin-top:8px;overflow:hidden;display:none}
.scan-line.active{display:block}
.scan-line::after{content:'';display:block;height:100%;width:35%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scan 1s infinite}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(380%)}}


.overlay-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:100}
.overlay-bg.show{display:block}
.slide-panel{position:fixed;bottom:0;left:0;right:0;margin:0 auto;transform:translateY(100%);width:100%;max-width:520px;background:var(--surface);border-radius:20px 20px 0 0;padding:16px 18px 44px;transition:transform .35s cubic-bezier(.34,1.56,.64,1);z-index:110;max-height:85vh;overflow-y:auto}
.slide-panel.show{transform:translateY(0)}
@media(max-width:540px){
  [data-fontsize="lg"] .slide-panel,[data-fontsize="lg"] .flow-select-panel{max-width:100vw}
}
.slide-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px}
.panel-title{font-family:'Space Mono',monospace;font-size:13px;color:var(--accent);letter-spacing:.5px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.panel-close-btn{background:var(--surface2);border:1px solid var(--border);border-radius:7px;width:26px;height:26px;cursor:pointer;color:var(--text-dim);font-size:13px}
.section-label{font-size:10px;color:var(--text-dim);font-family:'Space Mono',monospace;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;margin-top:14px}
.section-note{font-size:11px;color:var(--text-dim);margin-bottom:8px;line-height:1.5}
.native-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.native-btn{padding:9px 11px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface2);color:var(--text-dim);cursor:pointer;font-size:12px;display:flex;align-items:center;gap:7px;transition:all .18s}
.native-btn.active{background:rgba(26,86,219,.06);border-color:var(--accent);color:var(--accent)}
.native-btn .flag{font-size:17px}
.native-btn .nm{font-weight:700;display:block;font-size:12px}
.native-btn .sub{font-size:9px;opacity:.6;font-family:'Space Mono',monospace}
.warn-box{background:rgba(224,36,36,.05);border:1px solid rgba(224,36,36,.15);border-radius:10px;padding:11px;font-size:11px;color:#991b1b;line-height:1.6;margin-top:14px}
[data-theme="dark"] .warn-box{background:rgba(224,36,36,.08);border-color:rgba(224,36,36,.25);color:#fca5a5}


.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:#111827;color:#fff;font-size:12px;padding:8px 16px;border-radius:20px;opacity:0;transition:all .3s;z-index:200;white-space:nowrap;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


.pw-gate{display:flex;position:fixed;inset:0;background:var(--bg);z-index:9999;flex-direction:column;justify-content:flex-start;align-items:center;overflow-y:auto;padding:max(60px,env(safe-area-inset-top,0px)) 20px 140px}
.pw-gate.hidden{display:none}
.pw-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 24px;width:100%;max-width:380px;box-shadow:var(--shadow-lg);margin-top:20px}
.pw-logo{text-align:center;margin-bottom:22px}
.pw-logo-icon{font-size:40px;margin-bottom:8px}
.pw-logo-title{font-size:22px;font-weight:700;color:var(--text)}
.pw-logo-sub{font-size:11px;color:var(--text-dim);font-family:'Space Mono',monospace;letter-spacing:1px;margin-top:2px}
.pw-input{width:100%;background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:15px;margin-bottom:10px;outline:none;transition:border-color .18s}
.pw-input:focus{border-color:var(--accent)}
.pw-input::placeholder{color:rgba(17,24,39,.25)}
.pw-btn{width:100%;padding:12px;background:var(--accent);border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;transition:opacity .18s}
.pw-btn:disabled{opacity:.5;cursor:not-allowed}
.pw-err{color:var(--red);font-size:12px;margin-top:8px;text-align:center;min-height:18px}

.plan-section{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:16px}
.plan-section-title{font-size:10px;font-family:'Space Mono',monospace;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.plan-badge-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.plan-badge{font-size:10px;font-family:'Space Mono',monospace;padding:2px 10px;border-radius:12px;font-weight:700}
.plan-badge.trial{background:#fef3c7;color:#d97706;border:1px solid #fde68a}
.plan-badge.active{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}
.plan-badge.expired{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
.plan-badge.free{background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1}
.plan-badge.solo{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}
.plan-badge.team{background:#ecfdf5;color:#059669;border:1px solid #6ee7b7}
.plan-badge.hospital{background:#f5f3ff;color:#7c3aed;border:1px solid #ddd6fe}
.plan-badge.monitor{background:#faf5ff;color:#9333ea;border:1px solid #e9d5ff}
.plan-days{font-size:11px;color:var(--text-dim)}
.plan-usage-label{font-size:11px;color:var(--text-dim);margin-bottom:5px}
.plan-bar-bg{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:10px}
.plan-bar-fill{height:100%;border-radius:3px;transition:width .5s}
.plan-upgrade-btn{width:100%;padding:10px;background:linear-gradient(135deg,rgba(26,86,219,.1),rgba(124,58,237,.1));border:1px solid rgba(26,86,219,.3);border-radius:9px;color:var(--accent);font-family:'Space Mono',monospace;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:all .2s}
.plan-upgrade-btn:hover{background:linear-gradient(135deg,rgba(26,86,219,.18),rgba(124,58,237,.18))}

.upgrade-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:300;align-items:center;justify-content:center;padding:20px}
.upgrade-overlay.show{display:flex}
.upgrade-modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;max-width:380px;width:100%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.upgrade-close{position:absolute;top:12px;right:12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;width:28px;height:28px;cursor:pointer;color:var(--text-dim);font-size:13px;display:flex;align-items:center;justify-content:center}
.upgrade-title{font-family:'Space Mono',monospace;font-size:13px;color:var(--accent);margin-bottom:4px;text-align:center}
.upgrade-sub{font-size:11px;color:var(--text-dim);text-align:center;margin-bottom:16px}
.upgrade-plan-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:14px;margin-bottom:16px}
[data-theme="dark"] .upgrade-plan-box{background:var(--surface2);border-color:var(--border)}
.upgrade-plan-name{font-family:'Space Mono',monospace;font-size:12px;color:var(--accent);margin-bottom:8px;font-weight:700}
.upgrade-plan-features{font-size:12px;color:var(--text);line-height:2}
.upgrade-input{width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13px;margin-bottom:8px;outline:none;font-family:'Noto Sans JP',sans-serif;transition:border-color .2s}
.upgrade-input:focus{border-color:rgba(26,86,219,.5)}
.upgrade-input::placeholder{color:var(--text-dim);font-size:12px}
.upgrade-submit-btn{width:100%;padding:12px;background:var(--accent);border:none;border-radius:10px;color:#fff;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:opacity .2s;margin-top:4px}
.upgrade-submit-btn:hover{opacity:.88}
.upgrade-success{text-align:center;padding:16px 0}
.upgrade-success-icon{font-size:36px;margin-bottom:8px}
.upgrade-success-text{font-size:13px;color:#0e9f6e;font-family:'Space Mono',monospace}
.upgrade-success-sub{font-size:11px;color:var(--text-dim);margin-top:6px;line-height:1.6}

.hist-btn{background:rgba(255,255,255,.15);border:none;border-radius:7px;width:32px;height:32px;cursor:pointer;color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .18s}.hist-btn:hover{background:rgba(255,255,255,.25)}.hist-drawer-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199}.hist-drawer-bg.open{display:block}
.hist-drawer{position:fixed;bottom:0;left:0;right:0;max-height:75vh;background:var(--surface);border-top:2px solid var(--border);border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .3s ease;z-index:200;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 24px rgba(0,0,0,.12)}.hist-drawer.open{transform:translateY(0)}
.hist-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--border);z-index:1}.hist-drawer-title{font-family:'Space Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:1px}
.hist-note{font-size:10px;color:var(--text-dim);padding:6px 16px;border-bottom:1px solid var(--border);background:rgba(26,86,219,.04)}.hist-empty{text-align:center;padding:32px 16px;color:var(--text-dim);font-size:12px}
.hist-card{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:10px}.hist-card-body{flex:1;min-width:0}
.hist-card-meta{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.hist-card-time{font-size:9px;color:var(--text-dim);font-family:'Space Mono',monospace}.hist-card-lang{font-size:9px;font-family:'Space Mono',monospace;padding:1px 7px;border-radius:10px;background:rgba(26,86,219,.08);color:var(--accent);border:1px solid rgba(26,86,219,.2)}
.hist-card-src{font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px}
.hist-card-text{font-size:13px;font-weight:700;color:var(--text);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.hist-card-copy{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 8px;cursor:pointer;color:var(--text-dim);font-size:10px;flex-shrink:0;font-family:'Space Mono',monospace;transition:all .15s}.hist-card-copy:hover{border-color:var(--accent);color:var(--accent)}
.lang-settings-btn{padding:5px 12px;min-height:34px;border-radius:20px;border:1px solid rgba(26,86,219,.3);background:rgba(26,86,219,.06);color:var(--accent);cursor:pointer;font-size:12px;flex-shrink:0;transition:all .2s;touch-action:manipulation;white-space:nowrap;font-family:'Space Mono',monospace}.lang-settings-btn:hover{background:rgba(26,86,219,.12)}
.ls-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:250;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.ls-overlay.show{display:block}
.ls-modal{position:fixed;bottom:0;left:0;right:0;max-width:500px;margin:0 auto;background:var(--surface);border-top:2px solid rgba(26,86,219,.25);border-radius:20px 20px 0 0;padding:16px 16px calc(32px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .35s cubic-bezier(.34,1.56,.64,1);z-index:260;max-height:80vh;overflow-y:auto;box-shadow:0 -4px 24px rgba(0,0,0,.12)}.ls-modal.show{transform:translateY(0)}
.ls-title{font-family:'Space Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:1px}.ls-subtitle{font-size:10px;color:var(--text-dim);margin-top:2px}
.sort-list{list-style:none;padding:0;margin:12px 0 14px;display:flex;flex-direction:column;gap:6px}
.sort-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;cursor:grab;user-select:none;touch-action:none}.sort-item.dragging{opacity:.4}
.sort-handle{font-size:14px;color:var(--text-dim);flex-shrink:0}.sort-label{font-size:13px;flex:1;color:var(--text)}.sort-placeholder{height:44px;background:rgba(26,86,219,.06);border:1.5px dashed rgba(26,86,219,.3);border-radius:10px}
.ls-btns{display:flex;gap:8px}.ls-reset{padding:10px 14px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.25);border-radius:9px;color:#d97706;font-size:11px;cursor:pointer;font-family:'Space Mono',monospace}.ls-save{flex:1;padding:10px;background:linear-gradient(135deg,rgba(26,86,219,.1),rgba(124,58,237,.08));border:1px solid rgba(26,86,219,.3);border-radius:9px;color:var(--accent);font-family:'Space Mono',monospace;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.5px}
.custom-sect{padding:4px 0}.custom-sect-hdr{font-size:10px;color:var(--text-dim);font-family:'Space Mono',monospace;letter-spacing:2px;text-transform:uppercase;margin:14px 0 8px;display:flex;align-items:center;gap:8px}.custom-sect-hdr::after{content:'';flex:1;height:1px;background:var(--border)}.admin-phrase-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;margin-bottom:8px;width:100%;text-align:left;transition:all .2s}.admin-phrase-card:hover{border-color:rgba(26,86,219,.4)}.apc-label{font-size:10px;color:var(--text-dim);font-family:'Space Mono',monospace;margin-bottom:4px}.apc-ja{font-size:14px;color:var(--text);margin-bottom:3px}.apc-target{font-size:13px;color:var(--accent)}.my-phrase-row{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;margin-bottom:6px}.mpr-text{flex:1;font-size:13px;line-height:1.5;color:var(--text)}.mpr-del{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;padding:4px 6px;flex-shrink:0}.add-my-phrase-btn{width:100%;padding:11px;background:rgba(26,86,219,.06);border:1.5px dashed rgba(26,86,219,.3);border-radius:10px;color:var(--accent);font-family:'Space Mono',monospace;font-size:11px;cursor:pointer;margin-top:4px;letter-spacing:.5px}.custom-empty{text-align:center;padding:20px;color:var(--text-dim);font-size:12px}.paid-note{font-size:10px;color:var(--text-dim);text-align:center;padding:10px;background:rgba(26,86,219,.04);border:1px solid var(--border);border-radius:8px;margin:8px 0}

/* ════════════════════════════════════════════════════════════════
   ダークモード上書き — 旧インラインCSS の hardcoded #fff を修正
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .stage-card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .stage-card.active{background:rgba(var(--accent-rgb),.08)}
[data-theme="dark"] .mode-tabs{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .flow-bar{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .phrase-item{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .phrase-item.sent{background:rgba(14,159,110,.08)}
[data-theme="dark"] .page-header{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .flow-phrase-card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .flow-select-panel{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .trans-section{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .slide-panel{background:var(--surface)}
[data-theme="dark"] .ai-warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2);color:#fcd34d}
[data-theme="dark"] .upgrade-modal{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .upgrade-close{background:var(--surface2);border-color:var(--border);color:var(--text-dim)}
[data-theme="dark"] .upgrade-input{background:var(--surface2);border-color:var(--border);color:var(--text)}
[data-theme="dark"] .upgrade-input::placeholder{color:var(--text-dim)}
[data-theme="dark"] .upgrade-plan-features{color:var(--text-dim)}
[data-theme="dark"] .plan-badge.trial{background:rgba(217,119,6,.15);color:#fbbf24;border-color:rgba(217,119,6,.3)}
[data-theme="dark"] .plan-badge.active{background:rgba(14,159,110,.15);color:#34d399;border-color:rgba(14,159,110,.3)}
[data-theme="dark"] .plan-badge.expired{background:rgba(224,36,36,.15);color:#f87171;border-color:rgba(224,36,36,.3)}
[data-theme="dark"] .plan-badge.free,[data-theme="dark"] .plan-badge.solo,[data-theme="dark"] .plan-badge.team,[data-theme="dark"] .plan-badge.hospital,[data-theme="dark"] .plan-badge.monitor{background:var(--surface2);border-color:var(--border);color:var(--text-dim)}