.timezone-converter{max-width:1200px;margin:0 auto;padding:2rem}.timezone-converter .tool-header{text-align:center;margin-bottom:2rem}.timezone-converter .tool-header h1{font-size:2.5rem;color:var(--text-primary);margin-bottom:.5rem}.timezone-converter .tool-header p{color:var(--text-secondary);font-size:1.1rem}.view-mode-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}.mode-btn{display:flex;flex-direction:column;align-items:center;padding:1.25rem;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s ease}.mode-btn:hover{border-color:var(--primary-color);transform:translateY(-2px)}.mode-btn.active{border-color:var(--primary-color);background:linear-gradient(135deg,#3b82f61a,#9333ea1a)}.mode-icon{font-size:2rem;margin-bottom:.5rem}.mode-name{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.mode-desc{font-size:.8rem;color:var(--text-secondary)}.converter-section h2{text-align:center;margin-bottom:1.5rem;color:var(--text-primary)}.conversion-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:start;margin-bottom:2rem}.source-panel,.target-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem}.source-panel h3,.target-panel h3{margin:0 0 1rem;color:var(--text-secondary);font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.source-panel .input-group,.target-panel .input-group{display:flex;flex-direction:column;gap:1rem}.source-panel label,.target-panel label{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;color:var(--text-secondary)}.source-panel input,.source-panel select,.target-panel input,.target-panel select{padding:.75rem;border:1px solid var(--border-color);border-radius:8px;font-size:1rem;background:var(--bg-primary);color:var(--text-primary)}.source-offset,.target-offset{margin-top:1rem;text-align:center;font-size:.9rem;color:var(--primary-color);font-weight:500}.swap-container{display:flex;align-items:center;justify-content:center;padding-top:3rem}.swap-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--primary-color);background:var(--bg-primary);color:var(--primary-color);font-size:1.5rem;cursor:pointer;transition:all .2s ease}.swap-btn:hover{background:var(--primary-color);color:#fff;transform:rotate(180deg)}.conversion-result{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border-radius:16px;padding:2rem;text-align:center;margin-bottom:1.5rem}.result-time{display:flex;justify-content:center;align-items:baseline;gap:1rem;margin-bottom:.5rem}.time-display{font-size:3.5rem;font-weight:700}.time-24h{font-size:1.5rem;opacity:.8}.result-date{font-size:1.2rem;margin-bottom:.5rem}.different-day-badge{display:inline-block;background:#fff3;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;margin-left:.5rem}.result-zone{font-size:.9rem;opacity:.9}.quick-zones{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:1rem;background:var(--bg-secondary);border-radius:8px}.quick-zones>span{color:var(--text-secondary);font-size:.9rem;margin-right:.5rem}.quick-zone-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.quick-zone-buttons button{padding:.5rem 1rem;border:1px solid var(--border-color);border-radius:20px;background:var(--bg-primary);color:var(--text-primary);cursor:pointer;font-size:.85rem;transition:all .2s ease}.quick-zone-buttons button:hover{border-color:var(--primary-color)}.quick-zone-buttons button.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.world-clock-section h2{text-align:center;margin-bottom:1.5rem;color:var(--text-primary)}.world-clock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}.clock-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;text-align:center;position:relative;border-top:4px solid var(--primary-color)}.remove-clock-btn{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;border-radius:50%;border:none;background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;font-size:1rem;line-height:1;opacity:0;transition:opacity .2s ease}.clock-card:hover .remove-clock-btn{opacity:1}.remove-clock-btn:hover{background:#ef4444;color:#fff}.clock-icon{font-size:2rem;margin-bottom:.5rem}.clock-time{font-size:2rem;font-weight:700;color:var(--text-primary)}.clock-time-24{font-size:1rem;color:var(--text-secondary);margin-bottom:.5rem}.clock-date{font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem}.clock-zone{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.clock-offset{font-size:.8rem;color:var(--primary-color)}.add-clock-card{display:flex;align-items:center;justify-content:center;min-height:180px;background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:12px;padding:1rem}.add-clock-card select{padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:.9rem;width:100%;max-width:180px}.local-time-display{text-align:center;padding:1rem;background:var(--bg-secondary);border-radius:8px;color:var(--text-secondary)}.local-time-display strong{color:var(--text-primary)}.meeting-planner-section h2{text-align:center;margin-bottom:.5rem;color:var(--text-primary)}.planner-intro{text-align:center;color:var(--text-secondary);margin-bottom:1.5rem}.planner-controls{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem;padding:1.5rem;background:var(--bg-secondary);border-radius:12px}.planner-controls>label{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;color:var(--text-secondary)}.planner-controls input[type=date]{padding:.75rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary)}.meeting-zones-select{flex:1}.meeting-zones-select>label{display:block;font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem}.selected-zones{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.zone-tag{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--primary-color);color:#fff;border-radius:20px;font-size:.85rem}.zone-tag button{background:none;border:none;color:#fff;cursor:pointer;padding:0;font-size:1rem;opacity:.8}.zone-tag button:hover{opacity:1}.selected-zones select{padding:.5rem .75rem;border:1px dashed var(--border-color);border-radius:20px;background:var(--bg-primary);color:var(--text-secondary);font-size:.85rem}.planner-legend{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-bottom:1rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-secondary)}.legend-dot{width:16px;height:16px;border-radius:4px}.legend-item.ideal .legend-dot{background:#22c55e}.legend-item.ok .legend-dot{background:var(--bg-secondary);border:1px solid var(--border-color)}.legend-item.poor .legend-dot{background:#fecaca}.meeting-times-table{border:1px solid var(--border-color);border-radius:12px;overflow:hidden;margin-bottom:1.5rem}.table-header{display:grid;grid-template-columns:100px repeat(auto-fit,minmax(100px,1fr));background:var(--bg-secondary);font-weight:600}.table-header .time-column,.table-header .zone-column{padding:1rem;text-align:center;border-bottom:2px solid var(--border-color);color:var(--text-primary)}.table-body{max-height:500px;overflow-y:auto}.time-row{display:grid;grid-template-columns:100px repeat(auto-fit,minmax(100px,1fr));border-bottom:1px solid var(--border-color)}.time-row:last-child{border-bottom:none}.time-row.ideal{background:#22c55e1a}.time-row.poor{background:#ef44440d}.time-row .time-column{padding:.75rem;text-align:center;font-weight:500;color:var(--text-primary);background:var(--bg-secondary)}.time-row .zone-column{padding:.75rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}.time-row .zone-column.work-hour{background:#22c55e1a}.time-row .zone-column.sleep-hour{background:#ef44441a}.zone-icon{font-size:1rem}.zone-time{font-size:.85rem;color:var(--text-primary)}.ideal-times{background:var(--bg-secondary);border-radius:12px;padding:1.5rem}.ideal-times h3{margin:0 0 1rem;color:var(--text-primary)}.ideal-times-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}.ideal-time-card{background:var(--bg-primary);border:2px solid #22c55e;border-radius:8px;padding:1rem}.ideal-time-card strong{display:block;color:#22c55e;margin-bottom:.5rem}.ideal-breakdown{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--text-secondary)}.no-ideal{color:var(--text-secondary);font-style:italic}.tips-section{margin-top:2rem;padding:1.5rem;background:var(--bg-secondary);border-radius:12px}.tips-section h3{margin:0 0 1rem;text-align:center;color:var(--text-primary)}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.tip{display:flex;gap:.75rem;padding:1rem;background:var(--bg-primary);border-radius:8px}.tip-icon{font-size:1.5rem;flex-shrink:0}.tip p{margin:0;font-size:.9rem;color:var(--text-secondary)}.tip strong{color:var(--text-primary)}.cta-section{margin-top:2rem;padding:2.5rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));border-radius:16px;text-align:center;color:#fff}.cta-section h2{margin:0 0 .5rem;font-size:1.75rem}.cta-section p{margin:0 0 1.5rem;opacity:.9}.cta-btn{display:inline-block;padding:.875rem 2rem;background:#fff;color:var(--primary-color);text-decoration:none;border-radius:8px;font-weight:600;transition:all .2s ease}.cta-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}@media (max-width: 768px){.timezone-converter{padding:1rem}.timezone-converter .tool-header h1{font-size:1.75rem}.view-mode-selector{grid-template-columns:1fr}.mode-btn{flex-direction:row;gap:1rem;text-align:left}.mode-desc{display:none}.conversion-grid{grid-template-columns:1fr}.swap-container{padding:.5rem 0}.swap-btn{transform:rotate(90deg)}.swap-btn:hover{transform:rotate(270deg)}.time-display{font-size:2.5rem}.quick-zones{flex-direction:column;align-items:stretch}.quick-zone-buttons{justify-content:center}.world-clock-grid{grid-template-columns:repeat(2,1fr)}.table-header,.time-row{grid-template-columns:80px repeat(auto-fit,minmax(80px,1fr))}.table-header .time-column,.table-header .zone-column,.time-row .time-column,.time-row .zone-column{padding:.5rem;font-size:.8rem}.planner-controls{flex-direction:column}.ideal-times-list{grid-template-columns:1fr}}@media (max-width: 480px){.world-clock-grid{grid-template-columns:1fr}.clock-time{font-size:1.75rem}}