#datetime-unixtime-converter { color:#182b45; }
.unixtime-converter { overflow:hidden; border:1px solid #dfe6ef; border-radius:16px; background:#fff; box-shadow:0 8px 28px rgba(31,55,88,.06); }
.unixtime-form { padding:22px; border-bottom:1px solid #e3e9f0; background:#f6f9fd; }
.unixtime-form>label { display:block; margin-bottom:7px; color:#43536a; font-size:13px; font-weight:700; }
.unixtime-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; }
.unixtime-input-row input { width:100%; min-width:0; min-height:50px; padding:11px 14px; border:1px solid #cbd6e3; border-radius:9px; background:#fff; color:#172033; font:600 1rem/1.4 Consolas,Monaco,'Courier New',monospace; }
.unixtime-input-row input[aria-invalid="true"] { border-color:#dc3545; }
.unixtime-input-row input:focus,.unixtime-button:focus-visible,.unixtime-copy-button:focus-visible { border-color:#2563eb; outline:3px solid rgba(37,99,235,.18); outline-offset:2px; }
.unixtime-button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border:1px solid #cbd6e3; border-radius:9px; background:#fff; color:#43536a; font-weight:700; white-space:nowrap; }
.unixtime-button-primary { border-color:#2563eb; background:#2563eb; color:#fff; }
.unixtime-button .material-icons { font-size:18px; }
#unixtime-input-help { margin:7px 0 0; color:#64748b; font-size:12px; }
.unixtime-error { min-height:1.35em; margin:4px 0 -1.35em; color:#b42332; font-size:12px; }
.unixtime-error:empty { visibility:hidden; }
.unixtime-results { padding:22px; }
.unixtime-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:14px; }
.unixtime-section-heading h2 { margin:1px 0 0; font-size:20px; }
.unixtime-section-heading>p { margin:0; color:#087f5b; font-size:13px; font-weight:700; }
.unixtime-section-heading>p.is-error { color:#b42332; }
.unixtime-eyebrow { margin:0; color:#2563eb; font-size:10px; font-weight:800; letter-spacing:.12em; }
.unixtime-result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.unixtime-result-card { min-width:0; padding:15px; border:1px solid #dfe6ef; border-radius:11px; background:#fff; }
.unixtime-result-card:first-child { grid-column:1/-1; background:#f8faff; }
.unixtime-result-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.unixtime-result-header h3 { margin:0; color:#52657d; font-size:12px; }
.unixtime-copy-button { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; padding:0; border:1px solid #d8e0ea; border-radius:8px; background:#f7f9fc; color:#52657d; }
.unixtime-copy-button:hover:not(:disabled) { border-color:#8ab0f8; color:#2563eb; }
.unixtime-copy-button:disabled { cursor:not-allowed; opacity:.42; }
.unixtime-copy-button .material-icons { font-size:17px; }
.unixtime-result-card output { display:block; min-height:1.6em; overflow-wrap:anywhere; margin-top:9px; color:#123d73; font:700 .98rem/1.55 Consolas,Monaco,'Courier New',monospace; }
.unixtime-result-card:first-child output { font-size:1.3rem; }
.unixtime-current { display:grid; grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr); gap:22px; align-items:center; margin:0 22px 20px; padding:18px; border-radius:12px; background:#172f4d; color:#fff; }
.unixtime-current h2 { margin:2px 0 4px; font-size:18px; }
.unixtime-current>div>p:last-child { margin:0; color:#b9cae0; font-size:12px; }
.unixtime-current dl { display:grid; gap:7px; margin:0; }
.unixtime-current dl>div { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:baseline; }
.unixtime-current dt { color:#b9cae0; font-size:11px; font-weight:700; }
.unixtime-current dd { min-width:0; margin:0; overflow-wrap:anywhere; font:700 .92rem/1.5 Consolas,Monaco,'Courier New',monospace; }
.unixtime-privacy { display:flex; align-items:center; gap:6px; margin:0; padding:11px 22px 16px; border-top:1px solid #e7ecf2; color:#64748b; font-size:12px; }
.unixtime-privacy .material-icons { font-size:16px; }
.unixtime-formats { margin-top:42px; }
.unixtime-formats h2 { margin-bottom:4px; font-size:21px; }
.unixtime-formats>p { margin-top:0; color:#52657d; }
.unixtime-format-table-wrap { overflow-x:auto; border:1px solid #dfe6ef; border-radius:12px; }
.unixtime-formats table { width:100%; border-collapse:collapse; }
.unixtime-formats th,.unixtime-formats td { padding:10px 15px; border-bottom:1px solid #e8edf3; text-align:start; }
.unixtime-formats th { width:32%; background:#f5f8fc; color:#52657d; font-size:12px; }
.unixtime-formats td { font-size:13px; }
.unixtime-formats tr:last-child th,.unixtime-formats tr:last-child td { border-bottom:0; }
.unixtime-formats code { font-family:Consolas,Monaco,'Courier New',monospace; }

@media (max-width:760px) {
  .unixtime-form { padding:18px; }
  .unixtime-input-row { grid-template-columns:1fr 1fr; }
  .unixtime-input-row input { grid-column:1/-1; }
  .unixtime-results { padding:18px; }
  .unixtime-result-grid { grid-template-columns:1fr; }
  .unixtime-result-card:first-child { grid-column:auto; }
  .unixtime-current { grid-template-columns:1fr; margin:0 18px 18px; }
  .unixtime-current dl>div { grid-template-columns:90px minmax(0,1fr); }
  .unixtime-privacy { padding:11px 18px 15px; }
}

@media (max-width:430px) {
  .unixtime-input-row { grid-template-columns:1fr; }
  .unixtime-input-row input { grid-column:auto; }
  .unixtime-section-heading { align-items:flex-start; flex-direction:column; }
}