* { box-sizing: border-box; }
:root {
  --bg: #fff9fc;
  --card: #ffffffdd;
  --accent: #ff7ac6;
  --accent-rgb: 255,122,198;
  --accent-alt: #8b5cf6;
  --text: #332638;
  --border: #f6d6ec;
  --radius: 22px;
  --shadow: 0 4px 14px -2px rgba(0,0,0,.06), 0 2px 4px -1px rgba(0,0,0,.04);
  font-family: 'Nunito', system-ui, sans-serif;
}
body { margin:0; background: radial-gradient(circle at 30% 20%, #ffe6f5, #f7f2ff); color: var(--text); min-height:100vh; display:flex; flex-direction:column; }
.app-header { text-align:center; padding:2.2rem 1rem 1.2rem; }
.app-header h1 { margin:0; font-size: clamp(2.4rem, 5vw, 3.2rem); background: linear-gradient(90deg,var(--accent),var(--accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { margin:.4rem 0 0; font-size:1.05rem; opacity:.85; }
.product-line { margin:.3rem 0 0; font-size:.8rem; letter-spacing:.6px; text-transform:uppercase; font-weight:700; background:linear-gradient(90deg,var(--accent-alt),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-badge { display:inline-block; margin-top:.65rem; padding:.35rem .75rem .4rem; font-size:.65rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; border:1px solid var(--border); border-radius:999px; backdrop-filter:blur(8px); background:rgba(255,255,255,.55); box-shadow:0 2px 4px -1px rgba(0,0,0,.08); }
main { flex:1; width:min(1100px,100%); margin:0 auto; padding:0 1.2rem 4rem; display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-content:start; }
.upload-card { background:var(--card); backdrop-filter: blur(14px); padding:1.6rem 1.4rem 2rem; border:2px dashed var(--border); border-radius:var(--radius); position:relative; box-shadow:var(--shadow); animation:pop .55s ease; }
.upload-card h2 { margin-top:0; }
.drop-zone { cursor:pointer; border:2px dashed var(--border); border-radius: calc(var(--radius) - 6px); padding:2.2rem 1rem; text-align:center; background:linear-gradient(145deg,#fff,#ffeef7); transition:.35s ease; position:relative; overflow:hidden; }
.drop-zone:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.drop-zone.drag { background:linear-gradient(145deg,#ffe4f3,#f4e9ff); border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15); }
.dz-inner { position:relative; z-index:2; }
.drop-zone .icon { font-size:3rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.dz-label { margin:.6rem 0 .2rem; font-size:1.05rem; }
.dz-hint { margin:0; font-size:.8rem; letter-spacing:.5px; opacity:.65; }
.primary { background:linear-gradient(135deg,var(--accent),var(--accent-alt)); color:#fff; border:none; padding:.9rem 1.4rem; font-size:1rem; font-weight:600; border-radius:999px; cursor:pointer; box-shadow:0 6px 18px -4px rgba(var(--accent-rgb),.55); transition:.35s ease; display:inline-flex; align-items:center; gap:.4rem; }
.primary:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.primary:not(:disabled):hover { transform:translateY(-3px); box-shadow:0 10px 24px -6px rgba(var(--accent-rgb),.6); }
.primary:not(:disabled):active { transform:translateY(0); }
.mic-btn { background:linear-gradient(135deg,#10b981,#059669); }
.mic-btn:not(:disabled):hover { box-shadow:0 10px 24px -6px rgba(16,185,129,.6); }
.file-meta { margin-top:1rem; font-size:.85rem; background:#fff; padding:.7rem 1rem; border-radius:14px; border:1px solid var(--border); box-shadow:inset 0 0 0 1px #fff; }
.hidden { display:none !important; }
.progress-wrap { margin-top:1.4rem; }
.progress-bar { width:100%; background:#f2e6f3; height:10px; border-radius:999px; overflow:hidden; position:relative; }
.progress-bar span { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-alt)); border-radius:inherit; transition:width .3s ease; position:relative; }
.progress-text { font-size:.75rem; letter-spacing:.5px; margin:.5rem 0 0; text-transform:uppercase; opacity:.7; font-weight:600; }
.mic-active { 
  background:linear-gradient(135deg,#ef4444,#dc2626) !important; 
  box-shadow:0 0 0 4px rgba(239,68,68,.25) !important; 
  animation:pulse 1.4s infinite; 
}
.mic-hint { 
  border:1px solid rgba(16,185,129,.3); 
  background:linear-gradient(145deg,rgba(16,185,129,.08),rgba(5,150,105,.12)); 
}
.mic-hint strong { color:#059669; }
@keyframes pulse { 0% { transform:scale(1);} 50% { transform:scale(1.03);} 100% { transform:scale(1);} }
.lang-select { background:#fff; border:1px solid var(--border); padding:.55rem .9rem; border-radius:999px; font-size:.75rem; font-weight:600; cursor:pointer; }
.lang-select:focus { outline:2px solid var(--accent-alt); }
.result { background:var(--card); backdrop-filter: blur(14px); padding:1.4rem 1.2rem 1.8rem; border-radius:var(--radius); box-shadow:var(--shadow); position:relative; animation:slideIn .6s cubic-bezier(.65,.05,.36,1); display:flex; flex-direction:column; }
.result-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.result-head h3 { margin:.2rem 0 .8rem; }
.word-count { font-size:.7rem; font-weight:400; opacity:.7; margin-left:.5rem; }
.actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.ghost { background:#fff; border:1px solid var(--border); padding:.55rem .9rem; border-radius:999px; font-size:.8rem; font-weight:600; cursor:pointer; color:var(--text); box-shadow:0 2px 6px -2px rgba(0,0,0,.08); transition:.3s; }
.ghost:disabled { opacity:.45; cursor:not-allowed; }
.ghost:not(:disabled):hover { background:linear-gradient(145deg,#fff,#ffeef7); }
.transcript { margin-top:.6rem; flex:1; min-height:320px; resize:vertical; width:100%; font: .9rem/1.4 monospace; border:1px solid var(--border); border-radius:14px; padding:.9rem .85rem; background:#fff; box-shadow:inset 0 0 0 1px #fff; }
.app-footer { text-align:center; font-size:.7rem; padding:1rem 0 2rem; opacity:.6; }
.diagnostics { background:var(--card); backdrop-filter:blur(10px); margin:0 1.2rem 3rem; padding:1.2rem 1rem 1.6rem; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); font-size:.75rem; }
.diagnostics h4 { margin:0 0 .6rem; font-size:.9rem; }
.diag-note { margin:.2rem 0 .8rem; line-height:1.3; }
.device-list { list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.4rem; }
.device-list li { background:#fff; border:1px solid var(--border); padding:.5rem .7rem; border-radius:10px; font-size:.65rem; display:flex; justify-content:space-between; align-items:center; }
.device-list code { font-size:.6rem; opacity:.75; }
.diag-actions { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin-bottom:.6rem; }
.level-bar { width:120px; height:10px; background:#f2e6f3; border-radius:999px; position:relative; overflow:hidden; display:inline-block; }
.level-bar::after { content:""; position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-alt)); transition:width .15s linear; }
.diag-help { margin:.8rem 0 0; opacity:.7; }
@keyframes pop { 0% { transform:scale(.92) translateY(8px); opacity:0;} 70% { opacity:1;} 100% { transform:scale(1) translateY(0);} }
@keyframes slideIn { 0% { opacity:0; transform:translateY(20px);} 100% { opacity:1; transform:translateY(0);} }
@media (max-width:620px){ .upload-card, .result { padding:1.2rem .95rem 1.4rem;} }