/* Shared presentation for the signed-in workspace. */
:root { --ink:#17243a; --muted:#607189; --paper:#fff; --surface:#f5f8fc; --line:#dce5ef; --blue:#205bd8; --blue-soft:#edf3ff; --accent:#d99b3d; --shadow:0 12px 34px rgba(17,35,66,.055); }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'DM Sans',Inter,system-ui,sans-serif; color:var(--ink); }
.app-shell { background:radial-gradient(circle at 78% 1%,#eaf2ff 0,transparent 30%),#f5f7fb; }
.main-content { max-width:1280px; padding:44px clamp(24px,4vw,62px) 80px; }
.sidebar { box-sizing:border-box; width:260px; padding:28px 16px 22px; border-right:1px solid #dce5ef; box-shadow:6px 0 26px rgba(21,42,80,.025); }
.sidebar-brand { margin-bottom:31px; font-size:22px; letter-spacing:-.04em; }
.sidebar-nav { overflow-y:auto; min-height:0; scrollbar-width:thin; gap:3px; }
.nav-kicker { display:block; margin:5px 12px 9px; color:#8798ad; font-size:10px; letter-spacing:.16em; font-weight:800; }
.nav-kicker-second { margin-top:22px; }
.sidebar-link { min-height:43px; border-radius:11px; font-size:13px; font-weight:650; line-height:1.35; }
.sidebar-link:hover { background:#edf3fb; transform:translateX(2px); }
.sidebar-link.active { background:#e7f0ff; color:#1749a9; font-weight:800; }
.sidebar-link.active::before { content:''; width:3px; height:20px; background:#2b67e0; border-radius:4px; margin-left:-8px; margin-right:5px; }
.sidebar-link svg { flex:0 0 18px; }
.sidebar-foot { padding-top:17px; }
.main-content > [class*="max-w-"] { max-width:100%; padding:0; margin:0; }
.main-content .bg-white, .card, .stat-card { border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.main-content .bg-white { padding:clamp(20px,3vw,34px); }
.card { padding:clamp(20px,3vw,30px); }
.workspace-page .main-content > * { min-width:0; }
.workspace-header { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:5px 0 27px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.workspace-eyebrow,.dashboard-eyebrow { color:#315fbe; font-weight:800; font-size:11px; letter-spacing:.17em; margin:0 0 11px; }
.workspace-title { color:#152744; font-family:Fraunces,Georgia,serif; font-size:clamp(30px,3.2vw,44px); line-height:1.15; letter-spacing:-.035em; margin:0; }
.workspace-subtitle { color:var(--muted); font-size:15px; line-height:1.65; max-width:590px; margin:10px 0 0; }
.workspace-header-link { flex:none; display:inline-flex; align-items:center; gap:10px; padding:11px 15px; border-radius:11px; background:#eaf1ff; color:#1d4db0; font-size:13px; font-weight:800; text-decoration:none; }
.workspace-header-link:hover { background:#dce9ff; }
.page-title { font-size:clamp(29px,2.7vw,40px); letter-spacing:-.025em; }
.page-header { align-items:center; }
.page-sub { line-height:1.6; }
.card h2,.main-content .bg-white h2 { font-family:Fraunces,Georgia,serif; font-weight:600; font-size:clamp(20px,2vw,25px); color:#193253; letter-spacing:-.02em; }
.card h3 { color:#193253; }
.stats-grid { gap:16px; }
.stat-card { padding:21px 23px; position:relative; overflow:hidden; }
.stat-card::before {content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2a66df,#dba348);}
.stat-label { font-weight:700; letter-spacing:.01em; }
.stat-value { font-family:Fraunces,Georgia,serif; font-size:30px; }
.activation-banner { position:relative; overflow:hidden; padding:36px; border-radius:20px; }
.activation-banner::after { content:''; position:absolute; right:-75px; bottom:-130px; width:300px; height:300px; border:1px solid rgba(255,255,255,.19); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025); pointer-events:none; }
.activation-banner > * { position:relative; z-index:1; }
.activation-banner h2 { font-size:clamp(23px,2.5vw,32px); }
.activation-banner p { font-size:14px; line-height:1.6; max-width:490px; }
.discovery-grid { gap:16px; margin:16px 0 27px; }
.discovery-item { padding:20px; border-color:var(--line); background:#fbfcff; border-radius:15px; line-height:1.6; }
.discovery-item h4 { color:#193253; font-size:16px; }
.discovery-item p { color:#556680; font-size:13px; }
.discovery-item a { text-decoration:none; }
.discovery-error { grid-column:1/-1; display:flex; align-items:center; gap:17px; padding:18px 20px; border:1px solid #c9d9ee; border-radius:15px; background:#f5f9ff; }
.discovery-error-icon { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; background:#e4eeff; color:#205bd8; font-size:24px; }
.discovery-error strong { display:block; color:#193253; font-size:15px; }
.discovery-error p { margin:4px 0 0; color:#556680; font-size:13px; }
.discovery-retry { flex:none; margin-left:auto; padding:11px 16px; min-height:44px; border:0; border-radius:10px; background:#205bd8; color:#fff; font-weight:800; cursor:pointer; }
.discovery-retry:hover { background:#174aaa; box-shadow:0 6px 16px rgba(32,91,216,.22); }
.dashboard-next-grid a { background:#fbfcff; }
.project-card,.booking-list-card,.reflection-list-card { border:1px solid var(--line); border-radius:15px; padding:19px; background:#fbfcff; line-height:1.65; }
.project-card h3 { font-size:17px; }
.project-card p { color:#566880; }
.booking-review-form { display:grid; gap:12px; margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.booking-review-form label { display:grid; gap:6px; font-weight:700; font-size:13px; }
.booking-review-form select,.booking-review-form textarea { width:100%; box-sizing:border-box; min-height:44px; padding:10px 12px; border:1px solid #bdcde1; border-radius:9px; background:var(--paper); color:var(--ink); }
.booking-review-form textarea { min-height:92px; resize:vertical; }
.booking-review-form button { justify-self:start; }
.projects-page { max-width:1100px; }
.project-form { gap:9px; }
.project-form input,.project-form select,.project-form textarea,.field-row input,.field-row select,.booking-field,.booking-grid input,.booking-grid select,.reflection-filters input { min-height:44px; border:1px solid #cbd8e9; border-radius:10px; }
.project-form textarea { min-height:100px; }
.project-form label { margin-top:5px; }
.project-opt-in { padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#f7faff; }
.project-preferences { border-left:4px solid #3b73df; }
.workspace-page .search-controls { align-items:end; }
.workspace-page .search-controls input { width:100%; min-height:48px; box-sizing:border-box; border:1px solid #cbd8e9; border-radius:11px; padding:11px 14px; }
.workspace-page .search-controls button,.workspace-primary,.btn-add,.project-primary { background:#205bd8; color:#fff; border:0; border-radius:11px; padding:11px 18px; min-height:46px; font-weight:800; cursor:pointer; }
.workspace-page .search-controls button:hover,.workspace-primary:hover,.btn-add:hover,.project-primary:hover { background:#174aaa; }
.workspace-empty { text-align:center; padding:45px 18px; border:1px dashed #b7c9de; border-radius:15px; background:#f8fbff; }
.workspace-empty span { display:block; color:#d29a3d; font-size:33px; margin-bottom:8px; }
.workspace-empty h3 { font-family:Fraunces,Georgia,serif; font-size:21px; margin:0 0 8px; color:#183252; }
.workspace-empty p { color:#607189; margin:0 0 12px; }
.workspace-empty a { color:#205bd8; font-weight:800; }
.timetable-day-nav a { border-radius:11px; font-weight:800; }
#timetable > *, #reflectionsList > * { overflow-wrap:anywhere; }
.admin-users-table,.admin-bookings-table { border-collapse:separate; border-spacing:0; }
.admin-users-table th,.admin-bookings-table th { padding:14px 11px; color:#405571; white-space:nowrap; }
.admin-users-table td,.admin-bookings-table td { padding:13px 11px; border-bottom:1px solid var(--line); }
.admin-users-table tbody tr:hover,.admin-bookings-table tbody tr:hover { background:#f3f7ff; }
.admin-table-scroll { border:1px solid var(--line); border-radius:12px; }
button, a, input, select, textarea { transition:box-shadow .16s,border-color .16s,background-color .16s; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:3px solid #3c7ae8; outline-offset:3px; }
button:disabled { opacity:.55; cursor:not-allowed; }
.settings-page .card { max-width:850px; }
.settings-page .settings-skill { gap:15px; }
.settings-page .avail-slot { gap:12px; }
.masterclass-page { max-width:1100px; }
.masterclass-page .discovery-item { background:#fff; }
.masterclass-badge { color:#205bd8; }
/* Dark theme follows the user's stored preference, with the same hierarchy. */
html.dark { --ink:#edf2fa;--muted:#b3c0d3;--paper:#1d2a3e;--surface:#111b2b;--line:#35465e;--shadow:0 12px 28px rgba(0,0,0,.12); }
html.dark .app-shell { background:radial-gradient(circle at 80% 0%,#172b4a 0,transparent 32%),#111927; }
html.dark .sidebar { background:#1a2536; border-color:#33445c; }
html.dark .sidebar-link:hover { background:#2b3c55; }
html.dark .sidebar-link.active { background:#25446d; color:#c5dcff; }
html.dark .nav-kicker { color:#9ab0ca; }
html.dark .workspace-header { border-color:var(--line); }
html.dark .workspace-title,html.dark .card h2,html.dark .main-content .bg-white h2,html.dark .card h3,html.dark .discovery-item h4,html.dark .workspace-empty h3 { color:#f5f8ff; }
html.dark .workspace-subtitle,html.dark .discovery-item p,html.dark .project-card p,html.dark .workspace-empty p { color:#bdc9da; }
html.dark .workspace-eyebrow { color:#9bc0ff; }
html.dark .workspace-header-link { color:#d7e5ff; background:#274268; }
html.dark .main-content .bg-white,html.dark .card,html.dark .stat-card { background:#1d2a3e !important; border-color:var(--line); }
html.dark .discovery-item,html.dark .dashboard-next-grid a,html.dark .project-card,html.dark .booking-list-card,html.dark .reflection-list-card,html.dark .workspace-empty { color:#f3f6fc; background:#223149; border-color:var(--line); }
html.dark .discovery-error { background:#223149; border-color:#435b7d; }
html.dark .discovery-error-icon { background:#29456e; color:#d5e5ff; }
html.dark .discovery-error strong { color:#f5f8ff; }
html.dark .discovery-error p { color:#bdc9da; }
html.dark .project-opt-in { background:#223149; border-color:var(--line); }
html.dark .admin-users-table tbody tr:hover,html.dark .admin-bookings-table tbody tr:hover { background:#293d5a; }
html.dark .admin-users-table td,html.dark .admin-bookings-table td { border-color:var(--line); }
html.dark .admin-users-table th,html.dark .admin-bookings-table th { color:#d2def0; }
html.dark .workspace-page .search-controls input { background:#24364c; color:#f7faff; border-color:#526681; }
html.dark .settings-skill strong,html.dark .project-card h3 { color:#f2f6ff; }
@media(max-width:860px){.sidebar { width:100%; padding:10px 16px; }.main-content { margin-left:0; padding:28px 20px 55px; }.sidebar.menu-open { padding:14px 16px 22px; }.nav-kicker { margin-top:16px; }}
@media(max-width:600px){.main-content{padding:22px 14px 50px}.workspace-header{align-items:start;flex-direction:column;gap:13px;padding-bottom:20px;margin-bottom:18px}.workspace-header-link{width:100%;justify-content:center;box-sizing:border-box;min-height:44px}.main-content .bg-white,.card{padding:20px}.activation-banner{padding:25px 21px}.activation-actions a{flex:1;white-space:normal}.stats-grid{gap:10px}.stat-card{padding:15px}.stat-value{font-size:24px}.workspace-page .search-controls{grid-template-columns:1fr}.workspace-page .search-controls button{min-height:48px}.project-card{padding:15px}.main-content .max-w-4xl,.main-content .max-w-7xl{padding:0}.workspace-empty{padding:32px 15px}}
@media(max-width:600px){.discovery-error{flex-wrap:wrap;padding:16px}.discovery-error>div{flex:1 1 calc(100% - 65px)}.discovery-retry{width:100%;margin:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sidebar-link:hover,.discovery-item:hover,.dashboard-next-grid a:hover{transform:none}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media(min-width:861px){.main-content{margin-left:260px}}
html.dark .sidebar-nav { background:transparent !important;box-shadow:none !important; }
html.dark .timetable-day-nav { background:transparent !important;box-shadow:none !important; }
html.dark .sidebar-nav a.sidebar-link.active { color:#c5dcff !important; }
html.dark .sidebar-nav a.sidebar-link:hover { color:#fff !important; }
html.dark .workspace-header-link:hover { background:#325482; }
html.dark .main-content .bg-white .text-gray-500 { color:#b4c4dc !important; }
/* Profile settings: calm, distinct controls with clear touch targets. */
.settings-page .settings-skill { padding:17px 0; border-bottom:1px solid var(--line); }
.settings-skill-info { display:flex; align-items:center; gap:13px; min-width:0; }
.settings-skill-info strong { font-size:15px; overflow-wrap:anywhere; }
.settings-skill-icon { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; color:#215ed1; background:#eaf1ff; font-size:17px; }
.settings-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.settings-page .settings-action { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:41px; padding:8px 13px; border:1px solid #bed1ef; border-radius:10px; background:#edf4ff; color:#1d4eab; text-decoration:none; width:auto; margin:0; font:700 13px 'DM Sans',sans-serif; cursor:pointer; white-space:nowrap; }
.settings-page .settings-action:hover { background:#dceaff; border-color:#7fa9e8; }
.settings-page .settings-action-danger { background:#fff8f7; color:#a23b42; border-color:#efccd0; }
.settings-page .settings-action-danger:hover { background:#ffe9e8; border-color:#e9a4a9; }
.settings-page .settings-action:disabled { opacity:.55; cursor:wait; }
.weekly-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px; }
.weekly-heading .workspace-eyebrow { margin-bottom:5px; }
.weekly-heading h2 { margin:0 0 3px; }
.weekly-count { flex:none; padding:10px 14px; border-radius:999px; background:#e8f1ff; color:#1e50ae; font-weight:800; font-size:12px; }
.settings-page .weekly-slot { display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:13px; padding:12px 14px; margin-bottom:10px; background:#fbfdff; }
.weekly-day { display:grid; place-items:center; flex:none; width:45px; height:45px; border-radius:11px; background:#eaf1ff; color:#2456ae; font-size:12px; font-weight:800; text-transform:uppercase; }
.weekly-slot-text { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.weekly-slot-text strong { font-size:14px; }
.weekly-slot-text span { color:#61748d; font-size:13px; }
.weekly-empty { text-align:center; background:#f6faff; border:1px dashed #b8cbea; border-radius:14px; padding:28px 15px; }
.weekly-empty > span { font-size:26px; color:#ca8c32; display:block; margin-bottom:7px; }
.weekly-empty strong { font:600 20px Fraunces,Georgia,serif; display:block; margin-bottom:5px; }
.weekly-empty p { margin:0 0 12px; color:#64748b; }
.settings-page .avail-form { border:1px solid var(--line); border-radius:14px; padding:22px; margin-top:25px; }
.settings-page .avail-form h3 { margin:0 0 2px; }
.settings-page .avail-form .page-sub { margin-bottom:15px; }
html.dark .settings-skill-icon,html.dark .weekly-day,html.dark .weekly-count { background:#294b77; color:#d7e8ff; }
html.dark .settings-page .settings-action { background:#28486e; color:#deebff; border-color:#456f9f; }
html.dark .settings-page .settings-action-danger { background:#4a3038; color:#ffc7c9; border-color:#78505c; }
html.dark .settings-page .weekly-slot,html.dark .weekly-empty { background:#233249; border-color:var(--line); color:#f1f5fc; }
html.dark .weekly-slot-text span,html.dark .weekly-empty p { color:#c0ccdc; }
html.dark .settings-page .avail-form { background:#1c2b40; border-color:var(--line); }
@media(max-width:600px){.settings-page .settings-skill { align-items:flex-start; flex-direction:column; }.settings-actions { width:100%; }.settings-page .settings-actions .settings-action { flex:1; }.weekly-heading { align-items:flex-start; flex-direction:column; }.settings-page .weekly-slot { flex-wrap:wrap; }.settings-page .weekly-slot .settings-action { margin-left:auto; }.settings-page .avail-form { padding:16px; }}

/* Dashboard profile editor uses the same form language as the settings pages. */
.profile-card-heading {display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.profile-card-heading .workspace-eyebrow {margin-bottom:4px;}.profile-card-heading h2 {margin:0;}
.profile-heading-icon {display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#eaf1ff;color:#215bd1;font-size:18px;}
.profile-identity {display:flex;align-items:center;gap:13px;margin-bottom:19px;}
.profile-identity .profile-avatar {flex:none;margin:0;background:linear-gradient(140deg,#315fcb,#203d77);}
.profile-identity .profile-rating {margin:2px 0 0;}
.profile-row-value {overflow-wrap:anywhere;line-height:1.5;}
.profile-edit-button,.profile-save-button {width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:45px;border:0;border-radius:10px;background:#205bd8;color:white;font:700 13px 'DM Sans',sans-serif;cursor:pointer;}
.profile-edit-button:hover,.profile-save-button:hover {background:#174aaa;}
.profile-edit-form {display:grid;gap:9px;}.profile-edit-form[hidden],#profileView[hidden] {display:none;}
.profile-edit-form .page-sub {margin:0 0 8px;}
.profile-edit-form label {font-weight:700;font-size:13px;color:#334967;margin-top:7px;}
.profile-optional {font-weight:500;color:#7b8ca3;font-size:11px;margin-left:5px;}
.profile-edit-form input,.profile-edit-form textarea {width:100%;box-sizing:border-box;border:1px solid #cbd8e9;border-radius:10px;padding:11px 12px;font:inherit;font-size:14px;resize:vertical;}
.profile-edit-form input {min-height:46px;}.profile-edit-form textarea {min-height:105px;}
.profile-edit-actions {display:flex;gap:8px;margin-top:9px;}.profile-edit-actions button {flex:1;min-width:0;}
.profile-cancel-button {border:1px solid #bdcde2;border-radius:10px;background:#f4f7fb;color:#304460;font:700 13px 'DM Sans',sans-serif;cursor:pointer;min-height:45px;}
.profile-cancel-button:hover {background:#e9eff7;}
#profileMessage:not(:empty) {font-size:13px;color:#a43d3d;line-height:1.5;}
html.dark .profile-heading-icon {background:#294b77;color:#d8e7ff;}
html.dark .profile-edit-form label {color:#e5edf9;}
html.dark .profile-cancel-button {background:#283d58;color:#eff5ff;border-color:#49627f;}

.booking-notice{padding:1rem 1.25rem;border-radius:12px;margin:0 0 1rem;font-weight:600}.booking-notice-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}.booking-notice-error{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}.booking-notice[hidden]{display:none}

.reflection-feedback { display:flex; align-items:center; gap:13px; padding:14px 17px; margin:0 0 18px; border:1px solid #a7d7c2; border-radius:13px; background:#ecfdf5; color:#14532d; line-height:1.4; }
.reflection-feedback[hidden] { display:none; }
.reflection-feedback-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:#d1fae5; color:#047857; font-size:19px; font-weight:800; }
.reflection-feedback strong,.reflection-feedback span span { display:block; }
.reflection-feedback strong { font-size:14px; }
.reflection-feedback span span { margin-top:2px; font-size:13px; }
.reflection-feedback a { margin-left:auto; color:inherit; font-size:13px; font-weight:800; white-space:nowrap; }
.reflection-feedback-error { display:block; margin:0 0 12px; background:#fff1f2; border-color:#fecdd3; color:#9f1239; font-size:14px; }
html.dark .reflection-feedback-success { background:#12372c; border-color:#27634c; color:#d1fae5; }
html.dark .reflection-feedback-icon { background:#20543d; color:#bbf7d0; }
html.dark .reflection-feedback-error { background:#4a2231; border-color:#a94d6b; color:#ffe4e6; }
@media(max-width:560px) { .reflection-feedback-success { flex-wrap:wrap; } .reflection-feedback a { width:100%; margin-left:47px; } }

.timetable-delete-dialog { width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box; padding:26px; border:1px solid #e4cad0; border-radius:18px; background:#fff; color:#24344d; box-shadow:0 28px 80px rgba(16,24,40,.28); }
.timetable-delete-dialog::backdrop { background:rgba(14,27,47,.72); }
.timetable-delete-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:#fff1f2; color:#b42338; font-weight:900; font-size:23px; }
.timetable-delete-dialog h2 { margin:17px 0 8px; color:#172944; font-family:Fraunces,Georgia,serif; font-size:25px; }
.timetable-delete-dialog p { line-height:1.55; font-size:14px; }
.timetable-delete-label { padding:11px 13px; border-radius:10px; background:#f3f7fd; color:#263b58; font-weight:800; }
.timetable-delete-actions { display:flex; gap:10px; margin-top:21px; }
.timetable-delete-actions button { min-height:46px; padding:10px 14px; border-radius:10px; font:700 13px 'DM Sans',sans-serif; cursor:pointer; }
.timetable-delete-cancel { flex:1; border:1px solid #cbd5e1; background:#fff; color:#304460; }
.timetable-delete-confirm { flex:1.6; border:1px solid #b42338; background:#b42338; color:#fff; }
.timetable-delete-confirm:hover { background:#8e192e; }
html.dark .timetable-delete-dialog { background:#1d2a3e; border-color:#654554; color:#e2e8f0; }
html.dark .timetable-delete-dialog h2 { color:#f5f8ff; }
html.dark .timetable-delete-label { background:#273952; color:#e2e8f0; }
html.dark .timetable-delete-cancel { background:#273952; border-color:#52647d; color:#f5f8ff; }
@media(max-width:480px) { .timetable-delete-dialog { padding:20px; } .timetable-delete-actions { flex-direction:column-reverse; } .timetable-delete-actions button { width:100%; } }

/* Consistency Heatmap & Streak Badges */
.heatmap-card { margin-bottom: 24px; }
.heatmap-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.streak-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.streak-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9999px; font-size: 13px; font-weight: 700; background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.streak-badge.streak-fire { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.streak-badge.streak-longest { background: #fefce8; color: #854d0e; border-color: #fef08a; }
.streak-badge.streak-total { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.heatmap-scroll { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.heatmap-grid { display: grid; grid-template-rows: repeat(7, 13px); grid-auto-flow: column; grid-auto-columns: 13px; gap: 4px; padding: 6px 2px; }
.heatmap-cell { width: 13px; height: 13px; border-radius: 3px; background-color: #e2e8f0; transition: transform 0.12s, outline 0.12s; cursor: pointer; }
.heatmap-cell:hover { transform: scale(1.35); outline: 1px solid rgba(0,0,0,0.3); z-index: 10; position: relative; }
.heatmap-cell.level-0 { background-color: #e2e8f0; }
.heatmap-cell.level-1 { background-color: #a7f3d0; }
.heatmap-cell.level-2 { background-color: #34d399; }
.heatmap-cell.level-3 { background-color: #059669; }
.heatmap-cell.level-4 { background-color: #064e3b; }
.heatmap-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.heatmap-legend { display: flex; align-items: center; gap: 5px; }
.heatmap-legend .heatmap-cell { cursor: default; }

html.dark .streak-badge { background: #1e1b4b; color: #c7d2fe; border-color: #3730a3; }
html.dark .streak-badge.streak-fire { background: #431407; color: #fdba74; border-color: #7c2d12; }
html.dark .streak-badge.streak-longest { background: #422006; color: #fef08a; border-color: #713f12; }
html.dark .streak-badge.streak-total { background: #052e16; color: #86efac; border-color: #14532d; }
html.dark .heatmap-cell.level-0 { background-color: #273549; }
html.dark .heatmap-cell.level-1 { background-color: #064e3b; }
html.dark .heatmap-cell.level-2 { background-color: #059669; }
html.dark .heatmap-cell.level-3 { background-color: #10b981; }
html.dark .heatmap-cell.level-4 { background-color: #34d399; }

/* OPay-standard reflection modal: segmented Write/Speak switch, recorder, preview. */
:root { --opay-green:#00B875; --opay-green-deep:#059669; }
.reflection-modal { width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow-y:auto; box-sizing:border-box; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--paper); color:var(--ink); box-shadow:0 24px 70px rgba(10,30,20,.28); }
.reflection-modal h3 { margin:0; font-family:Fraunces,Georgia,serif; font-size:22px; letter-spacing:-.02em; color:inherit; }
.reflection-modal-date { margin:4px 0 0; font-size:13px; color:var(--muted); }
.reflection-mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:16px 0 18px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.reflection-mode-switch button { appearance:none; border:0; background:transparent; color:var(--muted); min-height:44px; padding:8px 10px; border-radius:999px; font:800 13px 'DM Sans',sans-serif; cursor:pointer; transition:background .18s ease,color .18s ease,box-shadow .18s ease; }
.reflection-mode-switch button:hover:not([aria-selected="true"]) { color:var(--ink); }
.reflection-mode-switch button[aria-selected="true"] { background:linear-gradient(135deg,var(--opay-green),var(--opay-green-deep)); color:#fff; box-shadow:0 6px 16px rgba(0,184,117,.35); }
.reflection-write-panel label { display:block; margin:12px 0 4px; font-size:13px; font-weight:800; }
.reflection-write-panel textarea { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #cbd8e9; border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; font-size:14px; resize:vertical; }
.reflection-write-panel textarea:focus { outline:none; border-color:var(--opay-green-deep); box-shadow:0 0 0 3px rgba(0,184,117,.22); }
.reflection-write-panel .reflection-field-hint { display:block; margin:0 0 2px; font-size:12px; color:var(--muted); }
.reflection-field-meta { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 6px; font-size:12px; color:var(--muted); }
.reflection-field-meta .reflection-char-count { flex:none; font-variant-numeric:tabular-nums; }
.reflection-field-meta .reflection-char-count.near-limit { color:#b45309; }
.reflection-voice-panel { text-align:center; }
.reflection-voice-intro { margin:0 0 14px; font-size:13px; color:var(--muted); }
.reflection-recorder { display:flex; flex-direction:column; align-items:center; gap:10px; }
.reflection-record-btn { position:relative; width:96px; height:96px; border:0; border-radius:50%; background:linear-gradient(140deg,var(--opay-green),var(--opay-green-deep)); color:#fff; font-size:38px; line-height:1; cursor:pointer; transition:transform .15s ease,background .2s ease,box-shadow .2s ease; box-shadow:0 10px 26px rgba(0,184,117,.4); }
.reflection-record-btn:hover { box-shadow:0 12px 30px rgba(0,184,117,.5); }
.reflection-record-btn:active { transform:scale(.93); }
.reflection-record-btn.is-recording { background:linear-gradient(140deg,#e11d48,#be123c); box-shadow:0 10px 26px rgba(225,29,72,.45); }
.reflection-record-btn.is-recording::before,.reflection-record-btn.is-recording::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(225,29,72,.55); animation:reflection-ripple 1.6s ease-out infinite; pointer-events:none; }
.reflection-record-btn.is-recording::after { animation-delay:.8s; }
@keyframes reflection-ripple { from { transform:scale(1); opacity:.85; } to { transform:scale(1.75); opacity:0; } }
.reflection-waveform { display:flex; align-items:flex-end; justify-content:center; gap:4px; height:26px; }
.reflection-waveform span { width:4px; height:7px; border-radius:2px; background:var(--line); transition:background .2s ease; }
.reflection-waveform.is-active span { background:var(--opay-green-deep); animation:reflection-wave 1s ease-in-out infinite; }
.reflection-waveform.is-active span:nth-child(2) { animation-delay:.15s; }
.reflection-waveform.is-active span:nth-child(3) { animation-delay:.3s; }
.reflection-waveform.is-active span:nth-child(4) { animation-delay:.45s; }
.reflection-waveform.is-active span:nth-child(5) { animation-delay:.6s; }
.reflection-waveform.is-active span:nth-child(6) { animation-delay:.75s; }
@keyframes reflection-wave { 0%,100% { height:7px; } 50% { height:26px; } }
.reflection-timer { margin:0; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.reflection-timer span { color:var(--muted); font-weight:600; }
.reflection-voice-status { min-height:18px; margin:0; font-size:13px; color:var(--muted); }
.reflection-voice-status.is-error { color:#be123c; }
.reflection-voice-status.is-success { color:var(--opay-green-deep); font-weight:700; }
.reflection-voice-preview { margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-align:left; }
.reflection-voice-preview audio { display:none; }
.reflection-scrubber { display:flex; align-items:center; gap:10px; }
.reflection-play-btn { flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--opay-green-deep); color:#fff; font-size:15px; cursor:pointer; }
.reflection-scrubber input[type="range"] { flex:1; accent-color:var(--opay-green-deep); cursor:pointer; }
.reflection-scrub-time { flex:none; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--muted); }
.reflection-voice-actions { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.reflection-voice-action { appearance:none; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 13px; border:1px solid #bed1ef; border-radius:999px; background:#edf4ff; color:#1d4eab; font:700 12px 'DM Sans',sans-serif; cursor:pointer; }
.reflection-voice-action:hover { background:#dceaff; }
.reflection-voice-action-danger { background:#fff1f2; color:#be123c; border-color:#fecdd3; }
.reflection-voice-action-danger:hover { background:#ffe4e6; }
.reflection-voice-attached { margin-left:auto; font-size:12px; font-weight:800; color:var(--opay-green-deep); }
.reflection-voice-note-label { margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--opay-green-deep); }
html.dark .reflection-mode-switch { background:#16233a; }
html.dark .reflection-mode-switch button:hover:not([aria-selected="true"]) { color:#f1f5fc; }
html.dark .reflection-write-panel textarea { border-color:#526681; }
html.dark .reflection-voice-preview { background:#223149; }
html.dark .reflection-waveform span { background:#3c4e68; }
html.dark .reflection-voice-action { background:#28486e; color:#deebff; border-color:#456f9f; }
html.dark .reflection-voice-action:hover { background:#32587f; }
html.dark .reflection-voice-action-danger { background:#4a3038; color:#ffc7c9; border-color:#78505c; }
html.dark .reflection-voice-status.is-error { color:#fda4af; }
html.dark .reflection-voice-status.is-success { color:#6ee7b7; }
@media(max-width:480px) { .reflection-modal { padding:18px; border-radius:16px 16px 0 0; width:100vw; max-height:92dvh; margin-top:auto; } .reflection-voice-attached { width:100%; margin-left:0; } }