:root { color-scheme: dark; --bg:#0b1020; --panel:#121a2d; --panel-2:#182239; --line:#27334e; --text:#eef3ff; --muted:#91a0bd; --blue:#5c8dff; --green:#40d6a0; --orange:#ffb45e; --red:#ff7185; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 15% -10%, #1d315d 0, transparent 35%),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.app-shell { max-width:1440px; margin:auto; padding:44px clamp(20px,5vw,72px) 72px; }.topbar,.section-heading,.connection-card,.vehicle-topline,.charge-row,.vehicle-details,.vehicle-actions { display:flex; align-items:center; }.topbar,.section-heading { justify-content:space-between; gap:20px; }.eyebrow { color:var(--blue); font-size:.71rem; font-weight:750; letter-spacing:.12em; margin:0 0 7px; text-transform:uppercase; }h1,h2,h3,p { margin:0; }h1 { font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.04em; } h2 { font-size:1.08rem; } h3 { font-size:1rem; }
.connection-pill { display:flex; align-items:center; gap:9px; background:var(--panel); padding:10px 14px; border:1px solid var(--line); border-radius:99px; font-size:.84rem; }.connection-pill span { width:8px; height:8px; border-radius:50%; background:var(--muted); }.connection-pill[data-state="online"] span { background:var(--green); box-shadow:0 0 12px var(--green); }.connection-pill[data-state="demo"] span { background:var(--orange); }
.connection-card { gap:14px; background:rgba(18,26,45,.88); border:1px solid var(--line); border-radius:15px; padding:18px; margin:34px 0 20px; }.field { display:grid; gap:6px; }.field label { color:var(--muted); font-size:.74rem; font-weight:650; }.endpoint-field { flex:1; }.compact-field { width:190px; }input,textarea { background:#0d1425; border:1px solid var(--line); color:var(--text); padding:11px 12px; border-radius:8px; outline:none; font:inherit; }input:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #5c8dff22; }.sr-only { display:none; }
.server-config { display:grid; }.server-config-heading,.server-card-top,.server-actions { display:flex; justify-content:space-between; align-items:end; gap:12px; }.server-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }.server-card { background:#0d1425; border:1px solid var(--line); border-radius:10px; padding:14px; display:grid; gap:12px; }.server-card-top .field { flex:1; }.server-status { color:var(--muted); font-size:.74rem; white-space:nowrap; }.server-card[data-state="online"] { border-color:var(--green); }.server-card[data-state="online"] .server-status { color:var(--green); }.server-card[data-state="connecting"] .server-status { color:var(--orange); }.server-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.server-metrics div { background:var(--panel-2); padding:10px; border-radius:7px; }.server-metrics span { display:block; color:var(--muted); font-size:.68rem; margin-bottom:4px; }.server-metrics strong { font-size:.9rem; }
.button { border:0; border-radius:8px; padding:11px 14px; color:var(--text); font:600 .83rem inherit; cursor:pointer; white-space:nowrap; }.primary { background:var(--blue); }.secondary,.add { background:#263452; }.button:hover { filter:brightness(1.13); }.text-button,.remove-button { cursor:pointer; background:transparent; border:0; color:var(--muted); font:inherit; }.remove-button { font-size:1.5rem; margin-left:auto; }.remove-button:hover { color:var(--red); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.metrics article { padding:18px; border-radius:12px; background:var(--panel); border:1px solid var(--line); }.metrics span { color:var(--muted); display:block; font-size:.78rem; margin-bottom:9px; }.metrics strong { font-size:1.45rem; letter-spacing:-.03em; }.metrics small { font-size:.73rem; color:var(--muted); font-weight:600; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.8fr); gap:20px; margin-top:34px; }.section-heading { margin-bottom:15px; }.vehicle-list { display:grid; gap:12px; }.vehicle-card,.events-panel { background:var(--panel); border:1px solid var(--line); border-radius:13px; }.vehicle-card { padding:17px; }.vehicle-topline { justify-content:space-between; }.vehicle-name { display:flex; align-items:center; gap:11px; }.vehicle-icon { align-content:center; background:#31436b; border-radius:8px; color:#bdceff; font-size:.69rem; font-weight:750; height:35px; text-align:center; width:35px; }.vehicle-meta,.vehicle-details { color:var(--muted); font-size:.76rem; }.status-chip { border-radius:99px; background:#243149; color:#abb9d4; padding:5px 8px; text-transform:uppercase; font-size:.65rem; font-weight:750; letter-spacing:.06em; }.status-chip[data-status="charging"] { background:#16473e; color:#76edc5; }.status-chip[data-status="finished"] { background:#49391e; color:#ffd382; }.charge-row { gap:12px; margin:18px 0 10px; }.progress-track { background:#26314b; border-radius:99px; height:8px; overflow:hidden; flex:1; }.progress-fill { background:linear-gradient(90deg,var(--blue),var(--green)); height:100%; border-radius:inherit; transition:width .4s ease; }.soc-label { font-size:.86rem; width:39px; }.vehicle-details { gap:18px; }.vehicle-actions { gap:8px; margin-top:18px; }.stop-button { background:#362639; color:#ffc0c9; }.stop-button:disabled,.start-button:disabled { opacity:.42; cursor:default; }
.events-panel { padding:18px; min-height:380px; }.event-list { border-top:1px solid var(--line); list-style:none; margin:0; padding:0; }.event-list li { border-bottom:1px solid var(--line); display:grid; gap:3px; padding:11px 0; }.event-list time { color:var(--muted); font-size:.68rem; }.event-list strong { color:#b9c9e9; font-size:.79rem; }.event-list span { color:var(--muted); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.empty-events { color:var(--muted); font-size:.82rem; padding:18px 0; text-align:center; }
@media (max-width:850px) { .content-grid { grid-template-columns:1fr; }.events-panel { min-height:220px; }.metrics { grid-template-columns:repeat(2,1fr); }.connection-card { align-items:end; flex-wrap:wrap; }.endpoint-field { min-width:100%; } } @media (max-width:510px) { .app-shell { padding-top:26px; }.topbar { align-items:flex-start; flex-direction:column; }.compact-field { width:100%; }.connection-card .button { flex:1; }.vehicle-details { flex-wrap:wrap; gap:8px 16px; }.metrics { gap:8px; }.metrics article { padding:14px; }.metrics strong { font-size:1.17rem; } }