/* =====================================================
   PlanToday — style.css
   ===================================================== */

/* ── ROOT VARIABLES ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a;--bg2:#111;--bg3:#191919;--bg4:#212121;
  --b:#252525;--b2:#303030;--b3:#3a3a3a;
  --t:#f0f0f0;--t2:#888;--t3:#4a4a4a;--t4:#2a2a2a;
  --acc:#6c63ff;--acc2:#a78bfa;
  --g:#22c55e;--r:#ef4444;--am:#f59e0b;--bl:#3b82f6;
  --font:'Outfit',sans-serif;
}
html,body{min-height:100vh;background:var(--bg);color:var(--t);font-family:var(--font);overflow-x:hidden}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:#252525;border-radius:2px}

/* ── 3D TILT ── */
.tilt{transform-style:preserve-3d;transition:transform .15s ease}
.tilt:hover{transform:perspective(600px) rotateX(2deg) rotateY(-2deg) translateZ(4px)}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 20px;border-radius:10px;
  font-size:13px;font-weight:600;cursor:pointer;border:none;
  font-family:var(--font);outline:none;
  position:relative;overflow:hidden;
  transition:transform .12s,box-shadow .2s;
  letter-spacing:.01em;
}
.btn .rip{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.22);
  transform:scale(0);
  animation:rip-go .55s ease-out forwards;
  pointer-events:none;
}
@keyframes rip-go{to{transform:scale(5);opacity:0}}
.btn:active{transform:scale(.95)}
.btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.3;fill:none;flex-shrink:0}

.btn-p{
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#fff;background-size:200% 200%;background-position:0% 0%;
  box-shadow:0 2px 16px rgba(108,99,255,.25);
  transition:background-position .4s,transform .12s,box-shadow .25s;
}
.btn-p:hover{background-position:100% 100%;box-shadow:0 4px 28px rgba(108,99,255,.5);transform:translateY(-2px)}

.btn-glow{animation:btn-gl 2.5s ease-in-out infinite}
@keyframes btn-gl{
  0%,100%{box-shadow:0 2px 16px rgba(108,99,255,.25)}
  55%{box-shadow:0 0 0 8px rgba(108,99,255,0),0 4px 24px rgba(108,99,255,.5)}
}
.btn-glow:hover{animation:none}

.btn-o{background:transparent;color:var(--t2);border:1px solid var(--b2);transition:all .2s}
.btn-o:hover{color:var(--t);border-color:var(--acc);box-shadow:0 0 0 3px rgba(108,99,255,.1),inset 0 0 14px rgba(108,99,255,.04);transform:translateY(-1px)}

.btn-gh{background:var(--bg3);border:1px solid var(--b);color:var(--t2);transition:all .2s}
.btn-gh:hover{background:var(--bg4);border-color:var(--b2);color:var(--t);transform:translateY(-1px)}

.btn-r{background:#160808;border:1px solid #2e1010;color:var(--r);transition:all .2s}
.btn-r:hover{background:#1e0c0c;border-color:var(--r);box-shadow:0 0 0 3px rgba(239,68,68,.08);transform:translateY(-1px)}

.btn-gs{background:#091410;border:1px solid #123420;color:var(--g);transition:all .22s;position:relative;overflow:hidden;}
.btn-gs::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(34,197,94,.12),transparent);transform:translateX(-100%);transition:transform .5s}
.btn-gs:hover::before{transform:translateX(100%)}
.btn-gs:hover{border-color:var(--g);box-shadow:0 0 14px rgba(34,197,94,.18);transform:translateY(-1px)}

.btn-sv{
  background:#091410;border:1px solid #123420;color:var(--g);
  font-size:12px;padding:7px 16px;border-radius:8px;cursor:pointer;
  font-family:var(--font);font-weight:600;position:relative;overflow:hidden;transition:all .22s;
}
.btn-sv::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,197,94,.14),transparent);opacity:0;transition:opacity .25s}
.btn-sv:hover::before{opacity:1}
.btn-sv:hover{border-color:var(--g);box-shadow:0 4px 12px rgba(34,197,94,.2);transform:translateY(-1px)}
.btn-sv:active{transform:scale(.95)}

.ta{width:27px;height:27px;border-radius:7px;cursor:pointer;background:var(--bg3);border:1px solid var(--b);display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s;color:var(--t3);position:relative;overflow:hidden}
.ta:hover{transform:scale(1.18) rotate(-4deg)}
.ta.ad:hover{background:#091410;border-color:var(--g);color:var(--g)}
.ta.am:hover{background:#160808;border-color:var(--r);color:var(--r)}
.ta.ax:hover{background:#160808;border-color:var(--r);color:var(--r)}

.icon-btn{width:32px;height:32px;border-radius:8px;cursor:pointer;background:var(--bg3);border:1px solid var(--b);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--t2);transition:all .2s;position:relative;overflow:hidden}
.icon-btn:hover{background:var(--bg4);border-color:var(--b2);color:var(--t);transform:rotate(30deg)}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:8px}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:7px}

/* ── STAT CARDS ── */
.sc{
  padding:18px 16px;border-radius:14px;background:var(--bg2);
  border:1px solid var(--b);cursor:default;
  position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
  transform-style:preserve-3d;
}
.sc:hover{transform:perspective(500px) rotateX(-3deg) rotateY(3deg) translateY(-4px);box-shadow:8px 16px 40px rgba(0,0,0,.5);border-color:var(--b2)}
.sc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 60%);pointer-events:none}
.sc::after{content:'';position:absolute;top:0;right:0;width:40px;height:40px;border-radius:0 14px 0 40px;background:var(--sc,rgba(108,99,255,.06))}
.sc-num{font-size:34px;font-weight:800;line-height:1;margin-bottom:3px;letter-spacing:-1px}
.sc-l{font-size:10px;color:var(--t2);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sc-bar{height:2px;background:var(--bg4);border-radius:2px;margin-top:12px;overflow:hidden}
.sc-bf{height:100%;border-radius:2px;transition:width .8s ease}

/* ── NAV ── */
nav{
  height:54px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:var(--bg);
  border-bottom:1px solid var(--b);
  position:sticky;top:0;z-index:200;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--t)}
.logo-animated{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}
.logo-svg{width:38px;height:38px;overflow:visible}
.logo-ring{
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:ring-draw 1.2s ease .2s forwards, ring-spin 8s linear 1.4s infinite;
  transform-origin:18px 18px;
}
@keyframes ring-draw{to{stroke-dashoffset:0}}
@keyframes ring-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.logo-check{stroke-dasharray:20;stroke-dashoffset:20;animation:check-draw .5s ease 1.2s forwards}
@keyframes check-draw{to{stroke-dashoffset:0}}
.logo-dot1{animation:dot-pop .3s cubic-bezier(.34,1.56,.64,1) .7s both}
.logo-dot2{animation:dot-pop .3s cubic-bezier(.34,1.56,.64,1) .85s both}
.logo-dot3{animation:dot-pop .3s cubic-bezier(.34,1.56,.64,1) 1s both}
@keyframes dot-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.logo:hover .logo-animated{animation:logo-bounce .4s ease}
@keyframes logo-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}70%{transform:translateY(-1px)}}
.logo:hover .logo-ring{animation:ring-spin .6s linear infinite}
.logo-text-wrap{display:flex;align-items:baseline;gap:0;font-family:var(--font);font-size:18px;font-weight:800;letter-spacing:-.4px;overflow:hidden}
.logo-word1{color:#fff;animation:word-slide-in .5s cubic-bezier(.34,1.56,.64,1) .1s both}
.logo-word2{
  background:linear-gradient(135deg,var(--acc),var(--acc2),#ec4899);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:200%;
  animation:word-slide-in .5s cubic-bezier(.34,1.56,.64,1) .2s both, grad-move 4s ease-in-out 1s infinite alternate;
}
@keyframes word-slide-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes grad-move{0%{background-position:0%}100%{background-position:100%}}

.nav-tabs{display:flex;gap:2px;background:var(--bg2);border:1px solid var(--b);border-radius:9px;padding:3px}
.ntab{padding:5px 15px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--t3);font-family:var(--font);transition:all .18s;letter-spacing:.01em}
.ntab:hover{color:var(--t2)}
.ntab.on{background:var(--bg3);color:var(--t);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.nav-r{display:flex;align-items:center;gap:7px}
.nav-chip{padding:4px 10px;border-radius:7px;background:var(--bg2);border:1px solid var(--b);font-size:12px;color:var(--t2);font-family:'JetBrains Mono',monospace;letter-spacing:-.02em}
.streak-b{padding:4px 10px;border-radius:7px;background:#151000;border:1px solid #302000;font-size:12px;font-weight:700;color:var(--am);display:flex;align-items:center;gap:5px}

/* ── QUOTE BAR ── */
.quote-bar{
  border-bottom:1px solid var(--b);background:var(--bg);
  padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:12px;
  position:relative;overflow:hidden;cursor:pointer;transition:background .2s;
}
.quote-bar:hover{background:var(--bg2)}
.quote-bar::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 10%,rgba(108,99,255,.04) 50%,transparent 90%);animation:qbar-glow 4s ease-in-out infinite}
@keyframes qbar-glow{0%,100%{opacity:.5}50%{opacity:1}}
.qb-ico{font-size:14px;opacity:.4;flex-shrink:0}
.qb-text{font-size:13px;font-style:italic;color:var(--t2);font-family:'Playfair Display',serif;letter-spacing:.02em}
.qb-auth{font-size:11px;color:var(--acc);font-weight:600;white-space:nowrap}
.qb-sep{color:var(--t3);font-size:11px}
.qb-refresh{width:22px;height:22px;border-radius:6px;background:var(--bg3);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:all .22s;color:var(--t2);flex-shrink:0}
.qb-refresh:hover{border-color:var(--acc);color:var(--acc);transform:rotate(200deg)}

/* ── GOAL SELECTOR ── */
.goal-wrap{max-width:1280px;margin:0 auto;padding:14px 20px 0}
.goal-bar-card{background:var(--bg2);border:1px solid var(--b);border-radius:14px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;position:relative;overflow:hidden}
.goal-bar-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent)}
.goal-bar-card h3{font-size:14px;font-weight:700;margin-bottom:2px;letter-spacing:-.2px}
.goal-bar-card p{font-size:12px;color:var(--t2)}
.gpreset-wrap{display:flex;gap:6px;flex-wrap:wrap}
.gp{padding:6px 13px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;background:var(--bg3);border:1.5px solid var(--b);color:var(--t2);font-family:var(--font);transition:all .2s;position:relative;overflow:hidden;letter-spacing:.01em}
.gp::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--acc),var(--acc2));opacity:0;transition:opacity .2s}
.gp span{position:relative;z-index:1}
.gp:hover{border-color:var(--acc);color:var(--t);transform:translateY(-1px)}
.gp:hover::before{opacity:.1}
.gp.sel{border-color:var(--acc);color:var(--acc);background:rgba(108,99,255,.08)}
.gp.sel::before{opacity:.06}

/* ── HERO ── */
.hero{padding:18px 20px 14px;max-width:1280px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px}
.hero h1{font-size:clamp(22px,3.5vw,42px);font-weight:800;line-height:1.05;letter-spacing:-.5px;margin-bottom:5px;background:linear-gradient(135deg,#fff 30%,var(--acc2) 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:hero-grad 6s ease-in-out infinite;background-size:200%}
@keyframes hero-grad{0%,100%{background-position:0%}50%{background-position:100%}}
.hero-sub{font-size:13px;color:var(--t2);display:flex;align-items:center;gap:7px;font-weight:500}
.pdot{width:6px;height:6px;border-radius:50%;background:var(--g);flex-shrink:0;animation:pd-pulse 2s ease-in-out infinite}
@keyframes pd-pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}
.hero-btns{display:flex;gap:7px;flex-wrap:wrap}

/* ── STATS STRIP ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1280px;margin:0 auto;padding:0 20px 14px}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ── LAYOUT ── */
.app-grid{display:grid;grid-template-columns:1fr 310px;gap:14px;max-width:1280px;margin:0 auto;padding:0 20px 40px}
@media(max-width:880px){.app-grid{grid-template-columns:1fr}}
.col-l,.col-r{display:flex;flex-direction:column;gap:14px}

/* ── CARDS ── */
.card{background:var(--bg2);border:1px solid var(--b);border-radius:14px;overflow:hidden;position:relative;transition:border-color .22s,box-shadow .22s}
.card:hover{border-color:var(--b2)}
.card-3d{transform-style:preserve-3d;transition:transform .18s ease,box-shadow .18s ease,border-color .22s}
.card-3d:hover{transform:perspective(700px) rotateX(1.5deg) rotateY(-1.5deg) translateZ(3px);box-shadow:6px 12px 36px rgba(0,0,0,.4)}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:14px 17px 12px;border-bottom:1px solid var(--b)}
.card-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:-.2px}
.ci{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--bg3);border:1px solid var(--b2)}

/* ── TASK TABS ── */
.task-tabs{display:flex;gap:2px;padding:8px 13px;border-bottom:1px solid var(--b);overflow-x:auto}
.ttab{padding:5px 11px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--t3);font-family:var(--font);transition:all .16s;white-space:nowrap;display:flex;align-items:center;gap:4px;letter-spacing:.01em}
.ttab:hover{background:var(--bg3);color:var(--t2)}
.ttab.on{background:var(--bg3);color:var(--t);border:1px solid var(--b2)}
.tc{background:var(--bg);border-radius:20px;padding:1px 5px;font-size:10px;font-weight:600;color:var(--t3)}
.ttab.on .tc{color:var(--t2)}

/* ── CATEGORY CHIPS ── */
.cat-chips-w{padding:8px 13px 9px;border-bottom:1px solid var(--b);display:flex;gap:5px;flex-wrap:wrap}
.cchip{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;background:var(--bg);border:1px solid var(--b);color:var(--t3);font-family:var(--font);transition:all .16s;letter-spacing:.02em}
.cchip:hover{border-color:var(--b2);color:var(--t2);transform:translateY(-1px)}
.cchip.on{border-color:var(--acc);color:var(--acc);background:rgba(108,99,255,.07)}

/* ── FORM INPUTS ── */
.add-row{display:flex;gap:6px;padding:11px 13px;border-bottom:1px solid var(--b);flex-wrap:wrap}
.gi{flex:1;min-width:130px;padding:8px 12px;background:var(--bg);border:1px solid var(--b);border-radius:8px;font-size:13px;font-family:var(--font);color:var(--t);outline:none;transition:all .2s;font-weight:500}
.gi::placeholder{color:var(--t3)}
.gi:focus{border-color:var(--acc);background:var(--bg2);box-shadow:0 0 0 3px rgba(108,99,255,.09)}
.gsel{padding:8px 10px;background:var(--bg);border:1px solid var(--b);border-radius:8px;font-size:12px;font-family:var(--font);color:var(--t2);outline:none;cursor:pointer;transition:border-color .18s;font-weight:500}
.gsel:focus{border-color:var(--acc)}
.gsel option{background:#111;color:#f0f0f0}
.gtm{width:64px;padding:8px 9px;text-align:center;background:var(--bg);border:1px solid var(--b);border-radius:8px;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--t);outline:none;transition:border-color .18s}
.gtm:focus{border-color:var(--acc)}

/* ── TASK LIST ── */
.tlist{min-height:60px}
.e-state{text-align:center;padding:42px 18px;color:var(--t3);font-size:13px;line-height:1.9;font-weight:500}
.e-ico{display:block;font-size:32px;margin-bottom:10px;animation:e-fl 3s ease-in-out infinite}
@keyframes e-fl{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.05)}}
.ti{display:flex;align-items:flex-start;gap:10px;padding:12px 15px;border-bottom:1px solid var(--b);transition:background .14s,transform .14s;animation:ti-in .22s ease both;position:relative}
.ti::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ticlr,transparent);border-radius:0 1px 1px 0}
@keyframes ti-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.ti:last-child{border-bottom:none}
.ti:hover{background:rgba(255,255,255,.015);transform:translateX(2px)}

/* Checkbox */
.tchk{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--b2);background:var(--bg);cursor:pointer;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:border-color .18s;position:relative;overflow:hidden;font-size:10px;font-weight:700}
.tchk::after{content:'';position:absolute;inset:0;background:var(--g);border-radius:5px;transform:scale(0);transition:transform .22s cubic-bezier(.34,1.56,.64,1);opacity:0}
.tchk .ck{position:relative;z-index:1;transition:color .18s}
.tchk:hover{border-color:var(--g);transform:scale(1.1)}
.tchk.done{border-color:var(--g)}
.tchk.done::after{transform:scale(1);opacity:1}
.tchk.done .ck{color:#fff}
.tchk.missed{border-color:var(--r);background:rgba(239,68,68,.07)}
.tchk.missed .ck{color:var(--r)}

.tb{flex:1;min-width:0}
.tt{font-size:13px;font-weight:600;line-height:1.4;transition:all .18s;letter-spacing:-.1px}
.tt.xed{text-decoration:line-through;color:var(--t3)}
.tmeta{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;align-items:center}
.tpill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;border:1px solid transparent;letter-spacing:.03em}
.ttime{font-size:10px;color:var(--t3);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:2px}
.t-acts{display:flex;gap:3px;opacity:0;transition:opacity .14s;flex-shrink:0}
.ti:hover .t-acts{opacity:1}

/* ── PROGRESS ── */
.prog-body{padding:15px 17px}
.prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.prog-lbl{font-size:12px;font-weight:600;color:var(--t2);letter-spacing:.02em}
.prog-pct{font-size:22px;font-weight:800;letter-spacing:-1px;font-family:'JetBrains Mono',monospace}
.prog-track{height:7px;background:var(--bg4);border-radius:20px;overflow:hidden;margin-bottom:14px;position:relative}
.prog-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .8s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.prog-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);background-size:200%;animation:pgsh 2s linear infinite}
@keyframes pgsh{from{background-position:-200%}to{background-position:200%}}
.sub-rows{display:flex;flex-direction:column;gap:8px}
.sub-row{display:flex;align-items:center;gap:9px}
.sub-nm{font-size:11px;font-weight:700;width:80px;flex-shrink:0;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
.sub-trk{flex:1;height:4px;background:var(--bg4);border-radius:20px;overflow:hidden}
.sub-fl{height:100%;border-radius:20px;transition:width .6s ease}
.sub-ct{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--t3);width:28px;text-align:right}

/* ── WEEK CALENDAR ── */
.wgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:12px 14px}
.wd{border-radius:9px;background:var(--bg3);border:1px solid var(--b);padding:9px 3px;text-align:center;transition:all .2s;cursor:default;transform-style:preserve-3d}
.wd:hover{border-color:var(--b2);transform:perspective(300px) rotateX(-4deg) translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.wd.today{border-color:var(--acc);background:rgba(108,99,255,.07)}
.wd.complete{border-color:var(--g);background:rgba(34,197,94,.04)}
.wd-n{font-size:9px;font-weight:800;color:var(--t3);letter-spacing:.06em;text-transform:uppercase}
.wd-d{font-size:16px;font-weight:800;margin:3px 0;color:var(--t3);letter-spacing:-1px}
.wd.today .wd-d{color:var(--acc)}.wd.complete .wd-d{color:var(--g)}
.wd-p{font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--t3)}
.wd.today .wd-p{color:var(--acc)}.wd.complete .wd-p{color:var(--g)}
.wd-dot{width:4px;height:4px;border-radius:50%;background:var(--b2);margin:3px auto 0}
.wd.today .wd-dot{background:var(--acc)}.wd.complete .wd-dot{background:var(--g)}

/* ── CATEGORY MANAGER ── */
.cat-mgr{padding:13px 15px;border-top:1px solid var(--b)}
.cat-mgr-title{font-size:11px;font-weight:800;color:var(--t2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.cat-list{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;max-height:180px;overflow-y:auto}
.cat-item{display:flex;align-items:center;gap:7px;padding:7px 10px;background:var(--bg3);border:1px solid var(--b);border-radius:9px;font-size:12px;transition:all .18s}
.cat-item:hover{border-color:var(--b2);transform:translateX(2px)}
.cat-item-e{font-size:14px;flex-shrink:0}
.cat-item-n{flex:1;font-weight:600;color:var(--t);letter-spacing:-.1px}
.cat-item-c{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cat-add-row{display:flex;gap:5px}
.cae{width:34px;text-align:center;padding:6px 3px;background:var(--bg);border:1px solid var(--b);border-radius:7px;color:var(--t);font-size:15px;outline:none;transition:border-color .18s}
.cae:focus{border-color:var(--acc)}
.can{flex:1;padding:6px 10px;background:var(--bg);border:1px solid var(--b);border-radius:7px;font-size:12px;font-family:var(--font);color:var(--t);outline:none;font-weight:500;transition:border-color .18s}
.can:focus{border-color:var(--acc)}
.can::placeholder{color:var(--t3)}
.cac{width:28px;height:28px;border:none;background:none;cursor:pointer;border-radius:6px;padding:2px}

/* ── TOMORROW ── */
.tmr-add{display:flex;gap:6px;padding:10px 13px;border-bottom:1px solid var(--b)}
.tmr-list{min-height:28px}
.tmr-i{display:flex;align-items:center;gap:8px;padding:9px 15px;border-bottom:1px solid var(--b);font-size:13px;transition:all .14s;animation:ti-in .2s ease both}
.tmr-i:last-child{border-bottom:none}.tmr-i:hover{background:rgba(255,255,255,.015);transform:translateX(2px)}
.tmr-n{width:19px;height:19px;border-radius:6px;flex-shrink:0;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.22);color:var(--acc);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace}
.tmr-t{flex:1;color:var(--t2);font-size:12px;font-weight:500}
.tdel{background:none;border:none;cursor:pointer;color:var(--t3);font-size:16px;padding:2px 4px;line-height:1;transition:all .14s}
.tdel:hover{color:var(--r);transform:scale(1.2)}

/* ── NOTES ── */
.nstabs{display:flex;gap:2px;padding:9px 13px;border-bottom:1px solid var(--b)}
.nstab{padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--t3);font-family:var(--font);transition:all .16s;letter-spacing:.01em}
.nstab:hover{background:var(--bg3);color:var(--t2)}.nstab.on{background:var(--bg3);color:var(--t);border:1px solid var(--b2)}
.nbadge{background:rgba(108,99,255,.14);color:var(--acc);border-radius:20px;padding:1px 6px;font-size:10px;font-weight:700;margin-left:3px}
.npanel{display:none;padding:13px 15px}.npanel.on{display:block}
.nc-wrap{background:var(--bg);border:1px solid var(--b);border-radius:10px;padding:12px;transition:all .2s}
.nc-wrap:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(108,99,255,.07)}
.nta{width:100%;background:transparent;border:none;font-size:13px;font-family:var(--font);color:var(--t);resize:none;outline:none;min-height:90px;line-height:1.7;font-weight:500}
.nta::placeholder{color:var(--t3)}
.nc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:8px;border-top:1px solid var(--b);flex-wrap:wrap;gap:7px}
.nc-sel{padding:5px 9px;background:var(--bg2);border:1px solid var(--b);border-radius:7px;font-size:11px;font-family:var(--font);color:var(--t2);outline:none;cursor:pointer;font-weight:600}
.nc-sel option{background:#111}
.cct{font-size:10px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.note-card{background:var(--bg);border:1px solid var(--b);border-radius:10px;padding:12px;margin-bottom:8px;position:relative;transition:all .18s;animation:ti-in .2s ease both}
.note-card:hover{border-color:var(--b2);transform:translateY(-1px)}
.nc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ntag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;border:1px solid transparent;letter-spacing:.04em;text-transform:uppercase}
.nts{font-size:10px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.nbody{font-size:12px;line-height:1.7;color:var(--t2);white-space:pre-wrap;word-break:break-word;font-weight:500}
.nacts{position:absolute;top:9px;right:9px;display:flex;gap:3px;opacity:0;transition:opacity .14s}
.note-card:hover .nacts{opacity:1}
.na{background:none;border:none;cursor:pointer;color:var(--t3);font-size:13px;padding:3px 5px;border-radius:5px;transition:all .14s}
.na:hover{color:var(--r);background:rgba(239,68,68,.07)}
.na.pin:hover{color:var(--am);background:rgba(245,158,11,.07)}
.ne{text-align:center;padding:24px;color:var(--t3);font-size:12px;font-weight:500}

/* ── HEATMAP ── */
.hmap{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:7px}
.hc{width:11px;height:11px;border-radius:2px;transition:transform .14s,box-shadow .14s;cursor:default}
.hc:hover{transform:scale(1.5);z-index:2}
.h0{background:var(--bg3);border:1px solid var(--b)}
.h1{background:rgba(108,99,255,.2)}.h2{background:rgba(108,99,255,.4)}.h3{background:rgba(108,99,255,.65)}.h4{background:var(--acc);box-shadow:0 0 5px rgba(108,99,255,.4)}
.hleg{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--t3);font-weight:600}
.hl{width:9px;height:9px;border-radius:2px}
.bchart{display:flex;gap:5px;align-items:flex-end;height:80px;padding:0 2px;margin-bottom:7px}
.bc-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.bc-bar{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(to top,var(--acc),var(--acc2));transition:height .7s cubic-bezier(.34,1.56,.64,1);min-height:3px;position:relative}
.bc-bar::after{content:attr(data-v);position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--t3);font-family:'JetBrains Mono',monospace;white-space:nowrap}
.bc-lbl{font-size:9px;color:var(--t3);font-weight:700;letter-spacing:.02em}
.lsr{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;background:var(--bg3);border:1px solid var(--b);border-radius:9px;margin-bottom:6px;transition:all .18s}
.lsr:hover{border-color:var(--b2);transform:translateX(2px)}
.lsl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);font-weight:500}
.lsl span:first-child{font-size:16px}
.lsv{font-size:13px;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--acc)}

/* ── POMODORO ── */
.pomo-b{padding:18px;text-align:center}
.pomo-rw{position:relative;display:inline-block;margin-bottom:6px}
.pomo-rw svg{filter:drop-shadow(0 0 12px rgba(108,99,255,.25));transition:filter .3s}
.pomo-rw:hover svg{filter:drop-shadow(0 0 20px rgba(108,99,255,.45))}
.pomo-dig{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.pomo-time{font-size:28px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--t);font-family:'JetBrains Mono',monospace}
.pomo-lbl{font-size:10px;color:var(--t2);font-weight:700;letter-spacing:.1em;margin-top:3px;text-transform:uppercase}
.pomo-info{font-size:12px;color:var(--t3);margin-bottom:13px;font-weight:500}
.pomo-btns{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.pdots{display:flex;gap:5px;justify-content:center;margin-bottom:7px}
.pdot-c{width:8px;height:8px;border-radius:50%;background:var(--bg3);border:1px solid var(--b2);transition:all .28s}
.pdot-c.lit{background:var(--acc);border-color:var(--acc);box-shadow:0 0 8px rgba(108,99,255,.5);transform:scale(1.2)}
.pomo-hint{font-size:11px;color:var(--t3);font-weight:500}

/* ── MODALS ── */
.modal-ov{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s}
.modal-ov.open{opacity:1;pointer-events:all}
.mbox{width:min(480px,92vw);background:var(--bg2);border:1px solid var(--b2);border-radius:18px;padding:24px;position:relative;max-height:88vh;overflow-y:auto;transform:scale(.9) translateY(16px) perspective(600px) rotateX(4deg);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.modal-ov.open .mbox{transform:scale(1) translateY(0) perspective(600px) rotateX(0)}
.m-topline{position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent)}
.m-title{font-size:18px;font-weight:800;margin-bottom:2px;letter-spacing:-.4px}
.m-sub{font-size:12px;color:var(--t2);margin-bottom:20px;font-weight:500}
.m-f{margin-bottom:13px}
.m-lbl{font-size:10px;font-weight:800;color:var(--t2);margin-bottom:5px;display:block;letter-spacing:.07em;text-transform:uppercase}
.m-g2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.m-acts{display:flex;gap:7px;justify-content:flex-end;margin-top:18px}
.pri-row{display:flex;gap:6px}
.po{flex:1;padding:7px;text-align:center;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700;background:var(--bg3);border:1.5px solid var(--b);color:var(--t3);transition:all .16s;font-family:var(--font);letter-spacing:.01em}
.po:hover{border-color:var(--b2);color:var(--t2);transform:translateY(-1px)}
.po.on{background:rgba(108,99,255,.09);color:var(--acc);border-color:var(--acc)}
.sdiv{font-size:10px;font-weight:800;color:var(--t3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.sdiv::after{content:'';flex:1;height:1px;background:var(--b)}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tcard{padding:13px;background:var(--bg3);border:1.5px solid var(--b);border-radius:11px;cursor:pointer;transition:all .18s;transform-style:preserve-3d}
.tcard:hover{border-color:var(--acc);background:rgba(108,99,255,.05);transform:translateY(-2px) perspective(400px) rotateX(2deg)}
.tc-icon{font-size:20px;margin-bottom:6px}
.tc-name{font-size:13px;font-weight:700;margin-bottom:2px;letter-spacing:-.2px}
.tc-desc{font-size:11px;color:var(--t3);font-weight:500}
.tc-cnt{font-size:10px;color:var(--acc);margin-top:3px;font-weight:700}

/* ── SETUP BANNER ── */
.setup-wrap{max-width:1280px;margin:12px auto 0;padding:0 20px;display:none}
.setup-inner{background:var(--bg2);border:1px solid var(--b);border-radius:13px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;position:relative;overflow:hidden}
.setup-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent)}
.setup-inner h3{font-size:14px;font-weight:800;margin-bottom:2px;letter-spacing:-.2px}
.setup-inner p{font-size:12px;color:var(--t2);font-weight:500}
.setup-form{display:flex;gap:6px;flex-wrap:wrap}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;right:20px;z-index:900;padding:11px 16px;border-radius:10px;font-size:12px;font-weight:600;transform:translateY(50px) scale(.92);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;max-width:280px;display:flex;align-items:center;gap:7px;border:1px solid transparent;letter-spacing:.01em;font-family:var(--font)}
.toast.show{transform:translateY(0) scale(1);opacity:1}
.t-ok{background:#0a1a0d;border-color:#1a4a24;color:var(--g)}
.t-warn{background:#171000;border-color:#3a2800;color:var(--am)}
.t-info{background:#0d0b1e;border-color:#261a5a;color:var(--acc)}
.t-err{background:#180808;border-color:#3a1010;color:var(--r)}

/* ── FOOTER & CONNECT ── */
footer{text-align:center;padding:22px;border-top:1px solid var(--b);background:var(--bg2)}
.fl{font-size:15px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:-.3px}
.fc{font-size:11px;color:var(--t3);font-weight:500}
.fn{background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800}
.connect-section{margin:18px 0 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.connect-label{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.12em;text-transform:uppercase}
.connect-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.clink{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;background:var(--bg3);border:1.5px solid var(--b2);font-size:13px;font-weight:600;color:var(--t2);text-decoration:none;position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s,color .18s,background .18s;letter-spacing:.01em}
.clink::before{content:'';position:absolute;inset:0;border-radius:11px;background:linear-gradient(135deg,var(--cl),transparent 60%);opacity:0;transition:opacity .25s}
.clink::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:translateX(-100%);transition:transform .5s ease}
.clink:hover::after{transform:translateX(100%)}
.clink:hover{color:#fff;border-color:var(--cl);transform:translateY(-3px) scale(1.02);box-shadow:0 8px 28px var(--cl-glow,rgba(108,99,255,.3))}
.clink:hover::before{opacity:1}
.clink:active{transform:scale(.96)}
.clink-icon{width:17px;height:17px;flex-shrink:0;color:var(--t2);transition:color .18s;position:relative;z-index:1}
.clink:hover .clink-icon{color:var(--cl)}
.clink span{position:relative;z-index:1}

/* ── PAGES ── */
.app-page{display:none}.app-page.on{display:block;animation:pg-in .28s ease}
@keyframes pg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── PARTICLES ── */
.particle{position:fixed;pointer-events:none;z-index:0;border-radius:50%;animation:p-float var(--pd,10s) ease-in-out var(--pdy,0s) infinite;opacity:0}
@keyframes p-float{0%{opacity:0;transform:translateY(0) scale(0)}10%{opacity:var(--po,.5)}85%{opacity:calc(var(--po,.5)*.4)}100%{opacity:0;transform:translateY(-90px) scale(1.5)}}

/* ── RESPONSIVE ── */
@media(max-width:700px){
  nav{padding:0 12px}.nav-tabs{display:none}
  .goal-wrap,.hero,.stats,.app-grid{padding-left:12px;padding-right:12px}
}