:root { --sc-surface:#fff; --sc-editor:#fff; --sc-tint:#f5faff; }
.singlish-hero .page-title { font-size:clamp(32px,3.2vw,52px); line-height:1.25; white-space:nowrap; max-width:100%; }
.singlish-hero .page-title .sc-heading-singlish { color:#E33384 !important; }
.singlish-hero .page-title .sc-heading-sinhala { color:#185AFC !important; }
.singlish-hero .page-title .sc-heading-online { color:#2C2E7E !important; }
:root[data-theme="dark"] { --sc-surface:#121c2d; --sc-editor:#0c1320; --sc-tint:#182438; }
:root .converter-surface.singlish-workspace { padding:24px 0 12px; border:0 !important; background:transparent !important; box-shadow:none !important; }
.singlish-page .sinkey-banner { margin-top:-36px; }
.sc-panels { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.sc-card { display:flex; flex-direction:column; gap:16px; min-width:0; padding:20px; border:1px solid var(--line); border-radius:24px; background:var(--sc-surface); box-shadow:0 12px 32px rgba(7,22,54,.04); }
.sc-card-head { display:flex; align-items:center; gap:10px; min-height:52px; }
.sc-card-head h2 { margin:0; min-width:0; font-size:18px; line-height:1.35; color:var(--ink); font-weight:700; }
.sc-step { display:grid; place-items:center; min-width:36px; height:36px; border-radius:12px; color:#0767ed; background:#eaf3ff; font-size:21px; font-weight:800; }
.sc-output-card .sc-step { color:#1b963b; background:#e8f8ed; }
:root[data-theme="dark"] .sc-step { color:#75b1ff; background:#203752; }
:root[data-theme="dark"] .sc-output-card .sc-step { color:#6bda85; background:#183529; }
.sc-card-head > .sc-icon { margin-left:auto; }
.sc-format-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--line); border-radius:13px; background:var(--sc-tint); }
.sc-format-tabs button { min-width:0; min-height:44px; padding:8px 4px; border:1px solid transparent; border-radius:9px; font:700 14px var(--font-sans); color:var(--muted); background:transparent; cursor:pointer; transition:background-color .18s,color .18s; }
.sc-format-tabs button:hover { color:var(--blue); }
.sc-format-tabs button[aria-pressed="true"] { color:var(--blue); background:var(--sc-editor); border-color:var(--line); box-shadow:0 2px 6px rgba(7,22,54,.06); }
.sc-text-box { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--sc-editor); overflow:hidden; }
.sc-text-box:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(7,95,221,.09); }
.singlish-workspace .sc-text-box :is(#inputText,#unicodeText) { display:block; width:100%; height:244px; min-height:var(--sc-editor-min-height,310px); max-height:none; padding:20px 20px 12px; border:0; border-radius:0; outline:none; box-shadow:none; background:transparent !important; color:var(--ink); font:400 24px/1.65 var(--font-sans); resize:none; overflow-y:hidden; }
.singlish-workspace .sc-text-box :is(#inputText,#unicodeText)[data-format="unicode"] { font-family:var(--font-sinhala); line-height:1.85; }
.singlish-workspace .sc-text-box :is(#inputText,#unicodeText):is([data-format="fm"],[data-format="isi"]) { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:20px; }
.sc-text-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px 12px; }
.sc-text-toolbar > div { display:flex; gap:8px; }
.sc-text-toolbar > span { font-size:12px; color:var(--muted); white-space:nowrap; }
.sc-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; min-width:36px; padding:6px; border:0; border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; }
.sc-icon svg { width:22px; height:22px; }
.sc-icon:hover { background:var(--sc-tint); color:var(--blue); }
.sc-icon[aria-pressed="true"] { color:var(--pink); background:var(--sc-tint); }
.sc-icon:disabled { opacity:.45; cursor:not-allowed; }
.sc-text-toolbar [data-action="copy"] { position:relative; }
.sc-copied-label { position:absolute; bottom:calc(100% + 8px); left:0; padding:5px 9px; border-radius:7px; background:var(--ink); color:var(--sc-surface); font:600 12px/1.4 var(--font-sans); white-space:nowrap; pointer-events:none; z-index:5; }
.sc-copied-label[hidden] { display:none; }
:root .singlish-workspace .sc-copied-label { background:#eaf1ff; color:#185AFC; border:1px solid #c9d9ff; box-shadow:0 3px 10px rgba(24,90,252,.08); }
:root[data-theme="dark"] .singlish-workspace .sc-copied-label { background:#203752; color:#a9ceff; border-color:#415b7c; }
.singlish-workspace .sc-icon.converter-mic { flex:0 0 36px; border-radius:50%; }
:root .singlish-workspace .sc-icon.converter-mic:is(:hover,:focus-visible) { color:#dc3545 !important; background:rgba(220,53,69,.12); }
:root .singlish-workspace .sc-icon.converter-mic.is-listening { color:#dc3545 !important; background:rgba(220,53,69,.14); animation:sc-mic-recording 2.4s ease-in-out infinite; }
@keyframes sc-mic-recording {
  0%,100% { background:rgba(220,53,69,.10); box-shadow:0 0 0 0 rgba(220,53,69,0); }
  50% { background:rgba(220,53,69,.18); box-shadow:0 0 0 5px rgba(220,53,69,.10); }
}
@media(prefers-reduced-motion:reduce) { :root .singlish-workspace .sc-icon.converter-mic.is-listening { animation:none; box-shadow:0 0 0 3px rgba(220,53,69,.16); } }
.sc-bottom-actions { display:flex; gap:10px; margin-top:auto; }
.sc-action { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:10px 18px; border:1px solid var(--line); border-radius:12px; font:700 14px var(--font-sans); color:var(--ink); background:var(--sc-editor); cursor:pointer; transition:background-color .18s,border-color .18s; }
.sc-action svg { width:20px; height:20px; flex-shrink:0; }
.sc-action:hover { border-color:var(--blue); background:var(--sc-tint); }
.sc-primary { color:#fff; background:#075fdd; border-color:#075fdd; box-shadow:0 8px 18px rgba(7,95,221,.15); }
.sc-primary:hover { background:#0969e8; }
.sc-input-card .sc-primary { flex:1; }
.sc-output-card .sc-action { flex:1; padding:10px; }
.sc-swap { position:absolute; z-index:2; top:50%; left:50%; display:grid; place-items:center; width:52px; height:52px; padding:14px; border:1px solid var(--line); border-radius:50%; transform:translate(-50%,-50%); background:var(--sc-surface); color:var(--blue); cursor:pointer; box-shadow:0 5px 20px rgba(7,22,54,.06); }
.sc-swap svg { width:24px; height:24px; }
.sc-swap:hover { background:var(--sc-tint); }
.sc-format-hint { margin:0; color:var(--muted); font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.sc-text-box .sc-format-hint { height:44px; min-height:44px; flex:0 0 44px; padding:0 18px 8px; overflow:auto; color:var(--blue); font:italic 400 18px/1.8 var(--font-sinhala); }
.sc-status { color:var(--muted); font-size:13px; min-height:20px; margin:12px 0 4px; }
.sc-keyboard-switch { display:flex; gap:12px; flex-wrap:wrap; }
.sc-keyboard-switch .sc-action[aria-expanded="true"] { color:#fff; border-color:#075fdd; background:#075fdd; }
.sc-keyboard { margin-top:18px; border:1px solid var(--line); border-radius:20px; padding:20px; background:var(--sc-surface); }
.sc-keyboard[hidden],.sc-format-hint[hidden] { display:none; }
.sc-keyboard-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.sc-keyboard-head h3 { margin:0 0 6px; color:var(--ink); }
.sc-keyboard-head p { margin:0; font-size:13px; color:var(--muted); }
#virtualKeyboard.sc-keyboard { position:fixed; z-index:60; left:50%; bottom:16px; transform:translateX(-50%); width:min(820px,calc(100% - 20px)); max-height:calc(100dvh - 24px); margin:0; padding:0; border-radius:14px; background:var(--sc-surface); opacity:1; visibility:visible; box-shadow:0 16px 50px rgba(0,0,0,.28); overflow:hidden; }
#virtualKeyboard .sc-keyboard-head { height:50px; gap:4px; padding:0 6px 0 4px; margin:0; cursor:grab; touch-action:none; user-select:none; }
#virtualKeyboard .sc-keyboard-head:active { cursor:grabbing; }
.sc-keyboard-grip { width:36px; flex-shrink:0; text-align:center; color:var(--muted); font-size:24px; }
.sc-keyboard-modes { position:relative; display:flex; align-self:stretch; flex:1; min-width:0; }
.sc-keyboard-modes::after { content:""; position:absolute; bottom:0; left:0; width:50%; height:2px; background:var(--blue); transform:translateX(0); transition:transform 300ms cubic-bezier(.22,1,.36,1); pointer-events:none; }
.sc-keyboard-modes:has([data-keyboard-layout="fm"][aria-pressed="true"])::after { transform:translateX(100%); }
.sc-keyboard-modes button { flex:1; min-width:0; padding:0 8px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font:600 14px var(--font-sans); cursor:grab; }
.sc-keyboard-modes button:active { cursor:grabbing; }
.sc-keyboard-modes button[aria-pressed="true"] { color:var(--ink); }
@media(prefers-reduced-motion:reduce) { .sc-keyboard-modes::after { transition:none; } }
#virtualKeyboard #keyboardKeys { padding:0 14px 14px; height:min(238px,48dvh); max-height:min(48dvh,360px); overflow:auto; overscroll-behavior:contain; }
#virtualKeyboard #keyboardKeys:not(.is-legacy) { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); height:238px; align-content:start; }
#virtualKeyboard .sc-key { min-height:54px; padding:5px; gap:3px; border:0; border-radius:3px; background:var(--sc-tint); }
#virtualKeyboard .sc-key small { order:-1; }
#virtualKeyboard .sc-key strong { font-size:18px; }
#virtualKeyboard .sc-key-row { min-width:720px; min-height:40px; margin:3px 0; }
#virtualKeyboard .sc-key-row .sc-key { height:38px; min-height:38px; font-size:15px; }
#virtualKeyboard .sc-key-row .sc-key[aria-pressed="true"] { background:var(--blue); color:var(--sc-surface); }
#virtualKeyboard .sc-key-row:nth-child(2) { padding-left:70px; }
.sc-keyboard-keys { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; }
.sc-key { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:64px; padding:8px 4px; border:1px solid var(--line); border-radius:10px; background:var(--sc-editor); color:var(--ink); cursor:pointer; }
.sc-key strong { font:500 20px var(--font-sinhala); }
.sc-key small { color:var(--muted); font:600 11px var(--font-sans); }
.sc-key:hover { border-color:var(--blue); background:var(--sc-tint); }
.sc-key[aria-pressed="true"] { border-color:var(--blue); background:var(--sc-tint); color:var(--blue); }
.sc-keyboard-keys.is-legacy { display:block; overflow-x:auto; padding-bottom:6px; }
.sc-key-row { display:flex; gap:6px; min-width:690px; margin:6px 0; }
.sc-key-row .sc-key { min-height:46px; flex:1; min-width:35px; font:500 18px var(--font-sinhala); }
.sc-key-row .sc-key.is-wide { flex:1.6; font:600 12px var(--font-sans); }
.sc-key-row .sc-key.is-space { flex:7; }
.sc-key:disabled { visibility:visible; color:transparent; cursor:default; }
.sc-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.singlish-workspace button:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
@media(max-width:1024px) {
 .sc-card { padding:16px; }
 .sc-card-head { flex-wrap:nowrap; }
 .sc-card-head h2 { font-size:16px; }
}
@media(max-width:760px) {
 .sc-panels { grid-template-columns:minmax(0,1fr); gap:20px; }
 .sc-swap { top:initial; bottom:calc(50% - 26px); left:initial; right:8px; transform:rotate(90deg); width:44px; height:44px; padding:10px; }
 .sc-card-head { flex-wrap:nowrap; }
 .sc-card { padding:16px; border-radius:20px; }
 .sc-card-head h2 { font-size:15px; }
 .sc-step { min-width:30px; height:32px; font-size:18px; }
 .sc-output-card .sc-card-head { gap:6px; }
 .singlish-workspace .sc-text-box :is(#inputText,#unicodeText) { height:200px; padding:16px; font-size:20px; }
 .sc-action { padding:10px 12px; font-size:13px; }
 .sc-keyboard { padding:14px; }
}
@media(max-width:380px) {
 .sc-output-card .sc-card-head > .sc-icon { display:none; }
 .sc-card-head h2 { font-size:14px; }
 .sc-output-card .sc-action { gap:5px; font-size:12px; padding:10px 7px; }
}
@media(prefers-reduced-motion:reduce) { .sc-action,.sc-format-tabs button { transition:none; } }

.sc-saved { margin-top:18px; padding:16px; background:var(--sc-surface); border:1px solid var(--line); border-radius:16px; color:var(--ink); }
.sc-saved[hidden] { display:none; }
.sc-saved summary { cursor:pointer; font-weight:700; }
.sc-saved-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.sc-saved-row p { flex:1 1 240px; margin:0; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.sc-saved-row .sc-action { min-height:36px; padding:6px 12px; font-size:12px; }

.sc-keyboard-keys:not(.is-legacy) { max-height:300px; overflow-y:auto; align-content:start; }

@media(max-width:380px) { .sc-output-card .sc-bottom-actions .sc-action { flex-direction:column; gap:4px; min-height:54px; } }

/* Compact editor layout: formats sit directly above the text area. */
.sc-card { --sc-accent:#185AFC; --sc-frame:#aebed3; gap:0; padding:0; border:2px solid var(--sc-frame); border-radius:16px; box-shadow:none; }
:root[data-theme="dark"] .sc-card { --sc-frame:#63758e; }
.sc-card:has(.sc-format-tabs [data-format="unicode"][aria-pressed="true"]) { --sc-accent:#2C2E7E; }
.sc-card:has(.sc-format-tabs [data-format="fm"][aria-pressed="true"]) { --sc-accent:#E33384; }
.sc-card:has(.sc-format-tabs [data-format="isi"][aria-pressed="true"]) { --sc-accent:#FAC439; }
.sc-format-tabs { padding:0; gap:0; background:transparent; border:0; border-radius:14px 14px 0 0; overflow:hidden; }
.sc-format-tabs button { min-height:44px; border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; background:var(--sc-tint); font-size:14px; }
.sc-format-tabs button[aria-pressed="true"] { background:var(--sc-accent); border-color:var(--sc-accent); box-shadow:none; color:#fff; }
.sc-format-tabs button[data-format="isi"][aria-pressed="true"] { color:#071636; }
.sc-format-tabs button:focus-visible { outline:2px solid var(--sc-accent); outline-offset:-4px; }
.sc-text-box { position:relative; border:0; border-top:1px solid color-mix(in srgb,var(--sc-accent) 35%,transparent); border-radius:0 0 14px 14px; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--sc-accent) 30%,transparent); }
.sc-text-box:focus-within { border-color:color-mix(in srgb,var(--sc-accent) 35%,transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--sc-accent) 30%,transparent); }
.sc-text-box.sc-outline-drawing { border-top:0; box-shadow:none; }
.sc-mode-outline { position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:2; }
.sc-mode-outline path { fill:none; stroke:var(--sc-accent); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0; opacity:0; }
.singlish-workspace .sc-swap { z-index:4; }
.singlish-workspace .sc-text-box :is(#inputText,#unicodeText) { --sc-editor-min-height:310px; height:310px; padding:18px 44px 12px 18px; font-size:22px; }
.sc-editor-corner { position:absolute; right:8px; top:8px; z-index:1; font-size:25px; }
.sc-input-card .sc-editor-corner[data-action="clear"] { border-radius:50%; }
.sc-input-card .sc-editor-corner[data-action="clear"]:is(:hover,:focus-visible) { color:#dc3545; background:rgba(220,53,69,.12); }
#saveOutput[aria-pressed="true"] { color:#FAC439; }
#saveOutput[aria-pressed="true"] svg { fill:#FAC439; stroke:#FAC439; }
#virtualKeyboard #closeKeyboard { border-radius:50%; }
#virtualKeyboard #closeKeyboard:is(:hover,:focus-visible) { color:#dc3545; background:rgba(220,53,69,.12); }
.sc-library-buttons { display:flex; justify-content:center; gap:10px; margin-top:18px; }
.sc-library-buttons .sc-action[aria-expanded="true"] { border-color:var(--blue); color:var(--blue); background:var(--sc-tint); }
.sc-library-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sc-saved h3 { margin:0; font-size:17px; }
.sc-library-note { font-size:13px; color:var(--muted); }
.sc-saved-row p { white-space:pre-wrap; }
.sc-status:empty { display:none; }
@media(max-width:760px) { .singlish-workspace .sc-text-box :is(#inputText,#unicodeText) { --sc-editor-min-height:240px; height:240px; font-size:20px; } }

/* Use the same transparent coastal artwork in both themes. */
.singlish-page main { isolation:isolate; }
.converter-hero-scene { position:relative; isolation:isolate; width:100%; }
.converter-hero-scene::before { content:""; position:absolute; z-index:-1; pointer-events:none; inset:0; background-position:center -48px; background-size:100% auto; background-repeat:no-repeat; transition:opacity 360ms ease; }
.converter-hero-scene::before { background-image:url('/assets/converter-coast-dark.png'); opacity:.35; }
.sc-panels .sc-card { background:transparent; backdrop-filter:none; }
:root[data-theme="dark"] .converter-hero-scene::before { opacity:.7; }

/* The browser's page cross-fade already animates these layers as snapshots. */
html:active-view-transition .converter-hero-scene::before { transition:none; }
:root.theme-transitioning .converter-hero-scene::before { transition:opacity 360ms ease !important; }
@media(prefers-reduced-motion:reduce) { .converter-hero-scene::before,.converter-hero-scene::after { transition:none; } }

/* Conversion library dialogs. */
html:has(.sc-library-dialog[open]) { overflow:hidden; }
.sc-library-dialog { width:min(560px,calc(100% - 32px)); height:min(740px,calc(100dvh - 48px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid var(--line); border-radius:22px; background:var(--sc-surface); color:var(--ink); box-shadow:0 24px 80px rgba(0,0,0,.28); overflow:hidden; }
.sc-library-dialog[open] { display:flex; flex-direction:column; }
.sc-library-dialog::backdrop { background:rgba(0,0,0,.6); }
.sc-modal-head { display:flex; align-items:center; justify-content:space-between; padding:22px 26px 12px; }
.sc-modal-head h2 { margin:0; font-size:28px; }
.sc-modal-head .sc-icon { font-size:28px; border-radius:50%; }
.sc-modal-head .sc-icon:hover { background:rgba(220,53,69,.12); color:#dc3545; }
.sc-modal-tools { display:flex; justify-content:flex-end; padding:12px 24px; border-bottom:1px solid var(--line); }
.sc-modal-tools .sc-action { min-height:32px; padding:0; border:0; background:transparent; color:var(--blue); }
.sc-modal-tools [hidden] { display:none; }
.sc-modal-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.sc-library-dialog .sc-saved { margin:0; padding:0; border:0; background:transparent; border-radius:0; }
.sc-library-dialog .sc-library-head,.sc-library-dialog .sc-library-note,.sc-library-dialog #savedTextsTitle { display:none; }
.sc-library-dialog .sc-saved-row { position:relative; display:block; margin:0; padding:22px 26px; border:0; border-bottom:1px solid var(--line); }
.sc-entry-title { display:block; padding-right:72px; font-size:14px; }
.sc-library-dialog .sc-entry-text { display:block; margin:14px 0 0; padding:0; font-size:17px; line-height:1.6; overflow-wrap:anywhere; white-space:normal; }
.sc-entry-output { color:var(--muted); }
.sc-entry-menu { position:absolute; right:18px; top:18px; z-index:2; }
.sc-entry-menu[open] { z-index:3; }
.sc-entry-menu summary { display:grid; place-items:center; width:32px; height:32px; list-style:none; cursor:pointer; color:var(--muted); font-size:25px; border-radius:8px; }
.sc-entry-menu summary::-webkit-details-marker { display:none; }
.sc-entry-actions { position:absolute; top:34px; right:0; width:190px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--sc-surface); box-shadow:0 12px 30px rgba(0,0,0,.18); }
.sc-entry-actions .sc-action { display:block; width:100%; text-align:left; border:0; background:transparent; }
.sc-entry-actions .sc-action:hover { background:var(--sc-tint); }
.sc-entry-star { position:absolute; top:18px; right:58px; width:32px; height:32px; padding:0; border:0; background:transparent; color:var(--muted); font-size:27px; cursor:pointer; }
.sc-entry-star[aria-pressed="true"] { color:var(--blue); }
.sc-modal-content .sc-saved > div > p { padding:24px; color:var(--muted); }

.sc-library-dialog .sc-saved-row { cursor:pointer; }
.sc-library-dialog .sc-saved-row:hover { background:var(--sc-tint); }
.sc-library-dialog .sc-saved-row:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.sc-library-dialog .sc-entry-text { padding-right:64px; }