*{box-sizing:border-box;margin:0;padding:0}html,body{color:#333;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}#root{min-height:100dvh}.app-shell{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100dvh;padding:20px 16px 40px}.app-header{text-align:center;margin-bottom:24px}.logo{justify-content:center;align-items:center;gap:10px;margin-bottom:6px;display:flex}.logo-icon{font-size:32px}.app-header h1{color:#fff;letter-spacing:1px;font-size:28px;font-weight:700}.tagline{color:#ffffffd9;font-size:14px}.tab-nav{grid-template-columns:repeat(4,1fr);gap:8px;max-width:600px;margin:0 auto 20px;display:grid}.tab-btn{color:#ffffffe6;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:none;border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;transition:all .25s;display:flex}.tab-btn:hover{background:#ffffff40;transform:translateY(-2px)}.tab-btn.active{color:#667eea;background:#fff;box-shadow:0 8px 24px #00000026}.tab-icon{font-size:22px}.tab-text{flex-direction:column;align-items:center;gap:2px;display:flex}.tab-label{font-size:13px;font-weight:600}.tab-desc{opacity:.7;font-size:10px}.main-content{max-width:500px;margin:0 auto}.tool-panel{background:#fff;border-radius:24px;padding:24px;animation:.4s slideUp;box-shadow:0 20px 60px #0003}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.wheel-panel{flex-direction:column;align-items:center;gap:20px;display:flex}.wheel-header{border-bottom:1px solid #f0f0f0;justify-content:space-between;align-items:center;width:100%;padding-bottom:12px;display:flex}.current-wheel-info{align-items:center;gap:8px;display:flex}.wheel-name-icon{font-size:20px}.wheel-name-text{color:#333;font-size:16px;font-weight:600}.wheel-actions{gap:8px;display:flex}.wheel-action-btn{cursor:pointer;background:#f5f5f5;border:none;border-radius:10px;width:36px;height:36px;font-size:16px;transition:all .2s}.wheel-action-btn:hover{background:#ebebeb;transform:scale(1.05)}.wheel-container{justify-content:center;align-items:center;display:flex;position:relative}.pointer{color:#ff6b6b;z-index:10;filter:drop-shadow(0 2px 4px #0003);font-size:28px;position:absolute;top:-10px;left:50%;transform:translate(-50%)}.wheel{border-radius:50%;width:300px;height:300px;transition-timing-function:cubic-bezier(.17,.67,.12,.99);box-shadow:0 8px 32px #00000026,inset 0 0 0 6px #fff}.wheel svg{display:block}.result-popup{background:#0006;border-radius:50%;justify-content:center;align-items:center;animation:.4s popIn;display:flex;position:absolute;inset:0}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.result-content{text-align:center;background:#fff;border-radius:16px;padding:20px 28px;box-shadow:0 8px 24px #0003}.result-label{color:#888;margin-bottom:8px;font-size:14px}.result-text{color:#333;margin-bottom:16px;font-size:24px;font-weight:700}.close-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:20px;padding:8px 24px;font-size:14px;transition:transform .2s}.close-btn:hover{transform:scale(1.05)}.spin-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b6b 0%,#fec89a 100%);border:none;border-radius:16px;width:100%;padding:16px;font-size:18px;font-weight:600;transition:all .25s;box-shadow:0 4px 16px #ff6b6b66}.spin-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b80}.spin-btn:disabled{opacity:.6;cursor:not-allowed}.spin-btn.spinning{animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.options-section{width:100%}.options-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.options-header h3{color:#333;font-size:16px}.options-header-actions{gap:8px;display:flex}.weight-toggle-btn{color:#666;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:20px;padding:6px 14px;font-size:13px;transition:all .2s}.weight-toggle-btn:hover:not(:disabled){background:#f5f5f5;border-color:#ccc}.weight-toggle-btn.active{color:#fff;background:#667eea;border-color:#667eea}.reset-btn{color:#666;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:20px;padding:6px 14px;font-size:13px;transition:all .2s}.reset-btn:hover:not(:disabled){background:#f5f5f5;border-color:#ccc}.reset-btn:disabled{opacity:.5;cursor:not-allowed}.add-option{gap:8px;margin-bottom:12px;display:flex}.add-option input{border:2px solid #eee;border-radius:12px;outline:none;padding:10px 14px;font-size:14px;transition:border-color .2s}.add-option input:focus{border-color:#667eea}.add-option-input{flex:1}.weight-input{text-align:center;width:70px}.add-option button{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:12px;padding:10px 18px;font-size:14px;transition:background .2s}.add-option button:hover:not(:disabled){background:#5a6fd8}.add-option button:disabled{opacity:.5;cursor:not-allowed}.weight-hint{color:#667eea;background:#f0f4ff;border-radius:8px;margin-bottom:12px;padding:8px 12px;font-size:12px}.options-list{flex-direction:column;gap:6px;max-height:280px;padding-right:4px;display:flex;overflow-y:auto}.options-list::-webkit-scrollbar{width:4px}.options-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}.options-list::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.option-item{background:#f9f9f9;border-left:4px solid #ddd;border-radius:10px;align-items:center;gap:10px;padding:8px 12px;display:flex}.option-index{color:#999;width:20px;font-size:12px;font-weight:600}.option-text{color:#333;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:14px;overflow:hidden}.option-weight-control{align-items:center;gap:6px;display:flex}.option-weight-control input{text-align:center;border:1px solid #ddd;border-radius:6px;outline:none;width:50px;padding:4px 6px;font-size:12px}.option-weight-control input:focus{border-color:#667eea}.weight-percent{color:#888;text-align:right;min-width:40px;font-size:11px}.options-grid{flex-wrap:wrap;gap:8px;display:flex}.option-chip{color:#333;border-radius:20px;align-items:center;gap:6px;padding:6px 10px 6px 12px;font-size:13px;font-weight:500;display:flex}.remove-chip{color:#666;cursor:pointer;background:#fff9;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:16px;line-height:1;transition:background .2s;display:flex}.remove-chip:hover:not(:disabled){background:#ffffffe6}.remove-chip:disabled{opacity:.3;cursor:not-allowed}.option-item .remove-chip{background:#eee}.option-item .remove-chip:hover:not(:disabled){background:#ddd}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:20px;width:90%;max-width:360px;padding:24px;animation:.3s slideUp}.modal-content h3{color:#333;text-align:center;margin-bottom:16px;font-size:18px;font-weight:600}.modal-input{border:2px solid #eee;border-radius:12px;outline:none;width:100%;margin-bottom:16px;padding:12px 16px;font-size:15px;transition:border-color .2s}.modal-input:focus{border-color:#667eea}.modal-actions{gap:12px;display:flex}.modal-cancel,.modal-confirm{cursor:pointer;border:none;border-radius:12px;flex:1;padding:12px;font-size:14px;font-weight:600;transition:all .2s}.modal-cancel{color:#666;background:#f0f0f0}.modal-cancel:hover{background:#e5e5e5}.modal-confirm{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.modal-confirm:hover{transform:translateY(-1px)}.full-width{width:100%}.wheel-list-modal{flex-direction:column;max-height:80vh;display:flex}.new-wheel-btn{color:#667eea;cursor:pointer;background:#fff;border:2px dashed #ddd;border-radius:12px;width:100%;margin-bottom:16px;padding:12px;font-size:14px;font-weight:500;transition:all .2s}.new-wheel-btn:hover{background:#f8f9ff;border-color:#667eea}.saved-wheels-list{flex:1;max-height:400px;margin-bottom:16px;overflow-y:auto}.no-saved-wheels{text-align:center;color:#999;padding:30px 0;font-size:14px}.saved-wheel-item{cursor:pointer;background:#f9f9f9;border-radius:12px;align-items:center;gap:12px;margin-bottom:8px;padding:12px;transition:all .2s;display:flex}.saved-wheel-item:hover{background:#f0f0f0}.saved-wheel-item.active{background:#f0f4ff;border:1px solid #667eea}.saved-wheel-icon{font-size:24px}.saved-wheel-info{flex-direction:column;flex:1;gap:2px;display:flex}.saved-wheel-name{color:#333;font-size:14px;font-weight:600}.saved-wheel-count{color:#999;font-size:12px}.delete-wheel-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;width:32px;height:32px;font-size:14px;transition:background .2s}.delete-wheel-btn:hover{background:#ff6b6b1a}.joke-panel{flex-direction:column;align-items:center;gap:20px;display:flex}.joke-card{text-align:center;background:linear-gradient(135deg,#fff5f5 0%,#fff0f6 100%);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:220px;padding:28px 24px;transition:opacity .3s;display:flex}.joke-card.fading{opacity:.4}.joke-category{align-items:center;gap:8px;margin-bottom:16px;display:flex}.joke-emoji{font-size:28px}.joke-tag{color:#ff6b6b;background:#ff6b6b26;border-radius:12px;padding:4px 12px;font-size:12px;font-weight:600}.joke-setup{color:#333;margin-bottom:20px;font-size:20px;font-weight:600;line-height:1.6}.joke-punchline{color:#667eea;background:#667eea1a;border-radius:16px;padding:16px 24px;font-size:18px;font-weight:600;animation:.5s reveal}@keyframes reveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.reveal-btn{color:#888;cursor:pointer;background:#fff;border:2px dashed #ccc;border-radius:16px;padding:14px 32px;font-size:15px;transition:all .25s}.reveal-btn:hover{color:#667eea;background:#667eea0d;border-color:#667eea}.next-joke-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:16px;width:100%;padding:16px;font-size:16px;font-weight:600;transition:all .25s;box-shadow:0 4px 16px #667eea66}.next-joke-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.next-joke-btn:disabled{opacity:.6;cursor:not-allowed}.joke-history{width:100%}.joke-history h4{color:#888;margin-bottom:10px;font-size:14px;font-weight:500}.history-list{flex-direction:column;gap:8px;display:flex}.history-item{color:#666;background:#f8f9fa;border-radius:12px;align-items:center;gap:10px;padding:10px 14px;font-size:14px;display:flex}.history-emoji{font-size:18px}.history-text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.joke-stats{background:#f8f9fa;border-radius:16px;justify-content:space-around;width:100%;padding:16px;display:flex}.stat-item{flex-direction:column;align-items:center;gap:4px;display:flex}.stat-num{color:#667eea;font-size:22px;font-weight:700}.stat-label{color:#999;font-size:12px}.color-panel{flex-direction:column;gap:20px;display:flex}.color-showcase{border-radius:20px;justify-content:center;align-items:center;height:200px;transition:background-color .5s;display:flex;position:relative;overflow:hidden}.color-showcase:before{content:"";background:radial-gradient(circle at 30% 20%,#ffffff4d,#0000 60%);position:absolute;inset:0}.color-info{text-align:center;z-index:1;position:relative}.color-name{margin-bottom:8px;font-size:28px;font-weight:700}.color-hex{cursor:pointer;background:#fff3;border-radius:8px;margin-bottom:10px;padding:6px 16px;font-family:Monaco,Menlo,monospace;font-size:20px;transition:background .2s;display:inline-block;position:relative}.color-hex:hover{background:#ffffff59}.dark-text{color:#000c}.light-text{color:#fff}.color-mood{opacity:.9;font-size:15px}.copied-badge{color:#fff;background:#333;border-radius:6px;padding:4px 10px;font-size:12px;animation:.3s fadeInUp;position:absolute;top:-30px;left:50%;transform:translate(-50%)}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.new-color-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#aa96da 0%,#fcbad3 100%);border:none;border-radius:16px;width:100%;padding:16px;font-size:16px;font-weight:600;transition:all .25s;box-shadow:0 4px 16px #aa96da66}.new-color-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #aa96da80}.color-input-section{width:100%}.color-input-section h4{color:#888;margin-bottom:12px;font-size:14px;font-weight:500}.color-input-row{align-items:center;gap:10px;display:flex}.color-input{border:2px solid #eee;border-radius:12px;outline:none;flex:1;padding:10px 14px;font-family:Monaco,Menlo,monospace;font-size:14px;transition:border-color .2s}.color-input:focus{border-color:#667eea}.color-preview-box{border:2px solid #eee;border-radius:10px;flex-shrink:0;width:40px;height:40px}.apply-color-btn{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:12px;flex-shrink:0;padding:10px 16px;font-size:14px;transition:background .2s}.apply-color-btn:hover{background:#5a6fd8}.input-error{color:#ff6b6b;margin-top:8px;font-size:12px}.color-input-actions{margin-top:12px}.use-as-brush-btn{color:#667eea;cursor:pointer;background:#fff;border:1px solid #667eea;border-radius:20px;padding:8px 16px;font-size:13px;transition:all .2s}.use-as-brush-btn:hover{background:#f0f4ff}.palette-section,.color-history{width:100%}.palette-section h4,.color-history h4{color:#888;margin-bottom:12px;font-size:14px;font-weight:500}.palette-hint{color:#aa96da;font-size:11px;font-weight:400}.palette-row{border-radius:12px;height:60px;display:flex;overflow:hidden;box-shadow:0 2px 8px #0000001a}.palette-swatch{cursor:pointer;flex:1;justify-content:center;align-items:center;transition:flex .3s;display:flex;position:relative}.palette-swatch:hover{flex:1.5}.palette-swatch.selected{z-index:1;box-shadow:inset 0 0 0 3px #667eea}.swatch-copied{color:#fff;text-shadow:0 1px 2px #0000004d;font-size:16px;font-weight:700}.swatch-applied{color:#fff;text-shadow:0 1px 3px #0006;font-size:18px;font-weight:700;animation:.3s popIn}.palette-hexes{gap:4px;margin-top:8px;display:flex}.hex-label{text-align:center;color:#999;cursor:pointer;border-radius:4px;flex:1;padding:2px 0;font-family:Monaco,Menlo,monospace;font-size:10px;transition:all .2s}.hex-label:hover{color:#666;background:#f0f0f0}.history-row{flex-wrap:wrap;gap:8px;display:flex}.history-swatch{cursor:pointer;border-radius:10px;width:36px;height:36px;transition:transform .2s;box-shadow:0 2px 6px #00000026}.history-swatch:hover{transform:scale(1.15)}.drawing-canvas-section{background:#f8f9fa;border-radius:16px;width:100%;padding:16px}.drawing-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.drawing-header h4{color:#333;margin:0;font-size:14px;font-weight:600}.drawing-header-actions{gap:6px;display:flex}.canvas-action-btn{cursor:pointer;background:#fff;border:none;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;transition:all .2s;display:flex}.canvas-action-btn:hover:not(:disabled){color:#fff;background:#667eea}.canvas-action-btn:disabled{opacity:.4;cursor:not-allowed}.drawing-toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.tool-group{background:#fff;border-radius:10px;align-items:center;gap:4px;padding:6px;display:flex}.tool-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.tool-btn:hover{background:#f0f0f0}.tool-btn.active{background:#667eea}.tool-btn.active .tool-icon{filter:brightness(0)invert()}.tool-icon{font-size:18px}.brush-size-control{align-items:center;gap:8px;padding:0 8px;display:flex}.brush-size-label{color:#666;font-size:12px}.brush-size-slider{cursor:pointer;width:80px;height:4px}.brush-size-value{color:#333;text-align:center;min-width:20px;font-size:12px;font-weight:600}.color-picker-control{align-items:center;gap:8px;padding:0 8px;display:flex}.color-picker-label{color:#666;font-size:12px}.color-picker-input{cursor:pointer;background:0 0;border:none;border-radius:8px;width:32px;height:32px}.color-picker-input::-webkit-color-swatch-wrapper{padding:0}.color-picker-input::-webkit-color-swatch{border:2px solid #eee;border-radius:6px}.color-picker-hex{color:#666;font-family:Monaco,Menlo,monospace;font-size:11px}.quick-colors{margin-bottom:12px}.quick-colors-label{color:#666;margin-right:8px;font-size:12px}.quick-colors-row{vertical-align:middle;gap:6px;display:inline-flex}.quick-color-swatch{cursor:pointer;border:2px solid #fff;border-radius:6px;width:24px;height:24px;transition:transform .2s;box-shadow:0 1px 3px #0000001a}.quick-color-swatch:hover{transform:scale(1.15)}.quick-color-swatch.selected{border-color:#667eea;box-shadow:0 0 0 2px #667eea4d}.canvas-container{background:#fff;border-radius:12px;width:100%;overflow:hidden;box-shadow:0 2px 8px #0000001a}.drawing-canvas{cursor:crosshair;touch-action:none;width:100%;height:auto;display:block}.color-tips{text-align:center;color:#999;font-size:13px}.timer-panel{flex-direction:column;align-items:center;gap:24px;display:flex}.timer-top-bar{justify-content:space-between;align-items:center;width:100%;display:flex}.active-task-display{flex:1;margin-right:12px}.active-task-info{flex-direction:column;gap:2px;display:flex}.active-task-text{color:#ff6b6b;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;display:block;overflow:hidden}.active-task-duration{color:#ff9a8b;font-size:12px;font-weight:500}.no-active-task{color:#aaa;font-size:13px}.settings-btn{cursor:pointer;background:#f5f5f5;border:none;border-radius:12px;width:40px;height:40px;font-size:18px;transition:all .2s}.settings-btn:hover{background:#ebebeb;transform:rotate(30deg)}.mode-selector{gap:8px;width:100%;display:flex}.mode-btn{cursor:pointer;background:#fff;border:2px solid #eee;border-radius:14px;flex-direction:column;flex:1;align-items:center;gap:4px;padding:10px 8px;transition:all .25s;display:flex}.mode-btn:hover{border-color:var(--mode-color)}.mode-btn.active{border-color:var(--mode-color);background:color-mix(in srgb, var(--mode-color) 10%, #fff)}.mode-icon{font-size:20px}.mode-label{color:#666;font-size:12px;font-weight:600}.mode-btn.active .mode-label{color:#333}.timer-circle{justify-content:center;align-items:center;width:280px;height:280px;display:flex;position:relative}.timer-display{text-align:center;position:absolute}.timer-time{color:#333;font-variant-numeric:tabular-nums;letter-spacing:2px;font-size:56px;font-weight:700}.timer-mode-label{color:#999;margin-top:4px;font-size:14px}.complete-overlay{background:#fffffff2;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;animation:.5s popIn;display:flex;position:absolute;inset:0}.complete-emoji{margin-bottom:8px;font-size:48px;animation:.6s infinite alternate bounce}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.complete-text{color:#4ecdc4;font-size:20px;font-weight:600}.timer-controls{align-items:center;gap:20px;display:flex}.control-btn{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:22px;transition:all .25s;display:flex}.control-btn.reset-btn,.control-btn.skip-btn{color:#666;background:#f0f0f0}.control-btn:hover{transform:scale(1.1)}.control-btn:active{transform:scale(.95)}.play-btn{color:#fff;width:72px;height:72px;font-size:28px;box-shadow:0 6px 20px #0003}.play-btn.running{animation:2s ease-in-out infinite pulse}.pomodoro-stats{background:#f8f9fa;border-radius:16px;width:100%;padding:16px}.stat-row{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.stat-row .stat-label{color:#888;font-size:14px}.stat-row .stat-value{color:#333;font-size:16px;font-weight:600}.tomato-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.tomato{font-size:24px;animation:.3s popIn}.more-tomatoes{color:#ff6b6b;font-size:14px;font-weight:600}.no-tomatoes{color:#aaa;font-size:13px}.tasks-section{width:100%}.tasks-section h4{color:#888;margin-bottom:10px;font-size:14px;font-weight:500}.add-task{gap:8px;margin-bottom:12px;display:flex}.add-task input{border:2px solid #eee;border-radius:12px;outline:none;flex:1;padding:10px 14px;font-size:14px;transition:border-color .2s}.add-task input:focus{border-color:#667eea}.duration-toggle-btn{cursor:pointer;background:#fff;border:2px solid #eee;border-radius:12px;flex-shrink:0;width:42px;padding:10px;font-size:16px;transition:all .2s}.duration-toggle-btn:hover{background:#fff5f5;border-color:#ff6b6b}.add-task button{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:12px;padding:10px 16px;font-size:14px;transition:background .2s}.add-task button:hover:not(:disabled){background:#5a6fd8}.add-task button:disabled{opacity:.5;cursor:not-allowed}.custom-duration-input{background:#fff5f5;border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;padding:10px 14px;display:flex}.duration-label{color:#666;font-size:13px}.duration-input{text-align:center;border:2px solid #ffd9d9;border-radius:8px;outline:none;width:60px;padding:6px 10px;font-size:13px}.duration-input:focus{border-color:#ff6b6b}.duration-unit{color:#666;font-size:13px}.duration-hint{color:#999;font-size:11px}.tasks-list{flex-direction:column;gap:6px;max-height:240px;display:flex;overflow-y:auto}.no-tasks{text-align:center;color:#aaa;padding:20px 0;font-size:13px}.task-item{cursor:pointer;background:#f9f9f9;border:2px solid #0000;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;transition:all .2s;display:flex}.task-item:hover{background:#f0f0f0}.task-item.active{background:#fff5f5;border-color:#ff6b6b}.task-item.completed .task-text{color:#aaa;text-decoration:line-through}.task-checkbox{color:#4ecdc4;cursor:pointer;background:#fff;border:2px solid #ddd;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:14px;font-weight:700;transition:all .2s;display:flex}.task-checkbox:hover{border-color:#667eea}.task-item.completed .task-checkbox{color:#fff;background:#4ecdc4;border-color:#4ecdc4}.task-content{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.task-text{color:#333;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.task-custom-duration{color:#ff9a8b;font-size:11px;font-weight:500}.task-duration-edit{align-items:center;gap:6px;display:flex}.task-duration-edit input{text-align:center;border:2px solid #ffd9d9;border-radius:6px;outline:none;width:60px;padding:4px 6px;font-size:12px}.task-duration-edit button{cursor:pointer;color:#fff;background:#667eea;border:none;border-radius:6px;padding:4px 10px;font-size:11px}.task-duration-edit button:last-child{color:#666;background:#eee}.task-pomodoros{color:#ff6b6b;flex-shrink:0;font-size:12px}.task-edit-duration{cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;transition:background .2s;display:flex}.task-edit-duration:hover{background:#ff6b6b1a}.task-delete{color:#888;cursor:pointer;background:#eee;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:16px;line-height:1;transition:all .2s;display:flex}.task-delete:hover{color:#fff;background:#ff6b6b}.settings-modal{max-width:320px}.settings-list{flex-direction:column;gap:16px;margin-bottom:16px;display:flex}.setting-item{justify-content:space-between;align-items:center;display:flex}.setting-label{color:#333;font-size:14px;font-weight:500}.setting-input-wrap{align-items:center;gap:6px;display:flex}.setting-input-wrap input{text-align:center;border:2px solid #eee;border-radius:8px;outline:none;width:70px;padding:8px 10px;font-size:14px;transition:border-color .2s}.setting-input-wrap input:focus{border-color:#667eea}.setting-unit{color:#888;font-size:13px}.settings-hint{color:#aaa;text-align:center;margin-bottom:8px;font-size:12px}.timer-tips{text-align:center;color:#999;font-size:13px}.app-footer{text-align:center;color:#ffffffb3;margin-top:24px;font-size:13px}@media (width<=480px){.app-shell{padding:16px 12px 32px}.app-header h1{font-size:24px}.logo-icon{font-size:26px}.tab-nav{gap:6px}.tab-btn{padding:10px 6px}.tab-icon{font-size:18px}.tab-label{font-size:11px}.tab-desc{display:none}.tool-panel{border-radius:20px;padding:20px 16px}.wheel,.wheel svg{width:260px;height:260px}.joke-setup{font-size:18px}.joke-punchline{font-size:16px}.timer-circle{width:240px;height:240px}.timer-time{font-size:48px}.drawing-toolbar{gap:8px}.brush-size-slider{width:60px}.color-picker-hex{display:none}}