/* ===================== إضافات صفحة حساب الفرق بين وقتين ===================== */
.time-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.time-box{
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(15,23,42,.45);
}
.time-box h2{
  font-size:1rem;
  margin:0 0 14px;
  text-align:center;
}
.time-fields{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
.time-field label{
  display:block;
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:6px;
  text-align:center;
}
.time-field input{
  width:100%;
  padding:11px 8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#0f172a;
  color:var(--text);
  font-size:1.05rem;
  text-align:center;
}
.time-field input:focus{
  outline:2px solid var(--accent);
}
.time-field input::placeholder{
  color:var(--muted);
  opacity:.7;
}
.time-hint{
  font-size:.75rem;
  color:var(--muted);
  margin-top:10px;
  line-height:1.6;
}
.time-results{
  display:none;
}
.time-result-banner{
  padding:16px;
  border-radius:12px;
  text-align:center;
  background:linear-gradient(90deg,rgba(56,189,248,.15),rgba(167,139,250,.15));
  border:1px solid var(--accent);
  font-weight:bold;
  font-size:1.1rem;
  margin-bottom:14px;
}
.time-difference-title{
  text-align:center;
  font-size:1rem;
  margin:8px 0 12px;
}
.time-result-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:10px;
  background:#0f172a;
}
.time-result-row .lbl{
  color:var(--muted);
  font-size:.85rem;
}
.time-result-row .val{
  font-weight:bold;
  font-size:1.05rem;
}
.time-note{
  font-size:.75rem;
  color:var(--muted);
  margin-top:8px;
  text-align:center;
  line-height:1.6;
}
@media (max-width:700px){
  .time-pair{grid-template-columns:1fr;}
}
@media (max-width:420px){
  .time-fields{gap:7px;}
  .time-field input{font-size:1rem;padding:10px 5px;}
}