/* ui.css: buttons, badges, form controls — extracted from test.html and reskinned to the staging brand (crimson/navy/Poppins).
   Component library / page styles. Loaded via app.css. */


  .btn{appearance:none;border:1px solid transparent;cursor:pointer;font:inherit;font-weight:600;border-radius:12px;padding:15px 22px;font-size:16px;color:#fff;background:var(--brand);box-shadow:0 4px 14px rgba(196,18,48,.18);transition:transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s;display:inline-flex;align-items:center;justify-content:center;gap:10px}

  .btn:hover{transform:translateY(-1px);background:var(--brand-deep);box-shadow:0 14px 32px rgba(196,18,48,.28)}

  /* opacity:.4 on a burgundy gradient over a rose page turned to muddy brown-pink. A disabled control
     should read as a flat, quiet, on-brand surface, not as a faded version of the live one. */
  .btn:disabled{cursor:not-allowed;box-shadow:none;transform:none;opacity:1;background:var(--rose-mist);color:var(--muted);border:1px solid var(--rose-soft)}

  .btn.dark:disabled,.btn.ghost:disabled{background:var(--rose-mist);color:var(--muted);border:1px solid var(--rose-soft)}

  .btn.ghost{background:var(--paper);color:var(--brand);border:1px solid var(--border);box-shadow:none}
  .btn.ghost:hover{background:var(--surface-muted);border-color:var(--border-strong)}

  .btn.mic-btn{background:linear-gradient(180deg,#fff,#f1faf5);border-color:#bfe3d0;color:#177A50}

  .btn.mic-btn:hover{box-shadow:0 10px 24px rgba(31,138,91,.18);border-color:#1F8A5B;transform:translateY(-1px)}

  /* Was #3A0707 -> #220303: near-black, and on the rose upgrade card it read as a muddy smudge rather
     than a premium tier. A deep burgundy stays clearly darker than the primary button without
     dropping out of the palette. */
  .btn.dark{background:linear-gradient(180deg,#8A0E20,#5E0714);box-shadow:0 12px 28px rgba(94,7,20,.3)}

  .btn.block{width:100%}

  .btn.sm{padding:11px 16px;font-size:14px;border-radius:11px}

  .opt{position:relative;border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;transition:border-color .2s, background .2s}

  .opt:hover{border-color:var(--rose)}

  .opt.sel{border-color:var(--burgundy);background:var(--rose-mist)}

  .opt .top{display:flex;align-items:center;justify-content:space-between;gap:10px}

  .opt .name{font-weight:600;font-size:15px}

  .opt .desc{color:var(--muted);font-size:13px;margin-top:5px;line-height:1.5}

  .badge{font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:999px;white-space:nowrap}

  .badge.prem{background:var(--burgundy);color:#fff}

  .badge.fast{background:#E7F4EE;color:var(--go)}

  .badge.tech{background:#0F172A;color:#fff}

  .badge.soon{background:#E2E8F0;color:#64748B}

  /* Gemini engine is not available yet: dim it and make it un-clickable. */
  .opt.soon{opacity:.55;cursor:not-allowed;pointer-events:none}

  .field label{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}

  .select{position:relative}

  .select select{appearance:none;width:100%;padding:13px 38px 13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font:inherit;font-size:14px;color:var(--ink);cursor:pointer}

  .select::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-65%) rotate(45deg)}

  .howrow{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}

  .howrow:last-child{border-bottom:0}

  .howdot{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;font-weight:700}

  .howdot.rose{background:var(--rose-soft);color:var(--burgundy)}

  .howdot.green{background:#E7F4EE;color:var(--go)}

  .howdot.amber{background:#fcefd6;color:#9a6a12}

  .howrow b{font-weight:600}
.howrow .t{font-size:14px;line-height:1.5}
.howrow .t span{color:var(--muted)}

  .mic-prompt{font-style:italic;color:var(--ink);font-size:15px;line-height:1.5;margin:0 0 18px;padding:12px 16px;background:var(--rose-mist);border:1px solid var(--line);border-radius:12px}

  .mic-status{text-align:center;font-size:14px;font-weight:600;color:var(--burgundy);margin-bottom:6px}

  .mic-status[hidden]{display:none}

  /* accent + voice are secondary: a forced-open block on desktop, a real toggle on mobile */
  .settings-fold{margin-bottom:6px}

  .settings-fold>summary{display:none}