/* ── LANG TOKENS (global.css provides base) ── */
:root { --color-success:#10b981; --color-danger:#ef4444; --bg-panel:#f6f6f7; }
.dark { --bg-panel:rgba(255,255,255,.03); }
/* ── LAYOUT (topbar 52px, footer 44px) ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);font-weight:400;background:var(--bg-page);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;transition:background .2s,color .2s}
button{cursor:pointer;font-family:inherit}
a{text-decoration:none}
textarea{font-family:var(--font-sans);outline:none;resize:none;border:none;background:transparent}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
/* ── LABELS / BADGES (keep uppercase micro) ── */
.badge,.tag,.panel-label,.voice-panel-label,.topbar-nav a{font-weight:700;text-transform:uppercase;letter-spacing:.08em}
/* ── LAYOUT WRAPPERS (52px topbar, 44px footer) ── */
.page-container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--sp-xl)}
main{flex:1;display:flex;flex-direction:column;padding:var(--sp-2xl) 0 var(--sp-xl)}
/* ── HERO BANNER ── */
.hero-banner{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-xl);margin-bottom:var(--sp-xl);flex-wrap:wrap}
.hero-text{display:flex;flex-direction:column;gap:8px}
h1{font-size:1.875rem;line-height:1.2;color:var(--text-primary);letter-spacing:.02em}
h1 em{font-style:normal}
.hero-sub{font-size:.875rem;line-height:1.7;font-weight:400;color:var(--text-secondary);max-width:420px}
.hero-actions{display:flex;align-items:center;gap:var(--sp-md);flex-shrink:0}
.hero-controls{display:flex;align-items:center;gap:6px;padding-bottom:2px}
.style-btn{display:inline-flex;align-items:center;gap:5px;font-size:.8125rem;font-weight:400;padding:8px 16px;border-radius:99px;border:1px solid var(--border-strong);background:transparent;color:var(--text-secondary);letter-spacing:.02em;transition:all .15s}
.style-btn:hover{border-color:var(--text-primary);color:var(--text-primary)}
.style-btn.active{background:var(--text-primary);color:var(--bg-page);border-color:var(--text-primary)}
/* ── LANG PAGE CONTAINER — full width, 1400px bound ── */
.lang-page .page-container{width:100% !important;max-width:1400px !important;margin:0 auto !important;display:flex;flex-direction:column;align-items:stretch !important}
/* ── EDITOR GRID (2-col, exactly 50/50) ── */
.editor-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:24px !important;width:100% !important;box-sizing:border-box}
/* ── PANEL ── */
.panel{width:100%;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;min-height:380px}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px var(--sp-md);border-bottom:1px solid var(--border-subtle);flex-shrink:0}
.panel-label{font-size:.6875rem;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.panel-header-right{display:flex;align-items:center;gap:var(--sp-sm)}
.panel-meta{font-size:.6875rem;font-family:var(--font-mono);color:var(--text-muted)}
.panel-footer{display:flex;align-items:center;justify-content:space-between;padding:8px var(--sp-md);border-top:1px solid var(--border-subtle);background:var(--bg-panel);flex-shrink:0}
.kbd-hint{display:flex;align-items:center;gap:4px;font-size:.6875rem;font-family:var(--font-mono);color:var(--text-muted)}
kbd{display:inline-flex;align-items:center;padding:1px 5px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-panel);font-family:var(--font-mono);font-size:.5625rem;color:var(--text-muted)}
/* ── INPUT PANEL ── */
.input-panel{position:relative}
#input-area{flex:1;width:100%;color:var(--text-primary);font-size:.9375rem;line-height:1.75;padding:var(--sp-md);caret-color:var(--text-primary);transition:box-shadow .15s;position:relative;z-index:1}
#input-area::placeholder{color:var(--text-muted)}
#input-area:focus{box-shadow:inset 0 0 0 1.5px var(--border-strong)}
/* mic button in panel footer — grey, turns red when recording */
#mic-btn{color:var(--text-muted);transition:color .2s}
#mic-btn:hover{color:var(--text-primary)}
#mic-btn.is-recording{color:var(--color-danger)}
/* recording overlay (State C) — floating fixed bar (p5-daily pattern) */
#recording-overlay{display:none;position:fixed;bottom:32px;left:50%;transform:translateX(-50%);z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:999px;padding:14px 28px;box-shadow:0 8px 32px rgba(0,0,0,.18);border:1px solid var(--border-subtle)}
.dark #recording-overlay{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.1)}
.recording-content{display:flex;align-items:center;gap:16px}
.recording-pulse{width:40px;height:40px;border-radius:50%;position:relative;flex-shrink:0}
.recording-pulse::before{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--color-danger)}
#recording-overlay.is-recording .recording-pulse::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--color-danger);animation:ripple 1.5s ease-out infinite;box-shadow:0 0 12px rgba(239,68,68,.35)}
@keyframes ripple{0%{transform:scale(0.95);opacity:1}100%{transform:scale(2.0);opacity:0}}
.recording-timer{font-family:var(--font-mono);font-size:1.25rem;font-weight:500;letter-spacing:.04em;color:var(--text-primary);min-width:48px;text-align:center}
.recording-stop-btn{width:32px;height:32px;border-radius:50%;border:none;background:var(--color-danger);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,box-shadow .15s;flex-shrink:0}
.recording-stop-btn:hover{transform:scale(1.08);box-shadow:0 0 20px rgba(239,68,68,.35)}
.recording-stop-btn svg{display:block}
@keyframes recordingSlideUp{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
#recording-overlay.is-recording{animation:recordingSlideUp .25s ease-out both}
/* ── RESULT PANEL ── */
.result-panel{position:relative}
.result-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 10% 70%,rgba(0,0,0,.03) 0%,transparent 70%);pointer-events:none;z-index:0;border-radius:var(--radius-lg)}
.result-panel::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,var(--border-subtle) 1px,transparent 1px);background-size:22px 22px;opacity:.55;pointer-events:none;z-index:0;border-radius:var(--radius-lg)}
.result-panel .panel-header{position:relative;z-index:2;background:rgba(255,255,255,.6);backdrop-filter:blur(8px)}
.dark .result-panel .panel-header{background:rgba(0,0,0,.6)}
.result-panel .panel-footer{position:relative;z-index:2}
.result-body{position:relative;z-index:2;flex:1;overflow-y:auto;padding:var(--sp-md)}
.result-body::-webkit-scrollbar{width:3px}
#empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.empty-circle{width:48px;height:48px;border-radius:50%;border:1px solid var(--border-strong);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);color:var(--text-muted)}
#results-area{font-size:.9375rem;line-height:1.75;color:var(--text-primary)}
.placeholder-text{color:var(--text-muted);font-style:italic}
.result-word{cursor:pointer;border-radius:3px;transition:background .1s}
.result-word:hover{background:var(--bg-hover)}
.result-word.selected{background:var(--bg-hover);outline:1px solid var(--border-strong)}
#copy-btn{display:none;align-items:center;gap:5px;font-size:.75rem;font-weight:500;padding:4px 12px;border-radius:99px;border:1px solid var(--border-strong);background:transparent;color:var(--text-secondary);transition:all .15s}
#copy-btn:hover{border-color:var(--text-primary);color:var(--text-primary)}
#copy-btn.visible{display:inline-flex}
#engine-badge{font-size:.6875rem;font-family:var(--font-mono);color:var(--text-muted)}
.at-tag{display:flex;align-items:center;gap:5px;font-size:.6875rem;font-weight:500;color:var(--text-muted);letter-spacing:.04em}
.grid-meta{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-sm);padding:0 2px}
#meta-info{font-size:.6875rem;font-family:var(--font-mono);color:var(--text-muted)}
/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeUp .2s ease-out both}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.animate-pulse-custom{animation:pulse 1.5s ease-in-out infinite}
/* ── VOICE PAGE ── */
.page-wrap{max-width:720px;width:100%;margin:0 auto;padding:0 var(--sp-xl);display:flex;flex-direction:column;gap:var(--sp-lg)}
.voice-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.voice-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-sm) var(--sp-md);border-bottom:1px solid var(--border-subtle);background:var(--bg-panel)}
.voice-panel-label{font-size:.75rem;letter-spacing:.06em;color:var(--text-secondary)}
.voice-panel-body{padding:var(--sp-md)}
.voice-textarea{width:100%;min-height:180px;padding:0;font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;color:var(--text-primary);background:transparent;border:none;outline:none;resize:vertical}
.voice-textarea::placeholder{color:var(--text-muted)}
.voice-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-sm) var(--sp-md);border-top:1px solid var(--border-subtle);background:var(--bg-panel)}
.voice-meta{font-size:.6875rem;color:var(--text-muted)}
.voice-save-btn{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:500;padding:5px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:transparent;color:var(--text-secondary);transition:all .15s}
.voice-save-btn:hover{border-color:var(--text-primary);color:var(--text-primary);background:var(--bg-hover)}
.correction-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.correction-hint{font-size:.8125rem;line-height:1.6;color:var(--text-secondary);margin-bottom:var(--sp-sm)}
.diff-overlay{position:absolute;inset:0;padding:var(--sp-md);font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;background:var(--bg-surface);border-radius:var(--radius-md);overflow:auto;opacity:1;transition:opacity .4s ease;z-index:10;pointer-events:none}
.diff-line{display:block}
.diff-changed{background:rgba(16,185,129,.12);border-radius:2px}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:500;color:var(--text-secondary);transition:color .15s;padding:var(--sp-xs) 0}
.back-link:hover{color:var(--text-primary)}
/* ── RESPONSIVE (52px topbar, 44px footer) ── */
@media(max-width:1024px){main{padding:var(--sp-xl) 0 var(--sp-md)}.hero-banner{flex-direction:column;align-items:flex-start;gap:var(--sp-md)}h1{font-size:1.5rem}.editor-grid{grid-template-columns:1fr;gap:var(--sp-md)}.page-container{padding:0 var(--sp-md)}.page-wrap{padding:0 var(--sp-md)}.voice-textarea{min-height:140px;font-size:.75rem}}
@media(max-width:640px){h1{font-size:1.25rem}.kbd-hint{display:none}.hero-controls{flex-wrap:wrap}.page-wrap{padding:0 var(--sp-md)}.voice-textarea{min-height:120px}.voice-panel-header{flex-direction:column;gap:var(--sp-xs)}}