:root{
      --bg:#f0f2f7;
      --panel:rgba(255,255,255,.58);
      --stroke:rgba(0,0,0,.08);
      --text:rgba(15,23,42,.92);
      --muted:rgba(15,23,42,.58);
      --muted2:rgba(15,23,42,.42);
      --shadow:0 10px 30px rgba(0,0,0,.08);
      --radius:18px;

      --brand:#7c5cff;
      --brand2:#14b8a6;

      --good:#10b981;
      --warn:#f59e0b;
      --bad:#ef4444;

      --chip-bg:rgba(255,255,255,.48);

      --energy-hi:#ef4444;
      --energy-med:#f59e0b;
      --energy-low:#14b8a6;

      --hc-bg:#0b1020;
      --hc-panel:rgba(255,255,255,.06);
      --hc-stroke:rgba(255,255,255,.16);
      --hc-text:rgba(255,255,255,.92);
      --hc-muted:rgba(255,255,255,.62);
      --hc-muted2:rgba(255,255,255,.45);
      --hc-chip:rgba(255,255,255,.08);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 800px at 10% 10%, rgba(124,92,255,.10), transparent 55%),
        radial-gradient(900px 600px at 80% 25%, rgba(45,212,191,.07), transparent 55%),
        radial-gradient(1000px 700px at 40% 100%, rgba(255,204,102,.06), transparent 60%),
        var(--bg);
      overflow-x:hidden;
    }

    /* Accessibility toggles (applied by body classes) */
    body.large-text{ font-size: 18px; }
    body.reduce-motion *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
    body.high-contrast{
      background: radial-gradient(900px 700px at 25% 20%, rgba(124,92,255,.22), transparent 55%),
                  radial-gradient(900px 700px at 80% 55%, rgba(20,184,166,.18), transparent 55%),
                  var(--hc-bg);
      color: var(--hc-text);
    }
    body.high-contrast .panel,
    body.high-contrast .topbar,
    body.high-contrast .col,
    body.high-contrast .task,
    body.high-contrast .modal-card,
    body.high-contrast .overlay,
    body.high-contrast .toast{
      background: var(--hc-panel) !important;
      border-color: var(--hc-stroke) !important;
      color: var(--hc-text) !important;
    }
    body.high-contrast .muted{ color: var(--hc-muted) !important; }
    body.high-contrast .muted2{ color: var(--hc-muted2) !important; }
    body.high-contrast .chip{ background: var(--hc-chip) !important; border-color: var(--hc-stroke) !important; color: var(--hc-muted) !important; }
    body.high-contrast input, body.high-contrast textarea, body.high-contrast select{
      color: var(--hc-text) !important;
      background: rgba(255,255,255,.05) !important;
      border-color: var(--hc-stroke) !important;
    }

    /* Top bar */
    .topbar{
      position:sticky; top:0; z-index:20;
      backdrop-filter: blur(12px);
      background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.56));
      border-bottom: 1px solid var(--stroke);
    }
    .topbar-inner{
      max-width: 1240px;
      margin: 0 auto;
      padding: 14px 16px;
      display:flex;
      align-items:center;
      gap:12px;
      justify-content:space-between;
    }
    .brand{ display:flex; align-items:center; gap:10px; min-width:210px; }
    .logo{
      width:38px;height:38px;border-radius:14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 35%),
        linear-gradient(135deg, rgba(124,92,255,1), rgba(45,212,191,1));
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.40);
    }
    .brand h1{ margin:0; font-size:14px; letter-spacing:.3px; line-height:1.1; }
    .brand p{ margin:0; font-size:12px; color:var(--muted); }

    .center-tools{
      flex:1; display:flex; align-items:center; justify-content:center; gap:10px; min-width:320px;
    }
    .search{
      width:min(560px, 100%);
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      background: rgba(255,255,255,.70);
      border:1px solid var(--stroke);
      border-radius:14px;
    }
    .search input{
      width:100%;
      border:none; outline:none;
      background: transparent;
      color:inherit;
      font-size:13px;
    }
    .hint{
      font-size:12px;
      color:var(--muted2);
      border:1px solid var(--stroke);
      padding:3px 8px;
      border-radius:10px;
      white-space:nowrap;
    }

    .right-tools{ display:flex; align-items:center; gap:10px; min-width:320px; justify-content:flex-end; }
    .pill{
      display:flex; align-items:center; gap:8px;
      padding:10px 12px;
      background: rgba(255,255,255,.70);
      border:1px solid var(--stroke);
      border-radius: 999px;
      color: var(--muted);
      font-size: 12px;
      user-select:none;
    }
    .dot{ width:8px;height:8px;border-radius:50%; background: var(--good); box-shadow:0 0 0 4px rgba(16,185,129,.18); }
    .btn{
      appearance:none; border:none; cursor:pointer;
      color:inherit;
      background: rgba(255,255,255,.55);
      border:1px solid var(--stroke);
      border-radius:14px;
      padding:10px 12px;
      font-size:13px;
      display:inline-flex; align-items:center; gap:8px;
      transition: transform .08s ease, background .15s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{ background: rgba(0,0,0,.05); }
    .btn:active{ transform: translateY(1px); }
    .btn.primary{
      background: linear-gradient(135deg, rgba(124,92,255,.98), rgba(45,212,191,.82));
      border:1px solid rgba(124,92,255,.25);
      box-shadow: 0 10px 25px rgba(124,92,255,.18);
    }
    .btn.primary:hover{ background: linear-gradient(135deg, rgba(124,92,255,1), rgba(45,212,191,.92)); }

    .wrap{ max-width:1240px; margin:0 auto; padding:18px 16px 96px; }
    .header-row{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:14px;
      margin-top:10px;
    }

    .panel{
      background: var(--panel);
      border:1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .hero{
      padding:16px;
      display:flex; gap:14px;
      align-items:flex-start; justify-content:space-between;
    }
    .hero-left{ display:flex; flex-direction:column; gap:10px; min-width:0; }
    .hero-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .hero-title h2{ margin:0; font-size:18px; letter-spacing:.2px; }
    .badge{
      font-size:12px;
      padding:4px 10px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.60);
      color: var(--muted);
      display:inline-flex; align-items:center; gap:8px;
      user-select:none;
    }
    .badge strong{ color:inherit; font-weight:700; }

    .progress{
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    }
    .bar{
      flex:1; min-width:200px; height:10px;
      border-radius:999px;
      background: rgba(255,255,255,.55);
      border:1px solid var(--stroke);
      overflow:hidden;
    }
    .bar i{
      display:block; height:100%; width:0%;
      background: linear-gradient(90deg, rgba(124,92,255,1), rgba(45,212,191,1));
      border-radius:999px;
      transition: width .25s ease;
    }
    .footer-help{
      margin-top:10px;
      display:flex; gap:10px; flex-wrap:wrap;
      align-items:center; justify-content:space-between;
      color: var(--muted2);
      font-size:12px;
    }
    .kbd{
      border:1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.45);
      padding:3px 8px;
      border-radius:10px;
      color: rgba(15,23,42,.70);
      font-size:12px;
    }

    .hero-actions{
      display:flex; flex-direction:column; gap:10px;
      align-items:flex-end; min-width:260px;
    }
    .quick-add{
      width:100%;
      background: rgba(255,255,255,.70);
      border:1px solid var(--stroke);
      border-radius:14px;
      padding:10px;
      display:flex; align-items:center; gap:8px;
    }
    .quick-add input{
      flex:1; background:transparent;
      border:none; outline:none;
      color:inherit;
      font-size:13px;
    }
    .seg{ display:flex; gap:6px; width:100%; justify-content:flex-end; }
    select{
      width:100%;
      background: rgba(255,255,255,.70);
      border:1px solid var(--stroke);
      color:inherit;
      border-radius:12px;
      padding:9px 10px;
      font-size:13px;
      outline:none;
    }

    .stats{
      padding:14px;
      display:flex; flex-direction:column; gap:12px;
    }
    .stat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
    .card-mini{
      background: rgba(255,255,255,.60);
      border:1px solid var(--stroke);
      border-radius:16px;
      padding:12px;
      display:flex; flex-direction:column; gap:6px;
      min-height:92px;
    }
    .k{ color: var(--muted); font-size:12px; }
    .v{ font-size:18px; font-weight:800; letter-spacing:.2px; }
    .s{ color: var(--muted2); font-size:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .spark{
      width:100%; height:6px; border-radius:999px;
      background: rgba(255,255,255,.70);
      border:1px solid var(--stroke);
      overflow:hidden;
    }
    .spark i{
      display:block; height:100%; width:40%;
      background: linear-gradient(90deg, rgba(45,212,191,1), rgba(124,92,255,1));
      border-radius:999px;
      transition: width .25s ease;
    }

    /* Filters row */
    .filters{
      margin-top:14px;
      padding:12px;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .filters-left, .filters-right{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .chip-toggle{
      display:inline-flex; gap:8px; align-items:center;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.55);
      font-size:12px;
      color: var(--muted);
      cursor:pointer;
      user-select:none;
    }
    .chip-toggle.active{
      background: rgba(124,92,255,.12);
      border-color: rgba(124,92,255,.28);
      color: rgba(15,23,42,.86);
    }
    .small-input{
      display:flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.65);
    }
    .small-input input{
      border:none; outline:none; background:transparent; color:inherit; font-size:13px; min-width:140px;
    }

    /* Board */
    .board{
      margin-top:12px;
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:12px;
      align-items:start;
    }
    .col{
      background: rgba(255,255,255,.50);
      border:1px solid var(--stroke);
      border-radius: var(--radius);
      padding:12px;
      min-height:380px;
      box-shadow: 0 10px 25px rgba(0,0,0,.05);
    }
    .col-header{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:10px; margin-bottom:10px;
    }
    .col-title{ display:flex; flex-direction:column; gap:4px; min-width:0; }
    .col-title h3{
      margin:0;
      font-size:13px;
      letter-spacing:.3px;
      text-transform: uppercase;
      color: rgba(15,23,42,.72);
    }
    .col-title p{
      margin:0;
      font-size:12px;
      color: var(--muted2);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .count{
      font-size:12px; color: var(--muted);
      border:1px solid var(--stroke);
      padding:6px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.50);
      user-select:none;
      white-space:nowrap;
    }
    .dropzone{
      display:flex; flex-direction:column; gap:10px;
      min-height:280px;
      padding-bottom:10px;
    }
    .dropzone.dragover{
      outline: 2px dashed rgba(124,92,255,.45);
      outline-offset: 6px;
      background: rgba(124,92,255,.06);
    }

    /* Task */
    .task{
      background: rgba(255,255,255,.72);
      border:1px solid rgba(0,0,0,.07);
      border-radius:16px;
      padding:12px;
      display:flex; flex-direction:column; gap:10px;
      cursor:grab;
      user-select:none;
      transition: transform .12s ease, background .2s ease, border-color .2s ease;
      position:relative;
    }
    .task:hover{ background: rgba(255,255,255,.82); border-color: rgba(0,0,0,.10); transform: translateY(-1px); }
    .task:active{ cursor:grabbing; transform: translateY(0); }
    .title{ font-weight:700; font-size:13px; line-height:1.25; letter-spacing:.2px; }
    .meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
    .chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
    .chip{
      font-size:11px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.07);
      background: var(--chip-bg);
      color: var(--muted);
    }
    .chip.energy{ color: rgba(15,23,42,.84); }
    .chip.energy.hi{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.10); }
    .chip.energy.med{ border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.10); }
    .chip.energy.low{ border-color: rgba(20,184,166,.25); background: rgba(20,184,166,.10); }
    .chip.ctx{ background: rgba(20,184,166,.08); border-color: rgba(20,184,166,.20); }
    .chip.snoozed{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); }

    .task-actions{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
    .tinybtn{
      appearance:none; border:none; cursor:pointer;
      padding:8px 10px;
      border-radius:12px;
      background: rgba(255,255,255,.70);
      border:1px solid rgba(0,0,0,.07);
      color: rgba(15,23,42,.84);
      font-size:12px;
      display:inline-flex; align-items:center; gap:6px;
      transition: transform .08s ease, background .15s ease;
      white-space:nowrap;
    }
    .tinybtn:hover{ background: rgba(0,0,0,.05); }
    .tinybtn:active{ transform: translateY(1px); }
    .tinybtn.danger{ border-color: rgba(255,107,107,.25); background: rgba(239,68,68,.10); }
    .tinybtn.ok{ border-color: rgba(45,212,191,.25); background: rgba(20,184,166,.10); }
    .tinybtn.focus{ border-color: rgba(124,92,255,.22); background: rgba(124,92,255,.08); }

    /* Toast */
    .toast{
      position:fixed;
      left:50%; bottom:18px;
      transform: translateX(-50%);
      z-index: 80;
      padding: 12px 14px;
      border-radius: 999px;
      border:1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
      color: rgba(15,23,42,.92);
      font-size: 13px;
      display:none;
      align-items:center;
      gap:10px;
      max-width: min(820px, calc(100% - 22px));
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .toast.show{ display:flex; animation: pop .15s ease; }
    @keyframes pop{
      from{ transform: translateX(-50%) translateY(6px); opacity:.6; }
      to{ transform: translateX(-50%) translateY(0); opacity:1; }
    }

    /* Overlays */
    .overlay{
      position:fixed; inset:0; z-index:60;
      display:none;
      background: rgba(0,0,0,.25);
      backdrop-filter: blur(10px);
      padding: 16px;
    }
    .overlay.show{ display:block; }
    .modal-card{
      max-width: 900px;
      margin: 28px auto;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,.12);
      padding: 18px;
    }
    .modal-top{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:10px; margin-bottom:12px;
    }
    .modal-top h2{ margin:0; font-size:16px; letter-spacing:.2px; }
    .modal-top p{ margin:6px 0 0 0; color:var(--muted); font-size:13px; }
    .modal-body{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:12px;
    }
    .modal-panel{
      background: rgba(255,255,255,.60);
      border: 1px solid rgba(0,0,0,.07);
      border-radius: 18px;
      padding: 14px;
    }
    .modal-panel h3{
      margin:0 0 8px 0;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing:.3px;
      color: rgba(15,23,42,.72);
    }

    /* Focus */
    .steps{ display:flex; flex-direction:column; gap:8px; }
    .step{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 10px;
      border-radius: 14px;
      border:1px solid rgba(0,0,0,.07);
      background: rgba(255,255,255,.50);
    }
    .step input{ margin-top:2px; }
    .step span{ font-size:13px; color: rgba(15,23,42,.88); line-height:1.25; }
    .timer{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
    .bigtime{ font-size:38px; font-weight:900; letter-spacing:.5px; margin:2px 0 0 0; }
    .timer-row{ width:100%; display:flex; gap:10px; flex-wrap:wrap; }
    .timer-row .btn{ flex:1; justify-content:center; }
    textarea.note{
      width:100%;
      resize:none;
      min-height: 98px;
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,.07);
      background: rgba(255,255,255,.50);
      color: inherit;
      padding: 12px;
      outline:none;
      font-size:13px;
      line-height: 1.3;
    }

    /* Settings list */
    .setting{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:10px 10px;
      border-radius: 14px;
      border:1px solid rgba(0,0,0,.07);
      background: rgba(255,255,255,.45);
      margin-bottom:10px;
    }
    .setting .left{ display:flex; flex-direction:column; gap:3px; min-width:0; }
    .setting .left .label{ font-size:13px; font-weight:700; }
    .setting .left .desc{ font-size:12px; color: var(--muted); }
    .switch{
      display:flex; align-items:center; gap:10px;
    }
    .switch input{ width:44px; height:24px; }

    /* Brain dump */
    .brain-dump{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
      margin-top:10px;
    }
    .brain-dump input{
      flex:1;
      min-width: 220px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(0,0,0,.07);
      background: rgba(255,255,255,.50);
      outline:none;
      color: inherit;
      font-size:13px;
    }

    /* Responsive */
    @media (max-width: 980px){
      .header-row{ grid-template-columns: 1fr; }
      .hero{ flex-direction:column; }
      .hero-actions{ align-items:stretch; min-width:0; width:100%; }
      .board{ grid-template-columns: 1fr 1fr; }
      .modal-body{ grid-template-columns: 1fr; }
    }
    @media (max-width: 560px){
      .center-tools{ display:none; }
      .right-tools{ min-width:0; }
      .brand{ min-width:0; }
      .board{ grid-template-columns: 1fr; }
      .seg{ justify-content:stretch; }
    }