.time-intro { max-width: 1000px; }
.time-intro h1 { max-width: 940px; }

.live-clocks { margin: 58px 0 70px; padding: 24px clamp(22px, 4vw, 42px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; color: var(--paper); background: var(--ink); border-radius: 18px; }
.live-clocks article { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.live-clocks article > span { grid-column: 1 / -1; color: var(--teal); font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.live-clocks strong { font-family: var(--mono); font-size: clamp(35px, 5vw, 62px); line-height: 1; }
.live-clocks small { color: #9daba7; }
.live-clocks > i { color: var(--lime); font-family: var(--mono); font-size: 11px; font-style: normal; font-weight: 800; }

.time-workspace { display: grid; grid-template-columns: minmax(350px, .82fr) minmax(0, 1.18fr); gap: 18px; }
.time-form, .time-result { min-height: 520px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: 18px; }
.time-form { color: var(--paper); background: var(--ink-soft); }
.direction-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.time-form label { display: flex; flex-direction: column; gap: 9px; font-size: 13px; font-weight: 800; }
.zone-field { min-width: 0; position: relative; }
.zone-field:focus-within { z-index: 20; }
.zone-combobox { margin-top: 9px; position: relative; }
.zone-input { width: 100%; padding-right: 42px; font-size: 13px; }
.zone-chevron { position: absolute; top: 50%; right: 15px; color: var(--lime); font-size: 18px; line-height: 1; pointer-events: none; transform: translateY(-55%); }
.zone-options { max-height: 290px; position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; left: 0; overflow-y: auto; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 30px rgb(10 27 26 / 22%); }
.zone-option { width: 100%; min-height: 52px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
.zone-option:last-child { border-bottom: 0; }
.zone-option:hover, .zone-option.active { background: #e3f1e9; }
.zone-option strong { font-family: var(--mono); font-size: 14px; }
.zone-option small { color: #08756f; font-family: var(--mono); font-size: 10px; font-weight: 800; }
.zone-empty { margin: 0; padding: 16px 12px; color: var(--muted); font-size: 12px; }
.zone-help { margin: 12px 0 0; color: #91a09c; font-size: 11px; }
.zone-help span { color: var(--teal); font-weight: 800; }
.swap-button { width: 48px; height: 48px; color: var(--lime); background: transparent; border: 1px solid #526160; border-radius: 50%; font-size: 20px; }
.date-time-row { margin-top: 28px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.form-actions { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.secondary-button, .convert-button { min-height: 52px; padding: 11px 16px; border-radius: 9px; font-weight: 900; }
.secondary-button { color: var(--paper); background: transparent; border: 1px solid #526160; }
.convert-button { color: var(--ink); background: var(--lime); border: 0; }

.time-result { background: var(--surface); }
.day-shift { width: fit-content; margin: 50px 0 8px; padding: 6px 10px; color: #075d58; background: #d8f2e7; border-radius: 999px; font-size: 12px; font-weight: 900; }
.converted-time { display: block; font-family: var(--mono); font-size: clamp(66px, 10vw, 126px); line-height: .92; letter-spacing: -.075em; }
.converted-date { margin: 14px 0 38px; color: var(--muted); font-size: 18px; }
.conversion-line { padding: 18px 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; }
.conversion-line i { color: #0a756e; font-style: normal; }
.conversion-line span:last-child { text-align: right; }
.offset-note { margin: 22px 0 0; color: var(--muted); font-size: 13px; }

.quick-reference { margin-top: 30px; padding: clamp(28px, 5vw, 58px); display: grid; grid-template-columns: .72fr 1.28fr; gap: 50px; background: #e6e1d4; border-radius: 18px; }
.quick-reference h2 { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.06; letter-spacing: -.045em; }
.reference-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.reference-grid button { min-height: 110px; padding: 18px; position: relative; display: flex; align-items: flex-start; flex-direction: column; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.reference-grid span { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.reference-grid strong { margin-top: auto; font-family: var(--mono); font-size: 19px; }
.reference-grid small { position: absolute; right: 14px; bottom: 17px; color: #a43c34; font-weight: 800; }
.time-guide { margin-top: 18px; }

@media (max-width: 850px) {
  .time-workspace, .quick-reference { grid-template-columns: 1fr; }
  .live-clocks { grid-template-columns: 1fr; }
  .live-clocks > i { padding: 4px 0; }
}

@media (max-width: 600px) {
  .direction-row, .date-time-row, .form-actions { grid-template-columns: 1fr; }
  .swap-button { transform: rotate(90deg); }
  .time-form, .time-result { min-height: auto; }
  .reference-grid { grid-template-columns: 1fr; }
  .conversion-line { grid-template-columns: 1fr; }
  .conversion-line span:last-child { text-align: left; }
}