:root {
  color-scheme: light;
  --paper: #f5f1e7;
  --paper-deep: #ebe4d5;
  --card: rgba(255, 254, 249, .88);
  --ink: #22251f;
  --muted: #6c7068;
  --line: rgba(42, 53, 45, .13);
  --jade: #28594b;
  --jade-soft: #dce9e2;
  --gold: #b78443;
  --gold-soft: #f2e4ce;
  --cinnabar: #9d4b43;
  --shadow: 0 18px 50px rgba(42, 50, 42, .09);
  --radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; overflow-x: hidden; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(183,132,67,.12), transparent 30rem),
    linear-gradient(135deg, var(--paper), #f9f7f0 48%, var(--paper-deep));
}
button, input, textarea, select { font: inherit; }
button { min-width: 44px; min-height: 44px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input, textarea, select { min-height: 44px; }

.app-shell { min-height: 100vh; min-height: 100svh; display: block; }
.sidebar {
  display: none;
  position: sticky; top: 0; height: 100vh; padding: 30px 22px;
  border-right: 1px solid var(--line); background: rgba(250,248,241,.72); backdrop-filter: blur(22px);
  flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 13px; padding: 0 8px 30px; }
.brand img { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 8px 22px rgba(40,89,75,.2); }
.brand div { display: grid; gap: 2px; }
.brand strong { font: 700 23px/1.2 Georgia, "Songti SC", serif; letter-spacing: .08em; }
.brand span, .sidebar-foot { color: var(--muted); font-size: 12px; }
.side-nav { display: grid; gap: 8px; }
.nav-button {
  border: 0; color: var(--muted); background: transparent; border-radius: 14px;
  padding: 13px 16px; display: flex; gap: 13px; align-items: center; font-weight: 650; text-align: left;
}
.nav-button span { width: 22px; text-align: center; font-size: 18px; }
.nav-button:hover { background: rgba(40,89,75,.07); color: var(--ink); }
.nav-button.active { background: var(--jade); color: #fff; box-shadow: 0 10px 24px rgba(40,89,75,.2); }
.sidebar-foot { margin-top: auto; padding: 18px 9px 0; border-top: 1px solid var(--line); }

.main-panel { min-width: 0; width: 100%; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.topbar h1 { margin: 5px 0 0; font: 700 30px/1.1 Georgia, "Songti SC", serif; }
.eyebrow { margin: 0; color: var(--jade); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.view { animation: enter .28s ease; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }

.hero-card, .card {
  background: var(--card); border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(12px);
}
.hero-card { padding: 24px 20px; display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; align-items: center; gap: 18px; }
.ring {
  --progress: 0; width: 112px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--cinnabar) calc(var(--progress) * 1turn), rgba(157,75,67,.13) 0);
  position: relative;
}
.ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:var(--card); }
.ring div { position: relative; z-index: 1; text-align: center; display:grid; }
.ring strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.ring span { color: var(--muted); font-size: 11px; }
.hero-copy h2 { margin: 0 0 7px; font: 700 23px/1.3 Georgia, "Songti SC", serif; }
.hero-copy p { color: var(--muted); margin: 0 0 14px; }
.hero-copy { width: 100%; }
.progress-track { height: 7px; border-radius: 8px; overflow: hidden; background: rgba(157,75,67,.12); }
.progress-fill { height: 100%; width: calc(var(--progress) * 100%); background: var(--cinnabar); border-radius: inherit; }

.section { margin-top: 30px; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.section-head h2 { margin:0; font-size:17px; }
.category-pill { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:750; padding:7px 11px; border-radius:999px; }
.category-pill.buddhist { color:#77501f; background:var(--gold-soft); }
.category-pill.taoist { color:var(--jade); background:var(--jade-soft); }
.category-pill.custom { color:var(--cinnabar); background:#f2dedb; }
.category-pill::before { content:""; width:7px; height:7px; background:currentColor; border-radius:50%; }

.scripture-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.scripture-card { padding:17px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; }
.mini-ring { width:52px; height:52px; border-radius:50%; background:conic-gradient(var(--jade) calc(var(--progress)*1turn), var(--jade-soft) 0); display:grid; place-items:center; }
.mini-ring::after { content:attr(data-value); width:42px; height:42px; border-radius:50%; background:var(--card); display:grid; place-items:center; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.scripture-card h3 { margin:0 0 5px; font:700 17px/1.35 Georgia,"Songti SC",serif; }
.scripture-card p { margin:0; color:var(--muted); font-size:12px; }
.open-reader { grid-column:1/-1; width:100%; border:0; background:var(--jade); color:#fff; border-radius:12px; padding:10px 13px; font-weight:700; }

.toolbar { display:grid; gap:10px; margin-bottom:18px; }
.search { width:100%; min-width:0; border:1px solid var(--line); background:var(--card); border-radius:14px; padding:12px 15px; color:var(--ink); }
.filter-group { display:flex; gap:7px; max-width:100%; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.filter-group::-webkit-scrollbar { display:none; }
.filter-button { border:1px solid var(--line); background:var(--card); color:var(--muted); padding:9px 13px; border-radius:999px; }
.filter-button.active { color:#fff; background:var(--jade); border-color:var(--jade); }
.library-list { display:grid; gap:11px; }
.library-row { padding:17px; display:flex; gap:13px; align-items:flex-start; flex-wrap:wrap; }
.library-row .info { flex:1; min-width:0; }
.library-row h3 { margin:0 0 5px; font-size:16px; }
.library-row p { margin:0; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.library-row .total { margin-left:auto; text-align:right; }
.library-row .total strong { display:block; font-size:18px; font-variant-numeric:tabular-nums; }
.library-row .total span { color:var(--muted); font-size:11px; }
.row-actions { width:100%; display:flex; gap:7px; }
.row-actions button { flex:1; }

.primary-button, .ghost-button, .text-button, .icon-button {
  border-radius:13px; padding:11px 16px; font-weight:700;
}
.primary-button { border:1px solid var(--jade); background:var(--jade); color:white; }
.primary-button:hover { filter:brightness(1.08); }
.ghost-button { border:1px solid var(--line); background:var(--card); color:var(--ink); }
.text-button { border:0; background:transparent; color:var(--cinnabar); padding:7px 10px; }
.text-button:disabled { opacity:.35; cursor:default; }
.icon-button { border:0; width:44px; height:44px; padding:0; background:rgba(40,89,75,.09); color:var(--ink); font-size:18px; display:grid; place-items:center; }
.danger-button { border:1px solid rgba(157,75,67,.28); border-radius:13px; padding:11px 16px; background:#f7e5e2; color:#873f38; font-weight:750; }

.period-picker { display:flex; gap:7px; margin-bottom:18px; }
.period-picker button { flex:1; max-width:130px; }
.stat-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.stat-summary .stat-box:last-child { grid-column:1/-1; }
.stat-box { padding:18px; }
.stat-box span { color:var(--muted); font-size:12px; }
.stat-box strong { display:block; margin-top:7px; font-size:24px; font-variant-numeric:tabular-nums; }
.chart-card { padding:22px; overflow:hidden; }
.chart { height:250px; display:flex; align-items:end; gap:max(3px,.65vw); padding-top:20px; border-bottom:1px solid var(--line); }
.bar-wrap { flex:1; min-width:3px; height:100%; display:flex; flex-direction:column; justify-content:end; align-items:center; position:relative; }
.bar { width:100%; max-width:24px; min-height:2px; height:calc(var(--height)*1%); border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#4d8170,var(--jade)); }
.bar-wrap:hover::before { content:attr(data-tip); position:absolute; bottom:calc(var(--height)*1% + 8px); background:var(--ink); color:var(--paper); padding:5px 7px; border-radius:7px; font-size:10px; white-space:nowrap; z-index:2; }
.bar-label { color:var(--muted); font-size:9px; margin-top:7px; min-height:12px; }
.breakdown { margin-top:16px; }
.breakdown-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.breakdown-row:last-child { border-bottom:0; }
.breakdown-row strong { margin-left:auto; font-variant-numeric:tabular-nums; }

.settings-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.settings-card { padding:22px; }
.settings-card h2 { margin:0 0 8px; font-size:17px; }
.settings-card p { color:var(--muted); margin:0 0 16px; font-size:13px; line-height:1.65; }
.settings-actions { display:flex; gap:9px; flex-wrap:wrap; }
.switch-row { display:flex!important; align-items:center; justify-content:space-between; gap:16px; }
.switch-row input { width:20px; height:20px; accent-color:var(--jade); }

.reader { position:fixed; inset:0; z-index:20; height:100vh; height:100dvh; background:var(--paper); display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; }
.reader[hidden] { display:none; }
.reader-topbar { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:10px; padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); border-bottom:1px solid var(--line); background:rgba(250,248,241,.94); backdrop-filter:blur(16px); }
.reader-title { text-align:center; display:grid; gap:2px; }
.reader-title strong { font:700 17px/1.3 Georgia,"Songti SC",serif; }
.reader-title span { color:var(--muted); font-size:11px; }
.reader-content { min-width:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:28px max(20px,env(safe-area-inset-left)) 54px; scroll-behavior:smooth; }
.reader-section { margin-bottom:35px; }
.reader-section h2 { color:var(--jade); font:700 18px/1.4 Georgia,"Songti SC",serif; margin:0 0 20px; }
.scripture-line { margin-bottom:22px; }
.scripture-line .pinyin { color:var(--muted); font-size:calc(14px * var(--font-scale,1)); letter-spacing:.03em; margin:0 0 5px; line-height:1.75; overflow-wrap:anywhere; }
.scripture-line .hanzi { font:400 calc(23px * var(--font-scale,1))/1.85 Georgia,"Songti SC","STSong",serif; margin:0; overflow-wrap:anywhere; }
.counter-dock { padding:10px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border-top:1px solid var(--line); background:rgba(255,254,249,.96); backdrop-filter:blur(20px); box-shadow:0 -12px 36px rgba(42,50,42,.08); }
.step-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.step-picker button { border:0; border-radius:999px; padding:7px; background:var(--jade-soft); color:var(--jade); font-weight:750; }
.step-picker button.active { background:var(--jade); color:#fff; }
.counter-stats { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; margin:10px 0; }
.counter-stats div { border-right:1px solid var(--line); display:grid; }
.counter-stats div:last-child { border-right:0; }
.counter-stats strong { font-size:17px; font-variant-numeric:tabular-nums; }
.counter-stats span { color:var(--muted); font-size:10px; }
.count-button { width:100%; height:52px; font-size:16px; }
.counter-dock>.text-button { display:block; min-height:44px; margin:0 auto -5px; }

.editor-dialog { width:min(720px,calc(100vw - 20px)); max-height:calc(100dvh - 20px); border:0; border-radius:24px; padding:0; background:var(--paper); color:var(--ink); box-shadow:0 30px 100px rgba(0,0,0,.26); }
.editor-dialog::backdrop { background:rgba(20,25,22,.45); backdrop-filter:blur(5px); }
.editor-dialog form { padding:24px; display:grid; gap:15px; }
.dialog-head { display:flex; align-items:center; justify-content:space-between; }
.dialog-head h2 { margin:0; font:700 24px Georgia,"Songti SC",serif; }
.editor-dialog label { display:grid; gap:7px; font-size:13px; font-weight:700; }
.editor-dialog input,.editor-dialog select,.editor-dialog textarea { width:100%; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); padding:11px 12px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; }
.form-error { color:var(--cinnabar); min-height:18px; margin:0; font-size:12px; }
.toast { position:fixed; left:50%; bottom:calc(82px + env(safe-area-inset-bottom)); max-width:calc(100vw - 32px); transform:translateX(-50%); z-index:50; background:var(--ink); color:var(--paper); padding:11px 17px; border-radius:999px; box-shadow:var(--shadow); font-size:13px; text-align:center; }
.empty { padding:60px 20px; text-align:center; color:var(--muted); }
.bottom-nav { position:fixed; z-index:10; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); bottom:0; left:0; right:0; padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); border-top:1px solid var(--line); background:rgba(255,254,249,.95); backdrop-filter:blur(18px); }
.bottom-nav .nav-button { min-width:0; display:grid; justify-items:center; gap:1px; padding:4px; font-size:10px; line-height:1.1; }
.bottom-nav .nav-button span { width:auto; font-size:17px; }
.bottom-nav .nav-button.active { background:transparent; color:var(--jade); box-shadow:none; }

@media (min-width: 600px) {
  .main-panel { padding-left:24px; padding-right:24px; }
  .scripture-card { grid-template-columns:auto 1fr auto; }
  .scripture-card .open-reader { grid-column:auto; width:auto; }
  .form-grid { grid-template-columns:1fr 1fr; }
}

@media (min-width: 861px) {
  .app-shell { display:grid; grid-template-columns:248px minmax(0,1fr); }
  .sidebar { display:flex; }
  .main-panel { width:min(1180px,100%); padding:34px 44px 80px; }
  .topbar { align-items:end; gap:24px; margin-bottom:28px; }
  .topbar h1 { font-size:clamp(28px,4vw,42px); }
  .bottom-nav { display:none; }
  .hero-card { padding:28px; grid-template-columns:auto 1fr; justify-items:stretch; text-align:left; gap:28px; }
  .scripture-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scripture-card { padding:19px; grid-template-columns:auto 1fr auto; gap:15px; }
  .scripture-card .open-reader { grid-column:auto; width:auto; }
  .toolbar { display:flex; flex-wrap:wrap; }
  .search { flex:1; min-width:220px; width:auto; }
  .filter-group { overflow:visible; }
  .library-row { padding:18px 20px; align-items:center; flex-wrap:nowrap; }
  .library-row .total { margin-left:0; }
  .row-actions { width:auto; }
  .row-actions button { flex:0 0 auto; }
  .stat-summary { grid-template-columns:repeat(3,1fr); }
  .stat-summary .stat-box:last-child { grid-column:auto; }
  .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reader-topbar { padding:13px 20px; }
  .reader-content { padding:34px max(24px,calc((100vw - 760px)/2)) 70px; }
  .scripture-line .hanzi { font-size:calc(25px * var(--font-scale,1)); }
  .counter-dock { padding:12px max(16px,calc((100vw - 720px)/2)) max(10px,env(safe-area-inset-bottom)); }
  .toast { bottom:28px; }
}