:root {
  color-scheme: dark;
  --ink: #f4f0e6;
  --muted: #9299a8;
  --canvas: #05070c;
  --panel: rgba(13, 17, 26, .94);
  --panel-border: rgba(224, 200, 143, .16);
  --gold: #d4b36e;
  --gold-light: #f0dfad;
  --green: #61d4aa;
  --amber: #d8b36a;
  --red: #df7180;
}

html[data-theme="light"] {
  color-scheme: light;
  --ink: #21262e;
  --muted: #69717d;
  --canvas: #eef0f3;
  --panel: rgba(255, 255, 255, .92);
  --panel-border: rgba(41, 48, 59, .13);
  --gold: #9a742f;
  --gold-light: #70531e;
  --green: #238365;
  --amber: #a97717;
  --red: #c34a59;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(91, 72, 40, .28), transparent 42%),
    radial-gradient(circle at 0 100%, rgba(20, 72, 70, .16), transparent 32%),
    var(--canvas);
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

#star-canvas { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .72; }
html[data-theme="light"] #star-canvas { opacity: .48; }

button, a { font: inherit; }
a { color: inherit; text-decoration: none; }

.page-glow { position: fixed; z-index: 0; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(38px); opacity: .1; pointer-events: none; }
.page-glow--one { top: -18rem; right: -14rem; background: #a27e3e; }
.page-glow--two { bottom: -21rem; left: -14rem; background: #13736e; }

html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(190, 158, 97, .2), transparent 43%),
    radial-gradient(circle at 0 100%, rgba(100, 178, 166, .14), transparent 34%),
    var(--canvas);
}
html[data-theme="light"] .page-glow { opacity: .09; }

.app-shell { display: grid; position: relative; z-index: 1; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 20px; align-content: center; place-items: center; }

.line-checker {
  --content-edge-space: clamp(22px, 3vw, 30px);
  position: relative;
  width: 100%;
  max-width: 980px;
  min-width: 0;
  padding: var(--content-edge-space);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 23px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 21%),
    linear-gradient(145deg, rgba(22, 27, 39, .97), var(--panel));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .46),
    0 12px 24px rgba(0, 0, 0, .17),
    inset 0 1px rgba(255, 255, 255, .035),
    inset 0 -1px rgba(0, 0, 0, .4);
  backdrop-filter: blur(20px);
}
.line-checker::after { position: absolute; inset: 8px; border: 1px solid rgba(255, 255, 255, .028); border-radius: 17px; box-shadow: inset 0 0 28px rgba(0, 0, 0, .12); content: ""; pointer-events: none; }

html[data-theme="light"] .line-checker {
  border-color: rgba(48, 54, 65, .12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), transparent 21%),
    linear-gradient(145deg, rgba(255, 255, 255, .98), var(--panel));
  box-shadow:
    0 24px 60px rgba(42, 50, 61, .12),
    0 8px 20px rgba(42, 50, 61, .05),
    inset 0 1px rgba(255, 255, 255, .8),
    inset 0 -1px rgba(70, 77, 88, .06);
}
html[data-theme="light"] .line-checker::after { border-color: rgba(42, 49, 60, .045); box-shadow: inset 0 0 28px rgba(50, 56, 66, .025); }
html[data-theme="light"] .theme-toggle { color: #886624; background: transparent; }
html[data-theme="light"] .theme-toggle:hover { color: #5f4410; background: transparent; }
html[data-theme="light"] .route-hero-art { content: url("../assets/route-hero-light.svg"); }

.hero { position: relative; z-index: 1; text-align: center; }
.route-hero-art { display: block; width: min(100%, 560px); height: auto; margin: 0 auto; content: url("../assets/route-hero-dark.svg"); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.theme-toggle { position: absolute; z-index: 2; top: 17px; right: 17px; display: grid; width: 35px; height: 35px; padding: 0; color: var(--gold); cursor: pointer; place-items: center; border: 0; border-radius: 10px; background: transparent; transition: transform .2s ease, color .2s ease; }
.theme-toggle:hover { color: var(--gold-light); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 3px solid rgba(212, 179, 110, .38); outline-offset: 3px; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { margin: 0; color: var(--gold); font-size: 10px; font-weight: 750; letter-spacing: .2em; line-height: 1.6; overflow-wrap: anywhere; }
h1 { margin: 6px 0 5px; font-family: "STKaiti", "KaiTi", "PingFang SC", serif; font-size: clamp(27px, 3vw, 35px); letter-spacing: .055em; }
.hero-copy { margin: 0; color: var(--muted); font-size: 13px; }

.check-summary { position: relative; z-index: 1; display: flex; gap: 8px; align-items: center; min-width: 0; min-height: 42px; margin: 21px 0 9px; padding: 0 13px; border: 1px solid rgba(224, 200, 143, .1); border-radius: 11px; background: rgba(2, 4, 8, .32); color: #d8d8d4; font-size: 13px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(212, 179, 110, .5); animation: pulse 2.2s infinite; }
#overall-status { min-width: 0; }
.check-counter { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }

html[data-theme="light"] .check-summary { border-color: rgba(42, 49, 60, .1); background: rgba(244, 246, 248, .86); color: #343a44; }

.main { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.config-state { display: grid; min-height: 112px; padding: 22px; place-items: center; border: 1px dashed var(--panel-border); border-radius: 11px; background: rgba(3, 6, 12, .2); color: var(--muted); text-align: center; }
.config-state strong { color: var(--ink); font-size: 14px; }
.config-state p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; }
.line-card { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 64px; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 11px; background: rgba(3, 6, 12, .32); color: var(--muted); cursor: progress; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.line-card:not([aria-disabled="true"]):hover, .line-card:not([aria-disabled="true"]):focus-visible { transform: translateY(-2px); outline: none; background: rgba(255, 255, 255, .055); box-shadow: 0 10px 22px rgba(0, 0, 0, .21); }
.line-card[aria-disabled="true"] { pointer-events: none; }
.line-card__number { display: grid; width: 28px; height: 28px; color: #c9c7bf; font-size: 11px; font-weight: 750; place-items: center; border-radius: 8px; background: rgba(206, 196, 169, .1); }
.line-card__content { min-width: 0; }
.line-card__name { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.line-card__state { display: block; margin-top: 2px; color: inherit; font-size: 11px; }
.line-card__indicator { width: 8px; height: 8px; border-radius: 50%; background: #606979; box-shadow: 0 0 0 4px rgba(96, 105, 121, .12); }
.line-card--success { border-color: rgba(97, 212, 170, .37); color: #a8e1c8; cursor: pointer; }
.line-card--success .line-card__indicator { background: var(--green); box-shadow: 0 0 0 4px rgba(97, 212, 170, .12), 0 0 13px rgba(97, 212, 170, .55); }
.line-card--warn { border-color: rgba(216, 179, 106, .48); color: #ead5a7; cursor: pointer; }
.line-card--warn .line-card__indicator { background: var(--amber); box-shadow: 0 0 0 4px rgba(216, 179, 106, .11), 0 0 13px rgba(216, 179, 106, .52); }
.line-card--error { border-color: rgba(223, 113, 128, .31); color: #eeb2ba; cursor: not-allowed; }
.line-card--error .line-card__indicator { background: var(--red); box-shadow: 0 0 0 4px rgba(223, 113, 128, .11); }

html[data-theme="light"] .line-card { background: rgba(255, 255, 255, .67); }
html[data-theme="light"] .config-state { background: rgba(255, 255, 255, .5); }
html[data-theme="light"] .line-card:not([aria-disabled="true"]):hover, html[data-theme="light"] .line-card:not([aria-disabled="true"]):focus-visible { background: #fff; box-shadow: 0 10px 22px rgba(42, 50, 61, .09); }
html[data-theme="light"] .line-card__number { color: #4d5662; background: rgba(62, 71, 84, .08); }
html[data-theme="light"] .line-card--success { color: #227257; }
html[data-theme="light"] .line-card--warn { color: #816018; }
html[data-theme="light"] .line-card--error { color: #a53f4c; }

.actions { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 340px); margin: 30px auto 0; }
.actions--single { grid-template-columns: 1fr; }
.btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 43px; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; font-weight: 750; cursor: pointer; transition: transform .2s ease, filter .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn:focus-visible { outline: 3px solid rgba(212, 179, 110, .4); outline-offset: 3px; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#theme-icon-sun[hidden], #theme-icon-moon[hidden], .theme-toggle .is-hidden { display: none !important; }
.btn--primary { color: #f1dfb1; border-color: rgba(224, 190, 113, .62); background: linear-gradient(135deg, rgba(211, 173, 93, .2), rgba(94, 69, 28, .15)), #1b1710; box-shadow: 0 8px 20px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 245, 211, .08); }
.btn--primary svg { display: grid; width: 23px; height: 23px; padding: 4px; color: #281e0b; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #f0dca6, #bb8f47); }
.btn--secondary { border-color: rgba(224, 200, 143, .18); background: rgba(255, 255, 255, .045); color: #e4e0d7; }
.btn:disabled { cursor: wait; opacity: .65; transform: none; }
.helper-text { position: relative; z-index: 1; margin: var(--content-edge-space) 0 0; color: #7f8795; font-size: 11px; line-height: 1.5; text-align: center; }

html[data-theme="light"] .btn--secondary { border-color: rgba(52, 61, 73, .15); background: rgba(255, 255, 255, .72); color: #3d4652; }
html[data-theme="light"] .btn--primary { color: #fff2ca; border-color: rgba(127, 91, 27, .5); background: linear-gradient(135deg, rgba(188, 145, 67, .25), rgba(89, 62, 20, .15)), #62471d; box-shadow: 0 8px 18px rgba(112, 82, 31, .18), inset 0 1px rgba(255, 245, 211, .12); }
html[data-theme="light"] .helper-text { color: #737c88; }

@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(212, 179, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 179, 110, 0); } }
@media (max-width: 850px) { .main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .line-checker { max-width: 720px; } }
@media (max-width: 620px) { .app-shell { padding: 10px; place-items: center; } .line-checker { --content-edge-space: 20px; padding: var(--content-edge-space) 12px; border-radius: 18px; } .theme-toggle { top: 10px; right: 10px; width: 31px; height: 31px; } .route-hero-art { max-width: 440px; } .check-summary { gap: 6px; min-height: 36px; margin: 14px 0 7px; padding: 0 10px; font-size: 11px; } .check-counter { font-size: 9px; } .main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .line-card { gap: 8px; min-height: 60px; padding: 10px 12px; border-radius: 9px; } .line-card__number { width: 25px; height: 25px; font-size: 10px; border-radius: 7px; } .line-card__name { font-size: 12px; } .line-card__state { font-size: 9px; white-space: nowrap; } .line-card__indicator { width: 7px; height: 7px; } .actions { width: 100%; gap: 7px; margin-top: 20px; } .btn { width: 100%; min-height: 40px; padding: 0 8px; font-size: 12px; } .helper-text { font-size: 10px; } }
@media (max-width: 360px) { h1 { font-size: 21px; } .hero-copy { font-size: 10px; } .line-card { gap: 5px; padding: 7px 6px; } .line-card__name { font-size: 11px; } .line-card__state { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }