:root {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  color: #263546;
  background: #f5f7f8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #263546;
  --ink-soft: #475569;
  --muted: #475569;
  --line: #e5ebed;
  --paper: #fff;
  --canvas: #f5f7f8;
  --brand: #244f67;
  --brand-dark: #1b4056;
  --mint: #6ea99a;
  --mint-light: #e7f2ee;
  --blue-light: #edf3f7;
  --shadow: 0 20px 60px rgba(33, 58, 72, .075);
  --radius-xl: 25px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { position: relative; isolation: isolate; min-width: 320px; margin: 0; background: var(--canvas); color: var(--ink); }
body::before { position: fixed; z-index: -1; inset: 0; content: ''; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 12% 8%, rgba(70, 89, 153, .17), transparent 34%), radial-gradient(ellipse at 88% 36%, rgba(51, 104, 112, .09), transparent 36%); }
html[data-locale-pending] body { visibility: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(94, 151, 139, .48); outline-offset: 3px; }
::selection { color: #193d4c; background: #cfe5dc; }
.skip-link { position: fixed; z-index: 50; top: 10px; right: 10px; padding: 10px 16px; border-radius: 9px; color: #fff; background: var(--brand); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { height: 77px; border-bottom: 1px solid rgba(219, 227, 230, .75); background: rgba(250, 251, 251, .94); }
.header-inner { max-width: 1192px; height: 100%; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand-mark { width: 40px; height: 40px; color: #2c5a70; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-copy { display: flex; flex-direction: column; gap: 0; line-height: 1.35; }
.brand-copy strong { font-size: 14px; font-weight: 800; letter-spacing: -.3px; }
.brand-copy small { font-size: 10px; color: var(--muted); }
.header-note { display: flex; align-items: center; gap: 10px; color: #788692; font-size: 11px; font-weight: 600; }
.online-dot { width: 7px; height: 7px; border-radius: 99px; background: #68a891; box-shadow: 0 0 0 3px rgba(104, 168, 145, .13); }
.header-divider { width: 1px; height: 17px; margin: 0 4px; background: #dfe6e8; }
.privacy-label { display: inline-flex; align-items: center; gap: 5px; color: #647681; }
.privacy-label svg { width: 15px; height: 15px; fill: none; stroke: #729b8f; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

main { max-width: 1192px; margin: 0 auto; padding: 0 28px; }
.hero-section { min-height: 363px; position: relative; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; overflow: hidden; padding: 41px 43px 32px 55px; border-radius: 0 0 27px 27px; background: #edf2f3; }
.hero-section::after { position: absolute; z-index: 0; inset: 0; content: ''; pointer-events: none; opacity: 0; border-radius: inherit; background: linear-gradient(126deg, rgba(17, 24, 45, .16), rgba(18, 29, 50, .2), rgba(23, 36, 58, .3)); }
.hero-section::before { position: absolute; content: ''; right: -145px; top: -233px; width: 460px; height: 460px; border: 1px solid rgba(86, 133, 137, .08); border-radius: 50%; box-shadow: 0 0 0 39px rgba(255,255,255,.17), 0 0 0 84px rgba(255,255,255,.14); }
.hero-copy { position: relative; z-index: 1; padding: 0 0 8px 10px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 15px; color: #587d79; font-size: 11px; font-weight: 700; }
.eyebrow-mark { font-size: 16px; line-height: 1; color: #75a795; }
.hero-copy h1 { margin: 0; color: #253b4b; font-size: clamp(32px, 4vw, 45px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.32; }
.hero-copy h1 span { color: #57887d; }
.hero-subtitle { max-width: 390px; margin: 13px 0 19px; color: #657580; font-size: 13px; line-height: 2; }
.hero-benefits { display: flex; flex-wrap: wrap; gap: 7px 19px; color: #72838c; font-size: 10px; font-weight: 600; }
.hero-benefits span { display: inline-flex; align-items: center; gap: 5px; }
.hero-benefits svg { width: 13px; height: 13px; fill: none; stroke: #71a092; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hero-art { min-height: 290px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.hero-art-glow { position: absolute; width: 300px; height: 260px; border-radius: 50%; background: radial-gradient(ellipse, rgba(157,195,181,.21) 0%, rgba(191,210,203,.12) 48%, transparent 74%); }
.orbit { position: absolute; z-index: 0; border: 1px solid rgba(102, 143, 143, .16); border-radius: 50%; transform: rotate(-17deg); }
.orbit-one { width: 385px; height: 205px; }
.orbit-two { width: 332px; height: 254px; transform: rotate(25deg); border-color: rgba(102, 143, 143, .12); }
.hero-calendar { z-index: 2; width: min(315px, 80%); padding: 15px 17px 10px; border: 1px solid rgba(225, 233, 233, .95); border-radius: 17px; background: rgba(255,255,255,.91); box-shadow: 0 20px 45px rgba(47, 72, 81, .11); transform: rotate(-2deg); }
.calendar-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #536876; font-size: 9px; font-weight: 700; }
.calendar-icon { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 7px; color: #5f9485; background: #e8f2ee; }
.calendar-icon svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.calendar-dots { margin-right: auto; color: #aab6ba; letter-spacing: 1px; }
.calendar-line { min-height: 50px; display: flex; align-items: stretch; gap: 10px; border-top: 1px solid #f0f3f3; }
.calendar-time { width: 42px; padding-top: 9px; color: #9aa6aa; font-family: 'Tajawal', sans-serif; font-size: 9px; }
.calendar-task { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 5px 0; padding: 4px 11px; overflow: hidden; border-radius: 8px; }
.calendar-task i { position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: currentColor; }
.calendar-task b { font-size: 9px; font-weight: 700; }
.calendar-task small { margin-top: 1px; color: #89979b; font-size: 8px; }
.task-blue { color: #48718a; background: #edf4f7; }
.task-mint { color: #3f6b5d; background: #edf6f1; }
.task-lilac { color: #625a7a; background: #f2f0f7; }
.calendar-footer { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid #f0f3f3; color: #9aa6aa; font-size: 8px; }
.avatar-stack { display: flex; direction: ltr; }
.avatar-stack i { width: 17px; height: 17px; margin-left: -4px; display: grid; place-items: center; border: 1.5px solid #fff; border-radius: 50%; color: #fff; background: #7eaa9e; font-size: 7px; font-style: normal; }
.avatar-stack i:nth-child(2) { background: #7999aa; }
.avatar-stack i:nth-child(3) { background: #d1ddd8; color: #5b756c; }
.floating-note { position: absolute; z-index: 3; top: 37px; left: 2px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(231,236,233,.9); border-radius: 12px; background: rgba(255,255,255,.93); box-shadow: 0 8px 22px rgba(47, 72, 81, .07); transform: rotate(2deg); }
.floating-spark { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #658f82; background: #e7f2ed; font-size: 14px; }
.floating-note span:last-child { display: flex; flex-direction: column; gap: 2px; }
.floating-note b { color: #405568; font-size: 9px; }
.floating-note small { color: #8a989d; font-size: 8px; }
.hero-art-caption { position: absolute; bottom: 6px; left: 15px; display: inline-flex; align-items: center; gap: 7px; color: #82928e; font-size: 9px; }
.caption-line { width: 18px; height: 1px; background: #91b2a6; }

.workspace { padding: 37px 0 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 17px; padding: 0 2px; }
.section-kicker { color: #719286; font-size: 10px; font-weight: 700; letter-spacing: .1px; }
.section-heading h2 { margin: 2px 0 0; color: #2b4050; font-size: 21px; font-weight: 800; letter-spacing: -.45px; }
.section-heading p { margin: 0 1px 4px 0; color: #89969c; font-size: 11px; }
.wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 265px; align-items: stretch; gap: 17px; }
.wizard-card { min-width: 0; padding: 22px 25px 23px; border: 1px solid #e9eef0; border-radius: var(--radius-xl); background: #fff; box-shadow: 0 12px 36px rgba(39, 66, 76, .045); }
.wizard-topbar { display: flex; align-items: center; justify-content: space-between; }
.wizard-meta { display: flex; align-items: center; gap: 10px; }
.wizard-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: #5b8d82; background: #eaf3ef; }
.wizard-icon svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wizard-meta > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.wizard-meta strong { color: #314657; font-size: 12px; font-weight: 800; }
.wizard-meta small { color: #8c999f; font-size: 9px; }
.step-count { color: #426f72; font-size: 12px; font-weight: 800; }
.step-count span { color: #a4afb2; font-weight: 500; }
.step-progress { height: 3px; margin: 17px 0 12px; overflow: hidden; border-radius: 8px; background: #edf1f1; }
.step-progress > span { width: 33.333%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #76a795, #59857f); transition: width .35s ease; }
.stepper { width: min(400px, 100%); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.stepper-item { display: inline-flex; align-items: center; gap: 7px; color: #475569; font-size: 12px; font-weight: 600; white-space: nowrap; transition: color .2s ease; }
.stepper-item.is-active, .stepper-item.is-complete { color: #4b776f; }
.step-number { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #d9e2e0; border-radius: 50%; color: #475569; background: #fff; font-size: 12px; font-weight: 600; transition: all .2s ease; }
.is-active .step-number { border-color: #639487; color: #fff; background: #639487; box-shadow: 0 0 0 2px #e7f2ee; }
.is-complete .step-number { border-color: #d8e9e2; color: #4f8377; background: #e8f2ed; }
.stepper-connector { width: clamp(16px, 2.5vw, 28px); height: 1px; background: #dfe9e4; }
.wizard-view { min-height: 300px; animation: fade-in .28s ease both; }
.view-heading { margin-bottom: 13px; }
.view-heading h3 { margin: 0; color: #2f4454; font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.view-heading p { margin: 4px 0 0; color: #85939a; font-size: 10px; line-height: 1.9; }
.category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 17px; }
.category-card { position: relative; min-height: 143px; padding: 17px 16px 15px; display: flex; flex-direction: column; align-items: flex-start; text-align: right; border: 1px solid #e7edef; border-radius: 16px; background: linear-gradient(145deg, #fff, #fbfcfc); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.category-card:hover { border-color: #bed4ce; box-shadow: 0 8px 20px rgba(54, 104, 92, .08); transform: translateY(-2px); }
.category-card[aria-pressed="true"] { border-color: #79a899; background: #f1f7f4; box-shadow: inset 0 0 0 1px #79a899, 0 5px 15px rgba(54, 104, 92, .06); }
.category-symbol { width: 33px; height: 33px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 10px; color: #52869a; background: #ebf4f7; }
.category-symbol svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.category-card.professional .category-symbol { color: #6d8c77; background: #edf4ed; }
.category-card strong { color: #33495a; font-size: 12px; font-weight: 800; }
.category-card small { max-width: 240px; margin-top: 3px; color: #89979d; font-size: 9px; line-height: 1.8; }
.category-check { position: absolute; top: 14px; left: 14px; width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #e3e9e9; border-radius: 50%; color: transparent; background: #fff; font-size: 11px; }
.category-card[aria-pressed="true"] .category-check { border-color: #719b8c; color: white; background: #719b8c; }
.form-error { min-height: 0; margin: 9px 0 0; color: #ae5e58; font-size: 10px; }
.form-error:empty { display: none; }
.button-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.button { min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 11px; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { color: #fff; background: #28536b; box-shadow: 0 4px 10px rgba(38, 79, 101, .14); }
.button-primary:hover { background: #1f485e; box-shadow: 0 7px 15px rgba(38, 79, 101, .17); }
.button-primary svg, .button-secondary svg, .button-quiet svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.button-secondary { border-color: #e0e8e8; color: #506674; background: #fff; }
.button-secondary:hover { border-color: #c4d8d1; background: #f7faf8; }
.button-quiet { border-color: #e9eeee; color: #657780; background: #fff; }
.button-quiet:hover { border-color: #d1dedd; background: #f8faf9; }
.button-ghost { min-height: 38px; padding: 0 12px; border-color: transparent; color: #849198; background: transparent; }
.button-ghost:hover { color: #486c6d; background: #f2f7f5; }
.back-button { color: #829096; }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.item-entry { display: grid; grid-template-columns: minmax(0,1fr) 116px auto; gap: 8px; margin-top: 15px; }
.item-entry.student-entry { grid-template-columns: minmax(0,1fr) auto; }
.field-label { display: block; margin-bottom: 6px; color: #62727b; font-size: 10px; font-weight: 700; }
.input, .select, .textarea { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #e2e9ea; border-radius: 10px; color: #364c5b; background: #fff; font-size: 11px; transition: border-color .18s ease, box-shadow .18s ease; }
.input::placeholder, .textarea::placeholder { color: #a4afb3; }
.input:hover, .select:hover, .textarea:hover { border-color: #cbd8d8; }
.input:focus, .select:focus, .textarea:focus { border-color: #76a595; outline: 0; box-shadow: 0 0 0 3px rgba(113, 160, 145, .13); }
.select { padding-left: 27px; }
.textarea { min-height: 71px; padding: 10px 12px; resize: vertical; line-height: 1.8; }
.add-item { min-height: 42px; padding: 0 12px; align-self: end; }
.add-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.field-error { min-height: 0; margin: 3px 0 0; color: #b15c55; font-size: 9px; }
.field-error:empty { display: none; }
.items-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 7px; color: #667782; font-size: 10px; font-weight: 700; }
.items-count { padding: 2px 8px; border-radius: 99px; color: #6b8b82; background: #eef5f1; font-size: 9px; }
.item-list { min-height: 63px; max-height: 165px; display: flex; flex-direction: column; gap: 6px; overflow: auto; padding: 2px 1px; }
.item-empty { min-height: 59px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #e2e9e9; border-radius: 11px; color: #98a5a9; font-size: 10px; }
.item-empty svg { width: 17px; fill: none; stroke: #9eafae; stroke-width: 1.4; }
.item-chip { min-height: 39px; display: flex; align-items: center; gap: 9px; padding: 5px 10px; border: 1px solid #edf0f0; border-radius: 10px; background: #fcfdfd; animation: pop-in .2s ease both; }
.item-chip .chip-index { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; color: #658e84; background: #edf5f1; font-size: 9px; font-weight: 700; }
.item-chip .chip-name { min-width: 0; overflow: hidden; color: #425767; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.priority-pill { margin-right: auto; padding: 3px 8px; border-radius: 20px; font-size: 8px; white-space: nowrap; }
.priority-high { color: #9b6155; background: #f8eeeb; }
.priority-medium { color: #75845f; background: #f3f5eb; }
.remove-item { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; color: #a0aaad; background: transparent; font-size: 17px; cursor: pointer; }
.remove-item:hover { color: #a35550; background: #fbefed; }
.items-tip { margin: 8px 0 0; color: #97a2a7; font-size: 9px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.form-field { min-width: 0; }
.number-wrap { position: relative; }
.number-wrap .input { padding-left: 49px; }
.number-unit { position: absolute; top: 50%; left: 11px; color: #94a1a5; font-size: 9px; transform: translateY(-50%); pointer-events: none; }
.choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choice-chip { min-height: 42px; padding: 0 8px; border: 1px solid #e3e9ea; border-radius: 10px; color: #76858c; background: #fff; font-size: 10px; font-weight: 600; cursor: pointer; transition: all .18s ease; }
.choice-chip:hover { border-color: #b7cec5; }
.choice-chip[aria-pressed="true"] { border-color: #76a394; color: #47776c; background: #eff6f2; box-shadow: inset 0 0 0 1px rgba(118,163,148,.5); }
.days-field { margin-top: 14px; }
.day-options { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chip { min-width: 50px; min-height: 32px; padding: 0 9px; border: 1px solid #e4eaea; border-radius: 9px; color: #869399; background: #fff; font-size: 9px; font-weight: 600; cursor: pointer; transition: all .16s ease; }
.day-chip:hover { border-color: #b6cbc4; }
.day-chip[aria-pressed="true"] { border-color: #a9c8bb; color: #4c776c; background: #edf5f0; }
.notes-field { margin-top: 13px; }
.notes-count { float: left; color: #a1abad; font-size: 8px; font-weight: 400; }
.settings-summary { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px 11px; border-radius: 9px; color: #688179; background: #f3f8f5; font-size: 9px; }
.settings-summary svg { width: 14px; flex: 0 0 auto; fill: none; stroke: #70a18e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.loading-state { min-height: 305px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.loader-mark { position: relative; width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid #d7e7e0; border-radius: 20px; color: #5f9585; background: #f1f7f3; }
.loader-mark svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.loader-ring { position: absolute; inset: -6px; border: 2px solid transparent; border-top-color: #70a590; border-left-color: #b7d7c8; border-radius: 25px; animation: spin .95s linear infinite; }
.loading-state h3 { margin: 0; color: #344c5b; font-size: 15px; font-weight: 800; }
.loading-state p { margin: 7px 0 0; color: #87969b; font-size: 10px; }
.loading-dots { display: inline-flex; gap: 5px; margin-top: 18px; }
.loading-dots span { width: 5px; height: 5px; border-radius: 50%; background: #81ad9d; animation: dot-pulse 1.2s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .3s; }

.result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.result-heading h3 { margin: 0; color: #2e4655; font-size: 17px; font-weight: 800; }
.result-heading p { margin: 4px 0 0; color: #85939a; font-size: 9px; line-height: 1.8; }
.result-badge { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #e1eee6; border-radius: 20px; color: #628879; background: #f2f8f3; font-size: 8px; font-weight: 700; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 13px; }
.result-stat { min-width: 0; padding: 9px 10px; border: 1px solid #edf0f0; border-radius: 11px; background: #fbfcfc; }
.result-stat span { display: block; color: #96a1a5; font-size: 8px; }
.result-stat b { display: block; margin-top: 2px; color: #4f6a73; font-size: 12px; font-weight: 800; }
.schedule-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; max-height: 460px; overflow: auto; padding: 1px 2px 5px 0; }
.schedule-day { min-width: 0; padding: 11px 11px 8px; border: 1px solid #e9eeee; border-radius: 13px; background: #fff; }
.schedule-day-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid #eff2f2; }
.schedule-day-head strong { color: #405766; font-size: 10px; font-weight: 800; }
.schedule-day-head span { padding: 3px 7px; border-radius: 20px; color: #779186; background: #eef5f1; font-size: 8px; }
.timeline-entry { position: relative; display: grid; grid-template-columns: 53px minmax(0,1fr); gap: 7px; padding: 8px 0 4px; }
.timeline-entry:not(:last-child)::after { position: absolute; content: ''; top: 22px; bottom: -4px; right: 58px; width: 1px; background: #e8eeec; }
.entry-time { direction: ltr; text-align: right; color: #87979c; font-family: 'Tajawal',sans-serif; font-size: 8px; font-weight: 600; white-space: nowrap; }
.entry-content { min-width: 0; position: relative; padding-right: 8px; }
.entry-content::before { position: absolute; content: ''; top: 3px; right: -1px; z-index: 1; width: 5px; height: 5px; border: 1.5px solid #79a594; border-radius: 50%; background: #fff; }
.entry-title { display: block; overflow: hidden; color: #4a606b; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.entry-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 2px; color: #a0aaac; font-size: 7px; }
.entry-break .entry-content::before { border-color: #b9c6a7; background: #eef2e8; }
.entry-break .entry-title { color: #596946; font-weight: 600; }
.entry-duration { color: #88989b; }
.result-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px 10px; border-radius: 9px; color: #748b81; background: #f3f8f4; font-size: 8px; line-height: 1.8; }
.result-note svg { width: 14px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: #75a08d; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.result-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0f0; }
.result-actions .button { width: 100%; min-width: 0; min-height: 38px; padding: 0 12px; font-size: 9px; }
.result-actions #copy-plan { grid-column: 1 / -1; }

.guide-panel { min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.guide-card-main { flex: 1; padding: 20px 18px 15px; overflow: hidden; border: 1px solid #e9eeec; border-radius: 20px; background: linear-gradient(160deg, #fff 0%, #fcfdfc 66%, #f3f8f5 100%); }
.guide-topline { display: inline-flex; align-items: center; gap: 6px; color: #75998e; font-size: 9px; font-weight: 700; }
.guide-spark { font-size: 15px; }
.guide-card-main h3 { margin: 15px 0 8px; color: #2d4655; font-size: 18px; font-weight: 800; line-height: 1.6; letter-spacing: -.3px; }
.guide-card-main > p { margin: 0; color: #849197; font-size: 9px; line-height: 2; }
.guide-divider { height: 1px; margin: 15px 0 9px; background: #edf1ef; }
.guide-stat { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.stat-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.stat-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.stat-icon-mint { color: #6d9a88; background: #edf5f0; }
.stat-icon-blue { color: #68889b; background: #eef3f6; }
.guide-stat span:last-child { display: flex; flex-direction: column; gap: 1px; }
.guide-stat b { color: #566b75; font-size: 9px; font-weight: 700; }
.guide-stat small { color: #97a2a5; font-size: 8px; }
.guide-note { min-height: 60px; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #e8eeeb; border-radius: 14px; background: #f1f6f3; }
.note-lock { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #668d7e; background: #e3eee8; }
.note-lock svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.guide-note p { flex: 1; margin: 0; color: #899892; font-size: 8px; line-height: 1.8; }
.guide-note p strong { color: #445e51; font-size: 9px; }

.closing-strip { min-height: 64px; margin: 20px 0 27px; padding: 12px 17px; display: flex; align-items: center; gap: 10px; border: 1px solid #e9efed; border-radius: 14px; background: rgba(255,255,255,.67); }
.closing-icon { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #6d9a88; background: #edf5f0; }
.closing-icon svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.closing-strip p { margin: 0; color: #819097; font-size: 9px; }
.closing-strip p strong { color: #4e6870; }
.closing-aside { margin-right: auto; color: #91a39d; font-size: 9px; }
.site-footer { max-width: 1192px; margin: 0 auto; padding: 0 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #9aa5a8; font-size: 8px; }
.footer-dot { padding: 0 3px; color: #8db19f; }
.toast { position: fixed; z-index: 100; right: 50%; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px 11px 20px; border: 1px solid #e2ebe5; border-radius: 12px; color: #3e6557; background: #fff; box-shadow: 0 12px 35px rgba(33,58,72,.15); font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(50%, 15px); transition: opacity .22s ease, transform .22s ease; }
.toast.is-visible { opacity: 1; transform: translate(50%, 0); }
.toast-check { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #6d9e87; font-size: 11px; }
.choice-dialog { width: min(400px,calc(100% - 32px)); position: fixed; inset: 0; padding: 25px; border: 1px solid #e6ecea; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 30px 90px rgba(26,53,68,.2); }
.choice-dialog::backdrop { background: rgba(33,52,64,.36); backdrop-filter: blur(3px); }
.dialog-symbol { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 13px; color: #648e81; background: #edf5f0; }
.dialog-symbol svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dialog-close { position: absolute; top: 16px; left: 16px; width: 29px; height: 29px; border: 0; border-radius: 8px; color: #829097; background: #f4f7f6; font-size: 19px; cursor: pointer; }
.choice-dialog h2 { margin: 0; color: #344b5b; font-size: 17px; font-weight: 800; }
.choice-dialog > p { margin: 6px 0 18px; color: #849198; font-size: 10px; }
.dialog-actions { display: flex; gap: 8px; }
.dialog-actions .button { flex: 1; }

@keyframes fade-in { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dot-pulse { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

@media (min-width: 1200px) { .hero-section { padding-right: 63px; } }
@media (max-width: 900px) {
  main { padding: 0 20px; }
  .header-inner { padding: 0 20px; }
  .hero-section { min-height: 345px; padding: 32px 28px 27px; grid-template-columns: 1fr .9fr; }
  .hero-copy h1 { font-size: 37px; }
  .hero-art { transform: scale(.94); }
  .wizard-layout { grid-template-columns: minmax(0,1fr) 225px; gap: 13px; }
  .wizard-card { padding: 19px 19px 20px; }
  .guide-card-main { padding: 18px 14px 13px; }
  .guide-card-main h3 { font-size: 16px; }
  .section-heading h2 { font-size: 19px; }
  .site-footer { padding-right: 20px; padding-left: 20px; }
}
@media (max-width: 680px) {
  .site-header { height: 66px; }
  .header-inner { padding: 0 17px; }
  .brand-mark { width: 35px; height: 35px; }
  .header-note { gap: 7px; font-size: 9px; }
  .header-divider { height: 14px; margin: 0 2px; }
  main { padding: 0 14px; }
  .hero-section { min-height: auto; display: flex; flex-direction: column; align-items: stretch; padding: 31px 22px 15px; border-radius: 0 0 21px 21px; }
  .hero-section::before { right: -180px; top: -270px; }
  .hero-copy { padding: 0; }
  .eyebrow { margin-bottom: 10px; font-size: 10px; }
  .hero-copy h1 { font-size: 34px; letter-spacing: -1px; }
  .hero-subtitle { max-width: 100%; margin: 9px 0 12px; font-size: 11px; line-height: 1.9; }
  .hero-benefits { gap: 6px 12px; font-size: 8px; }
  .hero-art { min-height: 226px; margin: 3px -8px -1px; transform: none; }
  .hero-art-glow { width: 260px; height: 195px; }
  .orbit-one { width: 310px; height: 160px; }
  .orbit-two { width: 272px; height: 196px; }
  .hero-calendar { width: 267px; padding: 12px 13px 8px; }
  .calendar-line { min-height: 42px; }
  .calendar-time { padding-top: 8px; }
  .floating-note { top: 18px; left: -1px; padding: 8px 10px; }
  .hero-art-caption { bottom: 0; left: 5px; font-size: 8px; }
  .workspace { padding-top: 25px; }
  .section-heading { display: block; margin-bottom: 13px; }
  .section-heading h2 { font-size: 18px; }
  .section-heading p { margin: 5px 0 0; font-size: 9px; }
  .wizard-layout { grid-template-columns: 1fr; gap: 11px; }
  .wizard-card { padding: 17px 15px 18px; border-radius: 19px; }
  .wizard-icon { width: 32px; height: 32px; }
  .wizard-meta strong { font-size: 11px; }
  .wizard-meta small { font-size: 8px; }
  .stepper { margin-bottom: 20px; gap: 7px; }
  .stepper-connector { width: clamp(15px, 5vw, 22px); }
  .stepper-item { gap: 5px; font-size: 12px; }
  .step-number { width: 22px; height: 22px; font-size: 12px; }
  .wizard-view { min-height: 285px; }
  .view-heading h3 { font-size: 15px; }
  .view-heading p { font-size: 9px; }
  .category-grid { gap: 8px; margin-top: 14px; }
  .category-card { min-height: 136px; padding: 14px 12px 12px; border-radius: 13px; }
  .category-card strong { font-size: 11px; }
  .category-card small { font-size: 8px; }
  .category-symbol { width: 30px; height: 30px; margin-bottom: 8px; }
  .category-check { top: 10px; left: 10px; }
  .button { min-height: 40px; padding: 0 14px; font-size: 10px; }
  .item-entry { grid-template-columns: minmax(0,1fr) 100px; gap: 7px; }
  .item-entry .add-item { grid-column: 1 / -1; justify-self: stretch; min-height: 37px; }
  .input, .select { min-height: 40px; font-size: 10px; }
  .settings-grid { gap: 9px; }
  .choice-chip { min-height: 40px; font-size: 9px; }
  .day-options { gap: 5px; }
  .day-chip { min-width: calc((100% - 24px) / 5); min-height: 31px; flex: 1 0 auto; padding: 0 5px; font-size: 8px; }
  .schedule-list { grid-template-columns: 1fr; max-height: 520px; }
  .schedule-day { padding: 11px 12px 9px; }
  .timeline-entry { grid-template-columns: 58px minmax(0,1fr); }
  .timeline-entry:not(:last-child)::after { right: 63px; }
  .entry-time { font-size: 9px; }
  .entry-title { font-size: 10px; }
  .entry-meta { font-size: 8px; }
  .result-heading h3 { font-size: 15px; }
  .result-stats { gap: 5px; }
  .result-stat { padding: 8px 7px; }
  .result-stat b { font-size: 10px; }
  .result-actions { gap: 6px; }
  .result-actions .button { padding: 0 9px; font-size: 8px; }
  .guide-panel { display: grid; grid-template-columns: 1fr; }
  .guide-card-main { padding: 17px 16px 15px; border-radius: 16px; }
  .guide-card-main h3 { margin: 9px 0 5px; font-size: 16px; }
  .guide-card-main > p { max-width: 400px; }
  .guide-divider { margin: 11px 0 6px; }
  .guide-stat { display: inline-flex; margin-left: 13px; }
  .guide-stat:last-child { margin-left: 0; }
  .guide-note { min-height: 55px; }
  .closing-strip { margin: 14px 0 21px; padding: 10px 12px; gap: 8px; }
  .closing-strip p { font-size: 8px; line-height: 1.7; }
  .closing-aside { display: none; }
  .site-footer { align-items: flex-start; padding: 0 14px 18px; font-size: 7px; }
}
@media (max-width: 370px) {
  .hero-copy h1 { font-size: 30px; }
  .hero-benefits { gap: 6px 9px; font-size: 7px; }
  .wizard-card { padding-right: 12px; padding-left: 12px; }
  .stepper { margin-bottom: 20px; gap: 4px; }
  .stepper-item { gap: 4px; font-size: 12px; }
  .step-number { width: 22px; height: 22px; font-size: 12px; }
  .stepper-connector { width: 15px; }
  .category-card { padding-right: 10px; padding-left: 10px; }
  .settings-grid { grid-template-columns: 1fr; }
  .guide-stat { margin-left: 6px; }
  .site-footer span:last-child { display: none; }
}

/* تباين أعلى للنصوص الصغيرة مع الحفاظ على لوحة الألوان الهادئة. */
 .header-note, .privacy-label, .hero-subtitle, .hero-benefits, .calendar-time, .calendar-task small, .calendar-footer, .floating-note small, .hero-art-caption, .section-heading p, .wizard-meta small, .step-count span, .view-heading p, .category-card small, .item-empty, .items-tip, .number-unit, .input::placeholder, .textarea::placeholder, .choice-chip, .day-chip, .notes-count, .loading-state p, .result-heading p, .result-stat span, .entry-time, .entry-meta, .entry-duration, .entry-title, .guide-card-main > p, .guide-stat small, .guide-note p, .closing-strip p, .closing-aside, .site-footer, .dialog-close, .choice-dialog > p, .brand-copy small, .button-ghost, .back-button, .remove-item, .settings-summary, .field-error, .field-label { color: #334155; }
.section-kicker, .guide-topline, .items-count, .item-chip .chip-index, .schedule-day-head span, .result-note, .result-badge { color: #405a50; }
.avatar-stack i:nth-child(3) { color: #476153; }
.priority-high { color: #80514a; }
.priority-medium { color: #596b48; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* مقياس متوسط يحافظ على الوضوح والمساحة الهادئة. */
:is(
  .brand-copy small, .header-note, .privacy-label, .hero-subtitle, .hero-benefits,
  .calendar-time, .calendar-task small, .calendar-footer, .floating-note small,
  .hero-art-caption, .section-heading p, .wizard-meta small, .step-count span,
  .view-heading p, .category-card small, .form-error, .field-error,
  .input::placeholder, .textarea::placeholder, .items-count, .item-empty,
  .priority-pill, .items-tip, .number-unit, .choice-chip, .day-chip, .notes-count,
  .settings-summary, .loading-state p, .result-heading p, .result-stat span,
  .schedule-day-head span, .entry-time, .entry-meta, .entry-duration, .result-note,
  .guide-card-main > p, .guide-stat small, .guide-note p, .closing-strip p,
  .closing-aside, .site-footer, .choice-dialog > p, .button-ghost, .back-button
) { font-size: 12px; font-weight: 500; }
:is(.section-kicker, .items-head, .field-label, .guide-topline, .step-count) { font-size: 12px; font-weight: 600; }
:is(
  .brand-copy strong, .wizard-meta strong, .calendar-task b, .floating-note b,
  .category-card strong, .item-chip .chip-name, .guide-stat b,
  .schedule-day-head strong, .entry-title, .result-stat b, .guide-note p strong
) { font-size: 13px; font-weight: 700; }
:is(.input, .select, .textarea) { font-size: 14px; }
:is(.item-chip .chip-index, .result-badge, .toast, .button, .step-number) { font-size: 12px; font-weight: 600; }
.entry-title { font-weight: 600; }
.result-actions .button { font-size: 12px; font-weight: 600; }
.site-footer { font-size: 12px; }
:is(.eyebrow, .calendar-top) { font-size: 12px; }

@media (max-width: 370px) {
  .site-header .header-inner { padding-right: 12px; padding-left: 12px; }
  .site-header .brand-copy strong { font-size: 13px; white-space: nowrap; }
  .site-header .brand-copy small { font-size: 11px; white-space: nowrap; }
  .site-header .header-note { gap: 4px; font-size: 11px; }
  .site-header .privacy-label { font-size: 11px; }
}

@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; }
  body { color: #1f3039; }
  .site-header, .hero-section, .section-heading, .guide-panel, .closing-strip, .site-footer, .stepper, .wizard-topbar, .step-progress, .result-actions, .toast, .skip-link { display: none !important; }
  main { max-width: none; padding: 0; }
  .workspace { padding: 0; }
  .wizard-layout { display: block; }
  .wizard-card { padding: 0; border: 0; box-shadow: none; }
  .wizard-view { min-height: 0; animation: none; }
  .result-heading h3 { font-size: 20px; }
  .result-heading p { font-size: 10px; }
  .result-stats { break-inside: avoid; }
  .schedule-list { max-height: none; overflow: visible; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .schedule-day { break-inside: avoid; border-color: #d9e2e0; }
  .timeline-entry { break-inside: avoid; }
  .result-note { break-inside: avoid; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}


/* Preference controls and the mirrored English navigation. */
.header-tools { min-width: 0; display: flex; align-items: center; gap: 16px; }
.nav-controls { display: flex; align-items: center; gap: 7px; }
.nav-control { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid #dfe7e8; border-radius: 10px; color: #405767; background: #fff; font-size: 11px; font-weight: 600; cursor: pointer; transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .18s ease; }
.nav-control:hover { border-color: #b8cec7; background: #f8fbfa; transform: translateY(-1px); }
.nav-control:active { transform: translateY(0); }
.nav-control svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.language-toggle { gap: 5px; direction: ltr; }
.language-option { color: #7c8b92; opacity: .76; }
.language-option.is-current { color: #244f67; font-weight: 800; opacity: 1; }
.language-separator { color: #a9b4b8; font-weight: 400; }
.theme-toggle { color: #405d70; }
.theme-toggle svg { color: #6a8c9a; }

@media (max-width: 680px) {
  .header-tools { gap: 7px; }
  .header-note { display: none; }
}
@media (max-width: 370px) {
  .site-header .header-inner { padding-right: 12px; padding-left: 12px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand-mark { width: 31px; height: 31px; }
  .nav-controls { gap: 5px; }
  .nav-control { min-height: 33px; padding: 0 8px; gap: 5px; font-size: 10px; }
  .language-toggle { gap: 4px; }
  .theme-toggle svg { width: 16px; height: 16px; }
}

/* True LTR layout: mirror visual anchors while letting flex/grid follow dir. */
html[dir="ltr"] body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
html[dir="ltr"] .skip-link { right: auto; left: 10px; }
html[dir="ltr"] .hero-section { padding: 41px 55px 32px 43px; }
html[dir="ltr"] .hero-section::before { right: auto; left: -145px; }
html[dir="ltr"] .hero-copy { padding: 0 10px 8px 0; text-align: left; }
html[dir="ltr"] .hero-calendar { transform: rotate(2deg); }
html[dir="ltr"] .calendar-dots { margin-right: 0; margin-left: auto; }
html[dir="ltr"] .calendar-task i { right: auto; left: 0; }
html[dir="ltr"] .floating-note { right: 2px; left: auto; transform: rotate(-2deg); }
html[dir="ltr"] .hero-art-caption { right: 15px; left: auto; }
html[dir="ltr"] .section-heading, html[dir="ltr"] .wizard-card, html[dir="ltr"] .guide-card-main, html[dir="ltr"] .guide-note, html[dir="ltr"] .closing-strip { text-align: left; }
html[dir="ltr"] .section-heading p { margin: 0 0 4px 1px; }
html[dir="ltr"] .category-card { text-align: left; }
html[dir="ltr"] .category-check { right: 14px; left: auto; }
html[dir="ltr"] .select { padding-right: 27px; padding-left: 12px; }
html[dir="ltr"] .number-wrap .input { padding-right: 49px; padding-left: 12px; }
html[dir="ltr"] .number-unit { right: 11px; left: auto; }
html[dir="ltr"] .priority-pill { margin-right: 0; margin-left: auto; }
html[dir="ltr"] .notes-count { float: right; }
html[dir="ltr"] .entry-time { direction: ltr; text-align: left; }
html[dir="ltr"] .entry-content { padding-right: 0; padding-left: 8px; }
html[dir="ltr"] .entry-content::before { right: auto; left: -1px; }
html[dir="ltr"] .timeline-entry:not(:last-child)::after { right: auto; left: 58px; }
html[dir="ltr"] .guide-stat { margin-left: 0; margin-right: 13px; }
html[dir="ltr"] .guide-stat:last-child { margin-right: 0; }
html[dir="ltr"] .closing-aside { margin-right: 0; margin-left: auto; }
html[dir="ltr"] .dialog-close { right: 16px; left: auto; }
@media (min-width: 1200px) {
  html[dir="ltr"] .hero-section { padding-right: 43px; padding-left: 63px; }
}
@media (max-width: 900px) {
  html[dir="ltr"] .hero-section { padding: 32px 28px 27px; }
}
@media (max-width: 680px) {
  html[dir="ltr"] .hero-section { padding: 31px 22px 15px; }
  html[dir="ltr"] .hero-section::before { right: auto; left: -180px; }
  html[dir="ltr"] .floating-note { right: -1px; left: auto; }
  html[dir="ltr"] .hero-art-caption { right: 5px; left: auto; }
  html[dir="ltr"] .category-check { right: 10px; left: auto; }
  html[dir="ltr"] .timeline-entry:not(:last-child)::after { right: auto; left: 63px; }
  html[dir="ltr"] .guide-stat { margin-left: 0; margin-right: 13px; }
  html[dir="ltr"] .guide-stat:last-child { margin-right: 0; }
}
@media (max-width: 370px) {
  html[dir="ltr"] .hero-section { padding-right: 22px; padding-left: 22px; }
  html[dir="ltr"] .wizard-card { padding-right: 12px; padding-left: 12px; }
  html[dir="ltr"] .category-card { padding-right: 10px; padding-left: 10px; }
  html[dir="ltr"] .guide-stat { margin-right: 6px; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  body { transition: background-color .36s ease, color .24s ease; }
  body::before, .hero-section::after { transition: opacity .34s ease; }
  .site-header, .nav-control, .hero-section, .hero-section::before, .wizard-card, .category-card, .button, .input, .select, .textarea, .choice-chip, .day-chip, .item-chip, .settings-summary, .result-stat, .schedule-day, .guide-card-main, .guide-note, .closing-strip, .toast, .choice-dialog, .step-number, .stepper-item { transition: background-color .28s ease, border-color .28s ease, color .22s ease, box-shadow .28s ease, transform .18s ease; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; }
}

/* Dark mode: an atmospheric navy canvas with restrained indigo and mint light. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7edf8;
  --ink-soft: #c3cde0;
  --muted: #aab8cc;
  --line: #293650;
  --paper: #121b2d;
  --canvas: #090e1d;
  --brand: #719bb2;
  --brand-dark: #527991;
  --mint: #83bdaa;
  --mint-light: #1a302f;
  --blue-light: #1a273b;
  --shadow: 0 22px 65px rgba(0, 0, 0, .28);
  color: #e7edf8;
  background: #090e1d;
}

@media screen {
  html[data-theme="dark"] body {
    color: #e7edf8;
    background-color: #090e1d;
    transition: background-color .28s ease, color .22s ease;
  }
  html[data-theme="dark"] body::before { opacity: 1; }
  html[data-theme="dark"] ::selection { color: #09121c; background: #9fd4c4; }
  html[data-theme="dark"] .site-header { border-color: rgba(47, 62, 88, .82); background: rgba(9, 14, 29, .92); }
  html[data-theme="dark"] .brand-mark { color: #7eafc3; }
  html[data-theme="dark"] .brand-copy strong { color: #edf2fb; }
  html[data-theme="dark"] .header-note, html[data-theme="dark"] .privacy-label { color: #b9c5d9; }
  html[data-theme="dark"] .privacy-label svg { stroke: #91cbb6; }
  html[data-theme="dark"] .header-divider { background: #34415b; }
  html[data-theme="dark"] .online-dot { background: #8bd0b3; box-shadow: 0 0 0 3px rgba(139, 208, 179, .13), 0 0 14px rgba(139, 208, 179, .38); }
  html[data-theme="dark"] .nav-control { border-color: #303e59; color: #d4dced; background: #151f33; }
  html[data-theme="dark"] .nav-control:hover { border-color: #557c83; color: #f0f5ff; background: #1a2940; box-shadow: 0 0 18px rgba(112, 163, 177, .12); }
  html[data-theme="dark"] .language-option { color: #9aa9c0; }
  html[data-theme="dark"] .language-option.is-current { color: #bde9d8; }
  html[data-theme="dark"] .language-separator { color: #65748d; }
  html[data-theme="dark"] .theme-toggle svg { color: #a8c5e4; }

  html[data-theme="dark"] .hero-section { background-color: #11182d; box-shadow: inset 0 -1px 0 rgba(135, 167, 206, .08); }
  html[data-theme="dark"] .hero-section::after { opacity: 1; }
  html[data-theme="dark"] .hero-section::before { border-color: rgba(126, 168, 184, .12); box-shadow: 0 0 0 39px rgba(104, 135, 170, .035), 0 0 0 84px rgba(91, 124, 157, .025); }
  html[data-theme="dark"] .eyebrow { color: #a8d2c2; }
  html[data-theme="dark"] .eyebrow-mark { color: #a0d5bf; }
  html[data-theme="dark"] .hero-copy h1 { color: #eff3fb; }
  html[data-theme="dark"] .hero-copy h1 span { color: #9cd2bd; }
  html[data-theme="dark"] .hero-benefits svg { stroke: #a4d5c2; }
  html[data-theme="dark"] .hero-art-glow { background: radial-gradient(ellipse, rgba(106, 169, 174, .19) 0%, rgba(93, 111, 166, .12) 48%, transparent 74%); filter: drop-shadow(0 0 20px rgba(89, 140, 173, .12)); }
  html[data-theme="dark"] .orbit { border-color: rgba(131, 167, 199, .2); }
  html[data-theme="dark"] .orbit-two { border-color: rgba(141, 147, 204, .15); }
  html[data-theme="dark"] .hero-calendar { border-color: #34415a; background: rgba(20, 30, 50, .94); box-shadow: 0 23px 55px rgba(0, 0, 0, .34), 0 0 28px rgba(90, 128, 167, .08); }
  html[data-theme="dark"] .calendar-top { color: #d0d9e8; }
  html[data-theme="dark"] .calendar-icon { color: #a2d6c2; background: #203b3a; }
  html[data-theme="dark"] .calendar-dots { color: #8392aa; }
  html[data-theme="dark"] .calendar-line, html[data-theme="dark"] .calendar-footer { border-color: #29364e; }
  html[data-theme="dark"] .calendar-time, html[data-theme="dark"] .calendar-footer { color: #a9b6ca; }
  html[data-theme="dark"] .task-blue { color: #c2d9ec; background: #20324a; }
  html[data-theme="dark"] .task-mint { color: #b9e0cd; background: #20392f; }
  html[data-theme="dark"] .task-lilac { color: #d3c9ef; background: #302c47; }
  html[data-theme="dark"] .calendar-task small { color: #aebbd0; }
  html[data-theme="dark"] .avatar-stack i { border-color: #17243b; }
  html[data-theme="dark"] .avatar-stack i:nth-child(3) { color: #d5e2db; background: #4b635d; }
  html[data-theme="dark"] .floating-note { border-color: #34415a; color: #e3eaf5; background: rgba(21, 32, 52, .96); box-shadow: 0 10px 27px rgba(0, 0, 0, .26), 0 0 18px rgba(99, 151, 162, .08); }
  html[data-theme="dark"] .floating-note b { color: #e0e8f3; }
  html[data-theme="dark"] .floating-spark { color: #b9e1d0; background: #243c3a; }
  html[data-theme="dark"] .hero-art-caption { color: #b6c2d1; }
  html[data-theme="dark"] .caption-line { background: #7bb19f; }

  html[data-theme="dark"] .section-kicker, html[data-theme="dark"] .guide-topline, html[data-theme="dark"] .items-count, html[data-theme="dark"] .result-badge { color: #a8d6c3; }
  html[data-theme="dark"] .section-heading h2, html[data-theme="dark"] .view-heading h3, html[data-theme="dark"] .wizard-meta strong, html[data-theme="dark"] .category-card strong, html[data-theme="dark"] .loading-state h3, html[data-theme="dark"] .result-heading h3, html[data-theme="dark"] .guide-card-main h3, html[data-theme="dark"] .choice-dialog h2 { color: #e9eef8; }
  html[data-theme="dark"] .wizard-card { border-color: #27344d; background: #111a2c; box-shadow: 0 16px 44px rgba(0, 0, 0, .24); }
  html[data-theme="dark"] .wizard-icon { color: #a9d5c4; background: #203735; }
  html[data-theme="dark"] .step-count { color: #a8dac6; }
  html[data-theme="dark"] .step-count span { color: #9aa9bf; }
  html[data-theme="dark"] .step-progress { background: #27334a; }
  html[data-theme="dark"] .step-progress > span { background: linear-gradient(90deg, #85c7ad, #8aa8d9); }
  html[data-theme="dark"] .stepper-item { color: #b7c3d6; }
  html[data-theme="dark"] .stepper-item.is-active, html[data-theme="dark"] .stepper-item.is-complete { color: #a7dbc4; }
  html[data-theme="dark"] .step-number { border-color: #3a4964; color: #cad4e4; background: #141f33; }
  html[data-theme="dark"] .is-active .step-number { border-color: #74b79e; color: #09151a; background: #8bc8ae; box-shadow: 0 0 0 2px rgba(139, 200, 174, .14); }
  html[data-theme="dark"] .is-complete .step-number { border-color: #38594f; color: #b3e0cf; background: #1c352f; }
  html[data-theme="dark"] .stepper-connector { background: #3a4962; }
  html[data-theme="dark"] .category-card { border-color: #2c3952; background: linear-gradient(145deg, #151f33, #111a2b); }
  html[data-theme="dark"] .category-card:hover { border-color: #658d82; box-shadow: 0 8px 22px rgba(0, 0, 0, .25), 0 0 18px rgba(102, 167, 147, .08); }
  html[data-theme="dark"] .category-card[aria-pressed="true"] { border-color: #74b69d; background: linear-gradient(145deg, #1c332f, #182b2b); box-shadow: inset 0 0 0 1px #74b69d, 0 8px 20px rgba(37, 102, 80, .12); }
  html[data-theme="dark"] .category-symbol { color: #a9d2e4; background: #243a4b; }
  html[data-theme="dark"] .category-card.professional .category-symbol { color: #b8d7bc; background: #293b32; }
  html[data-theme="dark"] .category-check { border-color: #3b4961; color: transparent; background: #162238; }
  html[data-theme="dark"] .category-card[aria-pressed="true"] .category-check { border-color: #77b49b; color: #0b1719; background: #8ac6aa; }
  html[data-theme="dark"] .button-primary { color: #f6fbff; background: #3b7186; box-shadow: 0 5px 15px rgba(24, 83, 102, .22); }
  html[data-theme="dark"] .button-primary:hover { background: #4a8295; box-shadow: 0 7px 18px rgba(50, 130, 146, .25), 0 0 18px rgba(88, 156, 169, .12); }
  html[data-theme="dark"] .button-secondary, html[data-theme="dark"] .button-quiet { border-color: #35425b; color: #d0d9e8; background: #182338; }
  html[data-theme="dark"] .button-secondary:hover, html[data-theme="dark"] .button-quiet:hover { border-color: #64897f; color: #eff5ff; background: #1d2c41; }
  html[data-theme="dark"] .button-ghost, html[data-theme="dark"] .back-button { color: #b1bed1; }
  html[data-theme="dark"] .button-ghost:hover { color: #c7ebd9; background: #1b2e30; }

  html[data-theme="dark"] .field-label, html[data-theme="dark"] .items-head { color: #c1ccde; }
  html[data-theme="dark"] .input, html[data-theme="dark"] .select, html[data-theme="dark"] .textarea { border-color: #34415b; color: #e9eef8; background: #0f1829; }
  html[data-theme="dark"] .input::placeholder, html[data-theme="dark"] .textarea::placeholder { color: #98a7bc; }
  html[data-theme="dark"] .input:hover, html[data-theme="dark"] .select:hover, html[data-theme="dark"] .textarea:hover { border-color: #5d7e82; }
  html[data-theme="dark"] .input:focus, html[data-theme="dark"] .select:focus, html[data-theme="dark"] .textarea:focus { border-color: #84bda7; box-shadow: 0 0 0 3px rgba(132, 189, 167, .16); }
  html[data-theme="dark"] .number-unit, html[data-theme="dark"] .notes-count { color: #a9b7cb; }
  html[data-theme="dark"] .choice-chip, html[data-theme="dark"] .day-chip { border-color: #35425b; color: #c2ccdc; background: #141e31; }
  html[data-theme="dark"] .choice-chip:hover, html[data-theme="dark"] .day-chip:hover { border-color: #698f83; }
  html[data-theme="dark"] .choice-chip[aria-pressed="true"], html[data-theme="dark"] .day-chip[aria-pressed="true"] { border-color: #72b49b; color: #c8efdc; background: #1d3935; box-shadow: inset 0 0 0 1px rgba(114, 180, 155, .15); }
  html[data-theme="dark"] .items-count { background: #1d3531; }
  html[data-theme="dark"] .item-empty { border-color: #3a4960; color: #aab8ca; background: #131e31; }
  html[data-theme="dark"] .item-empty svg { stroke: #9ac5b3; }
  html[data-theme="dark"] .item-chip { border-color: #2d3a53; background: #172237; }
  html[data-theme="dark"] .item-chip .chip-index { color: #b8e0d0; background: #233b37; }
  html[data-theme="dark"] .item-chip .chip-name { color: #e0e7f2; }
  html[data-theme="dark"] .priority-high { color: #ffc0b4; background: #452a31; }
  html[data-theme="dark"] .priority-medium { color: #d5dea7; background: #303728; }
  html[data-theme="dark"] .remove-item { color: #a8b5c8; }
  html[data-theme="dark"] .remove-item:hover { color: #ffb9ae; background: #40262c; }
  html[data-theme="dark"] .settings-summary { color: #c2d8cb; background: #1a302d; }
  html[data-theme="dark"] .settings-summary svg { stroke: #9cd4b9; }
  html[data-theme="dark"] .form-error, html[data-theme="dark"] .field-error { color: #ffb6ad; }

  html[data-theme="dark"] .loader-mark { border-color: #34435c; color: #a7d7c2; background: #1c302f; }
  html[data-theme="dark"] .loader-ring { border-top-color: #8bc8ac; border-left-color: #819bd0; }
  html[data-theme="dark"] .loading-dots span { background: #9bd5bc; }
  html[data-theme="dark"] .result-badge { border-color: #36534c; background: #1b302e; }
  html[data-theme="dark"] .result-stat { border-color: #2a3851; background: #151f32; }
  html[data-theme="dark"] .result-stat b { color: #b7d7d7; }
  html[data-theme="dark"] .schedule-day { border-color: #2d3a52; background: #121d30; }
  html[data-theme="dark"] .schedule-day-head { border-color: #2d3b53; }
  html[data-theme="dark"] .schedule-day-head strong { color: #dce5f2; }
  html[data-theme="dark"] .schedule-day-head span { color: #c0dfcf; background: #203832; }
  html[data-theme="dark"] .timeline-entry:not(:last-child)::after { background: #34415a; }
  html[data-theme="dark"] .entry-time, html[data-theme="dark"] .entry-meta, html[data-theme="dark"] .entry-duration { color: #aebbd0; }
  html[data-theme="dark"] .entry-title { color: #e1e8f4; }
  html[data-theme="dark"] .entry-break .entry-title { color: #cadca8; }
  html[data-theme="dark"] .entry-content::before { border-color: #86bea6; background: #162438; }
  html[data-theme="dark"] .entry-break .entry-content::before { border-color: #bdce95; background: #303a2b; }
  html[data-theme="dark"] .result-note { color: #c1d8cb; background: #1b302d; }
  html[data-theme="dark"] .result-note svg { stroke: #9bd0b6; }
  html[data-theme="dark"] .result-actions { border-color: #2a3851; }

  html[data-theme="dark"] .guide-card-main { border-color: #2a3851; background: linear-gradient(155deg, #151f33 0%, #121d30 66%, #172a30 100%); }
  html[data-theme="dark"] .guide-divider { background: #2d3b51; }
  html[data-theme="dark"] .stat-icon-mint { color: #a6d9c0; background: #203832; }
  html[data-theme="dark"] .stat-icon-blue { color: #b5d3eb; background: #23354b; }
  html[data-theme="dark"] .guide-stat b { color: #d7e1ed; }
  html[data-theme="dark"] .guide-note { border-color: #2c3b50; background: #17252e; }
  html[data-theme="dark"] .note-lock { color: #b6e0ca; background: #243c39; }
  html[data-theme="dark"] .guide-note p strong { color: #d9eee2; }
  html[data-theme="dark"] .closing-strip { border-color: #2c3950; background: rgba(18, 29, 46, .8); }
  html[data-theme="dark"] .closing-icon { color: #b4dfca; background: #203832; }
  html[data-theme="dark"] .closing-strip p strong { color: #dce9e9; }
  html[data-theme="dark"] .footer-dot { color: #9fd1b9; }
  html[data-theme="dark"] .toast { border-color: #365348; color: #d1efdf; background: #172a29; box-shadow: 0 14px 38px rgba(0, 0, 0, .38); }
  html[data-theme="dark"] .toast-check { color: #102019; background: #9ad3b5; }
  html[data-theme="dark"] .choice-dialog { border-color: #34415a; color: #e8eef8; background: #141e31; box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
  html[data-theme="dark"] .choice-dialog::backdrop { background: rgba(3, 6, 15, .72); }
  html[data-theme="dark"] .dialog-symbol { color: #b8e1ce; background: #223936; }
  html[data-theme="dark"] .dialog-close { color: #c0cada; background: #202c41; }
  html[data-theme="dark"] .dialog-close:hover { color: #f4f7fc; background: #2b3a52; }

  html[data-theme="dark"] :is(.brand-copy small, .header-note, .privacy-label, .hero-subtitle, .hero-benefits, .calendar-time, .calendar-task small, .calendar-footer, .floating-note small, .hero-art-caption, .section-heading p, .wizard-meta small, .step-count span, .view-heading p, .category-card small, .micro-hint, .form-error, .field-error, .input::placeholder, .textarea::placeholder, .items-head, .items-tip, .number-unit, .choice-chip, .day-chip, .notes-count, .settings-summary, .loading-state p, .result-heading p, .result-stat span, .guide-card-main > p, .guide-stat small, .guide-note p, .closing-strip p, .closing-aside, .site-footer, .choice-dialog > p, .button-ghost, .back-button, .stepper-item) { color: #bdc9dc; }
  html[data-theme="dark"] :is(.section-kicker, .guide-topline, .items-count, .item-chip .chip-index, .schedule-day-head span, .result-note, .result-badge) { color: #b4dfcd; }
  html[data-theme="dark"] .form-error, html[data-theme="dark"] .field-error { color: #ffb6ad; }
  html[data-theme="dark"] .entry-break .entry-title { color: #cadca8; }

  @media (prefers-reduced-motion: no-preference) {
    html[data-theme="dark"] .wizard-card, html[data-theme="dark"] .hero-section, html[data-theme="dark"] .guide-card-main, html[data-theme="dark"] .guide-note, html[data-theme="dark"] .closing-strip, html[data-theme="dark"] .schedule-day, html[data-theme="dark"] .result-stat, html[data-theme="dark"] .input, html[data-theme="dark"] .select, html[data-theme="dark"] .textarea { transition: background-color .26s ease, border-color .26s ease, color .22s ease, box-shadow .26s ease; }
  }
}


/* Export-only A4 schedule: independent of the current interface theme. */
.pdf-export-host {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: -12000px;
  z-index: -1000;
  width: 718px;
  overflow: visible;
  pointer-events: none;
}

.pdf-document {
  box-sizing: border-box;
  width: 718px;
  color: #263746;
  background: #fff;
  font-family: "Cairo", "Tajawal", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

.pdf-document[lang="en"] {
  font-family: "Inter", Arial, sans-serif;
}

.pdf-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 718px;
  min-height: 1032px;
  padding: 38px 36px 34px;
  color: #263746;
  background: #fff;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pdf-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block-end: 17px;
  border-block-end: 1px solid #e4ece9;
}

.pdf-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #263f4b;
  font-size: 15px;
  font-weight: 700;
}

.pdf-brand-mark {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #4d796b;
  background: #edf5f0;
}

.pdf-brand-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pdf-created {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #647482;
  font-size: 11px;
  text-align: end;
}

.pdf-created strong {
  color: #344c5b;
  font-size: 12px;
  font-weight: 600;
}

.pdf-cover-title {
  margin-block: 68px 35px;
}

.pdf-eyebrow {
  display: block;
  margin-block-end: 9px;
  color: #577c70;
  font-size: 12px;
  font-weight: 700;
}

.pdf-cover-title h1 {
  margin: 0;
  color: #203a49;
  font-size: 31px;
  line-height: 1.3;
  font-weight: 800;
}

.pdf-cover-title p {
  max-width: 610px;
  margin: 13px 0 0;
  color: #586b77;
  font-size: 14px;
  line-height: 1.8;
}

.pdf-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.pdf-stat {
  min-height: 90px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 17px 19px;
  border: 1px solid #e2eae7;
  border-radius: 15px;
  background: #f8faf9;
}

.pdf-stat span {
  color: #596c76;
  font-size: 12px;
  font-weight: 600;
}

.pdf-stat strong {
  color: #233d4b;
  font-size: 17px;
  font-weight: 700;
}

.pdf-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-block-start: 24px;
  padding: 17px 18px;
  border-inline-start: 3px solid #77a28f;
  border-radius: 12px;
  color: #334c59;
  background: #f0f6f2;
}

.pdf-note-mark {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #4d796b;
  background: #e3efe7;
}

.pdf-note-mark svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pdf-note strong {
  display: block;
  margin-block-end: 4px;
  color: #2c4653;
  font-size: 12px;
}

.pdf-note p {
  margin: 0;
  color: #536873;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.pdf-day-page {
  min-height: 950px;
}

.pdf-day-brand {
  padding-block-end: 14px;
}

.pdf-day-index {
  color: #667883;
  font-size: 12px;
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
}

.pdf-day-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-block: 29px 19px;
  padding-block-end: 16px;
  border-block-end: 1px solid #e4ece9;
}

.pdf-day-heading h2 {
  margin: 0;
  color: #203a49;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 800;
}

.pdf-day-heading p {
  max-width: 290px;
  margin: 0;
  color: #536873;
  font-size: 12px;
  font-weight: 600;
  text-align: end;
}

.pdf-table {
  overflow: hidden;
  border: 1px solid #dfe8e5;
  border-radius: 13px;
  background: #fff;
}

.pdf-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(116px, 1fr) minmax(70px, .7fr) minmax(90px, .8fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border-block-end: 1px solid #e8eeec;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pdf-entry-row:last-child {
  border-block-end: 0;
}

.pdf-entry-row.pdf-table-head {
  min-height: 40px;
  color: #526771;
  background: #f1f5f4;
  font-size: 11px;
  font-weight: 700;
}

.pdf-cell {
  box-sizing: border-box;
  min-width: 0;
  padding: 9px 11px;
  overflow-wrap: anywhere;
}

.pdf-activity strong {
  color: #304652;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.pdf-entry-row.is-break {
  background: #fbfcfa;
}

.pdf-entry-row.is-break .pdf-activity strong {
  color: #55765e;
}

.pdf-time {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #425966;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pdf-time-separator {
  color: #98a6aa;
}

.pdf-duration {
  color: #526771;
  font-size: 11px;
  white-space: nowrap;
}

.pdf-priority {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.pdf-priority.is-high {
  color: #884b46;
  background: #f7eae8;
}

.pdf-priority.is-medium {
  color: #5a6a4e;
  background: #edf2e7;
}

.pdf-not-applicable {
  color: #7c8a91;
  font-size: 12px;
}

.pdf-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: auto;
  padding-block-start: 17px;
  border-block-start: 1px solid #e4ece9;
  color: #75838a;
  font-size: 11px;
}

.pdf-day-page .pdf-table {
  flex: 0 0 auto;
}

.button:disabled {
  opacity: .72;
  cursor: wait;
  transform: none;
}

.toast.is-error {
  border-color: #e7c2bf;
  color: #854847;
  background: #fff7f6;
}

.toast.is-error .toast-check {
  color: #fff;
  background: #b86461;
}

html[data-theme="dark"] .toast.is-error {
  border-color: #704446;
  color: #f3c6c3;
  background: #2d1d25;
}

html[data-theme="dark"] .toast.is-error .toast-check {
  color: #2b151a;
  background: #ebaaa4;
}