/* Deadlines: amber is the section's own colour; status colours run calm → soon → critical → overdue. */
:root{--deadline:#9a6424;--deadline-soft:#f3e8d6;--dl-calm:#47866b;--dl-calm-soft:#dcebe3;--dl-soon:#b07a2f;--dl-soon-soft:#f4e6cf;--dl-critical:#c2582f;--dl-critical-soft:#f7dfd3;--dl-overdue:#a64c52;--dl-overdue-soft:#f4d9da;--dl-done:#8b8a82;--dl-done-soft:#e8e7e1}
html[data-theme=dark]{--deadline:#edc68a;--deadline-soft:#3a3123;--dl-calm:#79cbaa;--dl-calm-soft:#233f36;--dl-soon:#edc68a;--dl-soon-soft:#3d3322;--dl-critical:#f2a27f;--dl-critical-soft:#45291f;--dl-overdue:#f1a3ab;--dl-overdue-soft:#432a30;--dl-done:#9aa1b3;--dl-done-soft:#2b3040}
.deadline-text{color:var(--deadline)}
.status-calm{--dl:var(--dl-calm);--dl-soft:var(--dl-calm-soft)}
.status-soon{--dl:var(--dl-soon);--dl-soft:var(--dl-soon-soft)}
.status-critical,.status-today{--dl:var(--dl-critical);--dl-soft:var(--dl-critical-soft)}
.status-overdue{--dl:var(--dl-overdue);--dl-soft:var(--dl-overdue-soft)}
.status-done{--dl:var(--dl-done);--dl-soft:var(--dl-done-soft)}

/* Sidebar */
.type-icon.deadline-icon{color:var(--deadline)}
.type-icon.deadline-icon .deadline-sand{stroke-width:2.4}
.deadline-side-link{position:relative}
.side-badge{margin-inline-start:auto;min-width:19px;height:19px;padding:0 5px;display:inline-grid;place-items:center;border-radius:10px;background:var(--dl-critical);color:#fff;font-size:10px;font-weight:800;line-height:1}
html[data-theme=dark] .side-badge{color:#2a1810}
.dashboard-main.deadlines-mode>:not(#deadlinesPage){display:none}

/* Dashboard widget */
.deadline-widget{margin-top:22px;padding:20px 22px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-soft)}
.deadline-widget-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.deadline-widget-head h2{margin:0;font-size:17px}
.deadline-widget-link{color:var(--deadline);font-size:11px;font-weight:700;white-space:nowrap}
.deadline-widget-list{display:grid;grid-template-columns:1fr;gap:12px}
.deadline-widget-item{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border-radius:16px;background:var(--dl-soft);border:1px solid color-mix(in srgb,var(--dl) 28%,transparent);transition:transform .2s}
.deadline-widget-item:hover{transform:translateY(-2px)}
.deadline-widget-icon{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:var(--card);font-size:19px}
.deadline-widget-copy{display:grid;min-width:0;flex:1}
.deadline-widget-copy b{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.deadline-widget-copy small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.deadline-days-chip{flex:0 0 auto;padding:3px 8px;border-radius:10px;background:var(--card);color:var(--dl);font-size:10px;font-weight:800}
.deadline-widget-empty{grid-column:1/-1;display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:1px dashed var(--line);border-radius:16px;background:transparent;color:var(--muted);font-size:12px;text-align:right;cursor:pointer}
.deadline-widget-empty:hover{border-color:var(--deadline);color:var(--ink)}
.deadline-widget-empty-icon{font-size:22px}
.deadline-widget-more{justify-self:start;padding:6px 12px;border-radius:10px;color:var(--deadline);font-size:12px;font-weight:800}
.deadline-widget-more:hover{background:var(--deadline-soft)}

/* Page */
.deadlines-page{animation:admin-page-enter .25s ease both}
.deadlines-heading p{max-width:520px}
.deadline-add-button{background:var(--deadline);box-shadow:5px 5px 12px #e0d3bf,-4px -4px 11px #fff}
.deadline-add-button:hover{background:#7f511c}
html[data-theme=dark] .deadline-add-button{background:var(--deadline);color:#2a1f10}
html[data-theme=dark] .deadline-add-button:hover{background:#f5d6a6}

/* Spotlight: the nearest deadline with a live countdown */
:where(.deadline-spotlight){--dl:var(--deadline);--dl-soft:var(--deadline-soft)}
.deadline-spotlight{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:28px;overflow:hidden;padding:26px 30px;border-radius:28px;background:linear-gradient(135deg,var(--dl-soft),var(--card) 62%);border:1px solid color-mix(in srgb,var(--dl) 22%,transparent);box-shadow:var(--shadow-soft)}
.deadline-spotlight::after{content:"";position:absolute;inset-block-start:-90px;inset-inline-end:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--dl) 22%,transparent),transparent 70%);pointer-events:none}
.deadline-spotlight-copy{position:relative;z-index:1;min-width:0}
.deadline-spotlight h2{display:flex;align-items:center;gap:10px;margin:4px 0 2px;font-size:24px;line-height:1.5}
.deadline-spotlight-icon{font-size:26px}
.deadline-spotlight-meta{margin:0 0 14px;color:var(--muted);font-size:12px}
.deadline-spotlight.is-empty p{margin:2px 0 14px;color:var(--muted);font-size:12px}
.deadline-spotlight-orb{width:120px;height:120px;display:grid;place-items:center;border-radius:50%;background:var(--card);box-shadow:var(--shadow-soft);font-size:50px;animation:deadline-float 4s ease-in-out infinite}
.deadline-starters{display:flex;flex-wrap:wrap;gap:9px}
.deadline-starter{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow-soft);font-size:12px;cursor:pointer;transition:transform .2s,border-color .2s}
.deadline-starter:hover{transform:translateY(-2px);border-color:var(--deadline)}
.deadline-countdown{display:flex;gap:10px;margin-bottom:16px;direction:rtl}
.deadline-countdown-cell{display:grid;justify-items:center;min-width:66px;padding:9px 6px 7px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-inset)}
.deadline-countdown-cell b{color:var(--dl);font-size:26px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.deadline-countdown-cell b.tick{animation:deadline-tick .45s ease}
.deadline-countdown-cell small{color:var(--muted);font-size:10px}
.deadline-countdown.is-overdue .deadline-countdown-cell b{color:var(--dl-overdue)}
.deadline-countdown.is-overdue::before{content:"گذشته از موعد";align-self:center;padding:4px 9px;border-radius:10px;background:var(--dl-overdue-soft);color:var(--dl-overdue);font-size:10px;font-weight:800}
.deadline-spotlight-action{min-height:44px;padding-inline:20px;background:var(--dl);color:#fff;box-shadow:none}
.deadline-spotlight-action:hover{background:var(--dl);filter:brightness(.92)}
html[data-theme=dark] .deadline-spotlight-action{background:var(--dl);color:#1d1a14;box-shadow:none}
html[data-theme=dark] .deadline-spotlight-action:hover{background:var(--dl)}

/* Progress ring */
.deadline-ring{--size:96px;position:relative;width:var(--size);height:var(--size);flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--dl) 0 var(--p),color-mix(in srgb,var(--dl) 14%,var(--line)) var(--p) 100%)}
.deadline-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card);box-shadow:var(--shadow-inset)}
.deadline-ring-center{position:relative;display:grid;justify-items:center;line-height:1.25;text-align:center}
.deadline-ring-center b{color:var(--dl);font-size:24px;font-weight:850}
.deadline-ring-center small{color:var(--muted);font-size:9px}
.deadline-ring-large{--size:168px}
.deadline-ring-large::before{inset:13px}
.deadline-ring-large .deadline-ring-center b{font-size:42px}
.deadline-ring-large .deadline-ring-center small{font-size:12px}
.status-today .deadline-ring,.status-overdue .deadline-ring{animation:deadline-pulse 2s ease-in-out infinite}

/* Stats */
.deadline-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.deadline-stat{display:grid;gap:2px;padding:15px 17px;border-radius:18px;background:var(--card);box-shadow:var(--shadow-soft)}
.deadline-stat span{color:var(--muted);font-size:11px}
.deadline-stat b{font-size:24px;line-height:1.4;font-variant-numeric:tabular-nums}
.deadline-stat small{color:var(--muted);font-size:10px}
.deadline-stat-amount b{color:var(--deadline);font-size:20px}
.deadline-stat.is-alert{background:var(--dl-overdue-soft)}
.deadline-stat.is-alert b{color:var(--dl-overdue)}

/* 90-day timeline */
.deadline-timeline-card{margin-top:18px;padding:18px 22px 14px;border-radius:22px;background:var(--card);box-shadow:var(--shadow-soft)}
.deadline-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.deadline-section-head h2{margin:0;font-size:15px}
.deadline-section-head small{color:var(--muted);font-size:10px}
.deadline-timeline{padding:4px 22px 0}
.deadline-timeline-track{position:relative;height:96px;margin-top:6px}
.deadline-timeline-track::before{content:"";position:absolute;inset-inline:0;bottom:30px;height:6px;border-radius:6px;background:linear-gradient(to left,var(--dl-critical-soft),var(--dl-soon-soft) 20%,var(--dl-calm-soft) 45%,var(--line))}
.deadline-timeline-tick{position:absolute;bottom:0;translate:50% 0;color:var(--muted);font-size:9px;white-space:nowrap}
.deadline-timeline-tick::before{content:"";position:absolute;bottom:22px;left:50%;width:2px;height:10px;border-radius:2px;background:var(--line)}
.deadline-marker{--stack:0;position:absolute;bottom:calc(42px + var(--stack) * 34px);translate:50% 0;width:32px;height:32px;display:grid;place-items:center;padding:0;border:2px solid var(--dl);border-radius:50%;background:var(--card);box-shadow:0 4px 10px rgba(0,0,0,.1);font-size:14px;cursor:pointer;transition:transform .2s}
.deadline-marker::after{content:"";position:absolute;top:100%;left:50%;width:2px;height:calc(8px + var(--stack) * 34px);translate:-50% 0;background:var(--dl)}
.deadline-marker:hover,.deadline-marker:focus-visible{transform:scale(1.15);z-index:2}
.deadline-timeline-later{display:block;margin-top:6px;color:var(--muted);font-size:10px}

/* Filters */
.deadline-filters{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 14px}
.deadline-filter{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}
.deadline-filter span{min-width:18px;padding:0 5px;border-radius:8px;background:var(--line);color:var(--ink);font-size:10px}
.deadline-filter.selected{border-color:var(--deadline);background:var(--deadline-soft);color:var(--deadline);font-weight:700}
.deadline-filter.selected span{background:var(--deadline);color:var(--card)}

/* Cards */
.deadline-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:14px}
.deadline-grid-empty{grid-column:1/-1;margin:0;padding:26px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);font-size:12px;text-align:center}
.deadline-card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:17px;border-radius:20px;background:var(--card);box-shadow:var(--shadow-soft);border-top:4px solid var(--dl);transition:transform .2s}
.deadline-card:hover{transform:translateY(-2px)}
.deadline-card.status-done{opacity:.72}
.deadline-card-top{display:flex;align-items:center;gap:11px;min-width:0}
.deadline-card-icon{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;background:var(--dl-soft);font-size:21px}
.deadline-card-copy{display:grid;min-width:0;flex:1}
.deadline-card-copy h3{overflow:hidden;margin:0;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.deadline-card-copy small{color:var(--muted);font-size:10px}
.deadline-status-pill{flex:0 0 auto;padding:3px 9px;border-radius:10px;background:var(--dl-soft);color:var(--dl);font-size:10px;font-weight:800}
.deadline-card-body{display:flex;align-items:center;gap:16px;min-width:0}
.deadline-facts{display:grid;gap:5px;min-width:0;margin:0}
.deadline-facts div{display:grid;min-width:0}
.deadline-facts dt{color:var(--muted);font-size:9px}
.deadline-facts dd{margin:0;overflow:hidden;font-size:11px;font-weight:700;text-overflow:ellipsis}
.deadline-note{margin:-4px 0 0;padding:7px 10px;border-radius:11px;background:var(--paper);color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.deadline-card-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.deadline-card-actions button{padding:7px 11px;border:0;border-radius:10px;font-size:10px;cursor:pointer}
.deadline-complete{flex:1;background:var(--dl);color:#fff;font-weight:700}
.deadline-complete:hover{filter:brightness(.93)}
html[data-theme=dark] .deadline-complete{color:#1d1a14}
.deadline-secondary{background:var(--card);box-shadow:var(--shadow-soft)}
.deadline-secondary.danger{color:var(--theme-danger)}
html[data-theme=dark] .deadline-secondary{background:var(--theme-surface);box-shadow:var(--shadow-inset)}
.deadline-card.is-flashing{animation:deadline-flash 1.2s ease}
.deadline-card.just-completed{animation:deadline-pop .6s ease}

/* Dialog */
.deadline-details-dialog{width:min(480px,calc(100% - 30px));max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.deadline-details-heading{display:flex;align-items:center;gap:13px;padding-inline-end:26px}
.deadline-details-heading>div{min-width:0}
.deadline-details-heading .eyebrow{margin:0 0 4px;font-size:11px}
.deadline-details-heading h2{margin:0;font-size:22px;overflow-wrap:anywhere}
.deadline-details-icon{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:15px;background:var(--dl-soft);font-size:24px}
.deadline-details-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0 10px;padding:12px 15px;border-radius:14px;background:var(--dl-soft);color:var(--dl)}
.deadline-details-summary b{font-size:17px;font-weight:800}
.deadline-details-summary>span{font-size:11px;font-weight:700}
.deadline-details-facts{display:grid;gap:0;margin:0}
.deadline-details-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}
.deadline-details-facts dt{flex-shrink:0;color:var(--muted)}
.deadline-details-facts dd{min-width:0;margin:0;color:var(--ink);text-align:left;overflow-wrap:anywhere;font-weight:600}
.deadline-details-note{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--paper);font-size:12px}
.deadline-details-note>b{font-size:11px;color:var(--muted)}
.deadline-details-note p{margin:5px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.deadline-details-actions{display:flex;margin-top:20px}
.deadline-details-actions .button{width:100%;min-height:44px;background:var(--deadline);box-shadow:none}
html[data-theme=dark] .deadline-details-actions .button{color:#2a1f10}
.deadline-marker:focus-visible{outline:3px solid var(--dl);outline-offset:4px}
@media(max-width:400px){.deadline-details-facts>div{flex-wrap:wrap;gap:4px}.deadline-details-facts dd{text-align:right;width:100%}.deadline-details-heading h2{font-size:20px}}
.deadline-dialog{width:min(500px,calc(100% - 30px))}
.deadline-dialog form:not(.dialog-close-form){gap:6px}
.deadline-dialog label,.deadline-field-label{margin-top:6px;font-size:11px;font-weight:700}
.deadline-dialog label span{color:var(--muted);font-weight:400}
.deadline-dialog input,.deadline-dialog select{width:100%;min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#f0efea;color:var(--ink);font:inherit;font-size:12px}
.deadline-dialog input:focus,.deadline-dialog select:focus{outline:2px solid var(--deadline);outline-offset:1px}
.deadline-category-field{margin:10px 0 0;padding:0;border:0}
.deadline-category-field legend{margin-bottom:7px;font-size:11px;font-weight:700}
.deadline-category-picker{display:flex;flex-wrap:wrap;gap:6px}
.deadline-category-option{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--line);border-radius:11px;background:transparent;font-size:11px;cursor:pointer}
.deadline-category-option b{font-weight:500}
.deadline-category-option.selected{border-color:var(--deadline);background:var(--deadline-soft);color:var(--deadline)}
.deadline-category-option.selected b{font-weight:800}
.deadline-date-row{display:grid;grid-template-columns:.8fr 1.3fr;gap:8px}
.deadline-date-shortcuts{display:flex;flex-wrap:wrap;gap:6px}
.deadline-date-shortcuts button{padding:4px 10px;border:1px dashed var(--line);border-radius:9px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}
.deadline-date-shortcuts button:hover{border-color:var(--deadline);color:var(--deadline)}
.deadline-date-preview{margin:2px 0 0;padding:8px 11px;border-radius:11px;background:var(--deadline-soft);color:var(--deadline);font-size:11px;font-weight:700}
.deadline-date-preview.is-past{background:var(--dl-overdue-soft);color:var(--dl-overdue)}
.deadline-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.deadline-field-grid>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.deadline-dialog .button-primary{background:var(--deadline)}
html[data-theme=dark] .deadline-dialog .button-primary{background:var(--deadline);color:#2a1f10}
html[data-theme=dark] :is(.deadline-dialog input,.deadline-dialog select){background:#1b1e28;border-color:#7a8297}
html[data-theme=dark] :is(.deadline-spotlight-orb,.deadline-countdown-cell){background:var(--theme-surface)}

@keyframes deadline-tick{0%{transform:translateY(-35%);opacity:.2}100%{transform:none;opacity:1}}
@keyframes deadline-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dl) 35%,transparent)}50%{box-shadow:0 0 0 10px transparent}}
@keyframes deadline-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes deadline-flash{0%,100%{box-shadow:var(--shadow-soft)}30%{box-shadow:0 0 0 4px var(--dl)}}
@keyframes deadline-pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

@media(max-width:900px){.deadline-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.deadline-widget-list{grid-template-columns:1fr}}
@media(max-width:680px){
  .deadline-spotlight{grid-template-columns:1fr;justify-items:center;gap:16px;padding:22px 18px;text-align:center}
  .deadline-spotlight h2{justify-content:center;font-size:20px}
  .deadline-spotlight-copy{width:100%}
  .deadline-starters,.deadline-countdown{justify-content:center}
  .deadline-countdown{gap:6px}
  .deadline-countdown-cell{min-width:0;flex:1;padding-inline:2px}
  .deadline-countdown-cell b{font-size:21px}
  .deadline-countdown.is-overdue{flex-wrap:wrap}
  .deadline-countdown.is-overdue::before{flex-basis:100%;text-align:center}
  .deadline-ring-large{--size:140px}
  .deadline-spotlight-action{width:100%}
  .deadline-stats{gap:10px}
  .deadline-stat{padding:12px 13px}
  .deadline-stat b{font-size:20px}
  .deadline-timeline-card{padding-inline:12px}
  .deadline-timeline{padding-inline:16px}
  .deadline-grid{grid-template-columns:1fr}
  .deadline-widget{padding:16px}
  .deadline-field-grid{grid-template-columns:1fr}
  .app-sidebar .side-badge{position:absolute;top:3px;inset-inline-end:calc(50% - 22px);min-width:16px;height:16px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.deadline-countdown-cell b.tick,.deadline-spotlight-orb,.status-today .deadline-ring,.status-overdue .deadline-ring,.deadline-card.is-flashing,.deadline-card.just-completed{animation:none}}

/* Landing showcase: one plain countdown row per deadline, nearest first, same amber language as the app page */
.due-showcase{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:60px;padding-block:75px 95px;border-top:1px solid rgba(60,58,48,.08)}
.due-copy{max-width:420px}
.due-copy h2{margin:0 0 16px;font-size:34px;line-height:1.45;letter-spacing:-.04em}
.due-copy h2 em{font-style:normal;color:var(--deadline)}
.due-copy>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:2.1}
.due-eyebrow{color:var(--deadline)}
.due-dot{background:var(--deadline)}
.due-points{display:grid;gap:10px;margin:18px 0 20px;padding:0;list-style:none;font-size:12px}
.due-points li{display:flex;align-items:center;gap:10px}
.due-points span{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:var(--deadline-soft);color:var(--deadline);font-size:14px}
.due-link{color:var(--deadline)}
.due-demo-wrap{position:relative;padding-bottom:26px}
.due-demo{position:relative;padding:22px;border-radius:28px;background:var(--card);box-shadow:14px 15px 30px #d5d4cd,-12px -12px 30px #fff}
.due-demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.due-demo-head>div{display:grid}
.due-demo-head small{color:var(--muted);font-size:11px}
.due-demo-head b{font-size:15px}
.due-demo-explainer{margin:0;color:var(--muted);font-size:11px;line-height:1.8}
.due-tag{background:var(--deadline-soft);color:var(--deadline)}

/* Deadline row, shared by the landing demo and the app's deadlines page:
   icon | «تا …» + big number + bar + details | action */
.due-grid,.deadline-grid{display:grid;grid-template-columns:1fr;gap:12px}
.due-card{position:relative;display:flex;align-items:center;gap:16px;overflow:hidden;min-width:0;padding:14px 18px;border-radius:20px;background:linear-gradient(100deg,var(--dl-soft),var(--card) 62%);border:1px solid color-mix(in srgb,var(--dl) 22%,transparent);box-shadow:var(--shadow-soft)}
.due-card::after{content:"";position:absolute;inset:0;background:linear-gradient(108deg,transparent 33%,rgba(255,255,255,.7) 49%,transparent 65%);transform:translateX(120%);pointer-events:none}
.due-card.is-shining::after{animation:due-shine .75s ease}
.due-card-icon{width:48px;height:48px;flex:0 0 auto;align-self:center;display:grid;place-items:center;border-radius:15px;background:var(--card);font-size:24px;box-shadow:var(--shadow-inset)}
.due-card-main{flex:1;min-width:0}
.due-card-line{display:flex;align-items:center;gap:10px}
.due-card-to{margin:0;color:var(--muted);font-size:12px}
.due-card-to b{color:var(--ink);font-weight:800}
.due-card-badge{flex:0 0 auto;padding:2px 9px;border-radius:9px;background:var(--dl);color:#fff;font-size:10px;font-weight:800}
html[data-theme=dark] .due-card-badge{color:#1d1a14}
.due-card-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0 0 5px}
.due-card-num{color:var(--dl);font-size:40px;font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.due-card-unit{color:var(--ink);font-size:14px;font-weight:700}
.due-card-bar{display:block;height:6px;overflow:hidden;border-radius:6px;background:color-mix(in srgb,var(--dl) 15%,var(--line))}
.due-card-bar i{display:block;height:100%;border-radius:inherit;background:var(--dl);transition:width .3s ease}
.due-card-meta{display:block;margin-top:6px;overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.due-card-side{flex:0 0 150px;display:grid;gap:7px}
.due-pay{width:100%;padding:11px 10px;border:1px solid color-mix(in srgb,var(--dl) 45%,transparent);border-radius:13px;background:var(--card);color:var(--dl);font-size:12px;font-weight:800;cursor:pointer;transition:background .2s,color .2s}
.due-pay:hover{background:var(--dl);color:#fff}
html[data-theme=dark] .due-pay:hover{color:#1d1a14}
.due-card.is-paid{--dl:var(--dl-calm);--dl-soft:var(--dl-calm-soft)}
.due-card.is-paid .due-pay,.due-card.status-done .due-pay{border-color:var(--line);color:var(--muted)}
.due-card.is-paid .due-pay:hover,.due-card.status-done .due-pay:hover{background:var(--line);color:var(--ink)}
.due-card.status-done{opacity:.75}
.due-card-tools{display:flex;justify-content:center;gap:6px}
.due-card-tools button{padding:4px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}
.due-card-tools button:hover{background:var(--line);color:var(--ink)}
.due-card-tools .danger{color:var(--theme-danger)}
.deadline-row.is-flashing{animation:deadline-flash 1.2s ease}
.deadline-row.just-completed{animation:deadline-pop .6s ease}

/* Landing only: keep the countdown clear and explain what the demo action does. */
.due-demo .due-card-bar{display:none}
.due-demo .due-card{flex-wrap:wrap}
.due-demo .due-card-main{flex:1 1 160px}
.due-demo .due-card-side{flex:0 0 132px;display:flex;align-items:center;gap:8px}
.due-demo .due-month-ring{position:relative;display:block;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:conic-gradient(var(--due-ring-color) 0 var(--due-month-progress),color-mix(in srgb,var(--due-ring-color) 17%,var(--line)) var(--due-month-progress) 100%);transition:background .35s ease}
.due-demo .due-month-ring::before{content:"";position:absolute;inset:4px;border:1px solid var(--card);border-radius:50%;background:var(--card);box-shadow:var(--shadow-inset)}
.due-demo .due-pay{width:auto;min-width:0;flex:1;padding:10px 8px;font-size:11px;white-space:nowrap}
.due-demo .due-pay:not([aria-pressed=true]){animation:due-pulse 1.9s ease-in-out infinite}
.due-demo .due-card:nth-child(2) .due-pay{animation-delay:.25s}
.due-demo .due-card:nth-child(3) .due-pay{animation-delay:.5s}
.due-demo .due-card:nth-child(4) .due-pay{animation-delay:.75s}
.due-demo .due-pay:hover{animation-play-state:paused}

.due-demo .preview-interaction-hint.due-hint{margin-top:14px;background:var(--deadline-soft);color:var(--deadline);box-shadow:none}
.due-demo .preview-interaction-hint.due-hint svg{fill:var(--deadline-soft);stroke:var(--deadline)}
html[data-theme=dark] .due-demo .preview-interaction-hint.due-hint{background:var(--deadline-soft);color:var(--deadline)}
html[data-theme=dark] .demo-tag.due-tag{background:var(--deadline-soft);color:var(--deadline)}
.due-note{bottom:-4px;left:-14px;transform:rotate(-2deg)}
.due-note-icon{background:var(--deadline-soft);color:var(--deadline);font-weight:800}
.due-note.is-bumped{animation:due-bump .5s ease}
html[data-theme=dark] .due-demo{box-shadow:var(--shadow-soft)}
html[data-theme=dark] .due-card::after{background:linear-gradient(108deg,transparent 33%,rgba(237,198,138,.14) 49%,transparent 65%)}
html[data-theme=dark] .due-note{background:var(--theme-surface)}
@keyframes due-shine{from{transform:translateX(120%)}to{transform:translateX(-120%)}}
@keyframes due-bump{0%,100%{transform:rotate(-2deg) scale(1)}40%{transform:rotate(-2deg) scale(1.06)}}
@keyframes due-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--dl) 0%,transparent)}50%{transform:scale(1.07);box-shadow:0 6px 16px color-mix(in srgb,var(--dl) 30%,transparent)}}
@media(max-width:900px){.due-showcase{gap:35px}}
@media(max-width:680px){
  .due-showcase{grid-template-columns:1fr;gap:28px;padding-block:55px 60px}
  .due-copy{max-width:none}
  .due-copy h2{font-size:30px}
  .due-copy>p:not(.eyebrow){font-size:11px}
  .due-demo-head{align-items:flex-start;flex-direction:column;gap:5px}
  .due-demo .due-card-side{flex:1 1 100%}
  .due-demo{padding:16px 12px;border-radius:23px}
  .due-grid,.deadline-grid{gap:10px}
  .due-card{flex-wrap:wrap;gap:10px 12px;padding:13px 12px}
  .due-card-icon{width:42px;height:42px;font-size:21px;align-self:flex-start}
  .due-card-num{font-size:34px}
  .due-card-unit{font-size:12px}
  .due-card-to{font-size:11px}
  .due-card-side{flex:1 1 100%}
  .due-note{left:0;bottom:-6px}
}
@media(prefers-reduced-motion:reduce){.due-card.is-shining::after,.due-note.is-bumped,.due-demo .due-pay,.deadline-row.is-flashing,.deadline-row.just-completed{animation:none!important}}