:root {
--bg: #fafafa;
--ink: #18181b;
--card: #ffffff;
--card2: #f4f4f5;
--border: #e4e4e7;
--muted: #a1a1aa;
--accent: #E8A838;
--focus: #E8453C;
--focus-light: #FEF0EF;
--done-color: #a1a1aa;
--shadow: 0 2px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
--radius: 14px;
--radius-sm: 8px;
--font-ui: 'DM Sans', sans-serif;
}
[data-theme="dark"] {
--bg: #0c0c0e;
--ink: #fafafa;
--card: #18181b;
--card2: #27272a;
--border: #27272a;
--muted: #71717a;
--accent: #c88a1a;
--focus: #FF6B63;
--focus-light: #2A1614;
--done-color: #52525b;
--shadow: 0 2px 12px rgba(0,0,0,0.3);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.45);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --toparea-h: 96px; }
body {
font-family: var(--font-ui); background: var(--bg); color: var(--ink);
min-height: 100vh; padding-bottom: 100px;
padding-top: var(--toparea-h);
}
/* ── Nav Tabs (top navigation bar) ── */
#navTabs {
display: flex; align-items: center; justify-content: center; gap: 4px;
padding: 8px 14px; background: var(--ink);
border-bottom: 1px solid rgba(255,255,255,0.1);
overflow-x: auto;
}
#navTabs::-webkit-scrollbar { height: 0; }
.nav-tab {
flex-shrink: 0; padding: 5px 12px; border-radius: 20px; font-size: 0.78rem;
font-weight: 500; cursor: pointer; border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.65); background: transparent;
transition: all .15s; font-family: var(--font-ui); white-space: nowrap;
}
.nav-tab.active { background: #E8A838; border-color: #E8A838; color: #1a1a1a; }
.nav-tab:hover:not(.active) { background: rgba(255,255,255,0.08); color: #fff; }
.nav-tab-sep { width: 1px; min-width: 1px; background: rgba(255,255,255,0.12); margin: 0 4px; align-self: stretch; }
/* ── Top area (header + nav tabs, full width fixed) ── */
#topArea {
position: fixed; top: 0; left: 0; right: 0; z-index: 220; background: var(--ink);
}
/* ── Header ── */
header {
background: var(--ink); color: var(--bg);
padding: 10px 14px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
overflow: hidden; min-width: 0;
}
.logo { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.logo span { color: #E8A838; }
.header-center { flex: 1; display: flex; justify-content: center; min-width: 0; overflow: hidden; }
.points-pill {
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px; padding: 4px 14px; display: flex; align-items: center; gap: 6px;
cursor: pointer; transition: background 0.15s;
}
.points-pill:hover { background: rgba(255,255,255,0.18); }
.points-pill .pts-val { font-family: 'Space Mono', monospace; font-size: 1rem; font-weight: 700; color: #E8A838; }
.points-pill .pts-label { font-size: 0.68rem; opacity: 0.6; }
.header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hdr-btn {
background: rgba(255,255,255,0.1); color: var(--bg);
border: 1px solid rgba(255,255,255,0.18); border-radius: 20px;
padding: 4px 12px; font-family: var(--font-ui); font-size: 0.7rem;
cursor: pointer; transition: background 0.15s; white-space: nowrap;
flex-shrink: 0;
}
.hdr-btn:hover { background: rgba(255,255,255,0.2); }
.date-tag { font-size: 0.68rem; opacity: 0.5; white-space: nowrap; flex-shrink: 0; }
/* ── Main ── */
main { max-width: 700px; margin: 0 auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
/* ── Desktop scaling ── */
@media (min-width: 1024px) {
main { max-width: 860px; padding: 24px 20px; gap: 16px; }
/* sidebar already expanded via the sidebar block above */
body { font-size: 1.08rem; }
.logo { font-size: 1.6rem; }
.slot-header { font-size: 1rem; }
.task-title { font-size: 0.95rem; }
.pts-badge { font-size: 0.85rem; }
.hdr-btn { font-size: 0.8rem; padding: 5px 14px; }
.card { padding: 18px; }
.summary-stat .val { font-size: 1.3rem; }
/* Group tabs */
.group-section-header { padding: 18px 22px; }
.group-section-title { font-size: 1.1rem; gap: 10px; }
.group-section-body { padding: 0 22px 22px; }
.group-tab-bar { gap: 8px; margin-bottom: 16px; }
.group-tab { font-size: 0.95rem; padding: 8px 22px; }
.group-card { padding: 16px 18px; margin-bottom: 14px; }
.group-card-name { font-size: 1.05rem; }
.group-card-meta { font-size: 0.85rem; }
.invite-code { font-size: 1rem; padding: 6px 14px; }
.shared-task-row { gap: 12px; padding: 8px 0; }
.shared-task-row .stask-text { font-size: 1rem; }
.shared-task-row .stask-pts { font-size: 0.88rem; }
.shared-task-row .stask-check { width: 26px; height: 26px; }
.add-shared-input { font-size: 0.95rem; padding: 11px 14px; }
.hub-tab { font-size: 1rem; padding: 12px 22px; }
.hub-input { font-size: 0.95rem; padding: 11px 14px; }
.hub-save-btn { font-size: 0.95rem; padding: 11px 24px; }
.gcal-title { font-size: 1.1rem; }
.gcal-day { min-height: 100px; padding: 10px 8px; }
.gcal-day-label { font-size: 0.78rem; }
.gcal-day-num { font-size: 0.95rem; }
.gcal-task-chip { font-size: 0.78rem; padding: 3px 7px; }
.gcal-nav-btn { width: 40px; height: 40px; font-size: 1.2rem; }
.gcal-add-day { font-size: 0.78rem; }
}
@media (min-width: 1280px) {
main { max-width: 1000px; }
body { font-size: 1.12rem; }
}
/* ── Summary bar ── */
.day-summary {
background: var(--ink); color: var(--bg); border-radius: var(--radius);
padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.summary-stat { text-align: center; }
.summary-stat .val { font-family: 'Space Mono', monospace; font-size: 1.1rem; font-weight: 700; }
.summary-stat .lbl { font-size: 0.65rem; opacity: 0.45; margin-top: 1px; }
.summary-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.12); }
.progress-bar-wrap { flex: 1; }
.progress-bar-bg { height: 5px; background: rgba(255,255,255,0.12); border-radius: 5px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: #E8A838; border-radius: 5px; transition: width 0.4s ease; }
.progress-lbl { font-size: 0.62rem; opacity: 0.45; margin-top: 3px; }
/* ── Focus section ── */
.focus-section {
background: white; border-radius: var(--radius); box-shadow: var(--shadow);
overflow: hidden; border-left: 4px solid var(--focus);
}
.focus-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; background: var(--focus-light);
border-bottom: 1px solid rgba(232,69,60,0.1); cursor: pointer;
}
.focus-title-row { display: flex; align-items: center; gap: 7px; }
.focus-title { font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 700; color: var(--focus); }
.focus-count { background: var(--focus); color: white; font-size: 0.65rem; font-weight: 700; border-radius: 20px; padding: 2px 7px; }
.focus-add-btn {
background: none; border: 1.5px solid var(--focus); color: var(--focus);
border-radius: 20px; padding: 3px 10px; font-size: 0.72rem; font-weight: 500;
font-family: var(--font-ui); cursor: pointer; transition: all 0.15s;
}
.focus-add-btn:hover { background: var(--focus); color: white; }
.focus-empty { padding: 12px 14px; color: #C0BAB0; font-size: 0.78rem; font-style: italic; text-align: center; }
.focus-task {
display: flex; align-items: center; gap: 9px;
padding: 8px 14px; border-bottom: 1px solid rgba(0,0,0,0.04); background: white;
}
.focus-task:last-child { border-bottom: none; }
.focus-check {
width: 17px; height: 17px; border-radius: 4px; border: 2px solid var(--focus);
cursor: pointer; flex-shrink: 0; background: white;
display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.focus-check.checked { background: var(--focus); border-color: var(--focus); }
.focus-check.checked::after { content: '✓'; color: white; font-size: 0.6rem; font-weight: 700; }
.focus-task-text { flex: 1; font-size: 0.85rem; font-weight: 500; }
.focus-task-text.done { color: var(--done-color); text-decoration: line-through; font-weight: 400; }
.focus-slot-label { font-size: 0.65rem; color: #CCC; white-space: nowrap; }
.focus-pts-badge { font-size: 0.65rem; color: #E8A838; font-weight: 700; white-space: nowrap; font-family: 'Space Mono', monospace; }
.focus-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.focus-task:hover .focus-actions { opacity: 1; }
.focus-add-row { display: none; padding: 8px 12px 10px; gap: 7px; align-items: center; border-top: 1px solid rgba(0,0,0,0.05); background: white; }
.focus-add-row.visible { display: flex; }
/* ── Slot block ── */
.time-block {
background: white; border-radius: var(--radius); box-shadow: var(--shadow);
overflow: visible; border-left: 4px solid var(--slot-color);
transition: box-shadow 0.2s, transform 0.15s; position: relative;
}
.time-block.drag-over-block { box-shadow: 0 0 0 2.5px var(--slot-color), var(--shadow); transform: scale(1.003); }
.time-block.merge-candidate { box-shadow: 0 0 0 2.5px #4CAF50, 0 4px 20px rgba(76,175,80,0.2); transform: scale(1.005); }
.merge-indicator {
display: none; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
background: #4CAF50; color: white; font-size: 0.65rem; font-weight: 700;
padding: 3px 10px; border-radius: 20px; white-space: nowrap; z-index: 10;
pointer-events: none; animation: fadeUp 0.2s ease;
}
@keyframes fadeUp { from{opacity:0;transform:translateX(-50%) translateY(4px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.merge-candidate .merge-indicator { display: block; }
.merged-badge {
display: inline-flex; align-items: center; gap: 3px;
background: rgba(255,255,255,0.6); border: 1px solid var(--slot-color);
color: var(--slot-color); border-radius: 20px;
font-size: 0.62rem; font-weight: 600; padding: 1px 7px; margin-left: 5px; vertical-align: middle;
}
.unmerge-btn { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.68rem; padding: 0 0 0 2px; opacity: 0.6; }
.unmerge-btn:hover { opacity: 1; }
.now-badge {
display: inline-block; background: #FF5A5F; color: white;
font-size: 0.52rem; font-weight: 700; border-radius: 4px;
padding: 1px 4px; margin-left: 4px; vertical-align: middle;
letter-spacing: 0.5px; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.slot-header { display: flex; align-items: center; cursor: pointer; }
.slot-drag-handle {
background: none; border: none; cursor: grab; color: #DDD;
font-size: 0.82rem; padding: 8px 8px 8px 12px; flex-shrink: 0;
transition: color 0.12s; line-height: 1;
}
.slot-drag-handle:hover { color: var(--slot-color); }
.slot-time {
font-size: 0.82rem; font-weight: 700; color: var(--slot-color);
padding: 10px 10px 10px 6px; min-width: 76px;
border-right: 1px solid rgba(0,0,0,0.06);
background: var(--slot-bg); line-height: 1.3; flex-shrink: 0;
display: flex; flex-direction: column; gap: 1px;
}
.block-num { font-size: 0.88rem; font-weight: 700; color: var(--slot-color); white-space: nowrap; }
.block-sub { font-size: 0.58rem; font-weight: 400; opacity: 0.6; }
.slot-tasks-preview {
flex: 1; padding: 7px 8px; font-size: 0.78rem; color: #CCC; font-style: italic;
min-height: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
}
.slot-task-chip {
border-radius: 20px; padding: 1px 8px; font-size: 0.7rem; font-style: normal;
font-weight: 500; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
.chip-focus { background: var(--focus-light); color: var(--focus); border: 1px solid rgba(232,69,60,0.2); }
.chip-done { background: #e4e4e7; color: var(--done-color); text-decoration: line-through; }
.slot-add-btn { background: none; border: none; color: var(--slot-color); opacity: 0.4; font-size: 1.1rem; padding: 6px 8px; cursor: pointer; transition: opacity 0.15s; flex-shrink: 0; }
.slot-add-btn:hover { opacity: 1; }
.slot-collapse-btn { background: none; border: none; color: #CCC; font-size: 0.7rem; padding: 6px 10px 6px 4px; cursor: pointer; transition: color 0.12s, transform 0.2s; flex-shrink: 0; }
.slot-collapse-btn.open { transform: rotate(180deg); color: var(--slot-color); }
.slot-customize-btn { background: none; border: none; color: #CCC; font-size: 0.72rem; padding: 6px 4px; cursor: pointer; opacity: 0.5; flex-shrink: 0; transition: opacity 0.15s; }
.slot-customize-btn:hover { opacity: 1; color: var(--slot-color); }
/* ── Quick-action bar ── */
.action-bar {
display: flex; gap: 6px; padding: 0 14px 10px;
max-width: 700px; margin: 0 auto;
}
.action-bar-btn {
flex: 1; background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 7px 6px;
font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500;
color: var(--ink); cursor: pointer; display: flex; align-items: center;
justify-content: center; gap: 4px; transition: background 0.15s, border-color 0.15s;
white-space: nowrap;
}
.action-bar-btn:hover { background: var(--card2); border-color: var(--muted); }
.slot-expanded { border-top: 1px solid rgba(0,0,0,0.05); background: var(--slot-bg); }
/* ── Task item ── */
.task-item {
display: flex; align-items: flex-start; gap: 8px;
padding: 8px 12px; border-bottom: 1px solid rgba(0,0,0,0.04);
cursor: grab; transition: background 0.12s; user-select: none; background: var(--card);
}
.task-item:last-child { border-bottom: none; }
.task-item:hover { background: var(--card2); }
.task-item.dragging { opacity: 0.3; cursor: grabbing; }
.task-item.is-focus-task { border-left: 3px solid var(--focus); background: var(--focus-light); }
.task-item.is-focus-task:hover { background: var(--focus-light); }
.drag-handle { color: #CCC; font-size: 0.72rem; flex-shrink: 0; margin-top: 3px; }
.task-check {
width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--slot-color);
cursor: pointer; flex-shrink: 0; background: white; margin-top: 2px;
display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.task-check.checked { background: var(--slot-color); border-color: var(--slot-color); }
.task-check.checked::after { content: '✓'; color: white; font-size: 0.58rem; font-weight: 700; }
.task-check.fc { border-color: var(--focus) !important; }
.task-check.fc.checked { background: var(--focus) !important; border-color: var(--focus) !important; }
.task-body { flex: 1; min-width: 0; }
.task-row1 { display: flex; align-items: center; gap: 6px; }
.focus-star { color: var(--focus); font-size: 0.72rem; flex-shrink: 0; }
.task-text { font-size: 0.84rem; line-height: 1.3; word-break: break-word; flex: 1; }
.task-text.done { color: var(--done-color); text-decoration: line-through; }
.task-text.is-focus { font-weight: 500; }
.task-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.task-pts-badge { font-size: 0.62rem; font-weight: 700; color: #E8A838; font-family: 'Space Mono', monospace; }
.task-note-preview { font-size: 0.68rem; color: #AAA; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; cursor: pointer; }
.task-note-preview:hover { color: #888; }
.task-actions { display: flex; gap: 1px; opacity: 0; transition: opacity 0.12s; flex-shrink: 0; margin-top: 1px; }
.task-item:hover .task-actions { opacity: 1; }
.task-action-btn {
background: none; border: none; cursor: pointer; padding: 3px 4px;
border-radius: 5px; font-size: 0.72rem; color: #BBB; transition: background 0.12s, color 0.12s; line-height: 1;
}
.task-action-btn:hover { background: rgba(0,0,0,0.06); color: var(--ink); }
.task-action-btn.delete:hover { background: #FEE2E2; color: #DC2626; }
.task-action-btn.focus-on { color: var(--focus) !important; opacity: 1 !important; }
/* ── Add task row ── */
.add-task-row {
display: none; padding: 7px 12px 9px; gap: 6px; align-items: center;
border-top: 1px solid rgba(0,0,0,0.05); background: white; flex-wrap: wrap;
}
.add-task-row.visible { display: flex; }
.add-task-input {
flex: 1; min-width: 120px; border: 1.5px solid var(--input-color, #CCC);
border-radius: var(--radius-sm); padding: 6px 9px;
font-family: var(--font-ui); font-size: 0.82rem; outline: none; color: var(--ink);
}
.add-task-input:focus { box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }
.pts-select-wrap { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pts-select-wrap label { font-size: 0.68rem; color: #AAA; white-space: nowrap; }
.pts-preset-btn {
border: 1.5px solid #EEE; border-radius: 6px; background: none;
padding: 4px 7px; font-size: 0.7rem; cursor: pointer; font-family: var(--font-ui);
transition: all 0.12s; color: #888;
}
.pts-preset-btn.sel { border-color: #E8A838; color: #E8A838; background: rgba(232,168,56,0.12); font-weight: 600; }
.pts-custom-input {
width: 46px; border: 1.5px solid #EEE; border-radius: 6px;
padding: 4px 6px; font-size: 0.72rem; font-family: 'Space Mono', monospace;
text-align: center; outline: none;
}
.pts-custom-input:focus { border-color: #E8A838; }
.add-focus-toggle {
background: none; border: 1.5px solid #DDD; border-radius: var(--radius-sm);
padding: 5px 8px; font-size: 0.78rem; cursor: pointer; transition: all 0.15s; color: #CCC;
}
.add-focus-toggle.on { border-color: var(--focus); color: var(--focus); background: var(--focus-light); }
.save-task-btn {
background: var(--btn-color, #999); color: white; border: none;
border-radius: var(--radius-sm); padding: 6px 11px;
font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500;
cursor: pointer; transition: opacity 0.15s; white-space: nowrap;
}
.save-task-btn:hover { opacity: 0.88; }
.cancel-task-btn { background: none; border: none; color: #BBB; font-size: 0.9rem; cursor: pointer; padding: 4px; border-radius: 5px; }
.cancel-task-btn:hover { background: rgba(0,0,0,0.05); }
/* ── Modals ── */
.modal-overlay {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45);
z-index: 300; align-items: center; justify-content: center;
padding: 16px; backdrop-filter: blur(3px);
}
.modal-overlay.visible { display: flex; }
.modal {
background: white; border-radius: var(--radius); padding: 22px;
width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); animation: popIn 0.16s ease;
max-height: 90vh; overflow-y: auto;
}
.modal.wide { max-width: 560px; }
@media (min-width: 1024px) {
.modal.wide { max-width: 820px; padding: 30px; font-size: 1rem; }
#groupHubModal .modal.wide { max-width: 960px; max-height: 96vh; }
#groupHubModal h3 { font-size: 1.3rem; margin-bottom: 16px; }
#groupHubModal .hub-tab { font-size: 1rem; padding: 12px 22px; }
#groupHubModal .group-tab { font-size: 0.95rem; padding: 7px 20px; }
#groupHubModal .group-tab-bar { gap: 8px; margin-bottom: 14px; }
#groupHubModal .hub-input { font-size: 1rem; padding: 11px 14px; }
#groupHubModal .hub-save-btn { font-size: 1rem; padding: 11px 26px; }
#groupHubModal .shared-task-row .stask-text { font-size: 1rem; }
#groupHubModal .shared-task-row .stask-pts { font-size: 0.9rem; }
#groupHubModal .shared-task-row .stask-check { width: 26px; height: 26px; }
#groupHubModal .gcal-title { font-size: 1.1rem; }
#groupHubModal .gcal-day { min-height: 110px; padding: 10px 8px; }
#groupHubModal .gcal-day-label { font-size: 0.8rem; }
#groupHubModal .gcal-day-num { font-size: 1rem; }
#groupHubModal .gcal-task-chip { font-size: 0.78rem; padding: 3px 7px; }
#groupHubModal .gcal-nav-btn { width: 40px; height: 40px; font-size: 1.2rem; }
#groupHubModal .gcal-add-day { font-size: 0.8rem; }
}
@keyframes popIn { from{opacity:0;transform:scale(0.94)} to{opacity:1;transform:scale(1)} }
.modal h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.btn-cancel { background: none; border: 1.5px solid #DDD; border-radius: var(--radius-sm); padding: 7px 14px; font-family: var(--font-ui); cursor: pointer; color: #666; }
.btn-save { background: var(--ink); color: white; border: none; border-radius: var(--radius-sm); padding: 7px 16px; font-family: var(--font-ui); font-weight: 500; cursor: pointer; }
.btn-save:hover { opacity: 0.85; }
.btn-danger { background: #DC2626; color: white; border: none; border-radius: var(--radius-sm); padding: 7px 14px; font-family: var(--font-ui); cursor: pointer; font-size: 0.78rem; }
.field-label { font-size: 0.75rem; font-weight: 500; color: #888; margin-bottom: 5px; display: block; }
.field-input {
width: 100%; border: 1.5px solid #e4e4e7; border-radius: var(--radius-sm);
padding: 8px 10px; font-family: var(--font-ui); font-size: 0.86rem;
outline: none; color: var(--ink); margin-bottom: 12px;
}
.field-input:focus { border-color: #999; }
textarea.field-input { resize: vertical; min-height: 64px; }
/* color swatches */
.swatch-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.swatch {
width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
border: 2.5px solid transparent; transition: transform 0.12s, border-color 0.12s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.sel { border-color: var(--ink); transform: scale(1.1); }
.color-custom-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.color-custom-row input[type=color] { width: 32px; height: 32px; border: none; border-radius: 8px; cursor: pointer; padding: 0; background: none; }
/* font dropdown preview */
.font-select-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.font-preview-label { font-size: 1rem; color: #555; min-width: 120px; }
/* rewards */
.rewards-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1.5px solid #EEE; padding-bottom: 10px; flex-wrap: wrap; }
.rtab { background: none; border: none; font-family: var(--font-ui); font-size: 0.82rem; color: #AAA; cursor: pointer; padding: 4px 10px; border-radius: 20px; transition: all 0.15s; }
.rtab.active { background: var(--ink); color: white; }
.reward-period-filters { display: flex; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; }
.rpf { background: none; border: 1.5px solid #EEE; border-radius: 20px; padding: 3px 10px; font-size: 0.72rem; font-family: var(--font-ui); cursor: pointer; color: #AAA; transition: all 0.15s; }
.rpf.active { border-color: #E8A838; color: #E8A838; background: rgba(232,168,56,0.12); font-weight: 600; }
.reward-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px; border-radius: 10px; border: 1.5px solid #EEE; margin-bottom: 8px; transition: border-color 0.15s; }
.reward-item:hover { border-color: #DDD; }
.reward-icon { font-size: 1.4rem; width: 32px; text-align: center; flex-shrink: 0; padding-top: 2px; }
.reward-info { flex: 1; min-width: 0; }
.reward-name { font-size: 0.88rem; font-weight: 500; margin-bottom: 2px; }
.reward-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reward-cost { font-size: 0.7rem; color: #E8A838; font-family: 'Space Mono', monospace; font-weight: 700; }
.reward-period-badge { font-size: 0.62rem; font-weight: 600; border-radius: 20px; padding: 1px 7px; border: 1px solid; }
.rpb-daily { color: #4A8FA8; border-color: rgba(74,143,168,0.35); background: #DCF0F7; }
.rpb-weekly { color: #7B5EA7; border-color: rgba(123,94,167,0.35); background: #EDE8F7; }
.rpb-monthly { color: #E05C97; border-color: rgba(224,92,151,0.35); background: #FCE8F3; }
.rpb-yearly { color: #E76F51; border-color: rgba(231,111,81,0.35); background: #FEF0EB; }
.rpb-any { color: #888; border-color: #DDD; background: #F5F5F5; }
.reward-claimed { font-size: 0.65rem; color: #4CAF50; font-weight: 600; }
.reward-cooldown { font-size: 0.65rem; color: #AAA; font-style: italic; }
.reward-progress-wrap { margin-top: 5px; }
.reward-progress-bg { height: 3px; background: #e4e4e7; border-radius: 3px; overflow: hidden; }
.reward-progress-fill { height: 100%; background: #E8A838; border-radius: 3px; transition: width 0.4s; }
.reward-progress-lbl { font-size: 0.6rem; color: #CCC; margin-top: 2px; }
.reward-btns { display: flex; gap: 5px; flex-shrink: 0; padding-top: 2px; }
.reward-claim-btn { background: #E8A838; color: white; border: none; border-radius: 8px; padding: 4px 10px; font-size: 0.72rem; font-weight: 600; cursor: pointer; font-family: var(--font-ui); transition: opacity 0.15s; white-space: nowrap; }
.reward-claim-btn:hover { opacity: 0.85; }
.reward-claim-btn:disabled { background: #EEE; color: #AAA; cursor: default; opacity: 1; }
.reward-del-btn { background: none; border: 1px solid #EEE; border-radius: 8px; padding: 4px 7px; font-size: 0.72rem; cursor: pointer; color: #CCC; transition: all 0.15s; }
.reward-del-btn:hover { border-color: #DC2626; color: #DC2626; }
.new-reward-form { border: 1.5px dashed #DDD; border-radius: 10px; padding: 12px; margin-top: 10px; }
.new-reward-form h4 { font-size: 0.82rem; font-weight: 600; margin-bottom: 10px; color: #888; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.emoji-btn { font-size: 1.2rem; background: none; border: 1.5px solid #EEE; border-radius: 8px; padding: 3px 7px; cursor: pointer; transition: all 0.12s; }
.emoji-btn:hover, .emoji-btn.sel { border-color: #E8A838; background: rgba(232,168,56,0.12); }
.period-select { border: 1.5px solid #EEE; border-radius: 8px; padding: 5px 8px; font-size: 0.78rem; font-family: var(--font-ui); outline: none; color: var(--ink); cursor: pointer; background: white; }
/* pts history */
.pts-history-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #F5F5F5; font-size: 0.8rem; }
.pts-history-item:last-child { border-bottom: none; }
.pts-history-val { font-family: 'Space Mono', monospace; font-weight: 700; color: #E8A838; white-space: nowrap; min-width: 52px; }
.pts-history-val.neg { color: #DC2626; }
.pts-history-desc { flex: 1; color: #666; font-size: 0.78rem; }
.pts-history-time { font-size: 0.65rem; color: #CCC; white-space: nowrap; }
/* customize */
.customize-section { margin-bottom: 16px; }
.customize-section h4 { font-size: 0.75rem; font-weight: 600; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
/* toast */
.toast {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
background: var(--ink); color: white; font-size: 0.8rem; font-weight: 500;
padding: 8px 18px; border-radius: 20px; box-shadow: var(--shadow-lg);
opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 400; white-space: nowrap;
}
.toast.show { opacity: 1; }
.toast.green { background: #4CAF50; }
.toast.gold { background: #D4922A; }
[data-theme="dark"] .toast { background: var(--card); color: var(--ink); }
/* ── Weekly Review ── */
.week-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.week-nav-btn { background: none; border: 1.5px solid #EEE; border-radius: 20px; padding: 4px 12px; font-size: 0.8rem; cursor: pointer; font-family: var(--font-ui); transition: all 0.15s; color: #666; }
.week-nav-btn:hover { border-color: #CCC; color: var(--ink); }
.week-nav-label { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; }
.week-summary-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
.week-stat-card { background: #f4f4f5; border-radius: 10px; padding: 10px 12px; text-align: center; }
.week-stat-card .wval { font-family: 'Space Mono', monospace; font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.week-stat-card .wlbl { font-size: 0.62rem; color: #AAA; margin-top: 2px; }
.week-stat-card.gold .wval { color: #E8A838; }
.week-stat-card.green .wval { color: #4CAF50; }
.week-stat-card.red .wval { color: var(--focus); }
.week-day-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.week-day-row { display: flex; align-items: center; gap: 8px; }
.week-day-label { font-size: 0.72rem; font-weight: 600; color: #888; width: 28px; flex-shrink: 0; }
.week-day-bar-wrap { flex: 1; height: 22px; background: #e4e4e7; border-radius: 6px; overflow: hidden; position: relative; }
.week-day-bar { height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.week-day-bar.perfect { background: linear-gradient(90deg,#4CAF50,#81B29A); }
.week-day-bar.good { background: linear-gradient(90deg,#E8A838,#F2CC8F); }
.week-day-bar.low { background: linear-gradient(90deg,#E8453C,#F4845F); }
.week-day-bar.empty { background: #e4e4e7; width: 100% !important; opacity: 0.4; }
.week-day-pct { font-size: 0.68rem; color: #AAA; width: 32px; text-align: right; flex-shrink: 0; }
.week-day-pts { font-size: 0.65rem; color: #E8A838; font-family: 'Space Mono', monospace; width: 40px; text-align: right; flex-shrink: 0; }
.week-day-today .week-day-label { color: var(--ink); font-weight: 700; }
.week-section-title { font-size: 0.72rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.week-top-tasks { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.week-task-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #f4f4f5; border-radius: 8px; font-size: 0.82rem; }
.week-task-done { color: var(--done-color); text-decoration: line-through; }
.week-task-pts { font-size: 0.65rem; color: #E8A838; font-family: 'Space Mono', monospace; margin-left: auto; white-space: nowrap; }
.week-habit-row { display: flex; gap: 5px; margin-bottom: 14px; }
.week-habit-dot { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; flex-direction: column; gap: 1px; flex: 1; }
.week-habit-dot.active { background: #E8A838; color: white; }
.week-habit-dot.partial { background: #F2CC8F; color: #7a5c00; }
.week-habit-dot.inactive { background: #e4e4e7; color: #CCC; }
.week-insight { background: linear-gradient(135deg,#18181b,#27272a); color: white; border-radius: var(--radius); padding: 12px 14px; font-size: 0.82rem; line-height: 1.5; margin-bottom: 10px; }
.week-insight strong { color: #E8A838; }
.install-banner { display: none; background: var(--ink); color: white; padding: 10px 16px; text-align: center; font-size: 0.8rem; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.install-banner.visible { display: flex; }
.install-btn { background: #E8A838; color: var(--ink); border: none; border-radius: 20px; padding: 5px 14px; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: var(--font-ui); white-space: nowrap; }
.install-dismiss { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 1rem; padding: 0 4px; }
/* ── Visual block picker in customize ── */
.block-picker-btn {
display: flex; align-items: center; gap: 7px;
border: 2px solid var(--border,#EEE); border-radius: 10px;
padding: 7px 10px; cursor: pointer; background: none;
font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink);
transition: all 0.15s; text-align: left;
}
.block-picker-btn:hover { border-color: #BBB; background: var(--card2,#f4f4f5); }
.block-picker-btn.active { border-color: var(--ink); background: var(--card2,#f4f4f5); }
.block-picker-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.block-picker-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
/* ── Calendar sync ── */
.cal-provider-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-provider-btn {
flex: 1; min-width: 140px; border: 1.5px solid #EEE; border-radius: var(--radius);
padding: 12px 14px; background: white; cursor: pointer; transition: all 0.15s;
display: flex; align-items: center; gap: 10px; text-align: left;
}
.cal-provider-btn:hover { border-color: #DDD; box-shadow: var(--shadow); }
.cal-provider-btn.connected { border-color: #4CAF50; background: #F1FBF3; }
.cal-provider-logo { font-size: 1.5rem; flex-shrink: 0; }
.cal-provider-info { flex: 1; min-width: 0; }
.cal-provider-name { font-size: 0.85rem; font-weight: 600; }
.cal-provider-status { font-size: 0.68rem; color: #AAA; margin-top: 1px; }
.cal-provider-btn.connected .cal-provider-status { color: #4CAF50; }
.cal-section-title { font-size: 0.72rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; margin-top: 14px; }
.cal-drop-zone {
border: 2px dashed #DDD; border-radius: var(--radius); padding: 24px 16px;
text-align: center; cursor: pointer; transition: all 0.2s; background: #FAFAFA;
margin-bottom: 12px;
}
.cal-drop-zone:hover, .cal-drop-zone.drag-over { border-color: #4A8FA8; background: #DCF0F7; }
.cal-drop-zone-icon { font-size: 2rem; margin-bottom: 6px; }
.cal-drop-zone-label { font-size: 0.85rem; font-weight: 500; color: #555; }
.cal-drop-zone-sub { font-size: 0.72rem; color: #AAA; margin-top: 3px; }
.cal-event-list { max-height: 260px; overflow-y: auto; margin-bottom: 10px; }
.cal-event-item {
display: flex; align-items: center; gap: 9px;
padding: 8px 10px; border-radius: 8px; border: 1.5px solid #EEE;
margin-bottom: 6px; transition: border-color 0.12s; cursor: pointer;
}
.cal-event-item:hover { border-color: #CCC; }
.cal-event-item.selected { border-color: #4A8FA8; background: #DCF0F7; }
.cal-event-check {
width: 16px; height: 16px; border-radius: 4px; border: 2px solid #CCC;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
transition: all 0.12s;
}
.cal-event-item.selected .cal-event-check { background: #4A8FA8; border-color: #4A8FA8; }
.cal-event-item.selected .cal-event-check::after { content:'✓'; color:white; font-size:0.58rem; font-weight:700; }
.cal-event-info { flex: 1; min-width: 0; }
.cal-event-title { font-size: 0.84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event-time { font-size: 0.68rem; color: #AAA; margin-top: 1px; }
.cal-event-cal { font-size: 0.62rem; background: #e4e4e7; color: #888; border-radius: 20px; padding: 1px 7px; white-space: nowrap; }
.cal-import-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.6rem; font-weight: 600; color: #7B5EA7; background: #EDE8F7; border-radius: 20px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.oauth-setup-box {
background: #F8F8F8; border-radius: var(--radius); padding: 14px 16px;
margin-top: 10px; border: 1.5px solid #EEE;
}
.oauth-setup-box h4 { font-size: 0.82rem; font-weight: 600; margin-bottom: 8px; color: #555; }
.oauth-step { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; font-size: 0.78rem; color: #666; line-height: 1.4; }
.oauth-step-num { background: var(--ink); color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.oauth-input { width: 100%; border: 1.5px solid #e4e4e7; border-radius: var(--radius-sm); padding: 7px 10px; font-family: var(--font-ui); font-size: 0.82rem; outline: none; color: var(--ink); margin-top: 4px; }
.oauth-input:focus { border-color: #999; }
.oauth-connect-btn { background: var(--ink); color: white; border: none; border-radius: var(--radius-sm); padding: 8px 16px; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; cursor: pointer; margin-top: 10px; transition: opacity 0.15s; width: 100%; }
.oauth-connect-btn:hover { opacity: 0.85; }
.oauth-connect-btn.google { background: #4285F4; }
.oauth-connect-btn.microsoft { background: #0078D4; }
.recur-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 0.6rem; font-weight: 600; color: #4A8FA8;
background: #DCF0F7; border-radius: 20px; padding: 1px 6px;
vertical-align: middle; margin-left: 4px; white-space: nowrap;
}
.task-text .recur-badge { font-size: 0.58rem; }
.recur-modal-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px; border-radius: 10px; border: 1.5px solid #EEE;
margin-bottom: 8px;
}
.recur-modal-item:hover { border-color: #DDD; }
.recur-item-info { flex: 1; min-width: 0; }
.recur-item-name { font-size: 0.88rem; font-weight: 500; margin-bottom: 2px; }
.recur-item-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.recur-freq-badge {
font-size: 0.65rem; font-weight: 600; border-radius: 20px;
padding: 1px 7px; background: #DCF0F7; color: #4A8FA8;
}
.recur-block-badge { font-size: 0.65rem; color: #AAA; }
/* ── Streaks ── */
.streak-panel { }
.streak-card {
background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px;
color: white; display: flex; align-items: center; gap: 14px;
}
.streak-flame { font-size: 2.2rem; flex-shrink: 0; }
.streak-info { flex: 1; }
.streak-count { font-family: 'Space Mono', monospace; font-size: 2rem; font-weight: 700; color: #E8A838; line-height: 1; }
.streak-label { font-size: 0.72rem; opacity: 0.55; margin-top: 2px; }
.streak-best { font-size: 0.72rem; opacity: 0.45; margin-top: 4px; }
.milestone-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 10px; border: 1.5px solid #EEE;
margin-bottom: 7px; transition: border-color 0.15s;
}
.milestone-item.achieved { border-color: #E8A838; background: rgba(232,168,56,0.12); }
.milestone-icon { font-size: 1.3rem; width: 28px; text-align: center; flex-shrink: 0; }
.milestone-info { flex: 1; }
.milestone-name { font-size: 0.85rem; font-weight: 500; }
.milestone-sub { font-size: 0.68rem; color: #AAA; margin-top: 1px; }
.milestone-sub.achieved { color: #E8A838; font-weight: 600; }
.milestone-badge-done { font-size: 0.68rem; font-weight: 700; color: #4CAF50; background: #E8F5E9; border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
.milestone-badge-next { font-size: 0.68rem; color: #AAA; background: #F5F5F5; border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
.streak-progress-wrap { margin-top: 6px; }
.streak-progress-bg { height: 4px; background: #e4e4e7; border-radius: 4px; overflow: hidden; }
.streak-progress-fill { height: 100%; background: linear-gradient(90deg,#E8A838,#E05C97); border-radius: 4px; transition: width 0.5s ease; }
/* ── Cloud sync ── */
.sync-card {
background: white; border-radius: var(--radius); border: 1.5px solid #EEE;
padding: 14px 16px; margin-bottom: 10px;
}
.sync-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sync-icon { font-size: 1.3rem; }
.sync-title { font-size: 0.9rem; font-weight: 600; flex: 1; }
.sync-status-badge { font-size: 0.68rem; font-weight: 600; border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.sync-status-badge.connected { background: #E8F5E9; color: #2E7D32; }
.sync-status-badge.disconnected { background: #F5F5F5; color: #AAA; }
.sync-status-badge.syncing { background: #E3F2FD; color: #1565C0; }
.sync-status-badge.error { background: #FEF0EF; color: var(--focus); }
.sync-fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sync-last { font-size: 0.7rem; color: #AAA; margin-top: 4px; }
.sync-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sync-btn { border: 1.5px solid #DDD; border-radius: 8px; padding: 5px 12px; font-size: 0.75rem; font-family: var(--font-ui); cursor: pointer; background: none; color: #555; transition: all 0.15s; white-space: nowrap; }
.sync-btn:hover { border-color: #999; color: var(--ink,#18181b); }
.sync-btn.primary { background: var(--ink,#18181b); color: white; border-color: var(--ink,#18181b); }
.sync-btn.primary:hover { opacity: 0.85; }
.sync-btn.danger:hover { border-color: #DC2626; color: #DC2626; }
/* ── Dark mode toggle ── */
.dark-toggle {
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
border-radius: 20px; padding: 4px 10px; cursor: pointer;
font-size: 0.85rem; line-height: 1; transition: background 0.15s;
color: var(--bg);
}
.dark-toggle:hover { background: rgba(255,255,255,0.2); }
/* ── Swipe gestures ── */
.task-swipe-wrap {
position: relative; overflow: hidden;
border-bottom: 1px solid rgba(0,0,0,0.04);
}
.task-swipe-wrap:last-child { border-bottom: none; }
.swipe-action-left {
position: absolute; left: 0; top: 0; bottom: 0;
width: 80px; background: #4CAF50;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; color: white; opacity: 0; transition: opacity 0.15s;
}
.swipe-reveal-right {
position: absolute; right: 0; top: 0; bottom: 0;
display: flex; align-items: center;
background: var(--card2,#f4f4f5); opacity: 0;
transition: opacity 0.15s; gap: 0;
}
.swipe-reveal-btn {
height: 100%; padding: 0 14px;
border: none; cursor: pointer; font-size: 1rem;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.12s;
}
.swipe-reveal-btn.edit { background: #4A8FA8; color: white; }
.swipe-reveal-btn.delete-btn { background: #E8453C; color: white; }
.task-swipe-wrap .task-item {
position: relative; z-index: 1;
transition: transform 0.18s ease, background 0.12s;
border-bottom: none; margin: 0;
background: var(--card, white);
will-change: transform;
}
.task-swipe-wrap .task-item.swiping { transition: none; }
.task-swipe-wrap.swipe-complete .swipe-action-left { opacity: 1; }
.task-swipe-wrap.swipe-revealing .swipe-reveal-right { opacity: 1; }
.task-swipe-wrap.revealed .task-item { transform: translateX(-128px) !important; transition: transform 0.2s ease; }
.task-swipe-wrap.revealed .swipe-reveal-right { opacity: 1; }
/* ── Day navigation ── */
.day-nav-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px 0; max-width: 700px; margin: 0 auto;
}
.day-nav-btn {
background: none; border: 1.5px solid var(--border,#EEE);
border-radius: 20px; padding: 4px 12px; font-size: 0.75rem;
font-family: var(--font-ui); cursor: pointer; color: var(--ink);
transition: all 0.15s;
}
.day-nav-btn:hover { border-color: #AAA; }
.day-nav-btn:disabled { opacity: 0.3; cursor: default; }
.day-nav-label {
font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 700;
color: var(--ink); text-align: center;
}
.day-nav-label .day-sub { font-family: var(--font-ui); font-size: 0.65rem; color: var(--muted,#AAA); display: block; font-weight: 400; margin-top: 1px; }
.swipe-main-wrap { overflow: hidden; touch-action: pan-y; }
/* ── Quick-add panel ── */
.quick-add-section {
background: var(--card,white); border-radius: var(--radius);
box-shadow: var(--shadow); overflow: hidden;
}
.quick-add-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; background: var(--card2,#f4f4f5);
border-bottom: 1px solid var(--border,#EEE); cursor: pointer;
}
.quick-add-title { font-size: 0.82rem; font-weight: 600; color: var(--muted,#888); display: flex; align-items: center; gap: 6px; }
.quick-add-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
.quick-add-chip {
background: var(--card2,#f4f4f5); border: 1.5px solid var(--border,#EEE);
border-radius: 20px; padding: 5px 12px; font-size: 0.78rem;
cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 5px;
color: var(--ink); font-family: var(--font-ui);
}
.quick-add-chip:hover { border-color: #E8A838; background: rgba(232,168,56,0.12); }
.quick-add-chip .chip-pts { font-size: 0.62rem; color: #E8A838; font-family: 'Space Mono', monospace; }
.quick-add-empty { padding: 10px 14px; font-size: 0.78rem; color: var(--muted,#AAA); font-style: italic; }
/* ── Subtask progress badge (task list) ── */
.subtask-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--muted,#aaa);background:var(--card2,rgba(255,255,255,.06));border-radius:8px;padding:1px 6px;cursor:pointer;}
.subtask-badge.all-done{color:var(--success,#34d399);}
/* ── Inline subtask list inside task block ── */
.subtask-inline-list{display:flex;flex-direction:column;gap:3px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07);}
[data-theme="light"] .subtask-inline-list{border-top-color:rgba(0,0,0,.08);}
.subtask-inline-row{display:flex;align-items:center;gap:7px;}
.subtask-inline-check{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--muted,#aaa);cursor:pointer;flex-shrink:0;transition:all .12s;background:transparent;position:relative;}
.subtask-inline-check.checked{background:var(--accent,#E8A838);border-color:var(--accent,#E8A838);}
.subtask-inline-check.checked::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#1a1100;font-weight:900;line-height:14px;text-align:center;}
.subtask-inline-text{font-size:12px;color:var(--muted,#aaa);line-height:1.3;cursor:pointer;flex:1;}
.subtask-inline-text.done{text-decoration:line-through;opacity:.4;}
/* ── Subtask rows in edit modal ── */
.subtask-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.08));}
.subtask-row:last-child{border-bottom:none;}
.subtask-check{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--muted,#aaa);cursor:pointer;flex-shrink:0;transition:all .15s;background:transparent;}
.subtask-check.checked{background:var(--accent,#E8A838);border-color:var(--accent,#E8A838);}
.subtask-text{flex:1;font-size:13px;line-height:1.4;}
.subtask-text.done{text-decoration:line-through;opacity:.45;}
.subtask-del{background:none;border:none;color:var(--muted,#aaa);cursor:pointer;font-size:11px;padding:2px 6px;border-radius:4px;line-height:1;}
.subtask-del:hover{color:var(--danger,#f87171);background:rgba(248,113,113,.12);}
.subtask-empty{font-size:12px;color:var(--muted,#aaa);padding:4px 0;font-style:italic;}
.subtask-add-row{display:flex;gap:6px;margin-top:8px;}
.subtask-add-row .field-input{flex:1;}
.subtask-add-btn{background:var(--accent,#E8A838);color:#1a1100;border:none;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);}
.subtask-add-btn:hover{opacity:.85;}
.add-task-wrap { position: relative; flex: 1; min-width: 120px; }
.add-task-wrap .add-task-input { width: 100%; }
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .time-block,
[data-theme="dark"] .focus-section,
[data-theme="dark"] .modal,
[data-theme="dark"] .task-item,
[data-theme="dark"] .focus-task,
[data-theme="dark"] .focus-add-row,
[data-theme="dark"] .add-task-row,
[data-theme="dark"] .cal-provider-btn,
[data-theme="dark"] .reward-item,
[data-theme="dark"] .recur-modal-item,
[data-theme="dark"] .new-reward-form,
[data-theme="dark"] .oauth-setup-box { background: var(--card); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .slot-expanded { background: var(--card2); }
[data-theme="dark"] .task-item:hover { background: var(--card2); }
[data-theme="dark"] .task-item.is-focus-task { background: #1f1210; }
[data-theme="dark"] .task-item.is-focus-task:hover { background: #261510; }
[data-theme="dark"] .task-check { background: var(--card); }
[data-theme="dark"] .week-stat-card,
[data-theme="dark"] .week-task-item,
[data-theme="dark"] .cal-drop-zone { background: var(--card2); border-color: var(--border); }
[data-theme="dark"] .week-day-bar-wrap,
[data-theme="dark"] .streak-progress-bg,
[data-theme="dark"] .reward-progress-bg,
[data-theme="dark"] .progress-bar-bg { background: var(--border); }
[data-theme="dark"] .week-habit-dot.inactive { background: var(--border); color: var(--muted); }
[data-theme="dark"] .field-input,
[data-theme="dark"] .add-task-input,
[data-theme="dark"] .period-select,
[data-theme="dark"] .pts-custom-input,
[data-theme="dark"] .oauth-input { background: var(--card2); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .field-label,
[data-theme="dark"] .cal-section-title,
[data-theme="dark"] .week-section-title,
[data-theme="dark"] .customize-section h4 { color: var(--muted); }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .focus-header { background: #1f1210; }
[data-theme="dark"] .chip-done { background: var(--border); }
[data-theme="dark"] .cal-event-item { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .cal-event-item.selected { background: #142028; border-color: #4A8FA8; }
[data-theme="dark"] .rpb-any { background: var(--border); color: var(--muted); }
[data-theme="dark"] .milestone-badge-next { background: var(--border); color: var(--muted); }
[data-theme="dark"] .pts-history-item { border-color: var(--border); }
[data-theme="dark"] .pts-history-desc { color: var(--muted); }
[data-theme="dark"] .reward-del-btn,
[data-theme="dark"] .week-nav-btn,
[data-theme="dark"] .btn-cancel { border-color: var(--border); color: var(--ink); background: var(--card); }
[data-theme="dark"] .swatch { border-color: transparent; }
[data-theme="dark"] .swatch.sel { border-color: var(--ink); }
[data-theme="dark"] .install-banner { background: #18181b; }
[data-theme="dark"] .sync-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .sync-status-badge { background: var(--card2); }
[data-theme="dark"] header { background: var(--card); color: var(--ink); }
[data-theme="dark"] .hdr-btn { color: var(--ink); border-color: var(--border); background: rgba(255,255,255,0.06); }
[data-theme="dark"] .hdr-btn:hover { background: rgba(255,255,255,0.12); }
[data-theme="dark"] #topArea { background: var(--card); }
[data-theme="dark"] #navTabs { background: var(--card); border-bottom-color: var(--border); }
[data-theme="dark"] .nav-tab { color: rgba(250,250,250,0.55); border-color: var(--border); }
[data-theme="dark"] .nav-tab:hover:not(.active) { background: var(--card2); color: var(--ink); }
[data-theme="dark"] .menu-btn { color: var(--ink); }
[data-theme="dark"] .day-summary { background: var(--card2); color: var(--ink); }
[data-theme="dark"] .summary-divider { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .timer-fab { background: var(--card); color: var(--ink); }
/* ── Dark mode supplement — elements with hardcoded light colors ── */
[data-theme="dark"] .sync-btn { border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .sync-btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
[data-theme="dark"] .auth-btn.google { background: var(--card2); color: var(--ink); border-color: var(--border); }
[data-theme="dark"] .auth-error { background: rgba(232,69,60,0.12); }
[data-theme="dark"] .auth-success { background: rgba(76,175,80,0.12); color: #81C784; border-color: rgba(76,175,80,0.25); }
[data-theme="dark"] .auth-screen { background: var(--bg); }
[data-theme="dark"] .field-input { background: var(--card2); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .task-note-preview { color: var(--muted); }
[data-theme="dark"] .pts-select-wrap .pts-btn { border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .pts-select-wrap .pts-btn.sel { background: var(--ink); color: var(--bg); border-color: var(--ink); }
[data-theme="dark"] .rpb-any { background: var(--border); color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .rpf { border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .emoji-btn { border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .reward-claim-btn:disabled { background: var(--border); color: var(--muted); }
[data-theme="dark"] .new-reward-form { border-color: var(--border); }
[data-theme="dark"] .new-reward-form h4 { color: var(--muted); }
[data-theme="dark"] .hub-input { background: var(--card2); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .hub-tab { color: var(--muted); }
[data-theme="dark"] .hub-tab.active { color: var(--ink); border-bottom-color: #E8A838; }
[data-theme="dark"] .gcal-day { background: var(--card2); }
[data-theme="dark"] .gcal-nav-btn { background: var(--card2); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .gcal-task-chip { background: var(--card); color: var(--ink); }
[data-theme="dark"] .group-card { background: var(--card2); border-color: var(--border); }
[data-theme="dark"] .invite-code { background: var(--card); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .copy-code-btn { background: var(--card2); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .chore-row { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .chore-add-form input, [data-theme="dark"] .chore-add-form select { background: var(--card); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .shared-task-row { border-color: var(--border); }
[data-theme="dark"] .shared-task-row .stask-check { border-color: var(--border); background: var(--card); }
[data-theme="dark"] .pts-select-wrap button { border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .add-task-input { background: var(--card2); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .week-insight { background: linear-gradient(135deg,#18181b,#27272a); }
[data-theme="dark"] .delete-confirm-pop button { background: rgba(255,255,255,0.15); color: white; }
/* reward period badge backgrounds — pastel in light, muted in dark */
[data-theme="dark"] .rpb-daily { background: rgba(74,143,168,0.18); color: #7ec8e3; border-color: rgba(74,143,168,0.3); }
[data-theme="dark"] .rpb-weekly { background: rgba(123,94,167,0.18); color: #c4aff0; border-color: rgba(123,94,167,0.3); }
[data-theme="dark"] .rpb-monthly{ background: rgba(224,92,151,0.18); color: #f4a9d4; border-color: rgba(224,92,151,0.3); }
[data-theme="dark"] .rpb-yearly { background: rgba(231,111,81,0.18); color: #f5b49f; border-color: rgba(231,111,81,0.3); }
/* partial habit dot — dark olive text breaks on dark bg */
[data-theme="dark"] .week-habit-dot.partial { background: rgba(242,204,143,0.3); color: #f2cc8f; }
/* hover states that use near-white/near-black absolute values */
[data-theme="dark"] .task-action-btn.delete:hover { background: rgba(220,38,38,0.2); color: #f87171; }
[data-theme="dark"] .cancel-task-btn:hover { background: rgba(255,255,255,0.08); }
/* muted label too dark in dark mode */
[data-theme="dark"] .font-preview-label { color: var(--muted); }
/* ── Focus Timer ── */
.timer-fab {
position: fixed; bottom: 24px; right: 20px; z-index: 150;
width: 56px; height: 56px; border-radius: 50%;
background: var(--ink); color: white;
border: none; cursor: pointer; font-size: 1.4rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
display: flex; align-items: center; justify-content: center;
transition: transform 0.15s, box-shadow 0.15s;
}
.timer-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,0.3); }
.timer-fab.running { background: var(--focus); animation: timerPulse 2s infinite; }
@keyframes timerPulse { 0%,100%{box-shadow:0 4px 20px rgba(232,69,60,0.4)} 50%{box-shadow:0 4px 28px rgba(232,69,60,0.7)} }
.timer-modal {
position: fixed; bottom: 92px; right: 20px; z-index: 151;
background: var(--card,white); border-radius: 18px;
box-shadow: var(--shadow-lg); padding: 0;
width: 300px; overflow: hidden;
animation: timerSlideUp 0.2s ease;
display: none;
}
.timer-modal.open { display: block; }
@keyframes timerSlideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.timer-header {
background: var(--ink); color: white;
padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
}
.timer-title { font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 700; }
.timer-close-btn { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 1rem; padding: 2px 4px; }
.timer-close-btn:hover { color: white; }
.timer-body { padding: 18px 16px; }
.timer-task-select {
width: 100%; border: 1.5px solid var(--border,#EEE);
border-radius: var(--radius-sm); padding: 7px 10px;
font-family: var(--font-ui); font-size: 0.82rem;
outline: none; color: var(--ink); background: var(--card,white);
margin-bottom: 12px;
}
.timer-modes { display: flex; gap: 5px; margin-bottom: 14px; }
.timer-mode-btn {
flex: 1; border: 1.5px solid var(--border,#EEE);
border-radius: 8px; padding: 5px 4px; font-size: 0.72rem;
font-family: var(--font-ui); cursor: pointer; background: none;
color: var(--ink); transition: all 0.15s; text-align: center;
}
.timer-mode-btn.sel { border-color: var(--ink); background: var(--ink); color: white; }
.timer-display {
text-align: center; margin-bottom: 14px;
}
.timer-ring-wrap { position: relative; width: 120px; height: 120px; margin: 0 auto 8px; }
.timer-ring { transform: rotate(-90deg); }
.timer-ring-bg { fill: none; stroke: var(--border,#EEE); stroke-width: 6; }
.timer-ring-fill { fill: none; stroke: #E8A838; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.timer-ring-fill.running { stroke: var(--focus); }
.timer-time {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-family: 'Space Mono', monospace; font-size: 1.6rem; font-weight: 700;
color: var(--ink); line-height: 1;
}
.timer-time .timer-label { font-size: 0.6rem; color: var(--muted,#AAA); font-family: var(--font-ui); margin-top: 3px; }
.timer-controls { display: flex; gap: 8px; }
.timer-ctrl-btn {
flex: 1; padding: 9px; border-radius: 10px; border: none;
font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600;
cursor: pointer; transition: opacity 0.15s;
}
.timer-ctrl-btn.start { background: var(--ink); color: white; }
.timer-ctrl-btn.start.running { background: var(--focus); }
.timer-ctrl-btn.reset { background: var(--card2,#f4f4f5); color: var(--ink); }
.timer-ctrl-btn:hover { opacity: 0.85; }
.timer-sessions { font-size: 0.7rem; color: var(--muted,#AAA); text-align: center; margin-top: 8px; }
/* ── End-of-day summary ── */
.eod-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.7);
z-index: 500; display: flex; align-items: center; justify-content: center;
padding: 20px; backdrop-filter: blur(4px);
}
.eod-card {
background: var(--card,white); border-radius: 20px;
width: 100%; max-width: 400px; overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: popIn 0.3s ease;
}
.eod-hero {
background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
padding: 28px 24px; text-align: center; color: white;
}
.eod-hero-emoji { font-size: 3rem; margin-bottom: 8px; }
.eod-hero-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.eod-hero-sub { font-size: 0.8rem; opacity: 0.55; }
.eod-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border,#EEE); }
.eod-stat { background: var(--card,white); padding: 14px 10px; text-align: center; }
.eod-stat .val { font-family: 'Space Mono', monospace; font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.eod-stat .val.gold { color: #E8A838; }
.eod-stat .val.fire { color: var(--focus); }
.eod-stat .lbl { font-size: 0.62rem; color: var(--muted,#AAA); margin-top: 2px; }
.eod-body { padding: 18px 20px; }
.eod-message { font-size: 0.85rem; line-height: 1.5; color: var(--ink); margin-bottom: 16px; }
.eod-message strong { color: #E8A838; }
.eod-actions { display: flex; gap: 8px; }
.eod-dismiss { flex: 1; background: var(--ink); color: white; border: none; border-radius: 10px; padding: 11px; font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.eod-dismiss:hover { opacity: 0.85; }
.eod-share { background: none; border: 1.5px solid var(--border,#EEE); border-radius: 10px; padding: 11px 14px; font-family: var(--font-ui); font-size: 0.82rem; cursor: pointer; color: var(--ink); transition: all 0.15s; }
.eod-share:hover { border-color: #999; }
/* ── Dark mode additions ── */
[data-theme="dark"] .timer-modal { background: var(--card); }
[data-theme="dark"] .timer-task-select { background: var(--card2); color: var(--ink); border-color: var(--border); }
[data-theme="dark"] .timer-mode-btn { border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .timer-ctrl-btn.reset { background: var(--card2); }
[data-theme="dark"] .eod-card { background: var(--card); }
[data-theme="dark"] .eod-stat { background: var(--card); }
/* ── Dark mode: warm-white (rgba(232,168,56,0.12)) highlight states → translucent amber ── */
[data-theme="dark"] .pts-preset-btn.sel,
[data-theme="dark"] .rpf.active,
[data-theme="dark"] .emoji-btn.sel,
[data-theme="dark"] .emoji-btn:hover,
[data-theme="dark"] .quick-add-chip:hover,
[data-theme="dark"] .carry-task-item.selected,
[data-theme="dark"] .milestone-item.achieved,
[data-theme="dark"] .assign-chip.selected { background: rgba(232,168,56,.18); border-color: #E8A838; }
/* ── Dark mode: light border / muted text elements ── */
[data-theme="dark"] .reward-del-btn { border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .font-preview-label,
[data-theme="dark"] .cal-drop-zone-label,
[data-theme="dark"] .oauth-setup-box h4 { color: var(--muted); }
[data-theme="dark"] .pts-history-divider,
[data-theme="dark"] [style*="border-top:1px solid #EEE"],
[data-theme="dark"] [style*="border-top: 1px solid #EEE"] { border-color: var(--border) !important; }
/* ── Dark mode: error/warning inline boxes ── */
[data-theme="dark"] [style*="background:#FEF0EF"],
[data-theme="dark"] [style*="background: #FEF0EF"] { background: rgba(220,38,38,.12) !important; color: #f87171 !important; border-color: rgba(220,38,38,.3) !important; }
[data-theme="dark"] [style*="background:rgba(232,168,56,0.12)"],
[data-theme="dark"] [style*="background: rgba(232,168,56,0.12)"] { background: rgba(232,168,56,.12) !important; color: var(--ink) !important; border-color: rgba(232,168,56,.3) !important; }
/* ── Dark mode: muted text with hardcoded grays ── */
[data-theme="dark"] [style*="color:#CCC"],
[data-theme="dark"] [style*="color: #CCC"],
[data-theme="dark"] [style*="color:#AAA"],
[data-theme="dark"] [style*="color: #AAA"],
[data-theme="dark"] [style*="color:#888"],
[data-theme="dark"] [style*="color: #888"],
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"] { color: var(--muted) !important; }
/* ── Settings drawer ── */
.menu-btn {
background: none; border: none; color: var(--bg);
font-size: 1.3rem; cursor: pointer; padding: 4px 6px;
line-height: 1; transition: opacity 0.15s;
}
.menu-btn:hover { opacity: 0.7; }
.drawer-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
z-index: 400; opacity: 0; pointer-events: none;
transition: opacity 0.25s; backdrop-filter: blur(2px);
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(320px, 85vw); background: var(--card,white);
z-index: 401; transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.32,0,0.1,1);
display: flex; flex-direction: column; overflow: hidden;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
background: var(--ink); color: white;
padding: 18px 18px 14px;
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.drawer-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; }
.drawer-close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.2rem; cursor: pointer; padding: 2px 4px; }
.drawer-close:hover { color: white; }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px 0; }
.drawer-section { padding: 6px 0; border-bottom: 1px solid var(--border,#EEE); }
.drawer-section:last-child { border-bottom: none; }
.drawer-section-label { font-size: 0.65rem; font-weight: 700; color: var(--muted,#AAA); text-transform: uppercase; letter-spacing: 0.6px; padding: 6px 18px 2px; }
.drawer-item {
display: flex; align-items: center; gap: 12px;
padding: 11px 18px; cursor: pointer;
transition: background 0.12s; color: var(--ink);
border: none; background: none; width: 100%; text-align: left;
font-family: var(--font-ui); font-size: 0.88rem;
}
.drawer-item:hover { background: var(--card2,#f4f4f5); }
.drawer-item-icon { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }
.drawer-item-text { flex: 1; }
.drawer-item-badge { font-size: 0.65rem; background: var(--focus); color: white; border-radius: 20px; padding: 1px 7px; font-weight: 600; }
.drawer-item-arrow { color: var(--muted,#CCC); font-size: 0.75rem; }
.drawer-toggle-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; }
.drawer-toggle-label { flex: 1; font-size: 0.88rem; color: var(--ink); }
.toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--border,#CCC); border-radius: 22px; cursor: pointer; transition: background 0.2s; }
.toggle-slider::before { content:''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: #E8A838; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
/* ── Notification settings modal ── */
.notif-perm-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); margin-bottom:4px; }
.notif-perm-info { flex:1; }
.notif-perm-label { font-size:0.88rem; font-weight:600; color:var(--ink); }
.notif-perm-status { font-size:0.72rem; margin-top:2px; color:var(--muted); }
.notif-perm-status.granted { color:#22c55e; }
.notif-perm-status.denied { color:var(--focus); }
.notif-enable-btn { padding:7px 14px; border-radius:8px; border:none; background:var(--accent,#E8A838); color:#1a1a1a; font-family:var(--font-ui); font-size:0.8rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.notif-enable-btn:disabled { opacity:0.5; cursor:default; }
.notif-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); }
.notif-row:last-of-type { border-bottom:none; }
.notif-row-info { flex:1; min-width:0; }
.notif-row-label { font-size:0.88rem; color:var(--ink); }
.notif-row-sub { font-size:0.72rem; color:var(--muted); margin-top:2px; }
.notif-time-input { border:1.5px solid var(--border); border-radius:8px; padding:5px 8px; font-family:var(--font-ui); font-size:0.78rem; background:var(--card2); color:var(--ink); width:80px; }
.notif-time-input:disabled { opacity:0.4; }
.notif-interval-select { border:1.5px solid var(--border); border-radius:8px; padding:5px 8px; font-family:var(--font-ui); font-size:0.78rem; background:var(--card2); color:var(--ink); }
.notif-interval-select:disabled { opacity:0.4; }
/* ── Habit tracker ── */
.habit-grid-section { background: var(--card,white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.habit-grid-title { font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.habit-grid-sub { font-size: 0.72rem; color: var(--muted,#AAA); margin-bottom: 12px; }
.habit-grid { display: flex; gap: 3px; flex-wrap: wrap; }
.habit-cell {
width: calc((100% - 27px * 3) / 28); aspect-ratio: 1;
border-radius: 3px; cursor: pointer; transition: transform 0.1s;
min-width: 10px;
}
.habit-cell:hover { transform: scale(1.2); }
.habit-cell.level-0 { background: var(--border,#EEE); }
.habit-cell.level-1 { background: #F2CC8F; }
.habit-cell.level-2 { background: #E8A838; }
.habit-cell.level-3 { background: #E8453C; }
.habit-cell.today { box-shadow: 0 0 0 2px var(--ink); }
.habit-legend { display: flex; align-items: center; gap: 5px; margin-top: 8px; justify-content: flex-end; font-size: 0.65rem; color: var(--muted,#AAA); }
.habit-legend-cell { width: 10px; height: 10px; border-radius: 2px; }
.habit-tooltip { position: fixed; background: var(--ink); color: white; font-size: 0.7rem; padding: 4px 8px; border-radius: 6px; pointer-events: none; z-index: 200; white-space: nowrap; opacity: 0; transition: opacity 0.15s; }
/* ── Analytics dashboard ── */
.analytics-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.atab { background: none; border: 1.5px solid var(--border,#EEE); border-radius: 20px; padding: 4px 12px; font-size: 0.78rem; font-family: var(--font-ui); cursor: pointer; color: var(--muted,#AAA); transition: all 0.15s; }
.atab.active { background: var(--ink); color: white; border-color: var(--ink); }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.analytics-card { background: var(--card2,#f4f4f5); border-radius: 10px; padding: 12px 14px; }
.analytics-card .av { font-family: 'Space Mono', monospace; font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.analytics-card .av.gold { color: #E8A838; }
.analytics-card .av.green { color: #4CAF50; }
.analytics-card .al { font-size: 0.65rem; color: var(--muted,#AAA); margin-top: 2px; }
.analytics-chart-wrap { margin-bottom: 14px; }
.analytics-chart-title { font-size: 0.72rem; font-weight: 600; color: var(--muted,#AAA); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 80px; }
.bar-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bar-chart-bar { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.4s ease; min-height: 2px; }
.bar-chart-label { font-size: 0.58rem; color: var(--muted,#AAA); white-space: nowrap; }
.bar-chart-val { font-size: 0.6rem; color: var(--muted,#AAA); }
.top-tasks-list { display: flex; flex-direction: column; gap: 5px; }
.top-task-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.top-task-bar-wrap { flex: 1; height: 6px; background: var(--border,#EEE); border-radius: 3px; overflow: hidden; }
.top-task-bar { height: 100%; border-radius: 3px; background: #E8A838; }
.top-task-name { font-size: 0.78rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.top-task-count { font-size: 0.68rem; color: var(--muted,#AAA); white-space: nowrap; }
.productivity-hours { display: flex; gap: 2px; align-items: flex-end; margin-bottom: 4px; }
.ph-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ph-bar { width: 100%; border-radius: 2px 2px 0 0; background: #4A8FA8; opacity: 0.3; min-height: 2px; transition: height 0.4s ease; }
.ph-bar.peak { opacity: 1; background: #E8A838; }
.ph-label { font-size: 0.5rem; color: var(--muted,#AAA); }
/* ── Undo toast ── */
.undo-toast {
position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
background: #333; color: white; font-size: 0.82rem;
padding: 10px 16px; border-radius: 20px;
box-shadow: var(--shadow-lg); z-index: 450;
display: flex; align-items: center; gap: 10px;
opacity: 0; transition: opacity 0.25s; pointer-events: none;
white-space: nowrap;
}
.undo-toast.show { opacity: 1; pointer-events: all; }
.undo-btn { background: #E8A838; border: none; color: white; border-radius: 12px; padding: 3px 10px; font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: var(--font-ui); }
[data-theme="dark"] .drawer { background: var(--card); }
[data-theme="dark"] .analytics-card { background: var(--card2); }
[data-theme="dark"] .habit-cell.level-0 { background: var(--border); }
[data-theme="dark"] .undo-toast { background: #444; }
[data-theme="dark"] .drawer-item:hover { background: var(--card2); }
/* ── Auth ── */
.auth-screen {
position: fixed; inset: 0; z-index: 600;
background: var(--ink); display: none;
flex-direction: column; align-items: center; justify-content: center;
padding: 24px;
}
.auth-screen.visible { display: flex; }
.auth-logo {
font-family: 'Playfair Display', serif; font-size: 2.2rem;
font-weight: 700; color: white; margin-bottom: 6px; text-align: center;
}
.auth-logo span { color: #E8A838; }
.auth-tagline { font-size: 0.82rem; color: rgba(255,255,255,0.45); margin-bottom: 32px; text-align: center; }
.auth-card {
background: white; border-radius: 18px; padding: 24px;
width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
[data-theme="dark"] .auth-card { background: var(--card,#18181b); }
.auth-tabs { display: flex; gap: 4px; background: var(--card2,#f4f4f5); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
[data-theme="dark"] .auth-tabs { background: var(--card2); }
.auth-tab { flex: 1; border: none; background: none; border-radius: 8px; padding: 8px; font-family: var(--font-ui); font-size: 0.82rem; cursor: pointer; color: var(--muted,#888); transition: all 0.15s; font-weight: 500; }
.auth-tab.active { background: white; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
[data-theme="dark"] .auth-tab.active { background: var(--card); color: var(--ink); }
.auth-field { margin-bottom: 12px; }
.auth-label { font-size: 0.72rem; font-weight: 600; color: var(--muted,#888); margin-bottom: 5px; display: block; }
.auth-input {
width: 100%; border: 1.5px solid var(--border,#EEE);
border-radius: 10px; padding: 10px 12px;
font-family: var(--font-ui); font-size: 0.88rem;
outline: none; color: var(--ink); background: var(--card,white);
transition: border-color 0.15s;
}
.auth-input:focus { border-color: #E8A838; }
.auth-btn {
width: 100%; padding: 12px; border-radius: 10px; border: none;
font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600;
cursor: pointer; transition: opacity 0.15s; margin-top: 4px;
}
.auth-btn:hover { opacity: 0.88; }
.auth-btn.primary { background: var(--accent); color: #1a1a1a; }
.auth-btn.google { background: white; color: #444; border: 1.5px solid var(--border,#EEE); display: flex; align-items: center; justify-content: center; gap: 8px; }
.auth-btn.apple { background: #000; color: white; display: flex; align-items: center; justify-content: center; gap: 8px; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.auth-divider-line { flex: 1; height: 1px; background: var(--border,#EEE); }
.auth-divider-text { font-size: 0.72rem; color: var(--muted,#AAA); }
.auth-error { background: #FEF0EF; border: 1px solid rgba(232,69,60,0.3); border-radius: 8px; padding: 8px 12px; font-size: 0.78rem; color: var(--focus); margin-bottom: 10px; display: none; }
.auth-error.visible { display: block; }
.auth-success { background: #E8F5E9; border: 1px solid rgba(76,175,80,0.3); border-radius: 8px; padding: 8px 12px; font-size: 0.78rem; color: #2E7D32; margin-bottom: 10px; display: none; }
.auth-success.visible { display: block; }
.auth-loading { opacity: 0.6; pointer-events: none; }
.auth-footer { margin-top: 16px; text-align: center; font-size: 0.72rem; color: var(--muted,#AAA); line-height: 1.5; }
/* user pill in header */
.user-pill {
display: flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px; padding: 4px 10px; cursor: pointer;
transition: background 0.15s; color: var(--bg);
}
.user-pill:hover { background: rgba(255,255,255,0.18); }
.user-avatar {
width: 20px; height: 20px; border-radius: 50%;
background: #E8A838; color: var(--ink);
font-size: 0.65rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.user-email { font-size: 0.68rem; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* setup guide in auth */
.setup-guide { background: var(--card2,#f4f4f5); border-radius: 10px; padding: 14px; margin-top: 16px; font-size: 0.78rem; }
.setup-guide summary { font-weight: 600; cursor: pointer; color: var(--ink); margin-bottom: 0; }
.setup-guide[open] summary { margin-bottom: 10px; }
/* ── Carry Forward ── */
.carry-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.6);
z-index: 600; display: flex; align-items: center; justify-content: center;
padding: 20px; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease;
}
.carry-card {
background: var(--card,white); border-radius: 18px;
width: 100%; max-width: 420px; max-height: 85vh;
overflow: hidden; display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideUp 0.25s ease;
}
.carry-header {
background: var(--ink); color: white; padding: 18px 20px;
display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.carry-title { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; }
.carry-close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.1rem; cursor: pointer; }
.carry-close:hover { color: white; }
.carry-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.carry-intro { font-size: 0.82rem; color: var(--muted,#888); margin-bottom: 12px; line-height: 1.4; }
.carry-select-all { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; border-bottom: 1px solid var(--border,#EEE); margin-bottom: 8px; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.carry-task-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px; border-radius: 10px; border: 1.5px solid var(--border,#EEE);
margin-bottom: 6px; cursor: pointer; transition: all 0.12s;
}
.carry-task-item:hover { border-color: #CCC; }
.carry-task-item.selected { border-color: #E8A838; background: rgba(232,168,56,0.12); }
.carry-task-check {
width: 18px; height: 18px; border-radius: 5px;
border: 2px solid var(--border,#CCC); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: all 0.12s; background: var(--card,white);
}
.carry-task-item.selected .carry-task-check { background: #E8A838; border-color: #E8A838; }
.carry-task-item.selected .carry-task-check::after { content: '✓'; color: white; font-size: 0.65rem; font-weight: 700; }
.carry-task-text { flex: 1; font-size: 0.85rem; line-height: 1.3; }
.carry-task-pts { font-size: 0.65rem; color: #E8A838; font-family: 'Space Mono', monospace; white-space: nowrap; }
.carry-task-block { font-size: 0.65rem; color: var(--muted,#AAA); white-space: nowrap; }
.carry-footer { padding: 12px 16px; border-top: 1px solid var(--border,#EEE); display: flex; gap: 8px; flex-shrink: 0; background: var(--card,white); }
.carry-btn { flex: 1; padding: 10px; border-radius: 10px; border: none; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.carry-btn.primary { background: var(--ink); color: white; }
.carry-btn.secondary { background: var(--card2,#f4f4f5); color: var(--ink); border: 1.5px solid var(--border,#EEE); }
.carry-btn:hover { opacity: 0.85; }
.carry-empty { text-align: center; padding: 24px; color: var(--muted,#AAA); font-size: 0.82rem; }
[data-theme="dark"] .carry-card { background: var(--card); }
[data-theme="dark"] .carry-footer { background: var(--card); }
[data-theme="dark"] .carry-task-item.selected { background: #2a2408; }
/* ── Schedule future task ── */
.schedule-modal .field-group { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.schedule-day-btn {
flex: 1; min-width: 52px; border: 1.5px solid var(--border,#EEE);
border-radius: 8px; padding: 7px 4px; font-size: 0.72rem;
font-family: var(--font-ui); cursor: pointer; background: none;
color: var(--ink); transition: all 0.12s; text-align: center;
}
.schedule-day-btn:hover { border-color: #999; }
.schedule-day-btn.sel { border-color: #4A8FA8; background: #DCF0F7; color: #4A8FA8; font-weight: 600; }
.schedule-day-btn.today { border-color: #E8A838; }
.schedule-tabs { display: flex; gap: 4px; background: var(--card2,#f4f4f5); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.schedule-tab { flex: 1; border: none; background: none; border-radius: 8px; padding: 7px; font-family: var(--font-ui); font-size: 0.8rem; cursor: pointer; color: var(--muted,#888); transition: all 0.15s; }
.schedule-tab.active { background: var(--card,white); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.1); font-weight: 500; }
[data-theme="dark"] .schedule-tab.active { background: var(--card2); }
.scheduled-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 0.6rem; font-weight: 600; color: #4A8FA8;
background: #DCF0F7; border-radius: 20px; padding: 1px 6px;
margin-left: 4px; vertical-align: middle; white-space: nowrap;
}
.scheduled-tasks-section { background: var(--card,white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.scheduled-tasks-header { padding: 10px 14px; background: var(--card2,#f4f4f5); border-bottom: 1px solid var(--border,#EEE); display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.scheduled-tasks-title { font-size: 0.82rem; font-weight: 600; color: var(--muted,#888); display: flex; align-items: center; gap: 6px; }
.scheduled-task-row { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-bottom: 1px solid var(--border,#EEE); font-size: 0.83rem; }
.scheduled-task-row:last-child { border-bottom: none; }
.scheduled-task-date { font-size: 0.68rem; color: #4A8FA8; font-weight: 600; white-space: nowrap; min-width: 50px; }
.scheduled-task-name { flex: 1; color: var(--ink); }
.scheduled-task-del { background: none; border: none; color: var(--muted,#CCC); cursor: pointer; font-size: 0.85rem; padding: 2px 4px; border-radius: 4px; }
.scheduled-task-del:hover { color: #DC2626; background: #FEE2E2; }
/* ── 2-step inline delete confirm ── */
.delete-confirm-pop {
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
background: #DC2626; color: white; border-radius: 8px;
padding: 6px 10px; font-size: 0.75rem; font-weight: 600;
display: flex; align-items: center; gap: 6px; z-index: 10;
box-shadow: 0 2px 10px rgba(220,38,38,0.35); white-space: nowrap;
animation: popIn 0.15s ease;
}
.delete-confirm-pop button { background: white; color: #DC2626; border: none; border-radius: 5px; padding: 3px 8px; font-size: 0.72rem; font-weight: 700; cursor: pointer; font-family: var(--font-ui); }
.delete-confirm-pop .cancel-x { background: rgba(255,255,255,0.2); color: white; margin-left: 2px; }
.task-item { position: relative; }
@media (max-width: 480px) {
.slot-time { min-width: 66px; font-size: 0.82rem; }
.pts-select-wrap { flex-wrap: wrap; }
.modal { padding: 16px; }
.week-summary-cards { grid-template-columns: repeat(2,1fr); }
.analytics-grid { grid-template-columns: repeat(2,1fr); }
/* ── Mobile header: keep only logo, points, menu ── */
.header-right .date-tag { display: none; }
.header-center .hdr-btn { display: none; } /* hide Now button on small screens */
.header-center { flex: 0 0 auto; } /* stop center stretching */
.points-pill .pts-label { display: none; } /* smaller pill */
.user-pill .user-email { display: none; } /* avatar only */
.logo { font-size: 1.1rem; }
/* ── Day nav ── */
.day-nav-bar { padding: 6px 10px 0; }
.day-nav-label { font-size: 0.82rem; }
.day-nav-btn { padding: 4px 8px; font-size: 0.7rem; }
/* ── Summary bar ── */
.day-summary { gap: 6px; padding: 10px 12px; }
.summary-stat .val { font-size: 0.95rem; }
.summary-stat .lbl { font-size: 0.58rem; }
.summary-divider { height: 22px; }
/* ── Habit grid ── */
.habit-cell { border-radius: 2px; }
/* ── Add task row ── */
.add-task-row { gap: 4px; }
.pts-select-wrap label { display: none; }
/* ── Timer FAB ── */
.timer-fab { width: 48px; height: 48px; font-size: 1.2rem; bottom: 16px; right: 14px; }
.timer-modal { width: calc(100vw - 28px); right: 14px; }
/* ── Auth screen ── */
.auth-card { padding: 18px; }
.auth-logo { font-size: 1.8rem; }
/* ── Drawer ── */
.drawer { width: 100vw; }
/* ── Modals ── */
.modal.wide { max-width: 100%; }
.eod-stats { grid-template-columns: repeat(3,1fr); }
}
/* ════════════════════════════════════════════
GROUPS & SHARED TASKS STYLES
════════════════════════════════════════════ */
/* Member avatar bubble */
.member-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: #E8A838; color: var(--ink);
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.72rem; font-weight: 700;
border: 2px solid var(--card); flex-shrink: 0;
}
.member-avatar-sm { width: 22px; height: 22px; font-size: 0.62rem; }
.member-stack { display: flex; }
.member-stack .member-avatar { margin-left: -6px; }
.member-stack .member-avatar:first-child { margin-left: 0; }
/* Group card in groups modal */
.group-card {
background: var(--card2); border-radius: var(--radius-sm);
padding: 12px 14px; margin-bottom: 10px;
border: 1px solid var(--border);
}
.group-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.group-card-name { font-weight: 600; font-size: 0.9rem; }
.group-card-meta { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.invite-code-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.invite-code { font-family: 'Space Mono', monospace; font-size: 0.82rem; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; letter-spacing: 2px; flex: 1; text-align: center; }
.copy-code-btn { background: var(--ink); color: var(--bg); border: none; border-radius: 6px; padding: 5px 12px; font-size: 0.72rem; cursor: pointer; white-space: nowrap; }
.copy-code-btn:hover { opacity: 0.85; }
/* Chore roster on main page */
.chore-roster {
margin: 10px 0 6px;
border-top: 1px solid var(--border);
padding-top: 10px;
}
.chore-roster-title {
font-size: 0.72rem; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.chore-roster-child {
display: flex; align-items: flex-start; gap: 10px;
padding: 7px 0; border-bottom: 1px solid var(--border);
}
.chore-roster-child:last-child { border-bottom: none; }
.chore-roster-avatar {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 0.75rem; font-weight: 700;
background: var(--card2); color: var(--muted);
}
.chore-roster-avatar.has-done { background: #4CAF5022; color: #4CAF50; }
.chore-roster-avatar.all-done { background: #4CAF50; color: #fff; }
.chore-roster-name { font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.chore-roster-items { display: flex; flex-wrap: wrap; gap: 5px; }
.chore-roster-pill {
display: flex; align-items: center; gap: 4px;
font-size: 0.72rem; border-radius: 20px; padding: 2px 9px;
border: 1px solid var(--border); background: var(--card2);
cursor: pointer; transition: background 0.15s;
}
.chore-roster-pill.done {
background: #4CAF5018; border-color: #4CAF5044; color: var(--muted);
text-decoration: line-through; opacity: 0.7;
}
.chore-roster-pill .pill-check {
width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--border);
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
font-size: 0.55rem;
}
.chore-roster-pill.done .pill-check { background: #4CAF50; border-color: #4CAF50; color: #fff; }
/* Chore panel */
.chore-panel { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.chore-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: var(--radius-sm);
background: var(--card); margin-bottom: 6px;
border: 1px solid var(--border);
}
.chore-check {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid var(--border); background: none;
cursor: pointer; flex-shrink: 0; display: flex;
align-items: center; justify-content: center; font-size: 0.75rem;
transition: background 0.15s;
}
.chore-check.done { background: #4CAF50; border-color: #4CAF50; color: #fff; }
.chore-info { flex: 1; min-width: 0; }
.chore-title { font-size: 0.82rem; font-weight: 600; }
.chore-meta { font-size: 0.7rem; color: var(--muted); margin-top: 1px; }
.chore-pts { font-size: 0.72rem; background: #E8A838; color: var(--ink); border-radius: 10px; padding: 1px 7px; font-weight: 700; white-space: nowrap; }
.chore-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 2px 4px; }
.chore-del:hover { color: #E8565E; }
.chore-add-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.chore-add-form input, .chore-add-form select {
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 10px; font-family: var(--font-ui); font-size: 0.82rem;
background: var(--card); color: var(--ink); width: 100%; box-sizing: border-box;
}
.chore-add-row { display: flex; gap: 6px; }
.chore-add-row input, .chore-add-row select { flex: 1; }
/* Shared task row */
.shared-task-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; background: var(--card);
border-radius: var(--radius-sm); margin-bottom: 6px;
border: 1px solid var(--border); transition: opacity 0.2s;
}
.shared-task-row.done-shared { opacity: 0.5; }
.shared-task-row .stask-check {
width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border);
display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0; transition: all 0.15s;
}
.shared-task-row .stask-check.checked { background: #4CAF50; border-color: #4CAF50; color: white; font-size: 0.65rem; }
.shared-task-row .stask-text { flex: 1; font-size: 0.85rem; }
.shared-task-row .stask-text.done-text { text-decoration: line-through; color: var(--muted); }
.shared-task-row .stask-pts { font-family: 'Space Mono', monospace; font-size: 0.72rem; color: #E8A838; white-space: nowrap; }
.shared-task-row .stask-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 2px 4px; }
.shared-task-row .stask-del:hover { color: var(--focus); }
.stask-assign-btn { background: none; border: 1px dashed var(--border); border-radius: 50%; width: 22px; height: 22px; font-size: 0.65rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.stask-assign-btn:hover { border-color: #E8A838; color: #E8A838; }
.task-assignee-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--muted); cursor: pointer; background: var(--card2); border-radius: 10px; padding: 1px 6px 1px 2px; border: 1px solid var(--border); }
.task-assignee-badge:hover { border-color: #E8A838; }
.assign-popover {
position: fixed; background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
padding: 6px; z-index: 600; min-width: 140px;
}
.assign-popover-item {
display: flex; align-items: center; gap: 8px; padding: 6px 10px;
border-radius: 6px; cursor: pointer; font-size: 0.8rem;
}
.assign-popover-item:hover { background: var(--card2); }
.assign-popover-item.active { background: var(--card2); font-weight: 600; }
/* Group section on main page */
.group-section {
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); overflow: hidden;
border-top: 3px solid #E8A838;
}
.group-section-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px; cursor: pointer;
}
.group-section-title { font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.group-section-body { padding: 0 14px 14px; }
.group-tab-bar { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px; }
.group-tab { background: var(--card2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 14px; font-size: 0.75rem; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.group-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.add-shared-row { display: flex; gap: 8px; margin-top: 10px; }
.add-shared-input { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font-ui); font-size: 0.83rem; background: var(--card2); color: var(--ink); }
.add-shared-input:focus { outline: none; border-color: #E8A838; }
.add-shared-btn { background: var(--ink); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.add-shared-btn:hover { opacity: 0.85; }
/* Group calendar grid */
.gcal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gcal-nav-btn { background: var(--card2); border: 1px solid var(--border); border-radius: 6px; width: 32px; height: 32px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gcal-title { font-size: 0.88rem; font-weight: 600; }
.gcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.gcal-day { background: var(--card2); border-radius: 6px; padding: 6px 4px; min-height: 70px; }
.gcal-day-label { font-size: 0.62rem; font-weight: 700; text-align: center; margin-bottom: 4px; color: var(--muted); text-transform: uppercase; }
.gcal-day-num { font-size: 0.78rem; font-weight: 600; text-align: center; margin-bottom: 4px; }
.gcal-day.today-cal .gcal-day-num { color: var(--focus); }
.gcal-task-chip { font-size: 0.6rem; background: var(--card); border-radius: 3px; padding: 2px 4px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 2px solid #E8A838; cursor: pointer; }
.gcal-task-chip.done-chip { opacity: 0.45; border-left-color: var(--muted); }
.gcal-add-day { font-size: 0.65rem; color: var(--muted); text-align: center; margin-top: 4px; cursor: pointer; }
.gcal-add-day:hover { color: var(--ink); }
/* Assign panel in add-shared modal */
.assign-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.assign-chip { background: var(--card2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.assign-chip.selected { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* ── Group Hub ── */
.hub-tab {
background: none; border: none; padding: 8px 14px; font-family: var(--font-ui);
font-size: 0.78rem; font-weight: 500; cursor: pointer; color: var(--muted);
border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s;
white-space: nowrap;
}
.hub-tab.active { color: var(--ink); border-bottom-color: #E8A838; font-weight: 600; }
.hub-tab:hover { color: var(--ink); }
/* Notes */
.note-card {
background: var(--card2); border-radius: var(--radius-sm); padding: 12px;
margin-bottom: 10px; border: 1px solid var(--border); position: relative;
}
.note-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.note-card-title { font-size: 0.82rem; font-weight: 600; }
.note-card-meta { font-size: 0.65rem; color: var(--muted); }
.note-card-body { font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; }
.note-del-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.8rem; padding: 0 4px; flex-shrink: 0; }
.note-del-btn:hover { color: var(--focus); }
.hub-add-area { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.hub-input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font-ui); font-size: 0.83rem; background: var(--card2); color: var(--ink); resize: vertical; }
.hub-input:focus { outline: none; border-color: #E8A838; }
.hub-save-btn { background: var(--ink); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: 8px 18px; font-family: var(--font-ui); font-size: 0.8rem; cursor: pointer; align-self: flex-end; }
.hub-save-btn:hover { opacity: 0.85; }
/* Grocery */
.grocery-item {
display: flex; align-items: center; gap: 10px; padding: 9px 12px;
background: var(--card2); border-radius: var(--radius-sm); margin-bottom: 6px;
border: 1px solid var(--border);
}
.grocery-check { width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; font-size: 0.65rem; }
.grocery-check.checked { background: #4CAF50; border-color: #4CAF50; color: white; }
.grocery-text { flex: 1; font-size: 0.85rem; }
.grocery-text.bought { text-decoration: line-through; color: var(--muted); }
.grocery-qty { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.grocery-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 2px 4px; }
.grocery-del:hover { color: var(--focus); }
.grocery-add-row { display: flex; gap: 6px; margin-top: 10px; }
.grocery-category { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 0 4px; }
/* Meal Plan */
/* ════════════════════════════════════════════
PHASE 1 — COMPANION + NUDGE SYSTEM
════════════════════════════════════════════ */
/* Companion art placeholder */
.companion-art-placeholder {
display:flex;align-items:center;justify-content:center;border-radius:50%;
background:rgba(255,255,255,0.06);border:2px dashed rgba(255,255,255,0.18);
font-size:2.8rem;position:relative;overflow:hidden;flex-shrink:0;
}
.companion-art-placeholder.small{width:42px;height:42px;font-size:1.5rem;}
.companion-art-placeholder.medium{width:80px;height:80px;font-size:2.5rem;}
.companion-art-placeholder.large{width:110px;height:110px;font-size:3.8rem;}
/* Companion pill in header */
.companion-pill{
display:flex;align-items:center;gap:5px;
background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.16);
border-radius:20px;padding:4px 11px;cursor:pointer;transition:background 0.15s;
}
.companion-pill:hover{background:rgba(255,255,255,0.16);}
.cp-icon{font-size:1rem;line-height:1;}
.cp-bal{font-family:'Space Mono',monospace;font-size:0.9rem;font-weight:700;color:#E8A838;}
.cp-currency{font-size:0.62rem;opacity:0.55;}
/* ── Check-in Overlay ── */
.checkin-overlay{
display:none;position:fixed;inset:0;background:var(--ink);z-index:500;
flex-direction:column;align-items:center;justify-content:center;padding:24px;
}
.checkin-overlay.visible{display:flex;}
.checkin-card{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:22px;}
.checkin-companion-art{
width:100%;max-width:340px;height:200px;border-radius:16px;
background:rgba(255,255,255,0.04);
display:flex;align-items:center;justify-content:center;font-size:3.4rem;
overflow:hidden;
}
.checkin-greeting{
color:rgba(255,255,255,0.88);font-family:'Playfair Display',serif;
font-size:1.2rem;text-align:center;line-height:1.4;
}
.checkin-date{font-size:0.68rem;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:1px;}
.checkin-question{color:rgba(255,255,255,0.55);font-size:0.82rem;text-align:center;}
.energy-picker{display:flex;gap:10px;width:100%;}
.energy-btn{
flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
padding:14px 6px;border-radius:12px;border:2px solid rgba(255,255,255,0.1);
background:rgba(255,255,255,0.04);cursor:pointer;transition:all 0.18s;
color:rgba(255,255,255,0.65);font-family:var(--font-ui);
}
.energy-btn:hover{border-color:rgba(255,255,255,0.28);background:rgba(255,255,255,0.09);}
.energy-btn.sel{border-color:#E8A838;background:rgba(232,168,56,0.14);color:#E8A838;}
.energy-btn .e-icon{font-size:1.55rem;}
.energy-btn .e-label{font-size:0.75rem;font-weight:600;}
.energy-btn .e-desc{font-size:0.6rem;opacity:0.6;text-align:center;line-height:1.3;}
.checkin-go-btn{
width:100%;padding:13px;border-radius:12px;background:#E8A838;color:var(--ink);
border:none;font-family:var(--font-ui);font-size:0.9rem;font-weight:600;
cursor:pointer;transition:opacity 0.15s;
}
.checkin-go-btn:hover{opacity:0.86;}
.checkin-go-btn:disabled{opacity:0.32;cursor:default;}
.hard-day-btn{
background:none;border:1px solid rgba(255,255,255,0.12);
color:rgba(255,255,255,0.35);border-radius:8px;padding:7px 18px;
font-family:var(--font-ui);font-size:0.72rem;cursor:pointer;transition:all 0.15s;
}
.hard-day-btn:hover{border-color:rgba(255,120,120,0.4);color:rgba(255,140,140,0.65);}
.hard-day-btn.active{border-color:rgba(255,100,100,0.55);color:rgba(255,150,150,0.85);background:rgba(255,100,100,0.07);}
/* ── Today / Surfaced Tasks ── */
.nudge-today-panel{display:none;}
.nudge-today-panel.visible{display:block;}
.capacity-bar{
background:var(--ink);color:var(--bg);border-radius:var(--radius);
padding:13px 16px;display:flex;align-items:center;gap:12px;
}
.capacity-companion-icon{font-size:1.6rem;flex-shrink:0;}
.capacity-info{flex:1;min-width:0;}
.capacity-copy{font-size:0.86rem;line-height:1.35;margin-bottom:4px;}
.capacity-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.energy-badge{
font-size:0.62rem;font-weight:700;border-radius:20px;padding:2px 8px;
text-transform:uppercase;letter-spacing:0.4px;
}
.e-fog{background:rgba(100,120,160,0.25);color:#8AAAE0;}
.e-ok{background:rgba(232,168,56,0.2);color:#E8A838;}
.e-on{background:rgba(80,180,80,0.2);color:#60C050;}
.e-hard{background:rgba(255,100,100,0.15);color:#FF9090;}
.hard-day-header-btn{
background:none;border:1px solid rgba(255,255,255,0.13);
color:rgba(255,255,255,0.35);border-radius:6px;padding:4px 10px;
font-size:0.64rem;cursor:pointer;transition:all 0.15s;white-space:nowrap;
flex-shrink:0;font-family:var(--font-ui);
}
.hard-day-header-btn:hover{border-color:rgba(255,150,150,0.4);color:rgba(255,160,160,0.65);}
.hard-day-header-btn.active{border-color:rgba(255,100,100,0.55);color:rgba(255,150,150,0.85);background:rgba(255,100,100,0.07);}
.surfaced-task-list{display:flex;flex-direction:column;gap:8px;}
.surfaced-task-card{
background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
overflow:hidden;border-left:4px solid var(--stc-color,#E8A838);
transition:box-shadow 0.2s;
}
.surfaced-task-card:hover{box-shadow:var(--shadow-lg);}
.stc-header{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;}
.stc-check{
width:20px;height:20px;border-radius:50%;
border:2px solid var(--stc-color,#E8A838);cursor:pointer;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
transition:all 0.15s;background:var(--card);
}
.stc-check.done{background:var(--stc-color,#E8A838);}
.stc-check.done::after{content:'✓';color:white;font-size:0.58rem;font-weight:700;}
.stc-body{flex:1;min-width:0;}
.stc-title{font-size:0.88rem;font-weight:500;line-height:1.3;}
.stc-title.done{text-decoration:line-through;color:var(--muted);}
.stc-meta{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap;}
.stc-energy-tag{
font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;
padding:1px 6px;border-radius:4px;
}
.ste-low{background:rgba(80,180,80,0.15);color:#60C050;}
.ste-medium{background:rgba(232,168,56,0.18);color:#E8A838;}
.ste-high{background:rgba(232,69,60,0.15);color:var(--focus);}
.stc-time-est{font-size:0.65rem;color:var(--muted);}
.stc-focus-btn{
background:var(--ink);color:var(--bg);border:none;border-radius:8px;
padding:5px 11px;font-size:0.72rem;font-weight:500;cursor:pointer;
transition:opacity 0.15s;flex-shrink:0;font-family:var(--font-ui);white-space:nowrap;
}
.stc-focus-btn:hover{opacity:0.76;}
.stc-focus-btn:disabled{opacity:0.28;cursor:default;}
.stc-expanded-row{
border-top:1px solid var(--border);padding:8px 14px;
display:none;gap:8px;align-items:center;
}
.surfaced-task-card.stc-open .stc-expanded-row{display:flex;}
.stc-escape-btn{
background:none;border:1px solid var(--border);border-radius:6px;
padding:3px 9px;font-size:0.68rem;color:var(--muted);cursor:pointer;
transition:all 0.12s;font-family:var(--font-ui);
}
.stc-escape-btn:hover{border-color:var(--muted);color:var(--ink);}
/* Backlog add form */
.backlog-add-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 14px;}
.backlog-add-form{display:flex;flex-direction:column;gap:8px;}
.energy-tag-row{display:flex;gap:6px;}
.energy-tag-btn{
flex:1;padding:5px 0;border-radius:6px;border:1.5px solid var(--border);
background:none;font-size:0.72rem;font-weight:500;cursor:pointer;
transition:all 0.12s;font-family:var(--font-ui);color:var(--muted);text-align:center;
}
.energy-tag-btn.etb-low.sel{border-color:#60C050;color:#60C050;background:rgba(80,180,80,0.09);}
.energy-tag-btn.etb-medium.sel{border-color:#E8A838;color:#E8A838;background:rgba(232,168,56,0.09);}
.energy-tag-btn.etb-high.sel{border-color:var(--focus);color:var(--focus);background:rgba(232,69,60,0.09);}
.backlog-empty{text-align:center;color:var(--muted);font-size:0.82rem;padding:24px 0;}
/* ── Focus Mode Overlay ── */
.focus-mode-overlay{
display:none;position:fixed;inset:0;background:#0B0A09;z-index:600;
flex-direction:column;align-items:stretch;
}
.focus-mode-overlay.visible{display:flex;}
.fmo-header{
display:flex;align-items:center;justify-content:space-between;
padding:14px 20px;border-bottom:1px solid rgba(255,255,255,0.06);
}
.fmo-back{
background:none;border:none;color:rgba(255,255,255,0.38);font-size:0.8rem;
cursor:pointer;padding:4px 8px;border-radius:6px;transition:color 0.12s;
font-family:var(--font-ui);
}
.fmo-back:hover{color:rgba(255,255,255,0.65);}
.fmo-timer{font-family:'Space Mono',monospace;font-size:1.35rem;font-weight:700;color:rgba(255,255,255,0.6);}
.fmo-body{
flex:1;max-width:560px;width:100%;margin:0 auto;
padding:28px 20px;display:flex;flex-direction:column;gap:22px;overflow-y:auto;
}
.fmo-task-title{
font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:700;
color:rgba(255,255,255,0.9);line-height:1.3;text-align:center;
}
.fmo-companion-note{font-size:0.78rem;color:rgba(255,255,255,0.3);text-align:center;font-style:italic;}
.fmo-steps-wrap{
background:rgba(255,255,255,0.04);border-radius:14px;padding:16px;
display:flex;flex-direction:column;gap:0;
}
.fmo-steps-label{
font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
color:rgba(255,255,255,0.28);margin-bottom:10px;
}
.fmo-step-item{
display:flex;align-items:flex-start;gap:10px;padding:8px 0;
border-bottom:1px solid rgba(255,255,255,0.04);transition:opacity 0.2s;
}
.fmo-step-item:last-child{border-bottom:none;}
.fmo-step-item.step-done{opacity:0.32;}
.fmo-step-check{
width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,0.18);
flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all 0.15s;margin-top:1px;
}
.fmo-step-check.done{background:#E8A838;border-color:#E8A838;}
.fmo-step-check.done::after{content:'✓';color:#18181b;font-size:0.58rem;font-weight:700;}
.fmo-step-num{font-size:0.6rem;color:rgba(255,255,255,0.2);flex-shrink:0;margin-top:3px;font-family:'Space Mono',monospace;}
.fmo-step-text{flex:1;font-size:0.88rem;color:rgba(255,255,255,0.78);line-height:1.35;padding-top:1px;}
.fmo-steps-loading{display:flex;align-items:center;gap:8px;padding:8px 0;color:rgba(255,255,255,0.32);font-size:0.8rem;}
.fmo-spin{width:15px;height:15px;border:2px solid rgba(255,255,255,0.1);border-top-color:#E8A838;border-radius:50%;animation:fmoSpin 0.75s linear infinite;flex-shrink:0;}
@keyframes fmoSpin{to{transform:rotate(360deg);}}
.fmo-footer{
padding:16px 20px;border-top:1px solid rgba(255,255,255,0.06);
display:flex;flex-direction:column;gap:10px;
}
.fmo-done-btn{
width:100%;padding:14px;border-radius:12px;background:#E8A838;color:#18181b;
border:none;font-family:var(--font-ui);font-size:0.95rem;font-weight:700;
cursor:pointer;transition:opacity 0.15s;
}
.fmo-done-btn:hover{opacity:0.86;}
.fmo-escape-row{display:flex;gap:8px;justify-content:center;}
.fmo-escape-btn{
background:none;border:1px solid rgba(255,255,255,0.1);
color:rgba(255,255,255,0.32);border-radius:8px;padding:6px 14px;
font-size:0.72rem;cursor:pointer;transition:all 0.15s;font-family:var(--font-ui);
}
.fmo-escape-btn:hover{border-color:rgba(255,255,255,0.24);color:rgba(255,255,255,0.56);}
/* ── Win Screen Overlay ── */
.win-overlay{
display:none;position:fixed;inset:0;background:var(--ink);z-index:700;
flex-direction:column;align-items:center;justify-content:center;padding:24px;
}
.win-overlay.visible{display:flex;}
.win-card{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
.win-companion-art{
width:100%;max-width:340px;height:210px;border-radius:16px;
background:rgba(255,255,255,0.04);
display:flex;align-items:center;justify-content:center;font-size:3.8rem;
overflow:hidden;
animation:winPop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes winPop{from{transform:scale(0.35);opacity:0;}to{transform:scale(1);opacity:1;}}
.win-title{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:rgba(255,255,255,0.9);line-height:1.25;}
.win-copy{font-size:0.84rem;color:rgba(255,255,255,0.42);line-height:1.5;}
.win-currency-row{
display:flex;align-items:center;gap:8px;
background:rgba(232,168,56,0.11);border:1px solid rgba(232,168,56,0.22);
border-radius:12px;padding:10px 22px;
}
.win-currency-icon{font-size:1.4rem;}
.win-currency-earned{font-family:'Space Mono',monospace;font-size:1.1rem;font-weight:700;color:#E8A838;}
.win-currency-label{font-size:0.68rem;color:rgba(255,255,255,0.38);}
.win-streak{font-size:0.8rem;color:rgba(255,255,255,0.38);}
.win-time-prompt{
width:100%;background:rgba(255,255,255,0.05);border-radius:12px;padding:14px;
display:flex;flex-direction:column;gap:8px;
}
.win-time-prompt p{font-size:0.76rem;color:rgba(255,255,255,0.45);}
.win-time-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.win-time-btn{
background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);
color:rgba(255,255,255,0.55);border-radius:8px;padding:5px 12px;
font-size:0.7rem;cursor:pointer;transition:all 0.12s;font-family:var(--font-ui);
}
.win-time-btn:hover{background:rgba(255,255,255,0.13);color:rgba(255,255,255,0.82);}
.win-time-skip{background:none;border:none;color:rgba(255,255,255,0.22);font-size:0.68rem;cursor:pointer;font-family:var(--font-ui);}
.win-continue-btn{
width:100%;padding:12px;border-radius:12px;background:rgba(255,255,255,0.09);
color:rgba(255,255,255,0.65);border:none;font-family:var(--font-ui);
font-size:0.88rem;font-weight:500;cursor:pointer;transition:background 0.15s;
}
.win-continue-btn:hover{background:rgba(255,255,255,0.15);}
/* ── Capture Panel ── */
.capture-panel{display:none;}
.capture-panel.visible{display:block;}
.capture-input-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;}
.capture-textarea{
width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);
padding:10px 12px;font-family:var(--font-ui);font-size:0.9rem;resize:none;
outline:none;min-height:88px;color:var(--ink);background:var(--bg);line-height:1.45;
}
.capture-textarea:focus{border-color:var(--muted);}
.capture-textarea::placeholder{color:var(--muted);}
.capture-submit-btn{
margin-top:8px;width:100%;padding:10px;background:var(--ink);color:var(--bg);
border:none;border-radius:var(--radius-sm);font-family:var(--font-ui);
font-size:0.84rem;font-weight:500;cursor:pointer;transition:opacity 0.15s;
}
.capture-submit-btn:hover{opacity:0.82;}
.capture-section-hdr{
font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
color:var(--muted);margin-bottom:8px;
}
.capture-item{
background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);
padding:10px 12px;margin-bottom:6px;display:flex;align-items:center;gap:10px;
}
.cat-badge{
font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
padding:2px 7px;border-radius:4px;flex-shrink:0;
}
.cat-mine{background:rgba(80,180,80,0.15);color:#60C050;}
.cat-family{background:rgba(100,150,220,0.15);color:#6496DC;}
.cat-someday{background:rgba(200,150,50,0.15);color:#C89632;}
.capture-item-text{flex:1;font-size:0.84rem;line-height:1.3;}
.capture-item-actions{display:flex;gap:4px;opacity:0;transition:opacity 0.12s;}
.capture-item:hover .capture-item-actions{opacity:1;}
.ci-promote-btn{
background:none;border:1px solid var(--border);border-radius:5px;
padding:3px 8px;font-size:0.66rem;cursor:pointer;color:var(--muted);
transition:all 0.12s;font-family:var(--font-ui);
}
.ci-promote-btn:hover{border-color:#E8A838;color:#E8A838;}
.ci-delete-btn{
background:none;border:none;cursor:pointer;color:var(--muted);
font-size:0.8rem;padding:3px 5px;border-radius:4px;transition:color 0.12s;
}
.ci-delete-btn:hover{color:var(--focus);}
.capture-empty{text-align:center;color:var(--muted);font-size:0.82rem;padding:20px 0;}
/* ── Companion Onboarding ── */
.companion-picker-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0;
}
@media(max-width:340px){.companion-picker-grid{grid-template-columns:repeat(2,1fr);}}
.cpick-btn{
display:flex;flex-direction:column;align-items:center;gap:4px;
padding:10px 6px;border-radius:10px;border:2px solid transparent;
background:var(--card2);cursor:pointer;transition:all 0.15s;
}
.cpick-btn:hover{border-color:var(--muted);}
.cpick-btn.sel{border-color:#E8A838;background:rgba(232,168,56,0.07);}
.cpick-art{width:80px;height:72px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden;}
.cpick-name{font-size:0.68rem;font-weight:600;color:var(--ink);}
.cpick-currency{font-size:0.56rem;color:var(--muted);}
.user-type-list{display:flex;flex-direction:column;gap:7px;margin:8px 0;}
.utype-btn{
display:flex;align-items:center;gap:10px;padding:10px 12px;
border-radius:10px;border:2px solid transparent;background:var(--card2);
cursor:pointer;transition:all 0.15s;text-align:left;width:100%;
}
.utype-btn:hover{border-color:var(--muted);}
.utype-btn.sel{border-color:#E8A838;background:rgba(232,168,56,0.07);}
.utype-icon{font-size:1.25rem;flex-shrink:0;}
.utype-name{font-size:0.82rem;font-weight:600;color:var(--ink);}
.utype-desc{font-size:0.66rem;color:var(--muted);line-height:1.3;}
.task-cap-preview{
background:var(--card2);border-radius:8px;padding:10px 12px;
font-size:0.75rem;color:var(--muted);line-height:1.65;
}
.tcp-row{display:flex;justify-content:space-between;}
.tcp-val{font-family:'Space Mono',monospace;font-weight:700;color:var(--ink);}
.ai-key-note{
font-size:0.7rem;color:var(--muted);line-height:1.5;padding:8px 10px;
background:var(--card2);border-radius:8px;border-left:3px solid #E8A838;margin-bottom:8px;
}
.no-checkin-banner{
background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
padding:20px;text-align:center;color:var(--muted);font-size:0.84rem;
}
.no-checkin-banner button{
margin-top:10px;padding:8px 20px;background:var(--ink);color:var(--bg);
border:none;border-radius:8px;cursor:pointer;font-family:var(--font-ui);font-size:0.82rem;
}
/* ════════════════════════════════════════════
PHASE 2 — DEN, SHOP, AFFECT, NOTES, TIERS
════════════════════════════════════════════ */
/* ── Tier badge ── */
.tier-badge{
display:inline-flex;align-items:center;gap:4px;
font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
padding:2px 7px;border-radius:4px;
}
.tier-free {background:rgba(150,150,150,0.15);color:#999;}
.tier-couples {background:rgba(100,160,220,0.18);color:#6AA0DC;}
.tier-family {background:rgba(80,180,100,0.18);color:#50B464;}
/* ── Affect check-in (shown after energy check-in) ── */
.affect-overlay{
display:none;position:fixed;inset:0;background:var(--ink);z-index:510;
flex-direction:column;align-items:center;justify-content:center;padding:24px;
}
.affect-overlay.visible{display:flex;}
.affect-card{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:20px;}
.affect-note{font-size:0.72rem;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:1px;}
.affect-question{font-family:'Playfair Display',serif;font-size:1.15rem;color:rgba(255,255,255,0.88);text-align:center;line-height:1.4;}
.affect-options{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;}
.affect-btn{
display:flex;flex-direction:column;align-items:center;gap:5px;
padding:12px 10px;border-radius:12px;border:2px solid rgba(255,255,255,0.1);
background:rgba(255,255,255,0.04);cursor:pointer;transition:all 0.18s;
color:rgba(255,255,255,0.65);font-family:var(--font-ui);min-width:70px;
}
.affect-btn:hover{border-color:rgba(255,255,255,0.28);background:rgba(255,255,255,0.09);}
.affect-btn.sel{border-color:#E8A838;background:rgba(232,168,56,0.14);color:#E8A838;}
.affect-btn .af-icon{font-size:1.4rem;}
.affect-btn .af-label{font-size:0.7rem;font-weight:600;}
.affect-skip-btn{
background:none;border:none;color:rgba(255,255,255,0.25);
font-size:0.72rem;cursor:pointer;font-family:var(--font-ui);
transition:color 0.15s;
}
.affect-skip-btn:hover{color:rgba(255,255,255,0.45);}
.affect-submit-btn{
width:100%;padding:12px;border-radius:12px;background:#E8A838;color:var(--ink);
border:none;font-family:var(--font-ui);font-size:0.88rem;font-weight:600;
cursor:pointer;transition:opacity 0.15s;
}
.affect-submit-btn:hover{opacity:0.86;}
.affect-submit-btn:disabled{opacity:0.32;cursor:default;}
/* ── Session Notes ── */
.session-note-card{
background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
padding:13px 14px;
}
.session-note-header{
display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;
}
.session-note-label{font-size:0.72rem;font-weight:600;color:var(--muted);}
.session-note-toggle{display:flex;align-items:center;gap:6px;font-size:0.68rem;color:var(--muted);cursor:pointer;}
.session-note-toggle input{cursor:pointer;}
.session-note-textarea{
width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);
padding:8px 10px;font-family:var(--font-ui);font-size:0.84rem;resize:none;
outline:none;min-height:64px;color:var(--ink);background:var(--bg);line-height:1.4;
}
.session-note-textarea:focus{border-color:var(--muted);}
.session-note-count{font-size:0.65rem;color:var(--muted);text-align:right;margin-top:3px;}
.session-note-save-btn{
margin-top:6px;padding:6px 14px;background:var(--ink);color:var(--bg);
border:none;border-radius:6px;font-size:0.78rem;cursor:pointer;
font-family:var(--font-ui);transition:opacity 0.15s;
}
.session-note-save-btn:hover{opacity:0.82;}
.session-note-history{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.session-note-entry{
background:var(--card2);border-radius:8px;padding:9px 11px;
font-size:0.8rem;line-height:1.4;position:relative;
}
.session-note-meta{font-size:0.62rem;color:var(--muted);margin-top:4px;display:flex;gap:8px;}
.sn-coach-tag{font-size:0.58rem;background:rgba(100,150,220,0.15);color:#6AA0DC;padding:1px 5px;border-radius:3px;}
/* ── Companion Den ── */
.den-panel{display:none;}
.den-panel.visible{display:block;}
.den-room{
background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
overflow:hidden;
}
.den-room-scene{
min-height:300px;background:linear-gradient(180deg,var(--den-wall,#C8B89A) 0%,var(--den-wall,#C8B89A) 60%,var(--den-floor,#A08060) 60%);
position:relative;display:flex;align-items:flex-end;justify-content:center;
padding:16px;transition:background 0.4s;
}
[data-theme="dark"] .den-room-scene{
background:linear-gradient(180deg,#2A2520 0%,#2A2520 60%,#1A1410 60%);
}
.den-companion-center{
display:flex;flex-direction:column;align-items:center;gap:4px;
position:relative;z-index:2;
}
.den-companion-art{
width:260px;height:190px;
font-size:4rem;display:flex;align-items:center;justify-content:center;overflow:hidden;
/* ARTWORK pose=idle → art/companions/{slug}-idle.png (set via companionImg helper) */
filter:drop-shadow(0 4px 12px rgba(0,0,0,0.25));
animation:denFloat 3s ease-in-out infinite;
}
@keyframes denFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.den-companion-name{font-size:0.75rem;font-weight:600;color:rgba(255,255,255,0.7);letter-spacing:0.5px;}
.den-item-slot{
position:absolute;font-size:1.6rem;
/* ARTWORK: replace emoji with 
via denItemImg() helper */
}
.den-item-slot.floor-left{bottom:16px;left:24px;}
.den-item-slot.floor-right{bottom:16px;right:24px;}
.den-item-slot.wall-left{top:20px;left:16px;}
.den-item-slot.wall-right{top:20px;right:16px;}
.den-item-slot.wall-center{top:16px;left:50%;transform:translateX(-50%);}
.den-room-footer{
padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
border-top:1px solid var(--border);
}
.den-currency-row{display:flex;align-items:center;gap:6px;}
.den-currency-icon{font-size:1.1rem;}
.den-currency-bal{font-family:'Space Mono',monospace;font-size:1rem;font-weight:700;color:#E8A838;}
.den-currency-label{font-size:0.7rem;color:var(--muted);}
.den-shop-btn{
background:var(--ink);color:var(--bg);border:none;border-radius:8px;
padding:6px 14px;font-size:0.78rem;font-weight:500;cursor:pointer;
font-family:var(--font-ui);transition:opacity 0.15s;
}
.den-shop-btn:hover{opacity:0.78;}
/* Den Milestones */
.den-milestones{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;}
.den-milestones-title{font-size:0.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.milestone-row{
display:flex;align-items:center;gap:10px;padding:7px 0;
border-bottom:1px solid var(--border);
}
.milestone-row:last-child{border-bottom:none;}
.milestone-icon{font-size:1.3rem;width:32px;text-align:center;flex-shrink:0;}
.milestone-info{flex:1;}
.milestone-name{font-size:0.82rem;font-weight:500;}
.milestone-desc{font-size:0.65rem;color:var(--muted);}
.milestone-status{
font-size:0.65rem;font-weight:700;padding:2px 7px;border-radius:4px;flex-shrink:0;
}
.ms-locked{background:var(--card2);color:var(--muted);}
.ms-unlocked{background:rgba(80,180,80,0.15);color:#50B464;}
/* ── Companion Shop ── */
.shop-overlay{
display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);
z-index:400;align-items:center;justify-content:center;padding:16px;
backdrop-filter:blur(3px);
}
.shop-overlay.visible{display:flex;}
.shop-modal{
background:var(--card);border-radius:var(--radius);
width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
box-shadow:var(--shadow-lg);animation:popIn 0.16s ease;
}
.shop-header{
display:flex;align-items:center;justify-content:space-between;
padding:16px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;
background:var(--card);z-index:1;
}
.shop-title{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;}
.shop-balance{display:flex;align-items:center;gap:5px;font-family:'Space Mono',monospace;font-size:0.9rem;font-weight:700;color:#E8A838;}
.shop-close-btn{
background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;
padding:4px 6px;border-radius:5px;transition:color 0.12s;
}
.shop-close-btn:hover{color:var(--ink);}
.shop-category-label{
font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
color:var(--muted);padding:12px 18px 6px;
}
.shop-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 18px;
}
@media(max-width:380px){.shop-grid{grid-template-columns:repeat(2,1fr);}}
.shop-item{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:14px 8px;border-radius:12px;border:2px solid var(--border);
background:var(--card2);cursor:pointer;transition:all 0.15s;text-align:center;
}
.shop-item:hover{border-color:var(--muted);}
.shop-item.owned{border-color:#60C050;background:rgba(80,180,80,0.06);}
.shop-item.cant-afford{opacity:0.45;cursor:default;}
.shop-item-art{font-size:2rem;
/* ARTWORK: replace emoji with 
via shopItemImg() helper */
}
.shop-item-name{font-size:0.72rem;font-weight:600;color:var(--ink);}
.shop-item-cost{
display:flex;align-items:center;gap:3px;
font-size:0.68rem;font-weight:700;color:#E8A838;
font-family:'Space Mono',monospace;
}
.shop-item-owned-tag{font-size:0.6rem;color:#60C050;font-weight:700;}
/* ── Recurring Backlog Templates ── */
.recur-template-card{
background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;
}
.recur-template-title{font-size:0.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.recur-template-list{display:flex;flex-direction:column;gap:6px;}
.recur-template-item{
display:flex;align-items:center;gap:10px;padding:8px 10px;
background:var(--card2);border-radius:8px;
}
.rti-info{flex:1;}
.rti-name{font-size:0.84rem;font-weight:500;}
.rti-freq{font-size:0.65rem;color:var(--muted);}
.rti-del-btn{
background:none;border:none;cursor:pointer;color:var(--muted);
font-size:0.82rem;padding:3px 5px;border-radius:4px;transition:color 0.12s;
}
.rti-del-btn:hover{color:var(--focus);}
.recur-add-form{margin-top:10px;display:flex;flex-direction:column;gap:7px;}
.recur-freq-row{display:flex;gap:6px;flex-wrap:wrap;}
.recur-freq-btn{
padding:4px 10px;border-radius:6px;border:1.5px solid var(--border);
background:none;font-size:0.7rem;cursor:pointer;transition:all 0.12s;
font-family:var(--font-ui);color:var(--muted);
}
.recur-freq-btn.sel{border-color:#E8A838;color:#E8A838;background:rgba(232,168,56,0.09);}
/* ── Shared backlog task chip ── */
.stc-shared-badge{
font-size:0.6rem;background:rgba(100,150,220,0.15);color:#6AA0DC;
padding:1px 5px;border-radius:3px;font-weight:600;
}
.stc-assignee{font-size:0.65rem;color:var(--muted);}
/* ── Paywall prompt ── */
.paywall-card{
background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
padding:20px;text-align:center;
}
.paywall-icon{font-size:2.2rem;margin-bottom:8px;}
.paywall-title{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;margin-bottom:6px;}
.paywall-desc{font-size:0.82rem;color:var(--muted);line-height:1.5;margin-bottom:14px;}
.paywall-price-row{display:flex;gap:10px;justify-content:center;margin-bottom:14px;flex-wrap:wrap;}
.paywall-tier-card{
border:2px solid var(--border);border-radius:10px;padding:12px 16px;
min-width:120px;cursor:pointer;transition:border-color 0.15s;
}
.paywall-tier-card:hover{border-color:#E8A838;}
.paywall-tier-card.sel{border-color:#E8A838;background:rgba(232,168,56,0.07);}
.ptc-name{font-size:0.8rem;font-weight:700;}
.ptc-price{font-family:'Space Mono',monospace;font-size:1rem;font-weight:700;color:#E8A838;}
.ptc-users{font-size:0.65rem;color:var(--muted);}
.paywall-trial{font-size:0.7rem;color:var(--muted);margin-bottom:10px;}
.paywall-cta-btn{
width:100%;padding:12px;border-radius:10px;background:var(--ink);color:var(--bg);
border:none;font-family:var(--font-ui);font-size:0.9rem;font-weight:600;
cursor:pointer;transition:opacity 0.15s;
}
.paywall-cta-btn:hover{opacity:0.82;}
.paywall-skip{
background:none;border:none;color:var(--muted);font-size:0.7rem;
cursor:pointer;margin-top:8px;font-family:var(--font-ui);
}
/* ═══════════════════════════════════════════════════════════════════
NUDGE PHASE 3 — Body Double · Insights · Meds · Coach · Seasonal
═══════════════════════════════════════════════════════════════════ */
/* ── Body Double ── */
.bd-panel{display:flex;flex-direction:column;gap:16px;}
.bd-hero{
background:var(--card);border-radius:var(--radius);padding:24px;
display:flex;flex-direction:column;align-items:center;gap:14px;
box-shadow:var(--shadow);
}
.bd-art{width:90px;height:90px;border-radius:50%;overflow:hidden;}
.bd-timer{
font-family:'Space Mono',monospace;font-size:2.8rem;font-weight:700;
color:var(--ink);letter-spacing:2px;
}
.bd-status{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.bd-duration-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.bd-dur-btn{
padding:6px 14px;border-radius:20px;border:2px solid var(--border);
background:none;color:var(--ink);font-family:var(--font-ui);font-size:0.78rem;
cursor:pointer;transition:all 0.15s;font-weight:600;
}
.bd-dur-btn:hover,.bd-dur-btn.sel{border-color:#E8A838;color:#E8A838;background:rgba(232,168,56,0.08);}
.bd-dur-btn:disabled{opacity:0.4;cursor:default;}
.bd-start-btn{
width:100%;padding:14px;border-radius:12px;background:var(--ink);color:var(--bg);
border:none;font-family:var(--font-ui);font-size:0.95rem;font-weight:700;
cursor:pointer;transition:opacity 0.15s;
}
.bd-start-btn:hover{opacity:0.82;}
.bd-start-btn.running{background:#E05C5C;}
.bd-history{background:var(--card);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);}
.bd-hist-row{
display:flex;justify-content:space-between;align-items:center;
padding:7px 0;border-bottom:1px solid var(--border);font-size:0.78rem;
}
.bd-hist-row:last-child{border-bottom:none;}
.bd-hist-date{color:var(--muted);}
.bd-hist-dur{font-family:'Space Mono',monospace;font-weight:700;color:#E8A838;}
/* ── Insights ── */
.insights-panel{display:flex;flex-direction:column;gap:14px;}
.insights-card{
background:var(--card);border-radius:var(--radius);padding:16px 18px;
box-shadow:var(--shadow);
}
.insights-card-title{
font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
color:var(--muted);margin-bottom:12px;
}
.stat-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.stat-row:last-child{margin-bottom:0;}
.stat-label{font-size:0.78rem;color:var(--ink);}
.stat-val{font-family:'Space Mono',monospace;font-size:0.85rem;font-weight:700;color:#E8A838;}
.bar-track{height:6px;background:var(--border);border-radius:3px;flex:1;margin:0 10px;overflow:hidden;}
.bar-fill{height:100%;border-radius:3px;background:#E8A838;transition:width 0.4s;}
.insight-summary{font-size:0.82rem;line-height:1.65;color:var(--ink);white-space:pre-wrap;}
.insight-gen-btn{
width:100%;padding:12px;border-radius:10px;
background:rgba(232,168,56,0.1);color:#E8A838;
border:2px solid rgba(232,168,56,0.25);
font-family:var(--font-ui);font-size:0.88rem;font-weight:700;
cursor:pointer;transition:all 0.15s;
}
.insight-gen-btn:hover{background:rgba(232,168,56,0.2);}
.insight-gen-btn:disabled{opacity:0.5;cursor:default;}
.export-row{display:flex;gap:8px;margin-top:6px;}
.export-btn{
flex:1;padding:9px;border-radius:8px;border:1px solid var(--border);
background:none;color:var(--ink);font-family:var(--font-ui);font-size:0.78rem;
cursor:pointer;transition:all 0.15s;font-weight:600;
}
.export-btn:hover{border-color:#E8A838;color:#E8A838;}
/* ── Medication tracker ── */
.meds-panel{display:flex;flex-direction:column;gap:12px;}
.med-add-form{
background:var(--card);border-radius:var(--radius);padding:16px;
box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;
}
.med-row{
background:var(--card);border-radius:var(--radius);padding:12px 16px;
box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.med-name{font-weight:700;font-size:0.88rem;}
.med-dose{font-size:0.7rem;color:var(--muted);}
.med-times{font-size:0.7rem;color:#E8A838;font-family:'Space Mono',monospace;margin-top:2px;}
.med-log-row{
display:flex;justify-content:space-between;align-items:center;
padding:10px 14px;background:var(--card);border-radius:10px;box-shadow:var(--shadow);
}
.med-log-label{font-size:0.8rem;font-weight:600;}
.med-log-sub{font-size:0.68rem;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px;}
.med-taken-btn{
padding:5px 12px;border-radius:7px;border:1px solid var(--border);
background:none;font-family:var(--font-ui);font-size:0.72rem;cursor:pointer;
white-space:nowrap;transition:all 0.15s;
}
.med-taken-btn.done{background:rgba(70,190,130,0.12);border-color:#46BE82;color:#46BE82;}
/* ── Coach portal ── */
.coach-panel{display:flex;flex-direction:column;gap:12px;}
.coach-connect-card{
background:var(--card);border-radius:var(--radius);padding:22px;
text-align:center;box-shadow:var(--shadow);
}
.coach-icon{font-size:2rem;margin-bottom:8px;}
.coach-desc{font-size:0.8rem;color:var(--muted);line-height:1.55;margin-bottom:14px;}
.coach-link-box{
background:var(--bg);border-radius:8px;padding:9px 12px;
font-family:'Space Mono',monospace;font-size:0.65rem;color:var(--muted);
word-break:break-all;border:1px solid var(--border);text-align:left;margin-bottom:12px;
}
.coach-note-card{
background:var(--card);border-radius:var(--radius);padding:12px 14px;
box-shadow:var(--shadow);font-size:0.8rem;line-height:1.55;
}
.coach-note-date{font-size:0.65rem;color:var(--muted);margin-bottom:4px;font-family:'Space Mono',monospace;}
/* ── Seasonal shop badge ── */
.seasonal-badge{
font-size:0.52rem;background:rgba(232,168,56,0.15);color:#E8A838;
padding:1px 5px;border-radius:3px;font-weight:700;letter-spacing:0.5px;
text-transform:uppercase;vertical-align:middle;
}