:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  --ink: #162534;
  --muted: #647485;
  --line: #dbe4e9;
  --soft: #f5f8fa;
  --canvas: #eaf0f3;
  --paper: #ffffff;
  --navy: #12202e;
  --teal: #0f766e;
  --mint: #7ee7d7;
  --orange: #b45309;
  --orange-bg: #fff6e8;
  --green: #146c55;
  --green-bg: #e8f8f1;
  --red: #b42318;
  --radius: 1rem;
  --shadow: 0 1.25rem 3.5rem rgba(22, 37, 52, 0.1);
}

* {
  box-sizing: border-box;
  scrollbar-color: var(--teal) #dcecea;
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 0.7rem; height: 0.7rem; }
*::-webkit-scrollbar-track { border-radius: 999px; background: #dcecea; }
*::-webkit-scrollbar-thumb { border: 0.16rem solid #dcecea; border-radius: 999px; background: var(--teal); }
*::-webkit-scrollbar-thumb:hover { background: #0a605a; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 84% 0%, rgba(126, 231, 215, 0.4), transparent 27rem),
    linear-gradient(135deg, #edf3f5 0%, var(--canvas) 60%, #e4edef 100%);
}

button, input, select { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button { cursor: pointer; }

button:disabled { cursor: not-allowed; opacity: 0.55; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.38);
  outline-offset: 2px;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { letter-spacing: -0.025em; }

h1 { margin-bottom: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); }

h2 { margin-bottom: 0; font-size: 1.2rem; }

h3 { margin-bottom: 0.38rem; font-size: 1rem; }

.is-hidden { display: none !important; }

.app-shell { max-width: 1780px; min-height: 100vh; margin: 0 auto; padding: 1.25rem clamp(1rem, 3vw, 3rem) 2rem; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  background: linear-gradient(120deg, #0f766e, #0b655f);
  box-shadow: 0 0.85rem 1.8rem rgba(15, 118, 110, 0.16);
}

.brand-block { display: flex; align-items: flex-end; gap: 1rem; }

.brand-mark {
  display: grid;
  width: 5.25rem;
  height: 4.25rem;
  place-items: center;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eyebrow, .panel-kicker {
  margin-bottom: 0.18rem;
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.app-header h1 {
  margin: 0;
  transform: translateY(-0.625rem);
  color: #fff;
  font-family: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.55rem, 4.5vw, 4.15rem);
  font-weight: 600;
  font-variation-settings: "wdth" 96, "wght" 600;
  line-height: 0.91;
  letter-spacing: -0.04em;
}

.local-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #e1fbf6;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.header-actions { align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; gap: 0.7rem; padding-bottom: 0.625rem; }
.header-actions .quiet-button { flex: 0 0 auto; }
.app-header .quiet-button { color: #fff; background: rgba(255, 255, 255, 0.16); }
.app-header .quiet-button:hover { background: rgba(255, 255, 255, 0.25); }

.local-status span, .status-dot {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: var(--green);
}

.app-header .local-status span { background: var(--mint); }

.primary-button, .secondary-button, .quiet-button, .text-button, .download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  font-weight: 760;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.primary-button {
  width: 100%;
  border: 1px solid var(--teal);
  color: #fff;
  background: var(--teal);
  box-shadow: 0 0.6rem 1rem rgba(15, 118, 110, 0.18);
}

.primary-button:hover:not(:disabled) { transform: translateY(-1px); background: #0a605a; }

.secondary-button {
  border: 1px solid #c8d6dd;
  padding: 0 0.9rem;
  color: var(--ink);
  background: #fff;
}

.secondary-button:hover, .quiet-button:hover { background: var(--soft); }

.quiet-button {
  min-height: 2.25rem;
  border: 0;
  padding: 0 0.8rem;
  color: var(--teal);
  background: #e6f6f3;
}

.text-button {
  width: 100%;
  min-height: 2.4rem;
  border: 0;
  color: #d8f7f0;
  background: transparent;
}

.text-button:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,0.08); }

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  color: #fff;
  background: var(--navy);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-error { background: var(--red); }

@media (max-width: 760px) {
  .app-shell { padding: 1rem 0.8rem 1.5rem; }
  .app-header { align-items: flex-start; flex-direction: column; }
  .brand-mark { width: 3.8rem; height: 3.05rem; }
  .brand-mark img { width: 100%; height: 100%; }
  .app-header h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .header-actions { align-self: auto; align-items: flex-start; flex-direction: column; padding-bottom: 0; }
}

@media (min-width: 1181px) and (min-aspect-ratio: 4 / 3) {
  html, body { height: 100%; overflow: hidden; }
  .app-shell {
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .app-header { margin-bottom: 1rem; }
}