.timer-container{display:flex;flex-direction:column;align-items:center;margin:20px 0 30px}.timer-display{position:relative;width:280px;height:280px;margin-bottom:20px}.timer-circle{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.timer-progress{position:absolute;top:0;left:0;transform:rotate(-90deg)}.timer-progress-bg{fill:none;stroke:var(--color-border);stroke-width:12px}.timer-progress-bar{fill:none;stroke:var(--color-accent);stroke-width:12px;stroke-linecap:round;stroke-dasharray:754;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}.timer-time{font-size:48px;font-weight:700;color:var(--color-text)}.timer-mode{font-size:18px;font-weight:600;color:var(--color-accent);margin-top:10px}.timer-controls{display:flex;justify-content:center;gap:15px;margin-top:20px;flex-wrap:wrap}.timer-button{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:12px 16px;cursor:pointer;transition:all .2s;min-width:80px;box-shadow:var(--shadow-xs)}.timer-button:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-border-hover);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.timer-button:disabled{opacity:.5;cursor:not-allowed}.timer-button i{margin-bottom:6px;color:var(--color-accent);width:20px;height:20px}.timer-button span{font-size:14px;font-weight:500}#start-button:not(:disabled){background-color:var(--color-accent-light);border-color:var(--color-border-hover)}#start-button:hover:not(:disabled){background-color:var(--color-accent-light)}.session-info{display:flex;justify-content:space-around;margin:20px 0;padding:15px;background-color:var(--color-surface);border-radius:8px;border:1px solid var(--color-border)}.session-count,.total-time{display:flex;flex-direction:column;align-items:center}.session-count span:first-child,.total-time span:first-child{font-size:14px;color:var(--color-text-secondary);margin-bottom:5px}.session-count span:last-child,.total-time span:last-child{font-size:18px;font-weight:600;color:var(--color-text)}.settings-panel{background-color:var(--color-surface);border-radius:8px;border:1px solid var(--color-border);margin-bottom:20px;overflow:hidden}.settings-title{display:flex;align-items:center;padding:15px;margin:0;background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);cursor:pointer}.settings-title i{margin-right:10px;color:var(--color-accent)}.settings-content{padding:15px}.setting-item{margin-bottom:15px}.setting-item label{display:block;margin-bottom:8px;font-weight:500}.setting-control{display:flex;align-items:center}.setting-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;cursor:pointer}.setting-button:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-hover)}.setting-input{width:60px;height:36px;text-align:center;margin:0 10px;border:1px solid var(--color-border);border-radius:4px;font-size:16px;background-color:var(--color-surface);color:var(--color-text)}.setting-item.checkbox{display:flex;align-items:center}.setting-item.checkbox label{display:flex;align-items:center;margin-bottom:0;cursor:pointer}.setting-item.checkbox input{margin-right:10px}.usage-guide{background-color:var(--color-surface);border-radius:8px;padding:20px;margin-top:20px;margin-bottom:24px;border:1px solid var(--color-border)}.usage-guide h3{font-size:18px;margin-top:0;margin-bottom:15px;color:var(--color-accent)}.usage-guide ol{margin:0;padding-left:20px}.usage-guide li{margin-bottom:10px;line-height:1.5}.usage-guide li:last-child{margin-bottom:0}.usage-guide p{margin-top:15px;margin-bottom:0}.timer-mode-work .timer-progress-bar{stroke:var(--color-accent)}.timer-mode-break .timer-progress-bar{stroke:var(--color-success)}.timer-mode-longbreak .timer-progress-bar{stroke:var(--color-warning)}@media(max-width:768px){.timer-display,.timer-progress{width:240px;height:240px}.timer-time{font-size:40px}.timer-mode{font-size:16px}.timer-controls{gap:10px}.timer-button{min-width:70px;padding:8px 12px}.settings-content{padding:12px}.setting-input{width:50px}.usage-guide{padding:15px}.usage-guide h3{font-size:16px}.usage-guide li{font-size:14px}.related-tools-list{grid-template-columns:1fr}.related-tool-card{padding:12px}.related-tool-icon{width:36px;height:36px;min-width:36px;margin-right:10px}.related-tool-icon i{width:18px;height:18px}.related-tool-card h3{font-size:15px}.related-tool-card p{font-size:13px}}.related-tools-heading{font-size:20px;font-weight:600;margin:30px 0 15px;color:var(--color-text);text-align:center}.related-tools-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:15px;margin-bottom:30px}.related-tool-card{display:flex;align-items:center;background-color:var(--color-surface);border-radius:10px;padding:16px;text-decoration:none;color:var(--color-text);box-shadow:var(--shadow-xs);transition:all .2s ease;border:1px solid var(--color-border)}.related-tool-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-border-hover)}.related-tool-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;background-color:var(--color-accent-light);border-radius:8px;margin-right:12px}.related-tool-icon i{color:var(--color-accent);width:20px;height:20px}.related-tool-text{flex:1}.related-tool-card h3{font-size:16px;margin:0 0 4px;color:var(--color-accent)}.related-tool-card p{font-size:14px;margin:0;color:var(--color-text-secondary);line-height:1.4}