:root{--bg-color:#e0eaf5;--card-bg:#ffffffb3;--glass-border:1px solid #ffffff80;--shadow:0 10px 30px #00000014;--text-main:#333;--text-muted:#777;--cat-rest:#7986cb;--cat-life:#4dd0e1;--cat-study:#ba68c8;--cat-school:#ffb74d;--cat-sport:#81c784;--cat-custom:#a1887f;--state-ready:#4caf50;--state-running:#ff9800;--state-completed:#9e9e9e;--state-locked:#e0e0e0}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{height:100%;margin:0;padding:0}body{background:var(--bg-color);color:var(--text-main);-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#e0eaf5 0%,#fce4ec 100%) fixed;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;overflow:hidden}input,textarea{-webkit-user-select:auto;user-select:auto}.app-container{flex-direction:row;gap:20px;width:100%;height:100%;padding:20px;display:flex}@media (width<=768px){.app-container{flex-direction:column;padding:10px}.left-panel{height:60%}.right-panel{height:40%}}.left-panel{-webkit-backdrop-filter:blur(20px);border:var(--glass-border);box-shadow:var(--shadow);background:#ffffff4d;border-radius:24px;flex-direction:column;flex:6;transition:flex .4s;display:flex;overflow:hidden}.header{border-bottom:1px solid #0000000d;justify-content:space-between;align-items:center;padding:20px;display:flex}.header h1{font-size:24px;font-weight:700}.date-display{color:var(--text-muted);font-size:16px;font-weight:600}.task-list{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;gap:15px;padding:20px 20px 60px;display:flex;overflow-y:auto}.task-card{background:var(--card-bg);border:var(--glass-border);border-radius:18px;flex-shrink:0;align-items:center;gap:15px;padding:15px 20px;transition:all .4s cubic-bezier(.25,1,.5,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 15px #00000008}.task-card:before{content:"";background-color:var(--card-color);border-radius:6px 0 0 6px;width:6px;position:absolute;top:0;bottom:0;left:0}.task-card.status-locked{opacity:.5;filter:grayscale();pointer-events:none}.task-card.status-running{border-color:#ff980066;transform:scale(1.02);box-shadow:0 8px 25px #0000001a}.task-icon{font-size:32px}.task-info{flex-direction:row;flex:1;justify-content:space-between;align-items:center;gap:15px;display:flex}.task-name{white-space:nowrap;font-size:18px;font-weight:600}.task-time{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-top:4px;font-size:14px}.time-details{flex-flow:row;align-items:center;gap:10px;display:flex}.time-tag{background:#0000000a;border-radius:6px;align-items:center;gap:6px;padding:4px 8px;display:inline-flex}.time-tag .time-label{color:#666;background:#fff;border-radius:4px;padding:2px 4px;font-size:11px;box-shadow:0 1px 2px #0000000d}.time-tag .time-val{color:var(--text-main);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}.time-tag.highlight{background:#ff98001a;border:1px solid #ff980033}.time-tag.highlight .time-label{color:var(--state-running)}.time-tag.highlight .time-val{color:var(--state-running);font-size:15px}.action-container{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.action-btn{background:var(--state-ready);color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;border:none;border-radius:12px;min-width:90px;padding:10px 20px;font-size:16px;font-weight:700;transition:background .3s,transform .1s;position:relative;overflow:hidden}.action-btn:active{transform:scale(.95)}.action-btn .btn-text{z-index:2;position:relative}.action-btn .progress-fill{z-index:1;background:#00000040;width:0%;position:absolute;top:0;bottom:0;left:0}.action-btn.pressing .progress-fill{width:100%;transition:width .6s linear}.action-btn.status-ready{background:var(--state-ready)}.action-btn.status-running{background:var(--state-running)}.action-btn.status-completed{background:var(--state-completed)}.add-row-btn{color:var(--text-muted);text-align:center;cursor:pointer;background:0 0;border:2px dashed #0000001a;border-radius:12px;padding:10px;font-size:14px;font-weight:600;transition:all .2s}.add-row-btn:active{background:#0000000d}.edit-toggle-btn{border:1px solid var(--text-muted);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:8px;padding:6px 12px;font-size:14px;transition:all .2s}.edit-toggle-btn.active{background:var(--text-muted);color:#fff}.preset-btn{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;padding:4px 8px;font-size:11px}@keyframes pulse{0%{box-shadow:0 0 #ff980066}70%{box-shadow:0 0 0 10px #ff980000}to{box-shadow:0 0 #ff980000}}.status-running .action-btn{animation:2s infinite pulse}.right-panel{-webkit-backdrop-filter:blur(20px);border:var(--glass-border);box-shadow:var(--shadow);background:#ffffff4d;border-radius:24px;flex-direction:column;flex:4;justify-content:center;align-items:center;padding:20px;transition:flex .4s;display:flex;position:relative}@media (width>=769px){:is(.app-container:has(.right-panel:hover) .left-panel,.app-container:has(.right-panel:focus-within) .left-panel){flex:4}:is(.app-container:has(.right-panel:hover) .right-panel,.app-container:has(.right-panel:focus-within) .right-panel){flex:6}}canvas{aspect-ratio:1;width:95%;max-width:800px}.clock-center-text{pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute}.clock-center-text .time-now{font-variant-numeric:tabular-nums;pointer-events:auto;cursor:pointer;font-size:48px;font-weight:800}.clock-center-text .active-task-name{color:var(--text-muted);margin-top:8px;font-size:20px}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:100;opacity:0;pointer-events:none;background:#0006;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;pointer-events:all}.modal-content{background:#ffffffe6;border-radius:20px;width:90%;max-width:350px;padding:25px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);transform:translateY(20px);box-shadow:0 20px 40px #0003}.modal-overlay.active .modal-content{transform:translateY(0)}.modal-content h3{margin-bottom:15px}.modal-content input,.modal-content select{background:#fff;border:1px solid #ddd;border-radius:10px;width:100%;margin-bottom:15px;padding:12px;font-size:16px}.modal-checkbox-row{color:#333;align-items:center;gap:10px;margin-bottom:15px;font-size:14px;display:flex}.modal-checkbox-row input[type=checkbox]{width:auto;margin-bottom:0;transform:scale(1.2)}.time-window-inputs{align-items:center;gap:10px;margin-bottom:15px;display:flex}.time-window-inputs input{margin-bottom:0}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.modal-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 15px;font-weight:700}.btn-cancel{color:#333;background:#eee}.btn-confirm{background:var(--state-ready);color:#fff}.debug-panel{z-index:1000;background:#fffc;border-radius:8px;flex-direction:column;gap:5px;padding:10px;display:none;position:fixed;bottom:10px;right:10px;box-shadow:0 4px 10px #0003}
