/* CARDS */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.card:hover { border-color: var(--border2); } /* No heavy shadows */

.card h2{font-size:18px;font-weight:700;margin:0 0 12px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* BUTTONS */
.btn { border: 1px solid var(--border); background: var(--card2); color: var(--text); font-size: 13px; padding: 6px 14px; border-radius: 8px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.btn:hover { background: var(--border2); border-color: var(--text2); }
.btn-done { background: var(--bg2); border-color: var(--c-green); color: var(--c-green); }
.btn-done:hover { background: rgba(93,170,122,0.1); }
.btn-skip{border:1px solid rgba(248,113,113,.2);color:var(--c-red);}.btn-skip:hover{background:rgba(248,113,113,.08);}
.btn-undo{border-color:rgba(251,191,36,.3);color:var(--c-amber);}
.btn-working{border:1px solid rgba(74,154,245,.3);color:var(--c-blue);}.btn-working:hover{background:rgba(74,154,245,.08);}
.btn-cancel{border:1px solid rgba(248,113,113,.2);color:var(--c-red);font-size:12px;}.btn-cancel:hover{background:rgba(248,113,113,.08);}

/* CHECKLIST BLOCKS */
.cl-block{margin-bottom:10px;border-radius:18px;overflow:hidden;border:1px solid var(--glass-border);transition:box-shadow .25s ease,border-color .25s,transform .2s;}
.cl-block:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);}
.cl-block[data-block="morning"]{background:var(--gradient-morning);}
.cl-block[data-block="afternoon"]{background:var(--gradient-afternoon);}
.cl-block[data-block="night"]{background:var(--gradient-night);}
.cl-block[data-block="sleep"]{background:var(--gradient-sleep);}
.cl-block-header{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;user-select:none;transition:background .15s;}
.cl-block-header:hover{background:var(--glass-hover);}
/* Calm hover motion — was scale(1.25) rotate(10deg) on the bouncy curve. */
.cl-block-icon{font-size:24px;transition:transform 150ms cubic-bezier(0.16,1,0.3,1);}
.cl-block-header:hover .cl-block-icon{transform:scale(1.05);}
.cl-block-title{font-size:18px;font-weight:700;flex:1;}
.cl-block-stats{display:flex;align-items:center;gap:10px;}
.cl-block-count{font-size:14px;color:var(--muted);font-weight:600;}
.cl-block-xp{font-size:12px;color:var(--xp-gold);font-weight:700;opacity:.7;}
.cl-mini-bar{width:70px;height:6px;border-radius:3px;background:var(--border);overflow:hidden;}
.cl-mini-fill{height:100%;border-radius:3px;transition:width .4s ease;}
.cl-mini-dots{display:flex;gap:4px;align-items:center;}
.cl-mini-dot{width:9px;height:9px;border-radius:50%;transition:transform 150ms cubic-bezier(0.16,1,0.3,1);}
.cl-mini-dot:hover{transform:scale(1.3);}
.cl-mini-dot.done{background:var(--c-green);box-shadow:0 0 6px rgba(74,222,128,.4);}
.cl-mini-dot.skip{background:var(--c-red);box-shadow:0 0 6px rgba(248,113,113,.3);}
.cl-mini-dot.pending{background:var(--border2);}
.cl-chevron{font-size:14px;color:var(--muted);transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);}
.cl-block.collapsed .cl-chevron{transform:rotate(-90deg);}
.cl-block-body{padding:0 20px 12px;overflow:hidden;transition:max-height .35s ease,opacity .25s ease,padding .2s;}
.cl-block.collapsed .cl-block-body{max-height:0!important;opacity:0;padding:0 20px;}
.cl-block.all-done{border-color:rgba(74,222,128,.3);box-shadow:0 0 20px rgba(74,222,128,.08);}
.cl-block.all-done .cl-block-title::after{content:' ✨';animation:sparkle .6s ease;}
@keyframes sparkle{0%{opacity:0;transform:scale(0);}50%{opacity:1;transform:scale(1.3);}100%{opacity:1;transform:scale(1);}}

/* CHECKLIST ROWS */
.ck-row{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid rgba(255,255,255,.03);transition:all .15s ease;border-radius:10px;}
[data-theme="light"] .ck-row{border-bottom-color:rgba(0,0,0,.03);}
.ck-row:last-child{border-bottom:none;}
.ck-row:hover{background:var(--glass-hover);transform:translateX(3px);}
.ck-row.is-done{opacity:.4;}.ck-row.is-done .ck-title{text-decoration:line-through;}
.ck-row.is-skipped{opacity:.25;}.ck-row.is-skipped .ck-title{text-decoration:line-through;color:var(--c-red);}
.ck-row.just-done{animation:rowDone .5s ease;}
@keyframes rowDone{0%{background:rgba(74,222,128,.15);}100%{background:transparent;}}
.ck-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:transform 150ms cubic-bezier(0.16,1,0.3,1);}
.ck-row:hover .ck-icon{transform:scale(1.05);}
.ck-info{flex:1;min-width:0;}
.ck-title{font-size:15px;font-weight:500;}
.ck-sub{font-size:12px;color:var(--muted2);}
.ck-meta{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
/* Status-only row + Log button — replaces the always-visible inline time/note inputs and
   Done/Skip buttons that used to sit on every checklist row. */
.ck-status{font-size:12px;font-weight:600;color:var(--muted);flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ck-status-done{color:var(--c-green);}
.ck-status-skip,.ck-status-holiday{color:var(--muted2);}
.ck-log-btn{font-size:11px;font-weight:600;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--text2);cursor:pointer;flex-shrink:0;transition:border-color 150ms cubic-bezier(0.16,1,0.3,1),color 150ms cubic-bezier(0.16,1,0.3,1);}
.ck-log-btn:hover{border-color:var(--c-blue);color:var(--c-blue);}

/* Trend chart tooltip — instant on hover, replaces the native `title` attribute (slow default
   delay, unstyled). */
.trend-tooltip{position:fixed;z-index:1000;pointer-events:none;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;box-shadow:0 4px 16px rgba(0,0,0,.15);font-size:11px;white-space:nowrap;}
.trend-tooltip .tt-date{font-weight:700;color:var(--text);margin-bottom:4px;font-variant-numeric:tabular-nums;}
.trend-tooltip .tt-row{display:flex;align-items:center;gap:6px;color:var(--muted);padding:1px 0;}
.trend-tooltip .tt-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.ck-actions{display:flex;gap:5px;flex-shrink:0;}
.ck-time{width:80px;padding:6px 7px;font-size:13px;border-radius:8px;border:1px solid var(--border);background:var(--card2);color:var(--text);text-align:center;transition:border-color .15s;}
.ck-time:focus{border-color:var(--c-blue);outline:none;box-shadow:0 0 8px rgba(74,154,245,.15);}
.ck-time:disabled{opacity:1;-webkit-text-fill-color:var(--text);color:var(--text);background:transparent;border-color:transparent;cursor:default;}
.ck-note{width:120px;padding:6px 8px;font-size:13px;border-radius:8px;border:1px solid var(--border);background:var(--card2);color:var(--text);transition:border-color .15s;}
.ck-note:focus{border-color:var(--c-purple);outline:none;box-shadow:0 0 8px rgba(167,139,250,.12);}
.ck-note::placeholder,.ck-time::placeholder{color:var(--muted2);}
select.wtype{background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:13px;padding:5px 6px;border-radius:8px;}
.holiday-badge{font-size:11px;padding:3px 8px;border-radius:5px;background:rgba(251,191,36,.1);color:var(--c-amber);border:1px solid rgba(251,191,36,.2);}

/* XP POPUP / LEVEL-UP TOAST — no gamification, simple point system: a quiet "+N XP" float and
   a small toast on level-up. Confetti and the full-screen level-up card are gone (also: neither
   .xp-popup nor .level-up-overlay had matching CSS before, so both silently rendered unstyled —
   this is the first time either has actually been styled). */
@keyframes xpFloat{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-28px);}}
.xp-popup{position:fixed;z-index:1000;pointer-events:none;font-size:13px;font-weight:700;color:var(--c-teal);animation:xpFloat 1.3s ease forwards;}

.level-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);opacity:0;display:flex;align-items:baseline;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 16px;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:1000;transition:opacity 200ms cubic-bezier(0.16,1,0.3,1),transform 200ms cubic-bezier(0.16,1,0.3,1);}
.level-toast.show{opacity:1;transform:translate(-50%,0);}
.level-toast-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--xp-gold);}
.level-toast-title{font-size:14px;font-weight:700;color:var(--text);}

/* PATTERNS */
.slip-row{display:flex;align-items:center;gap:12px;padding:6px 0;}
.slip-label{width:150px;font-size:14px;flex-shrink:0;font-weight:500;}
.slip-track{flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden;}
.slip-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.slip-count{width:46px;text-align:right;font-size:13px;color:var(--muted);font-weight:500;}

/* TREND CHART */
.trend-pt{transition:transform .15s ease;transform-box:fill-box;transform-origin:center;cursor:pointer;}.trend-pt:hover{transform:scale(2);}

/* TASKS */
.tform{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.tform input,.tform select{background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:14px;padding:10px 14px;border-radius:10px;outline:none;transition:all .15s;}
.tform input:focus,.tform select:focus{border-color:var(--c-blue);box-shadow:0 0 10px rgba(74,154,245,.1);}
.add-btn{background:var(--c-green);color:#0a0a0a;border:none;font-size:14px;padding:10px 22px;border-radius:9999px;font-weight:600;box-shadow:0 4px 14px rgba(0,212,164,.2);transition:all .15s;}
.add-btn:hover{transform:translateY(-1px);}
.trow{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);position:relative;transition:background .1s;min-width:0;max-width:100%;}
.trow:last-child{border-bottom:none;}
/* Flat category-group divider — a plain muted label, never a card or colored block, so
   grouping reads as structure rather than decoration (POS Design Bible: restraint, no
   surfaces added purely for hierarchy). */
.cat-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 12px 4px;}
.cat-group-label:first-child{padding-top:2px;}
.tc-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);}
.tc-item:last-child{border-bottom:none;}
.tc-check{background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted);padding:0;line-height:1;flex-shrink:0;}
.tc-item-done .tc-text{text-decoration:line-through;color:var(--muted);}
.tc-text{flex:1;font-size:13px;color:var(--text);word-break:break-word;}
.tc-del{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:2px 6px;flex-shrink:0;}
.tc-del:hover{color:var(--c-red);}
.trow-checklist-frac{background:var(--bg2);color:var(--muted);font-weight:600;}
.trow:hover{background:var(--glass-hover);}
.trow-completed{opacity:.55;}
.trow-cancelled{opacity:.45;}
.tname{font-size:14px;font-weight:500;color:var(--text);min-width:0;word-break:break-word;line-height:1.3;}
.tname-strike{text-decoration:line-through;}
.trow-tag{font-size:10px;font-weight:600;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;}
.trow-tag-working{background:rgba(93,170,122,.12);color:var(--c-green);}
.trow-tag-done{background:rgba(93,170,122,.12);color:var(--c-green);}
.trow-tag-cancel{background:rgba(212,90,74,.1);color:var(--c-red);}
.trow-tag-date{background:var(--bg2);color:var(--muted);font-weight:500;}
.trow-prio-high{background:rgba(212,90,74,.1);color:var(--c-red);}
.trow-prio-medium{background:rgba(251,191,36,.12);color:var(--c-amber);}
.trow-prio-low{background:var(--bg2);color:var(--muted);}
.tname-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.trow-note{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trow-kebab{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .1s;line-height:1;flex-shrink:0;}
.trow-kebab:hover{background:var(--glass-hover);color:var(--text);}
.trow-menu{display:none!important;}

.trow-menu-item{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:background .1s;}
.trow-menu-item:hover{background:var(--glass-hover);}
.trow-menu-item.danger{color:var(--c-red);}
.trow-menu-sep{height:1px;background:var(--border);margin:2px 8px;}
.mini-label{font-size:13px;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 6px;font-weight:700;}.mini-label:first-child{margin-top:0;}

.badge{font-size:12px;padding:4px 10px;border-radius:6px;white-space:nowrap;font-weight:600;}
.status-badge{font-size:11px;padding:3px 9px;border-radius:5px;font-weight:600;}
.status-working{background:rgba(74,154,245,.12);color:var(--c-blue);}
.status-completed{background:rgba(74,222,128,.12);color:var(--c-green);}
.status-cancelled{background:rgba(248,113,113,.1);color:var(--c-red);}
.pulsing-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c-blue);margin-right:5px;animation:pulse 1.5s infinite;}

/* CATEGORIES */
.cat-personal{background:var(--badge-blue-bg);color:var(--badge-blue-text);}
.cat-family{background:var(--badge-purple-bg);color:var(--badge-purple-text);}
.cat-health{background:var(--badge-teal-bg);color:var(--badge-teal-text);}
.cat-nightshift{background:rgba(167,139,250,.08);color:#c4b5fd;}
.cat-bizresearch{background:var(--badge-amber-bg);color:var(--badge-amber-text);}
.cat-learning{background:rgba(34,211,238,.08);color:#67e8f9;}
.cat-blogging{background:var(--badge-pink-bg);color:var(--badge-pink-text);}
[data-theme="light"] .cat-nightshift{background:rgba(124,58,237,.06);color:#6d28d9;}
[data-theme="light"] .cat-learning{background:rgba(8,145,178,.06);color:#0e7490;}
/* Overflow slots for categories added beyond the original 7 defaults — getCatColor() assigns
   one of these deterministically by id so any new category gets a distinct, stable color
   instead of always rendering as "Personal" blue (js/features/categories.js). */
.cat-x1{background:rgba(212,90,74,.1);color:#f87171;}
.cat-x2{background:rgba(201,138,74,.1);color:#fb923c;}
.cat-x3{background:rgba(45,140,167,.1);color:#38bdf8;}
.cat-x4{background:rgba(163,190,71,.1);color:#a3e635;}
[data-theme="light"] .cat-x1{background:rgba(212,90,74,.08);color:#b91c1c;}
[data-theme="light"] .cat-x2{background:rgba(201,138,74,.08);color:#9a5b1f;}
[data-theme="light"] .cat-x3{background:rgba(45,140,167,.08);color:#0369a1;}
[data-theme="light"] .cat-x4{background:rgba(163,190,71,.08);color:#4d7c0f;}
.cat-manager{margin-bottom:12px;}.cat-manager summary{font-size:13px;color:var(--muted);cursor:pointer;font-weight:500;padding:5px 0;}
.cat-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.cat-tag{display:flex;align-items:center;gap:4px;font-size:12px;padding:4px 9px;border-radius:6px;border:1px solid var(--border);background:var(--card2);transition:border-color 150ms cubic-bezier(0.16,1,0.3,1);}.cat-tag:hover{border-color:var(--border2);}
.cat-tag .remove-cat{background:none;border:none;color:var(--c-red);font-size:12px;opacity:.3;padding:0 2px;}.cat-tag .remove-cat:hover{opacity:1;}
.cat-add-row{display:flex;gap:5px;margin-top:6px;}
.cat-add-row input{flex:1;padding:5px 8px;font-size:13px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);}
.cat-add-row button{padding:5px 11px;font-size:13px;border-radius:6px;border:1px solid var(--c-blue);background:none;color:var(--c-blue);}

/* TARGETS */
.target-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.target-form input,.target-form select{background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:14px;padding:10px 14px;border-radius:10px;outline:none;transition:all .15s;}
.target-form input:focus,.target-form select:focus{border-color:var(--c-teal);box-shadow:0 0 10px rgba(52,211,153,.1);}
.target-row{padding:14px 0;border-bottom:1px solid var(--border);}.target-row:last-child{border-bottom:none;}.target-achieved{opacity:.85;}.target-achieved .target-fill{background:linear-gradient(90deg,var(--c-green),var(--c-teal))!important;}
.trow-arrows{display:flex;flex-direction:column;gap:0;margin-left:auto;margin-right:2px;}
.trow-arrow{background:none;border:none;cursor:pointer;font-size:11px;padding:0 4px;line-height:1.1;color:var(--muted);opacity:.6;transition:opacity .15s;}.trow-arrow:hover{opacity:1;color:var(--c-teal);}
.log-pct-btn{font-size:12px;padding:5px 10px;border-radius:6px;border:1px solid var(--c-teal);background:rgba(93,170,122,.08);color:var(--c-teal);cursor:pointer;transition:background 150ms cubic-bezier(0.16,1,0.3,1);font-weight:500;}.log-pct-btn:hover{background:rgba(93,170,122,.18);}.log-pct-btn.neg{border-color:var(--c-red);background:rgba(248,113,113,.06);color:var(--c-red);}.log-pct-btn.neg:hover{background:rgba(248,113,113,.15);}


.target-log-list{margin-top:6px;padding:6px 8px;background:var(--bg2);border-radius:6px;font-size:11px;color:var(--muted);}

.target-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.target-name{font-size:15px;font-weight:600;}.target-name .target-horizon{font-size:12px;color:var(--muted);font-weight:400;}
.target-count{font-size:14px;color:var(--muted);font-weight:600;}
.target-bar{height:10px;border-radius:5px;background:var(--border);overflow:hidden;margin-bottom:8px;}
.target-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--c-teal),var(--c-green));transition:width .5s ease;}
.target-actions{display:flex;gap:6px;align-items:center;}
.target-actions button{font-size:13px;padding:5px 14px;border-radius:6px;border:1px solid var(--border);background:var(--glass);color:var(--text2);transition:all .12s;font-weight:500;}.target-actions button:hover{transform:scale(1.04);border-color:var(--c-teal);}
.target-actions input{width:60px;padding:5px 6px;font-size:13px;border-radius:6px;border:1px solid var(--border);background:var(--card2);color:var(--text);text-align:center;}
.target-delete{font-size:14px;color:var(--muted2);background:none;border:none;padding:2px 5px;opacity:.3;transition:all .15s;margin-left:auto;}.target-delete:hover{opacity:1;color:var(--c-red);}

/* STALE ARCHIVE */
.stale-card{border:1px solid rgba(251,191,36,.2);background:rgba(251,191,36,.03);}.stale-card h2{color:var(--c-amber);}
.stale-info{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.5;}
.archive-btn{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;border:2px solid var(--c-amber);background:none;color:var(--c-amber);transition:all .15s;margin-bottom:10px;}.archive-btn:hover{background:rgba(251,191,36,.1);transform:scale(1.03);}
.stale-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border);font-size:14px;}.stale-row:last-child{border-bottom:none;}
.stale-date{font-size:12px;color:var(--c-amber);margin-left:auto;}

/* SYNC / MODAL */
.sync-bar{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:12px;color:var(--muted);margin-bottom:16px;flex-wrap:wrap;position:relative;}
.sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.sync-dot.local{background:var(--c-amber);box-shadow:0 0 8px rgba(251,191,36,.3);}
.sync-dot.connected{background:var(--c-green);box-shadow:0 0 8px rgba(74,222,128,.3);animation:pulse 2s infinite;}
.sync-dot.error{background:var(--c-red);box-shadow:0 0 8px rgba(212,90,74,.35);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.sync-btn{margin-left:auto;padding:4px 12px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--muted);font-size:12px;transition:all .15s;position:relative;z-index:1;}.sync-btn:hover{color:var(--c-blue);border-color:var(--c-blue);}
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.active{display:flex;}
.modal { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 440px; max-width: 90vw; margin: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
@keyframes modalIn{from{transform:scale(.9) translateY(12px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.modal h3{font-size:18px;margin-bottom:14px;font-weight:700;}
.modal label{font-size:14px;color:var(--muted);display:block;margin-bottom:5px;}
.modal input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;margin-bottom:14px;outline:none;}.modal input:focus{border-color:var(--c-blue);}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;}
.modal-actions button{padding:8px 18px;border-radius:10px;font-size:14px;font-weight:500;border:1px solid var(--border);background:var(--card);color:var(--text);transition:transform .12s;}.modal-actions button:hover{transform:scale(1.04);}
.modal-actions .primary{background:linear-gradient(135deg,var(--c-blue),var(--c-purple));border:none;color:#fff;}
.empty-state{text-align:center;padding:18px;color:var(--muted);font-size:14px;font-style:italic;}

/* RESPONSIVE */
@media(max-width:960px){
  .content-row{flex-direction:column;}
  .ringstack{width:100%;flex-direction:row;overflow-x:auto;position:relative;top:0;gap:10px;padding-bottom:8px;flex-wrap:wrap;}
  .rr-card,.rr-streak { background: var(--card); border-radius: 12px; padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--border); }
  .pie-sidebar { background: var(--card); border-radius: 12px; padding: 16px; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .wrap{padding:0 16px 60px;}
  .grid-2,.top-task-row{grid-template-columns:1fr;}
  .tform,.target-form{flex-direction:column;}
  .ck-meta{flex-wrap:wrap;}
  .xp-bar-wrap{display:none;}
  .appheader{padding:16px 16px 12px;}
  .hdr-title{font-size:24px;}
}
@media(max-width:600px){
  html{font-size:14px;}
  .wrap{padding:0 8px 70px;}
  .appheader{padding:10px 8px 8px;flex-wrap:wrap;gap:6px;max-width:100vw;}
  .hdr-title{font-size:18px;}
  .hdr-greeting{font-size:11px;}
  .hdr-right{width:100%;justify-content:space-between;}
  .hdr-av{width:36px;height:36px;font-size:13px;}
  .hdr-notes-btn{width:34px;height:34px;font-size:14px;}
  .theme-btn{padding:6px 10px;font-size:13px;}
  .sync-bar{padding:5px 8px;font-size:11px;gap:4px;flex-wrap:wrap;max-width:100%;}
  .sync-btn{padding:4px 10px;font-size:11px;}
  #notesModal .modal { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 440px; max-width: 90vw; margin: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
  #notesModal textarea{min-height:60vh!important;}
  .top-task-row{grid-template-columns:1fr!important;gap:8px!important;}
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
  .card h2{font-size:15px;margin-bottom:8px;}
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
  .trow{gap:6px;padding:8px 8px;}
  .tname{font-size:13px;}
  .badge{font-size:9px;padding:2px 5px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .trow-tag{font-size:9px;padding:2px 5px;}
  .trow-arrows{margin-left:0;margin-right:0;}
  .trow-arrow{font-size:10px;padding:0 2px;}
  .trow-kebab{padding:2px 4px;font-size:16px;}
  .tform input[style*="min-width"]{min-width:0!important;}
  .tform input,.tform select{min-width:0;width:100%;}
  .target-form input,.target-form select{min-width:0!important;width:100%;}
  .section-label { font-size: 14px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; margin: 32px 0 16px; font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  /* Rings: 2-col grid instead of full-width stack */
  .ringstack{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%;flex-direction:unset;overflow:visible;flex-wrap:unset;}
  .rr-card { background: var(--card); border-radius: 12px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--border); transition: border-color 0.2s; }
  .rr-ring{width:70px;height:70px;}
  .rr-val{font-size:18px;}
  .rr-label{font-size:11px;}
  .rr-streak { background: var(--card); border-radius: 12px; padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--border); }
  .streak-val{font-size:34px!important;}
  .streak-unit{font-size:11px!important;}
  .streak-action{padding:5px 12px;font-size:12px;min-height:32px;}
  /* Checklist rows: stack vertically on mobile */
  
  .ck-icon{width:32px;height:32px;font-size:15px;border-radius:8px;}
  .ck-info{flex:1;min-width:120px;}
  .ck-title{font-size:13px;}
  
  .ck-meta select,.ck-meta input{min-height:30px;font-size:12px;}
  .ck-actions{gap:4px;}
  .ck-actions button{min-height:30px;font-size:12px;padding:4px 10px;}
  .ck-note{font-size:12px;min-height:28px;flex:1;}
  .ck-sub{font-size:11px;}
  .ck-status-badge{font-size:10px!important;padding:2px 6px!important;}
  /* Task rows: single line on mobile */
  .trow{gap:6px;padding:8px 10px;}
  .trow .badge{font-size:10px;padding:2px 6px;flex-shrink:0;}
  .trow .tname{font-size:13px;flex:1;min-width:0;word-break:break-word;line-height:1.3;}
  .trow-tag{font-size:9px!important;padding:2px 5px!important;flex-shrink:0;}
  .tname-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.trow-note{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trow-kebab{padding:2px 6px!important;flex-shrink:0;}
  .tform{gap:6px;}
  .tform input,.tform select,.tform button{min-height:38px;font-size:13px;padding:6px 10px;}
  .target-form{gap:6px;}
  .target-form input,.target-form select,.target-form button{min-height:38px;font-size:13px;}
  /* Patterns */
  .grid-2{gap:8px;grid-template-columns:1fr!important;}
  .slip-row{padding:4px 0;}
  .slip-label{font-size:12px;min-width:0;flex:1;}
  .slip-count{font-size:11px;}

  .tab-bar{margin:8px 0;}
  .tab-btn{font-size:13px;padding:8px 12px;}
  .streak-panel{flex-direction:column;gap:8px;padding:8px;}.streak-panel>.streak-card{width:auto;flex-direction:row;gap:10px;padding:10px 14px;}.streak-card .streak-val{font-size:26px;}.streak-panel .target-grid{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:6px;max-width:100%;}.target-pill { border-radius: 12px; background: var(--card); border: 1px solid var(--border); padding: 16px; display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 76px; overflow: hidden; }.target-pill-name{font-size:11px;max-width:none;}.target-pill-pct{font-size:16px;}.target-pill-btn{font-size:8px;padding:2px 5px;}.target-pill-cat{font-size:8px;padding:1px 4px;}
  .view-nav{width:100%;}.view-btn{flex:1;text-align:center;padding:7px 12px;}
  .tcard-achieved{padding:16px 12px 14px;}.streak-panel .tcard.tcard-achieved{min-height:180px;}.tcard-achieved .at-trophy{font-size:26px;}.streak-panel .tcard{min-height:160px;}
  .streak-item .streak-val{font-size:28px;}
  /* Modal */
  .modal { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 440px; max-width: 90vw; margin: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
  .modal h3{font-size:16px;}
  .modal-actions button{padding:8px 14px;font-size:13px;}
  .cat-tag{font-size:11px;padding:3px 8px;}
  .mini-label{font-size:11px;}
  .empty-state{font-size:12px;padding:12px;}
  .add-btn{padding:6px 12px;font-size:13px;min-height:38px;}
}

details.card>summary{padding:0;margin:0;}
details.card>summary::-webkit-details-marker{display:none;}
details.card[open]>summary span::before{content:''}
.mini-label::-webkit-details-marker{display:none;}
#globalMenu{position:fixed;z-index:99999;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:4px;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.2);display:none;}

/* VIEW NAVIGATION */
.view-nav{display:flex;gap:4px;margin-bottom:16px;padding:3px;background:var(--card);border:1px solid var(--border);border-radius:10px;width:fit-content;}
.view-btn{font-size:13px;font-weight:600;padding:7px 18px;border-radius:8px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s cubic-bezier(.16,1,.3,1);}
.view-btn.active{background:var(--text);color:var(--bg);}
.view-btn:hover:not(.active){color:var(--text);}
/* SECTION TITLE - TARGETS */
.section-title-targets{font-size:16px;font-weight:800;color:var(--text);letter-spacing:.08em;text-transform:uppercase;margin:16px 0 8px;padding:0 4px;}
/* VIEW CONTAINERS */
.manage-section{margin-bottom:24px;}
.manage-section-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.manage-section-title::before{content:'';display:block;width:3px;height:16px;border-radius:2px;flex-shrink:0;}
.manage-section-title.ms-cat::before{background:var(--c-purple);}
.manage-section-title.ms-cl::before{background:var(--c-teal);}
.manage-section-title.ms-tgt::before{background:var(--c-amber);}
.manage-section-title.ms-hist::before{background:var(--c-blue);}
.manage-section-title.ms-trend::before{background:var(--c-green);}
.manage-item{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--bg2);border-radius:6px;margin-bottom:3px;}
.manage-item span.mi-icon{font-size:14px;flex-shrink:0;}
.manage-item span.mi-name{flex:1;font-size:13px;min-width:0;}

/* --- UNIFIED ROW SYSTEM --- */
.uni-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  transition: background 0.15s; min-width: 0;
}
.uni-row:last-child { border-bottom: none; }
.uni-row:hover { background: var(--glass-hover); }
.uni-row.is-done { opacity: 0.55; }
.uni-row.is-done .uni-title { text-decoration: line-through; }

.uni-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; background: var(--bg2);
}
.uni-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.uni-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uni-meta {
  font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.uni-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border);
}
.uni-actions {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0; justify-content: flex-end;
}
.uni-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  border-radius: 6px; padding: 4px 8px; cursor: pointer; transition: all 0.15s; font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
.uni-btn:hover { background: var(--bg2); color: var(--text); border-color: var(--border); }
.uni-kebab { font-size: 18px; line-height: 1; padding: 2px 8px; }

/* Mobile Rules */
@media (max-width: 600px) {
  .card { padding: 16px !important; margin-bottom: 16px; }
  .uni-row { padding: 12px 10px; gap: 8px; flex-wrap: wrap; }
  .uni-icon { min-width: 36px; height: 36px; }
  .uni-main { flex: 1 1 calc(100% - 50px); min-width: 150px; }
  .uni-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 4px; gap: 8px; }
  .uni-btn, .uni-kebab, .holiday-badge { min-height: 44px; min-width: 44px; flex: 0 0 auto; }
  .uni-actions input, .uni-actions select { min-height: 44px; font-size: 14px; flex: 1 1 80px; max-width: 100%; width: auto !important; }
  .ck-note { flex: 2 1 120px !important; }

  .ck-row { flex-wrap: wrap; padding-bottom: 12px; }
  .ck-info { flex: 1 1 100%; min-width: 100%; margin-bottom: 4px; }
  .ck-meta { width: 100%; justify-content: flex-start; padding-left: 50px; margin-top: 0; gap: 8px; }
  .ck-actions { margin-left: auto; display: flex; flex: 0 0 auto; }
  .ck-time, .ck-note { flex: 1; min-width: 0; }
}