:root{ --gap:12px; }
.card{ border-radius:14px; }
.panel-card.flash { animation: panelFlash .5s ease-in-out 1; }
@keyframes panelFlash { 0%{ box-shadow:0 0 0 4px rgba(255,255,0,.35);} 100%{ box-shadow:none; } }

.summary-row{ gap:.5rem; }
.lock-active{ background:#6c757d !important; border-color:#6c757d !important; color:#fff !important; }
.panel-locked{ opacity:.6; }

.result-inline{
  min-height:120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size:20px; padding:8px; line-height:1.7; word-wrap:break-word; white-space:normal;
}
.state-empty{ color:#6c757d; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; min-height:120px; }

.summary-badges .badge{ font-size:16px; padding:.35rem .5rem; border-radius:.5rem; }
.summary-badges .badge + .badge{ margin-left:.25rem; }

/* clearer colors for badges */
.badge-size      { background: var(--bs-primary)  !important; }
.badge-method    { background: var(--bs-info)     !important; color:#0b0f12 !important; }
.badge-dup       { background: var(--bs-warning)  !important; color:#0b0f12 !important; }
.badge-count     { background: var(--bs-success)  !important; }

/* MOBILE: badges one row + auto size + horizontal scroll if tight */
@media (max-width: 576px){
  .summary-badges{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .35rem;
    padding-bottom: 2px;
  }
  .summary-badges .badge{
    font-size: clamp(12px, 3.2vw, 16px);
    padding: clamp(2px, 0.6vw, 6px) clamp(6px, 1.6vw, 8px);
  }
}

.btn-active{ background:var(--bs-primary); border-color:var(--bs-primary); color:#fff; }
#appHeader.sticky-top { z-index: 1020; }

/* Header input 35% */
.header-input-group{ justify-content:center; gap:.25rem; }
.header-input-group .digit-input{
  flex: 0 0 35%;
  min-width: 240px;
  max-width: 520px;
}

/* Notice container: center, width 35% on desktop, full on mobile */
.notice-center{
  max-width: 35%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.notice-center .alert{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.4rem .6rem; }
.notice-chip.badge{ border-radius: 999px; font-weight: 600; }
.notice-sep{ opacity:.7; }

@media (max-width: 991.98px){
  .notice-center{ max-width: 100%; }
  main.container{ padding-bottom: 88px; } /* for sticky mobile footer */
}

@media (max-width: 480px){
  .header-input-group .digit-input{ flex: 1 1 auto; min-width: 160px; }
}

/* Input flash */
.input-flash-warn{ animation: warnFlash .8s ease-in-out 1; }
.input-flash-err{ animation: errFlash .8s ease-in-out 1; }
@keyframes warnFlash { 0%{ box-shadow:0 0 0 3px rgba(255,193,7,.5);} 100%{ box-shadow:none; } }
@keyframes errFlash  { 0%{ box-shadow:0 0 0 3px rgba(220,53,69,.55);} 100%{ box-shadow:none; } }

/* Mobile rules footer */
.mobile-rules{
  position: fixed; left:0; right:0; bottom:0; z-index: 1030;
  background: rgba(20,20,20,.95);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
  backdrop-filter: blur(4px);
}