*, *::before, *::after { box-sizing: border-box; }

body { font-family: system-ui, sans-serif; max-width: 960px; margin: 0 auto; padding: 1rem; }

.highway-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }

.highway-card { display: flex; align-items: center; gap: .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; padding: .75rem 1rem; }

.highway-title { font-size: 1rem; font-weight: 500; text-decoration: none; }
.highway-updated { margin-left: auto; font-size: .75rem; color: #9ca3af; }

.back-link { display: inline-block; margin-bottom: 1rem; font-size: .9rem; color: #6b7280; text-decoration: none; }

.highway-title:hover, .back-link:hover { text-decoration: underline; }

.segment-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.segment-item { display: flex; align-items: flex-start; gap: .6rem; }
.segment-detail { display: flex; flex-direction: column; gap: .2rem; }

.segment-name { font-size: .95rem; color: #374151; font-weight: 500; }
.segment-body { margin: 0; font-size: .875rem; color: #6b7280; }
.segment-time { margin: 0; font-size: .75rem; color: #9ca3af; }

.splash { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 2rem; text-align: center; }
.splash-box { max-width: 520px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: .75rem; }

.btn { display: inline-block; padding: .75rem 2rem; background-color: #2563eb; color: #fff; border-radius: .5rem; text-decoration: none; font-weight: 500; }
.btn:hover { background-color: #1d4ed8; }

.status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.status-dot.clear  { background-color: #22c55e; }
.status-dot.closed { background-color: #ef4444; }

.auth-nav { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 1rem; align-items: center; font-size: .875rem; }
.auth-nav a, .auth-nav button { color: #6b7280; text-decoration: none; background: none; border: none; cursor: pointer; font: inherit; padding: 0; }
.auth-nav a:hover, .auth-nav button:hover { color: #111827; text-decoration: underline; }

.auth-form { max-width: 360px; margin: 4rem auto; display: flex; flex-direction: column; gap: 1rem; }
.auth-form h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
.auth-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .875rem; color: #374151; }
.auth-form input { padding: .5rem .75rem; border: 1px solid #d1d5db; border-radius: .375rem; font: inherit; font-size: .95rem; }
.auth-form input:focus { outline: 2px solid #2563eb; outline-offset: -1px; border-color: transparent; }
.auth-form .btn { text-align: center; cursor: pointer; border: none; font: inherit; font-size: 1rem; }
.auth-form .btn:disabled { opacity: .6; cursor: not-allowed; }
.auth-error { color: #dc2626; font-size: .875rem; min-height: 1.25rem; }
.auth-link { font-size: .875rem; color: #6b7280; text-align: center; }
.auth-link a { color: #2563eb; }

.verify-banner { background: #fefce8; border: 1px solid #fde047; border-radius: .5rem; padding: .75rem 1rem; margin-bottom: 1.5rem; font-size: .875rem; display: flex; align-items: center; gap: 1rem; }
.verify-banner p { margin: 0; color: #713f12; }
.verify-banner button { margin-left: auto; background: none; border: 1px solid #ca8a04; color: #92400e; border-radius: .375rem; padding: .25rem .75rem; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.verify-banner button:hover { background: #fde047; }

.sub-page { max-width: 480px; margin-top: 2rem; }
.sub-email { color: #6b7280; font-size: .875rem; margin: 0 0 1.5rem; }
.sub-table { border-collapse: collapse; margin: 0 0 1.5rem; }
.sub-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; padding: 0 1.5rem .5rem 0; }
.sub-table td { padding: .4rem 1.5rem .4rem 0; font-size: .95rem; }
.sub-table input[type=checkbox] { width: 1rem; height: 1rem; cursor: pointer; }
.sub-status { font-size: .875rem; min-height: 1.25rem; margin: 0 0 1rem; }
.sub-status.ok { color: #16a34a; }
.sub-status.err { color: #dc2626; }