:root{
    --bg:#f2f1ee;
    --paper:#fafaf8;
    --ink:#111110;
    --ink-soft:#6b6966;
    --ink-faint:#a8a5a0;
    --line:#dddbd6;
    --line-soft:rgba(221,219,214,0.72);

    --indigo:#2563eb;
    --indigo-soft:rgba(37,99,235,0.10);
    --coral:#ee5d3a;
    --coral-soft:#fdeae3;
    --teal:#0d9285;
    --teal-soft:#e2f5f2;

    --danger:#d3392a;
    --danger-soft:#fbe7e4;

    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 10px 24px -8px rgba(17,17,16,0.10);
    --shadow-hover: 0 4px 10px rgba(0,0,0,0.08), 0 18px 34px -10px rgba(17,17,16,0.16);
  }
  *{ box-sizing:border-box; }
  body{
    margin:0; background: var(--bg); color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing:antialiased;
  }
  .display{ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
  .mono{ font-family: 'Cascadia Mono', Consolas, monospace; }

  .keybar{
    height:5px; width:100%;
    background: linear-gradient(90deg, var(--indigo) 0 33.3%, var(--coral) 33.3% 66.6%, var(--teal) 66.6% 100%);
  }

  header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 40px; border-bottom:1px solid var(--line-soft);
    background: var(--paper);
  }
  .brand{ display:flex; align-items:center; gap:11px; }
  .brand-mark{ width:9px; height:9px; border-radius:50%; background: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); }
  .brand-name{ font-weight:700; font-size:14px; letter-spacing:0.02em; }
  .crumb{ color: var(--ink-faint); font-size:14px; }
  .crumb-sep{ color: var(--line); margin: 0 12px; }

  main{ max-width: 1080px; margin: 0 auto; padding: 48px 40px 60px; }

  .eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .eyebrow-line{ width:28px; height:2px; background: var(--indigo); }
  .eyebrow-text{ font-size:12px; font-weight:600; letter-spacing:0.14em; color: var(--indigo); text-transform:uppercase; }

  h1{ font-size: clamp(28px, 3.6vw, 38px); line-height:1.1; font-weight:700; margin:0 0 10px; letter-spacing:-0.01em; }
  .lede{ color: var(--ink-soft); font-size:15.5px; line-height:1.6; margin: 0 0 32px; max-width:560px; }

  /* ---------- Progress card ---------- */
  .progress-card{
    background: var(--paper); border:1px solid var(--line); border-radius:18px;
    box-shadow: var(--shadow); padding: 24px 26px; margin-bottom:18px;
    display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  }
  .ring-wrap{ position:relative; width:74px; height:74px; flex-shrink:0; }
  .ring-wrap svg{ width:100%; height:100%; transform: rotate(-90deg); }
  .ring-bg{ stroke: var(--line); }
  .ring-fill{ stroke: var(--indigo); stroke-linecap:round; transition: stroke-dashoffset .5s ease; }
  .ring-label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:700;
  }
  .progress-stats{ flex:1; min-width:200px; }
  .progress-title{ font-size:15px; font-weight:700; margin-bottom:3px; }
  .progress-sub{ font-size:13.5px; color: var(--ink-soft); }
  .progress-pill{
    font-size:12.5px; font-weight:600; color: var(--indigo); background: var(--indigo-soft);
    padding:6px 13px; border-radius:999px; white-space:nowrap;
  }

  /* ---------- Badges ---------- */
  .panel{
    background: var(--paper); border:1px solid var(--line); border-radius:18px;
    box-shadow: var(--shadow); padding: 22px 26px; margin-bottom:18px;
  }
  .panel h2{ margin:0 0 14px; font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
  .panel h2 .ic{ color: var(--indigo); width:16px; height:16px; }

  .badges{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
  @media (max-width:640px){ .badges{ grid-template-columns:1fr; } }
  .badge{
    border-radius:13px; padding:13px; display:flex; gap:11px; align-items:center;
    border:1px solid var(--line-soft); background: var(--bg);
    transition: all .35s cubic-bezier(.3,1.5,.4,1); filter: grayscale(1); opacity:.5;
  }
  .badge.earned{ filter:none; opacity:1; border-color: rgba(37,99,235,0.25); background: var(--indigo-soft); }
  .badge-icon{
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; background: var(--paper); color: var(--indigo);
  }
  .badge.earned .badge-icon{ background: var(--indigo); color:#fff; }
  .badge-title{ font-weight:700; font-size:13.5px; }
  .badge-desc{ font-size:12px; color: var(--ink-soft); margin-top:1px; }

  /* ---------- Form ---------- */
  .field-label{ font-size:13px; font-weight:600; color: var(--ink-soft); margin-bottom:7px; display:block;}
  #task-input{
    width:100%; padding: 12px 14px; border-radius:11px;
    border:1px solid var(--line); background: var(--bg);
    color: var(--ink); font-size:15px; font-family:inherit;
  }
  #task-input::placeholder{ color: var(--ink-faint); }
  #task-input:focus{ outline:2px solid var(--indigo); outline-offset:1px; background:#fff; }

  .cat-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
  .cat-pill{
    border:1px solid var(--line); background: var(--bg); color: var(--ink-soft);
    padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600;
    cursor:pointer; display:flex; align-items:center; gap:6px; transition: all .15s ease;
    font-family:inherit;
  }
  .cat-pill:hover{ background: var(--line-soft); }
  .cat-pill.active{ color:#fff; border-color: transparent; }
  .cat-pill[data-cat="work"].active{ background: var(--indigo); }
  .cat-pill[data-cat="personal"].active{ background: var(--coral); }
  .cat-pill[data-cat="shopping"].active{ background: var(--teal); }

  .form-actions{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
  .btn-primary{
    background: var(--indigo); color:#fff; border:none; padding:11px 20px; border-radius:11px;
    font-weight:700; font-size:14.5px; cursor:pointer; display:flex; align-items:center; gap:8px;
    font-family:inherit; transition: transform .15s ease, filter .15s ease;
    box-shadow: 0 6px 16px rgba(37,99,235,0.28);
  }
  .btn-primary:hover{ filter:brightness(1.08); transform: translateY(-1px); }
  .btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

  .banner{ margin-top:14px; padding:11px 14px; border-radius:11px; font-size:13.5px; display:none; align-items:center; gap:8px; }
  .banner.show{ display:flex; }
  .banner.warn{ background: var(--coral-soft); border:1px solid rgba(238,93,58,0.25); color:#a8401f; }
  .banner.err{ background: var(--danger-soft); border:1px solid rgba(211,57,42,0.25); color: var(--danger); }

  /* ---------- Columns ---------- */
  .columns{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
  @media (max-width:760px){ .columns{ grid-template-columns:1fr; } }

  .col{ display:flex; flex-direction:column; }
  .col-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .col-head-left{ display:flex; align-items:center; gap:9px; }
  .dot{ width:9px; height:9px; border-radius:50%; }
  .dot.work{ background: var(--indigo); }
  .dot.personal{ background: var(--coral); }
  .dot.shopping{ background: var(--teal); }
  .col-title{ font-weight:700; font-size:15px; }
  .col-count{ font-size:11.5px; color: var(--ink-soft); background: var(--bg); padding:2px 9px; border-radius:999px; border:1px solid var(--line-soft); }

  .list{ display:flex; flex-direction:column; gap:8px; min-height: 8px; }

  .card{
    border-radius:13px; border:1px solid var(--line); background: var(--paper);
    box-shadow: var(--shadow);
    padding:11px 12px; display:flex; align-items:flex-start; gap:10px;
    transition: all .2s ease; animation: rise .3s ease;
  }
  @keyframes rise{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
  .card.done{ opacity:.6; box-shadow:none; }
  .card.done .card-title{ text-decoration: line-through; color: var(--ink-soft); }

  .check{
    width:20px; height:20px; border-radius:6px; border:2px solid rgba(19,20,28,0.2);
    background: transparent; flex-shrink:0; cursor:pointer; margin-top:1px;
    display:flex; align-items:center; justify-content:center; transition: all .2s ease;
  }
  .check svg{ width:12px; height:12px; opacity:0; transition: opacity .15s ease; }
  .card.done .check{ background: var(--teal); border-color: var(--teal); }
  .card.done .check svg{ opacity:1; color:#fff; }

  .card-title{ flex:1; font-size:14px; line-height:1.4; color: var(--ink); word-break: break-word; cursor: text; padding:1px 0; }
  .card-title[contenteditable="true"]{ outline:none; border-bottom:1px dashed var(--indigo); }

  .card-actions{ display:flex; gap:2px; flex-shrink:0; }
  .icon-btn{ background:none; border:none; color: var(--ink-faint); cursor:pointer; padding:5px; border-radius:8px; display:flex; transition: all .15s ease; }
  .icon-btn:hover{ background: var(--bg); color: var(--ink); }
  .icon-btn.del:hover{ color: var(--danger); }
  .icon-btn svg{ width:14px; height:14px; }

  .confirm{ display:none; gap:6px; flex-shrink:0; }
  .confirm.show{ display:flex; }
  .confirm button{ border:none; border-radius:8px; font-size:11.5px; font-weight:700; padding:5px 9px; cursor:pointer; font-family:inherit; }
  .confirm .yes{ background: var(--danger); color:#fff; }
  .confirm .no{ background: var(--bg); color: var(--ink); }

  .empty{ text-align:center; color: var(--ink-faint); font-size:13px; font-style:italic; padding: 24px 8px; border: 1px dashed var(--line); border-radius:12px; }

  .col-foot{ margin-top:10px; }
  .clear-link{ background:none; border:none; color: var(--ink-soft); font-size:12px; cursor:pointer; font-family:inherit; padding:4px 2px; text-decoration: underline; text-underline-offset:2px; }
  .clear-link:hover{ color: var(--ink); }

  footer{ text-align:center; color: var(--ink-faint); font-size:12.5px; padding: 36px 20px 10px; }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-thumb{ background: rgba(19,20,28,0.18); border-radius:8px; }

  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; transition-duration:.001s !important; } }

.topbar{position:sticky;top:0;z-index:50;min-height:48px;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 40px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}.topbar-brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}.topbar-brand-dot{width:7px;height:7px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 4px var(--indigo-soft);}.topbar-sep{width:1px;height:16px;background:var(--line);}.topbar-title{color:var(--ink-soft);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.topbar-spacer{flex:1;}.back-link,.topbar-link,.theme-toggle{height:32px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;font-family:inherit;font-size:12px;text-decoration:none;cursor:pointer;}.theme-toggle{width:32px;padding:0;}.accent-picker{width:32px;height:32px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer;}.accent-picker::-webkit-color-swatch-wrapper{padding:0;}.accent-picker::-webkit-color-swatch{border:0;border-radius:5px;}.back-link:hover,.topbar-link:hover,.theme-toggle:hover{color:var(--indigo);border-color:var(--indigo);background:var(--indigo-soft);text-decoration:none;}[data-theme="dark"] body{background:#0d0d0d;color:#f0f0ee;}[data-theme="dark"]{--bg:#0d0d0d;--paper:#1e1e1e;--ink:#f0f0ee;--ink-soft:#888884;--ink-faint:#555550;--line:#2a2a2a;--line-soft:rgba(42,42,42,0.72);}@media(max-width:640px){.topbar{padding:8px 16px;flex-wrap:wrap}.topbar-title{order:5;flex-basis:100%;}.topbar-link,.topbar-sep{display:none;}main{padding:28px 16px 44px;}}

.hostinger-marquee{overflow:hidden;background:#090909;border-bottom:1px solid rgba(103,59,230,.55);white-space:nowrap}.hostinger-marquee-track{display:flex;width:max-content;animation:hostinger-scroll 24s linear infinite}.hostinger-marquee-content{display:inline-flex;align-items:center;gap:10px;padding:9px 36px 9px 0;color:#fff;font-size:12px;font-weight:600}.hostinger-marquee-content strong{color:#9f87f5}.hostinger-marquee-content a{color:#fff;text-decoration:none;border-bottom:1px solid #673be6}.hostinger-marquee-content a:hover{color:#b8a5ff}@keyframes hostinger-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.hostinger-marquee-track{animation:none}}