:root {
  --ink: #102a43;
  --navy: #12385b;
  --navy-deep: #0a2945;
  --paper: #f5f8fb;
  --card: #ffffff;
  --line: #d8e3ec;
  --muted: #60758a;
  --soft: #eff4f8;
  --aqua: #39b8ad;
  --aqua-soft: #dff5f1;
  --amber: #c27a12;
  --amber-soft: #fff2d8;
  --red: #b83a4b;
  --red-soft: #ffe7eb;
  --green: #197a5b;
  --green-soft: #e1f5ec;
  --shadow: 0 12px 36px rgba(16, 42, 67, .09);
  --radius: 18px;
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #65d5ca; outline-offset: 3px; }

.login-shell { background: var(--navy-deep); }
.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 28px 18px;
  background:
    radial-gradient(circle at 15% 10%, rgba(57,184,173,.22), transparent 30%),
    linear-gradient(145deg, #0a2945 0%, #12385b 58%, #0d304e 100%);
}
.login-card { width: min(100%, 430px); background: var(--card); border-radius: 26px; padding: 36px 30px 30px; box-shadow: 0 28px 70px rgba(3, 20, 35, .35); }
.brand-mark { display: flex; gap: 5px; align-items: flex-end; height: 32px; margin-bottom: 26px; }
.brand-mark span { width: 8px; background: var(--aqua); border-radius: 5px; }
.brand-mark span:nth-child(1) { height: 16px; }
.brand-mark span:nth-child(2) { height: 25px; }
.brand-mark span:nth-child(3) { height: 32px; background: var(--navy); }
.eyebrow { margin: 0 0 3px; color: var(--aqua); font-size: .78rem; font-weight: 800; letter-spacing: .06em; }
.login-card h1 { margin: 0; color: var(--navy-deep); font-size: clamp(2.7rem, 14vw, 4rem); line-height: 1; letter-spacing: -.055em; }
.login-intro { margin: 18px 0 28px; color: var(--muted); line-height: 1.8; }
.login-form label { display: block; margin-bottom: 8px; font-size: .9rem; font-weight: 750; }
.password-field { position: relative; }
.password-field input { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 13px; padding: 10px 14px 10px 72px; color: var(--ink); background: #f9fbfd; transition: border-color .2s, box-shadow .2s; }
.password-field input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(57,184,173,.12); outline: none; }
.reveal-password { position: absolute; inset-inline-end: 8px; top: 7px; height: 40px; border: 0; background: transparent; color: var(--navy); font-size: .8rem; font-weight: 750; cursor: pointer; }
.remember-login { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--muted); font-size: .78rem; cursor: pointer; }
.remember-login input { width: 16px; height: 16px; accent-color: var(--aqua); }
.primary-button { width: 100%; min-height: 52px; margin-top: 16px; border: 0; border-radius: 13px; color: white; background: var(--navy); font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(18,56,91,.2); }
.primary-button:hover { background: var(--navy-deep); }
.privacy-note { margin: 22px 0 0; color: var(--muted); text-align: center; font-size: .78rem; }
.privacy-note span { color: var(--aqua); margin-inline-end: 5px; }

.topbar { position: relative; overflow: hidden; color: white; background: var(--navy); padding: calc(26px + env(safe-area-inset-top)) 18px 38px; }
.topbar::before { content: ""; position: absolute; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; inset: -165px auto auto -70px; }
.topbar-inner { width: min(100%, 920px); margin: auto; display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.eyebrow.light { color: #83ded6; }
.topbar h1 { margin: 1px 0 5px; font-size: clamp(2.25rem, 9vw, 3.7rem); line-height: 1; letter-spacing: -.055em; }
.today-date { margin: 0; color: #c8d8e6; font-size: .88rem; }
.logout-button { min-height: 42px; min-width: 62px; color: #e5f0f7; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.06); border-radius: 12px; cursor: pointer; }
.logout-button:hover { background: rgba(255,255,255,.12); }
.day-thread { position: absolute; inset: auto 0 0; height: 12px; background: var(--paper); clip-path: polygon(0 78%, 5% 30%, 11% 72%, 18% 20%, 25% 68%, 33% 25%, 42% 74%, 50% 18%, 59% 70%, 68% 28%, 77% 73%, 86% 22%, 94% 68%, 100% 32%, 100% 100%, 0 100%); }

.dashboard { width: min(100%, 920px); margin: 0 auto; padding: 20px 16px 54px; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: -3px 0 28px; }
.summary-item { min-width: 0; padding: 13px 8px 11px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 16px rgba(16,42,67,.04); }
.summary-item strong { display: block; font-size: 1.3rem; color: var(--navy); line-height: 1.15; }
.summary-item span { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.summary-item.overdue strong { color: var(--red); }
.summary-item.done strong { color: var(--green); }
.task-section { position: relative; margin: 0 0 32px; padding-inline-start: 25px; }
.task-section::before { content: ""; position: absolute; inset: 28px 7px 0 auto; width: 2px; background: var(--line); }
.section-heading { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.section-knot { position: absolute; inset-inline-start: -25px; width: 16px; height: 16px; border: 4px solid var(--paper); border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 2px var(--aqua); }
.task-section.danger .section-knot { background: var(--red); box-shadow: 0 0 0 2px var(--red); }
.task-section.completed .section-knot { background: var(--green); box-shadow: 0 0 0 2px var(--green); }
.section-heading h2 { margin: 0; font-size: 1.08rem; color: var(--ink); }
.section-heading p { margin: 2px 0 0; color: var(--muted); font-size: .76rem; }
.section-count { margin-inline-start: auto; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 10px; color: var(--navy); background: #e9f0f6; font-weight: 800; font-size: .8rem; }
.task-list { display: grid; gap: 10px; }
.task-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.task-card::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--aqua); }
.task-section.danger .task-card::after { background: var(--red); }
.task-section.completed .task-card::after { background: var(--green); }
.task-main { display: flex; align-items: center; gap: 14px; padding: 17px 17px 16px; }
.task-copy { min-width: 0; flex: 1; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; }
.priority-pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .67rem; font-weight: 800; }
.priority-critical { color: var(--red); background: var(--red-soft); }
.priority-medium { color: #8c570d; background: var(--amber-soft); }
.priority-low { color: var(--green); background: var(--green-soft); }
.timing { color: var(--muted); font-size: .72rem; direction: rtl; }
.timing, .history-times dd, .recording-state time, .batch-draft-item p { unicode-bidi: plaintext; }
.task-card h3 { margin: 0; font-size: .98rem; line-height: 1.6; overflow-wrap: anywhere; }
.task-notes { margin: 6px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; white-space: pre-wrap; }
.task-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 46px; min-width: 108px; padding: 8px 13px; color: white; border: 0; border-radius: 12px; background: var(--navy); font-size: .78rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.task-action:hover { background: var(--navy-deep); }
.task-action:disabled { opacity: .58; cursor: wait; }
.undo-action { color: var(--green); background: var(--green-soft); }
.undo-action:hover { background: #ccebdd; }
.is-completed h3 { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.alert { margin: 0 0 18px; padding: 13px 15px; border-radius: 13px; line-height: 1.55; font-size: .88rem; }
.alert-success { color: #126348; background: var(--green-soft); border: 1px solid #b8e5d2; }
.alert-error { color: #8e2737; background: var(--red-soft); border: 1px solid #f3bdc5; }
.empty-state { text-align: center; padding: 55px 24px; background: white; border: 1px solid var(--line); border-radius: 22px; }
.empty-check { display: grid; place-items: center; width: 58px; height: 58px; margin: auto; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 1.7rem; }
.empty-state h2 { margin: 16px 0 5px; }
.empty-state p { margin: 0; color: var(--muted); }
.page-footer { padding: 0 20px calc(28px + env(safe-area-inset-bottom)); color: var(--muted); text-align: center; font-size: .72rem; }
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 25px; text-align: center; }
.error-page span { display: grid; place-items: center; width: 58px; height: 58px; margin: auto; border-radius: 50%; color: var(--red); background: var(--red-soft); font-size: 1.6rem; font-weight: 900; }
.error-page h1 { margin: 18px 0 6px; }
.error-page p { color: var(--muted); }
.error-page a { display: inline-block; margin-top: 10px; color: white; background: var(--navy); padding: 12px 18px; border-radius: 12px; text-decoration: none; }

@media (max-width: 560px) {
  .login-card { padding: 30px 22px 25px; }
  .topbar { padding-inline: 16px; }
  .task-main { align-items: stretch; flex-direction: column; gap: 14px; }
  .task-main form { width: 100%; }
  .task-action { width: 100%; }
}
@media (min-width: 720px) {
  .dashboard { padding-top: 28px; }
  .task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-card { height: 100%; }
  .task-main { height: 100%; align-items: stretch; flex-direction: column; }
  .task-main form { margin-top: auto; }
  .task-action { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .task-card, .summary-item { animation: rise .35s ease-out both; }
  .task-card:nth-child(2) { animation-delay: .04s; }
  .task-card:nth-child(3) { animation-delay: .08s; }
  @keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0d1c28; --card: #132838; --ink: #edf5fa; --line: #284254; --muted: #9db0bf; --soft: #102332; --navy: #174568; --navy-deep: #0b2940; --shadow: 0 12px 32px rgba(0,0,0,.2); }
  .summary-item, .task-card, .empty-state { background: var(--card); }
  .section-count { color: #d7e9f5; background: #213a4c; }
  .password-field input { color: var(--ink); background: #102332; }
  .login-card { background: var(--card); }
  .login-card h1 { color: var(--ink); }
}


/* Task capture */
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.topbar-actions { display: flex; align-items: center; gap: .65rem; }
.new-task-button { min-height: 44px; padding: .65rem 1rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #082c46; background: var(--aqua); font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 8px 22px rgba(53,219,203,.2); }
.new-task-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.capture-card { position: relative; overflow: hidden; margin: 0 0 1.25rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 18px 55px rgba(14,43,66,.1); scroll-margin-top: 1rem; }
.capture-accent { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--aqua), #63a9ee 58%, transparent); }
.capture-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.capture-header h2 { margin: .12rem 0 .25rem; color: var(--ink); font-size: clamp(1.35rem, 4vw, 1.75rem); }
.capture-header p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.65; }
.icon-button { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: var(--soft); color: var(--muted); font: 400 1.65rem/1 inherit; cursor: pointer; }
.capture-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: .3rem; margin-bottom: 1.15rem; border: 1px solid var(--line); border-radius: 17px; background: var(--soft); }
.capture-mode { min-height: 68px; display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--muted); text-align: right; font: inherit; cursor: pointer; }
.capture-mode.is-active { border-color: rgba(45,184,177,.3); background: var(--card); color: var(--ink); box-shadow: 0 5px 20px rgba(13,52,79,.07); }
.capture-mode span:last-child { display: grid; gap: .12rem; }
.capture-mode small { font-size: .72rem; font-weight: 500; color: var(--muted); }
.mode-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #0d665f; background: rgba(52,209,194,.15); font-size: 1.05rem; }
.capture-message { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; font-weight: 700; }
.capture-message.error { color: #8c2933; background: rgba(219,71,86,.11); border: 1px solid rgba(219,71,86,.22); }
.conflict-alert { color: #7b4b05; background: var(--amber-soft); border: 2px solid #d59a2d; font-weight: 850; }
.task-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.full-field { grid-column: 1 / -1; }
.field { display: grid; gap: .42rem; color: var(--ink); font-size: .88rem; font-weight: 750; }
.field > span small { color: var(--muted); font-weight: 500; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; box-sizing: border-box; padding: .72rem .82rem; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--card); font: inherit; outline: none; }
.field textarea { resize: vertical; min-height: 86px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #27a99e; box-shadow: 0 0 0 3px rgba(39,169,158,.13); }
.choice-field { min-width: 0; padding: 0; border: 0; }
.choice-field legend { margin-bottom: .52rem; color: var(--ink); font-size: .88rem; font-weight: 800; }
.segmented, .priority-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.segmented label, .priority-choice { position: relative; cursor: pointer; }
.segmented input, .priority-choice input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label > span, .priority-choice > span { min-height: 58px; display: grid; place-content: center; gap: .1rem; padding: .5rem; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); color: var(--muted); text-align: center; }
.segmented small { font-size: .7rem; font-weight: 500; }
.segmented input:checked + span { border-color: #26aa9f; background: rgba(49,200,187,.11); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(38,170,159,.18); }
.priority-choice input:checked + span { color: var(--ink); box-shadow: inset 0 0 0 2px currentColor; }
.priority-choice.low input:checked + span { background: rgba(43,165,105,.1); color: #187b4b; }
.priority-choice.medium input:checked + span { background: rgba(219,154,44,.12); color: #95620d; }
.priority-choice.high input:checked + span { background: rgba(219,71,86,.1); color: #a12e3a; }
.conditional-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem; border: 1px dashed rgba(38,170,159,.34); border-radius: 15px; background: rgba(52,209,194,.045); }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .25rem; }
.form-footer p { margin: 0; color: var(--muted); font-size: .78rem; }
.primary-button, .secondary-button { min-height: 46px; padding: .68rem 1.1rem; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.primary-button { border: 1px solid #0c4a70; background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(14,53,81,.16); }
.secondary-button { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.primary-button:disabled, .secondary-button:disabled { cursor: wait; opacity: .62; }
.voice-panel { padding: 1.2rem .5rem .3rem; text-align: center; }
.voice-orb-wrap { position: relative; width: 126px; height: 126px; display: grid; place-items: center; margin: .2rem auto .75rem; }
.voice-rings, .voice-rings i { position: absolute; inset: 0; border-radius: 50%; }
.voice-rings i { border: 1px solid rgba(40,190,179,.18); transform: scale(.75); }
.voice-rings i:nth-child(2) { transform: scale(.92); }
.voice-rings i:nth-child(3) { transform: scale(1.08); }
.voice-record-button { position: relative; z-index: 2; width: 78px; height: 78px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(145deg, #32cfbf, #1c9f96); color: white; cursor: pointer; box-shadow: 0 13px 32px rgba(28,159,150,.3), inset 0 1px rgba(255,255,255,.35); }
.voice-record-button.is-recording { background: linear-gradient(145deg, #e55865, #bd2d3c); box-shadow: 0 13px 32px rgba(189,45,60,.3); }
.mic-glyph { position: relative; width: 18px; height: 27px; border: 3px solid currentColor; border-radius: 12px; }
.mic-glyph::before { content: ''; position: absolute; width: 28px; height: 20px; right: 50%; top: 11px; transform: translateX(50%); border: 3px solid currentColor; border-top: 0; border-radius: 0 0 16px 16px; }
.mic-glyph::after { content: ''; position: absolute; width: 3px; height: 8px; right: 50%; top: 29px; transform: translateX(50%); background: currentColor; box-shadow: -7px 7px 0 -1px currentColor, 7px 7px 0 -1px currentColor; }
.voice-panel h3 { margin: 0 0 .35rem; color: var(--ink); font-size: 1.18rem; }
.voice-panel > p { max-width: 610px; margin: 0 auto; color: var(--muted); line-height: 1.7; }
.recording-state { width: max-content; display: flex; align-items: center; gap: .55rem; margin: .85rem auto; padding: .5rem .8rem; border-radius: 999px; color: #9d2a36; background: rgba(219,71,86,.1); }
.recording-dot { width: 8px; height: 8px; border-radius: 50%; background: #db4756; animation: record-pulse 1.2s infinite; }
.recording-state time { direction: ltr; font-variant-numeric: tabular-nums; }
.voice-divider { display: flex; align-items: center; gap: .8rem; max-width: 360px; margin: 1rem auto .7rem; color: var(--muted); font-size: .75rem; }
.voice-divider::before, .voice-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.file-choice { display: inline-flex; min-height: 44px; align-items: center; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--soft); cursor: pointer; font-size: .83rem; font-weight: 750; }
.file-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.privacy-note { margin-top: 1rem !important; font-size: .76rem; }
.is-processing .voice-rings i { animation: processing-ripple 1.5s infinite; }
.is-processing .voice-rings i:nth-child(2) { animation-delay: .2s; }
.is-processing .voice-rings i:nth-child(3) { animation-delay: .4s; }
.draft-panel { padding: 1.15rem; border: 1px solid rgba(38,170,159,.3); border-radius: 16px; background: linear-gradient(145deg, rgba(49,200,187,.085), rgba(99,169,238,.055)); }
.draft-kicker { display: inline-flex; align-items: center; gap: .38rem; color: #17786f; font-size: .76rem; font-weight: 900; }
.draft-kicker span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: rgba(49,200,187,.18); }
.draft-panel h3 { margin: .45rem 0 .8rem; color: var(--ink); font-size: 1.3rem; }
.draft-panel dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; margin: 0; }
.draft-panel dl > div { padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.draft-panel dt { color: var(--muted); font-size: .7rem; font-weight: 700; }
.draft-panel dd { margin: .18rem 0 0; color: var(--ink); font-weight: 800; line-height: 1.55; }
.draft-assurance { margin: .9rem 0; padding: .68rem .8rem; border-radius: 10px; color: var(--muted); background: var(--soft); font-size: .8rem; font-weight: 700; }
.draft-actions { display: flex; justify-content: flex-end; gap: .65rem; }
@keyframes record-pulse { 50% { transform: scale(1.45); opacity: .5; } }
@keyframes processing-ripple { from { transform: scale(.55); opacity: .8; } to { transform: scale(1.12); opacity: 0; } }
@media (max-width: 680px) {
  .topbar-actions { flex-direction: column; align-items: flex-end; }
  .new-task-button { padding: .58rem .78rem; font-size: .78rem; }
  .capture-card { padding: 1rem; border-radius: 18px; }
  .capture-mode { min-height: 60px; padding: .5rem; }
  .capture-mode small { display: none; }
  .task-form, .conditional-fields, .draft-panel dl { grid-template-columns: 1fr; }
  .segmented { grid-template-columns: 1fr; }
  .segmented label > span { min-height: 48px; grid-template-columns: auto auto; gap: .4rem; align-items: center; }
  .priority-options { gap: .35rem; }
  .priority-choice > span { min-height: 48px; padding: .3rem; font-size: .75rem; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .form-footer .primary-button { width: 100%; }
  .draft-actions { display: grid; }
}
.history-topbar h1 { font-size: clamp(2rem, 8vw, 3.2rem); }
.topbar-link { display: inline-flex; min-height: 42px; align-items: center; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.26); border-radius: 12px; color: #e5f0f7; text-decoration: none; font-size: .8rem; font-weight: 800; }
.topbar-link:hover { background: rgba(255,255,255,.12); }
.page-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--muted); font-size: .8rem; }
.page-nav a { color: var(--navy); font-weight: 800; }
.history-filter { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.5rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.history-filter h2 { margin: .15rem 0 0; font-size: 1.15rem; }
.history-filter form { min-width: min(100%, 300px); }
.history-filter label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .75rem; font-weight: 800; }
.date-control { display: flex; gap: .45rem; }
.date-control input { min-width: 0; flex: 1; min-height: 44px; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--card); }
.date-control button { min-height: 44px; padding: .5rem .9rem; border: 0; border-radius: 10px; color: white; background: var(--navy); font-weight: 800; cursor: pointer; }
.history-results-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.history-results-heading h2 { margin: 0; font-size: 1.2rem; }
.history-results-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.history-results-heading .section-count { margin-inline-start: auto; }
.history-list { display: grid; gap: .8rem; }
.history-card { padding: .72rem .8rem; border: 1px solid var(--line); border-inline-start: 3px solid var(--green); border-radius: 12px; background: var(--card); box-shadow: 0 5px 16px rgba(16,42,67,.05); }
.history-card h3 { margin: 0; font-size: .9rem; line-height: 1.45; }
.history-readonly { padding: 4px 8px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: .67rem; font-weight: 800; }
.history-times { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: .9rem 0 0; }
.history-times div { padding: .7rem; border-radius: 11px; background: var(--soft); }
.history-times dt { color: var(--muted); font-size: .7rem; font-weight: 800; }
.history-times dd { margin: .2rem 0 0; font-size: .8rem; font-weight: 800; line-height: 1.55; }
.history-empty { margin-top: 1rem; }
@media (min-width: 720px) { .history-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .history-filter { align-items: stretch; flex-direction: column; }
  .history-filter form { min-width: 100%; }
  .history-times { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .recording-dot, .is-processing .voice-rings i { animation: none; }
  .new-task-button:hover { transform: none; }
}

/* Dense mobile-first dashboard and batch editor */
html, body { max-width: 100%; overflow-x: hidden; }
.topbar { padding: calc(14px + env(safe-area-inset-top)) 12px 23px; }
.topbar h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
.topbar-inner { gap: 10px; }
.topbar-actions { gap: .35rem; }
.topbar-link, .logout-button { min-height: 38px; }
.dashboard { padding: 12px 10px 36px; }
.summary-strip { gap: 5px; margin-bottom: 18px; }
.summary-item { padding: 8px 3px 7px; border-radius: 10px; box-shadow: none; }
.summary-item strong { font-size: 1.08rem; }
.task-section { margin-bottom: 20px; padding-inline-start: 18px; }
.task-section::before { inset-inline-end: 5px; }
.section-heading { gap: 8px; margin-bottom: 7px; }
.section-knot { inset-inline-start: -18px; width: 12px; height: 12px; border-width: 3px; }
.section-heading h2 { font-size: .98rem; }
.task-list { grid-template-columns: 1fr; gap: 0; }
.task-card.task-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 9px;
  min-width: 0; padding: 9px 9px 9px 8px; border-width: 0 0 1px; border-radius: 0;
  box-shadow: none; overflow: visible;
}
.task-card.task-row::after { inset: 0 auto 0 0; width: 2px; }
.task-row .task-copy { min-width: 0; }
.task-row h3 {
  display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere;
}
.task-row .task-meta { gap: 5px; margin: 3px 0 0; }
.task-row .priority-pill { padding: 2px 6px; font-size: .6rem; }
.task-row .timing { font-size: .66rem; }
.task-row .task-detail { padding: 2px 6px; border-radius: 999px; color: var(--navy); background: var(--soft); font-size: .63rem; }
.task-row .task-notes {
  display: -webkit-box; margin: 2px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  font-size: .7rem; line-height: 1.4; white-space: normal;
}
.task-row form { width: 44px; }
.task-row .task-action { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 1rem; }
.capture-card { padding: .8rem; border-radius: 14px; box-shadow: none; }
.capture-header { margin-bottom: .65rem; }
.capture-header h2 { font-size: 1.2rem; }
.capture-header p:not(.eyebrow) { font-size: .78rem; line-height: 1.45; }
.capture-modes { gap: .35rem; margin-bottom: .75rem; }
.capture-mode { min-width: 0; min-height: 52px; padding: .35rem; gap: .35rem; }
.mode-icon { width: 30px; height: 30px; }
.batch-task-form { display: block; }
.batch-task-list { display: grid; gap: .65rem; }
.batch-task-editor {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem;
  margin: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft);
}
.batch-task-editor > legend { width: 100%; padding: 0; color: var(--navy); font-size: .78rem; font-weight: 900; }
.batch-task-editor > legend .remove-batch-task { float: left; border: 0; color: var(--red); background: transparent; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.batch-task-editor .field { gap: .25rem; font-size: .76rem; }
.batch-task-editor .field input, .batch-task-editor .field textarea, .batch-task-editor .field select { min-width: 0; min-height: 42px; padding: .45rem .55rem; border-radius: 9px; }
.batch-task-editor .field textarea { min-height: 54px; }
.batch-task-editor .choice-field legend { margin-bottom: .3rem; font-size: .76rem; }
.batch-task-editor .segmented, .batch-task-editor .priority-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
.batch-task-editor .segmented label > span, .batch-task-editor .priority-choice > span { min-height: 44px; padding: .25rem .1rem; border-radius: 8px; font-size: .68rem; }
.batch-task-editor .segmented small { display: none; }
.batch-task-editor .conditional-fields { grid-template-columns: 1fr; gap: .45rem; padding: .5rem; }
.task-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.batch-add-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .65rem 0; }
.batch-add-row .secondary-button { min-height: 42px; }
.batch-add-row span { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.form-footer { padding-top: .4rem; }
.form-footer .primary-button { margin-top: 0; }
.batch-draft-details { display: grid; gap: .45rem; }
.batch-draft-item { padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.batch-draft-item h4 { margin: 0; font-size: .88rem; overflow-wrap: anywhere; }
.batch-draft-item p { margin: .2rem 0 0; color: var(--muted); font-size: .72rem; }
.batch-draft-item .draft-notes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capture-message:focus, .draft-panel:focus, .alert:focus { outline: 3px solid var(--aqua); outline-offset: 2px; }

/* Deterministic recommendation: compact enough to stay above the task list on phones. */
.recommendation-card { margin: 0 0 14px; padding: 12px; border: 1px solid rgba(57,184,173,.38); border-radius: 15px; background: linear-gradient(145deg, var(--card), var(--aqua-soft)); box-shadow: 0 8px 24px rgba(16,42,67,.06); }
.recommendation-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recommendation-heading h2 { margin: 1px 0 0; font-size: 1.08rem; }
.recommendation-button { min-height: 42px; padding: .5rem .8rem; border: 0; border-radius: 11px; color: #fff; background: var(--navy); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.recommendation-button:disabled { opacity: .6; cursor: wait; }
.recommendation-time { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; color: var(--muted); font-size: .74rem; }
.recommendation-time small { font-weight: 400; }
.recommendation-time input { width: 92px; min-height: 38px; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--card); font: inherit; direction: ltr; }
.recommendation-result { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.recommended-task, .recommendation-alternative { padding: 9px; border-radius: 10px; background: var(--card); }
.recommended-task { border-inline-start: 4px solid var(--aqua); }
.recommended-task h3, .recommendation-alternative h4, .alternatives-title { margin: 0; color: var(--ink); font-size: .9rem; }
.recommendation-result ul { margin: 4px 0 0; padding-inline-start: 19px; }
.alternatives-title { margin-top: 9px; font-size: .76rem; }
.recommendation-alternative { display: inline-block; width: calc(50% - 4px); margin-top: 6px; vertical-align: top; }
.recommendation-alternative + .recommendation-alternative { margin-inline-start: 4px; }

@media (min-width: 360px) {
  .batch-task-editor .conditional-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .topbar-actions { display: grid; grid-template-columns: auto auto; }
  .topbar-actions form { grid-column: 2; }
  .topbar-link { grid-row: 1; }
  .new-task-button { grid-row: 1; }
  .task-main, .task-card.task-row { flex-direction: initial; }
  .task-row .task-action { width: 44px; }
  .capture-mode small { display: none; }
  .form-footer { gap: .5rem; }
}
@media (min-width: 720px) {
  .task-list { grid-template-columns: 1fr; }
  .task-card.task-row { height: auto; }
  .batch-task-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .batch-task-editor .full-field { grid-column: 1 / -1; }
  .batch-draft-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.compact-tool { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.compact-tool h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.compact-tool > p { margin: 0 0 .8rem; color: var(--muted); }
.compact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.tool-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.change-preview { padding: .7rem; margin: .5rem 0; border-radius: 10px; background: var(--paper); }
.change-preview h4 { margin: 0 0 .4rem; }
.change-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; direction: rtl; font: inherit; font-size: .82rem; }
.recurrence-badge { border-radius: 999px; padding: .15rem .45rem; background: #dff2e7; color: #246447; font-size: .78rem; }

/* Daily overview: the page opens with decisions, while setup tools stay folded away. */
.today-overview { margin-bottom: 26px; }
.today-overview .summary-strip { margin: 0 0 10px; }
.today-overview .recommendation-heading { justify-content: flex-start; }
.today-overview .recommendation-time { justify-content: flex-start; }
.today-overview .recommendation-time > span:last-child { display: inline-flex; align-items: center; gap: 5px; }
.task-section .section-count { margin-inline-start: 0; }
.recommendation-heading p { margin: 3px 0 0; color: var(--muted); font-size: .74rem; }
.advanced-tools { margin: 38px 0 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: clip; }
.advanced-tools-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; padding: 12px 15px; cursor: pointer; list-style: none; }
.advanced-tools-toggle::-webkit-details-marker { display: none; }
.advanced-tools-toggle strong, .advanced-tools-toggle small { display: block; }
.advanced-tools-toggle strong { color: var(--ink); font-size: .92rem; }
.advanced-tools-toggle small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.advanced-tools-chevron { color: var(--navy); font-size: 1.2rem; transition: transform .2s ease; }
.advanced-tools[open] .advanced-tools-chevron { transform: rotate(180deg); }
.advanced-tools-content { padding: 0 12px 12px; border-top: 1px solid var(--line); }
.advanced-tools-content .compact-tool { margin: 12px 0 0; background: var(--paper); }

.report-shell { max-width: 920px; margin: 0 auto; padding: 28px 20px 64px; }
.report-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; padding: 22px; background: var(--navy); color: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.report-header h1 { margin: 4px 0; font-size: clamp(1.55rem, 4vw, 2.2rem); }
.report-header .eyebrow { color: #bfe2df; }
.report-date { margin: 5px 0 0; color: #d6e8ea; font-size: .85rem; }
.report-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.report-nav a { display: inline-flex; padding: 9px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; text-decoration: none; font-size: .8rem; }
.report-section { margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.report-section .section-heading { margin-bottom: 12px; }
.report-list { display: grid; gap: 10px; }
.report-card { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.report-card h3 { margin: 0 0 3px; font-size: .9rem; }
.report-card p { margin: 0; color: var(--muted); font-size: .76rem; }
.report-empty { padding: 24px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }
.report-empty.success { color: var(--success); background: #f1faf5; }
.stalled-actions span { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: #fff1e8; color: #9a4b2f; font-size: .76rem; }
@media (max-width: 620px) { .report-shell { padding: 16px 12px 48px; } .report-header { display: block; padding: 18px; } .report-nav { margin-top: 18px; } .report-card { align-items: flex-start; flex-direction: column; } }

@media (max-width: 420px) {
  .topbar { padding: calc(18px + env(safe-area-inset-top)) 14px 28px; }
  .topbar-inner { flex-direction: column; gap: 14px; }
  .topbar h1 { margin-top: 0; font-size: 2.25rem; }
  .topbar-actions { width: 100%; flex-direction: row; align-items: center; gap: 6px; }
  .topbar-actions > * { min-width: 0; }
  .topbar-link, .logout-button { min-height: 40px; padding-inline: 10px; font-size: .72rem; }
  .new-task-button { flex: 1; min-height: 40px; white-space: nowrap; }
  .dashboard { padding: 13px 12px 40px; }
  .summary-strip { gap: 5px; }
  .summary-item { padding: 10px 4px 9px; border-radius: 11px; }
  .summary-item strong { font-size: 1.12rem; }
  .summary-item span { font-size: .65rem; }
  .recommendation-card { padding: 11px; }
  .recommendation-heading p { display: none; }
  .recommendation-time { margin-top: 7px; }
  .recommendation-time input { width: 68px; }
  .task-section { padding-inline-start: 18px; }
  .compact-grid { grid-template-columns: 1fr; }
  .advanced-tools { margin-top: 30px; }
}
@media (max-width: 620px) { .compact-grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
  .batch-task-editor { background: #102332; }
  .task-card.task-row { background: var(--card); }
}

/* D1: الموعد بطاقة حدث مستقلة عن بطاقة المهمة، والمشروعات شجرة قابلة للقراءة على الهاتف. */
.appointments-section, .projects-section { margin: 0 0 24px; }
.appointment-list, .project-list { display: grid; gap: 9px; }
.appointment-card, .project-card { padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); box-shadow: var(--shadow); }
.appointment-card { border-inline-start: 4px solid #668ee8; }
.appointment-label { display: inline-block; padding: 3px 7px; border-radius: 999px; color: #3159a5; background: #e7edff; font-size: .68rem; font-weight: 800; }
.appointment-card h3, .project-card h3 { margin: 6px 0 2px; font-size: .98rem; }
.appointment-card p, .project-card p, .muted-empty { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.project-card { border-inline-start: 4px solid var(--aqua); }
.subtask-list { display: grid; gap: 5px; margin-top: 10px; padding-inline-start: 10px; border-inline-start: 2px solid var(--line); }
.subtask-item { display: flex; flex-wrap: wrap; gap: 5px; color: var(--ink); font-size: .78rem; }
.subtask-item span { color: var(--navy); font-size: .67rem; font-weight: 800; }
.subtask-item small { width: 100%; color: var(--muted); font-size: .66rem; }
@media (min-width: 720px) { .appointment-list, .project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Quiet page navigation: the existing top actions remain available, while the
   sidebar provides a consistent home for moving between pages. */
.app-sidebar { position: fixed; z-index: 30; inset: 0 0 0 auto; width: 244px; display: flex; flex-direction: column; padding: 26px 16px; color: #dcebf3; background: linear-gradient(180deg, #0b2b47, #12385b); box-shadow: -14px 0 34px rgba(8,32,52,.10); }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 28px; }
.sidebar-brand > span:last-child { display: grid; gap: 2px; }
.sidebar-brand strong { color: #fff; font-size: 1.25rem; letter-spacing: -.03em; }
.sidebar-brand small { color: #9fc0d1; font-size: .68rem; }
.sidebar-brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #07344d; background: #67d2c7; font-weight: 900; }
.sidebar-nav { display: grid; gap: 6px; }
.sidebar-link { display: flex; align-items: center; gap: 11px; min-height: 45px; padding: 8px 11px; border: 1px solid transparent; border-radius: 12px; color: #c4d8e3; text-decoration: none; font-size: .84rem; font-weight: 750; transition: background .18s ease, color .18s ease, transform .18s ease; }
.sidebar-link > span:first-child { display: grid; place-items: center; width: 22px; color: #82d8d0; font-size: 1rem; }
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(-2px); }
.sidebar-link.is-active { color: #fff; border-color: rgba(103,210,199,.24); background: rgba(103,210,199,.14); box-shadow: inset 3px 0 #67d2c7; }
.sidebar-note { margin: auto 8px 4px; color: #8eafc1; font-size: .7rem; line-height: 1.7; }
.sidebar-toggle, .sidebar-backdrop { display: none; }
.login-shell .app-sidebar, .login-shell .sidebar-toggle { display: none; }
@media (min-width: 900px) { .dashboard, .report-shell { margin-right: 244px; } }
@media (max-width: 899px) {
  .app-sidebar { inset: 0 0 0 auto; width: min(82vw, 300px); transform: translateX(105%); transition: transform .22s ease; }
  .sidebar-open .app-sidebar { transform: translateX(0); }
.sidebar-toggle { position: fixed; z-index: 25; inset: 12px 12px auto auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 13px 6px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #eefaff; background: linear-gradient(135deg, rgba(14,54,83,.96), rgba(22,83,105,.94)); box-shadow: 0 8px 24px rgba(5,30,49,.22), inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(8px); font: inherit; font-size: .72rem; font-weight: 850; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.sidebar-toggle > span:first-child { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #07344d; background: #67d2c7; font-size: .95rem; line-height: 1; }
.sidebar-toggle:hover { background: linear-gradient(135deg, rgba(18,69,98,.98), rgba(27,100,118,.96)); box-shadow: 0 10px 28px rgba(5,30,49,.3), inset 0 1px rgba(255,255,255,.18); transform: translateY(-1px); }
.sidebar-toggle:active { transform: translateY(0); }
  .sidebar-backdrop { position: fixed; z-index: 29; inset: 0; display: block; border: 0; background: rgba(2,16,28,.42); }
  .topbar-inner { padding-inline-end: 46px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar-link, .app-sidebar, .sidebar-toggle { transition: none; } }

/* Final compact header pass: navigation lives in the sidebar, so the header
   only carries the page identity and the primary action. */
.sidebar-logout-form { margin-top: 28px; }
.sidebar-logout { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 43px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #c8dce6; background: rgba(255,255,255,.055); font: inherit; font-size: .8rem; font-weight: 750; cursor: pointer; }
.sidebar-logout > span:first-child { display: grid; place-items: center; width: 22px; color: #f3b0a8; font-size: 1.05rem; }
.sidebar-logout:hover { color: #fff; background: rgba(184,58,75,.2); border-color: rgba(255,160,157,.3); }
.topbar { padding: calc(15px + env(safe-area-inset-top)) 16px 22px; }
.topbar h1 { font-size: clamp(1.85rem, 7vw, 2.8rem); }
.day-thread { height: 8px; }
.dashboard-topbar .topbar-actions { position: static; margin-inline-start: auto; margin-top: 8px; }
.dashboard-topbar .new-task-button { min-height: 35px; padding: .42rem .68rem; border-radius: 10px; font-size: .72rem; box-shadow: 0 5px 14px rgba(53,219,203,.16); }
.dashboard-topbar .new-task-button span { font-size: .95rem; }
@media (max-width: 899px) {
  .sidebar-toggle { inset: 10px auto auto 12px; }
  .topbar-inner { padding-inline-end: 0; }
  .dashboard-topbar .topbar-title { padding-inline: 0; }
  .dashboard-topbar .topbar-actions { position: static; margin-inline-start: auto; margin-top: 8px; }
  .dashboard-topbar .topbar-inner { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .sidebar-logout, .new-task-button { transition: none; } }