/* ==========================================================================
   FORCE SF PRO ARABIC ACROSS ALL PLATFORMS (DESKTOP & MOBILE)
   ========================================================================== */
@font-face {
    font-family: "SF Pro Arabic";
    src: local("SF Pro Arabic"), local("SF Arabic"), url("/static/fonts/SFArabic.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* , body, button, input, textarea, select, h1, h2, h3, h4, h5, h6, .badge, [class*="dialect"] {
    font-family: "SF Pro Arabic", "SF Arabic", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

:root{--bg:#f5f2ea;--card:#fffdf8;--text:#0f1f38;--muted:#5c6470;--line:#d7c9ad;--primary:#795716;--hover:#62430d;--soft:#eee5d3;--sand:#f3e9d3;--accent:#b99a58;--on-primary:#fffdf8;--button-bg:linear-gradient(135deg,#8a682a,#795716);--button-hover:linear-gradient(135deg,#795716,#62430d);--shadow:0 10px 30px -8px #0f1f3814;--radius:22px;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Tahoma,Arial,sans-serif;line-height:1.75;font-size:15px}body.dark{--bg:#081220;--card:#0f1f38;--text:#f8fafc;--muted:#aebbd0;--line:#c5a05940;--primary:#c5a059;--hover:#e5c378;--soft:#c5a05919;--sand:#13233d;--accent:#c5a059;--on-primary:#081220;--button-bg:linear-gradient(135deg,#ddbe7c,#c5a059);--button-hover:linear-gradient(135deg,#e5c378,#d3ad63);--shadow:0 10px 30px -5px #00000059;color-scheme:dark}body.blue{--primary:#406995;--hover:#2c527b;--soft:#eaf0f8;--button-bg:linear-gradient(135deg,#406995,#2c527b);--button-hover:#244867}body.dark.blue{--primary:#a3c4ed;--soft:#25384c;--button-bg:linear-gradient(135deg,#b9d2f1,#a3c4ed);--button-hover:#c9def6}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:2px}input,textarea,select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text);background:var(--card);font-size:15px}textarea{resize:vertical;min-height:140px;line-height:2.1}h1,h2,h3,p{margin-top:0}h1{font-size:36px;line-height:1.6;font-weight:750;letter-spacing:-.7px;margin-bottom:10px}h2{font-size:19px;margin-bottom:16px}h3{font-size:17px;margin-bottom:7px}p{line-height:1.9}em{font-style:normal;color:var(--primary)}small{font-size:12px}.muted,.form-hint{color:var(--muted)}[hidden]{display:none!important}.row{display:flex;align-items:center;gap:12px}.spread{justify-content:space-between}.push{margin-inline-start:auto}.wide{width:100%}.primary{display:inline-flex;justify-content:center;align-items:center;gap:14px;background:var(--primary);color:#fff;padding:12px 23px;border-radius:12px;font-weight:700;min-height:48px;transition:background .15s,transform .15s}.primary:hover{background:var(--hover);transform:translateY(-1px)}.quiet{color:var(--primary);padding:9px 12px;border-radius:10px;min-height:42px}.quiet:hover{background:var(--soft)}.pill{display:inline-flex;align-items:center;gap:6px;background:var(--soft);color:var(--primary);padding:4px 12px;font-size:12px;border-radius:30px;white-space:nowrap}.notice{border:1px solid var(--line);border-right:3px solid var(--accent);background:var(--sand);padding:12px 17px;border-radius:12px;margin-bottom:22px;font-size:14px}.error{background:var(--sand);border:1px solid var(--accent);border-radius:12px;padding:15px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);margin-bottom:22px;min-width:0}.card-heading{display:flex;align-items:center;gap:10px;margin-bottom:22px}.card-heading h2{margin:0}.step{width:27px;height:27px;background:var(--soft);border-radius:50%;color:var(--primary);display:grid;place-items:center;font-size:13px}.step.soft{background:var(--sand);color:var(--accent)}.eyebrow{display:block;color:var(--primary);font-size:13px;font-weight:600;margin-bottom:12px}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:750;white-space:nowrap}.brand small{display:block;color:var(--muted);font-size:11px;font-weight:400}.brand-mark{width:44px;height:48px;border:1px solid var(--primary);background:var(--primary);color:#fff;display:grid;place-items:center;border-radius:15px 15px 4px 15px;font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:400}.sidebar{position:fixed;inset:0 0 0 auto;width:245px;padding:30px 18px 18px;border-left:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;z-index:20}.sidebar .brand{margin:0 9px 32px}.nav-caption{color:var(--muted);font-size:11px;padding:0 16px;margin-bottom:12px}.sidebar nav{overflow:auto;min-height:0}.nav-link{display:flex;align-items:center;gap:13px;padding:11px 16px;width:100%;text-align:right;border-radius:11px;margin-bottom:3px;font-size:14px}.nav-link span{font-size:20px;min-width:22px;text-align:center;color:var(--muted)}.nav-link.active{background:var(--soft);color:var(--primary);font-weight:700}.nav-link.active span{color:var(--primary)}.nav-link:hover{background:var(--bg)}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;font-size:12px}.sidebar-foot a{display:block;padding:4px 12px;color:var(--muted)}.sidebar-foot p{font-size:10px;color:var(--muted);margin:14px 12px 0}.desktop-shell{margin-right:245px}.desktop-header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:var(--card)}.breadcrumb{color:var(--muted);font-size:12px}.breadcrumb span{padding:0 16px;color:var(--line)}.breadcrumb strong{color:var(--text)}.profile-mini{display:flex;gap:9px;align-items:center;font-size:12px}.profile-mini>span:first-child{width:34px;height:34px;background:var(--soft);border-radius:50%;display:grid;place-items:center;font-size:20px}.desktop main{max-width:1550px;padding:28px 42px 15px;margin:auto}.hero{display:flex;justify-content:space-between;align-items:center;min-height:230px;margin-bottom:24px}.hero h1{font-size:38px;line-height:1.65;margin-bottom:8px}.hero p{color:var(--muted);font-size:14px;margin-bottom:0}.hero-art{position:relative;width:255px;height:210px;display:grid;place-items:center;flex-shrink:0;overflow:hidden}.hero-letter{font:145px Georgia,"Times New Roman",serif;color:var(--primary);transform:rotate(-9deg);z-index:2}.orbit{position:absolute;width:180px;height:180px;border:1px solid var(--line);border-radius:45% 55% 48% 52%;transform:rotate(27deg)}.o2{transform:rotate(70deg);width:215px;height:155px;border-color:#b99a5850;background:radial-gradient(ellipse,#c5a05925,transparent 75%)}.art-label{position:absolute;bottom:3px;left:0;background:var(--card);border:1px solid var(--line);padding:5px 14px;border-radius:30px;font-size:11px;transform:rotate(-6deg)}.translation-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.composer,.result-card{margin-bottom:0}.field{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--bg)}.field textarea{background:transparent;border:0;border-radius:12px 12px 0 0;min-height:150px;font-size:17px;padding:18px}.input-footer{display:flex;justify-content:space-between;align-items:center;padding:0 10px 7px;gap:8px;font-size:11px}.input-footer .quiet{font-size:13px}.selectors{margin:19px 0;align-items:flex-end;flex-wrap:wrap}.selectors label{flex:1;min-width:140px}.selectors .primary{flex-shrink:0}label{display:block;font-size:13px;font-weight:600;margin-bottom:10px}label input,label textarea,label select{display:block;margin-top:7px;font-weight:400}.small-label{font-size:12px;margin-bottom:8px}.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;background:var(--bg);padding:5px;border:1px solid var(--line);border-radius:12px;margin-bottom:20px}.segments button{padding:6px 8px;border-radius:9px;min-height:53px;font-size:14px}.segments small{display:block;font-size:10px;color:var(--muted)}.segments .selected{background:var(--card);color:var(--primary);box-shadow:0 2px 8px #00000009;font-weight:700}.form-hint{text-align:center;font-size:11px;margin:10px 0 0}.result-card{display:flex;flex-direction:column;background:linear-gradient(150deg,var(--card),var(--soft));border-color:var(--line)}.result-area{flex:1;min-height:280px}.empty{height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:20px}.empty>span{font:56px Georgia,serif;color:var(--primary);opacity:.65;margin-bottom:20px}.empty h3{font-weight:500;color:var(--text)}.empty p{font-size:13px}.result-actions{border-top:1px solid var(--line);padding-top:10px;margin-top:15px;justify-content:flex-end}.fusha{font-size:23px;line-height:2.1;padding:12px 0;margin:0 0 20px;white-space:pre-wrap;overflow-wrap:anywhere}.explanation{font-size:14px}.change{padding:11px 0;border-top:1px solid var(--line);font-size:13px}.change p{margin:4px 0;color:var(--muted);font-size:12px}.change del{color:var(--muted)}.section-line{display:flex;justify-content:space-between;align-items:center;margin:30px 0 14px}.section-line h2{font-size:18px;margin:0}.section-line span{font-size:12px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.quick-card{display:flex;gap:13px;align-items:center;text-align:right;padding:19px 16px;background:var(--card);border:1px solid var(--line);border-radius:16px;transition:transform .15s}.quick-card:hover{transform:translateY(-3px);border-color:var(--accent)}.quick-card h3{font-size:14px;margin:0 0 4px}.quick-card p{font-size:10px;color:var(--muted);margin:0}.quick-card>span:last-child{margin-right:auto}.tile-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;font-size:23px;flex-shrink:0}.gold,.green{background:var(--soft);color:var(--primary)}.amber{background:var(--sand);color:#795716}.lavender{background:#eeeafa;color:#7b6b9b}.desktop-footer{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;padding:28px 42px}.section-title{margin:18px 0 30px}.section-title p{color:var(--muted)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}.stat strong{display:block;font-size:30px;font-weight:600;color:var(--primary)}.stat span{font-size:12px;color:var(--muted)}.compact{grid-template-columns:repeat(2,1fr)}.compact .stat{padding:12px}.compact .stat strong{font-size:22px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.chip{padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:var(--soft);font-size:13px}.chart{display:flex;align-items:end;gap:9px;height:210px;padding:16px 0;overflow:auto;direction:ltr}.chart-column{display:flex;flex-direction:column;justify-content:end;align-items:center;height:100%;min-width:26px;flex:1;font-size:10px}.chart progress{width:100%;height:18px;accent-color:var(--primary)}.chart-bar{width:100%;max-width:38px;background:var(--primary);border-radius:7px 7px 0 0;min-height:2px}.dialect-row{display:grid;grid-template-columns:150px 1fr 30px;gap:15px;align-items:center;margin:12px 0}.dialect-row progress{width:100%;accent-color:var(--primary)}.activity{margin-top:25px}.question{padding:20px 0;border-top:1px solid var(--line)}.question:first-child{border-top:0}.question legend{padding:0;font-weight:600}.question fieldset{border:0;padding:0;margin:0}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.choice{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg);font-size:14px;font-weight:400;cursor:pointer;margin:0}.choice:has(input:checked){border-color:var(--primary);background:var(--soft)}.choice input{width:auto;margin:0;accent-color:var(--primary)}.game-picker{margin-bottom:24px}.word-bank{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.word-bank button{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:12px 17px;font-size:18px}.word-bank button.selected{background:var(--primary);color:var(--card)}.word-answer{background:var(--soft);border:1px dashed var(--primary);min-height:72px;border-radius:12px;padding:15px;font-size:20px}.feedback{background:var(--soft);border-radius:14px;padding:20px;margin:15px 0}.feedback h2{color:var(--primary)}.feedback p{margin-bottom:8px}.feedback-item{padding:12px 0;border-top:1px solid var(--line)}.weekly-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.weekly-task{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--card);margin-bottom:10px}.weekly-task.done{background:var(--soft)}.weekly-task small{color:var(--muted)}.weekly-task h3{margin:14px 0}.reading-content{max-width:750px;margin:30px auto}.reading-content .literary{font:25px/2.2 Georgia,"Times New Roman",serif;white-space:pre-wrap}.reading-content small{color:var(--muted)}.chat-card{max-width:900px}.chat-log{max-height:460px;min-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:10px 0 20px}.message{padding:16px 20px;border-radius:18px;max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere}.message.assistant{background:var(--soft);align-self:flex-start;border-top-right-radius:3px}.message.user{background:var(--primary);color:#fff;align-self:flex-end;border-top-left-radius:3px}.chat-form{display:flex;gap:10px;border-top:1px solid var(--line);padding-top:20px}.chat-form input{min-width:0}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.shop-item{text-align:center}.shop-item .tile-icon{margin:0 auto 20px;width:65px;height:65px}.profile-banner{padding:15px;text-align:center;border-radius:16px;background:var(--soft);margin-bottom:22px}.big-avatar{display:block;font-size:56px}.garden .profile-banner{background:repeating-linear-gradient(35deg,var(--soft),var(--soft) 15px,var(--card) 15px,var(--card) 30px)}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--card);border-radius:12px;padding:13px 22px;z-index:100;max-width:90%;box-shadow:0 10px 40px #0002}.loading{display:flex;align-items:center;justify-content:center;gap:15px;padding:40px;min-height:140px;color:var(--primary)}.spinner{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--primary);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;top:-100px;padding:10px;background:var(--card);z-index:100}.skip:focus{top:0}.mobile-header{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);padding:12px 15px;z-index:30;padding-top:max(12px,env(safe-area-inset-top))}.mobile-header .brand{font-size:18px;gap:9px}.mobile-header .brand-mark{width:30px;height:34px;font-size:24px;border-radius:10px 10px 3px 10px}.icon-btn{font-size:23px;background:var(--soft);border-radius:12px;width:44px;height:44px;display:grid;place-items:center}.mobile main{max-width:680px;margin:auto;padding:22px 17px 110px}.mobile .hero{min-height:auto;margin:10px 0 25px}.mobile .hero h1{font-size:29px}.mobile .hero-art{width:95px;height:150px}.mobile .hero-letter{font-size:80px}.mobile .orbit{width:100px;height:110px}.mobile .o2{width:120px;height:100px}.mobile .art-label{display:none}.mobile .hero p{font-size:12px}.mobile .eyebrow{font-size:11px}.mobile .translation-grid,.mobile .two-col{grid-template-columns:1fr;gap:16px}.mobile .card{padding:20px;border-radius:20px;margin-bottom:16px}.mobile .result-area{min-height:160px}.mobile .empty{min-height:170px}.mobile .hero h1 br{display:none}.mobile .hero h1 em{display:block}.mobile .hero>div:first-child{flex:1}.mobile .hero-art{margin-right:5px}.mobile .quick-grid{grid-template-columns:1fr}.mobile .quick-card{padding:17px}.mobile .quick-card p{font-size:12px}.mobile .section-line span{display:none}.mobile .section-line h2{font-size:18px}.mobile .section-title{margin:5px 0 25px}.mobile h1{font-size:28px}.mobile .section-title p{font-size:13px}.mobile .stats-grid{grid-template-columns:1fr 1fr}.mobile .stat{padding:16px}.mobile .stat strong{font-size:25px}.mobile .choices{grid-template-columns:1fr}.mobile .weekly-grid,.mobile .shop-grid{grid-template-columns:1fr}.mobile .chat-form{gap:6px}.mobile .chat-form .primary{padding:10px 15px}.mobile .chat-card{padding:16px}.mobile .chat-log{max-height:50vh}.mobile .notice{font-size:12px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:9px 6px max(9px,env(safe-area-inset-bottom));z-index:35;box-shadow:0 -5px 25px #00000004}.bottom-nav button{font-size:10px;color:var(--muted);border-radius:12px;padding:5px;min-height:52px}.bottom-nav span{display:block;font-size:22px;line-height:1.3;margin-bottom:3px}.bottom-nav button.active{background:var(--soft);color:var(--primary)}.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(85vw,340px);border:0;border-left:1px solid var(--line);background:var(--card);color:var(--text);padding:22px;overflow:auto}.drawer::backdrop{background:#0F1F3880;backdrop-filter:blur(3px)}.drawer h2{margin:0}.drawer nav{margin:25px 0}.mobile .toast{bottom:90px}.mobile .selectors{gap:10px}.mobile .selectors>label{min-width:120px}.mobile .selectors>.primary{width:100%}.mobile .dialect-row{grid-template-columns:100px 1fr 25px;font-size:12px}.mobile .row.spread{flex-wrap:wrap}.view{animation:appear .2s ease}@keyframes appear{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1150px){.desktop .sidebar{width:210px}.desktop .desktop-shell{margin-right:210px}.desktop main{padding:22px}.desktop .desktop-header{padding:0 22px}.desktop .quick-grid{grid-template-columns:1fr}.desktop .hero-art{width:170px}}@media(max-width:780px){.desktop .sidebar{width:175px;padding:15px 8px}.desktop .sidebar .brand{font-size:15px;gap:6px}.desktop .sidebar .brand-mark{width:30px;height:35px;font-size:24px}.desktop .desktop-shell{margin-right:175px}.desktop .translation-grid,.desktop .two-col{grid-template-columns:1fr}.desktop .hero-art{display:none}.desktop .hero h1{font-size:27px}.desktop .desktop-header{height:auto;min-height:75px;flex-wrap:wrap;padding:12px}.desktop .stats-grid,.desktop .weekly-grid,.desktop .shop-grid{grid-template-columns:1fr}.desktop .breadcrumb{display:none}.desktop .nav-link{font-size:12px}.desktop .points-pill{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Compact mobile composer: keep the primary action close to the input. */
.mobile .hero{margin-top:0}.mobile .hero h1{font-size:25px;line-height:1.5}.mobile .hero-art{width:76px;height:120px}.mobile .hero p{font-size:12px;line-height:1.7}.mobile .composer .field textarea{height:135px;min-height:110px;font-size:16px}.mobile .card-heading{margin-bottom:15px}.mobile .composer .selectors{margin:13px 0}.mobile .composer .segments{margin-bottom:14px}.chart-column svg{height:155px;width:100%;color:var(--primary)}
/* Writing workspaces share the existing palette and both device shells. */
.mode-tabs{display:flex;gap:8px;padding:6px;background:var(--soft);border:1px solid var(--line);border-radius:14px;margin-bottom:22px}.mode-tabs button{flex:1;min-height:48px;border-radius:10px;padding:9px 12px}.mode-tabs button[aria-selected=true]{background:var(--card);font-weight:700;color:var(--primary);box-shadow:var(--shadow)}.original-text{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px}.rubric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.rubric-item{background:var(--soft);border-radius:12px;padding:13px;font-size:13px}.rubric-item p{font-size:12px;margin:5px 0 0}.writing-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.writing-stats .stat b{font-size:13px}.writing-stats .stat strong{font-size:25px}#save-literature-form{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}#literature-file{max-width:100%;font-size:12px}#upload-status{margin:10px 0;color:var(--primary);overflow-wrap:anywhere}#expression-result,#humor-rewrite-result,#literature-refine-result{overflow-wrap:anywhere}.mobile .mode-tabs button{font-size:12px;padding:9px 6px}.mobile .rubric-grid,.mobile .writing-stats{grid-template-columns:1fr}.mobile #literature-library-panel .row{flex-wrap:wrap}[role=tabpanel] .two-col{align-items:start}

/* Showcase polish: preserve the existing shells, typography, and navy/gold identity. */
html { background: var(--bg); }
body { -webkit-font-smoothing: antialiased; }
button, input, select, textarea { transition: background-color .15s, border-color .15s, color .15s; }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled { opacity: .58; }
input, textarea, select, .nav-link, .profile-mini { min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .9; }
.primary { background: var(--button-bg); color: var(--on-primary); box-shadow: 0 4px 15px #79571622; }
.primary:hover:not(:disabled) { background: var(--button-hover); }
.dark .primary { box-shadow: 0 4px 15px #c5a05935; }
.brand-mark { background: var(--button-bg); color: var(--on-primary); border-color: var(--accent); box-shadow: 0 4px 14px #c5a05920; }
.message.user, .word-bank button.selected { color: var(--on-primary); }
.hero-letter { color: var(--primary); }
.pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.card-heading { flex-wrap: wrap; gap: 8px; }
.card-heading h2 { font-size: 18px; }
.result-card { background: linear-gradient(150deg,var(--card),var(--sand)); }
.result-area { overflow-wrap: anywhere; }
.fusha, .literary { line-height: 2.15; }
.sample-inputs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.sample-inputs .muted { font-size: 12px; }
.sample-inputs .chip { font-size: 12px; padding: 5px 11px; min-height: 36px; }
.segments { background: var(--bg); }
.segments button.selected { border: 1px solid var(--accent); }
.segments button { border: 1px solid transparent; }
.segments small { line-height: 1.5; }
.result-details { margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; }
.result-details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--primary); }
.result-details[open] summary { margin-bottom: 12px; }
.result-details .change:first-of-type { border-top: 0; }
.original-text { font-size: 15px; line-height: 2; }
.rubric-item strong { display: block; }
.nav-link:focus-visible, .chip:focus-visible, .choice:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.sidebar .nav-link { min-height: 43px; }
.sidebar .brand { font-size: 19px; }
.sidebar-foot { flex-shrink: 0; }
.quiet { border: 1px solid transparent; }
.result-actions .quiet { border-color: var(--line); }
.profile-mini { border-radius: 14px; padding: 7px 10px; }
.profile-mini [data-name] { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-banner h2, .quick-card h3, .feedback-item, .question legend { overflow-wrap: anywhere; }
.message { text-align: start; line-height: 1.95; }
.loading { flex-wrap: wrap; text-align: center; padding: 28px 16px; }
.loading-note { width: 100%; font-size: 12px; color: var(--muted); }
.error { margin-bottom: 16px; }
.error .quiet { margin-inline-start: 6px; }
.notice { overflow-wrap: anywhere; }
.dark .amber { color: #efd398; background: #3b3020; }
.dark .lavender { color: #d3bcff; background: #2d2945; }
.dark .segments button.selected { background: linear-gradient(135deg,#162a45,#0f1f38); box-shadow: 0 4px 14px #00000040; }
.dark .word-answer { color: var(--text); }
.dark .toast { background: #f1f5f9; color: #102039; }
.desktop-header { gap: 12px; }
.desktop-footer { gap: 12px; flex-wrap: wrap; }
.selectors label { max-width: 100%; }
.selectors select { min-width: 0; }
.dialect-row { grid-template-columns: minmax(90px,150px) minmax(0,1fr) 30px; }
.dialect-row span { overflow-wrap: anywhere; }
.dialect-row progress { min-width: 0; }
.stat { min-width: 0; }
.stat span { display: block; overflow-wrap: anywhere; }
.chart { scrollbar-width: thin; }
.mode-tabs button { overflow-wrap: anywhere; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.mobile .input-footer { flex-wrap: wrap; }
.mobile #voice-status:not(:empty) { flex-basis: 100%; order: 3; }
.mobile .card-heading .push { margin-inline-start: 0; }
.mobile .card-heading h2 { flex: 1; }
.mobile .result-details { padding: 10px 12px; }
.mobile .sample-inputs .chip { min-height: 40px; }
.mobile .hero-art { width: 72px; }
.mobile .fusha { font-size: 21px; }
.mobile .bottom-nav button { min-height: 52px; }
.mobile .drawer { padding-bottom: max(24px,env(safe-area-inset-bottom)); }
.mobile .chat-form { align-items: stretch; }
.mobile .chat-form .primary { flex-shrink: 0; }
.mobile .dialect-row { grid-template-columns: 95px minmax(0,1fr) 25px; }
.mobile .result-actions { flex-wrap: wrap; }
.mobile .hero h1 { font-size: 25px; }
.mobile .brand { white-space: normal; }
@media (max-width: 1024px) { .desktop .translation-grid,.desktop .two-col { grid-template-columns: 1fr; } .desktop .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px) { .mobile .hero-art { display: none; } .mobile .hero h1 { font-size: 26px; } .mobile .segments button { padding: 7px 3px; } .mobile .card { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Royal navy and warm gold, aligned with the showcase identity. */
body { background: radial-gradient(ellipse at 15% 0%,#b99a5809,transparent 55%),var(--bg); }
body.dark { background: radial-gradient(ellipse at 15% 0%,#c5a0590b,transparent 55%),var(--bg); }
.nav-link.active, .bottom-nav button.active { box-shadow: inset 0 0 0 1px var(--line); }
.pill { border: 1px solid var(--line); }
.dark .hero-letter { text-shadow: 0 8px 36px #c5a05926; }
.dark .field, .dark input, .dark textarea, .dark select { background-color: #0b1626; }
.dark .field textarea { background: transparent; }
.dark .quick-card { box-shadow: 0 8px 22px #00000024; }
.dark .quick-card:hover { box-shadow: 0 10px 26px #00000035; }

/* Short pages and overscroll must use the active theme throughout the viewport. */
html[data-theme="dark"] { background-color: #081220; color-scheme: dark; }
html[data-theme="light"] { background-color: #f5f2ea; color-scheme: light; }
body { min-height: 100vh; min-height: 100dvh; }

/* Restrained motion: brief entrances, tactile controls and a quiet gold sheen. */
:root { --ease-luxury: cubic-bezier(.22,1,.36,1); }
.view { animation: luxury-enter .42s var(--ease-luxury); }
.view:not([hidden]) .section-title, .view:not([hidden]) .hero,
.view:not([hidden]) .card, .view:not([hidden]) .stat,
.view:not([hidden]) .quick-card {
    animation: luxury-enter .52s var(--ease-luxury) backwards;
}
.view:not([hidden]) .card:nth-child(2), .view:not([hidden]) .stat:nth-child(2),
.view:not([hidden]) .quick-card:nth-child(2) { animation-delay: .045s; }
.view:not([hidden]) .card:nth-child(3), .view:not([hidden]) .stat:nth-child(3),
.view:not([hidden]) .quick-card:nth-child(3) { animation-delay: .09s; }
@keyframes luxury-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.primary {
    position: relative; overflow: hidden;
    transition: transform .22s var(--ease-luxury), box-shadow .25s ease, filter .25s ease;
}
.primary::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg,transparent 25%,#ffffff32 48%,transparent 70%);
    transform: translateX(-130%);
}
.primary:focus-visible::after { animation: gold-sheen .7s ease; }
@keyframes gold-sheen { to { transform: translateX(130%); } }
.primary:not(:disabled):active { transform: translateY(1px) scale(.985); }
.card, .stat, .quick-card, .nav-link, .bottom-nav button, .chip, .icon-btn {
    transition: border-color .25s ease, box-shadow .25s ease, background-color .2s ease,
                color .2s ease, transform .25s var(--ease-luxury);
}
.nav-link.active { border-inline-start: 2px solid var(--accent); }
.nav-link { border-inline-start: 2px solid transparent; }
.icon-btn:not(:disabled):active, .chip:not(:disabled):active { transform: scale(.97); }
.hero-letter { animation: letter-float 8s ease-in-out infinite; }
@keyframes letter-float {
    0%,100% { transform: rotate(-9deg) translateY(0); }
    50% { transform: rotate(-9deg) translateY(-4px); }
}
.fusha, .feedback, .message, .reading-content, .error {
    animation: luxury-enter .38s var(--ease-luxury);
}
.result-details[open] > :not(summary) { animation: detail-reveal .25s ease; }
@keyframes detail-reveal { from { opacity: 0; } to { opacity: 1; } }
.toast:not([hidden]) { animation: detail-reveal .2s ease; }
@media (hover: hover) and (pointer: fine) {
    .primary:hover:not(:disabled)::after { animation: gold-sheen .7s ease; }
    .primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.04); }
    .quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .nav-link:not(.active):hover { transform: translateX(-2px); }
    .card:hover { border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .primary:hover:not(:disabled), .quick-card:hover, .nav-link:not(.active):hover,
    .primary:not(:disabled):active, .icon-btn:not(:disabled):active, .chip:not(:disabled):active { transform: none; }
}

/* Keep the logo's frame identical across themes; blend only the image inside it. */
.brand-logo-frame { display: block; flex-shrink: 0; width: 64px; height: 74px; padding: 4px; background: #f5f2ea; border: 1px solid #c5a05970; border-radius: 12px; box-shadow: 0 4px 18px #00000012; overflow: hidden; isolation: isolate; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.mobile-header .brand-logo-frame { width: 40px; height: 46px; padding: 2px; border-radius: 8px; }
@media (max-width: 1150px) { .sidebar .brand { gap: 8px; font-size: 16px; } .sidebar .brand-logo-frame { width: 48px; height: 56px; } }
@media (max-width: 780px) { .sidebar .brand { font-size: 14px; } .sidebar .brand-logo-frame { width: 40px; height: 46px; } }
.dark .brand-logo-frame { background: var(--card); }
.dark .brand-logo { filter: invert(1) hue-rotate(180deg) brightness(1.3) contrast(1.1); mix-blend-mode: screen; }

/* QR visitor polish: a clear first action and readable results on phones. */
.ui-icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.nav-link > span { display: grid; place-items: center; }
.nav-link .ui-icon, .bottom-nav .ui-icon { width: 22px; height: 22px; }
.bottom-nav .ui-icon { display: block; margin: 0 auto; }
.tile-icon .ui-icon { width: 25px; height: 25px; }
.quiet .ui-icon { width: 17px; height: 17px; }
.demo-start { margin-top: 16px; min-height: 46px; }
.demo-start .ui-icon { transform: rotate(180deg); }
.demo-hint { display: block; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.result-label { font-size: 14px; color: var(--muted); margin: 18px 0 8px; font-weight: 500; }
.fusha { padding: 18px 20px; background: var(--soft); border-inline-start: 3px solid var(--accent); border-radius: 12px; }
.result-actions .quiet { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; }
.result-card { scroll-margin-top: 90px; }
.mobile .hero p { font-size: 13px; max-width: 34em; }
.mobile .hero { margin-bottom: 24px; }
.mobile .demo-start { min-height: 48px; padding-inline: 22px; }
.mobile .demo-hint { font-size: 11px; }
.mobile .fusha { font-size: 21px; padding: 16px; line-height: 2; }
.mobile .field textarea { font-size: 17px; }
.mobile .result-actions { justify-content: stretch; }
.mobile .result-actions .quiet { flex: 1; }
.mobile .sample-inputs .chip { min-height: 44px; }
.mobile .selectors select { min-height: 48px; }
.mobile .result-card .card-heading { display: grid; grid-template-columns: 27px minmax(0,1fr); }
.mobile .result-card .card-heading .pill { grid-column: 1 / -1; justify-self: start; font-size: 11px; }

.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }