:root {
  color-scheme: dark;
  --ink: #eef6ff;
  --muted: #91a0b5;
  --cyan: #42d7e8;
  --blue: #526cff;
  --panel: #111d2d;
  --line: #24334a;
  --danger: #ff718a;
  --success: #37d49a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 75% 0, #163050 0, transparent 38%), #08111f;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, select, textarea { font: inherit; }
button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #42d7e866; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; }
.shell { width: min(1120px, calc(100% - 32px)); margin: auto; }
header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #ffffff14; }
.brand { color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: .18em; }

.status-toggle {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  background: #111d2dcc;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.status-toggle i, .service-panel i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #f5b942; }
.status-toggle.ready i, .service-panel .ready i { background: var(--success); }
.status-toggle.partial i { background: #f5b942; }
.service-panel {
  margin-top: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0c1726ee;
}
.service-panel[hidden] { display: none; }
.service-panel span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.service-panel .ready { color: var(--ink); }
.service-panel .missing i { background: var(--danger); }

.hero { padding: 68px 0 40px; }
.eyebrow, .panel-head { font-size: 12px; letter-spacing: .18em; color: var(--cyan); font-weight: 800; }
.hero h1 { font-size: clamp(46px, 7vw, 82px); line-height: .98; letter-spacing: -.055em; margin: 12px 0 22px; }
.hero h1 span { background: linear-gradient(90deg, var(--cyan), #8c8cff); background-clip: text; color: transparent; }
.intro { font-size: 19px; color: #a5b2c3; }
.translator { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: #0c1726cc; box-shadow: 0 28px 80px #0006; }
.language-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: end; margin-bottom: 24px; }
label { display: flex; gap: 8px; flex-direction: column; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
select { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #121f31; color: var(--ink); font-size: 16px; }
.swap { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: #142238; color: var(--cyan); font-size: 23px; cursor: pointer; }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
/* Reading aloud: there is no translation, so there is no second pane. The one
   box gets the width, which is what pasting into it wants anyway. */
body.reading-aloud .panels { grid-template-columns: 1fr; }
body.reading-aloud .panel.output { display: none; }
.panel { min-width: 0; height: clamp(280px, 42vh, 460px); padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); display:flex; flex-direction:column; overflow:hidden; }
.panel.output { background: linear-gradient(145deg, #112239, #151d34); }
.panel-head { display: flex; justify-content: space-between; align-items: center; flex:0 0 auto; }
.panel-head button { border: 0; background: none; color: var(--muted); cursor: pointer; }
textarea, .translated { width: 100%; min-height: 0; height: 100%; margin-top: 18px; background: transparent; border: 0; resize: none; outline: 0; color: var(--ink); font: 500 20px/1.55 inherit; overflow-wrap: anywhere; overflow-y:auto; scrollbar-gutter:stable; padding-right:8px; }
textarea { flex:1 1 auto; }
.translated { flex:1 1 auto; }
textarea::-webkit-scrollbar, .translated::-webkit-scrollbar { width:10px; }
textarea::-webkit-scrollbar-thumb, .translated::-webkit-scrollbar-thumb { background:#34465f; border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
textarea::-webkit-scrollbar-track, .translated::-webkit-scrollbar-track { background:transparent; }
[dir="rtl"] { text-align: right; font-family: Tahoma, Arial, sans-serif; line-height: 1.75; }
.translated.muted, textarea::placeholder { color: #65758d; }
.controls { text-align: center; padding: 28px 0 5px; }
.mic, .translate { border: 0; cursor: pointer; font-weight: 750; }
.mic { min-width: 210px; padding: 16px 24px; border-radius: 999px; background: linear-gradient(100deg, var(--cyan), var(--blue)); color: #06111d; font-size: 16px; box-shadow: 0 10px 40px #42d7e833; }
.mic.listening { background: var(--danger); box-shadow: 0 0 0 10px #ff617e20; }
.mic.listening .mic-icon { animation: pulse 1s ease-in-out infinite; }
.mic-icon { display: inline-block; margin-right: 10px; }
.translate { margin-left: 10px; padding: 15px 20px; border-radius: 999px; background: #1a2940; color: var(--ink); border: 1px solid var(--line); }
#message { min-height: 20px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 16px 0 0; }
#message[data-kind="error"] { color: #ff9aaa; }
#message[data-kind="success"] { color: #6ce1b5; }
#activityIndicator.active { width: 14px; height: 14px; border: 2px solid #ffffff33; border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; background:#020812f2; contain:paint; }
.loading-overlay[hidden] { display:none; }
.loading-modal { width:min(420px,100%); padding:38px 30px; border:1px solid #42d7e84d; border-radius:22px; background:linear-gradient(145deg,#132238,#0c1726); box-shadow:0 32px 100px #000c; text-align:center; }
.loading-modal p { margin:20px 0 8px; color:var(--ink); font-size:clamp(18px,4vw,23px); font-weight:750; line-height:1.35; }
.loading-modal small { color:var(--muted); }
.loading-spinner { display:block; width:52px; height:52px; margin:auto; border:4px solid #ffffff1f; border-top-color:var(--cyan); border-right-color:#7786ff; border-radius:50%; animation:spin .8s linear infinite; will-change:transform; }
body.is-busy { overflow:hidden; }
footer { text-align: center; color: #65758d; padding: 32px; font-size: 12px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }

@media (prefers-reduced-motion: reduce) {
  .loading-spinner, #activityIndicator.active, .mic.listening .mic-icon { animation-duration: 1.8s; }
}

@media (max-width: 820px) {
  .service-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 20px, 1120px); }
  header { min-height: 70px; }
  .brand { font-size: 13px; }
  .status-toggle { padding: 8px 10px; }
  .hero { padding: 42px 4px 28px; }
  .hero h1 { font-size: clamp(42px, 14vw, 62px); }
  .intro { font-size: 16px; }
  .translator { padding: 16px; border-radius: 18px; }
  .panels { grid-template-columns: 1fr; }
  .language-row { gap: 8px; }
  .panel { height: clamp(220px, 38vh, 360px); padding: 17px; }
  textarea, .translated { font-size: 18px; }
  .controls { padding-top: 22px; }
  .mic, .translate { width: 100%; margin: 0; }
  .translate { margin-top: 10px; }
}

@media (max-width: 440px) {
  .status-toggle { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .service-panel { grid-template-columns: 1fr; }
  .language-row { grid-template-columns: 1fr 42px 1fr; }
  .swap { width: 40px; height: 40px; font-size: 20px; }
  select { padding: 12px 8px; font-size: 14px; }
}

.confirm-modal{position:fixed;inset:0;z-index:6000;background:rgba(2,8,18,.82);backdrop-filter:blur(10px);display:grid;place-items:center;padding:24px}
.confirm-modal[hidden]{display:none}
.confirm-modal__card{width:min(460px,94vw);padding:24px;border:1px solid #294263;border-radius:20px;background:#0d1b2d;box-shadow:0 28px 90px rgba(0,0,0,.6);color:#eef6ff}
.confirm-modal__card h2{margin:0 0 10px;font-size:1.2rem;line-height:1.35}
.confirm-modal__detail{margin:0;color:#9fb3cb;font-size:.92rem;line-height:1.55}
.confirm-modal__detail[hidden]{display:none}
.confirm-modal__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.confirm-modal__actions button{border-radius:12px;padding:11px 14px;font-weight:700;cursor:pointer;font-size:.95rem}
.confirm-modal__cancel{border:1px solid #365276;background:#172b46;color:#fff}
.confirm-modal__cancel:hover{border-color:#42d7e8;background:#1d3350}
.confirm-modal__go{border:0;background:linear-gradient(90deg,#45d8e8,#6279ff);color:#07111f}
@media(max-width:460px){.confirm-modal__actions{grid-template-columns:1fr}.confirm-modal__card{padding:18px}}

.confirm-modal__choice{display:grid;gap:6px;margin-top:18px}
.confirm-modal__choice[hidden]{display:none}
.confirm-modal__choice span{color:#9fb3cb;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.confirm-modal__choice select{width:100%;background:#11243b;color:#fff;border:1px solid #365276;border-radius:10px;padding:10px}