[data-panel][hidden] { display: none !important; }
[data-panel]:not([hidden]) { display: block; }

.badge.online {
  color: var(--safe);
  border-color: #b9dfca;
  background: #edfbf3;
}

.notice.info {
  border-color: #bcdad5;
  background: #eff9f7;
  color: var(--primary-dark);
}

.notice.warn {
  border-color: #f0d49b;
  background: #fff9ea;
  color: #714500;
}

.result-kicker {
  margin-bottom: 5px;
  color: var(--safe);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .05em;
}

.warning-text { color: var(--warn); }
.result-title, .pending-title { margin-bottom: 10px; overflow-wrap: anywhere; }
.result-row { margin-bottom: 7px; color: var(--muted); overflow-wrap: anywhere; }
.result-label { color: var(--ink); font-weight: 760; }

.continue-button {
  width: 100%;
  margin: 0 0 13px;
}

.unknown-jan-line {
  margin-bottom: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #fff8e8;
  color: var(--warn);
  font-weight: 760;
}

.provisional-grid {
  display: grid;
  gap: 10px;
  margin: 15px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f8fbfa;
}

.provisional-grid label {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 700;
}

.provisional-grid input { margin-top: 5px; }

.pending-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f9fbfa;
}

.pending-photo {
  display: block;
  width: min(100%, 280px);
  max-height: 220px;
  object-fit: contain;
  margin-top: 10px;
  border-radius: 10px;
  background: white;
}

.empty-state {
  padding: 28px 10px;
  color: var(--muted);
  text-align: center;
}

dialog {
  width: min(calc(100% - 30px), 430px);
  padding: 20px;
  border: 0;
  border-radius: 18px;
  color: var(--ink);
  box-shadow: 0 25px 70px rgba(0,0,0,.24);
}

dialog::backdrop { background: rgba(9,33,29,.62); }