:root {
  color-scheme: light;
  --ink: #17231d;
  --muted: #6d776f;
  --paper: #f6f4ed;
  --card: #fffdf7;
  --line: #dce2da;
  --green: #2f7354;
  --green-soft: #e4f0e7;
  --orange: #c96636;
  --orange-soft: #f8e7da;
  --danger: #9e3f35;
  --shadow: 0 18px 44px rgba(35, 47, 39, 0.09);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 5%, rgba(191, 211, 190, .55), transparent 28rem),
    linear-gradient(140deg, #f7f3e9 0%, #f3f5ef 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }
button { cursor: pointer; }

.shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 72px;
}

.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.eyebrow, .panel-kicker {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.brand-logo { width: 34px; height: 34px; filter: drop-shadow(0 5px 10px rgba(23,35,29,.13)); }
.brand-lockup .eyebrow { margin: 0; }

h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(38px, 6vw, 68px); line-height: 1; letter-spacing: -.04em; }
.calendar { margin-top: 14px; }
.today { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; color: var(--muted); }
.india-time { padding-left: 14px; border-left: 1px solid #bec8bf; font-size: 13px; }
.india-time strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.almanac { display: flex; max-width: 760px; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin-top: 9px; color: var(--muted); font-size: 12px; }
.lunar-date { padding: 5px 9px; border-radius: 999px; color: #725424; background: #f3ead5; font-weight: 800; }
.almanac-item { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
.almanac-item b { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; font-size: 11px; }
.almanac-item span { max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.almanac-yi b { background: var(--green); }
.almanac-ji b { background: var(--orange); }
.set-switcher { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.set-color-dot { width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px rgba(23,35,29,.14); }
.set-switcher select { width: 170px; height: 38px; padding: 0 34px 0 12px; border: 1px solid #bfcbbf; border-radius: 10px; color: var(--ink); background: rgba(255,255,255,.72); font-weight: 700; outline: none; }
.set-switcher select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,115,84,.12); }
.set-action { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #cbd6cd; border-radius: 9px; color: var(--green); background: rgba(255,255,255,.58); font-size: 17px; }
.set-action:hover { background: var(--green-soft); }
.set-action:disabled { cursor: not-allowed; opacity: .38; }
.delete-set:hover { color: var(--danger); background: #f5e7e4; }
.hero-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 16px; }
.tool-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid #dccdad; border-radius: 999px; color: #725424; background: rgba(255,253,247,.72); font-size: 12px; font-weight: 800; }
.tool-pill > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; background: var(--orange); font-size: 12px; }
.tool-pill:hover { border-color: #c8ad75; background: #f5ead1; transform: translateY(-1px); }
.tool-pill:disabled { cursor: wait; opacity: .65; }
.english-button { border-color: #bfcfc3; color: var(--green); }
.english-button > span { background: var(--green); font-family: Georgia, serif; font-weight: 900; }
.english-button:hover { border-color: #94b09e; background: var(--green-soft); }
.backup-button { border-color: #c8cbd2; color: #526073; }
.backup-button > span { background: #68778b; }
.backup-button:hover { border-color: #aeb5c0; background: #eef1f4; }
.summary { min-width: 128px; padding: 16px 20px; border-left: 3px solid var(--orange); text-align: right; }
.summary span { display: block; font-family: Georgia, serif; font-size: 38px; line-height: 1; }
.summary small { color: var(--muted); }

.board { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.35fr); gap: 24px; align-items: start; }
.panel { min-height: 490px; padding: 28px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(255, 253, 247, .9); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.panel-daily { border-top: 6px solid var(--green); }
.panel-other { border-top: 6px solid var(--orange); }
.panel-heading { display: flex; min-height: 70px; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-heading h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 32px; }
.panel-other .panel-kicker { color: var(--orange); }
.panel-heading-actions { display: flex; align-items: center; gap: 8px; }

.reset-button, .filter-button { padding: 9px 13px; border: 1px solid #cbd6cd; border-radius: 999px; color: var(--green); background: transparent; font-size: 13px; font-weight: 700; }
.reset-button:hover, .filter-button:hover { background: var(--green-soft); }
.filter-button.active { border-color: var(--green); color: #fff; background: var(--green); box-shadow: 0 6px 14px rgba(47,115,84,.2); }
.add-trigger { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 12px; color: #fff; background: var(--green); font-size: 26px; line-height: 1; transition: transform .15s ease, box-shadow .15s ease; }
.add-trigger:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(47,115,84,.2); }
.add-trigger[hidden], .reset-button[hidden], .filter-button[hidden] { display: none; }
.other-trigger { background: var(--orange); }
.other-trigger:hover { box-shadow: 0 8px 18px rgba(201,102,54,.2); }

.add-form { display: flex; gap: 8px; margin: 8px 0 22px; animation: reveal-form .18s ease-out; }
.add-form[hidden] { display: none; }
.add-form input { min-width: 0; flex: 1; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; outline: none; }
.add-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,115,84,.12); }
.panel-other .add-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(201,102,54,.12); }
.add-form button { height: 44px; padding: 0 13px; border-radius: 12px; font-size: 13px; font-weight: 800; }
.form-submit { border: 0; color: #fff; background: var(--green); }
.panel-other .form-submit { background: var(--orange); }
.form-cancel { border: 1px solid var(--line); color: var(--muted); background: transparent; }
@keyframes reveal-form { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.task-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 9px; min-height: 56px; padding: 9px 10px 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: transform .15s ease, opacity .15s ease; }
.task:hover { transform: translateY(-1px); }
.task.completed { opacity: .62; }
.task.completed .task-title { text-decoration: line-through; }
.check { display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid #a8b5aa; border-radius: 8px; color: transparent; background: transparent; font-weight: 900; }
.completed .check { border-color: var(--green); color: white; background: var(--green); }
.task-title { min-width: 0; overflow-wrap: anywhere; }
.task-copy { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 7px 9px; }
.task-set-tag { flex: 0 0 auto; max-width: 120px; overflow: hidden; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--tag-color) 28%, transparent); border-radius: 999px; color: var(--tag-color); background: color-mix(in srgb, var(--tag-color) 13%, white); font-size: 11px; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.task-reminder-tag { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; color: #7a5a23; background: #f5ead1; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; }
.actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s ease; }
.task:hover .actions, .task:focus-within .actions { opacity: 1; }
.icon-button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 9px; color: var(--muted); background: transparent; }
.icon-button:hover { color: var(--ink); background: var(--paper); }
.icon-button.delete:hover { color: var(--danger); }
.reminder-button { color: #9a7a3a; opacity: .62; }
.reminder-button.active { color: #a66d12; background: #f7ecd4; opacity: 1; }
.empty { margin-top: 50px; color: #9ba39d; text-align: center; }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 12px 16px; border-radius: 12px; color: white; background: var(--ink); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.dialog { width: min(420px, calc(100% - 32px)); padding: 26px; border: 0; border-radius: 20px; color: var(--ink); background: var(--card); box-shadow: 0 24px 80px rgba(23,35,29,.22); }
.dialog::backdrop { background: rgba(23,35,29,.36); backdrop-filter: blur(3px); }
.dialog h3 { margin: 0 0 20px; font-family: Georgia, "Songti SC", serif; font-size: 28px; }
.dialog label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.dialog input, .dialog select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; outline: none; }
.dialog input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,115,84,.12); }
.reminder-field { margin-top: 16px; }
.reminder-field[hidden] { display: none; }
.weekday-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; padding: 0; border: 0; }
.weekday-picker legend { margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.weekday-picker label { margin: 0; cursor: pointer; }
.weekday-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.weekday-picker span { display: grid; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fff; transition: .15s ease; }
.weekday-picker input:checked + span { border-color: var(--green); color: #fff; background: var(--green); box-shadow: 0 5px 12px rgba(47,115,84,.2); }
.weekday-picker input:focus-visible + span { outline: 3px solid rgba(47,115,84,.18); outline-offset: 2px; }
.reminder-actions { align-items: center; }
.dialog-spacer { flex: 1; }
.remove-reminder { padding-left: 0 !important; border: 0; color: var(--danger); background: transparent; }
.remove-reminder[hidden] { display: none; }
.reminder-stack { position: fixed; z-index: 20; top: 24px; right: 24px; display: grid; width: min(340px, calc(100vw - 32px)); gap: 12px; }
.due-card { padding: 18px; border: 1px solid rgba(255,255,255,.8); border-left: 5px solid var(--set-color); border-radius: 16px; background: rgba(255,253,247,.97); box-shadow: 0 20px 54px rgba(23,35,29,.18); animation: due-in .24s ease-out; }
.due-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.due-card-kicker { margin: 0; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.due-card h3 { margin: 8px 0 6px; font-family: Georgia, "Songti SC", serif; font-size: 22px; }
.due-card-meta { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.due-card button { padding: 8px 13px; border: 0; border-radius: 9px; color: #fff; background: var(--ink); font-weight: 800; }
@keyframes due-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.dialog-message { margin: -6px 0 24px; color: var(--muted); line-height: 1.65; }
.news-dialog { width: min(620px, calc(100% - 32px)); }
.news-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.news-dialog-header h3 { margin-bottom: 4px; }
.dialog-close { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; font-size: 22px; }
.dialog-close:hover { color: var(--ink); background: var(--paper); }
.news-meta { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.news-list { display: grid; max-height: min(56vh, 520px); gap: 2px; margin: 0; padding: 0; overflow-y: auto; counter-reset: hot-news; list-style: none; }
.news-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--line); line-height: 1.45; }
.news-list li::before { content: counter(hot-news); display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: var(--muted); background: var(--paper); font-size: 12px; font-weight: 900; counter-increment: hot-news; }
.news-list li:nth-child(-n+3)::before { color: #fff; background: var(--orange); }
.news-error { margin: 24px 0; padding: 18px; border-radius: 12px; color: var(--danger); background: #f8ebe7; text-align: center; }
.news-error[hidden] { display: none; }
.english-dialog { width: min(720px, calc(100% - 32px)); }
.english-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 12px; }
.english-tabs { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--paper); }
.english-tab { padding: 8px 12px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; }
.english-tab.active { color: #fff; background: var(--green); }
.english-tab span { font-variant-numeric: tabular-nums; }
.english-audio-controls { display: flex; align-items: center; gap: 8px; }
.accent-picker { display: flex !important; align-items: center; gap: 7px; margin: 0 !important; }
.accent-picker > span { color: var(--muted); font-size: 11px; }
.dialog .accent-picker select { width: auto; height: 36px; padding: 0 30px 0 10px; border-radius: 9px; font-size: 12px; font-weight: 700; }
.play-all-button { padding: 8px 12px; border: 1px solid #bdd0c2; border-radius: 10px; color: var(--green); background: #fff; font-size: 12px; font-weight: 800; }
.play-all-button:hover { background: var(--green-soft); }
.custom-english-button { color: #725424; border-color: #dccdad; }
.settings-button { color: #526073; border-color: #c8cbd2; }
.settings-button:hover { background: #eef1f4; }
.custom-english-form { margin: 4px 0 16px; padding: 15px; border: 1px solid #d8dfd9; border-radius: 14px; background: var(--green-soft); }
.custom-english-form[hidden] { display: none; }
.custom-english-fields { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
.custom-english-form label { margin: 0; }
.custom-english-form label > span { display: block; margin-bottom: 6px; }
.custom-english-form p { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.custom-english-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.custom-english-actions button { padding: 8px 12px; border-radius: 9px; font-size: 12px; font-weight: 800; }
.english-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.english-settings-form input { font-variant-numeric: tabular-nums; }
.english-content { max-height: min(58vh, 560px); overflow-y: auto; }
.english-section + .english-section { margin-top: 22px; }
.english-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 20px; }
.english-section-title small { color: var(--muted); font-family: Inter, sans-serif; font-size: 11px; font-weight: 500; }
.english-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.english-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.english-copy { min-width: 0; }
.english-copy strong { display: block; overflow-wrap: anywhere; color: var(--ink); font-family: Georgia, serif; font-size: 17px; }
.english-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.english-item-button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 9px; color: var(--green); background: var(--green-soft); font-size: 15px; }
.english-item-button:hover { filter: brightness(.96); }
.favorite-button { color: #a66d12; background: #f7ecd4; }
.favorite-button.active { color: #fff; background: var(--orange); }
.english-empty { padding: 40px 18px; border: 1px dashed #cbd6cd; border-radius: 14px; color: var(--muted); text-align: center; line-height: 1.7; }
.backup-dialog { width: min(560px, calc(100% - 32px)); }
.backup-description { margin-top: 4px; }
.backup-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.backup-card strong, .backup-card small { display: block; }
.backup-card small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.backup-download { display: inline-flex; min-width: 94px; padding: 10px 14px; border-radius: 10px; justify-content: center; font-size: 13px; font-weight: 800; text-decoration: none; }
.backup-restore-card { display: grid; align-items: stretch; }
.backup-restore-card label { margin: 0; color: var(--ink); }
.backup-restore-card input { height: auto; padding: 10px; }
.backup-restore-card button { justify-self: end; padding: 10px 14px; border-radius: 10px; font-weight: 800; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.dialog-actions button { padding: 10px 18px; border-radius: 10px; font-weight: 700; }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.primary-button { border: 1px solid var(--green); color: white; background: var(--green); }
.danger-button { border: 1px solid var(--danger); color: white; background: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .shell { width: min(100% - 24px, 560px); padding: 36px 0 48px; }
  .hero { align-items: flex-start; }
  .summary { min-width: 96px; padding-right: 0; }
  .board { grid-template-columns: 1fr; }
  .panel { min-height: 360px; padding: 22px; }
  .actions { opacity: 1; }
  .reminder-stack { top: 12px; right: 12px; }
}

@media (max-width: 620px) {
  .english-toolbar { align-items: stretch; flex-direction: column; }
  .english-tabs { align-self: flex-start; }
  .english-audio-controls { flex-wrap: wrap; }
  .accent-picker { flex: 1; }
  .dialog .accent-picker select { min-width: 0; }
}

@media (max-width: 440px) {
  .hero { display: block; }
  .summary { margin-top: 22px; text-align: left; }
  .india-time { padding-left: 0; border-left: 0; }
  .almanac { display: grid; }
  .almanac-item span { max-width: calc(100vw - 80px); }
  .hero-tools { margin-left: 0; }
  .english-tabs, .english-audio-controls { width: 100%; }
  .english-tab { flex: 1; }
  .accent-picker { flex: 1; }
  .dialog .accent-picker select { flex: 1; min-width: 0; }
  .custom-english-fields { grid-template-columns: 1fr; }
  .english-settings-fields { grid-template-columns: 1fr; }
  .backup-card { align-items: stretch; flex-direction: column; }
}