.card {
  background: linear-gradient(180deg, rgba(33, 46, 66, 0.86), rgba(23, 33, 49, 0.86));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 12px;
  margin-bottom: 10px;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn:active {
  transform: translateY(1px);
  filter: brightness(1.08);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--btn-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
}

.btn-secondary {
  background: #36516e;
  color: #fff;
  border-color: #4f6f92;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}

.btn-official {
  background: #0f4c81;
  color: #e0f2fe;
  border-color: #38bdf8;
}

.btn-danger {
  background: var(--btn-danger);
  color: #fff;
}

.btn-danger:hover {
  background: var(--btn-danger-hover);
}

.btn-test {
  background: #0f766e;
  color: #fff;
  border-color: #14b8a6;
}

.btn-test:hover {
  background: #0d9488;
}

.btn-warning-strong {
  background: #9a3412;
  color: #fff;
  border-color: #ea580c;
}

.btn-warning-strong:hover {
  background: #c2410c;
}

.btn-arrive {
  background: #166534;
  color: #fff;
  border-color: #22c55e;
}

.btn-depart {
  background: #7c2d12;
  color: #fff;
  border-color: #f97316;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.field span {
  font-size: 0.85rem;
  color: var(--muted);
}

.field input,
.field select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--fg);
  padding: 0 10px;
}

.status-darkgreen {
  background: color-mix(in srgb, var(--status-darkgreen) 72%, #0d141f);
  color: #f8fafc;
}

.status-green {
  background: color-mix(in srgb, var(--status-green) 72%, #0d141f);
  color: #f8fafc;
}

.status-yellow {
  background: color-mix(in srgb, var(--status-yellow) 76%, #0d141f);
  color: #f8fafc;
}

.status-red {
  background: color-mix(in srgb, var(--status-red) 76%, #0d141f);
  color: #f8fafc;
}

.status-darkred {
  background: color-mix(in srgb, var(--status-darkred) 76%, #0d141f);
  color: #f8fafc;
}

.hero-card {
  margin: 24px 12px;
  text-align: center;
}

.hero-card h1 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.hero-card p {
  color: var(--muted);
  margin-bottom: 8px;
}

.page-index .hero-card {
  margin: 8px 10px 12px;
}

.page-index .hero-card h1 {
  font-size: 1.24rem;
  margin-bottom: 6px;
}

.install-section {
  margin-top: 12px;
  text-align: left;
  border-color: #164e63;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.18);
}

.install-section h2 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.install-subtitle {
  color: #cbd5e1;
  font-size: 0.82rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.install-actions {
  display: grid;
  gap: 8px;
}

.install-btn {
  width: 100%;
  min-height: 54px;
  justify-content: flex-start;
  gap: 10px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid #334155;
  color: #e2e8f0;
  text-align: left;
  padding: 8px 10px;
}

.install-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.install-text-group {
  display: grid;
  gap: 2px;
}

.install-label {
  font-size: 0.86rem;
  font-weight: 700;
}

.install-sub {
  font-size: 0.72rem;
  color: #bfdbfe;
  line-height: 1.3;
}

.install-installed {
  margin-top: 10px;
  color: #86efac;
  font-weight: 700;
}

.page-index .install-section {
  text-align: center;
}

.page-index .install-subtitle {
  text-align: center;
}

.page-index .install-actions {
  justify-items: center;
}

.page-index .install-btn {
  justify-content: center;
  text-align: left;
}

.page-index .install-text-group {
  justify-items: start;
  text-align: left;
}

.page-index .install-icon {
  margin: 0;
  flex: 0 0 30px;
}

.page-index .install-installed {
  text-align: center;
}

.page-index #start-status {
  text-align: center;
}

.hero-topline {
  color: #dbeafe;
  line-height: 1.45;
}

.hero-subline {
  margin-top: 6px;
  color: #bfdbfe;
  line-height: 1.35;
}

.release-note {
  margin: 10px auto 8px;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #facc15;
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.25), rgba(161, 98, 7, 0.24));
  color: #fff7d6;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.language-field {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.page-index .hero-card .field span {
  text-align: center;
}

.page-index .hero-card .field select {
  text-align: center;
  text-align-last: center;
}

.disclaimer-text {
  font-size: 0.84rem;
  line-height: 1.35;
  color: #fecaca;
}

.disclaimer-card {
  background: linear-gradient(180deg, rgba(61, 18, 16, 0.9), rgba(44, 13, 12, 0.9));
  border-color: #7f1d1d;
}

.disclaimer-card p {
  color: #ffe4e6;
  font-size: 0.83rem;
  line-height: 1.35;
}

.warning-card {
  color: #fecaca;
}

.app-footer {
  margin-top: auto;
  padding: 12px 2px calc(8px + env(safe-area-inset-bottom));
  text-align: center;
}

.app-footer-disclaimer {
  color: #cbd5e1;
  font-size: 0.74rem;
  line-height: 1.4;
  margin: 0;
}

.app-footer-version {
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 8px 0 0;
}

.buffer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 0.76rem;
  font-weight: 700;
}

.buffer-badge-neutral {
  background: rgba(71, 85, 105, 0.9);
  color: #f8fafc;
}

.stack-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.priority-actions {
  margin-top: 8px;
}

.priority-actions .btn {
  min-height: 50px;
}

.legal-links {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.legal-links a {
  color: #bfdbfe;
  text-decoration: underline;
}

.page-bottom-disclaimer {
  margin: 0 10px 12px;
}