:root {
  --bg: #f2f2f7;
  --rub: #17365c;
  --rub-2: #1d4272;
  --orange: #f0a02a;
  --ink: #1c1c1e;
  --muted: #8e8e93;
  --hair: rgba(60,60,67,.16);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --bar-bg: rgba(249,249,249,.94);
  --sheet-bg: #fff;
  --input-bg: #f7f7fa;
  --icon-btn-color: #3a3a3c;
  --tab-active-color: #2c2c2e;
  --dot-active: #6e6e73;
  --dot-inactive: #c7c7cc;
  --next-doc-color: #3a3a3c;
  --grip-bg: #d1d1d6;
  --theme-icon-color: #f5a623;
}

html[data-theme="dark"] {
  --bg: #1c1c1e;
  --ink: #f2f2f7;
  --muted: #8e8e93;
  --hair: rgba(255,255,255,.15);
  --bar-bg: rgba(28,28,30,.94);
  --sheet-bg: #2c2c2e;
  --input-bg: #1c1c1e;
  --icon-btn-color: #d1d1d6;
  --tab-active-color: #f2f2f7;
  --dot-active: #d1d1d6;
  --dot-inactive: #48484a;
  --next-doc-color: #d1d1d6;
  --grip-bg: #48484a;
  --theme-icon-color: #ffd60a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
}

/* ---------- top bar ---------- */
.topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: 44px;
  padding: 0 6px;
}
.icon-btn {
  display: grid;
  place-items: center;
  height: 44px;
  color: var(--icon-btn-color);
}
.topbar-title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* ---------- sub bar ---------- */
.subbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 18px 10px;
}
.theme-btn {
  display: grid;
  place-items: center;
  color: var(--theme-icon-color);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background-color .15s ease;
}
.theme-btn:active {
  background: rgba(0,0,0,0.06);
}
html[data-theme="dark"] .theme-btn:active {
  background: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .sun-icon { display: none !important; }
html:not([data-theme="dark"]) .moon-icon { display: none !important; }

.clock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--icon-btn-color);
}

/* ---------- segmented tabs ---------- */
.tabs {
  display: flex;
  gap: 26px;
  padding: 0 18px;
  border-bottom: .5px solid var(--hair);
}
.tab {
  padding: 6px 0 9px;
  font-size: 13.5px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -.5px;
}
.tab.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--tab-active-color);
}

/* ---------- stage ---------- */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 14px;
}

.card-wrap { display: flex; flex-direction: column; }

/* ---------- card ---------- */
.card {
  position: relative;
  background: linear-gradient(160deg, var(--rub-2) 0%, var(--rub) 55%, #132e50 100%);
  color: #fff;
  border-radius: 12px;
  margin: 0 6px;
  padding: 20px 18px 26px;
  box-shadow: 0 6px 18px rgba(20, 40, 70, .18);
  transition: transform .18s ease;
}
.card.is-pressing { transform: scale(.975); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.card-logo {
  height: 28px;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.card-title {
  margin: 22px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .7px;
}

.fields {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 20px;
  column-gap: 12px;
}
.field { display: flex; flex-direction: column; min-width: 0; }
.field.span2 { grid-column: 1 / -1; }
.lbl {
  font-size: 8.5px;
  letter-spacing: .3px;
  color: #9db6d2;
  margin-bottom: 4px;
}
.val {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #eef4fb;
  overflow-wrap: anywhere;
}

.disclaimer {
  margin: 26px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--orange);
  max-width: 30ch;
}

/* ---------- dots + next ---------- */
.dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 12px 0 4px;
}
.dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dot-inactive);
}
.dots i.on { background: var(--dot-active); }

.next-doc {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px 0;
  font-size: 12px;
  line-height: 1.25;
  text-align: right;
  color: var(--next-doc-color);
}

/* ---------- empty ---------- */
.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #b0b0b6;
  padding-bottom: 60px;
}
.empty p { margin: 0; font-size: 14px; }

/* ---------- bottom tab bar ---------- */
.tabbar {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: .5px solid var(--hair);
  background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  padding-bottom: var(--safe-b);
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 0 6px;
  font-size: 10px;
  color: var(--muted);
}
.tabbar-item.is-active { color: var(--ink); }

/* ---------- edit sheet ---------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 20;
}
.sheet-backdrop.show { opacity: 1; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 21;
  background: var(--sheet-bg);
  border-radius: 14px 14px 0 0;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  padding-bottom: var(--safe-b);
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
.sheet.show { transform: translateY(0); }

.sheet-grip {
  width: 36px; height: 5px;
  border-radius: 3px;
  background: var(--grip-bg);
  margin: 7px auto 2px;
}
.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 16px 12px;
  border-bottom: .5px solid var(--hair);
}
.sheet-head strong { font-size: 15px; }
.sheet-btn { font-size: 15px; color: #0a84ff; }
.sheet-btn:first-child { justify-self: start; }
.sheet-btn.strong { justify-self: end; font-weight: 600; }

.sheet-body {
  overflow-y: auto;
  padding: 14px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}
.sheet-body label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.sheet-body input {
  font: 16px/1.2 inherit;
  color: var(--ink);
  padding: 11px 12px;
  border: .5px solid var(--hair);
  border-radius: 9px;
  background: var(--input-bg);
  -webkit-user-select: text;
  user-select: text;
}
.sheet-body input:focus { outline: 2px solid #0a84ff33; border-color: #0a84ff; }

.reset-btn {
  margin-top: 6px;
  padding: 11px;
  border-radius: 9px;
  background: var(--input-bg);
  color: #ff3b30;
  font-size: 15px;
  text-align: center;
}

@media (min-width: 520px) {
  .app { max-width: 430px; margin: 0 auto; }
}