/*
 * Home Tunnel v1.2 visual refresh
 * Implemented from the Gemini high-fidelity prototype in design-system/.
 * This file intentionally overrides the original theme without changing
 * application structure or API behavior.
 */

:root {
  color-scheme: light;
  --color-primary: #2563eb;
  --color-primary-strong: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-on-primary: #ffffff;
  --color-secondary: #475569;
  --color-accent: #059669;
  --color-accent-strong: #047857;
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-muted: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-foreground: #0f172a;
  --color-text: #334155;
  --color-text-muted: #64748b;
  --color-destructive: #b91c1c;
  --color-warning: #b45309;
  --color-ring: #2563eb;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .055);
  --shadow-2: 0 18px 44px rgba(15, 23, 42, .11);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --sidebar-width: 244px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei UI", "Segoe UI", system-ui, sans-serif;
  color: var(--color-foreground);
  background: var(--color-background);
}

html {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--color-background);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 82% 2%, rgba(37, 99, 235, .08), transparent 28rem),
    var(--color-background);
  color: var(--color-text);
}

h1,
h2,
h3 { color: var(--color-foreground); }

a { color: var(--color-primary-strong); }

:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .45);
  outline-offset: 2px;
}

.eyebrow {
  color: var(--color-primary-strong);
  font-family: Consolas, "SFMono-Regular", monospace;
  font-weight: 700;
}

.brand-mark {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  box-shadow: none;
  border: 1px solid #dbeafe;
}

.button {
  min-height: 44px;
  border-radius: 9px;
  box-shadow: none;
}

.button-primary {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .16);
}

.button-primary:hover { background: var(--color-primary-strong); }
.button-primary:active { background: #1e40af; }

.button-secondary {
  background: #ffffff;
  color: #334155;
  border-color: var(--color-border-strong);
}

.button-secondary:hover {
  background: var(--color-muted);
  color: var(--color-foreground);
}

.button-quiet {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.button-quiet:hover {
  background: var(--color-muted);
  color: var(--color-foreground);
  border-color: var(--color-border-strong);
}

.button-danger {
  background: #fff;
  color: var(--color-destructive);
  border-color: #fecaca;
}

.button-danger:hover {
  background: #fef2f2;
  color: #991b1b;
}

.icon-button { color: var(--color-text-muted); }
.icon-button:hover { background: var(--color-muted); color: var(--color-foreground); }

.field label { color: var(--color-text); }

.field input,
.field select,
.field textarea,
.search-input {
  min-height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: 9px;
  background: #ffffff;
  color: var(--color-foreground);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.search-input:hover { border-color: #94a3b8; }

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-input:focus {
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  outline: none;
}

.helper { color: var(--color-text-muted); }
.field-error { color: var(--color-destructive); }

.notice {
  border-color: var(--color-border);
  background: var(--color-muted);
  color: var(--color-text);
}

.notice-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

/* Marketing home */
.landing-screen {
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 8%, rgba(37, 99, 235, .09), transparent 28rem),
    linear-gradient(180deg, #ffffff 0, #f8fafc 42rem, #ffffff 100%);
  color: var(--color-text);
}

.marketing-header {
  border-bottom: 1px solid rgba(226, 232, 240, .88);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
}

.marketing-nav,
.marketing-hero,
.trust-strip,
.marketing-section,
.download-panel,
.marketing-footer {
  width: min(1200px, calc(100% - 48px));
}

.marketing-nav { min-height: 72px; }
.marketing-brand { color: var(--color-foreground); }
.marketing-brand strong { font-weight: 750; }
.marketing-brand small { color: var(--color-text-muted); }

.marketing-links { gap: 30px; }
.marketing-section-link { color: #475569; font-weight: 550; }
.marketing-section-link:hover { color: var(--color-primary); }

.marketing-login {
  color: #334155;
  background: #ffffff;
  border-color: var(--color-border-strong);
}

.marketing-login:hover {
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
  border-color: #bfdbfe;
}

.marketing-hero {
  min-height: 620px;
  grid-template-columns: minmax(0, 1fr) minmax(480px, .94fr);
  gap: clamp(48px, 6vw, 84px);
  padding-block: 88px 76px;
}

.hero-kicker {
  margin-bottom: 18px;
  padding: 6px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-family: Consolas, "SFMono-Regular", monospace;
  letter-spacing: .02em;
}

.hero-kicker span {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

.hero-copy h1 {
  max-width: 660px;
  margin-bottom: 22px;
  color: var(--color-foreground);
  font-size: clamp(2.7rem, 4.45vw, 4rem);
  line-height: 1.13;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.hero-lead {
  max-width: 620px;
  margin-bottom: 28px;
  color: #475569;
  font-size: 1.03rem;
  line-height: 1.8;
}

.release-note {
  color: var(--color-text-muted);
  font-family: Consolas, "SFMono-Regular", monospace;
}

.tunnel-preview {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-2);
}

.preview-toolbar {
  border-bottom-color: var(--color-border);
  background: #f8fafc;
}

.preview-toolbar > span { background: #cbd5e1; }
.preview-toolbar > span:first-child { background: #fb7185; }
.preview-toolbar > span:nth-child(2) { background: #fbbf24; }
.preview-toolbar > span:nth-child(3) { background: #34d399; }
.preview-toolbar strong { color: var(--color-text-muted); }

.preview-address {
  border-color: #dbeafe;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.preview-address strong { color: var(--color-accent-strong); }

.preview-icon {
  border-color: #bfdbfe;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.preview-icon.accent {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: var(--color-accent-strong);
}

.preview-flow small { color: var(--color-text-muted); }
.preview-flow strong { color: var(--color-foreground); }
.tunnel-preview .flow-line { background: #bfdbfe; }
.tunnel-preview .flow-line i { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .1); }

.preview-stats {
  border-top-color: var(--color-border);
  background: #f8fafc;
}

.preview-stats div { border-right-color: var(--color-border); }
.preview-stats small { color: var(--color-text-muted); }
.preview-stats strong { color: var(--color-foreground); }

.trust-strip {
  min-height: 72px;
  border-color: var(--color-border);
  color: #475569;
  font-weight: 600;
}

.trust-strip i { background: #94a3b8; }
.marketing-section { padding-block: 96px; }
.section-heading h2,
.download-panel h2 { color: var(--color-foreground); }

.section-heading > p:last-child,
.download-panel > div > p:last-child { color: var(--color-text-muted); }

.feature-grid { gap: 20px; }

.feature-card {
  min-height: 236px;
  border-color: var(--color-border);
  background: #ffffff;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: #bfdbfe;
  box-shadow: var(--shadow-2);
}

.feature-number { color: var(--color-primary); }
.feature-card h3 { color: var(--color-foreground); }
.feature-card p { color: var(--color-text-muted); }

.workflow-section { border-top-color: var(--color-border); }
.workflow-list li { border-bottom-color: var(--color-border); }

.workflow-list li > span {
  border-color: #bfdbfe;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.workflow-list p { color: var(--color-text-muted); }

.download-panel {
  border-color: #bfdbfe;
  background:
    radial-gradient(circle at 88% 12%, rgba(37, 99, 235, .12), transparent 18rem),
    var(--color-primary-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.download-details dt { color: var(--color-text-muted); }
.download-details dd { color: var(--color-foreground); }
.marketing-footer { border-top-color: var(--color-border); }
.marketing-footer p { color: var(--color-text-muted); }
.marketing-footer > a:last-child { color: var(--color-primary-strong); }

/* Authentication */
.auth-screen {
  min-height: 100dvh;
  max-width: 1180px;
  grid-template-columns: minmax(380px, 500px) minmax(440px, 1fr);
  gap: 28px;
  padding: 48px;
}

.glass-card,
.auth-panel,
.topbar,
.panel,
.modal-frame {
  background: #ffffff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
  backdrop-filter: none;
}

.auth-panel {
  border-radius: var(--radius-lg);
  padding: 42px;
}

.auth-lead { color: var(--color-text-muted); }

.trust-row { color: var(--color-text-muted); font-family: Consolas, "SFMono-Regular", monospace; }
.trust-row span { border-color: var(--color-border); background: var(--color-muted); }
.auth-back { color: var(--color-text-muted); }
.auth-back:hover { color: var(--color-primary-strong); }

.auth-visual {
  min-height: 600px;
  border: 1px solid #1e293b;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 70% 24%, rgba(37, 99, 235, .3), transparent 22rem),
    linear-gradient(145deg, #172554, #0f172a 72%);
  box-shadow: var(--shadow-2);
}

.signal-orbit { border-color: rgba(147, 197, 253, .18); }
.signal-orbit-b { border-color: rgba(52, 211, 153, .2); }

.auth-visual .topology-card {
  background: rgba(15, 23, 42, .66);
  border-color: rgba(255, 255, 255, .14);
  color: #e2e8f0;
  box-shadow: 0 20px 52px rgba(2, 6, 23, .26);
}

.auth-visual .topology-line span {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}

.auth-visual .health-inline { color: #cbd5e1; }

/* Admin application */
.app-shell { background: var(--color-background); }

.sidebar {
  background: #0f172a;
  border-color: #1e293b;
  box-shadow: none;
  color: #e2e8f0;
}

.sidebar .brand-mark {
  background: rgba(37, 99, 235, .2);
  border-color: rgba(147, 197, 253, .22);
  color: #93c5fd;
}

.sidebar-brand strong { color: #ffffff; }
.sidebar-brand small { color: #94a3b8; }
.nav-item { color: #94a3b8; }
.nav-item:hover { color: #ffffff; background: rgba(255, 255, 255, .06); }
.nav-item.active {
  color: #ffffff;
  background: var(--color-primary);
  box-shadow: none;
}

.sidebar-footer { border-color: rgba(255, 255, 255, .1); }
.user-chip > span { background: rgba(37, 99, 235, .24); color: #dbeafe; }
.user-chip strong { color: #ffffff; }
.user-chip small { color: #94a3b8; }
.sidebar-footer .button-quiet { color: #cbd5e1; border-color: rgba(255, 255, 255, .14); }
.sidebar-footer .button-quiet:hover { color: #fff; background: rgba(255, 255, 255, .07); }

.workspace { min-height: 100dvh; background: var(--color-background); }

.topbar {
  min-height: 76px;
  border-width: 0 0 1px;
  border-color: var(--color-border);
  box-shadow: none;
}

.topbar h1 { color: var(--color-foreground); }
.topbar-status { color: var(--color-text-muted); }
.content { max-width: 1480px; }
.page-heading h2 { color: var(--color-foreground); }
.page-heading p { color: var(--color-text-muted); }

.metric-card {
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--color-border);
  background: #ffffff;
  box-shadow: var(--shadow-1);
}

.metric-card::after {
  width: 7px;
  height: 44px;
  right: 0;
  bottom: auto;
  top: 20px;
  border-radius: 8px 0 0 8px;
  background: var(--metric-glow, rgba(37, 99, 235, .18));
}

.metric-label { color: var(--color-text-muted); }
.metric-value { color: var(--color-foreground); font-family: Consolas, "SFMono-Regular", monospace; }
.metric-meta { color: var(--color-accent-strong); }

.panel { border-color: var(--color-border); box-shadow: var(--shadow-1); }
.panel-header h3 { color: var(--color-foreground); }
.panel-subtle { color: var(--color-text-muted); }
.health-row { border-bottom-color: var(--color-border); }
.health-row strong { color: var(--color-foreground); }
.health-row span:last-child { color: var(--color-text-muted); font-family: Consolas, "SFMono-Regular", monospace; }

.flow-node {
  border-color: #dbeafe;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.flow-arrow { color: var(--color-accent); }

.table-panel {
  border: 1px solid var(--color-border);
  background: #ffffff;
  box-shadow: var(--shadow-1);
}

.data-table { color: var(--color-text); }

.data-table th {
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid var(--color-border);
}

.data-table td { border-top-color: var(--color-border); }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table .mono { font-family: Consolas, "SFMono-Regular", monospace; }
.cell-primary { color: var(--color-foreground); }
.cell-secondary { color: var(--color-text-muted); }

.status-badge { border-color: var(--color-border); background: var(--color-muted); color: var(--color-text-muted); }
.status-badge.ok { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.status-badge.warn { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.status-badge.error { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.empty-state { color: var(--color-text-muted); }
.empty-state svg { color: #94a3b8; }

.modal { color: var(--color-text); }
.modal::backdrop { background: rgba(15, 23, 42, .58); }
.modal-frame { border-color: var(--color-border); box-shadow: var(--shadow-2); }
.modal-frame > header,
.modal-frame > footer { border-color: var(--color-border); }

.secret-box { border-color: #a7f3d0; background: #ecfdf5; }
.secret-value { color: #047857; font-family: Consolas, "SFMono-Regular", monospace; }

.toast {
  background: #ffffff;
  border-color: var(--color-border-strong);
  color: var(--color-foreground);
  box-shadow: var(--shadow-2);
}

.toast.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.skeleton {
  background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9);
  background-size: 200% 100%;
}

@media (max-width: 1050px) {
  .marketing-hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .tunnel-preview { max-width: 760px; }
}

@media (max-width: 820px) {
  .sidebar { box-shadow: 16px 0 42px rgba(15, 23, 42, .22); }
}

@media (max-width: 680px) {
  .marketing-nav,
  .marketing-hero,
  .trust-strip,
  .marketing-section,
  .download-panel,
  .marketing-footer { width: min(100% - 32px, 1200px); }

  .marketing-nav { min-height: 64px; }
  .marketing-brand .brand-mark { width: 36px; height: 36px; }
  .marketing-hero { gap: 40px; padding-block: 52px 58px; }

  .hero-copy h1 {
    max-width: 11.5em;
    font-size: clamp(2.25rem, 11vw, 3rem);
    line-height: 1.2;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .hero-lead { font-size: 1rem; line-height: 1.72; }
  .tunnel-preview { border-radius: 14px; }
  .preview-address { margin: 16px; }
  .trust-strip { justify-content: flex-start; gap: 10px 18px; }
  .trust-strip span { flex: 1 1 42%; }
  .feature-card { padding: 24px; }
  .download-panel { padding: 26px 22px; }

  .auth-screen { padding: 16px; }
  .auth-panel { padding: 28px 22px; }

  .data-table tr {
    margin: 12px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #ffffff;
  }

  .data-table td { border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .feature-card:hover { transform: none; }
}