.converter-page{max-width:900px;margin:0 auto;padding:20px}.converter-page.error{text-align:center;padding:60px 20px}.converter-page.error h1{color:var(--color-error)}.converter-page .breadcrumb{color:var(--color-text-tertiary);align-items:center;gap:8px;margin-bottom:24px;font-size:14px;display:flex}.converter-page .breadcrumb a{color:var(--color-accent);text-decoration:none}.converter-page .breadcrumb a:hover{text-decoration:underline}.converter-page .breadcrumb .separator{color:var(--color-text-tertiary)}.converter-page .breadcrumb .current{color:var(--color-text-primary);font-weight:500}.converter-hero{text-align:center;background:linear-gradient(135deg,var(--color-dawn)0%,var(--color-day)100%);border-radius:var(--radius-lg);color:#09090b;margin-bottom:32px;padding:40px 20px}.converter-hero h1{margin:0 0 12px;font-size:32px;font-weight:700}.converter-hero .hero-subtitle{opacity:.8;margin:0;font-size:18px}.current-times-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;margin-bottom:32px;display:flex}.tz-card{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-glass);flex:1;min-width:200px;max-width:280px;padding:24px 32px}.tz-abbr-badge{background:linear-gradient(135deg,var(--color-dawn),var(--color-day));color:#09090b;border-radius:20px;margin-bottom:12px;padding:6px 16px;font-size:18px;font-weight:700;display:inline-block}.tz-name{color:var(--color-text-secondary);margin-bottom:12px;font-size:14px}.tz-current-time{color:var(--color-text-primary);font-variant-numeric:tabular-nums;font-size:36px;font-weight:700}.tz-offset{color:var(--color-text-tertiary);margin-top:8px;font-size:14px}.arrow-connector{color:var(--color-day);flex-shrink:0}.converter-tool{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass);margin-bottom:32px;padding:32px}.converter-tool h2{color:var(--color-text-primary);text-align:center;margin:0 0 24px;font-size:20px}.converter-inputs{flex-wrap:wrap;justify-content:center;align-items:center;gap:32px;display:flex}.input-group,.result-group{text-align:center}.input-group label,.result-group label{color:var(--color-text-secondary);margin-bottom:12px;font-size:14px;font-weight:500;display:block}.time-input{justify-content:center;align-items:center;gap:4px;display:flex}.time-input select{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-solid);color:var(--color-text-primary);cursor:pointer;transition:border-color var(--transition-fast);padding:12px 16px;font-size:24px;font-weight:600}.time-input select:focus{border-color:var(--color-day);outline:none}.time-input .colon{color:var(--color-text-primary);font-size:24px;font-weight:600}.time-preview{color:var(--color-text-tertiary);margin-top:8px;font-size:14px}.equals-sign{color:var(--color-day);font-size:32px;font-weight:700}.result-time{color:var(--color-day);font-variant-numeric:tabular-nums;font-size:42px;font-weight:700}.day-offset{color:var(--color-dawn);margin-top:8px;font-size:14px;font-weight:500}.conversion-table-section{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:32px;padding:32px}.conversion-table-section h2{color:var(--color-text-primary);margin:0 0 20px;font-size:20px}.table-wrapper{overflow-x:auto}.conversion-table{border-collapse:collapse;background:var(--color-surface-solid);border-radius:var(--radius-md);width:100%;overflow:hidden}.conversion-table th{background:linear-gradient(135deg,var(--color-dawn),var(--color-day));color:#09090b;text-align:center;padding:16px;font-weight:600}.conversion-table td{text-align:center;border-bottom:1px solid var(--color-border);font-variant-numeric:tabular-nums;color:var(--color-text-primary);padding:14px 16px}.conversion-table tr:last-child td{border-bottom:none}.conversion-table tr:nth-child(2n){background:#ffffff05}.conversion-table tr:hover{background:#ffffff0d}.table-day-offset{color:var(--color-dawn);font-size:12px;font-weight:500}.converter-page .faq-section{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass);margin-bottom:32px;padding:32px}.converter-page .faq-section h2{color:var(--color-text-primary);margin:0 0 24px;font-size:24px}.converter-page .faq-item{border-bottom:1px solid var(--color-border);margin-bottom:20px;padding-bottom:20px}.converter-page .faq-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.converter-page .faq-item h3{color:var(--color-text-primary);margin:0 0 12px;font-size:16px;font-weight:600}.converter-page .faq-item p{color:var(--color-text-secondary);margin:0;line-height:1.6}.related-section{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:24px;padding:32px}.related-section h2{color:var(--color-text-primary);margin:0 0 20px;font-size:20px}.related-grid{flex-wrap:wrap;gap:12px;display:flex}.related-link{background:var(--color-surface-solid);color:var(--color-day);border-radius:var(--radius-sm);transition:all var(--transition-fast);border:1px solid var(--color-border);padding:10px 18px;font-size:14px;font-weight:500;text-decoration:none}.related-link:hover{background:linear-gradient(135deg,var(--color-dawn),var(--color-day));color:#09090b;border-color:#0000;transform:translateY(-2px)}.reverse-section{text-align:center;margin-bottom:32px}.reverse-link{color:var(--color-accent);align-items:center;gap:8px;font-size:16px;font-weight:500;text-decoration:none;display:inline-flex}.reverse-link:hover{text-decoration:underline}@media (max-width:768px){.converter-page{padding:16px}.converter-hero{padding:24px 16px}.converter-hero h1{font-size:24px}.current-times-row{flex-direction:column}.tz-card{width:100%;max-width:none}.arrow-connector{transform:rotate(90deg)}.converter-inputs{flex-direction:column;gap:24px}.equals-sign{transform:rotate(90deg)}.result-time{font-size:32px}.converter-tool,.conversion-table-section,.converter-page .faq-section,.related-section{padding:20px}}
