/* =========================================================
   LIQUID · FOCUS — clean revamp
   ========================================================= */
:root {
  --pink:     #ff9ec3;  --lavender: #b8a3f0;  --mint: #8edcb5;
  --peach:    #ffb791;  --butter:   #ffd97d;  --sky:  #9ccae6;

  --glass-bg:       rgba(255,255,255,0.42);
  --glass-bg-s:     rgba(255,255,255,0.62);
  --glass-bg-h:     rgba(255,255,255,0.78);
  --glass-border:   rgba(255,255,255,0.85);
  --glow:           120,80,160;
  --glass-shadow:
    0 14px 50px rgba(var(--glow),0.18), 0 2px 12px rgba(var(--glow),0.10),
    inset 0 1.5px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(var(--glow),0.06);

  --text:       #3a2a5c;  --text-s: #6c5a8c;
  --text-f:     #a394be;  --text-m: #c8bdd8;

  --radius-lg: 28px; --radius-md: 18px; --radius-sm: 12px;
  --ease: cubic-bezier(0.22,1,0.36,1);
  --ease-b: cubic-bezier(0.34,1.56,0.64,1);

  --btn-from: var(--pink); --btn-to: var(--lavender);
}

*,*::before,*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html,body { margin:0; padding:0; min-height:100vh;
  font-family:'Geist',-apple-system,sans-serif; color:var(--text);
  background: radial-gradient(ellipse 80% 60% at 15% 0%,#ffd9e8 0%,transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 20%,#d8c8ff 0%,transparent 55%),
    radial-gradient(ellipse 80% 70% at 80% 100%,#c8e2ff 0%,transparent 55%),
    radial-gradient(ellipse 60% 50% at 5% 90%,#ffe5c8 0%,transparent 55%),
    linear-gradient(160deg,#fff0f5 0%,#f4e8ff 50%,#e8f4ff 100%);
  background-attachment:fixed; overflow-x:hidden; letter-spacing:-0.01em; }

/* ATMOSPHERE */
.atmosphere { position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.55; }
.blob-1{width:540px;height:540px;background:radial-gradient(circle,var(--pink),transparent 70%);top:-120px;left:-100px;animation:drift1 22s infinite ease-in-out}
.blob-2{width:620px;height:620px;background:radial-gradient(circle,var(--lavender),transparent 70%);bottom:-180px;right:-120px;animation:drift2 26s infinite ease-in-out}
.blob-3{width:420px;height:420px;background:radial-gradient(circle,var(--sky),transparent 70%);top:35%;left:45%;animation:drift3 30s infinite ease-in-out;opacity:0.45}
.blob-4{width:360px;height:360px;background:radial-gradient(circle,var(--peach),transparent 70%);top:70%;left:8%;animation:drift4 28s infinite ease-in-out;opacity:0.5}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(180px,80px) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-160px,-100px) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-120px,100px) scale(0.9)}}
@keyframes drift4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(140px,-60px) scale(1.2)}}
.grain{position:absolute;inset:-50%;background-image:radial-gradient(rgba(120,80,160,0.05) 1px,transparent 1px);background-size:3px 3px;opacity:0.5;mix-blend-mode:multiply;animation:grainS 8s steps(8) infinite;pointer-events:none}
@keyframes grainS{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:999}

/* GLASS */
.glass{background:var(--glass-bg);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius-lg);position:relative;z-index:2}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.15) 25%,transparent 50%);pointer-events:none;mix-blend-mode:overlay;opacity:0.9}

/* TOP BAR */
.top-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;margin:16px 22px 0;border-radius:999px;position:relative;z-index:50}
.brand{display:flex;align-items:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17px;letter-spacing:-0.02em}
.brand-mark{width:13px;height:13px;border-radius:50%;background:conic-gradient(from 0deg,var(--pink),var(--lavender),var(--mint),var(--peach),var(--pink));box-shadow:0 0 14px rgba(255,158,195,0.5);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-dot{color:var(--text-f)}.brand-sub{color:var(--text-s);font-weight:400}
.top-bar-center{flex:1;display:flex;justify-content:center}
.top-bar-right{display:flex;align-items:center;gap:10px}

/* MUSIC PLAYER */
.music-wrap{position:relative}
.music-toggle-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--glass-bg-s);border:1px solid var(--glass-border);border-radius:999px;color:var(--text);font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.25s var(--ease)}
.music-toggle-btn:hover{background:var(--glass-bg-h);transform:translateY(-1px);box-shadow:0 6px 16px rgba(var(--glow),0.2)}
.music-toggle-btn.playing{background:linear-gradient(135deg,rgba(var(--glow),0.15),rgba(var(--glow),0.08));border-color:rgba(var(--glow),0.3)}
.music-panel{position:fixed;top:72px;left:50%;transform:translateX(-50%);width:300px;padding:14px;display:flex;flex-direction:column;gap:12px;z-index:300;animation:menuIn 0.22s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.music-panel-head{display:flex;justify-content:space-between;align-items:center}
.music-panel-title{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:600;color:var(--text)}
.channel-list{display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto}
.channel-btn{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid transparent;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.18s var(--ease);text-align:left;width:100%}
.channel-btn:hover{background:rgba(255,255,255,0.85)}
.channel-btn.active{background:linear-gradient(135deg,rgba(var(--glow),0.12),rgba(var(--glow),0.06));border-color:rgba(var(--glow),0.2)}
.ch-emoji{font-size:16px;flex-shrink:0}
.ch-info{display:flex;flex-direction:column}
.ch-name{font-size:13px;font-weight:600;color:var(--text);font-family:'Geist',sans-serif}
.ch-vibe{font-size:11px;color:var(--text-s)}
.music-controls{display:flex;align-items:center;gap:10px}
.player-play-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:linear-gradient(135deg,var(--btn-from),var(--btn-to));border:none;border-radius:999px;color:white;font-family:'Geist',sans-serif;font-size:12.5px;font-weight:500;cursor:pointer;transition:all 0.2s var(--ease)}
.player-play-btn:hover:not(:disabled){filter:brightness(1.05);box-shadow:0 6px 18px rgba(var(--glow),0.3)}
.player-play-btn:disabled{opacity:0.4;cursor:not-allowed}
.vol-row{display:flex;align-items:center;gap:6px;flex:1}
.vol-row input[type="range"]{flex:1;appearance:none;height:3px;background:rgba(var(--glow),0.15);border-radius:99px;outline:none;cursor:pointer}
.vol-row input[type="range"]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--btn-from),var(--btn-to));box-shadow:0 2px 6px rgba(var(--glow),0.3)}
.player-status{font-size:11.5px;color:var(--text-s);font-style:italic;text-align:center;min-height:16px}

/* SETTINGS & GOALS BUTTONS */
.goals-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--glass-bg-s);border:1px solid var(--glass-border);border-radius:999px;color:var(--text);font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.25s var(--ease)}
.goals-btn:hover{background:var(--glass-bg-h);transform:translateY(-1px)}
.settings-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--glass-bg-s);border:1px solid var(--glass-border);border-radius:50%;color:var(--text-s);cursor:pointer;transition:all 0.25s var(--ease)}
.settings-btn:hover{background:var(--glass-bg-h);color:var(--text);transform:rotate(30deg)}
.duration-control{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-s)}
.duration-control input{width:48px;text-align:center;background:rgba(255,255,255,0.55);border:1px solid var(--glass-border);color:var(--text);border-radius:10px;padding:4px 6px;font-family:'Geist',sans-serif;font-size:13px;font-weight:500;outline:none;transition:all 0.2s var(--ease)}
.duration-control input:focus{background:rgba(255,255,255,0.9);border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,158,195,0.2)}
.duration-control input::-webkit-inner-spin-button,.duration-control input::-webkit-outer-spin-button{-webkit-appearance:none}

/* LAYOUT */
.app{max-width:1600px;margin:0 auto;padding:22px;display:flex;flex-direction:column;gap:22px}
.boards-row{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:20px;min-height:570px}

/* BOARDS */
.board{padding:18px;display:flex;flex-direction:column;min-height:570px;max-height:78vh;position:relative;overflow:visible;transition:border-color 0.3s var(--ease),transform 0.3s var(--ease)}
.board.drag-over{border-color:var(--pink);transform:scale(1.01);box-shadow:var(--glass-shadow),0 0 0 2px rgba(255,158,195,0.55)}
.board-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-shrink:0}
.board-title{display:flex;align-items:center;gap:8px}
.board-title h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:21px;margin:0;letter-spacing:-0.02em}
.board-pill{width:9px;height:9px;border-radius:50%;display:inline-block}
.todo-pill{background:var(--pink);box-shadow:0 0 8px rgba(255,158,195,0.6)}
.done-pill{background:var(--mint);box-shadow:0 0 8px rgba(142,220,181,0.6)}
.ongoing-pill{background:var(--butter);box-shadow:0 0 8px rgba(255,217,125,0.6)}
.count{font-size:11.5px;color:var(--text-s);background:rgba(255,255,255,0.65);border:1px solid var(--glass-border);padding:2px 7px;border-radius:999px;min-width:20px;text-align:center}
.icon-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.6);border:1px solid var(--glass-border);color:var(--text);padding:5px 10px;border-radius:11px;cursor:pointer;font-family:'Geist',sans-serif;font-size:12px;font-weight:500;transition:all 0.2s var(--ease)}
.icon-btn:hover{background:rgba(255,255,255,0.9);transform:translateY(-1px)}
[data-add]{width:30px;height:30px;padding:0;justify-content:center}

/* DONE SUBTABS */
.board-subtabs{display:flex;gap:3px;background:rgba(var(--glow),0.06);padding:3px;border-radius:999px;width:fit-content;margin-bottom:10px;flex-shrink:0}
.board-subtab{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;border:none;background:transparent;font-family:'Geist',sans-serif;font-size:12px;font-weight:500;color:var(--text-s);cursor:pointer;transition:all 0.2s var(--ease)}
.board-subtab:hover{color:var(--text)}
.board-subtab.active{background:white;color:var(--text);box-shadow:0 2px 8px rgba(var(--glow),0.15)}

/* FILTER BAR */
.filter-bar{display:flex;align-items:flex-start;flex-wrap:wrap;gap:5px;margin-bottom:10px;flex-shrink:0;position:relative}
.filter-dropdown{position:relative}
.filter-trigger{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.55);border:1px solid var(--glass-border);color:var(--text-s);padding:4px 10px;border-radius:999px;cursor:pointer;font-family:'Geist',sans-serif;font-size:11.5px;font-weight:500;transition:all 0.2s var(--ease)}
.filter-trigger:hover{background:rgba(255,255,255,0.85);color:var(--text)}
.filter-trigger.has-active{background:linear-gradient(135deg,rgba(255,158,195,0.3),rgba(184,163,240,0.3));color:var(--text);border-color:rgba(255,158,195,0.5)}
.filter-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:210px;max-height:280px;overflow-y:auto;background:rgba(255,255,255,0.96);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:0 16px 40px rgba(var(--glow),0.18);padding:7px;z-index:60;display:flex;flex-direction:column;gap:2px;animation:menuIn2 0.2s var(--ease)}
@keyframes menuIn2{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.filter-menu.hidden{display:none}
.filter-option{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:12.5px;color:var(--text);transition:background 0.15s;user-select:none}
.filter-option:hover{background:rgba(var(--glow),0.08)}
.filter-option.checked{background:rgba(var(--glow),0.08)}
.check-box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--text-m);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.18s var(--ease)}
.filter-option.checked .check-box{background:var(--pink);border-color:var(--pink)}
.filter-option.checked .check-box::after{content:"✓";color:white;font-size:10px;font-weight:700}
.opt-label{flex:1}.filter-action{padding:7px 9px;border-radius:9px;font-size:12px;color:var(--text-s)}
.filter-divider{height:1px;background:rgba(var(--glow),0.1);margin:3px 5px}
.filter-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.afc-chip{display:inline-flex;align-items:center;gap:4px;font-family:'Geist',sans-serif;font-size:11px;font-weight:500;padding:2px 7px 2px 5px;border-radius:999px;border:1px solid rgba(255,255,255,0.6);cursor:pointer;transition:opacity 0.15s;white-space:nowrap}
.afc-chip:hover{opacity:0.7}
.swatch{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* TASK LIST */
.task-list{display:flex;flex-direction:column;gap:9px;overflow-y:auto;overflow-x:hidden;padding-right:3px;flex:1;min-height:60px;scrollbar-width:thin;scrollbar-color:rgba(var(--glow),0.3) transparent}
.task-list::-webkit-scrollbar{width:5px}
.task-list::-webkit-scrollbar-thumb{background:rgba(var(--glow),0.3);border-radius:3px}
.empty-hint{text-align:center;font-size:12.5px;color:var(--text-f);font-style:italic;padding:24px 10px;pointer-events:none;display:none;position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);width:80%}
.empty-hint.visible{display:block}
.empty-hint.ongoing-empty{position:static;transform:none;width:auto;padding:12px}

/* TASK CARD */
.task{background:rgba(255,255,255,0.65);border:1px solid rgba(255,255,255,0.8);border-radius:var(--radius-md);padding:11px 13px;cursor:grab;transition:all 0.25s var(--ease);position:relative;animation:taskIn 0.4s var(--ease-b);box-shadow:0 2px 8px rgba(var(--glow),0.06)}
@keyframes taskIn{from{opacity:0;transform:translateY(8px) scale(0.97)}to{opacity:1;transform:none}}
.task:hover{background:rgba(255,255,255,0.92);transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--glow),0.18)}
.task.dragging{opacity:0.4;cursor:grabbing;transform:scale(0.96) rotate(-1.5deg)}
.task.active-task{border-color:var(--pink);background:linear-gradient(135deg,rgba(255,158,195,0.3),rgba(184,163,240,0.25));box-shadow:0 0 0 1px rgba(255,158,195,0.5),0 8px 24px rgba(255,158,195,0.25)}
.task.archived-task{opacity:0.72;background:rgba(255,255,255,0.45);cursor:default}
.task.archived-task:hover{opacity:0.92;transform:translateY(-1px)}
.task-title{font-size:14px;font-weight:500;letter-spacing:-0.01em;margin-bottom:3px;word-break:break-word;color:var(--text)}
.task-notes{font-size:12px;color:var(--text-s);line-height:1.4;word-break:break-word}
.task-goal-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:7px}
.goal-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:500;padding:2px 7px 2px 5px;border-radius:999px;border:1px solid rgba(255,255,255,0.5);color:var(--text);max-width:130px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.task-meta{display:flex;align-items:center;gap:8px;margin-top:6px}
.task-time{font-size:11px;color:var(--text-s);display:inline-flex;align-items:center;gap:3px}
.task-source-badge{font-size:10px;color:var(--text-f);background:rgba(var(--glow),0.07);padding:1px 6px;border-radius:99px}
.task-archived-date{font-size:10.5px;color:var(--text-m);font-style:italic;margin-top:5px}
.task-actions{display:flex;gap:5px;margin-top:9px;opacity:0;transition:opacity 0.2s var(--ease);flex-wrap:wrap}
.task:hover .task-actions,.task.active-task .task-actions{opacity:1}
.task-actions button{font-family:'Geist',sans-serif;font-size:11px;padding:3px 9px;background:rgba(255,255,255,0.6);border:1px solid rgba(var(--glow),0.18);color:var(--text-s);border-radius:7px;cursor:pointer;transition:all 0.2s var(--ease)}
.task-actions button:hover{color:var(--text);background:rgba(255,255,255,0.95)}
.task-actions .start-now{background:linear-gradient(135deg,rgba(255,158,195,0.35),rgba(184,163,240,0.35));border-color:rgba(255,158,195,0.45);color:var(--text)}
.task-actions .start-now:hover{background:linear-gradient(135deg,rgba(255,158,195,0.6),rgba(184,163,240,0.6))}
.task-actions .restore-btn:hover{color:#4a8a6a;border-color:rgba(142,220,181,0.5);background:rgba(220,245,232,0.7)}
.task-actions .delete-btn:hover{color:#c45a7a;border-color:rgba(255,100,130,0.35);background:rgba(255,230,235,0.7)}

/* TIMER */
.timer-stage{display:flex;align-items:center;justify-content:center;position:relative}
.timer-glass{width:100%;padding:30px 26px;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;overflow:hidden}
.timer-glass::after{content:"";position:absolute;inset:-50px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,158,195,0),rgba(184,163,240,0.5),rgba(142,220,181,0.4),rgba(255,183,145,0.4),rgba(255,158,195,0));filter:blur(40px);z-index:-1;opacity:0;transition:opacity 0.6s var(--ease);animation:spin 12s linear infinite}
.timer-glass.running::after{opacity:0.65}
.timer-status{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.25em;color:var(--text-f)}
.timer-glass.running .timer-status{color:var(--pink)}.timer-glass.paused .timer-status{color:var(--peach)}
.timer-task{font-family:'Instrument Serif',serif;font-size:22px;font-style:italic;text-align:center;color:var(--text);line-height:1.2;min-height:28px;max-width:90%;word-break:break-word}
.timer-display{font-family:'Instrument Serif',serif;font-size:92px;font-weight:400;line-height:1;letter-spacing:-0.04em;background:linear-gradient(180deg,#5a3e7e 30%,#b599e8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.timer-glass.running .timer-display{animation:tPulse 2s ease-in-out infinite}
@keyframes tPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 12px rgba(255,158,195,0.4))}50%{transform:scale(1.02);filter:drop-shadow(0 0 24px rgba(255,158,195,0.7))}}
.timer-progress{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0.65}
.ring{width:110%;height:110%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(var(--glow),0.1);stroke-width:0.6}
.ring-fg{fill:none;stroke:url(#ringGrad);stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;stroke-width:0.6;transition:stroke-dashoffset 0.6s var(--ease)}
.timer-controls{display:flex;gap:8px;z-index:1}
.t-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:rgba(255,255,255,0.6);border:1px solid var(--glass-border);color:var(--text);border-radius:999px;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;font-weight:500;transition:all 0.25s var(--ease)}
.t-btn:hover:not(:disabled){background:rgba(255,255,255,0.9);transform:translateY(-1px);box-shadow:0 8px 20px rgba(var(--glow),0.2)}
.t-btn:disabled{opacity:0.38;cursor:not-allowed}
.t-btn.play-btn,.t-btn.resume-btn{background:linear-gradient(135deg,var(--btn-from),var(--btn-to));color:white;border-color:rgba(255,255,255,0.5)}
.t-btn.play-btn:hover:not(:disabled),.t-btn.resume-btn:hover:not(:disabled){filter:brightness(1.05);box-shadow:0 8px 26px rgba(var(--glow),0.35)}
.hidden{display:none !important}

/* ONGOING */
.ongoing-board{padding:16px 20px 20px;min-height:160px}
.ongoing-header{margin-bottom:12px}
.ongoing-sub{font-size:11.5px;color:var(--text-f);font-style:italic}
.ongoing-scroller{overflow-x:auto;overflow-y:hidden;padding-bottom:5px;scrollbar-width:thin;scrollbar-color:rgba(var(--glow),0.3) transparent}
.ongoing-scroller::-webkit-scrollbar{height:5px}
.ongoing-scroller::-webkit-scrollbar-thumb{background:rgba(var(--glow),0.3);border-radius:3px}
.ongoing-list{display:flex;gap:12px;min-height:110px}
.ongoing-card{flex-shrink:0;width:235px;background:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.85);border-radius:var(--radius-md);padding:13px 15px;transition:all 0.25s var(--ease);animation:taskIn 0.4s var(--ease-b)}
.ongoing-card:hover{background:rgba(255,255,255,0.95);transform:translateY(-3px);box-shadow:0 12px 28px rgba(var(--glow),0.2)}
.ongoing-card .task-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:15px;margin-bottom:5px}
.ongoing-card .task-notes{font-size:11.5px;color:var(--text-s);margin-bottom:10px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.progress-bar{height:4px;background:rgba(var(--glow),0.1);border-radius:99px;overflow:hidden;margin-bottom:7px}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--butter),var(--pink),var(--lavender));border-radius:99px;transition:width 0.7s var(--ease)}
.ongoing-controls{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.ongoing-controls button{font-family:'Geist',sans-serif;font-size:11px;padding:3px 8px;background:rgba(255,255,255,0.6);border:1px solid rgba(var(--glow),0.18);color:var(--text-s);border-radius:7px;cursor:pointer;transition:all 0.2s var(--ease)}
.ongoing-controls button:hover{background:rgba(255,255,255,0.95);color:var(--text)}
.ongoing-controls .progress-text{margin-left:auto;font-size:11px;color:var(--text-s)}
.ongoing-controls .complete-btn:hover{color:#4a8a6a;border-color:rgba(142,220,181,0.5);background:rgba(220,245,232,0.7)}
.ongoing-controls .delete-btn:hover{color:#c45a7a;border-color:rgba(255,100,130,0.35);background:rgba(255,230,235,0.7)}

/* MODALS */
.modal-backdrop{position:fixed;inset:0;background:rgba(60,40,90,0.30);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:18px;animation:fadeIn 0.2s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:460px;padding:24px 26px;display:flex;flex-direction:column;gap:13px;animation:modalIn 0.4s var(--ease-b);background:rgba(255,255,255,0.88);max-height:92vh;overflow-y:auto}
@keyframes modalIn{from{opacity:0;transform:scale(0.93) translateY(16px)}to{opacity:1;transform:none}}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.modal h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:21px;margin:0;letter-spacing:-0.02em;color:var(--text)}
.modal-desc{font-size:13px;color:var(--text-s);margin:0;line-height:1.5}
.x-btn{background:rgba(var(--glow),0.06);border:1px solid rgba(var(--glow),0.1);color:var(--text-s);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s var(--ease);flex-shrink:0}
.x-btn:hover{background:rgba(var(--glow),0.13);color:var(--text)}
.modal input,.modal textarea{width:100%;background:rgba(255,255,255,0.7);border:1px solid rgba(var(--glow),0.22);color:var(--text);padding:10px 13px;border-radius:var(--radius-sm);font-family:'Geist',sans-serif;font-size:13.5px;outline:none;transition:all 0.2s var(--ease);resize:vertical}
.modal input:focus,.modal textarea:focus{border-color:var(--pink);background:white;box-shadow:0 0 0 3px rgba(255,158,195,0.15)}
.modal input::placeholder,.modal textarea::placeholder{color:var(--text-f)}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:3px}
.modal-actions.stack{flex-direction:column;gap:7px}
.modal-actions.stack button{width:100%;justify-content:center}
.primary-btn,.ghost-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border-radius:999px;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--glass-border);transition:all 0.25s var(--ease)}
.primary-btn{background:linear-gradient(135deg,var(--btn-from),var(--btn-to));color:white;border-color:rgba(255,255,255,0.5)}
.primary-btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 8px 22px rgba(var(--glow),0.3)}
.primary-btn.glow{background:linear-gradient(135deg,var(--mint),var(--sky))}
.primary-btn.danger{background:linear-gradient(135deg,#ff8fa8,#c478e0)}
.ghost-btn{background:rgba(255,255,255,0.7);color:var(--text)}
.ghost-btn:hover{background:rgba(255,255,255,0.95);border-color:var(--pink)}
.ghost-btn.subtle{background:transparent;color:var(--text-f);border-color:transparent}
.ghost-btn.subtle:hover{color:var(--text-s);background:rgba(var(--glow),0.08)}

/* GOAL PICKER */
.goal-picker{display:flex;flex-direction:column;gap:7px}
.goal-picker-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-s)}
.goal-chips{display:flex;flex-wrap:wrap;gap:5px;min-height:30px;padding:5px;background:rgba(var(--glow),0.04);border-radius:11px}
.goal-chip-pick{display:inline-flex;align-items:center;gap:4px;font-family:'Geist',sans-serif;font-size:11.5px;padding:3px 9px 3px 7px;border-radius:999px;cursor:pointer;background:rgba(255,255,255,0.7);border:1px solid rgba(var(--glow),0.18);color:var(--text-s);transition:all 0.18s var(--ease);user-select:none}
.goal-chip-pick:hover{background:rgba(255,255,255,0.95);color:var(--text)}
.goal-chip-pick.selected{color:var(--text);border-color:rgba(var(--glow),0.4);box-shadow:0 2px 6px rgba(var(--glow),0.15)}
.goal-chip-empty{font-size:11.5px;color:var(--text-f);font-style:italic;padding:3px 7px}

/* ARCHIVE */
.archive-list{display:flex;flex-direction:column;gap:7px;max-height:300px;overflow-y:auto;padding:3px 1px}
.archive-item{display:flex;align-items:center;gap:9px;padding:9px 11px;background:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.7);border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s var(--ease)}
.archive-item:hover{background:rgba(255,255,255,0.95)}
.archive-item.selected{background:linear-gradient(135deg,rgba(255,158,195,0.2),rgba(184,163,240,0.2));border-color:rgba(255,158,195,0.45)}
.archive-item .ai-title{flex:1;font-size:13.5px}
.archive-item .ai-check{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--text-m);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s var(--ease)}
.archive-item.selected .ai-check{background:var(--pink);border-color:var(--pink)}
.archive-item.selected .ai-check::after{content:"✓";color:white;font-size:10px;font-weight:bold}

/* GOALS MODAL */
.goals-modal{max-width:min(1200px,96vw);max-height:92vh;overflow-y:auto}
.new-goal-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.new-goal-row input{flex:1;min-width:180px}
.color-swatch-row{display:flex;align-items:center;gap:6px}
.cs-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-s);font-family:'Geist',sans-serif;white-space:nowrap}
.color-swatch-picker{display:flex;gap:4px;flex-wrap:wrap}
.cs-dot{width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,0.6);cursor:pointer;transition:transform 0.18s var(--ease),box-shadow 0.18s var(--ease)}
.cs-dot:hover{transform:scale(1.2)}
.cs-dot.selected{transform:scale(1.28);box-shadow:0 0 0 2px white,0 0 0 4px rgba(var(--glow),0.45)}
.goals-tabs-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(var(--glow),0.1);padding-bottom:10px}
.goals-tabs{display:flex;gap:3px;background:rgba(var(--glow),0.06);padding:3px;border-radius:999px}
.tab-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;border:none;background:transparent;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:500;color:var(--text-s);cursor:pointer;transition:all 0.2s var(--ease)}
.tab-btn:hover{color:var(--text)}.tab-btn.active{background:white;color:var(--text);box-shadow:0 2px 8px rgba(var(--glow),0.13)}
.tab-count{font-size:10.5px;background:rgba(var(--glow),0.1);padding:1px 6px;border-radius:999px;color:var(--text-s)}
.add-to-goal-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,0.65);border:1px solid rgba(var(--glow),0.22);color:var(--text-s);font-family:'Geist',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s var(--ease)}
.add-to-goal-btn:hover{background:rgba(255,255,255,0.95);color:var(--text)}
.goals-tab-pane{display:none;flex-direction:column;gap:14px;padding-top:4px}
.goals-tab-pane.active{display:flex}
.goals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.goals-empty{text-align:center;font-size:13.5px;color:var(--text-f);font-style:italic;padding:36px 16px}

/* GOAL CARD */
.goal-card{background:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.88);border-radius:var(--radius-md);padding:16px 16px 13px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:all 0.3s var(--ease);animation:taskIn 0.4s var(--ease-b)}
.goal-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--goal-color,var(--pink));border-radius:4px 0 0 4px}
.goal-card:hover{background:rgba(255,255,255,0.94);box-shadow:0 8px 26px rgba(var(--glow),0.13)}
.goal-card.archived-goal{opacity:0.87}.archived-trophy{font-size:20px;position:absolute;top:11px;right:13px}
.goal-card-head{display:flex;align-items:flex-start;gap:12px}
.goal-pie-wrap{position:relative;flex-shrink:0;width:80px;height:80px;cursor:pointer;transition:transform 0.2s var(--ease)}
.goal-pie-wrap:hover{transform:scale(1.08)}
.goal-pie-wrap.pulsing{animation:piePulse 0.6s var(--ease)}
@keyframes piePulse{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.2) rotate(6deg)}70%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
.goal-pie{width:80px;height:80px;display:block}
.pie-bg-ring{fill:none;stroke:rgba(var(--glow),0.1);stroke-width:10}
.pie-fg-ring{fill:none;stroke-width:10;stroke-linecap:butt;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.2s var(--ease)}
.pie-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.pie-percent{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:700;color:var(--text);letter-spacing:-0.03em;line-height:1}
.pie-label{font-size:8.5px;color:var(--text-f);text-transform:uppercase;letter-spacing:0.08em;margin-top:2px}
.goal-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.goal-card-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.02em;color:var(--text);word-break:break-word}
.goal-stats{display:flex;flex-wrap:wrap;gap:4px}
.gs-pill{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(var(--glow),0.06);color:var(--text-s);border:1px solid rgba(var(--glow),0.07)}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.goal-card-actions{display:flex;flex-wrap:wrap;gap:5px}
.gca-btn{display:inline-flex;align-items:center;padding:5px 11px;border-radius:9px;font-family:'Geist',sans-serif;font-size:11.5px;font-weight:500;background:rgba(255,255,255,0.7);border:1px solid rgba(var(--glow),0.18);color:var(--text-s);cursor:pointer;transition:all 0.2s var(--ease)}
.gca-btn:hover{background:rgba(255,255,255,0.95);color:var(--text)}
.gca-btn.danger:hover{color:#c45a7a;border-color:rgba(255,100,130,0.35);background:rgba(255,230,235,0.7)}
.gca-btn.celebrate{color:#4a8a6a;border-color:rgba(142,220,181,0.35)}
.gca-btn.celebrate:hover{background:rgba(220,245,232,0.7);border-color:rgba(142,220,181,0.55)}
.goal-tasks-section{display:none}.goal-card.expanded .goal-tasks-section{display:block}
.gts-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:3px}
.gts-col{display:flex;flex-direction:column;gap:4px}
.gts-col-head{display:flex;align-items:center;gap:5px;font-family:'Geist',sans-serif;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-s);padding-bottom:4px;border-bottom:1px solid rgba(var(--glow),0.1);margin-bottom:2px}
.col-pill{width:6px;height:6px;border-radius:50%;display:inline-block}
.gts-task{font-size:12px;color:var(--text);padding:3px 6px;background:rgba(255,255,255,0.6);border-radius:6px;word-break:break-word}
.gts-task-time{font-size:10px;color:var(--text-f);margin-left:4px}
.gts-empty{font-size:11.5px;color:var(--text-m);font-style:italic;padding:3px 6px}

/* BOARD TOGGLE (quick task) */
.board-toggle-row{display:flex;align-items:center;gap:9px}
.board-toggle-label{font-size:13px;color:var(--text-s);white-space:nowrap}
.board-toggle{display:flex;background:rgba(var(--glow),0.06);padding:3px;border-radius:999px;gap:2px}
.toggle-opt{padding:5px 13px;border-radius:999px;border:none;background:transparent;font-family:'Geist',sans-serif;font-size:12px;font-weight:500;color:var(--text-s);cursor:pointer;transition:all 0.2s var(--ease)}
.toggle-opt:hover{color:var(--text)}.toggle-opt.active{background:white;color:var(--text);box-shadow:0 2px 6px rgba(var(--glow),0.13)}

/* SETTINGS */
/* ── Settings sidebar modal ── */
.settings-modal{max-width:780px;padding:0;overflow:hidden}
.settings-modal .modal-head{padding:20px 24px 16px;border-bottom:1px solid rgba(var(--glow),0.1);flex-shrink:0}
.settings-body{display:flex;min-height:460px;max-height:72vh}
.settings-nav{display:flex;flex-direction:column;gap:2px;padding:14px 10px;width:160px;flex-shrink:0;border-right:1px solid rgba(var(--glow),0.08);background:rgba(var(--glow),0.03)}
.snav-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border:none;background:transparent;border-radius:10px;font-family:'Geist',sans-serif;font-size:13px;font-weight:500;color:var(--text-s);cursor:pointer;transition:all 0.18s var(--ease);text-align:left;width:100%}
.snav-item:hover{background:rgba(var(--glow),0.08);color:var(--text)}
.snav-item.active{background:rgba(var(--glow),0.12);color:var(--text);font-weight:600}
.settings-panes{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column}
.settings-pane{display:flex;flex-direction:column;gap:24px}
.settings-pane.hidden{display:none}
.settings-section{display:flex;flex-direction:column;gap:9px}
.settings-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-s)}
.settings-hint{font-size:12.5px;color:var(--text-f);margin:0;line-height:1.45}
.settings-field-row{display:flex;gap:8px;align-items:center}
.settings-field-row .auth-input{flex:1}
.settings-fields-stack{display:flex;flex-direction:column;gap:8px}
.s-action-btn{padding:9px 16px;white-space:nowrap;font-size:13px}
.s-pw-rules{font-size:11.5px;color:var(--text-f);font-style:italic}
.s-feedback{font-size:12.5px;padding:8px 12px;border-radius:9px;line-height:1.4}
.s-feedback.success{background:rgba(100,200,140,0.15);border:1px solid rgba(100,200,140,0.3);color:#2a7a4a}
.s-feedback.error{background:rgba(255,100,130,0.1);border:1px solid rgba(255,100,130,0.2);color:#c45a7a}
.danger-zone{margin-top:8px;padding-top:20px;border-top:1px solid rgba(255,100,130,0.2)}
.danger-label{color:#c45a7a}
.danger-action-btn{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:500;cursor:pointer;border:1.5px solid rgba(255,100,130,0.4);background:rgba(255,100,130,0.08);color:#c45a7a;transition:all 0.2s var(--ease)}
.danger-action-btn:hover{background:rgba(255,100,130,0.18);border-color:rgba(255,100,130,0.6)}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px}
.theme-card{display:flex;flex-direction:column;gap:7px;padding:11px;border-radius:var(--radius-md);border:2px solid transparent;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.2s var(--ease);position:relative;overflow:hidden}
.theme-card:hover{background:rgba(255,255,255,0.85);transform:translateY(-2px);box-shadow:0 8px 18px rgba(var(--glow),0.12)}
.theme-card.active{border-color:var(--pink);background:rgba(255,255,255,0.92);box-shadow:0 0 0 3px rgba(255,158,195,0.2)}
.theme-card.active::after{content:"✓";position:absolute;top:7px;right:9px;font-size:12px;color:var(--pink);font-weight:700}
.theme-swatch{height:34px;border-radius:7px;margin:-2px -2px 0;flex-shrink:0}
.theme-card-name{font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:600;color:var(--text)}
.theme-card-emoji{font-size:18px;line-height:1}
.theme-card-desc{font-size:11px;color:var(--text-s);line-height:1.3}

/* FLASH */
@keyframes flash{0%{box-shadow:var(--glass-shadow),0 0 0 0 rgba(255,158,195,0.6)}50%{box-shadow:var(--glass-shadow),0 0 0 8px rgba(255,158,195,0)}100%{box-shadow:var(--glass-shadow)}}
.flash{animation:flash 1.2s var(--ease)}

/* ── THEMES ────────────────────────────────────────────── */
/* backgrounds */
body.theme-candy{background:radial-gradient(ellipse 80% 60% at 15% 0%,#ff80c0 0%,transparent 55%),radial-gradient(ellipse 70% 60% at 90% 20%,#bb60ff 0%,transparent 55%),radial-gradient(ellipse 80% 70% at 80% 100%,#70ccff 0%,transparent 55%),radial-gradient(ellipse 60% 50% at 5% 90%,#ff80d4 0%,transparent 55%),linear-gradient(160deg,#fff0fb 0%,#f2e4ff 50%,#e4f4ff 100%);--glow:210,55,165;--btn-from:#ff50a8;--btn-to:#cc28de}
body.theme-candy .blob-1{background:radial-gradient(circle,#ff60b8,transparent 70%)}
body.theme-candy .blob-2{background:radial-gradient(circle,#aa50ff,transparent 70%)}
body.theme-candy .blob-3{background:radial-gradient(circle,#55bbff,transparent 70%)}
body.theme-candy .blob-4{background:radial-gradient(circle,#ff60cc,transparent 70%)}
body.theme-rain{background:linear-gradient(160deg,#cce0f8 0%,#88b0e0 40%,#4878b0 100%);--glow:35,85,180;--btn-from:#4898e0;--btn-to:#2470c8;--text:#0e2848;--text-s:#284870;--text-f:#507098;--text-m:#8098b8}
body.theme-forest{background:linear-gradient(160deg,#c8e0b0 0%,#3d7a30 50%,#1a3a10 100%);--glow:40,120,30;--btn-from:#5ab840;--btn-to:#308820;--text:#142e0c;--text-s:#22521a;--text-f:#3a7828;--text-m:#5a9840}
body.theme-ocean{background:linear-gradient(160deg,#e0f4fc 0%,#4a9ab8 50%,#0d3c5a 100%);--glow:15,90,145;--btn-from:#3a9abf;--btn-to:#1a6888;--text:#0a2840;--text-s:#2a4e6c;--text-f:#5a8aaa;--text-m:#8ab0cc}
body.theme-cosmos{background:linear-gradient(160deg,#0e0525 0%,#1e0d42 45%,#040015 100%);--glow:100,60,200;--btn-from:#8a60e8;--btn-to:#5a30c0}
body.theme-sakura{background:linear-gradient(160deg,#fff0f6 0%,#f0a8cc 45%,#c87898 100%);--glow:210,80,130;--btn-from:#e05890;--btn-to:#bc3870}
body.theme-cafe{background:linear-gradient(160deg,#fef6e4 0%,#c8904a 55%,#7a5028 100%);--glow:130,75,25;--btn-from:#d4883a;--btn-to:#a86020;--text:#3a1e08;--text-s:#6a4020;--text-f:#9a7048;--text-m:#c0a078}
body.theme-snow{background:linear-gradient(160deg,#f6faff 0%,#e2eef8 40%,#c4d8ee 100%);--glow:70,120,175;--btn-from:#78aad8;--btn-to:#5088b8}

/* timer display uses default dark gradient for all themes */
body.theme-rain   .timer-display{background:linear-gradient(180deg,#5a7eaa 0%,#2a5888 100%);-webkit-background-clip:text;background-clip:text}
body.theme-ocean  .timer-display{background:linear-gradient(180deg,#1e5a80 0%,#0a2840 100%);-webkit-background-clip:text;background-clip:text}
body.theme-cafe   .timer-display{background:linear-gradient(180deg,#8a5020 0%,#5a3010 100%);-webkit-background-clip:text;background-clip:text}
body.theme-forest .timer-display{background:linear-gradient(180deg,#142e0c 0%,#3a7020 100%);-webkit-background-clip:text;background-clip:text}
body.theme-sakura .timer-display{background:linear-gradient(180deg,#8a1840 0%,#c03870 100%);-webkit-background-clip:text;background-clip:text}
body.theme-snow   .timer-display{background:linear-gradient(180deg,#0a4080 0%,#1870c0 100%);-webkit-background-clip:text;background-clip:text}

/* dark themes use default white glass + dark text */

/* ── CSS THEME EFFECTS ─────────────────────────────────── */
.theme-overlay{position:fixed;inset:0;pointer-events:none;z-index:1}

/* ── Cozy: rising pastel orbs (no blur) ── */
.bubble-item{position:absolute;border-radius:50%;animation:bubbleDrift ease-in-out infinite}
@keyframes bubbleDrift{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:0.75}
  85%{opacity:0.55}
  100%{transform:translateY(-118vh) translateX(28px);opacity:0}
}

/* ── Rain: dark navy streaks falling ── */
.rain-drop{position:absolute;border-radius:2px;top:-30px;animation:rainFall linear infinite}
@keyframes rainFall{from{transform:translateY(0) skewX(-4deg)}to{transform:translateY(115vh) skewX(-4deg)}}

/* ── Forest: leaf-shaped CSS particles falling ── */
.leaf-item{position:absolute;top:-20px;animation:leafFall linear infinite}
@keyframes leafFall{
  0%{transform:translateY(0) rotate(var(--lrot,0deg)) translateX(0);opacity:0.9}
  25%{transform:translateY(28vh) rotate(calc(var(--lrot,0deg) + 100deg)) translateX(var(--lsway,20px))}
  55%{transform:translateY(57vh) rotate(calc(var(--lrot,0deg) + 220deg)) translateX(calc(var(--lsway,20px)*-0.8))}
  80%{transform:translateY(83vh) rotate(calc(var(--lrot,0deg) + 340deg)) translateX(var(--lsway,20px))}
  100%{transform:translateY(118vh) rotate(calc(var(--lrot,0deg) + 430deg)) translateX(0);opacity:0}
}

/* ── Ocean: waves + rising bubbles ── */
.wave-wrap{position:fixed;bottom:0;left:-10%;right:-10%;pointer-events:none}
.wave-wrap svg{display:block;width:120%}
.wave-1{animation:wave1 9s ease-in-out infinite}
.wave-2{animation:wave2 13s ease-in-out infinite}
.wave-3{animation:wave3 17s ease-in-out infinite}
@keyframes wave1{0%,100%{transform:translateX(0)}50%{transform:translateX(-4%)}}
@keyframes wave2{0%,100%{transform:translateX(0)}50%{transform:translateX(4%)}}
@keyframes wave3{0%,100%{transform:translateX(0)}50%{transform:translateX(-2.5%)}}
.ocean-bubble{position:absolute;border-radius:50%;border:1.5px solid rgba(100,200,255,0.55);background:rgba(120,210,255,0.12);animation:oceanBubble ease-in infinite}
@keyframes oceanBubble{
  0%{transform:translateY(0) translateX(0);opacity:0.7}
  60%{transform:translateY(-40vh) translateX(12px);opacity:0.4}
  100%{transform:translateY(-75vh) translateX(-8px);opacity:0}
}

/* ── Cosmos: twinkling stars + shooting ── */
.star-item{position:absolute;border-radius:50%;background:white;animation:starTwinkle ease-in-out infinite alternate}
@keyframes starTwinkle{from{opacity:0.08;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}
.shooting-star{position:absolute;height:2px;background:linear-gradient(to right,rgba(255,255,255,0.95),rgba(200,190,255,0.6),transparent);border-radius:2px;animation:shootAcross 1.4s ease-out forwards;transform-origin:left center}
@keyframes shootAcross{
  0%{width:0;opacity:1}
  60%{width:180px;opacity:0.8}
  100%{width:220px;opacity:0;transform:translateX(30vw)}
}

/* ── Sakura: falling cherry blossom petals ── */
.petal-item{position:absolute;top:-20px;animation:petalFall linear infinite}
@keyframes petalFall{
  0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:0.92}
  28%{transform:translateY(28vh) rotate(110deg) translateX(var(--pdx,15px));opacity:0.85}
  58%{transform:translateY(58vh) rotate(250deg) translateX(calc(var(--pdx,15px)*-0.65))}
  100%{transform:translateY(116vh) rotate(400deg) translateX(var(--pdx,15px));opacity:0}
}

/* ── Café: multi-size warm golden orbs rising ── */
.steam-item{position:absolute;border-radius:50%;animation:steamRise ease-in infinite}
@keyframes steamRise{
  0%{transform:translateY(0) scale(1) translateX(0);opacity:0.9}
  30%{transform:translateY(-22vh) scale(0.92) translateX(var(--ex,15px));opacity:0.75}
  65%{transform:translateY(-55vh) scale(0.6) translateX(calc(var(--ex,15px)*1.5));opacity:0.4}
  100%{transform:translateY(-90vh) scale(0) translateX(calc(var(--ex,15px)*2));opacity:0}
}

/* ── Aurora: waving ribbon curtains ── */
/* ── Snow: gentle falling flakes with horizontal drift ── */
.snow-flake{position:absolute;border-radius:50%;background:rgba(255,255,255,0.92);top:-15px;animation:snowFall linear infinite}
@keyframes snowFall{
  0%{transform:translateY(0) translateX(0)}
  30%{transform:translateY(32vh) translateX(var(--sdx,20px))}
  60%{transform:translateY(64vh) translateX(calc(var(--sdx,20px)*-0.6))}
  100%{transform:translateY(116vh) translateX(var(--sdx,20px))}
}


/* ── Per-theme blob colour patches ─────────────────────── */
/* candy blobs already defined above */

body.theme-rain .blob{opacity:0.38}
body.theme-rain .blob-1{background:radial-gradient(circle,#7aaee0,transparent 70%)}
body.theme-rain .blob-2{background:radial-gradient(circle,#4878c8,transparent 70%)}
body.theme-rain .blob-3{background:radial-gradient(circle,#a8c8e8,transparent 70%)}
body.theme-rain .blob-4{background:radial-gradient(circle,#6890cc,transparent 70%)}

body.theme-forest .blob{opacity:0.35}
body.theme-forest .blob-1{background:radial-gradient(circle,#68b838,transparent 70%)}
body.theme-forest .blob-2{background:radial-gradient(circle,#388820,transparent 70%)}
body.theme-forest .blob-3{background:radial-gradient(circle,#88cc58,transparent 70%)}
body.theme-forest .blob-4{background:radial-gradient(circle,#50a030,transparent 70%)}

body.theme-ocean .blob{opacity:0.40}
body.theme-ocean .blob-1{background:radial-gradient(circle,#58b0d0,transparent 70%)}
body.theme-ocean .blob-2{background:radial-gradient(circle,#2080b0,transparent 70%)}
body.theme-ocean .blob-3{background:radial-gradient(circle,#78c8d8,transparent 70%)}
body.theme-ocean .blob-4{background:radial-gradient(circle,#3898c0,transparent 70%)}

body.theme-cosmos .blob{opacity:0.28}
body.theme-cosmos .blob-1{background:radial-gradient(circle,#7838d0,transparent 70%)}
body.theme-cosmos .blob-2{background:radial-gradient(circle,#4818a0,transparent 70%)}
body.theme-cosmos .blob-3{background:radial-gradient(circle,#8858e0,transparent 70%)}
body.theme-cosmos .blob-4{background:radial-gradient(circle,#5828b0,transparent 70%)}

body.theme-sakura .blob{opacity:0.42}
body.theme-sakura .blob-1{background:radial-gradient(circle,#f080b8,transparent 70%)}
body.theme-sakura .blob-2{background:radial-gradient(circle,#e058a0,transparent 70%)}
body.theme-sakura .blob-3{background:radial-gradient(circle,#f8a8cc,transparent 70%)}
body.theme-sakura .blob-4{background:radial-gradient(circle,#e878b8,transparent 70%)}

body.theme-cafe .blob{opacity:0.40}
body.theme-cafe .blob-1{background:radial-gradient(circle,#d09040,transparent 70%)}
body.theme-cafe .blob-2{background:radial-gradient(circle,#b07030,transparent 70%)}
body.theme-cafe .blob-3{background:radial-gradient(circle,#e0b060,transparent 70%)}
body.theme-cafe .blob-4{background:radial-gradient(circle,#c08038,transparent 70%)}

body.theme-snow .blob{opacity:0.32}
body.theme-snow .blob-1{background:radial-gradient(circle,#b8d4f0,transparent 70%)}
body.theme-snow .blob-2{background:radial-gradient(circle,#c8e0f8,transparent 70%)}
body.theme-snow .blob-3{background:radial-gradient(circle,#d0eaff,transparent 70%)}
body.theme-snow .blob-4{background:radial-gradient(circle,#a8c8e8,transparent 70%)}


/* ── AUTH SCREEN ─────────────────────────────────────────── */
#auth-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:500;padding:20px}
.auth-card{width:100%;max-width:390px;padding:34px 30px;display:flex;flex-direction:column;gap:18px}
.auth-brand-row{display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--text)}
.auth-brand-text{color:var(--text)}
.auth-tagline{font-size:13px;color:var(--text-s);margin:0}
.auth-tabs-row{display:flex;background:rgba(var(--glow),0.07);padding:3px;border-radius:999px;gap:2px}
.auth-tab{flex:1;padding:7px;border-radius:999px;border:none;background:transparent;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:500;color:var(--text-s);cursor:pointer;transition:all 0.2s var(--ease)}
.auth-tab:hover{color:var(--text)}
.auth-tab.active{background:white;color:var(--text);box-shadow:0 2px 8px rgba(var(--glow),0.15)}
.auth-pane{display:flex;flex-direction:column;gap:10px}
.auth-error{font-size:12.5px;color:#c45a7a;min-height:16px;margin:0}
.auth-submit{width:100%;justify-content:center;margin-top:2px}

/* ── USER CHIP ───────────────────────────────────────────── */
.user-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.55);border:1px solid var(--glass-border);border-radius:999px;padding:4px 8px 4px 12px}
.user-chip-name{font-size:13px;font-weight:500;color:var(--text);font-family:'Geist',sans-serif}
.user-chip-logout{font-size:11.5px;color:var(--text-s);background:rgba(var(--glow),0.08);border:none;border-radius:999px;padding:3px 9px;cursor:pointer;font-family:'Geist',sans-serif;transition:all 0.2s var(--ease)}
.user-chip-logout:hover{color:var(--text);background:rgba(var(--glow),0.16)}

/* RESPONSIVE */
@media(max-width:1100px){.boards-row{grid-template-columns:1fr 1fr;min-height:auto}.timer-stage{grid-column:1/-1;order:-1}.gts-columns{grid-template-columns:repeat(2,1fr)}}

/* ── RESPONSIVE TOP BAR — scales from full desktop down to 320px ── */
@media(max-width:900px){
  .user-email{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
}
@media(max-width:750px){
  .app{padding:12px;gap:12px}
  .boards-row{grid-template-columns:1fr}
  .timer-display{font-size:72px}
  .goals-grid{grid-template-columns:1fr}
  .music-panel{width:260px}
  .top-bar{margin:10px 12px 0;padding:8px 14px;gap:6px}
  /* hide all button text labels — icon only */
  .goals-btn-label,.journal-btn-label,.lb-btn-label,#music-btn-label{display:none}
  .goals-btn,.journal-btn,.lb-top-btn,.music-toggle-btn{padding:6px 10px;gap:0}
  /* hide email, shrink sign-out */
  .user-email{display:none}
  .signout-btn{font-size:10px;padding:3px 8px}
  .user-pill{padding:4px 8px 4px 10px}
  .brand-sub,.brand-dot{display:none}
  .brand-name{font-size:15px}
  .top-bar-center{flex:0 0 auto}
  .top-bar-right{gap:6px}
}
@media(max-width:500px){
  .top-bar{margin:8px 8px 0;padding:6px 10px;gap:4px}
  .top-bar-right{gap:4px}
  .goals-btn,.journal-btn,.lb-top-btn,.music-toggle-btn{padding:5px 8px}
  .user-pill{padding:3px 6px 3px 8px;gap:5px}
  .signout-btn{padding:2px 6px;font-size:10px}
  .brand-name{font-size:14px}
}
@media(max-width:400px){
  /* stack music row below on very tiny screens */
  .top-bar{flex-wrap:wrap;border-radius:18px;margin:6px 6px 0}
  .top-bar-center{order:3;width:100%;justify-content:flex-start;padding-top:4px;border-top:1px solid var(--glass-border)}
  .brand{flex:1}
  .top-bar-right{gap:4px}
}

/* ── AUTH OVERLAY ─────────────────────────────────── */
#auth-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(255,255,255,0.06);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.auth-card{width:100%;max-width:400px;padding:34px 30px 26px;display:flex;flex-direction:column;gap:22px;animation:modalIn 0.5s var(--ease-b);background:rgba(255,255,255,0.82)}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:19px;letter-spacing:-0.02em}
.auth-view{display:flex;flex-direction:column;gap:14px}
.auth-view.hidden{display:none}
.auth-view-head{display:flex;flex-direction:column;gap:5px;text-align:center}
.auth-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.03em;color:var(--text);margin:0}
.auth-hint{font-size:13px;color:var(--text-s);margin:0;line-height:1.45}
.auth-hint-sm{font-size:12px;color:var(--text-f);margin:0;line-height:1.5}
.auth-fields{display:flex;flex-direction:column;gap:9px}
.auth-input{width:100%;background:rgba(255,255,255,0.72);border:1px solid rgba(var(--glow),0.22);color:var(--text);padding:11px 14px;border-radius:var(--radius-sm);font-family:'Geist',sans-serif;font-size:13.5px;outline:none;transition:all 0.2s var(--ease);box-sizing:border-box}
.auth-input:focus{border-color:var(--btn-from);background:white;box-shadow:0 0 0 3px rgba(var(--glow),0.12)}
.auth-input::placeholder{color:var(--text-f)}
.auth-btn{width:100%;justify-content:center;padding:12px;font-size:14px}
.auth-error{font-size:12.5px;color:#c45a7a;background:rgba(255,100,130,0.1);border:1px solid rgba(255,100,130,0.2);border-radius:9px;padding:8px 12px;text-align:center;line-height:1.4}
.auth-error.hidden{display:none}
.auth-links{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.auth-link-btn{background:none;border:none;color:var(--text-s);font-family:'Geist',sans-serif;font-size:12.5px;cursor:pointer;padding:4px 7px;border-radius:7px;transition:all 0.18s var(--ease)}
.auth-link-btn:hover{color:var(--text);background:rgba(var(--glow),0.08)}
.auth-divider{color:var(--text-m);font-size:12px;line-height:1}
.auth-big-emoji{font-size:44px;text-align:center;animation:modalIn 0.4s var(--ease-b)}
.auth-email-shown{font-size:13.5px;font-weight:600;color:var(--text);text-align:center;margin:0;word-break:break-all}

/* User pill in top bar */
.user-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.55);border:1px solid var(--glass-border);border-radius:999px;padding:5px 8px 5px 12px}
.user-email{font-size:12px;color:var(--text-s);font-family:'Geist',sans-serif;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signout-btn{background:rgba(var(--glow),0.08);border:1px solid rgba(var(--glow),0.12);border-radius:999px;color:var(--text-s);font-family:'Geist',sans-serif;font-size:11px;padding:3px 9px;cursor:pointer;transition:all 0.18s var(--ease)}
.signout-btn:hover{background:rgba(var(--glow),0.18);color:var(--text)}

/* ════════════════════════════════════════
   JOURNAL
════════════════════════════════════════ */
.journal-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--glass-bg-s);border:1px solid var(--glass-border);border-radius:999px;color:var(--text);font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.25s var(--ease)}
.journal-btn:hover{background:var(--glass-bg-h);transform:translateY(-1px)}

.journal-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center}
.journal-overlay.hidden{display:none}
.journal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px)}
.journal-wrap{position:relative;z-index:1;width:100%;max-width:860px;padding:16px}

.journal-book{position:relative;background:var(--journal-cover,#9a2050);border-radius:6px 16px 16px 6px;padding:18px 22px 58px 22px;box-shadow:-6px 0 0 rgba(0,0,0,0.3),-4px 4px 24px rgba(0,0,0,0.45),inset -4px 0 10px rgba(0,0,0,0.25)}
.journal-close{position:absolute;top:12px;right:14px;background:rgba(255,255,255,0.12);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,0.7);transition:all 0.2s;z-index:2}
.journal-close:hover{background:rgba(255,255,255,0.28);color:#fff}

.journal-spread{display:grid;grid-template-columns:1fr 14px 1fr;border-radius:3px;overflow:hidden;box-shadow:0 2px 20px rgba(0,0,0,0.3);transition:opacity 0.2s,transform 0.2s}
.journal-spread.flipping{opacity:0;transform:scaleX(0.96)}

.journal-page{background:var(--journal-paper,#fff9f6);position:relative;min-height:360px;padding:18px 16px 44px;background-image:repeating-linear-gradient(transparent,transparent 27px,var(--journal-lines,rgba(190,160,175,0.18)) 27px,var(--journal-lines,rgba(190,160,175,0.18)) 28px)}
.journal-spine-inner{background:var(--journal-spine,#6e1038);box-shadow:inset -2px 0 8px rgba(0,0,0,0.35),inset 2px 0 8px rgba(0,0,0,0.35)}

.j-notes-area{position:relative;height:100%;min-height:300px}

.j-add-btn{position:absolute;bottom:10px;right:12px;width:26px;height:26px;border-radius:50%;background:rgba(var(--glow),0.1);border:1.5px dashed rgba(var(--glow),0.3);color:rgba(var(--glow),0.55);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s}
.j-add-btn:hover{background:rgba(var(--glow),0.2);color:rgba(var(--glow),0.9);transform:scale(1.1)}
.j-add-btn:disabled{opacity:0.25;cursor:not-allowed;transform:none}

.j-page-num{position:absolute;bottom:12px;font-size:10px;color:var(--journal-lines,rgba(180,150,165,0.55));font-family:'Geist',sans-serif;letter-spacing:0.05em}
.j-page-left .j-page-num{left:14px}
.j-page-right .j-page-num{right:14px}

.journal-footer{position:absolute;bottom:14px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:18px}
.j-nav-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:999px;padding:5px 18px;color:rgba(255,255,255,0.7);font-family:'Geist',sans-serif;font-size:12px;cursor:pointer;transition:all 0.2s}
.j-nav-btn:hover{background:rgba(255,255,255,0.22);color:#fff}
.j-nav-btn:disabled{opacity:0.28;cursor:not-allowed}
.j-spread-label{color:rgba(255,255,255,0.45);font-size:11px;font-family:'Geist',sans-serif}

/* ── STICKY NOTES ── */
.sticky-note{position:absolute;width:118px;min-height:82px;padding:9px 9px 7px;border-radius:2px;font-family:'Caveat',cursive;font-size:13px;line-height:1.4;box-shadow:2px 3px 10px rgba(0,0,0,0.14),0 1px 3px rgba(0,0,0,0.08);cursor:grab;user-select:none;z-index:1;transition:box-shadow 0.18s}
.sticky-note:hover{box-shadow:4px 7px 20px rgba(0,0,0,0.22);z-index:5}
.sticky-note.dragging{cursor:grabbing;box-shadow:8px 14px 28px rgba(0,0,0,0.3);z-index:10}
.sticky-note-type{font-size:9px;font-family:'Geist',sans-serif;opacity:0.48;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:3px}
.sticky-note-content{word-break:break-word}
.sticky-note-meta{font-size:9px;font-family:'Geist',sans-serif;opacity:0.42;font-style:italic;display:block;margin-top:5px}
.sticky-note-actions{display:none;gap:4px;margin-top:7px;justify-content:flex-end}
.sticky-note:hover .sticky-note-actions{display:flex}
.snote-btn{background:rgba(0,0,0,0.1);border:none;border-radius:4px;padding:2px 8px;font-size:9px;font-family:'Geist',sans-serif;cursor:pointer;transition:background 0.15s}
.snote-btn:hover{background:rgba(0,0,0,0.2)}

/* ── NOTE EDITOR ── */
.note-editor-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.3);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.note-editor-overlay.hidden{display:none}
.note-editor-box{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:22px;padding:22px 24px 20px;width:340px;max-width:94vw;backdrop-filter:blur(24px);box-shadow:0 28px 64px rgba(0,0,0,0.22)}
.note-editor-toprow{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.note-editor-title{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:600;color:var(--text)}
.note-type-row{display:flex;gap:6px;margin-bottom:13px;flex-wrap:wrap}
.note-type-chip{padding:5px 12px;border-radius:999px;border:1.5px solid var(--glass-border);background:var(--glass-bg-s);color:var(--text-s);font-family:'Geist',sans-serif;font-size:11px;cursor:pointer;transition:all 0.18s}
.note-type-chip.active{background:rgba(var(--glow),0.14);border-color:rgba(var(--glow),0.4);color:var(--text)}
.note-textarea{width:100%;min-height:96px;resize:none;border:1.5px solid var(--glass-border);border-radius:12px;padding:11px 13px;font-family:'Caveat',cursive;font-size:16px;line-height:1.5;background:var(--glass-bg-s);color:var(--text);outline:none;transition:border-color 0.2s;box-sizing:border-box}
.note-textarea:focus{border-color:rgba(var(--glow),0.5)}
.note-reminder-when{margin-top:10px;display:flex;align-items:center;gap:10px}
.note-reminder-when.hidden{display:none}
.note-dt-label{font-family:'Geist',sans-serif;font-size:11px;color:var(--text-s);white-space:nowrap}
.note-dt-input{flex:1;border:1.5px solid var(--glass-border);border-radius:8px;padding:5px 8px;font-size:11px;font-family:'Geist',sans-serif;background:var(--glass-bg-s);color:var(--text);outline:none;min-width:0}
.note-color-row{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.note-color-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:transform 0.15s,border-color 0.15s;flex-shrink:0}
.note-color-swatch:hover{transform:scale(1.2)}
.note-color-swatch.selected{border-color:var(--text);transform:scale(1.2)}
.note-editor-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.note-del-btn{background:none;border:none;color:#d85050;font-family:'Geist',sans-serif;font-size:12px;cursor:pointer;opacity:0.7;padding:0;transition:opacity 0.15s}
.note-del-btn:hover{opacity:1}
.note-del-btn.hidden{display:none}
.note-save-btn{padding:8px 24px;font-size:13px}

/* ── POPUPS ── */
.note-popup{position:fixed;bottom:86px;right:22px;z-index:600;max-width:270px;width:270px}
.note-popup.hidden{display:none}
.note-popup-inner{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;padding:16px 18px 14px;backdrop-filter:blur(24px);box-shadow:0 20px 48px rgba(0,0,0,0.22);position:relative;animation:popSlideIn 0.42s cubic-bezier(0.34,1.56,0.64,1) both}
@keyframes popSlideIn{from{opacity:0;transform:translateY(18px) scale(0.9)} to{opacity:1;transform:translateY(0) scale(1)}}
.note-popup-close{position:absolute;top:9px;right:12px;background:none;border:none;color:var(--text-f);font-size:17px;cursor:pointer;line-height:1;padding:2px 4px;border-radius:4px;transition:color 0.15s}
.note-popup-close:hover{color:var(--text)}
.note-popup-icon{font-size:20px;margin-bottom:6px}
.note-popup-label{font-family:'Geist',sans-serif;font-size:9px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-s);margin:0 0 4px}
.note-popup-text{font-family:'Caveat',cursive;font-size:16px;line-height:1.45;color:var(--text);margin:0}
.reminder-popup-btns{display:flex;gap:8px;margin-top:12px}
.reminder-discard-btn,.reminder-retain-btn{flex:1;padding:6px;border-radius:9px;font-family:'Geist',sans-serif;font-size:11px;cursor:pointer;border:1px solid var(--glass-border);transition:all 0.15s}
.reminder-discard-btn{background:var(--glass-bg-s);color:var(--text-s)}
.reminder-discard-btn:hover{background:rgba(210,70,70,0.1);border-color:rgba(210,70,70,0.3);color:#d05050}
.reminder-retain-btn{background:rgba(var(--glow),0.1);border-color:rgba(var(--glow),0.3);color:var(--text)}
.reminder-retain-btn:hover{background:rgba(var(--glow),0.2)}

/* ── RESPONSIVE JOURNAL ── */
@media(max-width:600px){
  .journal-spread{grid-template-columns:1fr 8px 1fr}
  .journal-page{min-height:280px;padding:12px 10px 40px}
  .sticky-note{width:88px;font-size:11px;min-height:66px;padding:7px}
  .note-popup{right:10px;bottom:72px;max-width:230px;width:230px}
}
@media(max-width:400px){
  .journal-spread{grid-template-columns:1fr 6px 1fr}
  .journal-book{padding:14px 12px 56px}
}

/* ── JOURNAL THEME VARS ── */
.theme-candy  {--journal-cover:#b8285e;--journal-paper:#fff9f6;--journal-lines:rgba(210,155,175,0.2);--journal-spine:#7a0e3c}
.theme-rain   {--journal-cover:#2e5070;--journal-paper:#f4f8fc;--journal-lines:rgba(130,165,200,0.18);--journal-spine:#162e48}
.theme-forest {--journal-cover:#24502e;--journal-paper:#f8f6ee;--journal-lines:rgba(110,155,110,0.18);--journal-spine:#0e3018}
.theme-ocean  {--journal-cover:#124468;--journal-paper:#eef6ff;--journal-lines:rgba(90,145,210,0.18);--journal-spine:#062238}
.theme-cosmos {--journal-cover:#2c1260;--journal-paper:#f0eeff;--journal-lines:rgba(130,95,215,0.18);--journal-spine:#160640}
.theme-sakura {--journal-cover:#8e2850;--journal-paper:#fff4f7;--journal-lines:rgba(210,135,170,0.18);--journal-spine:#5e0e30}
.theme-cafe   {--journal-cover:#4e2c14;--journal-paper:#fdf4e4;--journal-lines:rgba(155,115,75,0.18);--journal-spine:#2e1408}
.theme-snow   {--journal-cover:#2e4e6e;--journal-paper:#f6fbff;--journal-lines:rgba(130,175,220,0.14);--journal-spine:#142840}

/* ════════════════════════════════════════
   JOURNAL DECORATIONS
════════════════════════════════════════ */

/* ── Cover label ── */
.journal-cover-label {
  position:absolute;top:13px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,0.38);font-family:'Caveat',cursive;font-size:15px;
  letter-spacing:0.08em;white-space:nowrap;pointer-events:none;z-index:2;
}
.jcl-deco{font-size:11px;opacity:0.7}
.jcl-text{font-weight:500}

/* ── Ribbon bookmark ── */
.journal-ribbon {
  position:absolute;top:0;right:42px;width:15px;height:56px;z-index:3;
  background:var(--journal-ribbon,rgba(255,255,255,0.22));
  border-radius:0 0 2px 2px;
  box-shadow:1px 2px 6px rgba(0,0,0,0.2);
}
.journal-ribbon::after {
  content:'';position:absolute;bottom:-8px;left:0;right:0;
  border-left:7.5px solid transparent;
  border-right:7.5px solid transparent;
  border-top:9px solid var(--journal-ribbon,rgba(255,255,255,0.22));
}

/* ── Page strip (washi tape look at top of each page) ── */
.j-page-strip {
  position:absolute;top:0;left:0;right:0;height:8px;
  background:var(--journal-strip,transparent);
  opacity:0.7;pointer-events:none;
}

/* ── Red margin line ── */
.j-page-left .j-notes-area { border-left:1.5px solid var(--journal-margin,rgba(255,130,130,0.22)); margin-left:24px; padding-left:6px; }
.j-page-right .j-notes-area { border-right:1.5px solid var(--journal-margin,rgba(255,130,130,0.22)); margin-right:24px; padding-right:6px; }

/* ── Sticky note tape ── */
.sticky-note::before {
  content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:34px;height:13px;border-radius:2px;
  background:var(--note-tape,rgba(255,255,255,0.38));
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

/* ── Page corner fold ── */
.journal-page::after {
  content:'';position:absolute;bottom:34px;right:0;
  width:16px;height:16px;pointer-events:none;
  background:linear-gradient(135deg,var(--journal-paper,#fff9f6) 50%,var(--journal-lines,rgba(190,160,175,0.35)) 50%);
}

/* ── Subtle page pattern per theme ── */
.theme-candy .journal-page {
  background-image:
    repeating-linear-gradient(transparent,transparent 27px,rgba(210,155,175,0.2) 27px,rgba(210,155,175,0.2) 28px),
    radial-gradient(circle,rgba(255,140,180,0.07) 1.5px,transparent 1.5px);
  background-size:100% 28px,14px 14px;
}
.theme-cosmos .journal-page {
  background-image:
    repeating-linear-gradient(transparent,transparent 27px,rgba(130,95,215,0.18) 27px,rgba(130,95,215,0.18) 28px),
    radial-gradient(circle,rgba(200,170,255,0.1) 1px,transparent 1px);
  background-size:100% 28px,22px 22px;
}
.theme-sakura .journal-page {
  background-image:
    repeating-linear-gradient(transparent,transparent 27px,rgba(210,135,170,0.18) 27px,rgba(210,135,170,0.18) 28px),
    radial-gradient(circle,rgba(255,160,190,0.07) 2px,transparent 2px);
  background-size:100% 28px,18px 18px;
}
.theme-forest .journal-page {
  background-image:
    repeating-linear-gradient(transparent,transparent 27px,rgba(110,155,110,0.18) 27px,rgba(110,155,110,0.18) 28px),
    repeating-linear-gradient(90deg,rgba(110,155,110,0.04) 1px,transparent 1px);
  background-size:100% 28px,28px 28px;
}
.theme-ocean .journal-page {
  background-image:
    repeating-linear-gradient(transparent,transparent 27px,rgba(90,145,210,0.18) 27px,rgba(90,145,210,0.18) 28px),
    radial-gradient(ellipse 6px 3px,rgba(100,160,220,0.06) 0%,transparent 100%);
  background-size:100% 28px,20px 12px;
}
.theme-cafe .journal-page {
  background-image:
    repeating-linear-gradient(transparent,transparent 27px,rgba(155,115,75,0.18) 27px,rgba(155,115,75,0.18) 28px),
    repeating-linear-gradient(90deg,rgba(155,115,75,0.04) 1px,transparent 1px);
  background-size:100% 28px,24px 24px;
}
.theme-snow .journal-page {
  background-image:
    repeating-linear-gradient(transparent,transparent 27px,rgba(130,175,220,0.14) 27px,rgba(130,175,220,0.14) 28px),
    radial-gradient(circle,rgba(160,200,240,0.08) 1px,transparent 1px);
  background-size:100% 28px,20px 20px;
}
.theme-rain .journal-page {
  background-image:
    repeating-linear-gradient(transparent,transparent 27px,rgba(130,165,200,0.18) 27px,rgba(130,165,200,0.18) 28px),
    repeating-linear-gradient(170deg,rgba(120,160,200,0.04) 1px,transparent 1px);
  background-size:100% 28px,16px 32px;
}

/* ── Theme ribbon & strip colours ── */
.theme-candy  { --journal-ribbon:#ff7aab; --journal-strip:repeating-linear-gradient(90deg,rgba(255,140,190,0.5) 0,rgba(255,140,190,0.5) 6px,rgba(255,200,220,0.4) 6px,rgba(255,200,220,0.4) 12px); --journal-margin:rgba(255,120,160,0.22); --note-tape:rgba(255,200,220,0.5); }
.theme-rain   { --journal-ribbon:#5a8fbb; --journal-strip:repeating-linear-gradient(90deg,rgba(100,150,200,0.4) 0,rgba(100,150,200,0.4) 4px,transparent 4px,transparent 10px); --journal-margin:rgba(100,150,200,0.22); --note-tape:rgba(180,210,240,0.45); }
.theme-forest { --journal-ribbon:#4a8a5a; --journal-strip:repeating-linear-gradient(90deg,rgba(90,160,100,0.4) 0,rgba(90,160,100,0.4) 5px,rgba(140,200,140,0.3) 5px,rgba(140,200,140,0.3) 10px); --journal-margin:rgba(80,160,100,0.22); --note-tape:rgba(180,220,180,0.45); }
.theme-ocean  { --journal-ribbon:#3a7aaa; --journal-strip:repeating-linear-gradient(90deg,rgba(80,150,210,0.35) 0,rgba(80,150,210,0.35) 8px,rgba(140,190,240,0.25) 8px,rgba(140,190,240,0.25) 16px); --journal-margin:rgba(80,150,210,0.22); --note-tape:rgba(160,210,240,0.45); }
.theme-cosmos { --journal-ribbon:#9a6add; --journal-strip:repeating-linear-gradient(90deg,rgba(150,100,230,0.35) 0,rgba(150,100,230,0.35) 3px,transparent 3px,transparent 10px); --journal-margin:rgba(150,100,230,0.22); --note-tape:rgba(210,180,255,0.45); }
.theme-sakura { --journal-ribbon:#e0789a; --journal-strip:repeating-linear-gradient(90deg,rgba(230,140,170,0.45) 0,rgba(230,140,170,0.45) 6px,rgba(255,200,215,0.35) 6px,rgba(255,200,215,0.35) 12px); --journal-margin:rgba(230,130,165,0.22); --note-tape:rgba(255,200,220,0.5); }
.theme-cafe   { --journal-ribbon:#9a6a3a; --journal-strip:repeating-linear-gradient(45deg,rgba(170,120,70,0.3) 0,rgba(170,120,70,0.3) 3px,transparent 3px,transparent 8px); --journal-margin:rgba(170,130,90,0.22); --note-tape:rgba(220,190,155,0.5); }
.theme-snow   { --journal-ribbon:#7aabcc; --journal-strip:repeating-linear-gradient(90deg,rgba(140,195,230,0.4) 0,rgba(140,195,230,0.4) 5px,rgba(200,230,250,0.25) 5px,rgba(200,230,250,0.25) 14px); --journal-margin:rgba(130,190,230,0.22); --note-tape:rgba(200,230,250,0.5); }

/* ════════════════════════════════════════
   GOAL FOCUS STATS
════════════════════════════════════════ */
.goal-focus-row{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.gfr-streak,.gfr-hours{font-size:11px;font-family:'Geist',sans-serif;color:var(--text-s);background:var(--glass-bg-s);border:1px solid var(--glass-border);border-radius:999px;padding:2px 9px;white-space:nowrap}
.gfr-streak{color:var(--text)}

/* ════════════════════════════════════════
   DAILY GOAL WIDGET
════════════════════════════════════════ */
.daily-goal-widget{
  position:fixed;bottom:24px;left:24px;z-index:200;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.18));
  transition:transform 0.2s var(--ease),filter 0.2s;
}
.daily-goal-widget:hover{transform:scale(1.08);filter:drop-shadow(0 4px 14px rgba(0,0,0,0.25))}
.daily-goal-widget.hidden{display:none}
.dgw-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dgw-bg{fill:var(--glass-bg);stroke:var(--glass-border);stroke-width:3}
.dgw-fill{fill:none;stroke:rgba(var(--glow),0.8);stroke-width:3;stroke-linecap:round;stroke-dasharray:100.53;stroke-dashoffset:100.53;transition:stroke-dashoffset 0.6s var(--ease)}
.dgw-label{position:relative;font-size:11px;font-family:'Geist',sans-serif;font-weight:600;color:var(--text);line-height:1}
.daily-goal-widget.dgw-done .dgw-fill{stroke:rgba(var(--glow),1)}
.daily-goal-widget.dgw-done .dgw-label{color:rgba(var(--glow),1)}

.daily-goal-popover{
  position:fixed;bottom:80px;left:24px;z-index:201;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:16px;padding:14px 16px;
  backdrop-filter:blur(20px);box-shadow:0 12px 32px rgba(0,0,0,0.18);
  min-width:160px;
}
.daily-goal-popover.hidden{display:none}
.dgp-title{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:600;color:var(--text);margin-bottom:10px;text-align:center;letter-spacing:0.03em}
.dgp-row{display:flex;align-items:center;justify-content:center;gap:12px}
.dgp-step{background:var(--glass-bg-s);border:1px solid var(--glass-border);border-radius:8px;width:28px;height:28px;font-size:16px;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.dgp-step:hover{background:var(--glass-bg-h)}
.dgp-val{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:700;color:var(--text);min-width:40px;text-align:center}
.dgp-hint{font-size:10px;color:var(--text-f);text-align:center;margin-top:8px;font-family:'Geist',sans-serif}

/* ════════════════════════════════════════
   LEADERBOARD
════════════════════════════════════════ */
.lb-top-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--glass-bg-s);border:1px solid var(--glass-border);border-radius:999px;color:var(--text);font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.25s var(--ease)}
.lb-top-btn:hover{background:var(--glass-bg-h);transform:translateY(-1px)}
.lb-btn-label{}

.lb-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center}
.lb-overlay.hidden{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(8px)}
.lb-panel{position:relative;z-index:1;width:360px;max-width:94vw;border-radius:24px;padding:22px 24px 20px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(24px);box-shadow:0 28px 64px rgba(0,0,0,0.2)}
.lb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.lb-title{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:700;color:var(--text)}

.lb-your-code-row{display:flex;align-items:center;gap:8px;background:var(--glass-bg-s);border:1px solid var(--glass-border);border-radius:12px;padding:8px 14px;margin-bottom:12px}
.lb-code-label{font-family:'Geist',sans-serif;font-size:11px;color:var(--text-s);text-transform:uppercase;letter-spacing:0.06em}
.lb-code-val{font-family:'Geist',sans-serif;font-size:16px;font-weight:700;color:var(--text);letter-spacing:0.12em;flex:1}
.lb-copy-btn{background:none;border:none;color:var(--text-s);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;transition:color 0.15s}
.lb-copy-btn:hover{color:var(--text)}

.lb-date-row{font-family:'Geist',sans-serif;font-size:11px;color:var(--text-f);margin-bottom:12px;text-align:center;text-transform:uppercase;letter-spacing:0.08em}

.lb-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;margin-bottom:16px}
.lb-loading{text-align:center;color:var(--text-f);font-size:13px;padding:20px;font-family:'Geist',sans-serif}
.lb-empty{text-align:center;color:var(--text-f);font-size:13px;padding:16px;font-family:'Geist',sans-serif;line-height:1.6}

.lb-entry{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--glass-bg-s);border:1px solid var(--glass-border);transition:all 0.15s}
.lb-entry.lb-you{background:rgba(var(--glow),0.1);border-color:rgba(var(--glow),0.3)}
.lb-rank{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--text-s);text-align:center}
.lb-entry:nth-child(1) .lb-rank{color:#f59e0b}
.lb-entry:nth-child(2) .lb-rank{color:#94a3b8}
.lb-entry:nth-child(3) .lb-rank{color:#b45309}
.lb-info{min-width:0}
.lb-name{font-family:'Geist',sans-serif;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.lb-bar{height:4px;background:var(--glass-border);border-radius:999px;overflow:hidden}
.lb-bar-fill{height:100%;background:rgba(var(--glow),0.7);border-radius:999px;transition:width 0.6s var(--ease)}
.lb-time{font-family:'Geist',sans-serif;font-size:12px;color:var(--text-s);white-space:nowrap;font-weight:500}
.lb-you .lb-name::after{content:' (you)';opacity:0.5;font-weight:400}
.lb-remove-btn{background:none;border:none;color:var(--text-f);cursor:pointer;font-size:11px;padding:2px 6px;border-radius:6px;margin-left:4px;transition:all 0.15s;display:none}
.lb-entry:hover .lb-remove-btn{display:inline-block}
.lb-remove-btn:hover{background:rgba(220,80,80,0.1);color:#e05050}

.lb-add-row{display:flex;gap:8px;margin-bottom:8px}
.lb-code-input{flex:1;border:1.5px solid var(--glass-border);border-radius:12px;padding:9px 13px;font-family:'Geist',sans-serif;font-size:13px;background:var(--glass-bg-s);color:var(--text);outline:none;text-transform:uppercase;letter-spacing:0.1em;transition:border-color 0.2s}
.lb-code-input:focus{border-color:rgba(var(--glow),0.5)}
.lb-add-btn{padding:9px 18px;font-size:13px;flex-shrink:0}
.lb-msg{font-size:12px;font-family:'Geist',sans-serif;text-align:center;padding:4px;border-radius:8px}
.lb-msg.ok{color:#22c55e;background:rgba(34,197,94,0.08)}
.lb-msg.err{color:#e05050;background:rgba(220,80,80,0.08)}
.lb-msg.hidden{display:none}

/* Settings input row */
.settings-input-row{display:flex;gap:8px;align-items:center}
.settings-input-row .auth-input{flex:1}

/* Nickname row in leaderboard */
.lb-your-name-row{display:flex;align-items:center;gap:8px;background:var(--glass-bg-s);border:1px solid var(--glass-border);border-radius:12px;padding:8px 14px;margin-bottom:8px}
.lb-name-val{font-family:'Geist',sans-serif;font-size:14px;font-weight:600;color:var(--text);flex:1}
.lb-edit-btn{background:none;border:none;cursor:pointer;font-size:12px;padding:2px 4px;border-radius:4px;opacity:0.6;transition:opacity 0.15s}
.lb-edit-btn:hover{opacity:1}
.lb-name-edit-row{display:flex;gap:8px;margin-bottom:8px}
.lb-name-edit-row.hidden{display:none}