:root {
  color-scheme: dark;
  --bg: #0d0e13;
  --panel: #151720;
  --panel2: #1d202b;
  --line: #2a2e3c;
  --text: #f5f6fb;
  --muted: #989eae;
  --accent: #f0a9d4;
  --accent2: #ab8cff;
  --danger: #ff7b88;
  --warn: #ffd27d;
  --ok: #8be3b3;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 20% 0%, #231b32 0, var(--bg) 34rem); color: var(--text); font-family: Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.topbar { position: sticky; top: 0; z-index: 10; min-height: 56px; padding: 0 18px; display: flex; gap: 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(13,14,19,.85); backdrop-filter: blur(18px); }
.topbar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-topbar .topbar-title { flex:1; text-align:center; }
.topbar-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.notification-button { position:relative; width:38px; height:38px; display:grid; place-items:center; padding:0; color:var(--text); background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:11px; }
.notification-button:hover { border-color:#5b526e; background:rgba(255,255,255,.055); }
.notification-button svg { width:19px; height:19px; }
.notification-badge { position:absolute; top:-5px; right:-6px; min-width:18px; height:18px; padding:0 4px; border:2px solid var(--bg); border-radius:999px; background:var(--danger); color:#21070a; font-size:10px; line-height:14px; font-weight:900; font-variant-numeric:tabular-nums; }
.notification-badge[hidden] { display:none; }
.container { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 64px; }
.hero { padding: 22px 0 28px; }
.hero h1 { font-size: clamp(2rem, 6vw, 4.6rem); margin: 6px 0 8px; letter-spacing: -.045em; line-height: .98; }
.hero p { margin: 6px 0; color: var(--muted); }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 800; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.ghost { padding: 8px 12px; border-radius: 10px; background: transparent; color: var(--muted); border: 1px solid var(--line); }
.trip-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; }
.trip-card { padding: 22px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); border-radius: 18px; transition: transform .15s,border-color .15s; }
.trip-card:hover { transform: translateY(-2px); border-color: #5b526e; }
.trip-card h2 { margin: 8px 0; }
.trip-card p { color: var(--muted); min-height: 2.5em; }
.trip-card span { color: var(--accent); font-weight: 700; }
.login-body { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.login-card { width: min(420px,100%); padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: rgba(21,23,32,.94); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.login-card h1 { margin: 8px 0; font-size: 2.2rem; }
.login-card form { display: grid; gap: 12px; margin-top: 24px; }
.pin { width: 100%; border: 1px solid var(--line); background: #0f1118; color: var(--text); padding: 15px 16px; border-radius: 12px; outline: none; }
.pin:focus { border-color: var(--accent2); }
.login-card button { border: 0; border-radius: 12px; padding: 14px; font-weight: 800; background: linear-gradient(90deg,var(--accent2),var(--accent)); color: #111; }
.dashboard-head { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; margin-bottom: 20px; }
.dashboard-head h1 { margin: 5px 0; font-size: clamp(2rem,5vw,4rem); letter-spacing: -.04em; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 12px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: rgba(21,23,32,.82); padding: 18px; min-width: 0; }
.panel h2 { margin: 0 0 14px; font-size: 1.05rem; }
.panel h3 { margin: 16px 0 10px; font-size: .95rem; color: #d9dbea; }
.span-8 { grid-column: span 8; }.span-4 { grid-column: span 4; }.span-12 { grid-column: span 12; }.span-6 { grid-column: span 6; }
.statline { display:flex; gap:8px; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; border:1px solid var(--line); font-size:11px; color:var(--muted); }
.badge.critical { color:#ffd4d8; border-color:#6c343c; background:#35191d; }.badge.high { color:#ffe8bc; border-color:#665231; background:#2b2315; }.badge.confirmed { color:#c8f4dc; border-color:#315d48; background:#152b21; }.badge.pending,.badge.unverified { color:#ffe7b2; border-color:#62512f; background:#2b2416; }
.event-list,.timeline,.source-list { display:grid; gap:10px; }
.event,.time-item,.source { padding:13px; border-radius:13px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.055); }
.event-top,.source-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.event-title { font-weight:750; line-height:1.35; }
.meta { color:var(--muted); font-size:12px; margin-top:6px; line-height:1.5; }
.event-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:9px; }
.event-links a { color:var(--accent); font-size:12px; font-weight:700; }
.day { margin-bottom:18px; }
.day-title { display:flex; align-items:baseline; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:9px; }
.day-title strong { font-size:1.15rem; }.day-title span { color:var(--muted); font-size:12px; }
.time-item { display:grid; grid-template-columns:72px 1fr; gap:10px; }
.time { color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums; }
.source a { font-weight:700; font-size:13px; }.source .meta { overflow-wrap:anywhere; }
.empty { padding:20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }
.loading { color:var(--muted); padding:80px 0; text-align:center; }
.refresh { font-size:11px;color:var(--muted);margin-top:10px; }
.notification-backdrop { position:fixed; inset:0; z-index:20; background:rgba(3,4,8,.58); opacity:0; pointer-events:none; transition:opacity .18s ease; }
.notification-backdrop.is-open { opacity:1; pointer-events:auto; }
.notification-center { position:fixed; z-index:30; top:0; right:0; width:min(420px,calc(100% - 20px)); height:100dvh; display:grid; grid-template-rows:auto auto minmax(0,1fr); background:#141720; border-left:1px solid var(--line); box-shadow:-24px 0 70px rgba(0,0,0,.42); transform:translateX(105%); transition:transform .2s ease; }
.notification-center.is-open { transform:translateX(0); }
.notification-center-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 18px 14px; }
.notification-center-head h2 { margin:0; font-size:1.15rem; }
.notification-center-head p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.notification-close { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--muted); font-size:22px; line-height:1; }
.notification-center-tools { display:flex; justify-content:flex-end; padding:0 18px 12px; border-bottom:1px solid var(--line); }
.notification-read-all { padding:7px 10px; border:0; border-radius:9px; background:rgba(171,140,255,.12); color:var(--accent2); font-size:12px; font-weight:750; }
.notification-read-all:disabled { opacity:.4; cursor:default; }
.notification-list { min-height:0; overflow-y:auto; padding:10px; overscroll-behavior:contain; }
.notification-item { position:relative; width:100%; display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px; align-items:start; padding:13px 11px; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--text); text-align:left; }
.notification-item:hover { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.055); }
.notification-item.is-unread { background:rgba(171,140,255,.065); }
.notification-unread { width:7px; height:7px; margin-top:5px; border-radius:50%; background:transparent; }
.notification-item.is-unread .notification-unread { background:var(--accent2); box-shadow:0 0 9px rgba(171,140,255,.7); }
.notification-copy { display:block; min-width:0; }
.notification-copy strong { display:block; font-size:13px; line-height:1.45; }
.notification-copy time { display:block; margin-top:6px; color:var(--muted); font-size:10px; }
.notification-preview { display:-webkit-box; margin-top:4px; overflow:hidden; color:var(--muted); font-size:11px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.notification-arrow { color:var(--accent); font-size:15px; }
.notification-empty { padding:48px 20px; color:var(--muted); text-align:center; font-size:13px; }
.notification-center-open { overflow:hidden; }
.notification-focus { animation:notification-focus 1.8s ease; }
@keyframes notification-focus { 0%,35% { border-color:var(--accent2); box-shadow:0 0 0 3px rgba(171,140,255,.14); } 100% { border-color:rgba(255,255,255,.055); box-shadow:none; } }
@media (max-width: 820px) { .span-8,.span-4,.span-6 { grid-column:span 12; } .dashboard-head { grid-template-columns:1fr; } .container{width:min(100% - 20px,1180px);padding-top:18px;} .panel{padding:14px;border-radius:15px;} }
@media (max-width: 620px) { .topbar { padding:0 10px; gap:9px; } .trip-topbar .topbar-title { text-align:left; } .topbar-actions { gap:6px; } .ghost { padding:8px 9px; } .notification-center { top:auto; bottom:0; width:100%; height:min(78dvh,720px); border:1px solid var(--line); border-bottom:0; border-radius:20px 20px 0 0; transform:translateY(105%); } .notification-center.is-open { transform:translateY(0); } .notification-center-head { padding-top:16px; } }

.small { font-size: 12px; }
.accent-link { color: var(--accent); font-weight: 700; }
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px; margin-top:10px; }
.detail-row { padding:8px 9px; border:1px solid rgba(255,255,255,.055); border-radius:9px; background:rgba(255,255,255,.018); min-width:0; }
.detail-row span { display:block; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.detail-row strong { display:block; margin-top:3px; font-size:11px; font-weight:650; overflow-wrap:anywhere; }