@font-face {
  font-family: "Noto Sans Hanifi Rohingya";
  src: url("/static/fonts/NotoSansHanifiRohingya.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+10D00-10D3F;
}
:root { --ink:#252a31; --muted:#59616b; --accent:#992d3d; --line:#dce0e5; --surface:#f3f4f6; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--white); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.55; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { outline-offset:4px; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:disabled { cursor:not-allowed; opacity:.5; }
[hidden] { display:none!important; }
.page { max-width:1200px; padding:0 40px; margin:auto; }
.masthead { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; font-size:19px; font-weight:650; }
.brand-name { display:block; }
.brand-script { display:block; width:fit-content; font-family:"Noto Sans Hanifi Rohingya",sans-serif; font-size:23px; line-height:1.55; font-weight:400; color:var(--muted); }
.masthead nav { display:flex; gap:24px; font-size:13px; color:var(--muted); }
.nav-current { color:var(--ink); font-weight:600; }
.masthead nav a:hover,footer a:hover { text-decoration:underline; }
.account { display:flex; gap:12px; align-items:center; }
.pilot-badge { font-size:11px; background:#e9ecf0; padding:5px 9px; border-radius:4px; color:#4c5561; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:11px 17px; border:1px solid transparent; border-radius:6px; font-weight:600; font-size:13px; }
.primary { background:var(--accent); color:white; }
.primary:hover { background:#7e2331; }
.secondary { background:#fff; border-color:#cfd5dd; color:var(--ink); }
.secondary:hover { background:#eff1f4; }
.small { padding:8px 11px; font-size:12px; }
.introduction { padding:28px 0 17px; }
h1 { font-size:29px; line-height:1.3; font-weight:600; letter-spacing:-.5px; margin:0 0 7px; }
.introduction p { color:var(--muted); margin:0; }
h2 { font-size:19px; line-height:1.35; font-weight:600; margin:0; }
h3 { font-size:14px; font-weight:600; margin:0 0 8px; }
.review-notice { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:5px; padding:12px 16px; margin:0 0 23px; color:var(--muted); font-size:12px; }
.review-notice p { margin:0; }
.review-notice strong { color:var(--ink); }
.workspace { background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.workspace-heading { padding:19px 24px; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.session-status { font-size:12px; color:var(--muted); }
.signin-notice { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px 24px; border-top:1px solid var(--line); background:#fbf5f6; }
.signin-notice h3 { font-size:16px; margin:0 0 5px; }
.signin-notice p { margin:0; font-size:12px; color:var(--muted); }
.signin-notice .button { flex-shrink:0; }
.translator-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.language-panel { padding:21px 24px; min-width:0; }
.english-panel { border-right:1px solid var(--line); }
.rohingya-panel { background:var(--surface); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:19px; }
.panel-heading label { font-size:14px; font-weight:600; }
.script-label { font-size:11px; font-weight:400; color:var(--muted); margin-left:6px; }
.text-button { padding:3px 0; background:none; border:0; color:var(--accent); font-size:12px; }
.text-button:hover { text-decoration:underline; }
.editable-label { font-size:11px; color:var(--muted); }
textarea { resize:vertical; border:0; background:transparent; color:var(--ink); width:100%; font-size:18px; line-height:1.65; min-height:125px; padding:0; }
textarea::placeholder { color:#69717d; font-size:16px; }
textarea:focus { outline:2px solid #ad6570; outline-offset:5px; border-radius:2px; }
#rohingya { font-family:"Noto Sans Hanifi Rohingya",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:21px; min-height:105px; }
.panel-bottom { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--muted); margin:10px 0 18px; }
.action-row { display:flex; gap:9px; flex-wrap:wrap; }
.empty-state { min-height:175px; display:flex; justify-content:center; flex-direction:column; color:var(--muted); }
.empty-state p { font-size:14px; margin:0 0 7px; }
.empty-state span { font-size:12px; }
.output-meta { font-size:11px; color:var(--muted); margin-top:14px; }
.script-note { font-size:11px; color:var(--muted); margin:8px 0 0; }
.workspace-footer { border-top:1px solid var(--line); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:25px; font-size:11px; background:#fafbfc; }
.workspace-footer p { margin:0; color:var(--ink); }
.workspace-footer>span { max-width:400px; color:var(--muted); }
#status.error { color:#8e2536; }
.audio-area { border:1px solid var(--line); background:#f1f3f6; border-radius:6px; padding:11px 13px; }
.audio-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:8px; }
audio { width:100%; height:34px; }
.speech-input { font-size:11px; color:var(--muted); margin:8px 0 0; overflow-wrap:anywhere; }
.spelling-warning { font-size:12px; color:#79510c; }
.preview-banner { padding:11px 24px; background:#f2f3f5; display:flex; justify-content:space-between; align-items:center; gap:15px; font-size:11px; color:var(--muted); }
.phrase-section { margin:27px 0 32px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:15px; }
.section-heading h2 { font-size:17px; }
.categories { display:flex; gap:3px; background:#e9ecf0; padding:3px; border-radius:6px; }
.categories button { border:0; border-radius:4px; font-size:11px; padding:6px 10px; background:none; color:var(--muted); }
.categories button.selected { background:white; color:var(--ink); }
.phrases { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.phrase { display:flex; justify-content:space-between; align-items:center; text-align:left; gap:12px; padding:13px 15px; background:#fff; border:1px solid var(--line); border-radius:6px; font-size:12px; color:var(--ink); }
.phrase:hover { border-color:#ad6570; }
.phrase span:last-child { color:var(--muted); }
.feedback-section { display:grid; grid-template-columns:1fr 1.35fr; gap:55px; padding:30px 0 35px; border-top:1px solid var(--line); }
.feedback-intro p { font-size:13px; color:var(--muted); line-height:1.7; max-width:340px; }
.feedback-intro .review-script-note { font-size:12px; }
.feedback-awaiting { display:inline-block; font-size:12px; color:var(--muted); margin-top:7px; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
fieldset:disabled { opacity:.65; }
.rating-row { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; font-size:13px; }
select { border:1px solid #cfd5dd; background:#fff; color:var(--ink); padding:9px 10px; border-radius:5px; font-size:12px; min-width:225px; }
.field-label { display:block; font-size:13px; margin:16px 0 7px; }
.field-label span { font-size:12px; color:var(--muted); }
#feedback-form textarea { border:1px solid #cfd5dd; border-radius:6px; background:#fff; padding:10px 12px; font-size:14px; min-height:70px; }
#feedback-form #correction { font-family:"Noto Sans Hanifi Rohingya",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:18px; line-height:1.8; }
#feedback-form textarea::placeholder { font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:12px; }
.consent { display:flex; align-items:flex-start; gap:9px; color:var(--muted); font-size:12px; margin:16px 0; }
.consent input { accent-color:var(--accent); margin:4px 0 0; flex-shrink:0; }
#feedback-status { font-size:12px; min-height:18px; color:var(--ink); }
.how-section { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; border-top:1px solid var(--line); padding:26px 0 30px; }
.how-card p { font-size:12px; line-height:1.7; color:var(--muted); margin:0; }
footer { padding:24px 0 20px; border-top:1px solid var(--line); color:var(--muted); }
.footer-purpose { max-width:800px; margin-bottom:24px; }
.footer-purpose h2 { font-size:14px; color:var(--ink); margin:0 0 8px; }
.footer-purpose p { font-size:13px; line-height:1.7; margin:0; }
.footer-purpose p + p { margin-top:12px; }
.footer-attribution a,.purpose-reference { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.footer-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; font-size:11px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip { position:fixed; top:-100px; left:20px; background:white; padding:10px; z-index:10; }
.skip:focus { top:10px; }
@media(max-width:1000px) {
  .page { padding:0 28px; }
  .masthead nav { display:none; }
  .phrases { grid-template-columns:repeat(2,1fr); }
  .feedback-section { gap:30px; }
}
@media(max-width:700px) {
  .page { padding:0 18px; }
  .masthead { min-height:90px; gap:12px; }
  .brand { font-size:16px; gap:9px; }
  .brand img { width:31px; height:31px; }
  .brand-script { font-size:21px; }
  .pilot-badge { display:none; }
  .account { gap:5px; }
  .introduction { padding:24px 0 17px; }
  h1 { font-size:25px; }
  .introduction p { font-size:13px; }
  .review-notice { font-size:12px; padding:11px 13px; }
  .workspace-heading { padding:17px 19px; }
  .workspace-heading h2 { font-size:18px; }
  .session-status { display:none; }
  .signin-notice { flex-direction:column; align-items:flex-start; gap:12px; padding:17px 19px; }
  .translator-grid { grid-template-columns:1fr; }
  .english-panel { border-right:0; border-bottom:1px solid var(--line); }
  .language-panel { padding:19px; }
  .empty-state { min-height:105px; }
  .workspace-footer { display:block; padding:13px 19px; }
  .workspace-footer>span { display:block; margin-top:7px; }
  .preview-banner { padding:11px 19px; }
  .section-heading { display:block; }
  .section-heading h2 { margin-bottom:12px; }
  .categories { display:inline-flex; }
  .phrase { padding:12px 11px; }
  .feedback-section { grid-template-columns:1fr; gap:23px; padding:26px 0; }
  .feedback-intro p { max-width:none; }
  .rating-row { gap:10px; font-size:12px; }
  select { min-width:0; max-width:65%; width:225px; font-size:11px; }
  .how-section { grid-template-columns:1fr; gap:22px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }