@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root { --ink:#151728; --ink-alt:#1d2033; --muted:#58595b; --paper:#f2f2f2; --card:#fff; --line:#e0e0e0; --orange:#ec661b; --orange-deep:#ec2513; --yellow:#ecdd13; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
.sidebar { background:var(--ink); color:#fff; display:flex; flex-direction:column; min-height:100vh; padding:32px 22px; position:fixed; width:248px; }
.brand { color:inherit; font-size:25px; font-weight:700; letter-spacing:-1.5px; text-decoration:none; }
.brand span,.account button,.eyebrow { color:var(--orange); }
nav { display:grid; gap:7px; margin-top:70px; }
nav a { border-radius:8px; color:#c6c7c8; padding:10px 12px; text-decoration:none; }
nav a:hover { background:var(--ink-alt); color:#fff; }
.account { border-top:1px solid #393939; display:grid; gap:3px; margin-top:auto; padding:20px 10px 0; }
small { color:var(--muted); font-size:12px; } .account small { color:#b5b5b5; }
.account button { background:none; border:0; cursor:pointer; font:inherit; margin-top:12px; padding:0; text-align:left; }
.main { margin-left:248px; max-width:1440px; padding:56px clamp(28px,5vw,78px); }
.page-header { margin-bottom:38px; max-width:690px; }
.eyebrow { font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:1.1px; margin:0 0 11px; }
h1 { font-size:clamp(35px,5vw,58px); letter-spacing:-3px; line-height:1; margin:0 0 15px; } h2 { font-size:21px; letter-spacing:-.8px; } p { color:var(--muted); line-height:1.55; }
.metrics { display:grid; gap:14px; grid-template-columns:repeat(4,1fr); margin-bottom:16px; }
.metrics article,.panel,.next-step { background:var(--card); border:1px solid var(--line); border-radius:13px; }
.metrics article { display:flex; flex-direction:column; justify-content:space-between; min-height:132px; padding:22px; }
.metrics strong { font-size:30px; letter-spacing:-1.5px; } .metrics em { color:var(--muted); font-size:13px; font-style:normal; letter-spacing:0; }
.panel { padding:28px; } .chart { min-height:330px; }
.bars { align-items:end; border-bottom:1px solid var(--line); display:flex; gap:36px; height:190px; padding:12px 22px 0; }
.bar-item { color:var(--muted); display:grid; font-size:12px; gap:8px; grid-template-rows:auto 1fr auto; height:100%; text-align:center; width:92px; }
.bar-item i { align-self:end; background:linear-gradient(180deg,var(--orange),var(--yellow)); border-radius:8px 8px 0 0; display:block; min-height:4px; }
.bar-item b { color:var(--ink); font-size:11px; }
.next-step { align-items:center; background:linear-gradient(115deg,#fff3eb,#fff 50%); display:flex; justify-content:space-between; margin-top:16px; padding:28px; }
.next-step h2 { margin:0; } .next-step p { margin:7px 0 0; max-width:570px; } .next-step span { color:var(--orange-deep); font-family:"DM Mono",monospace; font-size:12px; }
.table-panel { overflow:auto; } table { border-collapse:collapse; font-size:13px; text-align:left; width:100%; }
th { color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.4px; } td,th { border-bottom:1px solid var(--line); padding:14px 12px; }
.data-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:-14px 0 16px; }
.data-tab { border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:13px; padding:8px 13px; text-decoration:none; }
.data-tab:hover,.data-tab.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.type-tag { border-radius:999px; display:inline-block; font-family:"DM Mono",monospace; font-size:10px; padding:4px 7px; }
.type-tag.periodic { background:#fff3cd; color:#664d03; } .type-tag.alerts { background:#fde9df; color:#a23b25; } .type-tag.trip { background:#cfe2ff; color:#0a58ca; } .type-tag.start { background:#b9e7cb; color:#146c43; }
.data-filters { align-items:end; display:grid; gap:12px; grid-template-columns:repeat(4,minmax(140px,1fr)) auto; margin-bottom:16px; padding:18px; }
.data-filters .primary { margin:0; white-space:nowrap; }
.split { display:grid; gap:16px; grid-template-columns:minmax(260px,.75fr) minmax(400px,1.25fr); } .user-form { align-content:start; display:grid; gap:13px; }
label { display:grid; font-size:13px; font-weight:600; gap:6px; } input,select { background:#fff; border:1px solid #c6c7c8; border-radius:7px; color:var(--ink); font:inherit; padding:11px 12px; width:100%; }
.primary { background:var(--orange); border:0; border-radius:7px; color:#fff; cursor:pointer; font:600 14px "DM Sans",sans-serif; margin-top:7px; padding:13px 18px; } .primary:hover { background:var(--orange-deep); }
.button-link { background:var(--orange); border-radius:7px; color:#fff; display:inline-flex; font-weight:700; margin-top:1rem; padding:.7rem 1rem; text-decoration:none; }
.button-link:hover { background:var(--orange-deep); }
.user-form small { color:#63767d; font-weight:400; }
.user-form .checkbox { display:block; }
.user-form .checkbox input { min-height:auto; width:auto; }
.form-actions { align-items:center; display:flex; gap:1rem; }
.inline-form { display:inline; }
.inline-form button { background:none; border:0; color:var(--orange-deep); cursor:pointer; font:inherit; padding:0; }
.embed-selector { align-items:end; display:flex; gap:12px; margin:-14px 0 20px; max-width:480px; }
.embed-selector label { flex:1; }
.embed-selector .primary { margin:0; white-space:nowrap; }
.embed-panel { background:#fff; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.embed-toolbar { align-items:center; background:#151728; color:#fff; display:flex; justify-content:space-between; padding:12px 16px; }
.embed-toolbar a { color:#f7b563; font-size:13px; text-decoration:none; }
.embed-frame { border:0; display:block; height:calc(100vh - 190px); min-height:680px; width:100%; }
.map-filters { align-items:end; display:grid; gap:12px; grid-template-columns:repeat(3,minmax(160px,1fr)) auto; margin-bottom:14px; }
.map-filters .primary { margin:0; white-space:nowrap; }
.map-legend { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 14px; font-size:13px; }
.map-legend span::before { border-radius:50%; content:''; display:inline-block; height:10px; margin-right:6px; width:10px; }
.map-legend span:last-child::before { display:none; }.map-legend .start::before { background:#198754; }.map-legend .periodic::before { background:var(--orange); }.map-legend .alert::before { background:#c9362b; }
.map-panel { background:#fff; border:1px solid var(--line); border-radius:13px; min-height:680px; overflow:hidden; position:relative; }.map-panel #telemetry-map { height:680px; width:100%; }.map-panel #map-empty { left:50%; margin:0; position:absolute; text-align:center; top:50%; transform:translate(-50%,-50%); width:min(90%,460px); }
.event-pin { background:transparent!important; border:0!important; }.event-pin .pin-body { background:#c9362b; border:3px solid #fff; border-radius:50% 50% 50% 0; box-shadow:0 3px 9px #15172866; color:#fff; display:grid; font:700 13px "DM Sans",sans-serif; height:32px; place-items:center; transform:rotate(-45deg); width:32px; }.event-pin .pin-body b { font-weight:700; transform:rotate(45deg); }.event-pin.start .pin-body { background:#198754; }
.notice { background:#b9e7cb; border-radius:8px; color:#146c43; margin-bottom:20px; padding:13px 17px; }
.login-wrap { align-items:center; background:radial-gradient(circle at 10% 80%,#f9bdb8 0,transparent 27%),var(--paper); display:grid; gap:70px; grid-template-columns:1.2fr .8fr; margin:-56px clamp(28px,5vw,78px); min-height:100vh; }
.login-intro { max-width:520px; } .login-intro .brand { color:var(--ink); } .login-intro h1 { font-size:clamp(52px,6vw,78px); margin-top:90px; } .login-intro p { font-size:18px; max-width:400px; }
.login-card { background:var(--card); border:1px solid var(--line); border-radius:15px; box-shadow:0 18px 55px #15172818; display:grid; gap:16px; padding:36px; width:min(100%,410px); }
.login-card h2,.login-card p { margin:0; } .login-card small { line-height:1.5; margin-top:8px; } .form-error { background:#fde9df; border-radius:6px; color:#a23b25!important; font-size:13px; padding:9px 11px; }
@media (max-width:850px) { .sidebar { min-height:0; padding:18px 22px; position:static; width:auto; } .sidebar nav { display:flex; margin:22px 0 0; } .account { display:none; } .main { margin:0; padding:35px 22px; } .metrics,.split,.login-wrap { grid-template-columns:1fr; } .login-wrap { gap:30px; margin:-35px -22px; padding:48px 28px; } .login-intro h1 { margin-top:45px; } .metrics { grid-template-columns:repeat(2,1fr); } .next-step { display:block; } .next-step span { display:block; margin-top:18px; } }
@media (max-width:850px) { .data-filters { grid-template-columns:1fr; } }
@media (max-width:850px) { .embed-selector { align-items:stretch; flex-direction:column; } .embed-frame { height:760px; min-height:0; } }
@media (max-width:850px) { .map-filters { grid-template-columns:1fr; } .map-panel,.map-panel #telemetry-map { height:560px; min-height:560px; } }