:root {
    --ink: #22211f;
    --muted: #78716a;
    --paper: #f4f0e8;
    --card: #fffdf9;
    --accent: #f15b3f;
    --accent-dark: #d94428;
    --accent-soft: #ffe0d4;
    --lime: #d9e871;
    --blue: #6378ff;
    --line: rgba(34, 33, 31, .13);
    --shadow: 0 24px 60px rgba(59, 45, 33, .10);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .04; z-index: 30; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.eyebrow, .section-kicker { margin: 0 0 12px; color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .22em; }

/* Authentication */
.auth-view { width: min(1180px, calc(100% - 40px)); min-height: 100vh; margin: auto; padding: 55px 0; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(45px, 8vw, 120px); }
.auth-brand h1 { margin: 0; font-size: clamp(58px, 7vw, 94px); line-height: .94; letter-spacing: -.075em; font-weight: 900; }
.auth-brand h1 span { color: var(--accent); }
.auth-brand > p:not(.eyebrow) { max-width: 510px; margin: 27px 0 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.auth-deco { width: 245px; margin-top: 48px; padding: 22px 24px; display: flex; align-items: center; gap: 20px; color: #fff; background: var(--ink); box-shadow: 8px 8px 0 var(--lime); transform: rotate(-1deg); }
.auth-deco b { color: var(--lime); font-size: 42px; letter-spacing: -.06em; }
.auth-deco span { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.2); color: #d4cfc7; font-size: 12px; line-height: 1.7; }
.auth-card { padding: clamp(28px, 4vw, 48px); background: var(--card); box-shadow: var(--shadow); border-top: 5px solid var(--accent); }
.auth-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }
.brand-mark { display: grid; width: 44px; height: 44px; color: var(--ink); background: var(--lime); place-items: center; font-size: 22px; font-weight: 900; transform: rotate(-4deg); }
.auth-card-head div { display: flex; flex-direction: column; }
.auth-card-head strong { font-size: 17px; }
.auth-card-head small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 33px; border-bottom: 1px solid var(--line); }
.auth-tabs button { padding: 13px; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; font-weight: 800; }
.auth-tabs button.active { color: var(--accent); border-color: var(--accent); }
.auth-title { margin-bottom: 26px; }
.auth-title h2 { margin: 0; font-size: 30px; letter-spacing: -.045em; }
.auth-title p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.auth-form label { display: block; margin-bottom: 17px; }
.auth-form label span { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; }
.auth-form input { width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 0; outline: none; background: #fff; }
.auth-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-message, .form-message { min-height: 21px; margin: 10px 0 0; color: #bd3924; font-size: 13px; }

/* Shared buttons */
.primary-button { width: 100%; padding: 16px 19px; display: flex; justify-content: space-between; align-items: center; border: 0; color: #fff; background: var(--accent); cursor: pointer; font-weight: 900; transition: .2s ease; }
.primary-button:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(241,91,63,.23); }
.primary-button:disabled { cursor: wait; opacity: .6; transform: none; }
.primary-button b { font-size: 20px; }

/* Application shell */
.topbar { position: sticky; top: 0; z-index: 20; height: 76px; padding: 0 max(24px, calc((100vw - 1160px)/2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); background: rgba(244,240,232,.91); backdrop-filter: blur(14px); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 900; }
.wordmark b { display: grid; width: 34px; height: 34px; color: var(--ink); background: var(--lime); place-items: center; transform: rotate(-4deg); }
.topbar nav { display: flex; gap: 5px; padding: 5px; border-radius: 99px; background: rgba(255,255,255,.55); }
.topbar nav button { padding: 8px 18px; border: 0; border-radius: 99px; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; font-weight: 800; }
.topbar nav button.active { color: #fff; background: var(--ink); }
.user-menu { justify-self: end; display: flex; align-items: center; gap: 9px; }
.avatar { display: grid; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--accent); place-items: center; font-weight: 900; }
.user-menu > div { display: flex; min-width: 85px; flex-direction: column; }
.user-menu strong { max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-menu small { color: var(--muted); font-size: 10px; }
.user-menu > button { margin-left: 4px; padding: 7px 10px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--muted); font-size: 11px; }
.page-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 58px 0 80px; }
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; }
.hero h1 { margin: 0; font-size: clamp(48px, 7vw, 84px); line-height: .98; letter-spacing: -.065em; font-weight: 900; }
.hero h1 span { color: var(--accent); }
.hero-copy { max-width: 500px; margin: 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.date-card { flex: 0 0 150px; min-height: 174px; padding: 18px 23px; color: #fff; background: var(--ink); display: flex; flex-direction: column; transform: rotate(2deg); box-shadow: 9px 10px 0 var(--lime); }
.date-card span { color: var(--lime); font-weight: 900; letter-spacing: .2em; }
.date-card strong { margin: auto 0; font-size: 68px; line-height: 1; letter-spacing: -.08em; }
.date-card small { font-size: 13px; opacity: .7; }
.dashboard { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, .8fr); gap: 24px; align-items: stretch; }
.checkin-card, .stats-card, .calendar-card { background: var(--card); box-shadow: var(--shadow); }
.checkin-card { padding: clamp(24px, 4vw, 44px); }
.card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 27px; }
.card-heading h2, .stats-card h2, .calendar-heading h2, .history-heading h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.045em; }
.status-pill { white-space: nowrap; padding: 8px 13px; border-radius: 99px; color: #756e68; background: #eee9e1; font-size: 12px; font-weight: 700; }
.status-pill i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #aaa29a; }
.status-pill.done { color: #53600c; background: #ebf1c2; }
.status-pill.done i { background: #7f9317; }
.status-pill.not-done { color: #685e56; background: #e7e1da; }
.status-pill.not-done i { background: #7f756d; }

/* Upload */
.upload-zone { position: relative; min-height: 330px; overflow: hidden; display: grid; border: 2px dashed #cfc8bd; outline: none; background: #f8f5ef; place-items: center; transition: .2s ease; }
.upload-zone:hover, .upload-zone:focus, .upload-zone.dragging { border-color: var(--accent); background: #fff8f3; box-shadow: inset 0 0 0 3px var(--accent-soft); }
.upload-zone > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.upload-zone.has-image > img { opacity: 1; }
.upload-empty { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; text-align: center; }
.upload-zone.has-image .upload-empty { display: none; }
.upload-icon { display: grid; width: 62px; height: 62px; margin-bottom: 15px; border-radius: 50%; color: #fff; background: var(--accent); place-items: center; font-size: 34px; transform: rotate(-12deg); }
.upload-empty > strong { font-size: 18px; }
.upload-empty > p { margin: 7px 0 15px; color: var(--muted); font-size: 12px; }
.upload-actions { display: flex; gap: 9px; }
.upload-actions button { padding: 9px 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; }
.upload-actions button:hover { color: var(--accent); border-color: var(--accent); }
.upload-empty > small { margin-top: 13px; color: #aaa39b; font-size: 10px; }
.upload-preview-actions { display: none; position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; padding: 10px 12px; align-items: center; justify-content: space-between; gap: 10px; color: #fff; background: rgba(0,0,0,.7); backdrop-filter: blur(7px); }
.upload-zone.has-image .upload-preview-actions { display: flex; }
.upload-preview-actions span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.upload-preview-actions button { flex: 0 0 auto; padding: 7px 10px; border: 0; color: var(--ink); background: var(--lime); cursor: pointer; font-size: 11px; font-weight: 900; }
.note-field { position: relative; display: block; margin-top: 21px; }
.note-field > span { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 800; }
.note-field span small { color: var(--muted); font-weight: 400; }
.note-field textarea { width: 100%; padding: 14px 50px 14px 15px; resize: vertical; border: 1px solid var(--line); outline: none; color: var(--ink); background: #fff; line-height: 1.6; }
.note-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.note-field em { position: absolute; right: 12px; bottom: 10px; color: #aaa39b; font-size: 11px; font-style: normal; }
.decision-actions { display: grid; grid-template-columns: 1.35fr .65fr; gap: 11px; margin-top: 17px; }
.not-done-button { padding: 10px 14px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid var(--line); background: #eee9e2; cursor: pointer; }
.not-done-button:hover { border-color: var(--ink); background: #e4ddd4; }
.not-done-button span { font-size: 13px; font-weight: 900; }
.not-done-button small { margin-top: 2px; color: var(--muted); font-size: 9px; }

/* Completed state */
.done-state { display: none; }
.checkin-card.is-done form { display: none; }
.checkin-card.is-done .done-state { display: block; position: relative; }
.done-visual { height: 390px; background: #ede8df; display: grid; place-items: center; overflow: hidden; }
.done-visual img { width: 100%; height: 100%; object-fit: cover; }
.not-done-symbol { display: none; width: 115px; height: 115px; border-radius: 50%; color: #fff; background: #8e847b; place-items: center; font-size: 68px; }
.done-visual.not-done img { display: none; }
.done-visual.not-done .not-done-symbol { display: grid; }
.done-overlay { position: absolute; top: 22px; left: 22px; display: flex; gap: 12px; padding: 13px 18px; align-items: center; color: #fff; background: rgba(25,25,23,.82); backdrop-filter: blur(10px); }
.done-overlay > span { display: grid; width: 28px; height: 28px; border-radius: 50%; color: var(--ink); background: var(--lime); place-items: center; font-weight: 900; }
.done-overlay div { display: flex; flex-direction: column; }
.done-overlay small { color: var(--lime); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.done-overlay strong { font-size: 15px; }
.done-state > p { margin: 18px 0 0; padding-left: 14px; border-left: 3px solid var(--accent); color: #635d57; line-height: 1.7; }
.done-state > button { margin-top: 15px; padding: 0; border: 0; color: var(--accent); background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; }
.stats-card { padding: 37px 29px; color: #fff; background: var(--ink); }
.stats-card .section-kicker { color: var(--lime); }
.stats-card h2 { color: #fff; }
.streak { display: flex; gap: 14px; margin: 45px 0 35px; align-items: center; }
.streak strong { color: var(--lime); font-size: 90px; line-height: .8; letter-spacing: -.08em; }
.streak span { color: #ded9d0; font-size: 13px; line-height: 1.6; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.mini-stats div { display: flex; flex-direction: column; }
.mini-stats div + div { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.12); }
.mini-stats b { font-size: 30px; }
.mini-stats span { margin-top: 5px; color: #918c84; font-size: 11px; }
.stats-card blockquote { margin: 41px 0 0; color: #b3ada4; font-family: serif; font-size: 14px; font-style: italic; line-height: 1.9; }

/* Personal center */
.profile-hero { padding: clamp(26px, 4vw, 45px); margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 25px; color: #fff; background: var(--ink); box-shadow: var(--shadow); }
.profile-identity { display: flex; align-items: center; gap: 22px; }
.profile-avatar { display: grid; width: 88px; height: 88px; flex: 0 0 auto; color: var(--ink); background: var(--lime); place-items: center; font-size: 42px; font-weight: 900; transform: rotate(-3deg); }
.profile-identity .section-kicker { color: var(--lime); }
.profile-identity h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.055em; }
.profile-identity p:last-child { margin: 8px 0 0; color: #aaa39b; font-size: 12px; }
.profile-summary { display: grid; grid-template-columns: repeat(3, 1fr); min-width: 360px; }
.profile-summary div { padding: 10px 22px; display: flex; align-items: center; flex-direction: column; border-left: 1px solid rgba(255,255,255,.13); }
.profile-summary strong { color: var(--lime); font-size: 32px; }
.profile-summary span { margin-top: 5px; color: #aaa39b; font-size: 10px; }
.calendar-card { padding: clamp(23px, 4vw, 40px); }
.calendar-heading, .history-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 25px; }
.calendar-controls { display: flex; gap: 7px; }
.calendar-controls button { min-width: 38px; height: 36px; padding: 0 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; }
.calendar-controls button:hover { color: #fff; border-color: var(--ink); background: var(--ink); }
.calendar-week, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-week { padding: 0 0 9px; color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
.calendar-day { position: relative; min-height: 93px; padding: 11px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: #fff; }
.calendar-day:nth-child(7n+1) { border-left: 1px solid var(--line); }
.calendar-day:nth-last-child(-n+7) { border-bottom: 1px solid var(--line); }
.calendar-day.blank { background: #f6f2eb; }
.calendar-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.calendar-day > span:first-child { font-size: 12px; font-weight: 800; }
.calendar-day.future > span:first-child { color: #c6bfb7; }
.day-mark { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 6px 7px; display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 900; }
.day-mark.completed { color: #8e2c1a; background: var(--accent-soft); }
.day-mark.not-done { color: #625a53; background: #e9e3dc; }
.day-mark i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 19px; margin-top: 17px; color: var(--muted); font-size: 10px; }
.calendar-legend span { display: flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 9px; height: 9px; border-radius: 50%; }
.calendar-legend i.completed { background: var(--accent); }
.calendar-legend i.not-done { background: #8e847b; }
.calendar-legend i.empty { border: 1px solid #beb6ad; }
.history-section { padding-top: 62px; }
.history-heading > span { color: var(--muted); font-size: 12px; }
.history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.history-item { overflow: hidden; background: var(--card); box-shadow: 0 14px 35px rgba(59,45,33,.08); animation: rise .4s both; }
.history-photo { position: relative; height: 225px; overflow: hidden; cursor: zoom-in; background: #e8e2da; }
.history-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.history-photo:hover img { transform: scale(1.035); }
.history-photo.not-done { display: grid; cursor: default; place-items: center; }
.history-photo.not-done::before { content: "—"; display: grid; width: 78px; height: 78px; border-radius: 50%; color: #fff; background: #8e847b; place-items: center; font-size: 43px; }
.history-photo time { position: absolute; top: 12px; left: 12px; padding: 7px 10px; color: #fff; background: rgba(0,0,0,.7); font-size: 10px; font-weight: 800; }
.record-badge { position: absolute; right: 12px; top: 12px; padding: 6px 9px; color: var(--ink); background: var(--lime); font-size: 9px; font-weight: 900; }
.record-badge.not-done { color: #fff; background: #766c64; }
.history-copy { min-height: 91px; padding: 16px 17px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.history-copy p { margin: 0; color: #5f5a54; font-size: 12px; line-height: 1.65; }
.history-copy button { flex: 0 0 auto; border: 0; color: #aaa39a; background: transparent; cursor: pointer; font-size: 18px; }
.history-copy button:hover { color: var(--accent); }
.empty-history { padding: 53px; display: flex; gap: 12px; align-items: center; justify-content: center; color: #9c958d; border: 1px dashed #c9c1b6; }
.empty-history span { color: var(--accent); }
.empty-history p { margin: 0; }

/* Dialog and notifications */
dialog { max-width: min(900px, calc(100% - 30px)); padding: 0; border: 0; background: transparent; }
dialog::backdrop { background: rgba(15,14,13,.88); backdrop-filter: blur(8px); }
dialog img { display: block; max-width: 100%; max-height: 80vh; margin: auto; object-fit: contain; }
dialog p { margin: 14px 45px 0; color: #fff; text-align: center; }
dialog button { position: fixed; top: 20px; right: 24px; border: 0; color: #fff; background: transparent; cursor: pointer; font-size: 42px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; max-width: calc(100% - 30px); padding: 12px 18px; border-radius: 99px; color: #fff; background: var(--ink); box-shadow: 0 12px 35px rgba(0,0,0,.22); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
    .auth-view { grid-template-columns: 1fr; width: min(680px, calc(100% - 32px)); }
    .auth-brand { padding-top: 20px; }
    .auth-deco { display: none; }
    .topbar { grid-template-columns: auto 1fr auto; padding: 0 18px; }
    .wordmark span { display: none; }
    .topbar nav { justify-self: center; }
    .user-menu > div { display: none; }
    .dashboard { grid-template-columns: 1fr; }
    .profile-hero { align-items: flex-start; flex-direction: column; }
    .profile-summary { width: 100%; min-width: 0; }
    .profile-summary div:first-child { border-left: 0; }
    .history-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .auth-view { width: calc(100% - 20px); padding: 24px 0; gap: 35px; }
    .auth-brand h1 { font-size: 50px; }
    .auth-brand > p:not(.eyebrow) { font-size: 13px; }
    .auth-card { padding: 28px 20px; }
    .topbar { height: 65px; gap: 8px; padding: 0 10px; }
    .topbar nav button { padding: 7px 10px; font-size: 11px; }
    .user-menu > button { padding: 6px; }
    .page-shell { width: calc(100% - 20px); padding-top: 30px; }
    .hero { position: relative; display: block; margin-bottom: 33px; }
    .hero h1 { font-size: 46px; }
    .hero-copy { max-width: calc(100% - 90px); font-size: 13px; }
    .date-card { position: absolute; right: 3px; bottom: 5px; width: 76px; min-height: 108px; padding: 10px; box-shadow: 5px 6px 0 var(--lime); }
    .date-card span { font-size: 9px; }
    .date-card strong { font-size: 38px; }
    .date-card small { font-size: 9px; }
    .checkin-card { padding: 22px 16px; }
    .card-heading { display: block; }
    .status-pill { display: inline-block; margin-top: 13px; }
    .upload-zone { min-height: 300px; }
    .upload-actions { flex-direction: column; }
    .decision-actions { grid-template-columns: 1fr; }
    .done-visual { height: 330px; }
    .profile-identity { align-items: flex-start; }
    .profile-avatar { width: 65px; height: 65px; font-size: 31px; }
    .profile-summary div { padding: 9px 4px; }
    .profile-summary strong { font-size: 25px; }
    .calendar-card { padding: 20px 12px; }
    .calendar-heading { align-items: flex-start; flex-direction: column; }
    .calendar-day { min-height: 67px; padding: 7px; }
    .day-mark { left: 5px; right: 5px; bottom: 5px; padding: 4px; }
    .day-mark span { display: none; }
    .history-section { padding-top: 48px; }
    .history-grid { grid-template-columns: 1fr; }
    .history-photo { height: 270px; }
}