:root { --ink:#17251d; --muted:#637068; --paper:#f4f0e6; --card:#fffdf7; --sage:#66806f; --line:#d9d8ce; --gold:#b59656; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 15% 5%, #fffdf5 0, transparent 34%), var(--paper); font-family:"Segoe UI",Arial,sans-serif; }
.page-shell { width:min(920px, calc(100% - 32px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
main { flex:1; display:grid; align-content:center; padding:26px 0 60px; }
.hero-card { touch-action:pan-y; position:relative; overflow:hidden; padding:clamp(32px,7vw,72px); border:1px solid var(--line); border-radius:28px; background:var(--card); box-shadow:0 24px 80px rgba(38,47,40,.08); text-align:center; }
.hero-card::after { content:""; position:absolute; width:260px; height:260px; right:-100px; top:-120px; border:1px solid rgba(181,150,86,.22); border-radius:50%; box-shadow:0 0 0 28px rgba(181,150,86,.045),0 0 0 56px rgba(181,150,86,.03); }
.plan-meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.cycle-badge { display:inline-block; margin-bottom:0; padding:7px 13px; border:1px solid #d7dfd9; border-radius:99px; color:var(--sage); background:#f4f8f4; font-size:12px; font-weight:600; }
.start-form { display:flex; align-items:center; gap:5px; padding:3px 8px 3px 13px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:#faf9f4; font-size:12px; font-weight:600; }
.start-form input { width:auto; min-width:126px; padding:3px 6px; border:0; color:var(--muted); background:transparent; font-size:12px; }
.outside-start-form { display:flex; justify-content:center; align-items:end; flex-wrap:wrap; gap:10px; margin:24px auto; }
.outside-start-form label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; text-align:left; }
.outside-start-form input { width:auto; }
.eyebrow { color:var(--sage); font-size:13px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#4c8d63; box-shadow:0 0 0 5px #e7f1e9; }
.date { margin:18px 0 0; color:var(--muted); font-size:15px; }
h1 { margin:18px 0 2px; font:600 clamp(64px,13vw,116px)/.9 Georgia,serif; letter-spacing:-.055em; }
.book { margin:16px auto 14px; color:var(--muted); font:500 clamp(20px,3vw,28px) Georgia,serif; }
.progress-block { width:min(520px,100%); margin:auto; }
.progress-copy { display:flex; justify-content:space-between; margin-bottom:9px; color:var(--muted); font-size:12px; }
.progress-track { height:6px; overflow:hidden; border-radius:99px; background:#e5e5dc; }
.progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sage),#8ca092); }
.date-forms { width:min(520px,100%); margin:38px auto 0; padding-top:30px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr; gap:12px; text-align:left; }
.parameter-form { min-width:0; }
.parameter-form label { display:block; margin-bottom:9px; color:var(--muted); font-size:12px; font-weight:600; }
.date-form { width:min(520px,100%); margin:38px auto 0; padding-top:30px; border-top:1px solid var(--line); text-align:left; }
.date-form label { display:block; margin-bottom:9px; color:var(--muted); font-size:12px; font-weight:600; }
.form-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.date-controls { display:flex; justify-content:flex-end; margin-top:12px; }
input,button,.button-link { border-radius:10px; font:600 14px "Segoe UI",Arial,sans-serif; }
input { width:100%; padding:12px 14px; color:var(--ink); border:1px solid var(--line); background:white; }
button,.button-link { padding:12px 20px; color:white; border:0; background:var(--ink); cursor:pointer; text-decoration:none; }
.day-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; margin-top:18px; padding:0 10px; }
.day-nav a { display:flex; flex-direction:column; color:var(--muted); text-decoration:none; font-size:12px; }
.day-nav strong { margin-top:3px; color:var(--ink); font:600 20px Georgia,serif; }
.day-nav .next { grid-column:3; justify-self:end; align-items:flex-end; text-align:right; }
.day-nav .today-link { display:block; padding:8px 14px; border:1px solid var(--line); border-radius:99px; color:var(--ink); font-weight:600; }
.chapter-picker { grid-column:2; display:flex; align-items:center; justify-content:center; gap:8px; }
.chapter-picker label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.chapter-picker input[type="text"] { width:110px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:white; font:600 15px Georgia,serif; text-align:center; }
.chapter-picker .today-link { padding:8px 12px; }
.outside .book { max-width:560px; }
.button-link { display:inline-block; }
@media (max-width:560px) { .date-forms{grid-template-columns:1fr} .hero-card{border-radius:20px}.day-nav{gap:8px;padding:0}.day-nav strong{font-size:17px}.chapter-picker{flex-direction:column;gap:5px}.chapter-picker input[type="text"]{width:92px}.chapter-picker .today-link{font-size:11px}.form-grid{grid-template-columns:1fr} }







.youtube-action { display:flex; flex-direction:column; align-items:center; gap:9px; margin:26px auto 0; }
.youtube-player { width:min(760px,100%); aspect-ratio:16/9; overflow:hidden; border-radius:18px; background:#111; box-shadow:0 16px 44px rgba(23,37,29,.18); }
.youtube-player iframe { display:block; width:100%; height:100%; border:0; }
.media-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 auto 34px; }
.media-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border:1px solid var(--ink); border-radius:10px; color:white; background:var(--ink); font-size:12px; font-weight:700; text-align:center; text-decoration:none; transition:background .15s ease,transform .15s ease; }
.media-actions a:hover { background:var(--sage); transform:translateY(-1px); }
.youtube-action small { color:var(--muted); font-size:11px; }

.account-nav { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:54px; color:var(--muted); font-size:12px; }
.account-nav .home-link { margin-right:auto; color:var(--ink); font-weight:700; }
.account-nav a,.text-button { color:var(--sage); font-weight:700; text-decoration:none; }
.account-nav form { margin:0; }
.text-button { padding:0; border:0; background:transparent; cursor:pointer; }
.account-card { padding:clamp(28px,6vw,54px); border:1px solid var(--line); border-radius:28px; background:var(--card); box-shadow:0 24px 80px rgba(38,47,40,.08); }
.account-card h1 { margin:0; font-size:48px; letter-spacing:-.035em; }
.account-intro { color:var(--muted); text-align:center; }
.account-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px; }
.account-form { display:flex; flex-direction:column; gap:14px; padding:24px; border:1px solid var(--line); border-radius:18px; }
.account-form h2 { margin:0 0 4px; font:600 24px Georgia,serif; }
.account-form label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; font-weight:600; }
.message { margin:20px 0; padding:12px; border-radius:10px; background:#f8e5e2; color:#842e28; }
.account-divider { display:flex; align-items:center; gap:12px; margin:24px 0; color:var(--muted); font-size:12px; }
.account-divider::before,.account-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.google-login { display:block; width:min(320px,100%); margin:auto; padding:12px 18px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:white; font-weight:700; text-align:center; text-decoration:none; }
.google-disabled { color:var(--muted); font-size:12px; text-align:center; }
@media (max-width:700px) { .account-grid{grid-template-columns:1fr}.account-nav span{display:none} }
.chapter-message { max-width:760px; margin:0 auto 14px; padding:12px 16px; border:1px solid #c95f52; border-radius:10px; color:#7d241b; background:#fff0ed; font-weight:600; text-align:center; }