/* ============================================================
   Time Calculator Pro — Stylesheet
   Aesthetic: Deep navy · Teal accent · Industrial precision
   Fonts: Syne (display) · IBM Plex Mono (data) · Outfit (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=IBM+Plex+Mono:wght@400;600&family=Outfit:wght@300;400;500&display=swap');

/* ── Variables ────────────────────────────────────────────── */
.tcp-wrapper {
  --tcp-bg:          #0d1117;
  --tcp-bg2:         #161b22;
  --tcp-bg3:         #1c2333;
  --tcp-border:      #30363d;
  --tcp-teal:        #2dd4bf;
  --tcp-teal-dark:   #0d9488;
  --tcp-teal-glow:   rgba(45,212,191,0.15);
  --tcp-amber:       #fbbf24;
  --tcp-red:         #f87171;
  --tcp-text:        #e6edf3;
  --tcp-text-muted:  #8b949e;
  --tcp-text-dim:    #484f58;
  --tcp-radius:      16px;
  --tcp-radius-sm:   10px;
  --tcp-radius-xs:   6px;
  --tcp-shadow:      0 24px 64px rgba(0,0,0,0.5);
  --tcp-font-display: 'Syne', sans-serif;
  --tcp-font-mono:    'IBM Plex Mono', monospace;
  --tcp-font-body:    'Outfit', sans-serif;
}

/* ── Base ─────────────────────────────────────────────────── */
.tcp-wrapper {
  font-family: var(--tcp-font-body);
  color: var(--tcp-text);
  background: var(--tcp-bg);
  border-radius: var(--tcp-radius);
  box-shadow: var(--tcp-shadow);
  max-width: 620px;
  margin: 0 auto 2rem;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--tcp-border);
}

.tcp-wrapper *, .tcp-wrapper *::before, .tcp-wrapper *::after {
  box-sizing: border-box;
}

/* ── Header ───────────────────────────────────────────────── */
.tcp-header {
  background: linear-gradient(135deg, #0d1117 0%, #1a2744 60%, #0d2535 100%);
  padding: 2.25rem 2rem 1.75rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--tcp-border);
  overflow: hidden;
}

.tcp-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(45,212,191,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Animated tick marks behind header */
.tcp-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tcp-teal), transparent);
  opacity: 0.6;
}

.tcp-header-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 0.5rem;
  animation: tcp-tick 2s steps(2) infinite;
}

@keyframes tcp-tick {
  0%   { transform: rotate(-3deg); }
  50%  { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}

.tcp-title {
  font-family: var(--tcp-font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--tcp-text);
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
}

.tcp-title span { color: var(--tcp-teal); }

.tcp-subtitle {
  font-size: 0.82rem;
  color: var(--tcp-text-muted);
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.tcp-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--tcp-bg2);
  border-bottom: 1px solid var(--tcp-border);
}

.tcp-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0.85rem 0.5rem;
  border: none;
  background: transparent;
  font-family: var(--tcp-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--tcp-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}

.tcp-tab:hover {
  color: var(--tcp-teal);
  background: var(--tcp-teal-glow);
}

.tcp-tab--active {
  color: var(--tcp-teal);
  border-bottom-color: var(--tcp-teal);
  background: var(--tcp-bg3);
}

.tcp-tab-icon { font-size: 1.1rem; }
.tcp-tab-label { white-space: nowrap; }

/* ── Panels ───────────────────────────────────────────────── */
.tcp-panel {
  display: none;
  padding: 1.75rem 2rem;
  animation: tcp-fade 0.3s ease;
}
.tcp-panel--active { display: block; }

@keyframes tcp-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tcp-panel-desc {
  font-size: 0.85rem;
  color: var(--tcp-text-muted);
  margin: 0 0 1.25rem;
}

/* ── Inputs (shared) ──────────────────────────────────────── */
.tcp-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--tcp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
}

.tcp-input {
  width: 100%;
  background: var(--tcp-bg3);
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-xs);
  color: var(--tcp-text);
  font-family: var(--tcp-font-mono);
  font-size: 1rem;
  padding: 0.65rem 0.6rem;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
}

.tcp-input::-webkit-outer-spin-button,
.tcp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tcp-input::placeholder { color: var(--tcp-text-dim); }

.tcp-input:focus {
  border-color: var(--tcp-teal);
  box-shadow: 0 0 0 3px var(--tcp-teal-glow);
}

.tcp-input--lg { font-size: 1.2rem; padding: 0.75rem 0.75rem; }

.tcp-unit-label {
  display: block;
  font-size: 0.65rem;
  color: var(--tcp-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin-top: 3px;
}

.tcp-unit-label--lg { font-size: 0.75rem; }

/* ── HMS group (shared) ───────────────────────────────────── */
.tcp-hms-group {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}

.tcp-hms-field { display: flex; flex-direction: column; flex: 1; }

.tcp-colon {
  font-family: var(--tcp-font-mono);
  font-size: 1.4rem;
  color: var(--tcp-teal);
  padding-top: 0.45rem;
  line-height: 1;
}

.tcp-colon--lg { font-size: 1.8rem; padding-top: 0.5rem; }

/* ── Panel 1: Add/Subtract rows ───────────────────────────── */
.tcp-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }

.tcp-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--tcp-bg2);
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-sm);
  padding: 12px;
  transition: border-color 0.2s;
  position: relative;
}

.tcp-row:hover { border-color: var(--tcp-teal); }

.tcp-row-op {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--tcp-font-mono);
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 4px;
}

.tcp-row-op--add  { background: rgba(45,212,191,0.15); color: var(--tcp-teal); }
.tcp-row-op--sub  { background: rgba(248,113,113,0.15); color: var(--tcp-red); }

.tcp-remove-row {
  background: none;
  border: 1px solid var(--tcp-border);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: var(--tcp-text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

.tcp-remove-row:hover { background: rgba(248,113,113,0.15); border-color: var(--tcp-red); color: var(--tcp-red); }

.tcp-row-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.tcp-add-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.6rem 1rem;
  border-radius: var(--tcp-radius-xs);
  border: 1px dashed var(--tcp-teal);
  background: var(--tcp-teal-glow);
  color: var(--tcp-teal);
  font-family: var(--tcp-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.tcp-add-row:hover { background: rgba(45,212,191,0.25); }

.tcp-add-row--sub {
  border-color: var(--tcp-red);
  background: rgba(248,113,113,0.08);
  color: var(--tcp-red);
}

.tcp-add-row--sub:hover { background: rgba(248,113,113,0.2); }

/* ── Panel 2: Between ─────────────────────────────────────── */
.tcp-between-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1.25rem;
}

.tcp-time-block {
  background: var(--tcp-bg2);
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-sm);
  padding: 1rem;
}

.tcp-block-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--tcp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.tcp-block-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.tcp-block-dot--start { background: var(--tcp-teal); }
.tcp-block-dot--end   { background: var(--tcp-amber); }

.tcp-time-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.tcp-between-arrow {
  text-align: center;
  color: var(--tcp-teal);
  font-size: 1.2rem;
  font-weight: 600;
  opacity: 0.6;
  margin: -4px 0;
}

.tcp-period-toggle {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-xs);
  overflow: hidden;
  flex-shrink: 0;
}

.tcp-period-btn {
  background: none;
  border: none;
  color: var(--tcp-text-muted);
  font-family: var(--tcp-font-mono);
  font-size: 0.7rem;
  padding: 5px 8px;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.tcp-period-btn--active {
  background: var(--tcp-teal);
  color: var(--tcp-bg);
  font-weight: 600;
}

/* ── Panel 3: Convert ─────────────────────────────────────── */
.tcp-convert-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  margin-bottom: 1.25rem;
  align-items: end;
}

.tcp-convert-field { display: flex; flex-direction: column; }

.tcp-select {
  width: 100%;
  background: var(--tcp-bg3);
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-xs);
  color: var(--tcp-text);
  font-family: var(--tcp-font-body);
  font-size: 0.9rem;
  padding: 0.65rem 0.75rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b949e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 2rem;
}

.tcp-select:focus { border-color: var(--tcp-teal); box-shadow: 0 0 0 3px var(--tcp-teal-glow); }

.tcp-swap-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
}

.tcp-swap-btn {
  background: var(--tcp-bg3);
  border: 1px solid var(--tcp-border);
  border-radius: 50%;
  width: 36px; height: 36px;
  color: var(--tcp-teal);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tcp-swap-btn:hover { background: var(--tcp-teal); color: var(--tcp-bg); transform: rotate(180deg); }

/* ── Panel 4: Decimal ─────────────────────────────────────── */
.tcp-decimal-grid {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 1.25rem;
}

/* ── Calculate button ─────────────────────────────────────── */
.tcp-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--tcp-teal-dark), var(--tcp-teal));
  border: none;
  border-radius: var(--tcp-radius-sm);
  font-family: var(--tcp-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tcp-bg);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
  box-shadow: 0 4px 20px rgba(45,212,191,0.3);
}

.tcp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(45,212,191,0.45);
}

.tcp-btn:active { transform: translateY(0); }
.tcp-btn-icon { font-size: 1.1rem; }

/* ── Error ────────────────────────────────────────────────── */
.tcp-error {
  display: none;
  margin: 0 2rem 1rem;
  padding: 0.7rem 1rem;
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--tcp-radius-xs);
  color: var(--tcp-red);
  font-size: 0.85rem;
}
.tcp-error--show { display: block; }

/* ── Loading ──────────────────────────────────────────────── */
.tcp-loading {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(13,17,23,0.88);
  z-index: 20;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--tcp-teal);
  backdrop-filter: blur(4px);
}
.tcp-loading--show { display: flex; }

.tcp-loading-ring {
  width: 40px; height: 40px;
  border: 3px solid var(--tcp-border);
  border-top-color: var(--tcp-teal);
  border-radius: 50%;
  animation: tcp-spin 0.8s linear infinite;
}

@keyframes tcp-spin { to { transform: rotate(360deg); } }

/* ── Result ───────────────────────────────────────────────── */
.tcp-result {
  display: none;
  padding: 1.75rem 2rem;
  animation: tcp-fade 0.4s ease;
}
.tcp-result--show { display: block; }

.tcp-result-hms,
.tcp-result-convert,
.tcp-result-decimal { display: none; }
.tcp-result-hms.tcp-active,
.tcp-result-convert.tcp-active,
.tcp-result-decimal.tcp-active { display: block; }

/* Clock display */
.tcp-result-clock {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.tcp-result-display {
  font-family: var(--tcp-font-mono);
  font-size: 3rem;
  font-weight: 600;
  color: var(--tcp-teal);
  text-align: center;
  letter-spacing: 0.05em;
  text-shadow: 0 0 30px rgba(45,212,191,0.35);
  margin-bottom: 0.4rem;
  animation: tcp-glow-in 0.6s ease;
}

@keyframes tcp-glow-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.tcp-result-display--negative { color: var(--tcp-red); text-shadow: 0 0 30px rgba(248,113,113,0.35); }

.tcp-result-word {
  text-align: center;
  font-size: 0.82rem;
  color: var(--tcp-text-muted);
  margin-bottom: 1.25rem;
  font-family: var(--tcp-font-mono);
}

/* Meta cards */
.tcp-result-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1rem;
}

.tcp-meta-card {
  background: var(--tcp-bg2);
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-sm);
  padding: 0.9rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tcp-meta-val {
  font-family: var(--tcp-font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--tcp-text);
  line-height: 1;
}

.tcp-meta-label {
  font-size: 0.7rem;
  color: var(--tcp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Also row */
.tcp-result-also {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--tcp-text-muted);
  background: var(--tcp-bg2);
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.tcp-also-item strong { color: var(--tcp-text); font-family: var(--tcp-font-mono); }
.tcp-also-sep { color: var(--tcp-text-dim); }

/* Convert result */
.tcp-convert-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: var(--tcp-bg2);
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-sm);
  margin-bottom: 1rem;
}

.tcp-eq-from, .tcp-eq-to {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tcp-eq-from .tcp-eq-val,
.tcp-eq-to .tcp-eq-val {
  font-family: var(--tcp-font-mono);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--tcp-teal);
}

.tcp-eq-to .tcp-eq-val { color: var(--tcp-amber); }

.tcp-eq-from .tcp-eq-unit,
.tcp-eq-to .tcp-eq-unit {
  font-size: 0.75rem;
  color: var(--tcp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.tcp-eq-arrow {
  font-size: 1.5rem;
  color: var(--tcp-text-dim);
}

/* Decimal result */
.tcp-decimal-equation {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--tcp-bg2);
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-sm);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.tcp-dec-input {
  font-family: var(--tcp-font-mono);
  font-size: 1.1rem;
  color: var(--tcp-text-muted);
}

.tcp-dec-equals { color: var(--tcp-text-dim); font-size: 1.4rem; }

.tcp-dec-output {
  font-family: var(--tcp-font-mono);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--tcp-teal);
  text-shadow: 0 0 20px rgba(45,212,191,0.3);
}

.tcp-dec-unit {
  font-size: 0.9rem;
  color: var(--tcp-text-muted);
  align-self: flex-end;
  margin-bottom: 6px;
}

.tcp-dec-explain {
  text-align: center;
  font-size: 0.82rem;
  color: var(--tcp-text-muted);
  margin: 0 0 1rem;
}

/* Reset button */
.tcp-reset-btn {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid var(--tcp-border);
  border-radius: var(--tcp-radius-xs);
  padding: 0.6rem;
  color: var(--tcp-text-muted);
  font-family: var(--tcp-font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.tcp-reset-btn:hover { border-color: var(--tcp-teal); color: var(--tcp-teal); background: var(--tcp-teal-glow); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 520px) {
  .tcp-tabs { grid-template-columns: repeat(2, 1fr); }
  .tcp-panel { padding: 1.25rem; }
  .tcp-result { padding: 1.25rem; }
  .tcp-result-display { font-size: 2.2rem; }
  .tcp-title { font-size: 1.6rem; }
  .tcp-convert-grid { grid-template-columns: 1fr; }
  .tcp-swap-wrap { transform: rotate(90deg); }
  .tcp-decimal-grid { flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .tcp-result-meta { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .tcp-meta-val { font-size: 1.2rem; }
}