:root{--bg-page:#e6e8ed;--bg-card:#fff;--bg-input:#f2f2f7;--text-main:#1c1c1e;--text-muted:#8e8e93;--text-dim:#aeaeaf;--border-subtle:#e5e5ea;--border-dashed:#c7c7cc;--shadow-card:0 20px 60px #00000014, 0 4px 16px #00000008;--font-main:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"Space Mono", monospace;--font-pixel:"Silkscreen", "Space Mono", monospace;--accent-primary:var(--text-main);--btn-primary-bg:#1c1c1e;--btn-primary-fg:#fff}[data-theme=dark]{--bg-page:#0f0f12;--bg-card:#1a1a1e;--bg-input:#27272c;--text-main:#f5f5f7;--text-muted:#9e9ea3;--text-dim:#6e6e73;--border-subtle:#2e2e34;--border-dashed:#44444c;--shadow-card:0 20px 60px #0006, 0 4px 16px #0003;--accent-primary:var(--text-main);--btn-primary-bg:#f5f5f7;--btn-primary-fg:#0f0f12}body.multicolor-on{--btn-primary-bg:#3b82f6;--btn-primary-fg:#fff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-page);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;padding:30px 20px;transition:background-color .25s,color .25s}.page-container{max-width:1320px;margin:0 auto}.global-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.brand-title{font-family:var(--font-pixel);color:var(--text-main);align-items:center;gap:10px;font-size:1.8rem;font-weight:400;display:flex}.category-chips-bar{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px;display:flex}.chip{background:var(--bg-card);color:var(--text-main);border:1.5px solid var(--chip-color,var(--border-subtle));cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:20px;align-items:center;gap:8px;padding:6px 14px;font-size:.84rem;font-weight:500;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.chip-dot{background:var(--chip-color,var(--text-main));border-radius:50%;width:8px;height:8px;display:inline-block}.chip:hover{box-shadow:0 4px 12px var(--chip-glow,#0000001a);transform:translateY(-1px)}.chip.active{background:var(--chip-color,var(--text-main));border-color:var(--chip-color,var(--text-main));box-shadow:0 4px 16px var(--chip-glow,#00000040);font-weight:600;color:#fff!important}.chip.active .chip-dot{background:#fff}.btn-primary-icon{background:var(--btn-primary-bg);color:var(--btn-primary-fg);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:inline-flex;box-shadow:0 4px 14px #0000001f}.btn-primary-icon:hover{transform:scale(1.06)}.icon-btn-toggle{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border-subtle);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:inline-flex}.icon-btn-toggle:hover{border-color:var(--border-dashed);transform:translateY(-1px)}.animate-expand{animation:.2s cubic-bezier(.16,1,.3,1) expandWidth}@keyframes expandWidth{0%{opacity:0;transform:scaleX(.7)}to{opacity:1;transform:scaleX(1)}}.modal-overlay{-webkit-backdrop-filter:blur(14px);z-index:1000;background:#000000a6;justify-content:center;align-items:center;padding:20px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-box{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:32px;width:100%;max-width:460px;position:relative;overflow:hidden;box-shadow:0 30px 80px #0000004d}.modal-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:24px 24px 16px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.animate-slide-up{animation:.25s cubic-bezier(.16,1,.3,1) slideUp}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));align-items:start;gap:32px;display:grid}.ref-card{background:var(--bg-card);height:620px;box-shadow:var(--shadow-card);border:1.5px solid var(--card-color,var(--border-subtle));border-radius:36px;flex-direction:column;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.ref-card:hover{box-shadow:0 24px 70px var(--card-glow,#0000001f);transform:translateY(-2px)}.card-top-accent{background:var(--card-color,var(--text-main));height:5px;position:absolute;top:0;left:0;right:0}.card-header{background:var(--bg-card);border-bottom:1px solid var(--border-subtle);z-index:10;justify-content:space-between;align-items:flex-start;padding:32px 28px 16px;display:flex}.card-title-text{font-family:var(--font-pixel);color:var(--text-main);letter-spacing:-.02em;cursor:pointer;font-size:1.8rem;font-weight:400;transition:opacity .2s}.card-title-text:hover{opacity:.75}.card-category-badge{color:var(--card-color,var(--text-main));background:var(--bg-input);border:1px solid var(--card-color,var(--border-subtle));text-transform:uppercase;letter-spacing:.03em;border-radius:12px;margin-top:4px;padding:2px 10px;font-size:.7rem;font-weight:700;display:inline-block}.card-title-input{font-family:var(--font-pixel);color:var(--text-main);border:none;border-bottom:2px solid var(--card-color,var(--text-main));background:0 0;outline:none;width:180px;font-size:1.6rem;font-weight:400}.icon-button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.icon-button:hover{color:var(--text-main);background:#8080801a}.card-body{flex:1;padding:16px 20px 90px;position:relative;overflow-y:auto}.task-item-row{z-index:2;border-bottom:1px dashed var(--border-subtle);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;gap:14px;padding:12px 0;transition:opacity .2s;display:flex;position:relative}.task-item-row:last-child{border-bottom:none}.task-item-row.completed{opacity:.6}.task-circle{border:2px solid var(--task-color,var(--border-dashed));background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:1px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.task-item-row:hover .task-circle{box-shadow:0 0 10px var(--task-glow,#00000026)}.task-circle.checked{background:var(--task-color,var(--text-main));border-color:var(--task-color,var(--text-main));box-shadow:0 0 14px var(--task-glow,#00000040)}.task-title{color:var(--text-main);flex:1;font-size:.94rem;font-weight:500;line-height:1.4}.task-title.completed{color:var(--text-muted);text-decoration:line-through}.card-footer-bar{z-index:50;position:absolute;bottom:18px;left:18px;right:18px}.floating-pill{background:var(--bg-input);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:28px;align-items:center;gap:10px;padding:8px 16px;transition:border-color .2s;display:flex}.floating-pill:focus-within{border-color:var(--card-color,var(--text-main))}.pill-input{font-family:var(--font-main);color:var(--text-main);background:0 0;border:none;outline:none;flex:1;font-size:.9rem}.pill-input::placeholder{color:var(--text-muted)}.card-body::-webkit-scrollbar{width:4px}.card-body::-webkit-scrollbar-thumb{background:#80808033;border-radius:4px}