/* =========================================================
   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)}}
@media(max-width:700px){.app{padding:12px;gap:12px}.boards-row{grid-template-columns:1fr}.top-bar{margin:10px 12px 0;padding:9px 14px}.timer-display{font-size:72px}.goals-grid{grid-template-columns:1fr}.music-panel{width:260px}}

/* ── 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)}