:root {
  --canvas: #f3eee6;
  --canvas-deep: #e9e0d3;
  --surface: rgba(252, 249, 244, .88);
  --surface-solid: #fcf9f4;
  --surface-strong: #fffdf8;
  --ink: #211d18;
  --muted: #70685f;
  --faint: #9b9185;
  --line: rgba(61, 51, 42, .11);
  --line-strong: rgba(61, 51, 42, .18);
  --gold: #a57a43;
  --gold-deep: #77542d;
  --olive: #53604c;
  --wine: #7c4e48;
  --blue: #556a78;
  --success: #4e7157;
  --danger: #9a554f;
  --radius-xs: 12px;
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --shadow-sm: 0 10px 25px rgba(55, 45, 34, .06);
  --shadow-md: 0 22px 60px rgba(55, 45, 34, .09);
  --shadow-lg: 0 32px 80px rgba(40, 31, 23, .16);
  --rail: 258px;
  --font-serif: 'Libre Caslon Display', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% -10%, rgba(165, 122, 67, .09), transparent 28rem),
    radial-gradient(circle at 12% 100%, rgba(83, 96, 76, .06), transparent 30rem),
    var(--canvas);
  font-family: var(--font-sans);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }
.hidden { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}

.app-frame { min-height: 100vh; }
.rail { display: none; }
.content-shell { min-width: 0; }
.page-wrap { width: min(1440px, 100%); margin: 0 auto; padding: 1rem 1rem 7rem; }
.mobile-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 66px; padding: .7rem 1rem;
  background: color-mix(in srgb, var(--canvas) 85%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.08);
}
.mobile-brand { display: inline-flex; align-items: center; gap: .7rem; }
.mobile-brand strong { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; }
.icon-action {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-solid);
  font-size: 1.35rem; box-shadow: var(--shadow-sm);
}
.brand-seal {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #2c2822, #13110e); color: #f7e5bd;
  border: 1px solid rgba(255,255,255,.08); font-family: var(--font-serif); font-size: 1.5rem;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.025), 0 10px 25px rgba(0,0,0,.12);
}
.brand-seal.mini { width: 36px; height: 36px; font-size: 1.05rem; }

.page-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 0 1.1rem;
}
.page-heading h1 { margin: .2rem 0 0; font-family: var(--font-serif); font-size: clamp(2rem, 7vw, 3.25rem); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.kicker { margin: 0; color: var(--gold-deep); text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 700; }
.desktop-action { display: none; }

.surface {
  background: linear-gradient(180deg, rgba(255,253,249,.92), rgba(250,246,239,.86));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.button {
  min-height: 46px; padding: .78rem 1.05rem; border-radius: 999px;
  border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button:focus-visible, .rail-link:focus-visible, .bottom-link:focus-visible, .filter-chip:focus-visible, .text-action:focus-visible, .close-button:focus-visible { outline: 3px solid rgba(165,122,67,.28); outline-offset: 2px; }
.button.primary { color: #fffaf0; background: linear-gradient(180deg, #9b713e, #79542d); box-shadow: 0 12px 28px rgba(119,84,45,.20); }
.button.primary:hover { box-shadow: 0 16px 35px rgba(119,84,45,.26); }
.button.secondary { background: var(--surface-strong); border-color: var(--line-strong); color: var(--ink); }
.button.ghost { background: transparent; border-color: transparent; color: var(--gold-deep); }
.full-button { width: 100%; }
.text-action { border: 0; padding: .4rem 0; background: transparent; color: var(--gold-deep); font-weight: 700; cursor: pointer; font-size: .86rem; }
.action-row { display: flex; flex-wrap: wrap; gap: .7rem; }

.toast-stack { display: grid; gap: .6rem; margin-bottom: 1rem; }
.toast { padding: .9rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-strong); box-shadow: var(--shadow-sm); font-size: .9rem; }
.toast-success { border-color: rgba(78,113,87,.22); color: var(--success); background: #f2f6f1; }
.toast-error { border-color: rgba(154,85,79,.22); color: var(--danger); background: #faf1ef; }
.toast-info { color: var(--gold-deep); }

/* Dashboard */
.bento-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.dashboard-bento { margin-top: .15rem; }
.now-reading-card { position: relative; overflow: hidden; padding: 1rem; display: grid; grid-template-columns: 106px 1fr; gap: 1rem; align-items: start; }
.now-reading-card::after {
  content: ''; position: absolute; width: 260px; height: 260px; right: -120px; top: -120px; border-radius: 50%;
  border: 1px solid rgba(165,122,67,.12); box-shadow: 0 0 0 34px rgba(165,122,67,.025), 0 0 0 68px rgba(165,122,67,.018); pointer-events: none;
}
.reading-cover-wrap { position: relative; z-index: 1; }
.cover-elevation { width: 100%; aspect-ratio: 2 / 3; border-radius: 9px 13px 13px 9px; overflow: hidden; background: #ded1bd; box-shadow: 0 14px 30px rgba(44,34,25,.22), -5px 0 0 #e7dccb; }
.cover-elevation.large-cover { max-width: 250px; }
.cover-image { width: 100%; height: 100%; object-fit: cover; }
.cover-fallback { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(145deg, #cdb996, #92704a); color: #fff4dc; }
.cover-fallback span { font-family: var(--font-serif); font-size: clamp(3rem, 8vw, 6rem); }
.now-reading-copy { min-width: 0; position: relative; z-index: 2; }
.now-reading-copy h2, .book-hero-main h2, .full-calendar-card h2, .welcome-empty h2 { margin: .32rem 0 .15rem; font-family: var(--font-serif); font-size: clamp(1.7rem, 5vw, 3.25rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.book-author { margin: 0; color: var(--muted); font-size: .92rem; }
.inline-label { display: inline-flex; align-items: center; gap: .45rem; color: var(--olive); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #68815f; box-shadow: 0 0 0 5px rgba(104,129,95,.11); }
.progress-block { margin-top: 1rem; }
.progress-block.spacious { margin: 1.6rem 0 1.3rem; }
.progress-topline, .progress-foot { display: flex; justify-content: space-between; gap: .6rem; align-items: center; }
.progress-topline { font-size: .8rem; color: var(--muted); margin-bottom: .45rem; }
.progress-topline strong { color: var(--ink); }
.progress-foot { margin-top: .45rem; color: var(--faint); font-size: .72rem; }
.progress-track { height: 8px; border-radius: 999px; background: rgba(83,96,76,.1); overflow: hidden; }
.progress-track.tall { height: 11px; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #63715b, #a37b48); }
.now-reading-copy .action-row { margin-top: 1rem; }
.progress-orbit { display: none; }

.goal-card, .forecast-card, .calendar-card, .streak-card, .recent-card, .library-preview-card, .metric-tile, .legend-card { padding: 1rem; }
.card-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card-heading-row h3, .history-panel h3, .legend-card h3, .library-preview-card h3, .recent-card h3 { margin: .2rem 0 0; font-family: var(--font-serif); font-size: 1.55rem; font-weight: 400; }
.metric-badge { padding: .42rem .65rem; border-radius: 999px; background: rgba(83,96,76,.08); color: var(--olive); font-size: .75rem; font-weight: 800; }
.daily-goal-layout { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 1rem; margin-top: 1rem; }
.goal-gauge {
  --goal: 0; width: 112px; aspect-ratio: 1; border-radius: 50%; padding: 10px;
  background: conic-gradient(var(--olive) calc(var(--goal) * 1%), rgba(83,96,76,.11) 0);
}
.goal-gauge > div { width: 100%; height: 100%; border-radius: 50%; background: var(--surface-solid); display: grid; place-items: center; align-content: center; }
.goal-gauge strong { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; line-height: 1; }
.goal-gauge span { font-size: .7rem; color: var(--muted); }
.goal-copy strong { font-size: .95rem; }
.goal-copy p, .muted-copy { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.goal-copy p { margin: .35rem 0 .3rem; }
.big-metric { margin-top: .7rem; font-family: var(--font-serif); font-size: 3.8rem; line-height: .88; letter-spacing: -.05em; }
.metric-unit { color: var(--muted); margin-top: .3rem; font-size: .84rem; }
.confidence-line { margin-top: 1.05rem; display: flex; align-items: center; gap: .45rem; color: var(--faint); font-size: .74rem; }
.confidence-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.forecast-date { margin-top: .75rem; display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-serif); font-size: 3.2rem; line-height: .9; }
.forecast-date span { font-family: var(--font-sans); font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--gold-deep); }
.calendar-heading { margin-bottom: .7rem; }
.streak-card { position: relative; overflow: hidden; }
.streak-symbol { position: absolute; right: -.05em; top: -.28em; font-family: var(--font-serif); font-size: 8rem; line-height: 1; color: rgba(165,122,67,.075); }
.streak-card h3 { margin: .35rem 0 0; font-family: var(--font-serif); font-size: 2.3rem; font-weight: 400; }
.streak-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin: 1rem 0; }
.streak-rule span { height: 1px; background: var(--line-strong); }
.streak-rule i { width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); }
.small-stat-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; }
.small-stat-row span { color: var(--muted); }
.dashboard-lower-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; margin-top: .9rem; }
.recent-list { display: grid; margin-top: .9rem; }
.recent-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.recent-row:first-child { border-top: 0; }
.date-chip { width: 44px; height: 50px; border-radius: 12px; display: grid; place-items: center; align-content: center; background: #f1e7d8; color: var(--gold-deep); }
.date-chip strong { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1; font-weight: 400; }
.date-chip span { font-size: .6rem; letter-spacing: .1em; font-weight: 800; }
.recent-copy { min-width: 0; }
.recent-copy strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; }
.recent-copy span { display: block; color: var(--muted); font-size: .72rem; margin-top: .15rem; }
.recent-time { font-size: .82rem; font-weight: 800; }
.cover-stack { display: flex; align-items: flex-end; padding: 1.1rem .2rem .2rem; min-height: 170px; }
.mini-cover { width: 88px; aspect-ratio: 2 / 3; border-radius: 7px 9px 9px 7px; overflow: hidden; background: #d8c5a7; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 12px 25px rgba(48,36,25,.15); margin-left: -22px; transition: transform .18s ease, margin .18s ease; }
.mini-cover:first-child { margin-left: 0; }
.mini-cover:hover { transform: translateY(-8px) rotate(-1deg); margin-right: 14px; }
.mini-cover img { width:100%; height:100%; object-fit:cover; }
.mini-cover span { width:100%; height:100%; display:grid; place-items:center; font-family:var(--font-serif); font-size:2.4rem; color:#fff3db; }
.soft-empty { padding: 1rem; color: var(--muted); font-size: .86rem; text-align: center; }

/* Calendar */
.calendar-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: .9rem; }
.metric-tile { min-width: 0; }
.metric-tile span, .metric-tile small { display: block; color: var(--muted); font-size: .68rem; }
.metric-tile strong { display: block; margin: .25rem 0; font-family: var(--font-serif); font-weight: 400; font-size: 2rem; line-height: 1; }
.full-calendar-card { padding: 1rem; }
.calendar-intro { display: grid; gap: .9rem; margin-bottom: 1rem; }
.calendar-intro h2 { font-size: 2rem; }
.calendar-intro p { margin: .45rem 0 0; color: var(--muted); max-width: 760px; font-size: .85rem; line-height: 1.6; }
.calendar-host { min-width: 0; }
.compact-calendar { min-height: 365px; }
.large-calendar { min-height: 520px; }
.legend-card { margin-top: .9rem; }
.calendar-book-list { display: grid; margin-top: .8rem; }
.calendar-book-row { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: .75rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.calendar-book-row:first-child { border-top: 0; }
.calendar-book-cover { width: 40px; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; background: #d8c6aa; display: grid; place-items: center; color: var(--gold-deep); font-family: var(--font-serif); }
.calendar-book-cover img { width:100%; height:100%; object-fit:cover; }
.calendar-book-row strong, .calendar-book-row small { display: block; }
.calendar-book-row strong { font-size: .84rem; }
.calendar-book-row small { color: var(--muted); font-size: .7rem; margin-top: .1rem; }
.row-meta { display: none; color: var(--muted); font-size: .78rem; }

/* FullCalendar integration */
.fc { --fc-page-bg-color: transparent; --fc-neutral-bg-color: rgba(61,51,42,.035); --fc-border-color: rgba(61,51,42,.10); font-family: var(--font-sans); color: var(--ink); }
.fc .fc-toolbar { gap: .5rem; flex-wrap: wrap; }
.fc .fc-toolbar-title { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; letter-spacing: -.02em; }
.fc .fc-button { min-height: 40px; border-radius: 999px !important; font-size: .78rem !important; font-weight: 700 !important; }
.fc .fc-col-header-cell-cushion { padding: .55rem .2rem; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.fc .fc-daygrid-day-number { padding: .5rem; font-size: .75rem; color: var(--muted); }
.fc .fc-day-today { background: rgba(165,122,67,.07) !important; }
.fc .fc-daygrid-event { border-radius: 8px !important; padding: 2px 5px !important; font-size: .68rem !important; border: 0 !important; }
.fc .fc-event-main { font-weight: 700; }
.compact-calendar .fc .fc-header-toolbar { margin-bottom: .55rem; }
.compact-calendar .fc .fc-toolbar-title { font-size: 1.12rem; }
.compact-calendar .fc .fc-button { min-height: 34px; padding: .35rem .55rem !important; }
.compact-calendar .fc-daygrid-day-frame { min-height: 46px; }
.calendar-popover { position: fixed; z-index: 90; max-width: 300px; padding: .8rem; border-radius: 16px; background: #26211c; color: #fff7ea; box-shadow: var(--shadow-lg); pointer-events: none; }
.calendar-popover strong, .calendar-popover span { display:block; }
.calendar-popover strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight:400; }
.calendar-popover span { margin-top:.25rem; font-size:.72rem; color:rgba(255,247,234,.72); }

/* Library */
.library-toolbar { padding: .8rem; display: grid; gap: .7rem; margin-bottom: 1rem; }
.search-box { display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: 0 .8rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-strong); }
.search-box svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }
.filter-chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display:none; }
.filter-chip { min-height: 42px; padding: .6rem .85rem; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-weight: 700; font-size: .78rem; cursor:pointer; }
.filter-chip.is-active { color: #fff8ea; background: #2a2520; border-color: #2a2520; }
.library-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.15rem .8rem; }
.library-book { min-width:0; }
.library-cover-link { display:block; }
.library-cover { position:relative; aspect-ratio: 2/3; border-radius: 9px 14px 14px 9px; overflow:hidden; background:#d8c5a8; box-shadow: 0 14px 28px rgba(43,34,25,.15), -4px 0 0 #e7dac5; }
.library-cover img { width:100%; height:100%; object-fit:cover; transition: transform .28s ease; }
.library-book:hover .library-cover img { transform: scale(1.025); }
.cover-progress { --progress: 0; position:absolute; right:.55rem; bottom:.55rem; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background: conic-gradient(#f5dfb5 calc(var(--progress)*1%), rgba(255,255,255,.22) 0); box-shadow:0 5px 14px rgba(0,0,0,.18); }
.cover-progress::before { content:''; position:absolute; inset:4px; border-radius:50%; background:rgba(30,26,22,.82); }
.cover-progress span { position:relative; z-index:1; color:white; font-size:.6rem; font-weight:800; }
.library-book-copy { padding-top:.75rem; }
.library-book-copy h2 { margin:.45rem 0 .15rem; font-family:var(--font-serif); font-size:1.35rem; font-weight:400; line-height:1.02; }
.library-book-copy p { margin:0; color:var(--muted); font-size:.78rem; }
.status-pill { display:inline-flex; align-items:center; min-height:24px; padding:.25rem .5rem; border-radius:999px; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.status-reading { background:#edf2eb; color:#4d6b50; }
.status-planned { background:#f4ede2; color:#8a6437; }
.status-paused { background:#f0ece8; color:#75675a; }
.status-finished { background:#ececf3; color:#5d5b7a; }
.library-meta { display:grid; gap:.2rem; margin-top:.6rem; color:var(--faint); font-size:.68rem; }
.library-empty { grid-column:1/-1; }

/* Book detail */
.book-hero { position:relative; overflow:hidden; padding:1rem; display:grid; grid-template-columns: 112px 1fr; gap:1rem; }
.book-hero::after { content:''; position:absolute; width:260px; height:260px; right:-115px; top:-120px; border-radius:50%; border:1px solid rgba(165,122,67,.12); box-shadow:0 0 0 38px rgba(165,122,67,.025),0 0 0 76px rgba(165,122,67,.018); }
.book-hero-cover, .book-hero-main, .book-hero-aside { position:relative; z-index:1; }
.book-hero-main { min-width:0; }
.book-hero-main h2 { font-size:clamp(1.7rem,6vw,3.5rem); }
.book-hero-aside { display:none; }
.insight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:.8rem; }
.insight-card { padding:.9rem; min-width:0; }
.insight-value, .insight-date { display:block; margin-top:.65rem; font-family:var(--font-serif); font-weight:400; font-size:2.1rem; line-height:.9; letter-spacing:-.04em; }
.insight-card > span { display:block; margin-top:.25rem; color:var(--muted); font-size:.7rem; }
.insight-card small { display:block; margin-top:.7rem; color:var(--faint); font-size:.65rem; line-height:1.4; }
.book-content-grid { display:grid; grid-template-columns:1fr; gap:.8rem; margin-top:.8rem; }
.history-panel, .book-side-panel { padding:1rem; }
.timeline-list { margin-top:.8rem; }
.timeline-row { display:grid; grid-template-columns:12px 44px minmax(0,1fr); gap:.6rem; padding:.85rem 0; border-top:1px solid var(--line); }
.timeline-row:first-child { border-top:0; }
.timeline-marker { position:relative; display:flex; justify-content:center; }
.timeline-marker::before { content:''; position:absolute; top:10px; bottom:-23px; width:1px; background:var(--line-strong); }
.timeline-row:last-child .timeline-marker::before { display:none; }
.timeline-marker span { position:relative; z-index:1; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px #f8f1e7; }
.timeline-date { text-align:center; }
.timeline-date strong { display:block; font-family:var(--font-serif); font-size:1.45rem; font-weight:400; line-height:1; }
.timeline-date span { font-size:.58rem; font-weight:800; letter-spacing:.08em; color:var(--gold-deep); }
.timeline-copy strong { display:block; font-size:.82rem; }
.timeline-copy span { display:block; color:var(--muted); font-size:.68rem; margin-top:.2rem; }
.timeline-copy p { margin:.5rem 0 0; color:var(--muted); font-size:.76rem; }
.timeline-time { grid-column:3; justify-self:start; padding:.22rem .45rem; border-radius:999px; background:rgba(83,96,76,.08); color:var(--olive); font-size:.66rem; font-weight:800; }
.detail-list { margin:1rem 0; }
.detail-list > div { display:flex; justify-content:space-between; gap:1rem; padding:.72rem 0; border-top:1px solid var(--line); }
.detail-list > div:first-child { border-top:0; }
.detail-list dt { color:var(--muted); font-size:.78rem; }
.detail-list dd { margin:0; font-size:.78rem; font-weight:800; }
.book-note { padding: .9rem; border-radius:var(--radius-sm); background:#f2eadf; margin-bottom:1rem; }
.book-note span { color:var(--gold-deep); font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.book-note p { margin:.45rem 0 0; color:var(--muted); font-size:.78rem; line-height:1.55; }

/* Forms */
.editor-layout { display:grid; grid-template-columns:1fr; gap:.9rem; }
.editor-form, .live-preview-panel { padding:1rem; }
.form-section-head { display:grid; grid-template-columns:36px 1fr; gap:.75rem; align-items:start; margin-bottom:1rem; }
.form-section-head > span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#efe4d3; color:var(--gold-deep); font-size:.68rem; font-weight:800; }
.form-section-head h2 { margin:0; font-family:var(--font-serif); font-size:1.45rem; font-weight:400; }
.form-section-head p { margin:.25rem 0 0; color:var(--muted); font-size:.76rem; line-height:1.45; }
.form-grid { display:grid; gap:.8rem; }
.form-divider { height:1px; background:var(--line); margin:1.25rem 0; }
.form-field { display:grid; gap:.4rem; }
.form-field > span { font-size:.76rem; font-weight:800; color:#4d463f; }
.control { width:100%; min-height:48px; padding:.75rem .86rem; border:1px solid var(--line-strong); border-radius:14px; background:rgba(255,255,255,.74); color:var(--ink); outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.control:focus { border-color:rgba(165,122,67,.75); box-shadow:0 0 0 4px rgba(165,122,67,.11); background:#fffdfa; }
.control.textarea { min-height:112px; resize:vertical; }
.control-suffix { position:relative; }
.control-suffix .control { padding-right:4.2rem; }
.control-suffix > span { position:absolute; right:.9rem; top:50%; transform:translateY(-50%); color:var(--faint); font-size:.72rem; font-weight:700; pointer-events:none; }
.field-help, .field-error { font-size:.68rem; line-height:1.4; }
.field-help { color:var(--muted); }
.field-error { color:var(--danger); }
.editor-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.25rem; }
.live-preview-panel { align-self:start; text-align:center; }
.preview-cover-shell { width:min(210px,68%); aspect-ratio:2/3; margin:1rem auto; overflow:hidden; border-radius:9px 14px 14px 9px; background:#d8c5a7; box-shadow:0 22px 48px rgba(44,34,25,.22), -5px 0 0 #e7dac8; }
.preview-copy span { display:block; color:var(--gold-deep); text-transform:uppercase; letter-spacing:.13em; font-size:.6rem; font-weight:800; }
.preview-copy strong { display:block; margin:.5rem 0 .15rem; font-family:var(--font-serif); font-size:1.55rem; font-weight:400; }
.preview-copy p, .preview-note { color:var(--muted); font-size:.75rem; }
.preview-copy p { margin:0; }
.preview-rule { width:60px; height:1px; margin:1rem auto; background:var(--line-strong); }
.preview-note { line-height:1.55; }

/* Dialog / bottom sheet */
.sheet-dialog { width:min(620px, calc(100% - 1rem)); max-height:calc(100dvh - 1rem); border:0; padding:0; border-radius:28px; background:transparent; }
.sheet-dialog::backdrop { background:rgba(30,25,20,.42); backdrop-filter:blur(5px); }
.sheet-card { background:var(--surface-strong); border:1px solid var(--line); border-radius:28px; padding:1rem; box-shadow:var(--shadow-lg); }
.sheet-grabber { width:42px; height:4px; border-radius:999px; background:var(--line-strong); margin:0 auto .9rem; }
.sheet-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.sheet-header h2 { margin:.2rem 0 0; font-family:var(--font-serif); font-size:1.55rem; font-weight:400; }
.sheet-header p:not(.kicker) { margin:.2rem 0 0; color:var(--muted); font-size:.74rem; }
.close-button { width:44px; height:44px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:#f6f0e7; cursor:pointer; font-size:1.4rem; }
.quick-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.quick-form-grid .date-field { grid-column:1/-1; }
.live-reading-summary { display:flex; gap:.7rem; align-items:flex-start; padding:.85rem; margin:.85rem 0; border-radius:14px; background:#f2eadf; color:#69563d; font-size:.76rem; line-height:1.45; }
.summary-mark { font-family:var(--font-serif); font-size:1.15rem; }
.optional-details { margin-top:.3rem; }
.optional-details summary { min-height:44px; display:flex; align-items:center; color:var(--gold-deep); font-size:.76rem; font-weight:800; cursor:pointer; list-style:none; }
.optional-details summary::-webkit-details-marker { display:none; }
.optional-details[open] summary { margin-bottom:.6rem; }
.sheet-actions { display:grid; grid-template-columns:1fr 1.3fr; gap:.65rem; margin-top:1rem; }

/* Login */
.login-stage { min-height:100dvh; display:grid; background:#f4eee5; }
.login-art { display:none; }
.login-panel { min-height:100dvh; display:grid; place-items:center; padding:1.2rem; background:
  radial-gradient(circle at 50% 0, rgba(255,255,255,.88), transparent 20rem),
  linear-gradient(180deg,#f8f3eb,#eee5d9); }
.login-form-wrap { width:min(100%,440px); }
.login-mobile-brand { display:flex; align-items:center; gap:.75rem; margin-bottom:2.2rem; }
.login-mobile-brand > div { display:grid; }
.login-mobile-brand strong { font-family:var(--font-serif); font-size:1.25rem; font-weight:400; }
.login-mobile-brand small { color:var(--muted); font-size:.7rem; }
.login-form-wrap h2 { margin:.45rem 0 .25rem; font-family:var(--font-serif); font-size:2.55rem; line-height:.96; font-weight:400; letter-spacing:-.035em; }
.login-help { margin:0 0 1.4rem; color:var(--muted); font-size:.85rem; }
.login-form { display:grid; gap:.9rem; }
.login-control { min-height:52px; }
.login-button { width:100%; margin-top:.2rem; }
.login-foot { margin:1.4rem 0 0; text-align:center; color:var(--faint); font-size:.68rem; }
.login-toast { margin-top:1rem; }

/* Empty */
.welcome-empty { padding:2rem 1.2rem; text-align:center; }
.empty-seal { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin:0 auto 1rem; background:#25211c; color:#f5ddb3; font-family:var(--font-serif); font-size:1.7rem; }
.welcome-empty p:not(.kicker) { max-width:600px; margin:.6rem auto 1.2rem; color:var(--muted); font-size:.85rem; line-height:1.6; }

/* Bottom nav */
.bottom-nav {
  position:fixed; left:.65rem; right:.65rem; bottom:calc(.65rem + env(safe-area-inset-bottom)); z-index:50;
  min-height:68px; display:grid; grid-template-columns:repeat(4,1fr); gap:.2rem; padding:.45rem;
  border:1px solid rgba(61,51,42,.12); border-radius:23px; background:rgba(250,247,242,.9);
  box-shadow:0 18px 42px rgba(45,35,26,.18); backdrop-filter:blur(20px) saturate(1.1);
}
.bottom-link { min-width:0; min-height:56px; display:grid; place-items:center; align-content:center; gap:.2rem; border-radius:17px; color:var(--muted); font-size:.62rem; font-weight:700; }
.bottom-link svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
.bottom-link.is-active { color:var(--ink); background:#efe7db; }
.bottom-primary { color:#fff9ef; background:#29251f; }
.bottom-primary .plus { font-size:1.45rem; line-height:.7; }

@container (min-width: 550px) {
  .recent-card { padding:1.15rem; }
}

@media (min-width: 700px) {
  .page-wrap { padding:1.4rem 1.4rem 7rem; }
  .bento-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .bento-span-4 { grid-column:span 4; }
  .bento-span-5 { grid-column:span 5; }
  .bento-span-7 { grid-column:span 7; }
  .bento-span-8 { grid-column:span 8; }
  .now-reading-card { grid-template-columns:145px 1fr; padding:1.2rem; }
  .goal-card, .forecast-card, .calendar-card, .streak-card, .recent-card, .library-preview-card { padding:1.15rem; }
  .dashboard-lower-grid { grid-template-columns:1.4fr .6fr; }
  .library-toolbar { grid-template-columns:minmax(260px,.85fr) 1fr; align-items:center; }
  .filter-chips { justify-content:flex-end; }
  .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem 1.1rem; }
  .book-hero { grid-template-columns:170px minmax(0,1fr); padding:1.25rem; }
  .insight-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .book-content-grid { grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr); }
  .timeline-row { grid-template-columns:12px 52px minmax(0,1fr) auto; }
  .timeline-time { grid-column:auto; justify-self:end; }
  .form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calendar-intro { grid-template-columns:1fr auto; align-items:end; }
  .calendar-book-row { grid-template-columns:44px minmax(0,1fr) auto; }
  .row-meta { display:block; }
  .sheet-card { padding:1.2rem; }
}

@media (min-width: 980px) {
  .app-frame { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); }
  .rail {
    position:sticky; top:0; height:100dvh; display:grid; grid-template-rows:auto auto 1fr auto auto;
    gap:1.4rem; padding:1.25rem 1rem; border-right:1px solid var(--line); background:rgba(244,239,231,.74);
    backdrop-filter:blur(18px); z-index:40;
  }
  .brand { display:flex; align-items:center; gap:.75rem; padding:.25rem; }
  .brand-copy { display:grid; }
  .brand-copy strong { font-family:var(--font-serif); font-size:1.22rem; line-height:1; font-weight:400; }
  .brand-copy small { margin-top:.2rem; color:var(--muted); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; }
  .rail-nav { display:grid; gap:.32rem; }
  .rail-link { min-height:48px; display:flex; align-items:center; gap:.75rem; padding:.7rem .78rem; border-radius:14px; color:var(--muted); font-size:.84rem; font-weight:700; }
  .rail-link svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
  .rail-link:hover { background:rgba(255,255,255,.46); color:var(--ink); }
  .rail-link.is-active { background:#fffaf3; color:var(--ink); box-shadow:0 7px 20px rgba(54,43,32,.06); }
  .rail-spacer { min-height:0; }
  .rail-new { min-height:46px; display:flex; align-items:center; justify-content:center; gap:.55rem; border-radius:14px; background:#28231e; color:#fff7e8; font-size:.8rem; font-weight:800; }
  .rail-new > span:first-child { font-size:1.25rem; line-height:1; }
  .rail-user { display:grid; grid-template-columns:38px minmax(0,1fr) 32px; gap:.65rem; align-items:center; padding-top:1rem; border-top:1px solid var(--line); }
  .user-avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#e8dcc9; color:var(--gold-deep); font-family:var(--font-serif); }
  .user-copy { min-width:0; display:grid; }
  .user-copy strong { font-size:.72rem; }
  .user-copy small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:.62rem; }
  .user-exit { width:32px; height:32px; display:grid; place-items:center; color:var(--muted); }
  .mobile-header, .bottom-nav { display:none; }
  .page-wrap { padding:2.1rem clamp(1.4rem,3vw,3rem) 3rem; }
  .page-heading { padding:.2rem 0 1.35rem; }
  .desktop-action { display:inline-flex; }
  .now-reading-card { grid-template-columns:155px minmax(0,1fr) 130px; align-items:center; padding:1.35rem; }
  .progress-orbit { --progress:0; display:grid; width:120px; aspect-ratio:1; border-radius:50%; padding:9px; background:conic-gradient(var(--gold) calc(var(--progress)*1%), rgba(165,122,67,.10) 0); }
  .progress-orbit .orbit-inner { border-radius:50%; background:var(--surface-solid); display:grid; place-items:center; align-content:center; }
  .orbit-inner strong { font-family:var(--font-serif); font-size:2rem; line-height:1; font-weight:400; }
  .orbit-inner span { color:var(--muted); font-size:.63rem; }
  .large-orbit { width:145px; }
  .library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem 1.35rem; }
  .editor-layout { grid-template-columns:minmax(0,1.5fr) minmax(300px,.65fr); align-items:start; }
  .editor-form { padding:1.35rem; }
  .live-preview-panel { position:sticky; top:2rem; padding:1.3rem; }
  .book-hero { grid-template-columns:190px minmax(0,1fr) 160px; align-items:center; padding:1.45rem; }
  .book-hero-aside { display:grid; place-items:center; }
  .full-calendar-card { padding:1.25rem; }
  .calendar-summary-grid { gap:.9rem; }
  .metric-tile { padding:1.1rem; }
  .metric-tile strong { font-size:2.5rem; }
  .sheet-dialog { width:min(640px,calc(100% - 2rem)); }
}

@media (min-width: 1240px) {
  .library-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

@media (min-width: 900px) {
  .login-stage { grid-template-columns:minmax(0,1.28fr) minmax(430px,.72fr); }
  .login-art { position:relative; display:flex; min-height:100dvh; overflow:hidden; color:#f8f0e2; background:
    radial-gradient(circle at 22% 16%, rgba(193,148,87,.20), transparent 24rem),
    radial-gradient(circle at 76% 82%, rgba(83,96,76,.15), transparent 26rem),
    linear-gradient(138deg,#26221c 0%,#332a20 52%,#171512 100%); }
  .login-art::before { content:''; position:absolute; inset:2rem; border:1px solid rgba(244,224,190,.13); pointer-events:none; }
  .architectural-lines { position:absolute; inset:0; pointer-events:none; opacity:.42; }
  .architectural-lines span { position:absolute; border:1px solid rgba(231,204,164,.16); border-radius:50%; }
  .architectural-lines span:nth-child(1){width:500px;height:500px;right:-220px;top:-190px;}
  .architectural-lines span:nth-child(2){width:390px;height:390px;right:-165px;top:-135px;}
  .architectural-lines span:nth-child(3){width:280px;height:280px;left:-120px;bottom:-80px;}
  .architectural-lines span:nth-child(4){left:6%;right:6%;top:52%;height:1px;border:0;border-top:1px solid rgba(231,204,164,.12);border-radius:0;}
  .login-art-content { position:relative; z-index:1; align-self:center; max-width:800px; padding:clamp(4rem,8vw,8rem); }
  .login-monogram { width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(246,221,180,.30);font-family:var(--font-serif);font-size:2rem;color:#f1d4a2;margin-bottom:1.6rem; }
  .login-kicker { margin:0;color:#d5b987;text-transform:uppercase;letter-spacing:.19em;font-size:.72rem;font-weight:800; }
  .login-art h1 { margin:.7rem 0 1.2rem; font-family:var(--font-serif); font-size:clamp(4rem,6.2vw,7.5rem); font-weight:400; line-height:.82; letter-spacing:-.055em; }
  .login-lead { max-width:650px; color:rgba(248,240,226,.68); font-size:.98rem; line-height:1.75; }
  .login-proof-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:2.4rem;max-width:680px; }
  .login-proof-grid div { padding:1rem;border-top:1px solid rgba(241,212,162,.22);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); }
  .login-proof-grid strong { display:block;color:#d7ba88;font-family:var(--font-serif);font-size:1.25rem;font-weight:400; }
  .login-proof-grid span { display:block;margin-top:.55rem;color:rgba(248,240,226,.72);font-size:.75rem;line-height:1.4; }
  .login-quote { position:absolute;left:clamp(4rem,8vw,8rem);bottom:3.4rem;right:4rem;color:rgba(248,240,226,.42);font-family:var(--font-serif);font-size:1rem;font-style:italic; }
  .login-panel { padding:clamp(2rem,5vw,5rem); }
  .login-mobile-brand { display:none; }
  .login-form-wrap h2 { font-size:3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.recent-card { container-type: inline-size; }

/* Toasts de validação no cliente */
.client-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 5000; display: grid; gap: .6rem; width: min(92vw, 390px); pointer-events: none; }
.client-toast { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; pointer-events: auto; }
.client-toast.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 719px) { .client-toast-container { left: 1rem; right: 1rem; width: auto; top: calc(.75rem + env(safe-area-inset-top)); } }