/* =========================================
   PLANNER — Themes
   Cormorant Garamond + DM Mono
   ========================================= */

/* ---- DARK THEME (default) ---- */
:root, [data-theme="dark"] {
    --bg:        #0e0e0f;
    --bg-card:   #141416;
    --bg-hover:  #1a1a1d;
    --border:    #252528;
    --border-hi: #3a3a3f;
    --text:      #e8e5df;
    --text-muted:#888580;
    --text-dim:  #555250;
    --accent:    #c8a96e;
    --accent-hi: #e2c48a;
    --accent-dim:#7a6440;
    --danger:    #c06060;
    --warning:   #d4930d;
    --success:   #6aaa7a;
    --btn-text:  #0e0e0f;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-mono:  'DM Mono', monospace;
    --radius:     4px;
    --sidebar-w:  220px;
}

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
    --bg:        #f5f3ef;
    --bg-card:   #ffffff;
    --bg-hover:  #edeae4;
    --border:    #d5d0c8;
    --border-hi: #b8b2a6;
    --text:      #1a1816;
    --text-muted:#5a574f;
    --text-dim:  #8a8680;
    --accent:    #8b6914;
    --accent-hi: #a57d1e;
    --accent-dim:#c8a96e;
    --danger:    #c03030;
    --warning:   #b87a00;
    --success:   #2a7a3a;
    --btn-text:  #ffffff;
}

/* ---- HIGH CONTRAST THEME ---- */
[data-theme="contrast"] {
    --bg:        #000000;
    --bg-card:   #0a0a0a;
    --bg-hover:  #151515;
    --border:    #404040;
    --border-hi: #606060;
    --text:      #ffffff;
    --text-muted:#c0c0c0;
    --text-dim:  #808080;
    --accent:    #ffc842;
    --accent-hi: #ffd96a;
    --accent-dim:#c89a20;
    --danger:    #ff5050;
    --success:   #50ff70;
    --btn-text:  #000000;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-serif);
    font-weight: 300;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
}

/* ---- SIDEBAR ---- */
.sidebar {
    width: var(--sidebar-w);
    min-height: 100vh;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    padding: 0 0 2rem;
    z-index: 100;
}

.sidebar-logo {
    padding: 1.8rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.logo-mark { color: var(--accent); font-size: 1.2rem; }
.logo-mark.large { font-size: 2rem; display: block; margin-bottom: 0.3rem; }
.logo-text { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; letter-spacing: 0.04em; color: var(--text); }
.logo-text.large { font-size: 2rem; }

.nav-links {
    list-style: none;
    padding: 0.5rem 0;
    flex: 1;
}

.nav-links li { }
.nav-links .nav-sep { height: 1px; background: var(--border); margin: 0.8rem 1rem; }

.nav-links a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.5rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: color 0.15s, background 0.15s;
}

.nav-links a:hover { color: var(--text); background: var(--bg-hover); }
.nav-links a.active { color: var(--accent); background: rgba(200,169,110,0.07); border-left: 2px solid var(--accent); padding-left: calc(1.5rem - 2px); }
.nav-icon { font-size: 0.75rem; color: var(--accent-dim); width: 16px; text-align: center; }

.sidebar-footer {
    padding: 1rem 1.5rem 0;
    border-top: 1px solid var(--border);
}
.theme-switcher {
    display: flex; gap: 0.3rem; margin-bottom: 0.8rem;
}
.theme-btn {
    width: 30px; height: 30px;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--bg-hover); color: var(--text-dim);
    font-size: 0.85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}
.theme-btn:hover { border-color: var(--accent-dim); color: var(--text); }
.theme-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(200,169,110,0.1); }
.logout-link { color: var(--text-dim); font-size: 0.85rem; text-decoration: none; }
.logout-link:hover { color: var(--danger); }

/* ---- MAIN CONTENT ---- */
.content {
    margin-left: var(--sidebar-w);
    flex: 1;
    padding: 2.5rem 3rem;
    max-width: 100%;
    width: 100%;
}

/* ---- PAGE HEADER ---- */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.page-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--text);
}

.page-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

/* ---- BUTTONS ---- */
.btn-primary {
    background: var(--accent);
    color: var(--btn-text);
    border: none;
    padding: 0.6rem 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.15s;
    text-decoration: none;
    display: inline-block;
}
.btn-primary:hover { background: var(--accent-hi); }

.btn-secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent-dim);
    padding: 0.55rem 1.3rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    border-radius: var(--radius);
    transition: border-color 0.15s, color 0.15s;
    text-decoration: none;
    display: inline-block;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-hi); }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 0.5rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: var(--radius);
    text-decoration: none;
    display: inline-block;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-hi); }

.btn-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* ---- FLASH ---- */
.flash {
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.2rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}
.flash--success { background: rgba(106,170,122,0.1); border: 1px solid rgba(106,170,122,0.3); color: var(--success); }
.flash--error   { background: rgba(192,96,96,0.1);  border: 1px solid rgba(192,96,96,0.3);  color: var(--danger); }

/* ---- FORMS ---- */
.planner-form { display: flex; flex-direction: column; gap: 1rem; min-width: 0; width: 100%; overflow: visible; }
.planner-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-family: var(--font-mono); color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.planner-form label.grow { flex: 1; }

.planner-form input[type="text"],
.planner-form input[type="number"],
.planner-form input[type="date"],
.planner-form input[type="url"],
.planner-form input[type="password"],
.planner-form select,
.planner-form textarea {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 300;
    padding: 0.65rem 0.85rem;
    outline: none;
    transition: border-color 0.15s;
    resize: vertical;
}

.planner-form input:focus,
.planner-form select:focus,
.planner-form textarea:focus { border-color: var(--accent-dim); }

.planner-form textarea { line-height: 1.7; }

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row label { flex: 1; min-width: 120px; }
.form-hint { font-size: 0.9rem; color: var(--text-muted); font-family: var(--font-serif); font-style: italic; line-height: 1.6; }
.form-title { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 300; font-style: italic; color: var(--text); margin-bottom: 0.3rem; }

/* ---- TABS ---- */
.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.65rem 1.3rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ---- TWO COLUMN ---- */
.two-col {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: start;
}
.two-col > .item-detail {
    min-width: 0;
}

.item-list { display: flex; flex-direction: column; gap: 0.25rem; }
.item-link {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.1s, border-color 0.1s;
    position: relative;
}
.item-link:hover { background: var(--bg-hover); }
.item-link.active { background: var(--bg-hover); border-color: var(--border); }
.item-link.life-done .item-label { text-decoration: line-through; opacity: 0.6; }
.item-link.life-cancelled .item-label { text-decoration: line-through; opacity: 0.4; }
.item-link.life-failed .item-label { opacity: 0.6; }
.status-icon { margin-right: 0.3rem; font-weight: bold; }
.item-link.life-done .status-icon { color: var(--success, #4caf50); }
.item-link.life-cancelled .status-icon { color: var(--danger, #e53935); }
.item-link.life-failed .status-icon { color: var(--warning, #d4930d); }
.item-label { font-size: 0.95rem; color: var(--text); }
.item-sub { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); margin-top: 0.1rem; }
.current-badge { color: var(--accent); font-size: 0.5rem; position: absolute; top: 0.6rem; right: 0.6rem; }

/* ---- DASHBOARD ---- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.card--wide { grid-column: 1 / -1; }

.card-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-dim);
}
.card-title { font-size: 1.1rem; font-style: italic; color: var(--text); }
.top-task { font-size: 1.3rem; font-style: italic; color: var(--text); }
.day-meta { display: flex; gap: 1rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.objectives-preview { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; white-space: pre-wrap; }
.days-left { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-dim); letter-spacing: 0.06em; }

.card-action {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-decoration: none;
    margin-top: auto;
    letter-spacing: 0.04em;
}
.card-action:hover { color: var(--accent-hi); }

/* ---- ENTRY LIST ---- */
.entry-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.entry-item { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.entry-type {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 2px;
    flex-shrink: 0;
}
.entry-type--progress { background: rgba(100,120,200,0.15); color: #8899dd; }
.entry-type--win      { background: rgba(100,180,120,0.15); color: var(--success); }
.entry-type--obstacle { background: rgba(200,100,100,0.15); color: var(--danger); }
.entry-type--note     { background: rgba(200,169,110,0.1); color: var(--accent-dim); }
.entry-content { flex: 1; color: var(--text-muted); line-height: 1.5; }
.entry-date { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); flex-shrink: 0; }
.entry-form .form-row { align-items: flex-end; }
.mt-1 { margin-top: 1rem; }

/* Entry view/edit layout */
.entry-item { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.entry-view {
    display: flex; align-items: baseline; gap: 0.7rem; font-size: 0.88rem;
    flex-wrap: wrap;
}
.entry-meta { display: flex; gap: 0.4rem; align-items: baseline; flex-shrink: 0; }
.entry-edited {
    font-family: var(--font-mono); font-size: 0.6rem;
    color: var(--accent-dim); font-style: italic;
}
.entry-actions { display: flex; gap: 0.3rem; flex-shrink: 0; margin-left: auto; }
.btn-entry-edit, .btn-entry-delete {
    background: none; border: 1px solid var(--border); color: var(--text-dim);
    font-size: 0.8rem; cursor: pointer; padding: 0.15rem 0.4rem;
    border-radius: var(--radius); transition: color .15s, border-color .15s;
}
.btn-entry-edit:hover { color: var(--accent); border-color: var(--accent-dim); }
.btn-entry-delete:hover { color: var(--danger); border-color: var(--danger); }
.entry-delete-form { display: inline; }

/* Entry edit form */
.entry-edit-form {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.5rem 0;
}
.entry-edit-type {
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.8rem;
    padding: 0.3rem 0.5rem; width: fit-content;
}
.entry-edit-form textarea {
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text);
    font-family: var(--font-serif); font-size: 0.95rem;
    padding: 0.5rem 0.7rem; resize: vertical; outline: none;
}
.entry-edit-form textarea:focus { border-color: var(--accent-dim); }
.entry-edit-actions { display: flex; gap: 0.5rem; }
.btn-entry-cancel {
    background: none; border: 1px solid var(--border); color: var(--text-dim);
    font-family: var(--font-mono); font-size: 0.8rem;
    padding: 0.4rem 0.8rem; border-radius: var(--radius); cursor: pointer;
}
.btn-entry-cancel:hover { color: var(--text); border-color: var(--border-hi); }

/* ---- DAY PAGE ---- */
.day-nav { display: flex; align-items: center; gap: 1.2rem; }
.nav-arrow { color: var(--text-dim); text-decoration: none; font-size: 1.1rem; transition: color 0.15s; }
.nav-arrow:hover { color: var(--accent); }

.week-strip {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem;
}
.week-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem;
    border-radius: var(--radius);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.1s;
}
.week-day:hover { background: var(--bg-hover); }
.week-day.active { background: var(--bg-hover); border-color: var(--accent-dim); }
.wd-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--text-dim); text-transform: uppercase; }
.wd-num { font-size: 1rem; color: var(--text-muted); }
.week-day.active .wd-num { color: var(--accent); }
.week-day.filled .wd-num::after { content: '·'; color: var(--accent); display: block; text-align: center; line-height: 0.5; }

.week-context {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent-dim);
    padding: 0.7rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    color: var(--text-muted);
    font-style: italic;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.context-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dim); margin-right: 0.5rem; font-style: normal; }

.day-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.day-section { display: flex; flex-direction: column; gap: 1rem; }
.section-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-dim);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.top-task-label { font-size: 0.8rem; }
.top-task-input { font-size: 1.1rem !important; font-style: italic; }
.gratitude-label textarea {
    border-left: 2px solid var(--accent-dim);
    font-style: italic;
}

.trackers { display: flex; flex-direction: column; gap: 0.8rem; }
.tracker-label { }
.dot-scale { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.dot:hover { border-color: var(--accent-dim); color: var(--text); }
.dot.active { background: rgba(200,169,110,0.15); border-color: var(--accent); color: var(--accent); }

.form-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* ---- STRUCTURED OBJECTIVES ---- */
.objectives-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-label-title {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.objective-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.objective-row input[type="text"] {
    flex: 1;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 300;
    padding: 0.6rem 0.8rem;
    outline: none;
    transition: border-color 0.15s;
}
.objective-row input[type="text"]:focus { border-color: var(--accent-dim); }
.obj-priority {
    width: 70px;
    flex-shrink: 0;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.55rem 1.2rem 0.55rem 0.5rem;
    outline: none;
    cursor: pointer;
    text-align: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888580'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    -webkit-appearance: none;
    appearance: none;
}
.obj-priority:focus { border-color: var(--accent-dim); }

/* ---- CATEGORY SELECT ---- */
.obj-category {
    min-width: 110px;
    flex-shrink: 0;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.55rem 1.4rem 0.55rem 0.5rem;
    outline: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888580'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    -webkit-appearance: none;
    appearance: none;
}
.obj-category:focus { border-color: var(--accent-dim); }

/* Category color coding */
.cat-work     { border-left: 3px solid #4a88ff; }
.cat-project  { border-left: 3px solid #a855f7; }
.cat-sport    { border-left: 3px solid #22c55e; }
.cat-personal { border-left: 3px solid #f59e0b; }

.cat-badge {
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem; border-radius: 3px; flex-shrink: 0;
}
.cat-badge--work     { background: rgba(74,136,255,0.12); color: #4a88ff; }
.cat-badge--project  { background: rgba(168,85,247,0.12); color: #a855f7; }
.cat-badge--sport    { background: rgba(34,197,94,0.12);  color: #22c55e; }
.cat-badge--personal { background: rgba(245,158,11,0.12); color: #f59e0b; }
.cat-badge--finance  { background: rgba(239,68,68,0.12);  color: #ef4444; }

/* ---- CATEGORY COLUMN LAYOUT ---- */
.cat-columns {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
}
.cat-column {
    flex: 1 1 0%;
    min-width: 250px;
    max-width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    min-height: 120px;
    overflow: hidden;
}
.cat-column--work     { border-top: 3px solid #4a88ff; }
.cat-column--project  { border-top: 3px solid #a855f7; }
.cat-column--sport    { border-top: 3px solid #22c55e; }
.cat-column--personal { border-top: 3px solid #f59e0b; }
.cat-column--finance  { border-top: 3px solid #ef4444; }
.cat-column--hidden   { opacity: 0.3; }
.cat-column-title {
    font-family: var(--font-mono); font-size: 0.78rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 0.6rem; padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
.cat-column--work .cat-column-title     { color: #4a88ff; }
.cat-column--project .cat-column-title  { color: #a855f7; }
.cat-column--sport .cat-column-title    { color: #22c55e; }
.cat-column--personal .cat-column-title { color: #f59e0b; }
.cat-column--finance .cat-column-title  { color: #ef4444; }

.cat-column .obj-card { background: var(--bg-hover); margin-bottom: 0.4rem; max-width: 100%; box-sizing: border-box; }
.cat-column .obj-card:last-child { margin-bottom: 0; }

/* Simplified obj card inside category column */
.cat-column .obj-category { display: none; }
.cat-column .obj-card-meta { flex-wrap: wrap; }

/* Parent objectives display */
.parent-objectives {
    margin-bottom: 1.5rem;
}
.parent-obj-section {
    margin-bottom: 0.8rem;
}
.parent-obj-label {
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 0.3rem;
}
.parent-obj-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.parent-obj-col {
    flex: 1 1 0%;
    min-width: 140px;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.parent-obj-item {
    font-size: 0.82rem; color: var(--text-muted);
    padding: 0.3rem 0.5rem;
    background: var(--bg-hover);
    border-radius: var(--radius);
    border-left: 2px solid var(--border);
}
.parent-obj-item.p1 { border-left-color: var(--accent); }
.parent-obj-item.p2 { border-left-color: var(--text-muted); }
.parent-obj-item .prio-tag {
    font-family: var(--font-mono); font-size: 0.68rem;
    color: var(--accent-dim); margin-right: 0.3rem;
}
.parent-obj-empty {
    font-size: 0.78rem; color: var(--text-dim);
    font-style: italic; padding: 0.3rem 0.5rem;
}
.parent-obj-item--active {
    border-left-color: var(--accent) !important;
    color: var(--text);
    font-weight: 400;
}
.parent-obj--done { opacity: 0.6; }
.parent-obj--done .prio-tag + * { text-decoration: line-through; }
.parent-obj--cancelled { opacity: 0.5; }
.parent-obj--cancelled .prio-tag + * { text-decoration: line-through; }
.parent-obj--failed { opacity: 0.6; border-left: 3px solid var(--warning, #d4930d); }
.parent-obj-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; }
.progress-badge {
    font-family: var(--font-mono); font-size: 0.65rem;
    padding: 0.1rem 0.35rem; border-radius: var(--radius);
    background: var(--bg); color: var(--text-muted);
    margin-left: auto;
}
.progress-bar-wrap {
    height: 4px; background: var(--border); border-radius: 2px;
    margin-top: 0.3rem; overflow: hidden;
}
.progress-bar {
    height: 100%; background: var(--success, #4caf50); border-radius: 2px;
    transition: width 0.3s ease;
}
.progress-children {
    list-style: none; padding: 0; margin: 0.3rem 0 0 0.2rem;
}
.progress-child {
    font-size: 0.75rem; color: var(--text-muted);
    padding: 0.1rem 0; display: flex; align-items: center; gap: 0.3rem;
}
.progress-child--done { opacity: 0.6; }
.progress-child--done .progress-child-icon { color: var(--success, #4caf50); }
.progress-child--cancelled { opacity: 0.4; text-decoration: line-through; }
.progress-child--cancelled .progress-child-icon { color: var(--danger, #e53935); }
.progress-child--failed { opacity: 0.6; }
.progress-child--failed .progress-child-icon { color: var(--warning, #d4930d); }
.progress-child-icon { font-size: 0.7rem; flex-shrink: 0; }
.status-badge {
    font-family: var(--font-mono); font-size: 0.65rem;
    padding: 0.1rem 0.35rem; border-radius: var(--radius);
    margin-left: 0.3rem; vertical-align: middle;
}
.status-badge--done { background: var(--success); color: var(--bg); }
.status-badge--cancelled { background: var(--danger); color: var(--bg); }
.status-badge--failed { background: var(--warning, #d4930d); color: var(--bg); }

/* ---- PARENT OBJECTIVE PICKER ---- */
.parent-picker-section { margin: 1rem 0; }
.parent-picker-list { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; }
.parent-picker-item {
    display: flex !important; flex-direction: row !important; align-items: center; gap: 0.5rem;
    font-size: 0.9rem; font-family: var(--font-serif); text-transform: none; letter-spacing: 0;
    color: var(--text-muted); cursor: pointer;
    padding: 0.5rem 0.7rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-card);
    transition: background .15s, border-color .15s;
}
.parent-picker-item:hover { background: var(--bg-hover); }
.parent-picker-item--selected { border-color: var(--accent-dim); background: rgba(200,169,110,0.05); color: var(--text); }
.parent-picker-item input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.parent-picker-text { flex: 1; }

/* ---- LIFE OBJECTIVE PICKER (years page) ---- */
.life-obj-picker { margin: 0.5rem 0; }
.life-obj-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.5rem;
}
.life-obj-cat-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.life-obj-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-family: var(--font-serif);
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius);
    transition: background 0.15s;
}
.life-obj-check:hover { background: var(--bg-hover); }
.life-obj-check input[type="checkbox"] {
    width: 18px; height: 18px; flex-shrink: 0;
    accent-color: var(--accent);
}
.prio-tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-dim); margin-right: 0.2rem; flex-shrink: 0; }
.prio-tag--1 { color: var(--danger); }
.prio-tag--2 { color: var(--accent); }
.prio-tag--3 { color: var(--success); }
.prio-tag--4 { color: var(--text-dim); }

.prio-tag.prio-tag--1 { color: var(--danger); }
.prio-tag.prio-tag--2 { color: var(--accent); }
.prio-tag.prio-tag--3 { color: var(--success); }
.prio-tag.prio-tag--4 { color: var(--text-dim); }

/* ---- LIFE OBJECTIVE TASKS (mandatory in quarters) ---- */
.life-obj-tasks-section {
    margin: 1rem 0;
}
.life-obj-task-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    margin-bottom: 0.8rem;
}
.life-obj-task-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.life-obj-task-title {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    flex: 1;
}
.life-obj-task-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.life-obj-task-group .obj-card {
    border-left: 2px solid var(--accent-dim);
}
.life-obj-task-group .btn-add-life-task {
    margin-top: 0.5rem;
    font-size: 0.78rem;
}

/* ---- OBJECTIVE CARDS (quarter dynamic rows) ---- */
.objectives-block-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.3rem;
}
.btn-add-obj {
    font-size: 0.78rem; padding: 0.3rem 0.6rem;
}
.obj-card {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    margin-bottom: 0.6rem;
    transition: border-color .15s ease;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}
.obj-card:focus-within { border-color: var(--accent-dim); }
.obj-card-header {
    display: flex; gap: 0.5rem; align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.obj-card-text {
    width: 100%;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-serif); font-size: 1rem; font-weight: 300;
    padding: 0.5rem 0.7rem; outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
    resize: vertical;
}
.obj-card-text:focus { border-color: var(--accent-dim); }
.obj-card-desc {
    width: 100%; min-width: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-dim);
    font-family: var(--font-serif); font-size: 0.85rem; font-weight: 300;
    padding: 0.35rem 0.7rem; outline: none;
    transition: border-color .15s; box-sizing: border-box;
    resize: vertical;
}
.obj-card-desc:focus { border-color: var(--accent-dim); color: var(--text); }
.obj-remove-btn {
    background: none; border: none; color: var(--text-dim);
    font-size: 1.1rem; cursor: pointer; padding: 0.2rem 0.4rem;
    border-radius: var(--radius); transition: color .15s, background .15s;
    flex-shrink: 0;
}
.obj-remove-btn:hover { color: var(--danger); background: rgba(192,96,96,0.1); }

/* Status select */
.obj-status-select {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.78rem;
    padding: 0.3rem 0.4rem; outline: none; cursor: pointer;
    flex-shrink: 0;
}
/* Done / Cancelled card states */
.obj-card--done {
    border-left: 3px solid var(--success);
    opacity: 0.7;
}
.obj-card--done .obj-card-text {
    text-decoration: line-through;
    color: var(--text-muted);
}
.obj-card--cancelled {
    border-left: 3px solid var(--danger);
    opacity: 0.6;
}
.obj-card--cancelled .obj-card-text {
    text-decoration: line-through;
    color: var(--text-dim);
}
.obj-card--failed {
    border-left: 3px solid var(--warning, #d4930d);
    opacity: 0.7;
}
.obj-card--failed .obj-card-text {
    color: var(--text-muted);
}

/* Due date meta row */
.obj-card-meta {
    display: flex; gap: 0.5rem; align-items: center;
    margin-bottom: 0.3rem;
}
.obj-due-label {
    display: flex !important; flex-direction: column !important; align-items: flex-start; gap: 0.2rem;
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-dim);
}
.obj-due-date { width: 100%; }
.obj-due-date {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.78rem;
    padding: 0.2rem 0.4rem; outline: none; cursor: pointer;
}
.obj-due-date:focus { border-color: var(--accent-dim); }

/* Time picker (day objectives) */
.obj-time-section {
    display: flex; gap: 0.5rem; align-items: center;
    margin-top: 0.4rem; flex-wrap: wrap;
}
.obj-time-type-select {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.72rem;
    padding: 0.2rem 0.4rem; outline: none; cursor: pointer;
    color-scheme: dark;
}
.obj-time-type-select:focus { border-color: var(--accent-dim); }
.obj-time-fields {
    display: flex; gap: 0.4rem; align-items: center;
}
.obj-time-label {
    display: flex !important; flex-direction: row !important; align-items: center; gap: 0.3rem;
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-dim);
}
.obj-time-input {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text);
    font-family: var(--font-mono); font-size: 0.78rem;
    padding: 0.25rem 0.4rem; outline: none; cursor: pointer;
    color-scheme: dark;
}
.obj-time-input:focus { border-color: var(--accent-dim); }
[data-theme="light"] .obj-time-type-select { color-scheme: light; }
[data-theme="light"] .obj-time-input { color-scheme: light; }

/* Due badge (read-only parent objectives) */
.due-badge {
    font-family: var(--font-mono); font-size: 0.6rem;
    padding: 0.1rem 0.35rem; border-radius: var(--radius);
    margin-left: 0.3rem; vertical-align: middle;
}
.due-badge--ok { background: rgba(106,170,122,0.15); color: var(--success); }
.due-badge--soon { background: rgba(245,158,11,0.2); color: #f59e0b; }
.due-badge--overdue { background: rgba(192,96,96,0.2); color: var(--danger); font-weight: 700; }

/* Countdown badge on editable task cards */
.countdown-badge { font-family: var(--font-mono); font-size: 0.68rem; padding: 0.15rem 0.4rem; border-radius: var(--radius); white-space: nowrap; }
.countdown--ok       { background: rgba(106,170,122,0.15); color: var(--success); }
.countdown--soon     { background: rgba(245,158,11,0.2);   color: #f59e0b; }
.countdown--overdue  { background: rgba(192,96,96,0.2);    color: var(--danger); font-weight: 700; }

/* Updated at timestamp */
.updated-at {
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--text-dim); letter-spacing: 0.04em;
    margin-bottom: 0.8rem;
}

/* ---- WEEK OBJECTIVES STRIP (day page) ---- */
.week-objectives-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
}
.week-obj-badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.week-obj-badge.priority-1 { border-color: var(--danger); color: var(--danger); }
.week-obj-badge.priority-2 { border-color: var(--accent); color: var(--accent); }
.week-obj-badge.priority-3 { border-color: var(--success); color: var(--success); }
.week-obj-badge.priority-4 { border-color: var(--text-dim); color: var(--text-dim); }

/* ---- EMPTY INTENTION LINK ---- */
.empty-intention { font-style: normal; }
.empty-intention a { color: var(--accent-dim); text-decoration: none; }
.empty-intention a:hover { color: var(--accent); }


/* ---- RETROSPECTIVES ---- */
.retro-section-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 300;
    font-style: italic;
    color: var(--text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.retro-pending-section { margin-bottom: 2.5rem; }
.retro-pending-list { display: flex; flex-direction: column; gap: 1.2rem; }
.retro-history-section { margin-top: 1rem; }
.retro-list { display: flex; flex-direction: column; gap: 1rem; }
.retro-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem;
}
.retro-card--pending {
    border-left: 3px solid var(--accent);
}
.retro-header { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 0.8rem; }
.retro-period { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
.retro-badge--day { color: var(--success); }
.retro-badge--week { color: #8899dd; }
.retro-badge--month { color: var(--accent); }
.retro-badge--quarter { color: var(--danger); }
.retro-theme { font-style: italic; color: var(--text-muted); font-size: 0.9rem; }
.retro-body { font-size: 0.92rem; color: var(--text-muted); white-space: pre-wrap; line-height: 1.7; margin-bottom: 0.8rem; word-wrap: break-word; overflow-wrap: break-word; }
.retro-why { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
.retro-link { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-dim); text-decoration: none; }
.retro-link:hover { color: var(--accent); }

/* ---- SETTINGS ---- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.settings-card--wide { grid-column: 1 / -1; }
.settings-section-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 300;
    color: var(--text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.webhook-events { margin-top: 1.2rem; }
.webhook-events h3 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.5rem; }
.webhook-events ul { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.webhook-events li { font-size: 0.85rem; color: var(--text-muted); }
.webhook-events code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); background: rgba(200,169,110,0.07); padding: 0.1rem 0.3rem; border-radius: 2px; }

.webhook-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.8rem; }
.webhook-table th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); text-align: left; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--border); }
.webhook-table td { padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.webhook-table code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-dim); }
.status-ok    { color: var(--success); font-family: var(--font-mono); font-size: 0.75rem; }
.status-error { color: var(--danger);  font-family: var(--font-mono); font-size: 0.75rem; }

/* Category days settings */
.cat-days-settings { margin-top: 0.8rem; }
.cat-day-row {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.cat-day-row:last-child { border-bottom: none; }
.cat-day-label {
    font-family: var(--font-mono); font-size: 0.82rem;
    color: var(--text); min-width: 140px; flex-shrink: 0;
}
.cat-day-checks { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.cat-day-check {
    display: flex; align-items: center; gap: 0.2rem;
    cursor: pointer;
}
.cat-day-check input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--accent);
    cursor: pointer;
}
.cat-day-check span {
    font-family: var(--font-mono); font-size: 0.75rem;
    color: var(--text-muted);
}

/* ---- LOGIN ---- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-wrap {
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    margin: 1rem;
}
.login-logo { text-align: center; margin-bottom: 1.8rem; }
.login-sub { font-size: 0.85rem; color: var(--text-muted); font-style: italic; margin-top: 0.4rem; }
.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-form input[type="password"] {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1rem;
    padding: 0.7rem 0.9rem;
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}
.login-form input:focus { border-color: var(--accent-dim); }
.login-form button { width: 100%; color: var(--btn-text); }

/* ---- EMPTY STATE ---- */
.empty-state { color: var(--text-dim); font-style: italic; font-size: 0.9rem; }

/* ---- PROGRESSION PAGE ---- */
.prog-hero {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.8rem 2rem; margin-bottom: 1.5rem;
}
.prog-level-badge {
    width: 72px; height: 72px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--tier-color, var(--accent));
    box-shadow: 0 0 20px color-mix(in srgb, var(--tier-color, var(--accent)) 30%, transparent);
    background: color-mix(in srgb, var(--tier-color, var(--accent)) 8%, var(--bg-card));
}
.prog-level-num {
    font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700;
    color: var(--tier-color, var(--accent));
}
.prog-level-info { flex: 1; min-width: 0; }
.prog-level-name {
    font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600;
    color: var(--text); margin-bottom: 0.5rem;
}
.prog-xp-bar {
    height: 10px; background: rgba(255,255,255,0.06); border-radius: 5px;
    overflow: hidden; margin-bottom: 0.4rem;
}
.prog-xp-fill {
    height: 100%; border-radius: 5px;
    background: var(--accent);
    transition: width .8s cubic-bezier(.22,.61,.36,1);
    position: relative;
}
.prog-xp-fill::after {
    content: ''; position: absolute; inset: 0; border-radius: 5px;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 60%);
}
.prog-xp-text {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-mono); font-size: 0.75rem;
}
.prog-xp-text span:first-child { color: var(--text); font-weight: 700; }
.prog-xp-next { color: var(--text-dim); }

.prog-streak {
    text-align: center; flex-shrink: 0;
    padding: 0.8rem 1.2rem;
    background: rgba(200,169,110,0.06);
    border: 1px solid rgba(200,169,110,0.15);
    border-radius: var(--radius);
}
.prog-streak-num {
    font-family: var(--font-mono); font-size: 2rem; font-weight: 700;
    color: var(--accent); line-height: 1;
}
.prog-streak-label {
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-dim); margin-top: 0.2rem;
}

/* Year stats bar */
.prog-year-bar {
    display: flex; gap: 0; margin-bottom: 2rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
}
.prog-stat {
    flex: 1; text-align: center; padding: 1rem 0.5rem;
    border-right: 1px solid var(--border);
}
.prog-stat:last-child { border-right: none; }
.prog-stat-val {
    font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700;
    color: var(--text);
}
.prog-stat-label {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-dim); margin-top: 0.2rem;
}

/* Section title */
.prog-section-title {
    font-family: var(--font-serif); font-size: 1.3rem; font-weight: 300;
    font-style: italic; color: var(--text);
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.prog-achievement-count {
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--text-dim); font-style: normal;
}

/* Quarter cards */
.prog-quarters-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    margin-bottom: 1.5rem;
}
.prog-quarter-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.2rem;
}
.prog-card--future { opacity: 0.35; }
.prog-quarter-head { margin-bottom: 0.8rem; }
.prog-quarter-label {
    font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
    color: var(--accent); letter-spacing: 0.05em;
}
.prog-quarter-theme {
    display: block; font-style: italic; font-size: 0.82rem;
    color: var(--text-muted); margin-top: 0.2rem;
}

.prog-bar-wrap {
    height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px;
    overflow: hidden; margin-bottom: 0.5rem;
}
.prog-bar--small { height: 5px; margin-bottom: 0.3rem; }
.prog-bar-fill {
    height: 100%; border-radius: 4px; background: var(--accent);
    transition: width .6s ease;
    position: relative;
}
.prog-bar-fill::after {
    content: ''; position: absolute; inset: 0; border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 60%);
}

.prog-quarter-meta {
    display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 0.68rem;
    color: var(--text-dim); margin-bottom: 0.6rem;
}
.prog-tier-badge { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.prog-retro-done { color: var(--success); }

.prog-obj-list { display: flex; flex-direction: column; gap: 0.4rem; }
.prog-cat-group { margin-bottom: 0.3rem; }
.prog-cat-group .cat-badge { margin-bottom: 0.2rem; display: inline-block; }
.prog-obj {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; color: var(--text-muted);
}
.prog-obj-prio { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }
.prog-obj-check { font-size: 0.7rem; flex-shrink: 0; }
.prog-obj-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog-obj-focus { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent); background: rgba(200,169,110,0.1); padding: 0.1rem 0.4rem; border-radius: 3px; flex-shrink: 0; }
.prog-empty { font-style: italic; color: var(--text-dim); font-size: 0.85rem; }

/* Monthly grid */
.prog-months-grid {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.prog-month-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.7rem 0.5rem; text-align: center;
}
.prog-month-name {
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.4rem;
}
.prog-month-score {
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
    color: var(--text-muted);
}
.prog-month-mood {
    display: flex; flex-direction: column; gap: 0.1rem;
    font-family: var(--font-mono); font-size: 0.6rem; margin-top: 0.3rem;
}

/* Achievements */
.prog-achievements-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem;
    margin-bottom: 2rem;
}
.prog-achievement {
    display: flex; align-items: center; gap: 0.8rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.9rem 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.prog-achievement--unlocked {
    border-color: var(--accent-dim);
    box-shadow: 0 0 12px rgba(200,169,110,0.08);
}
.prog-achievement--locked { opacity: 0.4; }
.prog-achievement-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    border-radius: 50%;
    background: rgba(200,169,110,0.08); color: var(--accent);
}
.prog-achievement--locked .prog-achievement-icon {
    background: rgba(255,255,255,0.03); color: var(--text-dim);
}
.prog-achievement-name {
    font-family: var(--font-serif); font-size: 0.92rem; font-weight: 600;
    color: var(--text);
}
.prog-achievement-desc {
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.03em;
    color: var(--text-dim); margin-top: 0.1rem;
}

/* Year recap */
.prog-recap {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 2rem; margin-bottom: 2rem;
}
.prog-recap-hero { text-align: center; margin-bottom: 1.8rem; }
.prog-recap-xp {
    font-family: var(--font-mono); font-size: 3rem; font-weight: 700;
    color: var(--accent); line-height: 1;
}
.prog-recap-xp span { font-size: 1.2rem; opacity: 0.5; }
.prog-recap-subtitle {
    font-family: var(--font-serif); font-size: 1rem;
    font-style: italic; color: var(--text-muted); margin-top: 0.3rem;
}
.prog-recap-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
    margin-bottom: 1.8rem;
}
.prog-recap-stat { text-align: center; }
.prog-recap-stat-icon { font-size: 1.1rem; color: var(--accent-dim); margin-bottom: 0.3rem; }
.prog-recap-stat-val {
    font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--text);
}
.prog-recap-stat-label {
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-dim); margin-top: 0.15rem;
}

/* Mood/Prod chart */
.prog-chart-section { margin-top: 1rem; }
.prog-chart-title {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.8rem;
}
.prog-chart {
    display: flex; gap: 0; height: 100px;
    border-bottom: 1px solid var(--border);
}
.prog-chart-col {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
}
.prog-chart-bars {
    display: flex; gap: 2px; align-items: flex-end;
    width: 100%; height: 100%; justify-content: center;
}
.prog-chart-bar {
    width: 8px; border-radius: 2px 2px 0 0; min-height: 0;
    transition: height .6s ease;
}
.prog-chart-bar--mood { background: var(--accent); opacity: 0.7; }
.prog-chart-bar--prod { background: #4a88ff; opacity: 0.7; }
.prog-chart-label {
    font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.04em;
    color: var(--text-dim); margin-top: 0.3rem; text-transform: uppercase;
}
.prog-chart-legend {
    display: flex; gap: 1.2rem; justify-content: center; margin-top: 0.6rem;
}
.prog-legend-item {
    display: flex; align-items: center; gap: 0.3rem;
    font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim);
}
.prog-legend-dot { width: 8px; height: 8px; border-radius: 2px; }

/* Year selector */
.year-selector { display: flex; gap: 0.3rem; }
.year-btn {
    font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em;
    padding: 0.35rem 0.7rem; border-radius: var(--radius);
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); text-decoration: none;
    transition: all .15s ease;
}
.year-btn:hover { border-color: var(--accent-dim); color: var(--text); }
.year-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; }

/* Recap play button */
.btn-recap-play {
    font-size: 1rem; padding: 0.8rem 2rem;
    letter-spacing: 0.05em;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }

/* ---- MOBILE NAV TOGGLE ---- */
.mobile-nav-toggle {
    display: none;
    position: fixed; top: 0.7rem; left: 0.7rem; z-index: 200;
    width: 42px; height: 42px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--accent);
    font-size: 1.3rem; cursor: pointer;
    align-items: center; justify-content: center;
}
.sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 99;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
}

/* ---- RESPONSIVE ---- */

/* Tablet — 1024px */
@media (max-width: 1024px) {
    .content { padding: 2rem 2rem; max-width: 100%; }
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .prog-months-grid { grid-template-columns: repeat(6, 1fr); }
    .prog-recap-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Small tablet — 900px */
@media (max-width: 900px) {
    .day-grid { grid-template-columns: 1fr; }
    .two-col { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
    .prog-quarters-grid { grid-template-columns: 1fr 1fr; }
    .prog-year-bar { flex-wrap: wrap; }
    .prog-stat { min-width: 33%; }
    .form-row { flex-direction: column; }
    .form-row label { min-width: 100%; }
}

/* Large mobile — 768px */
@media (max-width: 768px) {
    .mobile-nav-toggle { display: flex; }
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 150;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar.open + .sidebar-overlay { display: block; }
    .content { margin-left: 0; padding: 1.5rem 1.2rem; padding-top: 3.5rem; }
    .page-title { font-size: 1.6rem; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .prog-months-grid { grid-template-columns: repeat(4, 1fr); }
    .prog-achievements-grid { grid-template-columns: 1fr; }

    /* Objective cards: stack selects above text */
    .obj-card-header { flex-wrap: wrap; }
    .obj-card-text { min-width: 100%; order: 3; }
    .obj-priority { width: auto; flex: 0 0 auto; }
    .obj-category { min-width: 0; flex: 1; }
    .obj-remove-btn { order: 4; margin-left: auto; }
}

/* Phone — 480px */
@media (max-width: 480px) {
    .content { padding: 1rem 0.8rem; padding-top: 3.2rem; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .page-title { font-size: 1.4rem; }
    .week-strip { gap: 0.15rem; padding: 0.4rem; }
    .wd-label { font-size: 0.6rem; }
    .wd-num { font-size: 0.85rem; }
    .dot { width: 44px; height: 44px; font-size: 0.9rem; }
    .prog-hero { flex-direction: column; text-align: center; padding: 1.2rem; }
    .prog-level-badge { width: 60px; height: 60px; }
    .prog-quarters-grid { grid-template-columns: 1fr; }
    .prog-months-grid { grid-template-columns: repeat(3, 1fr); }
    .prog-recap-grid { grid-template-columns: repeat(2, 1fr); }
    .prog-recap { padding: 1.2rem; }
    .prog-recap-xp { font-size: 2rem; }
    .prog-year-bar { flex-direction: column; }
    .prog-stat { border-right: none; border-bottom: 1px solid var(--border); }
    .prog-stat:last-child { border-bottom: none; }

    .cat-day-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .cat-day-label { min-width: auto; }
    /* Cards more spacious on small screens */
    .obj-card { padding: 0.7rem; }
    .obj-card-header { gap: 0.4rem; }
    .entry-item { flex-wrap: wrap; gap: 0.3rem; }
    .item-list { gap: 0.15rem; }
    .tab-btn { padding: 0.55rem 0.7rem; font-size: 0.78rem; }
    .btn-primary { padding: 0.7rem 1.2rem; font-size: 0.85rem; width: 100%; text-align: center; }
    .btn-secondary { width: 100%; text-align: center; }
    .btn-ghost { font-size: 0.78rem; }
    .two-col .item-list { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; }
    .two-col .item-link { padding: 0.4rem 0.6rem; flex: 0 0 auto; }
    .two-col .item-label { font-size: 0.82rem; }
    .two-col .item-sub { display: none; }
}

/* ---- STRUCTURED RETROSPECTIVE ---- */
.retro-structured { display: flex; flex-direction: column; gap: 1.5rem; }

.retro-section-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

/* Done recap */
.retro-section--done { border-left: 3px solid var(--success); padding-left: 1rem; }
.retro-done-list, .retro-cancelled-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.retro-done-item { color: var(--text); font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
.retro-section--cancelled { border-left: 3px solid var(--danger); padding-left: 1rem; }
.retro-cancelled-item { color: var(--text-muted); font-size: 0.9rem; text-decoration: line-through; display: flex; align-items: center; gap: 0.5rem; }

/* Favorites grid */
.retro-favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; }
.retro-fav-item { display: flex; flex-direction: column; gap: 0.3rem; }
.retro-fav-label { display: inline-block; width: fit-content; font-size: 0.75rem; margin-bottom: 0.2rem; }
.retro-fav-textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.5rem;
    resize: vertical;
}
.retro-fav-textarea:focus { border-color: var(--accent); outline: none; }

/* Uncompleted analysis */
.retro-undone-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-dim);
    border-radius: var(--radius);
    padding: 0.8rem;
    margin-bottom: 0.6rem;
}
.retro-undone-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font-size: 0.9rem; }
.retro-undone-text { font-weight: 600; color: var(--text); }
.retro-undone-fields { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.retro-undone-reason-label,
.retro-undone-action-label,
.retro-undone-newtext-label { font-size: 0.8rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.2rem; }
.retro-undone-reason { flex: 1; min-width: 180px; }
.retro-undone-reason,
.retro-undone-new-text {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.4rem 0.5rem;
}
.retro-undone-reason:focus,
.retro-undone-new-text:focus { border-color: var(--accent); outline: none; }
.retro-undone-action {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.82rem;
    padding: 0.4rem 0.5rem;
}

/* Carry-forward banner */
.retro-carry-banner {
    background: var(--bg-hover);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}
.retro-carry-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; }
.retro-carry-item { font-size: 0.9rem; color: var(--text); padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.retro-carry-item:last-child { border-bottom: none; }
.retro-carry-reason { color: var(--text-muted); font-size: 0.8rem; font-style: italic; }
.retro-carry-check-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.retro-carry-check-label input[type="checkbox"] { accent-color: var(--accent); width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; }

@media (max-width: 600px) {
    .retro-favorites-grid { grid-template-columns: 1fr; }
    .retro-undone-fields { flex-direction: column; }
}

/* ==========================================================
   OBJECTIVE ROWS — flat hierarchical view
   ========================================================== */
.obj-rows-block { margin-top: 1.2rem; }
.obj-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.4rem;
    padding: 0.4rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.obj-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: background 0.15s, opacity 0.15s;
    --depth: 0;
    margin-left: calc(var(--depth) * 1.4rem);
}
.obj-row:hover { background: var(--bg-hover); }
.obj-row--done .obj-row-text { text-decoration: line-through; color: var(--text-muted); }
.obj-row--done { opacity: 0.65; }
.obj-row--descendant {
    background: transparent;
    border-style: dashed;
    border-color: var(--border-hi);
    font-size: 0.88rem;
    color: var(--text-muted);
}
.obj-row--descendant .obj-row-text-ro { flex: 1; }
.obj-row-check { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex-shrink: 0; cursor: pointer; }
.obj-row-text {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 0.98rem;
    padding: 0.2rem 0.3rem;
    min-width: 12ch;
}
.obj-row-text:focus { outline: none; border-bottom-color: var(--accent); background: var(--bg); }
.obj-row-cat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0.2rem 0.4rem;
    flex-shrink: 0;
}
.obj-row-ancestors {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.anc-arrow { color: var(--text-dim); }
.anc-sep { color: var(--text-dim); }
.anc-item { color: var(--text-muted); white-space: nowrap; }
.anc-item--life { color: var(--accent); }
.btn-sub, .btn-add-row {
    background: transparent;
    border: 1px dashed var(--border-hi);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    padding: 0.25rem 0.55rem;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.btn-sub:hover, .btn-add-row:hover { color: var(--accent); border-color: var(--accent); }
.btn-add-row { margin-top: 0.5rem; }
.obj-row-remove {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.3rem;
    flex-shrink: 0;
}
.obj-row-remove:hover { color: var(--danger); }
.obj-row-status-ro {
    color: var(--text-dim);
    font-size: 0.95rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
}
.obj-row-status-ro[data-status="done"] { color: var(--success); }
.obj-row-text-ro {
    color: var(--text-muted);
    font-size: 0.88rem;
    flex: 1;
}
.obj-row-level {
    background: var(--bg-hover);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Life aside list with +sous-objectif button */
.life-item-wrap { display: flex; align-items: center; gap: 0.3rem; }
.life-item-wrap .item-link { flex: 1; }
.life-item-wrap .btn-sub { font-size: 0.7rem; padding: 0.18rem 0.4rem; }

/* ==========================================================
   LIFE — flat cards (full-width, one per objective)
   ========================================================== */
.life-cards {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 900px;
    margin: 1rem auto;
}
.life-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    position: relative;
    transition: opacity 0.15s, border-color 0.15s;
}
.life-card--new { border-color: var(--accent); }
.life-card--done   { opacity: 0.55; border-color: var(--success); }
.life-card--cancelled,
.life-card--failed { opacity: 0.55; border-color: var(--danger); }
.life-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.life-card-status,
.life-card-cat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
    flex-shrink: 0;
}
.life-card-title {
    flex: 1;
    min-width: 12ch;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    padding: 0.25rem 0.3rem;
}
.life-card-title:focus { outline: none; border-bottom-color: var(--accent); background: var(--bg); }
.life-card--done .life-card-title { text-decoration: line-through; }
.life-card-progress {
    background: var(--bg-hover);
    border-radius: var(--radius);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
}
.life-card-why-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}
.life-card-why {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    padding: 0.5rem 0.6rem;
    margin-top: 0.2rem;
    resize: vertical;
}
.life-card-why:focus { outline: none; border-color: var(--accent); }
.life-card-actions { display: flex; gap: 0.5rem; }
.life-card-delete-form {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
}
.life-card-delete-form .btn-ghost {
    font-size: 0.74rem;
    padding: 0.2rem 0.5rem;
}
.btn-danger { color: var(--danger); }
.btn-danger:hover { color: var(--danger); border-color: var(--danger); }

/* ==========================================================
   OBJECTIVE COLUMNS — 5-column grid by category
   ========================================================== */
.obj-cols-block { margin-top: 1.2rem; }
.obj-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin-top: 0.4rem;
}
.obj-col {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.4rem 0.4rem;
    min-height: 6rem;
}
.obj-col-header {
    text-align: center;
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
}
.obj-col-cards {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.obj-card-row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.15s, opacity 0.15s;
    min-width: 0;
}
.obj-card-row:hover { border-color: var(--border-hi); }
.obj-card-row--done { opacity: 0.6; }
.obj-card-row--done .obj-card-text { text-decoration: line-through; color: var(--text-muted); }
.obj-card-text {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 0.92rem;
    line-height: 1.35;
    padding: 0.35rem 0.45rem;
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
    field-sizing: content;
}
.obj-card-text:focus { outline: none; border-color: var(--accent); }
.obj-card-ancestors {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-style: italic;
    line-height: 1.3;
    word-break: break-word;
}
.obj-card-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.obj-card-controls .obj-row-check { margin-right: auto; }
.obj-card-progress {
    background: var(--bg-hover);
    border-radius: var(--radius);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
}
.obj-col .btn-add-row {
    margin-top: auto;
    width: 100%;
}
.obj-col .btn-sub {
    font-size: 0.66rem;
    padding: 0.18rem 0.4rem;
}
.cat-badge--none { background: var(--bg-hover); color: var(--text-dim); }

@media (max-width: 1100px) {
    .obj-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .obj-cols { grid-template-columns: 1fr; }
}

/* ==========================================================
   MODAL — recursive sub-objective form
   ========================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.4rem 1.6rem;
}
.modal h3 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}
.modal-context {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
    margin-bottom: 1rem;
}
.modal-tree { display: flex; flex-direction: column; }
.modal-node {
    border-left: 2px solid var(--border);
    padding: 0.5rem 0 0.4rem 0.7rem;
    margin-top: 0.5rem;
}
.modal-node:first-child { border-left: none; padding-left: 0; }
.modal-node-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.modal-node-level {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    min-width: 4rem;
}
.modal-node-text {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    padding: 0.4rem 0.5rem;
}
.modal-node-text:focus { outline: none; border-color: var(--accent); }
.modal-node-cat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0.4rem 0.5rem;
}
.modal-node-children { padding-left: 0.5rem; }
.modal-node-actions { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.modal-node-add,
.modal-node-remove {
    background: transparent;
    border: 1px dashed var(--border-hi);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}
.modal-node-add:hover { color: var(--accent); border-color: var(--accent); }
.modal-node-remove:hover { color: var(--danger); border-color: var(--danger); }
.modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ==========================================================
   LIFE — column layout overrides (compatible with obj-cols)
   ========================================================== */
.life-card {
    /* Wider cards in column layout, with the why textarea inline below */
}
.life-card-why-label { margin-top: 0.4rem; }
.life-cards { max-width: none; margin: 1rem 0; }

/* LIFE CARD overrides for column layout */
.obj-col .life-card { padding: 0.5rem 0.55rem; }
.obj-col .life-card-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}
.obj-col .life-card-status,
.obj-col .life-card-cat {
    font-size: 0.7rem;
    padding: 0.18rem 0.35rem;
}
.obj-col .life-card-title {
    flex: 1 1 100%;
    font-size: 0.95rem;
    padding: 0.18rem 0.25rem;
}
.obj-col .life-card-why {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 0.82rem;
    padding: 0.35rem 0.4rem;
    resize: vertical;
}
.obj-col .life-card-bottom {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}
.obj-col .life-card-bottom .btn-secondary {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}
.obj-col .life-card-progress {
    background: var(--bg-hover);
    border-radius: var(--radius);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
}
.obj-col .life-card-delete-form {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
}
.obj-col .life-card-delete-form .btn-ghost {
    border: none;
    font-size: 0.95rem;
    padding: 0 0.3rem;
    line-height: 1;
}
.obj-col .life-card { position: relative; }

.life-new-form {
    max-width: 600px;
    margin: 1rem 0;
}