.converter-page { --text2:#a9abc0; }
.converter-wrap { width:min(960px,calc(100% - 40px)); margin-inline:auto; }
.converter-hero { padding:108px 0 32px; text-align:center; }
.converter-kicker { font:600 13px var(--mono); color:var(--accent); letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; }
.converter-hero h1 { font-size:clamp(36px,6vw,66px); line-height:1.06; letter-spacing:-.045em; text-wrap:balance; }
.converter-hero p:last-child { max-width:720px; margin:auto; color:var(--text2); font-size:18px; line-height:1.65; }
.converter-card { border:1px solid #293343; border-radius:24px; padding:32px; background:linear-gradient(140deg,#10212c,#101019 55%); box-shadow:0 24px 70px #0003; }
.converter-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.converter-toolbar label { font-weight:600; }
.unit-toggle { display:flex; border:1px solid var(--border2); padding:4px; border-radius:10px; gap:4px; }
.unit-toggle label { cursor:pointer; position:relative; }
.unit-toggle input { position:absolute; opacity:0; width:100%; height:100%; }
.unit-toggle span { display:block; padding:8px 16px; border-radius:6px; font:600 14px var(--mono); }
.unit-toggle input:checked + span { background:var(--accent); color:#061016; }
.unit-toggle input:focus-visible + span { outline:2px solid white; outline-offset:2px; }
.timestamp-entry { display:flex; align-items:center; gap:12px; background:#080d14; border:1px solid #35465b; border-radius:14px; padding:12px; }
.timestamp-entry:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px #00b2eb20; }
.timestamp-entry input { min-width:0; width:100%; border:0; outline:none; background:transparent; color:#c6f4ff; font:500 clamp(22px,4vw,42px)/1.5 var(--mono); padding:8px; }
.converter-card button,.converter-info-button { min-height:44px; padding:10px 15px; border:1px solid #334153; border-radius:9px; background:#182332; color:var(--text); font:600 13px var(--sans); cursor:pointer; white-space:nowrap; }
.converter-card button:hover { background:#243449; }
.converter-card button:disabled { opacity:.4; cursor:default; }
.converter-card button:focus-visible,.converter-info-button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.converter-helper { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:14px; color:var(--text2); font-size:13px; }
.converter-error { min-height:24px; color:#ffa9ad; font-size:14px; margin:10px 0; }
.converter-results { border-top:1px solid var(--border2); }
.converter-result { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; padding:22px 0; border-bottom:1px solid var(--border2); }
.converter-result h3 { font-size:13px; font-weight:500; color:var(--text2); }
.converter-result output { display:block; font:500 clamp(14px,2.2vw,20px)/1.6 var(--mono); overflow-wrap:anywhere; user-select:all; }
.converter-result button { grid-column:2; grid-row:1 / 3; align-self:center; }
.converter-privacy { color:var(--text2); font-size:13px; margin-top:20px; }
.copy-status { min-height:22px; font-size:13px; color:var(--accent); overflow-wrap:anywhere; margin-top:10px; }
.converter-promo { padding:80px 0; }
.converter-promo h2,.converter-explainer h2 { font-size:clamp(28px,4vw,42px); line-height:1.15; letter-spacing:-.035em; margin-bottom:20px; }
.converter-promo > p,.converter-explainer p { color:var(--text2); line-height:1.75; }
.converter-benefits { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:32px 0; list-style:none; padding:0; }
.converter-benefits li { border-top:1px solid var(--border2); padding-top:20px; }
.converter-benefits strong { display:block; margin-bottom:8px; }
.converter-benefits p { color:var(--text2); font-size:15px; line-height:1.6; }
.converter-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.converter-actions img { display:block; width:195px; height:50px; }
.converter-info-button { text-decoration:none; display:inline-flex; align-items:center; min-height:50px; }
.converter-explainer { padding-bottom:72px; }
.converter-explainer h3 { margin:28px 0 12px; }
@media(max-width:600px) {
 .converter-hero { padding-top:64px; }
 .converter-card { padding:20px 16px; border-radius:18px; }
 .timestamp-entry { flex-wrap:wrap; }
 .timestamp-entry input { flex:1 1 100%; padding:4px; }
 .timestamp-entry button { margin-left:auto; }
 .converter-helper { align-items:flex-start; }
 .converter-benefits { grid-template-columns:1fr; }
 .converter-result { gap:8px; }
 .converter-result button { padding:8px; font-size:12px; }
}

@media(max-width:600px) {
 .converter-toolbar { flex-wrap:wrap; }
 .unit-toggle { margin-left:auto; }
 .unit-toggle span { padding:8px 12px; }
 .timestamp-entry input { font-size:clamp(19px,5.4vw,28px); }
 .converter-result { grid-template-columns:minmax(0,1fr); }
 .converter-result button { grid-column:1; grid-row:3; justify-self:end; }
}

/* Both faces share a grid cell so the turn never causes a layout jump. */
.converter-direction { display:flex; justify-content:center; gap:4px; margin:0 auto 24px; padding:5px; border:1px solid var(--border2); border-radius:12px; width:fit-content; background:var(--bg2); }
.converter-direction button { padding:12px 20px; border:0; border-radius:8px; color:var(--text2); background:transparent; font:600 14px var(--sans); cursor:pointer; min-height:44px; }
.converter-direction button[aria-pressed="true"] { background:var(--accent); color:#071016; }
.converter-direction button:focus-visible { outline:2px solid white; outline-offset:2px; }
.converter-scene { perspective:1600px; }
.converter-flipper { display:grid; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.22,.7,.2,1); }
.converter-flipper.is-reversed { transform:rotateY(180deg); }
.converter-front,.converter-back { grid-area:1 / 1; min-width:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.converter-back { transform:rotateY(180deg); }
.converter-card[aria-hidden="true"] { pointer-events:none; }
.converter-back .timestamp-entry input { font-size:clamp(17px,2.8vw,28px); }
.date-zone { font:12px var(--mono); color:var(--accent); }
@media(max-width:600px) { .converter-direction button { padding:12px 14px; font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .converter-flipper { transition:none; } }

#date-zone-label { margin:-4px 0 14px; overflow-wrap:anywhere; }

.converter-precision-note { display:block; margin-top:8px; }