* { box-sizing: border-box; }

/*
 * Type is declared on html/body, not on #app-root, because the four modals
 * (downloads, PIN, lot editor) are siblings of #app-root rather than children.
 * Declaring it only there left every modal falling back to the browser's
 * default serif — Times on Windows and iOS, Noto Serif on Android.
 *
 * The fallback stack matters as much as Inter itself: when the webfont is slow
 * or unavailable, a bare `sans-serif` resolves to a different face on every
 * platform. This stack keeps the metrics close.
 */
html, body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Stops iOS Safari inflating text when the phone is rotated to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Inter's heavy weights render noticeably darker on macOS/iOS without this. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: #000; }
::selection { background: #1DCD9F; color: #000; }

@keyframes drivaReveal { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drivaPulse  { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes drivaSwap   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

input, select, textarea, button { font-family: inherit; }

/*
 * iOS Safari zooms the whole page when a focused input has a font-size below
 * 16px. Desktop keeps the smaller size; touch screens get 16px.
 */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}
input:focus, textarea:focus, select:focus { outline: none; border-color: #1DCD9F !important; }
input::placeholder, textarea::placeholder { color: #5a5a5a; }

table th, table td { text-align: left; padding: 11px 8px; font-size: 13px; border-bottom: 1px solid #2c2c2c; }
table th { font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #7c7c7c; }
table td { color: #b5b5b5; }
table tr:last-child td { border-bottom: none; }

#dv-owner-btn:hover { opacity: 1 !important; }

/* modals */
.dv-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.82); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 24px;
}
.dv-modal.dv-open { display: flex !important; }
.dv-modal-inner { animation: drivaSwap .3s cubic-bezier(.16,1,.3,1); }

.dv-field { margin-bottom: 14px; }
.dv-field label {
  display: block; margin-bottom: 6px;
  font-size: 9px; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: #7c7c7c;
}
.dv-field input, .dv-field select, .dv-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: #000; border: 1px solid #2c2c2c; color: #F2F2F2; font-size: 14px;
}
.dv-field textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.dv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.dv-check {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: #000; border: 1px solid #2c2c2c;
  cursor: pointer; font-size: 13px; font-weight: 800; color: #9a9a9a;
  user-select: none; transition: all .2s;
}
.dv-check.on { border-color: #1DCD9F; color: #1DCD9F; background: rgba(29,205,159,.08); }
.dv-check-box {
  width: 16px; height: 16px; border-radius: 5px;
  border: 1px solid #3a3a3a; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 11px; color: #000; flex-shrink: 0;
}
.dv-check.on .dv-check-box { background: #1DCD9F; border-color: #1DCD9F; }

.dv-lot-card { transition: border-color .22s ease, transform .22s ease; }
.dv-lot-card.dv-editable { cursor: pointer; }
.dv-lot-card.dv-editable:hover { border-color: #1DCD9F !important; transform: translateY(-3px); }

.dv-stage-row { transition: background .28s ease, border-color .28s ease; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .dv-lot-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dv-actions  { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 860px) {
  .dv-split { grid-template-columns: 1fr !important; gap: 36px !important; }
  .dv-split > div[style*="order:2"] { order: 0 !important; }
  .dv-nav { display: none !important; }
  #dv-finals   { grid-template-columns: repeat(2, 1fr) !important; }
  #dv-gh-specs { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 680px) {
  .dv-lot-grid { grid-template-columns: 1fr !important; }
  .dv-actions  { grid-template-columns: 1fr !important; }
  .dv-header-inner { padding: 0 18px !important; }
  section { padding: 72px 0 !important; }
  section > div { padding: 0 18px !important; }
  .dv-field-row { grid-template-columns: 1fr; }
  #dv-origin-facts, #dv-cherry-stats { grid-template-columns: 1fr !important; }
}

/* ===================================================== header / nav bar ===
 * One type scale for every control in the bar. Previously the section links
 * were 12px/850, the Story|Lot Data toggle 11px/900/0.04em and the EN|ID
 * buttons 11px/900 with no tracking — three scales in one 64px strip.
 *
 * Note on weight: 850 is not one of the weights loaded from Google Fonts
 * (400,500,600,700,800,900), so browsers snapped or synthesised it and the
 * links rendered differently across platforms. 800 is a real face.
 */
.dv-navlink, .dv-viewbtn, .dv-langbtn {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .28s ease, color .28s ease;
}
.dv-navlink { padding: 8px 12px; color: #7c7c7c; }
.dv-navlink:hover { color: #F2F2F2; }
.dv-viewbtn { padding: 7px 12px; }
.dv-langbtn { padding: 7px 10px; }

/* Menu button — only shown where the inline nav is hidden. */
#dv-menu-btn {
  display: none;
  width: 30px; height: 30px; border-radius: 9px;
  align-items: center; justify-content: center;
  border: 1px solid #2c2c2c; color: #9a9a9a;
  cursor: pointer; transition: color .2s, border-color .2s;
}
#dv-menu-btn:hover { color: #F2F2F2; border-color: #4a4a4a; }

#dv-mobile-nav {
  display: none;
  border-top: 1px solid #2c2c2c;
  padding: 8px 18px 14px;
  max-height: 62vh;
  overflow-y: auto;
}
#dv-mobile-nav.dv-open { display: block; }
#dv-mobile-nav .dv-navlink {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(44,44,44,.7);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#dv-mobile-nav .dv-navlink:last-child { border-bottom: none; }

@media (max-width: 860px) {
  #dv-menu-btn { display: inline-flex; }
}

/* Small phones: the logo and three control clusters no longer fit at 44px. */
@media (max-width: 680px) {
  .dv-header-inner img { height: 34px !important; }
  .dv-header-inner { gap: 10px !important; }
  .dv-viewbtn { padding: 7px 10px; }
  .dv-langbtn { padding: 7px 8px; }
}

#dv-mobile-controls { display: none; gap: 10px; padding: 14px 4px 2px; }
#dv-mobile-controls .dv-seg {
  display: flex; padding: 4px; border-radius: 999px; background: #222222;
}

/* Under ~560px the logo, both toggle groups, the menu button and the padlock
   no longer fit across one 64px strip, so the toggles move into the panel. */
@media (max-width: 560px) {
  .dv-hdr-view, .dv-hdr-lang { display: none !important; }
  #dv-mobile-controls { display: flex; }
}