:root,:root[data-theme=vividchalk]{--bg: #000000;--bg-glow: radial-gradient(1200px 500px at 85% -10%, rgba(153, 51, 204, .18), transparent 60%), radial-gradient(900px 400px at -10% 110%, rgba(102, 255, 0, .08), transparent 60%);--surface: #0f0f0f;--surface-2: #1b1b1b;--text: #eeeeee;--text-2: #a0a0a0;--line: #262626;--accent: #ff6600;--accent-2: #ffcc00;--accent-3: #66ff00;--on-accent: #000000;--grad: linear-gradient(135deg, #ff6600 0%, #ffcc00 100%);--title-grad: linear-gradient(90deg, #ff6600, #ffcc00 45%, #66ff00);--topbar-bg: rgba(0, 0, 0, .82);--topbar-fg: #eeeeee;--topbar-line: linear-gradient(90deg, #ff6600, #ffcc00, #66ff00, #339999, #9933cc);--danger: #ff3355;--ok: #66ff00;--warn: #ffcc00;--off: #444444;--shadow: 0 0 0 1px #1f1f1f, 0 6px 20px rgba(0, 0, 0, .6);--glow: 0 0 18px rgba(255, 102, 0, .45);--toast-bg: #1b1b1b;--toast-fg: #eeeeee;--toast-action: #66ff00;--selection: #555577;color-scheme:dark}:root[data-theme=light]{--bg: #fff6ef;--bg-glow: radial-gradient(1000px 420px at 100% -10%, rgba(255, 95, 109, .14), transparent 60%), radial-gradient(800px 380px at -10% 110%, rgba(255, 195, 113, .18), transparent 60%);--surface: #ffffff;--surface-2: #fff0e6;--text: #2b2140;--text-2: #7a6f86;--line: #f1e3da;--accent: #f0436a;--accent-2: #ff9a44;--accent-3: #2bb673;--on-accent: #ffffff;--grad: linear-gradient(135deg, #ff5f6d 0%, #ff9a44 100%);--title-grad: linear-gradient(90deg, #ffffff, #fff3d6);--topbar-bg: linear-gradient(120deg, #ff5f6d, #ff8a5b 55%, #ffc371);--topbar-fg: #ffffff;--topbar-line: transparent;--danger: #d6264b;--ok: #2bb673;--warn: #f5a623;--off: #d9cfd6;--shadow: 0 1px 2px rgba(120, 60, 40, .06), 0 6px 18px rgba(240, 67, 106, .08);--glow: 0 6px 18px rgba(240, 67, 106, .35);--toast-bg: #2b2140;--toast-fg: #ffffff;--toast-action: #ffc371;--selection: #ffd5dc;color-scheme:light}:root[data-theme=dark]{--bg: #120f1f;--bg-glow: radial-gradient(1000px 420px at 100% -10%, rgba(167, 139, 250, .2), transparent 60%), radial-gradient(800px 380px at -10% 110%, rgba(244, 114, 182, .12), transparent 60%);--surface: #1c1830;--surface-2: #27213f;--text: #f1edff;--text-2: #a59fbf;--line: #2e2848;--accent: #a78bfa;--accent-2: #f472b6;--accent-3: #5eead4;--on-accent: #ffffff;--grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);--title-grad: linear-gradient(90deg, #c4b5fd, #f9a8d4);--topbar-bg: rgba(18, 15, 31, .85);--topbar-fg: #f1edff;--topbar-line: linear-gradient(90deg, #8b5cf6, #ec4899, #5eead4);--danger: #fb7185;--ok: #5eead4;--warn: #fbbf24;--off: #4a4366;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);--glow: 0 6px 20px rgba(139, 92, 246, .45);--toast-bg: #2e2848;--toast-fg: #f1edff;--toast-action: #f9a8d4;--selection: #4c3d80;color-scheme:dark}*{box-sizing:border-box}::selection{background:var(--selection)}html,body{margin:0;height:100%}body{background:var(--bg-glow),var(--bg);background-attachment:fixed;color:var(--text);font:15px/1.45 ui-rounded,SF Pro Rounded,Nunito,Varela Round,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}#root{min-height:100%}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}button:disabled{cursor:default}input,select,textarea{font:inherit;color:var(--text);background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}a{color:var(--accent)}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}to{transform:scale(1);opacity:1}}.app{max-width:720px;margin:0 auto;padding-bottom:calc(96px + env(safe-area-inset-bottom))}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:4px;padding:calc(8px + env(safe-area-inset-top)) 8px 8px 16px;background:var(--topbar-bg);color:var(--topbar-fg);min-height:60px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.topbar:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--topbar-line)}.topbar h1{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--title-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;transition:background .15s,transform .1s}.icon-btn:hover{background:color-mix(in srgb,currentColor 12%,transparent)}.icon-btn:active{background:color-mix(in srgb,currentColor 22%,transparent);transform:scale(.92)}.icon-btn svg{width:24px;height:24px}.topbar-btn{background:color-mix(in srgb,var(--topbar-fg) 16%,transparent);color:var(--topbar-fg)}.topbar-btn:not(:disabled):hover{background:color-mix(in srgb,var(--topbar-fg) 26%,transparent)}.menu-wrap{position:relative}.menu{position:absolute;right:0;top:46px;min-width:230px;z-index:20;background:var(--surface);color:var(--text);border-radius:16px;border:1px solid var(--line);box-shadow:0 12px 36px #00000059;padding:6px;transform-origin:top right;animation:pop .16s ease-out}.menu button,.menu label{display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;text-align:left;border-radius:10px}.menu button:hover{background:var(--surface-2)}.menu button:active{background:color-mix(in srgb,var(--accent) 18%,var(--surface-2))}.menu button svg{color:var(--accent)}.menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}.menu .label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);padding:6px 12px 2px}.list-header,.habit-row{display:flex;align-items:center}.list-header{padding:6px 0;margin:0 10px;font-size:11px;font-weight:600;color:var(--text-2);text-align:center}.list-header .name-col{flex:1}.day-col{width:44px;flex:none;text-align:center;line-height:1.25}.habit-row{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin:0 10px 8px;min-height:58px;box-shadow:var(--shadow);overflow:hidden;user-select:none;-webkit-user-select:none;animation:rise .3s ease-out both;transition:transform .15s,border-color .15s}.habit-row:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}.habit-row.dragging{opacity:.6;box-shadow:var(--shadow)}.habit-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 4px 8px 12px;text-align:left;height:56px}.habit-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell{width:44px;height:56px;flex:none;display:grid;place-items:center;font-size:13px;touch-action:manipulation}.cell svg{width:22px;height:22px;transition:transform .15s cubic-bezier(.3,1.6,.5,1)}.cell:active svg,.cell:active .num{transform:scale(.75)}.cell:hover svg{transform:scale(1.15)}.cell .num{font-weight:700;font-size:13px;line-height:1.1;text-align:center;transition:transform .15s}.cell .unit{display:block;font-size:9px;font-weight:500;color:var(--text-2)}.cell.has-note:after{content:"";position:absolute}.cell-wrap{position:relative}.note-dot{position:absolute;top:10px;right:8px;width:6px;height:6px;border-radius:50%}.drag-handle{width:32px;height:56px;display:grid;place-items:center;color:var(--text-2);touch-action:none}.empty{text-align:center;padding:72px 24px;color:var(--text-2);animation:rise .4s ease-out}.empty svg{width:84px;height:84px;color:var(--accent);filter:drop-shadow(var(--glow));opacity:.9}.empty p{font-size:16px}.fab{position:fixed;right:max(20px,calc(50vw - 340px));bottom:calc(22px + env(safe-area-inset-bottom));width:60px;height:60px;border-radius:20px;background:var(--grad);color:var(--on-accent);display:grid;place-items:center;box-shadow:var(--glow),0 6px 16px #0000004d;z-index:5;transition:transform .18s cubic-bezier(.3,1.6,.5,1),border-radius .2s;animation:pop .35s ease-out}.fab:hover{transform:translateY(-2px) rotate(90deg);border-radius:50%}.fab:active{transform:scale(.9)}.fab svg{width:30px;height:30px}.banner{margin:12px 10px 0;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start;font-size:14px;border-left:4px solid var(--accent);animation:rise .3s ease-out}.banner.warn{border-left-color:var(--warn)}.banner .grow{flex:1}.banner strong{display:block;margin-bottom:2px;font-size:15px}.banner .actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.btn{padding:9px 16px;border-radius:999px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);transition:transform .1s,filter .15s,background .15s}.btn:not(:disabled):hover{filter:brightness(1.08)}.btn:not(:disabled):active{transform:scale(.95)}.btn.primary{background:var(--grad);color:var(--on-accent);border-color:transparent;box-shadow:var(--glow)}.btn.topbar-btn{border-color:transparent}.btn.danger{color:var(--danger)}.btn.text{background:none;border-color:transparent;color:var(--accent);padding:9px 10px}.btn:disabled{opacity:.45;box-shadow:none}.card{background:var(--surface);margin:12px 10px;border-radius:20px;padding:18px;border:1px solid var(--line);box-shadow:var(--shadow);animation:rise .3s ease-out both}.card:nth-of-type(2){animation-delay:.03s}.card:nth-of-type(3){animation-delay:.06s}.card:nth-of-type(4){animation-delay:.09s}.card:nth-of-type(n+5){animation-delay:.12s}.card h2{font-size:15px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:8px}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.card-head h2{margin:0}.card-head select{width:auto;padding:4px 10px;font-size:13px;border-radius:999px}.subtitle{color:var(--text-2);font-size:13px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}.stats>div{background:var(--surface-2);border-radius:14px;padding:10px 4px}.stats .v{font-size:20px;font-weight:800}.stats .k{font-size:11px;color:var(--text-2)}.scroll-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.chart-text{font-size:10px;fill:var(--text-2)}.form{padding:4px 16px 16px;animation:rise .3s ease-out}.field{margin:16px 0}.field>label,.field>.label{display:block;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:6px}.field>label.setting{display:flex;font-size:inherit;font-weight:inherit;color:inherit;margin:0}.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}.swatch{aspect-ratio:1;border-radius:50%;border:3px solid transparent;transition:transform .15s cubic-bezier(.3,1.6,.5,1)}.swatch:hover{transform:scale(1.12)}.swatch.on{border-color:var(--bg);box-shadow:0 0 0 2px var(--text);transform:scale(1.08)}.seg{display:flex;padding:3px;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{flex:1;padding:8px 4px;border-radius:999px;font-weight:600;transition:background .15s,color .15s}.seg button.on{background:var(--grad);color:var(--on-accent);box-shadow:var(--glow)}.weekdays{display:flex;gap:6px}.weekdays button{flex:1;aspect-ratio:1;max-width:44px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:600;transition:transform .15s cubic-bezier(.3,1.6,.5,1)}.weekdays button:active{transform:scale(.88)}.weekdays button.on{background:var(--grad);color:var(--on-accent);border-color:transparent}.setting{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.setting:last-child{border-bottom:0}.setting .grow{flex:1}.setting select{width:auto;border-radius:999px;padding:6px 12px}.setting input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}.ok{color:var(--ok);font-weight:700}.bad{color:var(--danger);font-weight:700}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:50;display:grid;place-items:center;padding:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog{background:var(--surface);border:1px solid var(--line);border-radius:24px;width:100%;max-width:380px;padding:22px;box-shadow:0 20px 50px #00000073;animation:pop .2s ease-out}.dialog h3{margin:0 0 4px;font-size:19px;font-weight:800}.dialog .choices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}.dialog .choices button{padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);font-weight:600;display:flex;gap:8px;align-items:center;justify-content:center;transition:transform .1s}.dialog .choices button:active{transform:scale(.95)}.dialog .choices button.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;color:var(--accent)}.dialog .choices svg{width:20px;height:20px}.dialog textarea{margin-top:4px}.dialog .footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.big-input{font-size:30px;text-align:center;font-weight:800}.toast{position:fixed;left:50%;transform:translate(-50%);bottom:calc(96px + env(safe-area-inset-bottom));background:var(--toast-bg);color:var(--toast-fg);padding:12px 18px;border-radius:999px;z-index:60;max-width:90vw;display:flex;gap:14px;align-items:center;box-shadow:0 10px 30px #0006;border:1px solid var(--line);animation:toast-in .2s ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.toast button{color:var(--toast-action);font-weight:700}
