*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* Core */
      --bg: #0d0000;
      --surface: #1a0808;
      --border: #cc2222;
      --accent: #e00000;
      --accent-glow: 0 0 10px #e00000, 0 0 28px rgba(224,0,0,0.4);
      --accent-dim: #cc2222;
      --accent-bright: #ff4444;
      --text: #ffffff;
      --text-muted: #e8e8e8;
      --text-dim: #aaaaaa;
      --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;

      /* Cards */
      --card-bg: #1e0a0a;
      --card-border: #7a1f1f;
      --card-hover-bg: #362020;

      /* Inputs */
      --input-bg: #130707;
      --input-border: #2a1010;

      /* Scrollbar */
      --scrollbar-thumb: #2a0000;

      /* Segment */
      --segment-glow: 0 0 12px rgba(204,34,34,0.25), 0 0 30px rgba(204,34,34,0.1);
      --segment-count-bg: #3a0000;
      --segment-count-border: #cc0000;
      --segment-count-color: #ff8888;

      /* Vault */
      --vault-filter-border: #3a2020;
      --vault-filter-active-bg: #3a0000;
      --vault-icon-bg: #2a0000;
      --vault-icon-border: #4a0000;
      --vault-icon-color: #ff6666;

      /* Backward compat aliases */
      --crimson: var(--accent);
      --crimson-glow: var(--accent-glow);
    }
    html, body {
      height: 100%; background: var(--bg); color: var(--text);
      font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* MATRIX */
    #matrix-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.75; transition: opacity 0.4s; pointer-events: none; }
    #matrix-canvas.login-mode { opacity: 1; }

    /* LOADING SCREEN */
    #loading-screen {
      position: fixed; inset: 0; background: #000; z-index: 200;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      transition: opacity 0.5s; overflow: hidden;
    }
    #loading-screen.fade-out { opacity: 0; pointer-events: none; }
    #loading-screen.hidden { display: none; }
    #loading-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
    .loading-content {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center;
      gap: 16px; width: 100%; max-width: 360px; padding: 0 24px;
    }
    .loading-logo { width: 80px; filter: drop-shadow(0 0 18px rgba(204,0,0,0.6)); }
    .loading-spinner { width: 32px; height: 32px; border: 2px solid #1a0000; border-top-color: #cc0000; border-radius: 50%; animation: spin 0.8s linear infinite; box-shadow: 0 0 10px rgba(204,0,0,0.3); }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-status { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: #e0e0e0; font-family: var(--font); text-align: center; }
    .loading-status span { color: #cc0000; }
    .loading-debug {
      font-family: 'SF Mono', 'Fira Code', monospace; font-size: 14px;
      color: #e8e8e8; line-height: 1.7; width: 100%;
      border-left: 3px solid #cc2222; padding-left: 10px;
      display: flex; flex-direction: column;
      max-height: 160px; overflow-y: auto;
    }
    .loading-debug::-webkit-scrollbar { display: none; }

    /* LOGIN OVERLAY */
    #login-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); }
    #login-overlay.hidden { display: none; }
    .login-logo { width: 160px; filter: drop-shadow(0 0 18px rgba(204,0,0,0.7)); display: block; margin: 0 auto; }
    @keyframes glitch-anim {
      0%   { transform: translate(0,0) skewX(0deg); filter: drop-shadow(0 0 18px rgba(204,0,0,0.7)); clip-path: none; }
      10%  { transform: translate(-4px,2px) skewX(-4deg); filter: drop-shadow(4px 0 0 #cc0000) drop-shadow(-4px 0 0 #fff) brightness(2); clip-path: inset(20% 0 30% 0); }
      25%  { transform: translate(4px,-2px) skewX(3deg); filter: drop-shadow(-4px 0 0 #cc0000) brightness(1.8); clip-path: inset(55% 0 5% 0); }
      40%  { transform: translate(-3px,1px) skewX(-2deg); filter: drop-shadow(3px 0 0 #ff0000) brightness(1.5); clip-path: inset(35% 0 45% 0); }
      55%  { transform: translate(3px,-3px) skewX(2deg); filter: drop-shadow(-2px 0 0 #fff) brightness(1.6); clip-path: inset(10% 0 70% 0); }
      70%  { transform: translate(-1px,1px); filter: drop-shadow(0 0 22px rgba(204,0,0,0.9)); clip-path: none; }
      85%  { transform: translate(1px,-1px) skewX(0.5deg); filter: drop-shadow(0 0 18px rgba(204,0,0,0.7)); }
      100% { transform: translate(0,0) skewX(0deg); filter: drop-shadow(0 0 18px rgba(204,0,0,0.7)); clip-path: none; }
    }
    .login-logo.glitching { animation: glitch-anim 0.35s steps(1) forwards; }
    .login-box { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 300px; }
    .login-title { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
    .login-field-wrap { width: 100%; display: flex; flex-direction: column; gap: 8px; }
    .login-field-label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #e8e8e8; padding-left: 2px; }
    .login-box input { width: 100%; background: rgba(30,30,30,0.95); border: 1px solid #3a1a1a; border-radius: 8px; padding: 12px 14px; color: var(--text); font-size: 15px; font-family: var(--font); outline: none; text-align: left; letter-spacing: 0.04em; backdrop-filter: blur(6px); transition: border-color 0.2s, box-shadow 0.2s; caret-color: var(--crimson); }
    .login-box input::placeholder { color: #aaa; letter-spacing: 0.04em; }
    .login-box input:focus { border-color: var(--crimson); box-shadow: var(--crimson-glow); }
    .login-btn { width: 100%; background: var(--crimson); border: none; border-radius: 8px; padding: 13px; color: #fff; font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: box-shadow 0.2s; margin-top: 2px; }
    .login-btn:hover { box-shadow: var(--crimson-glow); }
    .login-btn:disabled { opacity: 0.4; cursor: default; }
    .login-error { font-size: 14px; color: var(--crimson); min-height: 16px; letter-spacing: 0.04em; }

    /* HOME SHELL */
    #home { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 100px; }
    #home.hidden { display: none; }

    /* HEADER */
    .home-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); backdrop-filter: blur(4px); flex-shrink: 0; position: sticky; top: 0; z-index: 5; background: rgba(0,0,0,0.85); }
    .header-left { display: flex; align-items: center; gap: 10px; }
    .home-header-logo { height: 22px; filter: drop-shadow(0 0 6px rgba(204,0,0,0.45)); }
    .home-header-title { font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 900; letter-spacing: 0.14em; color: var(--crimson); text-shadow: 0 0 8px rgba(204,0,0,0.5); }
    .header-logout-btn { background: none; border: 1px solid var(--accent-dim); border-radius: 6px; color: var(--text-muted); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; cursor: pointer; font-family: var(--font); transition: border-color 0.2s, color 0.2s, box-shadow 0.2s; }
    .header-logout-btn:hover { border-color: var(--crimson); color: var(--crimson); box-shadow: var(--crimson-glow); }

    /* PAGE BODY */
    .home-body { flex: 1; padding: 16px 16px 0; display: flex; flex-direction: column; gap: 22px; }

    /* SEGMENTS */
    .segment { background: var(--surface); border: 2px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 120px; max-height: 85vh; box-shadow: var(--segment-glow); }
    #checklists-segment { max-height: none; }
    .segment-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow: visible; gap: 8px; }
    .segment-title { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); font-weight: 700; display: flex; align-items: center; gap: 8px; }
    .segment-title svg { width: 13px; height: 13px; stroke: var(--accent-dim); fill: none; stroke-width: 2; }
    .segment-count { font-size: 12px; background: var(--segment-count-bg); border: 2px solid var(--segment-count-border); border-radius: 10px; padding: 2px 9px; color: var(--segment-count-color); letter-spacing: 0.06em; font-weight: 700; box-shadow: 0 0 8px rgba(204,0,0,0.3); }
    .segment-refresh { background: none; border: none; cursor: pointer; color: var(--accent-dim); padding: 3px; display: flex; align-items: center; transition: color 0.15s; }
    .segment-refresh:hover { color: var(--accent-bright); }
    .segment-refresh svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
    .segment-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
    .segment-body::-webkit-scrollbar { width: 3px; }
    .segment-body::-webkit-scrollbar-track { background: transparent; }
    .segment-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
    .segment-body::-webkit-scrollbar-thumb:hover { background: var(--crimson); box-shadow: 0 0 4px rgba(204,0,0,0.4); }

    #vault-filters::-webkit-scrollbar { height: 3px; }
    #vault-filters::-webkit-scrollbar-track { background: transparent; }
    #vault-filters::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
    #vault-filters::-webkit-scrollbar-thumb:hover { background: var(--crimson); box-shadow: 0 0 4px rgba(204,0,0,0.4); }
    #vault-filters { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

    .cl-items-scroll::-webkit-scrollbar { width: 4px; }
    .cl-items-scroll::-webkit-scrollbar-track { background: #1a0000; border-radius: 2px; }
    .cl-items-scroll::-webkit-scrollbar-thumb { background: #cc2200; border-radius: 2px; }
    .cl-items-scroll::-webkit-scrollbar-thumb:hover { background: #ff4422; }

    /* LOADING / EMPTY STATES */
    .seg-spinner { width: 20px; height: 20px; border: 2px solid #333; border-top-color: var(--crimson); border-radius: 50%; animation: spin 0.8s linear infinite; }
    .seg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; }
    .seg-empty svg { width: 28px; height: 28px; stroke: var(--text-dim); fill: none; stroke-width: 1.2; }
    .seg-empty span { font-size: 13px; color: var(--text-muted); letter-spacing: 0.14em; text-transform: uppercase; }
    .seg-section { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); padding: 10px 6px 4px; font-weight: 700; }





    /* TASK CARDS */
    .task-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 11px 13px; cursor: pointer; transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.1s, opacity 0.2s; display: flex; flex-direction: column; gap: 5px; touch-action: pan-y; overflow: visible; min-height: 56px; position: relative; flex-shrink: 0; }
    .task-card:hover { background: var(--card-hover-bg); border-color: var(--crimson); box-shadow: 0 2px 12px rgba(224,0,0,0.12); }
    .task-card-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
    .task-card-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    @media (max-width: 768px) { .task-card-actions { display: none !important; } .task-card-title { padding-right: 0 !important; } }
    .badge { display: inline-block; border-radius: 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; font-weight: 700; border-width: 1.5px; border-style: solid; }
    .badge-todo       { background: #303030; color: #d0d0d0; border-color: #505050; }
    .badge-inprogress { background: #2e1c00; color: #ffbb44; border-color: #5a3800; }
    .badge-blocked    { background: #320a0a; color: #ff6666; border-color: #661515; }
    .badge-done       { background: #0a2412; color: #55dd77; border-color: #155528; }
    .badge-waiting    { background: #16163a; color: #8888ee; border-color: #28287a; }
    .badge-critical   { background: #3a0808; color: #ff5555; border-color: #880000; }
    .badge-high       { background: #2e1400; color: #ffbb44; border-color: #5a2800; }
    .badge-medium     { background: #282200; color: #ddbb22; border-color: #554400; }
    .badge-low        { background: #252525; color: #aaaaaa; border-color: #404040; }
    .task-project     { font-size: 13px; color: var(--text-muted); letter-spacing: 0.06em; }
    .task-due         { font-size: 13px; color: var(--text-muted); }
    .task-due.overdue { color: #ff6666; font-weight: 600; }

    /* VAULT */
    .vault-action-btn { background:none; border:1px solid var(--scrollbar-thumb); border-radius:5px; padding:4px 6px; color:var(--accent-dim); cursor:pointer; display:flex; align-items:center; transition:color 0.15s,border-color 0.15s; }
    .vault-action-btn:hover { color:var(--accent-bright); border-color:var(--accent-dim); }
    .vault-nuke-btn:hover { color:var(--accent-bright); border-color:#440000; }
    .vault-filter { background:none; border:1px solid var(--vault-filter-border); border-radius:20px; padding:4px 12px; color:#bbb; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
    .vault-filter:hover { border-color:var(--segment-count-border); color:#fff; }
    .vault-filter.active { background:var(--vault-filter-active-bg); border-color:var(--segment-count-border); color:var(--vault-icon-color); }
    .vault-file-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; cursor:pointer; transition:background 0.1s; }
    .vault-file-row:hover { background:var(--card-bg); }
    .vault-file-icon { width:28px; height:28px; background:var(--vault-icon-bg); border-radius:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:9px; font-weight:800; letter-spacing:0.04em; color:var(--vault-icon-color); border: 1px solid var(--vault-icon-border); }
    .vault-file-info { flex:1; min-width:0; display:flex; align-items:center; gap:6px; overflow:hidden; }
    .vault-file-name { font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-muted); flex:1; min-width:0; }
    .vault-file-meta { display:flex; gap:5px; align-items:center; flex-shrink:0; }
    .vault-file-cat { font-size:10px; color:#888; }
    .vault-file-size { font-size:10px; color:#666; }
    .vs-valid    { background:#0a2412; color:#55dd77; border:1.5px solid #155528; }
    .vs-finished { background:#141438; color:#8888ee; border:1.5px solid #28287a; }
    .vs-invalid  { background:#3a0808; color:#ff6666; border:1.5px solid #661515; }
    .vs-pending  { background:#282828; color:#c0c0c0; border:1.5px solid #484848; }
    .vs-archived { background:#0d1e2e; color:#5bb8d4; border:1.5px solid #1a4a6a; }
    .vault-status { display:inline-block; border-radius:3px; font-size:9px; letter-spacing:0.06em; text-transform:uppercase; padding:2px 5px; font-weight:700; border-width:1px; border-style:solid; flex-shrink:0; }
  
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    /* Toast */
    #toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--card-bg); border:1px solid var(--accent-dim); border-radius:8px; padding:10px 20px; color:#fff; font-size:13px; font-weight:600; letter-spacing:0.06em; z-index:9999; opacity:0; transition:opacity 0.25s, transform 0.25s; pointer-events:none; white-space:nowrap; }
    #toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

    

    

/* Touch target minimum 44px */
button, .btn, [role="button"], input[type="submit"] {
  min-height: 44px;
  min-width: 44px;
}

    /* Voice mode waveform bars — driven by JS, not CSS animation during recording */
    .vbar { width: 5px; background: var(--accent-dim); border-radius: 3px; height: 4px; transition: height 0.07s ease, background 0.2s; flex-shrink: 0; }
    .vbar.silent { background: var(--scrollbar-thumb); }
    #voice-wave { gap: 3px; align-items: flex-end; height: 40px; }

    /* Block 2: Keyframes from art segment */
    @keyframes hv-pulse { 0%,100%{opacity:0.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }
    @keyframes hv-ring  { 0%,100%{transform:scale(1);opacity:0.35} 50%{transform:scale(1.06);opacity:1} }
    @keyframes hv-star-twinkle { 0%,100%{opacity:0.15;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.3)} }

    /* Block 3: Keyframe from live-dot-pulse */
    @keyframes live-dot-pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50% { opacity:0.4; transform:scale(0.7); }
    }