:root {
  --v3-bg: #f6efe4;
  --v3-bg-deep: #ede1d2;
  --v3-card: rgba(255, 252, 246, 0.88);
  --v3-card-solid: #fffaf2;
  --v3-text: #26302d;
  --v3-muted: #6f7772;
  --v3-line: rgba(53, 65, 60, 0.14);
  --v3-green: #2f6a59;
  --v3-green-2: #5f9b86;
  --v3-sage: #bed6c7;
  --v3-rose: #d9a9ae;
  --v3-lavender: #b9aed1;
  --v3-gold: #c8a15d;
  --v3-peach: #e7be9d;
  --v3-shadow: 0 16px 42px rgba(61, 51, 39, 0.10);
  --v3-shadow-soft: 0 8px 26px rgba(61, 51, 39, 0.07);
}

html[data-theme="dark"] {
  --paper: #090b0a;
  --paper-deep: #121613;
  --ink: #f3efe7;
  --muted: #a9afa9;
  --line: rgba(243, 239, 231, 0.13);
  --green: #73ad98;
  --green-soft: #183229;
  --gold-soft: #4c3d22;
  --white: #151917;
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
  --v3-bg: #090b0a;
  --v3-bg-deep: #101310;
  --v3-card: rgba(23, 27, 24, 0.94);
  --v3-card-solid: #171b18;
  --v3-text: #f3efe7;
  --v3-muted: #abb1ab;
  --v3-line: rgba(243, 239, 231, 0.13);
  --v3-green: #79b29d;
  --v3-green-2: #4d8c78;
  --v3-sage: #6f9e89;
  --v3-rose: #c98b93;
  --v3-lavender: #9f91bd;
  --v3-gold: #caa65e;
  --v3-peach: #d39b76;
  --v3-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --v3-shadow-soft: 0 9px 28px rgba(0, 0, 0, 0.28);
}

html,
body {
  background:
    radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--v3-rose) 11%, transparent) 0, transparent 25%),
    radial-gradient(circle at 90% 16%, color-mix(in srgb, var(--v3-sage) 13%, transparent) 0, transparent 24%),
    linear-gradient(180deg, var(--v3-bg), var(--v3-bg-deep));
  color: var(--v3-text);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 7%, rgba(201, 139, 147, 0.055) 0, transparent 25%),
    radial-gradient(circle at 90% 14%, rgba(111, 158, 137, 0.07) 0, transparent 25%),
    linear-gradient(180deg, #090b0a, #0d100e 60%, #090b0a);
}

body.v3-no-scroll { overflow: hidden; }

.app-shell {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.topbar {
  position: relative;
}

.topbar::after,
.v3-ornament-heading::after {
  content: "";
  display: block;
  width: 84px;
  height: 8px;
  margin-top: 8px;
  background:
    radial-gradient(circle, var(--v3-rose) 0 2px, transparent 2.7px) 0 50% / 14px 8px repeat-x;
  opacity: 0.7;
}

.v3-ornament-heading::after { position: absolute; left: 0; bottom: -9px; }
.v3-ornament-heading { position: relative; margin-bottom: 28px; }

.v3-floral-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: color-mix(in srgb, var(--v3-green) 45%, transparent);
}

.v3-flower {
  position: absolute;
  width: 180px;
  height: 180px;
  opacity: 0.19;
  filter: blur(0.15px);
}

.v3-flower-a { top: -28px; right: -42px; transform: rotate(12deg); }
.v3-flower-b { bottom: 70px; left: -48px; transform: rotate(-12deg); opacity: 0.14; }

html[data-theme="dark"] .v3-flower { opacity: 0.12; color: #7ba28f; }

.hero-card {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  padding: 30px 28px;
  border: 1px solid color-mix(in srgb, white 11%, transparent);
  background:
    radial-gradient(circle at 86% 22%, rgba(255,255,255,.10) 0 2px, transparent 3px) 0 0/24px 24px,
    linear-gradient(135deg, #1e4f42, #386f5d 75%, #2f6655);
  box-shadow: var(--v3-shadow);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: auto -35px -42px auto;
  width: 220px;
  height: 160px;
  opacity: 0.15;
  background:
    radial-gradient(ellipse at 50% 100%, transparent 47%, white 48% 49%, transparent 50%) 50% 0 / 70px 90px repeat-x;
  transform: rotate(-9deg);
}

.hero-card h2 {
  position: relative;
  z-index: 1;
  max-width: 510px;
  font-size: clamp(1.04rem, 3.8vw, 1.58rem);
  line-height: 1.36;
  text-wrap: balance;
}

.v3-lotus-mark {
  position: absolute;
  right: 88px;
  bottom: 20px;
  font-size: 2.5rem;
  color: rgba(255,255,255,.14);
  transform: rotate(-12deg);
}

.progress-ring {
  position: relative;
  z-index: 2;
  flex-basis: 82px;
  height: 82px;
  color: #fff;
  background-color: rgba(255,255,255,.08);
}

html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .habit-button,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .day-summary-card,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .day-pill,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .v3-card,
html[data-theme="dark"] .v3-more-card,
html[data-theme="dark"] .app-dialog {
  color: #f4efe6;
  background: #171b18;
  border-color: rgba(244,239,230,.13);
}

html[data-theme="dark"] .timeline-item {
  background: linear-gradient(135deg, #171b18, #1b211d);
  box-shadow: var(--v3-shadow-soft);
}

html[data-theme="dark"] .timeline-time,
html[data-theme="dark"] .timeline-note,
html[data-theme="dark"] .task-meta,
html[data-theme="dark"] .habit-target,
html[data-theme="dark"] .helper-text,
html[data-theme="dark"] .v3-card p,
html[data-theme="dark"] .v3-more-card small {
  color: #aeb5af;
}

html[data-theme="dark"] .timeline-title,
html[data-theme="dark"] .task-title,
html[data-theme="dark"] .habit-name,
html[data-theme="dark"] .section-title-row h2,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: #f5f0e8;
}

html[data-theme="dark"] .timeline-accent.personal { background: #88aa9b; }
html[data-theme="dark"] .timeline-accent.health { background: #9db879; }
html[data-theme="dark"] .timeline-accent.family { background: #cf9d6a; }
html[data-theme="dark"] .timeline-accent.spiritual { background: #aa91c6; }
html[data-theme="dark"] .timeline-accent.office { background: #86a2b0; }
html[data-theme="dark"] .timeline-accent.question-bank { background: #c78379; }
html[data-theme="dark"] .timeline-accent.lecture-notes { background: #79a8aa; }
html[data-theme="dark"] .timeline-accent.ignou { background: #b09d69; }
html[data-theme="dark"] .timeline-accent.python-manim { background: #8195cf; }

html[data-theme="dark"] .complete-toggle,
html[data-theme="dark"] .edit-block {
  color: #8fcab4;
  background: #101411;
  border-color: rgba(244,239,230,.16);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: #f4efe7;
  background: #111512;
  border-color: rgba(244,239,231,.16);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #777f79; }

html[data-theme="dark"] .bottom-nav {
  background: rgba(10, 12, 11, 0.94);
  border-color: rgba(255,255,255,.08);
}

html[data-theme="dark"] .nav-item { color: #9da49e; }
html[data-theme="dark"] .nav-item.active { color: #7fbba5; }

.v3-screen { display: none; }
.v3-screen.active { display: block; animation: fadeIn .22s ease; }
.v3-card-list { display: grid; gap: 14px; }

.v3-card {
  padding: 18px;
  border: 1px solid var(--v3-line);
  border-radius: 22px;
  color: var(--v3-text);
  background: var(--v3-card);
  box-shadow: var(--v3-shadow-soft);
  backdrop-filter: blur(10px);
}

.v3-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.v3-card h3 { margin: 8px 0 0; }
.v3-card p { margin: 7px 0 0; color: var(--v3-muted); line-height: 1.5; white-space: pre-wrap; }
.v3-small { min-height: 36px; padding: 7px 11px; border-radius: 11px; }

.v3-date-chip {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--v3-green) 90%, var(--v3-text));
  background: color-mix(in srgb, var(--v3-sage) 28%, transparent);
  font-size: .7rem;
  font-weight: 850;
}

.v3-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 17px;
}

.v3-stat {
  padding: 15px 10px;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  text-align: center;
  background: var(--v3-card);
  box-shadow: var(--v3-shadow-soft);
}

.v3-stat strong { display: block; font: 700 1.35rem Georgia, serif; }
.v3-stat small { color: var(--v3-muted); }

.v3-habit-title { display: flex; align-items: center; gap: 9px; font-size: 1rem; }
.v3-habit-title span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--v3-sage) 28%, transparent); }

.v3-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.v3-day {
  min-width: 33px;
  padding: 7px 5px;
  border: 1px solid var(--v3-line);
  border-radius: 10px;
  color: var(--v3-text);
  background: var(--v3-card-solid);
  font-size: .7rem;
  font-weight: 850;
}
.v3-day.done { color: #fff; background: var(--v3-green); border-color: var(--v3-green); }
.v3-day.not-due { opacity: .28; cursor: default; }

.v3-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.v3-more-card {
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--v3-line);
  border-radius: 23px;
  color: var(--v3-text);
  background: var(--v3-card);
  box-shadow: var(--v3-shadow-soft);
  text-align: left;
}
.v3-more-card span { display: block; margin-bottom: 13px; font-size: 1.7rem; color: var(--v3-green); }
.v3-more-card strong, .v3-more-card small { display: block; }
.v3-more-card small { margin-top: 6px; color: var(--v3-muted); line-height: 1.4; }

.v3-bottom-nav { grid-template-columns: repeat(5, 1fr); }

.v3-settings-section { display: grid; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--v3-line); }
.v3-setting-title { display: flex; align-items: center; gap: 11px; }
.v3-setting-title > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; color: var(--v3-green); background: color-mix(in srgb, var(--v3-sage) 28%, transparent); }
.v3-setting-title p { margin-top: 3px; }
.v3-theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v3-theme-picker button { padding: 11px 8px; border: 1px solid var(--v3-line); border-radius: 13px; color: var(--v3-text); background: var(--v3-card-solid); font-weight: 850; }
.v3-theme-picker button.active { color: #fff; background: var(--v3-green); border-color: var(--v3-green); }

.v3-review-card p b { display: block; margin-bottom: 3px; color: var(--v3-text); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; }

.v3-journal-intro {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 10px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--v3-rose) 35%, var(--v3-line));
  border-radius: 25px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--v3-rose) 13%, var(--v3-card-solid)), color-mix(in srgb, var(--v3-sage) 13%, var(--v3-card-solid)));
  box-shadow: var(--v3-shadow-soft);
}
.v3-journal-intro p { margin: 6px 0 0; color: var(--v3-muted); line-height: 1.5; }
.v3-intro-flower { display: grid; flex: 0 0 50px; height: 50px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--v3-rose), var(--v3-green-2)); font-size: 1.65rem; }
.v3-status-line { min-height: 20px; margin: 8px 0 12px; }
.v3-journal-excerpt { white-space: pre-wrap; }
.v3-journal-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.v3-journal-badges span { padding: 5px 8px; border-radius: 999px; color: var(--v3-muted); background: color-mix(in srgb, var(--v3-sage) 20%, transparent); font-size: .68rem; font-weight: 800; }

.v3-modal { width: min(94vw, 560px); }
.v3-journal-editor { width: min(96vw, 820px); max-height: 94dvh; }
.v3-journal-editor form { max-height: 94dvh; }
.v3-editor-section { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--v3-line); }
.v3-inline-heading, .v3-drawing-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v3-inline-heading small, .v3-drawing-topbar small { display: block; margin-top: 3px; color: var(--v3-muted); }
.v3-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.v3-photo { position: relative; overflow: hidden; border-radius: 16px; }
.v3-photo img { display: block; width: 100%; height: 180px; object-fit: cover; }
.v3-photo button { position: absolute; top: 7px; right: 7px; width: 31px; height: 31px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.64); }

.v3-pen-toolbar {
  position: sticky;
  top: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 9px;
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--v3-card-solid) 94%, transparent);
  box-shadow: var(--v3-shadow-soft);
  scrollbar-width: none;
}
.v3-pen-toolbar::-webkit-scrollbar { display: none; }
.v3-tool, .v3-color {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--v3-line);
  border-radius: 11px;
  color: var(--v3-text);
  background: var(--v3-card-solid);
  font-size: .74rem;
  font-weight: 800;
}
.v3-tool.active { color: #fff; background: var(--v3-green); border-color: var(--v3-green); }
.v3-color { width: 30px; min-height: 30px; padding: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 3px var(--v3-card-solid); }
.v3-color.active { outline: 2px solid var(--v3-green); outline-offset: 2px; }
.v3-toolbar-divider { flex: 0 0 1px; height: 26px; background: var(--v3-line); }
.v3-width-control { display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: .72rem; white-space: nowrap; }
.v3-width-control input { width: 95px; margin: 0; padding: 0; }
.v3-pencil-only { display: flex; align-items: center; gap: 5px; padding: 0 5px; font-size: .72rem; white-space: nowrap; }
.v3-pencil-only input { width: auto; margin: 0; }
.v3-pen-toolbar select { width: auto; min-width: 90px; margin: 0; padding: 8px; }
.v3-exit-fullscreen { display: none; }

.v3-canvas-frame {
  position: relative;
  height: 560px;
  overflow: hidden;
  border: 1px solid rgba(65,73,68,.20);
  border-radius: 18px;
  background-color: #fffdf8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 25px rgba(45,40,34,.09);
  touch-action: none;
}
.v3-canvas-frame[data-paper="plain"] { background: #fffdf8; }
.v3-canvas-frame[data-paper="ruled"] { background: repeating-linear-gradient(to bottom, #fffdf8 0, #fffdf8 31px, #d9d4c9 32px, #fffdf8 33px); }
.v3-canvas-frame[data-paper="grid"] { background-color: #fffdf8; background-image: linear-gradient(#e0dbd0 1px, transparent 1px), linear-gradient(90deg, #e0dbd0 1px, transparent 1px); background-size: 32px 32px; }
.v3-canvas-frame[data-paper="dotted"] { background-color: #fffdf8; background-image: radial-gradient(#d6d0c5 1.2px, transparent 1.3px); background-size: 24px 24px; }
.v3-canvas-frame canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.v3-canvas-hint { position: absolute; right: 12px; bottom: 10px; padding: 5px 8px; border-radius: 999px; color: #6d736e; background: rgba(255,255,255,.78); font-size: .67rem; pointer-events: none; }

.v3-writing-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #0b0d0c !important;
}
.v3-writing-fullscreen form { display: block !important; width: 100%; height: 100%; max-height: none !important; padding: 0 !important; overflow: hidden !important; }
.v3-writing-fullscreen form > *:not(.v3-drawing-section) { display: none !important; }
.v3-writing-fullscreen .v3-drawing-section { position: fixed; inset: 0; z-index: 999; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); background: #101311; }
.v3-writing-fullscreen .v3-drawing-topbar { color: #f4efe7; }
.v3-writing-fullscreen .v3-drawing-topbar small { color: #adb4ae; }
.v3-writing-fullscreen .v3-pen-toolbar { position: relative; border-color: rgba(255,255,255,.12); background: #1b201d; }
.v3-writing-fullscreen .v3-tool { color: #f4efe7; background: #111512; border-color: rgba(255,255,255,.14); }
.v3-writing-fullscreen .v3-tool.active { background: #4f8f79; }
.v3-writing-fullscreen .v3-exit-fullscreen { display: inline-block; color: #fff; background: #4f8f79; }
.v3-writing-fullscreen .v3-canvas-frame { height: auto; min-height: 0; border-radius: 12px; }
.v3-writing-fullscreen .v3-canvas-hint { display: none; }

.v3-checkboxes { display: flex; flex-wrap: wrap; gap: 7px; }
.v3-checkboxes label { padding: 8px 9px; border: 1px solid var(--v3-line); border-radius: 11px; background: var(--v3-card-solid); }
.v3-checkboxes input { width: auto; margin: 0 4px 0 0; }

#v3PrintArea { color: #222; background: #fff; }
.v3-print-page { max-width: 780px; margin: auto; padding: 42px; font-family: Georgia, serif; }
.v3-print-page h1 { margin-bottom: 8px; font-size: 2rem; }
.v3-print-date { color: #666; }
.v3-print-text { margin: 28px 0; white-space: pre-wrap; line-height: 1.7; }
.v3-print-page img { display: block; max-width: 100%; margin: 22px auto; border-radius: 10px; page-break-inside: avoid; }
.v3-print-flower { color: #8a6070; font-size: 2rem; }

@media (max-width: 520px) {
  .hero-card { align-items: flex-start; padding: 24px 20px; }
  .hero-card h2 { font-size: 1.03rem; line-height: 1.36; }
  .progress-ring { flex-basis: 70px; height: 70px; }
  .v3-more-grid { grid-template-columns: 1fr; }
  .v3-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v3-stat { padding: 12px 5px; }
  .v3-photo-grid { grid-template-columns: 1fr; }
  .v3-canvas-frame { height: 470px; }
  .bottom-nav .nav-item { font-size: .59rem; }
  .bottom-nav .nav-item span { font-size: 1.03rem; }
  .v3-flower { width: 135px; height: 135px; }
}

@media (max-width: 370px) {
  .v3-stat-grid { grid-template-columns: 1fr; }
  .hero-card h2 { font-size: .96rem; }
}

@media print {
  body > *:not(#v3PrintArea) { display: none !important; }
  #v3PrintArea { display: block !important; }
  @page { size: A4; margin: 14mm; }
}