/* TTB Timestamp Converter styles */
.ttb-tool {
  max-width: 960px;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.04);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
}
.ttb-header h2 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; }
.ttb-sub { margin: 0 0 16px; color: #6b7280; }
.ttb-section { margin-top: 16px; }
.ttb-label { display:block; font-weight:600; margin-bottom:6px; }
.ttb-input, .ttb-textarea {
  width: 100%; padding: 10px 12px; border:1px solid #d1d5db; border-radius:12px;
  font-size: 0.95rem; background:#f9fafb; color:#111827; outline:none; transition: box-shadow .15s,border-color .15s, background .15s;
}
.ttb-input:focus, .ttb-textarea:focus { border-color:#3b82f6; background:#fff; box-shadow:0 0 0 4px rgba(59,130,246,.15); }
.ttb-textarea { resize: vertical; }
.ttb-row { display:flex; gap:18px; flex-wrap:wrap; }
.ttb-col { flex:1 1 360px; min-width: 300px; }
.ttb-inline { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.ttb-radio { display:flex; align-items:center; gap:6px; font-size: 0.95rem; color:#374151; }
.ttb-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.ttb-btn {
  appearance:none; border:1px solid #3b82f6; background:#3b82f6; color:#fff;
  padding:10px 14px; border-radius:999px; font-weight:600; cursor:pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 6px 18px rgba(59,130,246,.25);
}
.ttb-btn:hover { filter: brightness(1.05); }
.ttb-btn:active { transform: translateY(1px); }
.ttb-btn.alt { background:#10b981; border-color:#10b981; box-shadow:0 6px 18px rgba(16,185,129,.25); }
.ttb-btn.ghost { background:transparent; color:#374151; border-color:#d1d5db; box-shadow:none; }
.ttb-btn.copy { background:#6b7280; border-color:#6b7280; box-shadow:0 6px 18px rgba(107,114,128,.25); }
.ttb-error { margin-top: 10px; padding: 8px 12px; border:1px solid #fecaca; background:#fef2f2; color:#991b1b; border-radius:10px; }
.ttb-h3 { font-size: 1.05rem; margin: 0 0 8px; }

.ttb-output .ttb-output-row { grid-template-columns: 1fr auto; gap:10px; align-items:start; margin-bottom:12px; }
.ttb-output .ttb-output-row.two { grid-template-columns: 1fr 1fr; gap:12px; }
.ttb-date-time { display:flex; gap:10px; }
.ttb-now { border:1px dashed #e5e7eb; padding:10px; border-radius:12px; background:#f9fafb; }
.ttb-now-row { display:flex; gap:8px; padding:2px 0; align-items:center; }
.ttb-now-label { min-width: 180px; color:#374151; font-weight:600; }
.ttb-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:2px 6px; }

@media (max-width: 640px){
  .ttb-output .ttb-output-row.two { grid-template-columns: 1fr; }
  .ttb-now-label { min-width: 140px; }
}