.tz-page {
  overflow-x: hidden;
  background: #f4f7fb;
  color: #162033;
}

.tz-hero {
  position: relative;
  overflow: hidden;
  padding: 50px 0 56px;
  background:
    radial-gradient(circle at 82% 20%, rgba(88, 153, 255, .19), transparent 30%),
    linear-gradient(135deg, #091d43 0%, #12366e 54%, #174b8f 100%);
  color: #fff;
}

.tz-hero::after {
  content: "◷";
  position: absolute;
  right: max(5vw, 28px);
  top: 4px;
  color: rgba(255, 255, 255, .055);
  font: 700 clamp(150px, 20vw, 270px)/1 sans-serif;
  transform: rotate(-8deg);
  pointer-events: none;
}

.tz-hero-inner { position: relative; z-index: 1; }
.tz-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 23px; color: #c3d6f5; font-size: 13px; }
.tz-breadcrumb a { color: #dce9ff; text-decoration: none; }
.tz-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.tz-eyebrow { margin: 0 0 8px; color: #82b8ff; font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.tz-hero h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.15; letter-spacing: -.03em; }
.tz-hero h1::after { content: "Time Zone Converter"; display: block; margin-top: 8px; color: #a9c7ee; font-size: clamp(15px, 2.2vw, 20px); font-weight: 500; letter-spacing: .08em; }
.tz-hero-inner > p:not(.tz-eyebrow) { max-width: 760px; margin: 18px 0 0; color: #d8e5f7; font-size: 16px; line-height: 1.8; }
.tz-standard-label { display: inline-flex; gap: 9px; align-items: center; margin-top: 22px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); color: #eaf2ff; font-size: 12px; }
.tz-standard-label span { width: 7px; height: 7px; border-radius: 50%; background: #72d7ad; box-shadow: 0 0 0 4px rgba(114,215,173,.14); }

.tz-main-section { padding: 44px 0 64px; }
.tz-converter { padding: clamp(22px, 4vw, 38px); border: 1px solid #e1e8f1; border-radius: 22px; background: #fff; box-shadow: 0 16px 42px rgba(18, 43, 77, .08); }
.tz-heading { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid #edf1f6; }
.tz-kicker { margin: 0 0 5px; color: #4778b7; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.tz-heading h2 { margin: 0; color: #13294b; font-size: 26px; }
.tz-live-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
.tz-live-state { display: inline-flex; gap: 8px; align-items: center; color: #67758a; font-size: 13px; font-weight: 700; }
.tz-live-state i { width: 8px; height: 8px; border-radius: 50%; background: #98a4b5; }
.tz-live-state.is-live { color: #147a51; }
.tz-live-state.is-live i { background: #25a86d; box-shadow: 0 0 0 4px rgba(37,168,109,.12); }
.tz-now-button { min-height: 38px; padding: 0 14px; border: 1px solid #c4d4e7; border-radius: 9px; background: #f5f9ff; color: #235d9e; font-weight: 750; cursor: pointer; }
.tz-now-button:hover { background: #eaf3ff; }

.tz-board { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 28px; }
.tz-zone-card { min-width: 0; padding: 24px; border: 1px solid #dce5f0; border-radius: 17px; background: linear-gradient(180deg, #fbfdff, #f7faff); }
.tz-zone-heading { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.tz-side-label { display: block; margin-bottom: 4px; color: #77849a; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.tz-zone-heading h3 { margin: 0; color: #142c50; font-size: 24px; }
.tz-offset { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #e8f1ff; color: #1858a4; font-size: 12px; font-weight: 800; }
.tz-field { display: grid; min-width: 0; gap: 8px; color: #4b5970; font-size: 13px; font-weight: 750; }
.tz-field input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 49px; padding: 0 14px; border: 1px solid #cbd6e4; border-radius: 11px; background: #fff; color: #15233a; font: inherit; font-size: 15px; font-weight: 700; transition: border-color .2s, box-shadow .2s; }
.tz-field input[type="search"] { padding-right: 10px; }
.tz-field input:focus { outline: 0; border-color: #3979c9; box-shadow: 0 0 0 4px rgba(57,121,201,.12); }
.tz-field input[aria-invalid="true"] { border-color: #c95353; box-shadow: 0 0 0 4px rgba(201,83,83,.1); }
.tz-date-time { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 12px; margin-top: 16px; }
.tz-zone-meta { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 17px; color: #66748a; font-size: 12px; }
.tz-zone-meta span { min-width: 0; overflow-wrap: anywhere; }
.tz-zone-meta strong { flex: 0 0 auto; color: #355f93; }
.tz-local-now { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #e7edf5; color: #7a8799; font-size: 12px; }
.tz-local-now time { margin-left: 5px; color: #33445d; font-weight: 800; }

.tz-swap { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #bdd0e8; border-radius: 50%; background: #edf5ff; color: #1857a4; cursor: pointer; transition: transform .22s, background .2s, border-color .2s; }
.tz-swap:hover { transform: rotate(180deg); border-color: #5d91ce; background: #e2efff; }
.tz-swap:focus-visible, .tz-now-button:focus-visible { outline: 3px solid rgba(57,121,201,.3); outline-offset: 2px; }
.tz-swap svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tz-help { margin: 14px 0 0; color: #748197; font-size: 12px; line-height: 1.7; }
.tz-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 24px; overflow: hidden; border: 1px solid #d8e4f2; border-radius: 15px; background: #d8e4f2; }
.tz-result > div { min-width: 0; padding: 18px 20px; background: #f4f8fd; }
.tz-result span { display: block; margin-bottom: 6px; color: #718096; font-size: 12px; }
.tz-result strong { display: block; color: #17355f; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.tz-message { min-height: 22px; margin: 14px 0 0; color: #68768b; font-size: 13px; }
.tz-message.is-error { color: #a43c3c; font-weight: 700; }
.tz-message.is-note { color: #8a5b12; }

.tz-trade-converter { margin-top: 24px; }
.trade-heading { align-items: center; }
.trade-intro { max-width: 760px; margin: 9px 0 0; color: #68758a; font-size: 13px; line-height: 1.75; }
.trade-status-legend { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.trade-status { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.trade-status.is-verified { background: #e4f6ed; color: #14734c; }
.trade-status.is-partial { background: #fff2d8; color: #8a5a08; }
.trade-status.is-unverified { background: #fbe7e7; color: #a13c3c; }
.trade-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 18px; margin-top: 25px; }
.trade-panel { min-width: 0; padding: 22px; border: 1px solid #dfe7f1; border-radius: 16px; background: #f9fbfe; }
.trade-panel-title { display: flex; gap: 10px; align-items: center; margin-bottom: 19px; }
.trade-panel-title > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #173b6d; color: #fff; font-size: 11px; font-weight: 900; }
.trade-panel-title h3 { margin: 0; color: #17345e; font-size: 18px; }
.trade-inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.trade-custom-panel .trade-inline-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trade-panel .tz-field + .tz-field, .trade-panel .trade-inline-fields + .tz-field { margin-top: 14px; }
.trade-panel .tz-field select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 49px; padding: 0 35px 0 14px; border: 1px solid #cbd6e4; border-radius: 11px; background: #fff; color: #15233a; font: inherit; font-size: 14px; font-weight: 700; }
.trade-panel .tz-field select:focus { outline: 0; border-color: #3979c9; box-shadow: 0 0 0 4px rgba(57,121,201,.12); }
.trade-broker-field > label { color: #4b5970; font-size: 13px; font-weight: 750; }
.trade-broker-combobox { position: relative; min-width: 0; }
.trade-broker-combobox input { padding-right: 84px; }
.trade-broker-combobox input::-webkit-search-cancel-button { display: none; }
.trade-broker-clear, .trade-broker-toggle { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 32px; height: 34px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: #50647f; cursor: pointer; }
.trade-broker-clear { right: 43px; font-size: 20px; line-height: 1; }
.trade-broker-toggle { right: 7px; font-size: 22px; font-weight: 900; transition: transform .18s; }
.trade-broker-toggle[aria-expanded="true"] { transform: translateY(-50%) rotate(180deg); }
.trade-broker-clear:hover, .trade-broker-toggle:hover { background: #edf4fc; color: #174f92; }
.trade-broker-clear:focus-visible, .trade-broker-toggle:focus-visible { outline: 3px solid rgba(57,121,201,.25); outline-offset: 1px; }
.trade-broker-clear[hidden], .trade-broker-menu[hidden] { display: none; }
.trade-broker-menu { position: absolute; top: calc(100% + 7px); right: 0; left: 0; z-index: 80; max-height: 320px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #bfcfe2; border-radius: 12px; background: #fff; box-shadow: 0 16px 36px rgba(19,47,83,.18); }
.trade-broker-option { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: #253c5c; font: inherit; font-size: 13px; font-weight: 750; text-align: left; cursor: pointer; }
.trade-broker-option:hover, .trade-broker-option.is-active { background: #edf5ff; color: #164f91; }
.trade-broker-option[aria-selected="true"] { background: #e4f0ff; color: #124d91; }
.trade-broker-option small { color: #7b899d; font-size: 10px; font-weight: 700; }
.trade-broker-empty { margin: 0; padding: 13px 11px; color: #7b8798; font-size: 12px; line-height: 1.55; }
.trade-favorite-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 2px; color: #758299; font-size: 11px; }
.trade-favorites { display: flex; flex: 1 1 180px; flex-wrap: wrap; gap: 6px; }
.trade-favorites button, .trade-pin-button { min-height: 29px; padding: 0 9px; border: 1px solid #d3dfed; border-radius: 999px; background: #fff; color: #3a5d88; font-size: 11px; font-weight: 750; cursor: pointer; }
.trade-favorites button:hover, .trade-pin-button:hover { border-color: #8baace; background: #edf5ff; }
.trade-pin-button[aria-pressed="true"] { border-color: #d4a43f; background: #fff7df; color: #8c6111; }
.trade-server-field { margin-top: 14px; }
.trade-rule-status { margin-top: 15px; padding: 14px; border: 1px solid #dbe5f0; border-radius: 12px; background: #fff; color: #5f6e83; font-size: 12px; line-height: 1.65; }
.trade-rule-status header { display: flex; gap: 9px; align-items: center; margin-bottom: 7px; }
.trade-rule-status strong { color: #213f68; }
.trade-rule-status p { margin: 5px 0 0; }
.trade-rule-status a { color: #1d63ae; font-weight: 750; text-decoration: none; }
.trade-rule-status a:hover { text-decoration: underline; }
.trade-confirm { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; color: #80550d; font-size: 12px; line-height: 1.55; }
.trade-confirm[hidden] { display: none; }
.trade-confirm input { margin-top: 3px; }
.trade-custom-panel { margin-top: 15px; padding: 16px; border: 1px dashed #b9cce2; border-radius: 13px; background: #f2f7fd; }
.trade-custom-panel h4 { margin: 0; color: #193a67; font-size: 15px; }
.trade-custom-panel > p { margin: 6px 0 14px; color: #6c7a8f; font-size: 11px; line-height: 1.6; }
.trade-time-block { padding: 16px; border: 1px solid #e0e7f0; border-radius: 13px; background: #fff; }
.trade-time-block + .trade-time-block { margin-top: 13px; }
.trade-time-block h4 { margin: 0; color: #294b77; font-size: 14px; }
.trade-time-block .trade-inline-fields { margin-top: 12px; }
.trade-convert-button { width: 100%; min-height: 48px; margin-top: 17px; border: 0; border-radius: 11px; background: #174f92; color: #fff; font-size: 15px; font-weight: 850; cursor: pointer; box-shadow: 0 8px 18px rgba(23,79,146,.18); }
.trade-convert-button:hover { background: #123f77; }
.trade-convert-button:focus-visible { outline: 3px solid rgba(57,121,201,.3); outline-offset: 2px; }
.trade-input-note { margin: 12px 0 0; color: #7a8798; font-size: 11px; line-height: 1.65; }
.trade-message { min-height: 0; margin-top: 17px; }
.trade-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 17px; }
.trade-results[hidden] { display: none; }
.trade-results > article { min-width: 0; padding: 19px; border: 1px solid #dce6f1; border-radius: 15px; background: #fff; }
.trade-result-label { color: #52729a; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.trade-results dl { margin: 13px 0 0; }
.trade-results dl > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; padding: 10px 0; border-top: 1px solid #edf1f6; }
.trade-results dt { color: #778499; font-size: 11px; }
.trade-results dd { margin: 0; color: #294567; font-size: 12px; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.trade-results .is-primary dd { color: #075eb8; font-size: 15px; }
.trade-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #d5e2f1; border-radius: 14px; background: #d5e2f1; }
.trade-summary > div { padding: 15px; background: #eef5fd; }
.trade-summary span { display: block; margin-bottom: 5px; color: #718097; font-size: 11px; }
.trade-summary strong { display: block; color: #1e426f; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }

.tz-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.tz-notes article { padding: 23px; border: 1px solid #e1e8f1; border-radius: 17px; background: #fff; }
.tz-notes article > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 15px; border-radius: 11px; background: #eaf3ff; color: #2462a8; font-size: 20px; font-weight: 800; }
.tz-notes h2 { margin: 0; color: #18365f; font-size: 17px; }
.tz-notes p { margin: 10px 0 0; color: #68758a; font-size: 13px; line-height: 1.75; }

@media (max-width: 860px) {
  .tz-board { grid-template-columns: minmax(0, 1fr); }
  .tz-swap { justify-self: center; transform: rotate(90deg); }
  .tz-swap:hover { transform: rotate(270deg); }
  .tz-result { grid-template-columns: 1fr; }
  .tz-notes { grid-template-columns: 1fr; }
  .trade-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .tz-hero { padding: 34px 0 40px; }
  .tz-hero::after { right: -36px; top: 14px; font-size: 150px; }
  .tz-hero-inner > p:not(.tz-eyebrow) { font-size: 14px; line-height: 1.7; }
  .tz-standard-label { align-items: flex-start; border-radius: 12px; line-height: 1.55; }
  .tz-standard-label span { flex: 0 0 auto; margin-top: 5px; }
  .tz-main-section { padding: 24px 0 44px; }
  .tz-converter { padding: 18px 14px; border-radius: 17px; }
  .tz-heading { display: grid; gap: 14px; padding-bottom: 18px; }
  .tz-live-tools { justify-content: flex-start; }
  .tz-board { gap: 13px; margin-top: 20px; }
  .tz-zone-card { padding: 18px 14px; border-radius: 14px; }
  .tz-date-time { grid-template-columns: 1fr; }
  .tz-result > div { padding: 15px; }
  .tz-notes { gap: 12px; margin-top: 14px; }
  .tz-notes article { padding: 19px; }
  .tz-trade-converter { margin-top: 14px; }
  .trade-status-legend { justify-content: flex-start; }
  .trade-panel { padding: 17px 14px; }
  .trade-broker-menu { max-height: min(300px, 52vh); }
  .trade-inline-fields, .trade-custom-panel .trade-inline-fields { grid-template-columns: 1fr; }
  .trade-results { grid-template-columns: 1fr; }
  .trade-summary { grid-template-columns: 1fr; }
  .trade-results dl > div { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .tz-page .ai-launcher { width: 48px; min-width: 48px; padding: 0; font-size: 0; }
  .tz-page .ai-launcher::before { margin-right: 0; }
}

@media (max-width: 390px) {
  .tz-zone-heading { gap: 8px; }
  .tz-zone-heading h3 { font-size: 21px; }
  .tz-offset { font-size: 11px; }
  .tz-live-tools { align-items: flex-start; }
}