/* Unix Timestamp Converter — tool-specific only. The buttons (.btn-primary /
   .btn-secondary / .btn-copy), .error-card and inline-code styling come from
   css/categories/code-tool.css; the body font from css/lang/{lang}.css. */

/* Live "current Unix time" clock */
.now-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.now-item {
  flex: 1 1 200px;
  background: #f0f6ff;
  border: 1px solid #c5ddf9;
  border-radius: 8px;
  padding: 14px 16px;
}
.now-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7f96;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.now-value {
  margin: 4px 0 10px;
  font-family: 'Consolas', 'D2Coding', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #0b4a80;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.now-readable {
  margin-top: 12px;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* Input rows */
.ts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.ts-row input {
  flex: 1 1 240px;
  min-width: 0;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Consolas', 'D2Coding', monospace;
  font-size: 14px;
  color: #1a1a1a;
  outline: none;
}
.ts-row input:focus { border-color: #0078d4; }
.ts-row select {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #333;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.ts-row select:focus { border-color: #0078d4; }

.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Result lines */
.result-list { margin-top: 14px; }
.result-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #eee;
}
.result-row:first-child { border-top: none; }
.result-label {
  flex: 0 0 140px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
}
.result-value {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 14px;
  color: #1a1a1a;
  word-break: break-word;
}
.result-value.mono {
  font-family: 'Consolas', 'D2Coding', monospace;
  font-variant-numeric: tabular-nums;
}
.result-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #999;
}
.result-note-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #999;
}

@media (max-width: 480px) {
  .now-value { font-size: 18px; }
  .result-label { flex: 1 1 100%; }
}