:root {
  color-scheme: dark;
  --ink: #0b0b0b;
  --ink-2: #121211;
  --panel: rgba(28, 27, 25, .84);
  --paper: #e8dfcf;
  --paper-dim: #a69f93;
  --line: rgba(232, 223, 207, .18);
  --line-strong: rgba(232, 223, 207, .42);
  --danger: #c49a91;
  --radius: 18px;
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
}

/* Doraemon-inspired cute theme */
:root {
  color-scheme: light;
  --dora-blue: #249edf;
  --dora-blue-deep: #167db8;
  --dora-sky: #dff5ff;
  --dora-sky-soft: #f3fbff;
  --dora-red: #ef5148;
  --dora-yellow: #ffd84d;
  --dora-ink: #214b64;
  --dora-muted: #6f8b9d;
  --dora-white: #fff;
  --paper: var(--dora-ink);
  --paper-dim: var(--dora-muted);
  --line: rgba(36, 158, 223, .18);
  --line-strong: rgba(36, 158, 223, .42);
  --panel: rgba(255, 255, 255, .94);
  --danger: var(--dora-red);
  --radius: 24px;
  --font-serif: ui-rounded, "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

html { background: var(--dora-sky-soft); }
body {
  color: var(--dora-ink);
  background:
    radial-gradient(circle at 10% 7%, rgba(255,255,255,.95) 0 42px, transparent 43px),
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.95) 0 62px, transparent 63px),
    radial-gradient(circle at 91% 22%, rgba(255,255,255,.75) 0 55px, transparent 56px),
    radial-gradient(circle at 84% 21%, rgba(255,255,255,.75) 0 36px, transparent 37px),
    linear-gradient(180deg, #dff5ff 0%, #f7fcff 48%, #fff9ee 100%);
  background-attachment: fixed;
}
.grain { opacity: .035; }
.app-shell { position: relative; }
.app-shell::before, .app-shell::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  border: 3px solid rgba(36,158,223,.10);
}
.app-shell::before { width: 110px; height: 110px; left: -38px; top: 38%; }
.app-shell::after { width: 72px; height: 72px; right: -22px; bottom: 22%; }

.topbar { border-bottom: 2px dashed rgba(36,158,223,.2); }
.brand-name { color: var(--dora-blue-deep); font-weight: 800; letter-spacing: .06em; }
.brand-sub { color: var(--dora-muted); font-weight: 600; letter-spacing: .08em; text-transform: none; }
.dora-bell {
  display: block;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--dora-yellow); border: 3px solid var(--dora-ink);
  position: relative; box-shadow: 0 5px 0 rgba(23,125,184,.14);
  animation: bell-wiggle 3.2s ease-in-out infinite;
}
.dora-bell::before { content: ''; position: absolute; left: 4px; right: 4px; top: 10px; height: 3px; border-radius: 4px; background: var(--dora-ink); }
.dora-bell::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--dora-ink); left: 12px; top: 18px; }
.dora-bell span { position: absolute; width: 3px; height: 8px; background: var(--dora-ink); left: 14px; top: 23px; border-radius: 3px; }
@keyframes bell-wiggle { 0%, 82%, 100% { transform: rotate(0); } 87% { transform: rotate(-12deg); } 93% { transform: rotate(11deg); } }

.eyebrow { color: var(--dora-blue-deep); font-weight: 800; letter-spacing: .18em; }
h1, h2, h3 { color: var(--dora-ink); font-weight: 800; }
h1 { letter-spacing: .01em; }
.lede, .section-head p, .hint { color: var(--dora-muted); }

.bottom-nav {
  border: 3px solid rgba(36,158,223,.22);
  background: rgba(255,255,255,.93);
  box-shadow: 0 12px 30px rgba(30,121,171,.18), 0 3px 0 rgba(36,158,223,.14);
  border-radius: 28px;
}
.nav-item { color: var(--dora-muted); font-weight: 700; border-radius: 20px; }
.nav-item.active { color: #fff; background: var(--dora-blue); box-shadow: 0 5px 0 var(--dora-blue-deep); transform: translateY(-2px); }
.nav-icon { font-size: 19px; }

.card, .dimension-card, .meaning-card {
  border: 2px solid rgba(36,158,223,.16);
  background: rgba(255,255,255,.93);
  box-shadow: 0 8px 0 rgba(36,158,223,.08), 0 18px 38px rgba(35,112,154,.08);
}
.hero-grid { min-height: 560px; }
.tarot-card {
  border: 7px solid #fff;
  border-radius: 22px;
  background: var(--dora-blue);
  box-shadow: 0 12px 0 rgba(22,125,184,.17), 0 28px 55px rgba(27,96,137,.2);
}
.tarot-card.back { animation: dora-float 3s ease-in-out infinite; }
@keyframes dora-float { 50% { transform: translateY(-10px) rotate(1deg); box-shadow: 0 16px 0 rgba(22,125,184,.14), 0 36px 65px rgba(27,96,137,.22); } }
.orbit { border-bottom: 4px solid rgba(36,158,223,.2); filter: none; }
.date-line, .card-meta { color: var(--dora-muted); font-weight: 700; }
.card-name { color: var(--dora-blue-deep); text-shadow: 0 3px 0 rgba(36,158,223,.1); }
.sealed-note { border-top: 2px dashed rgba(36,158,223,.2); color: var(--dora-muted); }
.seal { color: var(--dora-ink); background: var(--dora-yellow); border: 2px solid var(--dora-ink); font-weight: 800; box-shadow: 0 3px 0 rgba(33,75,100,.18); }

.btn {
  border: 2px solid var(--dora-blue);
  color: var(--dora-blue-deep);
  background: #fff;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(22,125,184,.18);
}
.btn:hover { background: var(--dora-sky); transform: translateY(-1px); }
.btn.primary { color: #fff; background: var(--dora-blue); border-color: var(--dora-blue-deep); box-shadow: 0 5px 0 var(--dora-blue-deep); }
.btn.primary:hover { background: #36ace8; }
.btn.danger { border-color: var(--dora-red); color: var(--dora-red); }

.dimension-card { border-radius: 22px; }
.score-label { color: var(--dora-blue-deep); font-weight: 700; }
.score { border: 2px solid rgba(36,158,223,.18); background: var(--dora-sky-soft); color: var(--dora-muted); font-weight: 800; }
.score.active { color: var(--dora-ink); background: var(--dora-yellow); border-color: #e4b72b; box-shadow: 0 3px 0 #e4b72b; }
textarea, input[type="text"], select { border: 2px solid rgba(36,158,223,.18); background: #f7fcff; color: var(--dora-ink); }
textarea:focus, input:focus, select:focus { border-color: var(--dora-blue); background: #fff; box-shadow: 0 0 0 4px rgba(36,158,223,.10); }
.tag { border: 2px solid rgba(36,158,223,.18); background: #fff; color: var(--dora-muted); font-weight: 700; }
.tag.active { color: #fff; border-color: var(--dora-red); background: var(--dora-red); }

.reading-body {
  color: var(--dora-ink);
  border: 3px solid var(--dora-blue);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 0 rgba(36,158,223,.13);
}
.reading-body::before, .reading-body::after { color: var(--dora-yellow); }
.accuracy-option { border: 2px solid rgba(36,158,223,.18); background: #fff; color: var(--dora-muted); font-weight: 700; }
.accuracy-option.active { color: #fff; background: var(--dora-red); border-color: #d63f38; box-shadow: 0 3px 0 #c83b35; }

.record-row { border: 2px solid rgba(36,158,223,.14); background: rgba(255,255,255,.94); color: var(--dora-ink); box-shadow: 0 5px 0 rgba(36,158,223,.07); }
.record-row:hover { border-color: var(--dora-blue); transform: translateY(-1px); }
.record-date, .record-status, .score-mini { color: var(--dora-muted); }

.period-tabs { border: 2px solid rgba(36,158,223,.18); background: rgba(255,255,255,.8); }
.period-tab { color: var(--dora-muted); font-weight: 800; }
.period-tab.active { background: var(--dora-yellow); color: var(--dora-ink); box-shadow: 0 3px 0 #e4b72b; }
.legend-item, .line-chart text { color: var(--dora-muted); fill: var(--dora-muted); }
.line-chart .grid line { stroke: rgba(36,158,223,.15); }
.average-track { background: var(--dora-sky); }
.average-fill { border-radius: 10px; }
.delta.up { color: #29a56c; }.delta.down { color: var(--dora-red); }
.insight { border-top: 2px dashed rgba(36,158,223,.15); color: var(--dora-muted); }
.insight.confirmed { color: var(--dora-ink); }
.status-dot { background: var(--dora-red); }.status-dot.ok { background: #36b875; }

.modal { background: rgba(34,93,126,.42); }
.modal-card { color: var(--dora-ink); border: 3px solid var(--dora-blue); background: #fff; box-shadow: 0 12px 0 rgba(22,125,184,.18), 0 35px 80px rgba(23,83,116,.24); }
.icon-btn { color: var(--dora-blue-deep); }
.detail-dim { border-top: 2px dashed rgba(36,158,223,.15); }
.detail-dim p { color: var(--dora-muted); }
.empty { color: var(--dora-muted); background: rgba(255,255,255,.58); border: 2px dashed rgba(36,158,223,.3); }
.toast { border: 3px solid #fff; background: var(--dora-blue); color: #fff; box-shadow: 0 6px 0 var(--dora-blue-deep), 0 18px 35px rgba(23,83,116,.22); font-weight: 800; }
.spinner { border-color: rgba(255,255,255,.45); border-top-color: #fff; }

@media (max-width: 800px) {
  .hero-grid { min-height: 0; }
  .draw-copy { padding-bottom: 44px; }
  .tarot-card { border-width: 5px; }
  .bottom-nav { bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .brand-name { font-size: 16px; }
  .brand-sub { display: block; font-size: 9px; }
  .dora-bell { width: 32px; height: 32px; }
  .dora-bell::after { left: 10px; top: 16px; }
  .dora-bell span { left: 12px; top: 20px; }
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 75% 8%, rgba(232,223,207,.07), transparent 28rem),
    radial-gradient(circle at 12% 78%, rgba(232,223,207,.035), transparent 24rem),
    var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, select { color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .12; z-index: 50; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }

.app-shell { max-width: 1180px; min-height: 100vh; margin: auto; padding: 0 28px 110px; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 30px 0 18px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-name { margin: 0; font-weight: 500; font-size: 17px; letter-spacing: .12em; }
.brand-sub { color: var(--paper-dim); font-size: 10px; letter-spacing: .23em; text-transform: uppercase; margin-top: 3px; }
.moon-phase { font-size: 20px; color: var(--paper-dim); }
.view { padding: 44px 0; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

.eyebrow { color: var(--paper-dim); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(30px, 5vw, 54px); line-height: 1.2; font-weight: 400; letter-spacing: .04em; margin-bottom: 12px; }
h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 400; letter-spacing: .05em; }
h3 { font-size: 16px; font-weight: 500; }
.lede { color: var(--paper-dim); line-height: 1.8; max-width: 610px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 28px; }
.section-head p { margin: 8px 0 0; color: var(--paper-dim); font-size: 13px; }

.bottom-nav { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 40; display: flex; gap: 3px; padding: 5px; width: min(520px, calc(100% - 28px)); border: 1px solid var(--line); background: rgba(14,14,13,.91); backdrop-filter: blur(22px); border-radius: 20px; box-shadow: 0 18px 50px #000; }
.nav-item { flex: 1; border: 0; background: transparent; padding: 11px 6px 10px; border-radius: 15px; color: var(--paper-dim); font-size: 11px; letter-spacing: .08em; }
.nav-item.active { color: var(--paper); background: rgba(232,223,207,.1); }
.nav-icon { display: block; font-size: 17px; margin-bottom: 4px; height: 19px; }

.card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(232,223,207,.055), rgba(232,223,207,.015)); border-radius: var(--radius); padding: 24px; }
.hero-grid { display: grid; grid-template-columns: minmax(240px, .78fr) minmax(320px, 1.22fr); gap: clamp(32px, 8vw, 92px); align-items: center; min-height: 570px; }
.tarot-stage { display: grid; justify-items: center; perspective: 1200px; }
.tarot-card { width: min(285px, 72vw); aspect-ratio: 600 / 1040; border-radius: 14px; overflow: hidden; background: #171715; box-shadow: 0 35px 80px rgba(0,0,0,.7); position: relative; border: 1px solid rgba(232,223,207,.28); }
.tarot-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarot-card.reversed img { transform: rotate(180deg); }
.tarot-card.back { animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-7px); box-shadow: 0 43px 92px rgba(0,0,0,.78); } }
.orbit { width: 340px; height: 46px; margin-top: -5px; border-bottom: 1px solid rgba(232,223,207,.22); border-radius: 50%; filter: drop-shadow(0 8px 7px #000); }
.draw-copy { max-width: 510px; }
.date-line { color: var(--paper-dim); letter-spacing: .14em; font-size: 12px; margin-bottom: 18px; }
.card-name { font-size: clamp(35px, 5vw, 58px); margin-bottom: 6px; font-weight: 400; }
.card-meta { color: var(--paper-dim); margin-bottom: 30px; letter-spacing: .1em; }
.sealed-note { display: flex; gap: 12px; color: var(--paper-dim); line-height: 1.7; padding: 18px 0; border-top: 1px solid var(--line); margin-top: 26px; font-size: 13px; }
.seal { width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; font-size: 12px; }

.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { border: 1px solid var(--line-strong); border-radius: 999px; padding: 12px 21px; background: transparent; color: var(--paper); transition: .2s ease; }
.btn:hover { background: rgba(232,223,207,.08); }
.btn.primary { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.btn.primary:hover { background: #fff8eb; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { padding: 8px 14px; font-size: 12px; }
.btn.danger { border-color: rgba(196,154,145,.5); color: var(--danger); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dimension-card { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(232,223,207,.025); }
.dimension-card.full { grid-column: 1 / -1; }
.dimension-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.score-label { color: var(--paper-dim); font-size: 11px; }
.scores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.score { border: 1px solid var(--line); background: transparent; border-radius: 10px; padding: 10px 4px; color: var(--paper-dim); }
.score.active { color: var(--ink); background: var(--paper); border-color: var(--paper); }
textarea, input[type="text"], select { width: 100%; border: 1px solid var(--line); background: rgba(0,0,0,.18); color: var(--paper); border-radius: 11px; padding: 12px 13px; outline: 0; }
textarea:focus, input:focus, select:focus { border-color: var(--line-strong); }
textarea { min-height: 78px; resize: vertical; line-height: 1.65; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0; }
.tag { border: 1px solid var(--line); background: transparent; color: var(--paper-dim); border-radius: 999px; padding: 7px 11px; font-size: 11px; }
.tag.active { color: var(--paper); border-color: var(--line-strong); background: rgba(232,223,207,.1); }
.form-actions { margin-top: 24px; display: flex; align-items: center; gap: 15px; }
.hint { color: var(--paper-dim); font-size: 12px; line-height: 1.6; }

.reading-panel { max-width: 790px; margin: 0 auto; }
.reading-header { text-align: center; margin-bottom: 28px; }
.reading-body { white-space: pre-wrap; line-height: 2; font-size: 15px; padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line-strong); border-radius: 4px; background: linear-gradient(135deg, rgba(232,223,207,.08), rgba(232,223,207,.02)); position: relative; }
.reading-body::before, .reading-body::after { content: none; display: none; }
.accuracy { margin-top: 22px; }
.accuracy-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.accuracy-option { padding: 12px 7px; border: 1px solid var(--line); background: transparent; border-radius: 10px; color: var(--paper-dim); }
.accuracy-option.active { color: var(--ink); background: var(--paper); }

.record-list { display: grid; gap: 10px; }
.record-row { width: 100%; display: grid; grid-template-columns: 72px 50px 1fr auto; gap: 15px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: rgba(232,223,207,.02); color: var(--paper); }
.record-row:hover { border-color: var(--line-strong); }
.record-thumb { width: 42px; height: 66px; border-radius: 4px; object-fit: cover; }
.record-thumb.reversed { transform: rotate(180deg); }
.record-date { color: var(--paper-dim); font-size: 12px; }
.record-title { margin: 0 0 4px; font-size: 15px; }
.record-status { color: var(--paper-dim); font-size: 11px; }
.score-mini { font-size: 12px; color: var(--paper-dim); }

.period-tabs { display: flex; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.period-tab { border: 0; background: transparent; color: var(--paper-dim); padding: 8px 14px; border-radius: 999px; font-size: 12px; }
.period-tab.active { background: var(--paper); color: var(--ink); }
.report-layout { display: grid; grid-template-columns: 1fr 280px; gap: 18px; }
.chart-card { min-width: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 2px; }
.legend-item { font-size: 11px; color: var(--paper-dim); display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.line-chart { width: 100%; min-width: 560px; overflow: visible; }
.line-chart .grid line { stroke: var(--line); stroke-width: 1; }
.line-chart text { fill: var(--paper-dim); font-size: 11px; }
.line-chart path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-scroll { overflow-x: auto; }
.empty-chart { min-height: 270px; display: grid; place-items: center; color: var(--paper-dim); text-align: center; }
.average-list { display: grid; gap: 12px; }
.average-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: 10px; align-items: center; font-size: 12px; }
.average-track { height: 4px; background: var(--line); border-radius: 9px; overflow: hidden; }
.average-fill { height: 100%; background: var(--paper); }
.delta.up { color: #aabca8; }.delta.down { color: #c49a91; }.delta.flat { color: var(--paper-dim); }

.meaning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.meaning-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(232,223,207,.025); }
.meaning-card header { display: flex; align-items: center; gap: 12px; }
.meaning-card img { width: 40px; height: 64px; object-fit: cover; border-radius: 4px; }
.meaning-card h3 { margin: 0 0 4px; }
.meaning-card small { color: var(--paper-dim); }
.insight { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; font-size: 12px; line-height: 1.7; color: var(--paper-dim); }
.insight.confirmed { color: var(--paper); }

.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.setting-row { display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.setting-row p { color: var(--paper-dim); font-size: 12px; margin: 5px 0 0; line-height: 1.6; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: 7px; }
.status-dot.ok { background: #aabca8; }

.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.76); display: grid; place-items: center; padding: 18px; backdrop-filter: blur(8px); }
.modal-card { width: min(620px, 100%); max-height: 88vh; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 18px; padding: 25px; background: #151513; box-shadow: 0 35px 100px #000; }
.modal-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 20px; }
.modal-head h2 { margin: 0; font-size: 22px; }
.icon-btn { border: 0; background: transparent; color: var(--paper-dim); font-size: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; color: var(--paper-dim); font-size: 12px; margin-bottom: 8px; }
.detail-dims { display: grid; gap: 10px; }
.detail-dim { border-top: 1px solid var(--line); padding-top: 10px; }
.detail-dim p { color: var(--paper-dim); white-space: pre-wrap; font-size: 12px; line-height: 1.7; }
.empty { text-align: center; padding: 75px 20px; color: var(--paper-dim); border: 1px dashed var(--line); border-radius: var(--radius); }
.toast { position: fixed; left: 50%; bottom: 102px; z-index: 90; transform: translate(-50%, 15px); padding: 11px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: #1d1c19; color: var(--paper); opacity: 0; pointer-events: none; transition: .25s; font-size: 12px; box-shadow: 0 12px 35px #000; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.spinner { display: inline-block; width: 15px; height: 15px; border: 1px solid var(--line-strong); border-top-color: var(--paper); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; margin-right: 7px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
  .app-shell { padding: 0 17px 105px; }
  .topbar { padding-top: 20px; }
  .view { padding-top: 30px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 35px; }
  .draw-copy { text-align: center; margin: auto; }
  .button-row { justify-content: center; }
  .sealed-note { text-align: left; }
  .tarot-card { width: min(232px, 61vw); }
  .orbit { width: 275px; }
  .form-grid, .settings-grid { grid-template-columns: 1fr; }
  .dimension-card.full { grid-column: auto; }
  .report-layout { grid-template-columns: 1fr; }
  .meaning-grid { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .record-row { grid-template-columns: 59px 42px 1fr; }
  .record-row > :last-child { display: none; }
}

@media (max-width: 480px) {
  .brand-name { font-size: 15px; }
  .brand-sub { display: none; }
  .accuracy-options { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 18px; }
  .period-tabs { width: 100%; }
  .period-tab { flex: 1; padding-inline: 6px; }
}