.live-time-card{background:linear-gradient(135deg, #667eea, #764ba2);border-radius:28px;padding:24px;margin-bottom:32px;color:white;box-shadow:0 15px 35px -10px rgba(102,126,234,0.3)}.live-time-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:0.8rem;opacity:0.9}.live-time-status{background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:30px;font-size:0.7rem}.live-time-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px}.live-time-item{text-align:center}.live-time-label{font-size:0.7rem;opacity:0.8;margin-bottom:8px}.live-time-value{font-size:1.5rem;font-weight:700;font-family:monospace;letter-spacing:1px}.live-time-date{font-size:0.7rem;opacity:0.7;margin-top:6px}.converter-tabs{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap;background:var(--gray-50);padding:8px;border-radius:60px}.converter-tab{flex:1;background:transparent;border:none;padding:12px 20px;cursor:pointer;transition:all 0.3s;border-radius:50px;text-align:center;min-width:120px}.converter-tab i{font-size:1.1rem;margin-right:8px}.converter-tab span{font-weight:500}.converter-tab small{display:block;font-size:0.65rem;color:var(--gray-400);margin-top:4px}.converter-tab.active{background:white;box-shadow:0 4px 15px rgba(0,0,0,0.08)}.converter-tab.active i,.converter-tab.active span{color:var(--primary-color)}.input-card,.output-card{background:white;border-radius:24px;padding:20px;margin-bottom:20px;border:1px solid var(--gray-200);transition:all 0.3s}.input-card:hover,.output-card:hover{box-shadow:0 8px 25px rgba(0,0,0,0.05)}.input-header,.output-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:600;color:var(--gray-700)}.output-header{justify-content:space-between}.input-group{display:flex;gap:12px;flex-wrap:wrap}.datetime-input{flex:1;padding:12px 16px;border:1px solid var(--gray-300);border-radius:16px;font-size:0.9rem;background:var(--gray-50)}.number-input{flex:1;padding:12px 16px;border:1px solid var(--gray-300);border-radius:16px;font-size:0.9rem}.unit-select{padding:12px 16px;border:1px solid var(--gray-300);border-radius:16px;background:white}.input-btn{background:var(--gray-100);border:1px solid var(--gray-200);padding:12px 20px;border-radius:16px;cursor:pointer;transition:all 0.2s}.input-btn:hover{background:var(--primary-color);color:white;border-color:var(--primary-color)}.output-value{font-size:1.4rem;font-weight:700;color:var(--primary-color);font-family:monospace;margin-bottom:8px}.output-format{font-size:0.7rem;color:var(--gray-400)}.copy-btn{background:transparent;border:none;cursor:pointer;color:var(--gray-400);padding:6px 10px;border-radius:30px;transition:all 0.2s}.copy-btn:hover{background:var(--gray-100);color:var(--primary-color)}.two-way-converter{display:grid;grid-template-columns:1fr 1fr;gap:24px}.convert-card{background:white;border-radius:24px;padding:20px;border:1px solid var(--gray-200)}.convert-btn{width:100%;background:linear-gradient(135deg, var(--primary-color), var(--primary-dark));color:white;border:none;padding:12px;border-radius:40px;margin:16px 0;cursor:pointer;transition:all 0.3s}.convert-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(59,130,246,0.3)}.output-preview{background:var(--gray-50);border-radius:16px;padding:16px;font-family:monospace;font-size:1rem;text-align:center;word-break:break-all;color:var(--gray-800)}.copy-result-btn{width:100%;background:transparent;border:1px solid var(--gray-300);padding:8px;border-radius:30px;margin-top:12px;cursor:pointer;transition:all 0.2s}.copy-result-btn:hover{background:var(--gray-100);color:var(--primary-color)}.timezone-converter{background:white;border-radius:24px;padding:20px;border:1px solid var(--gray-200)}.timezone-input-group{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.timezone-select{width:100%;padding:12px 16px;border:1px solid var(--gray-300);border-radius:16px;background:white}.timezone-datetime{margin-bottom:20px}.full-width{width:100%}.convert-timezone-btn{width:100%;background:linear-gradient(135deg, var(--primary-color), var(--primary-dark));color:white;border:none;padding:14px;border-radius:50px;margin-bottom:20px;cursor:pointer;font-size:1rem;transition:all 0.3s}.convert-timezone-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(59,130,246,0.3)}@media (max-width:900px){.live-time-grid{grid-template-columns:1fr;gap:16px}.converter-tabs{flex-direction:column;border-radius:20px}.two-way-converter{grid-template-columns:1fr}.timezone-input-group{grid-template-columns:1fr}}@media (max-width:480px){.input-group{flex-direction:column}.live-time-value{font-size:1.1rem}}