.br478-main-layout{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}.br478-settings-col{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px}.br478-guide-col{display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid #e8e4dc;border-radius:16px;padding:32px 24px;min-height:480px}.br478-settings-panel{background:#fff;border:1px solid #e8e4dc;border-radius:12px;padding:20px}.br478-panel-title{font-size:14px;font-weight:600;color:#2d2a26;margin-bottom:16px;display:flex;align-items:center;gap:8px}.br478-panel-title i{color:#d4af37}.br478-preset-group{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.br478-preset-label{font-size:12px;font-weight:600;color:#5f5a56}.br478-preset-btns{display:flex;gap:8px;flex-wrap:wrap}.br478-preset-btn{padding:8px 14px;font-size:13px;font-weight:500;color:#5f5a56;background:#faf9f7;border:1px solid #e8e4dc;border-radius:8px;cursor:pointer;transition:all 0.2s;flex:1;min-width:80px;text-align:center}.br478-preset-btn:hover{border-color:#d4af37;color:#d4af37}.br478-preset-btn.active{background:#2d2a26;border-color:#2d2a26;color:#fff}.br478-timing-group{margin-bottom:20px}.br478-timing-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}.br478-timing-item{display:flex;flex-direction:column;gap:4px}.br478-timing-item label{font-size:11px;font-weight:600;color:#5f5a56;display:flex;align-items:center;gap:4px}.br478-timing-item label .dot{width:8px;height:8px;border-radius:50%}.br478-timing-item label .dot.inhale{background:#27ae60}.br478-timing-item label .dot.hold{background:#d4af37}.br478-timing-item label .dot.exhale{background:#3498db}.br478-timing-item input{padding:8px 10px;font-size:14px;font-weight:500;border:1px solid #e8e4dc;border-radius:6px;background:#faf9f7;color:#2d2a26;text-align:center;width:100%;box-sizing:border-box}.br478-timing-item input:focus{outline:none;border-color:#d4af37;background:#fff;box-shadow:0 0 0 3px rgba(212,175,55,.1)}.br478-options-group{display:flex;flex-direction:column;gap:12px}.br478-option-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.br478-option-label{font-size:13px;color:#2d2a26}.br478-toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}.br478-toggle-switch input{opacity:0;width:0;height:0}.br478-toggle-slider{position:absolute;cursor:pointer;inset:0;background:#e8e4dc;border-radius:24px;transition:0.3s}.br478-toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:0.3s}.br478-toggle-switch input:checked+.br478-toggle-slider{background:#d4af37}.br478-toggle-switch input:checked+.br478-toggle-slider::before{transform:translateX(20px)}.br478-info-box{background:#faf9f7;border:1px solid #e8e4dc;border-radius:12px;padding:16px}.br478-info-title{font-size:13px;font-weight:600;color:#2d2a26;margin-bottom:10px;display:flex;align-items:center;gap:6px}.br478-info-title i{color:#d4af37}.br478-info-text{font-size:12px;color:#5f5a56;line-height:1.6}.br478-info-text strong{color:#2d2a26}.br478-phase-tabs{display:flex;gap:8px;margin-bottom:24px}.br478-phase-tab{padding:8px 16px;font-size:13px;font-weight:500;color:#a09a94;background:#faf9f7;border:1px solid #e8e4dc;border-radius:20px;transition:all 0.3s}.br478-phase-tab.active.inhale{background:rgba(39,174,96,.1);border-color:#27ae60;color:#27ae60}.br478-phase-tab.active.hold{background:rgba(212,175,55,.1);border-color:#d4af37;color:#d4af37}.br478-phase-tab.active.exhale{background:rgba(52,152,219,.1);border-color:#3498db;color:#3498db}.br478-visual-container{position:relative;width:260px;height:260px;margin-bottom:24px}.br478-visual-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,#27ae60 0%,#219a52 100%);box-shadow:0 8px 32px rgba(39,174,96,.3);transition:all 0.1s linear}.br478-visual-circle.inhale{background:linear-gradient(135deg,#27ae60 0%,#219a52 100%);box-shadow:0 8px 32px rgba(39,174,96,.3)}.br478-visual-circle.hold{background:linear-gradient(135deg,#d4af37 0%,#b8860b 100%);box-shadow:0 8px 32px rgba(212,175,55,.3)}.br478-visual-circle.exhale{background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);box-shadow:0 8px 32px rgba(52,152,219,.3)}.br478-visual-circle.idle{background:linear-gradient(135deg,#e8e4dc 0%,#d5d0c8 100%);box-shadow:0 4px 16px rgba(0,0,0,.1)}.br478-progress-ring{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}.br478-progress-bg{fill:none;stroke:#e8e4dc;stroke-width:8}.br478-progress-fill{fill:none;stroke:#27ae60;stroke-width:8;stroke-linecap:round;transition:stroke 0.3s}.br478-progress-fill.inhale{stroke:#27ae60}.br478-progress-fill.hold{stroke:#d4af37}.br478-progress-fill.exhale{stroke:#3498db}.br478-center-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2}.br478-countdown{font-size:48px;font-weight:700;color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.2)}.br478-countdown.idle{color:#5f5a56;text-shadow:none}.br478-phase-text{font-size:14px;font-weight:500;color:rgba(255,255,255,.9);margin-top:6px;text-shadow:0 1px 4px rgba(0,0,0,.2)}.br478-phase-text.idle{color:#a09a94;text-shadow:none}.br478-controls{display:flex;gap:12px;margin-bottom:24px}.br478-control-btn{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;font-size:20px}.br478-control-btn.start{background:linear-gradient(135deg,#27ae60 0%,#219a52 100%);color:#fff;box-shadow:0 4px 12px rgba(39,174,96,.3)}.br478-control-btn.start:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(39,174,96,.4)}.br478-control-btn.pause{background:linear-gradient(135deg,#f39c12 0%,#d68910 100%);color:#fff;box-shadow:0 4px 12px rgba(243,156,18,.3)}.br478-control-btn.pause:hover{transform:scale(1.05)}.br478-control-btn.reset{background:#faf9f7;border:1px solid #e8e4dc;color:#5f5a56}.br478-control-btn.reset:hover{border-color:#d4af37;color:#d4af37}.br478-cycle-section{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:300px}.br478-cycle-label{font-size:13px;color:#5f5a56}.br478-cycle-label .count{font-weight:600;color:#d4af37}.br478-cycle-dots{display:flex;gap:10px;align-items:center}.br478-cycle-dot{width:14px;height:14px;border-radius:50%;background:#e8e4dc;transition:all 0.3s}.br478-cycle-dot.completed{background:#27ae60}.br478-cycle-dot.current{background:#d4af37;transform:scale(1.2);box-shadow:0 0 8px rgba(212,175,55,.5)}.br478-total-time{margin-top:16px;padding-top:16px;border-top:1px solid #e8e4dc;font-size:13px;color:#5f5a56;display:flex;align-items:center;gap:6px;width:100%;max-width:300px;justify-content:center}.br478-total-time i{color:#d4af37}.br478-total-time .time{font-weight:600;color:#2d2a26}.br478-idle-hint{font-size:13px;color:#a09a94;text-align:center;margin-top:8px}.br478-disclaimer{display:flex;align-items:flex-start;gap:10px;padding:12px;background:rgba(108,117,125,.08);border-radius:8px;margin-top:16px;width:100%}.br478-disclaimer i{color:#6c757d;font-size:16px;flex-shrink:0;margin-top:1px}.br478-disclaimer span{font-size:12px;color:#5f5a56;line-height:1.5}@media (max-width:900px){.br478-main-layout{grid-template-columns:280px 1fr;gap:20px}.br478-guide-col{padding:24px 20px}.br478-visual-container{width:220px;height:220px}.br478-visual-circle{width:150px;height:150px}.br478-countdown{font-size:40px}}@media (max-width:768px){.br478-main-layout{grid-template-columns:1fr;gap:16px}.br478-settings-col{position:static;order:2}.br478-guide-col{order:1;padding:24px 16px;min-height:auto}.br478-visual-container{width:200px;height:200px}.br478-visual-circle{width:140px;height:140px}.br478-countdown{font-size:36px}.br478-phase-text{font-size:13px}.br478-control-btn{width:50px;height:50px;font-size:18px}.br478-timing-row{grid-template-columns:repeat(3,1fr);gap:8px}.br478-preset-btns{flex-wrap:wrap}.br478-preset-btn{flex:1 1 calc(50% - 4px);min-width:auto}}@media (max-width:480px){.br478-guide-col{padding:20px 12px}.br478-visual-container{width:180px;height:180px}.br478-visual-circle{width:120px;height:120px}.br478-countdown{font-size:32px}.br478-phase-tabs{flex-wrap:wrap;justify-content:center}.br478-phase-tab{padding:6px 12px;font-size:12px}.br478-control-btn{width:46px;height:46px;font-size:16px}.br478-cycle-dot{width:12px;height:12px}.br478-settings-panel{padding:16px}.br478-timing-row{gap:6px}.br478-timing-item input{padding:6px 8px;font-size:13px}}.br478-hidden{display:none!important}