*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a1018;--bg2:#0f1923;--bg3:#1a2332;
  --border:#1e2d3d;--border2:#2d3748;
  --accent:#ff9900;--text:#e8eaed;--text2:#a0aec0;--text3:#4a5568;
  --green:#68d391;--red:#fc8181;--yellow:#f6ad55;--blue:#63b3ed;
}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);font-size:13px;min-height:100vh}

/* ===== LOGIN ===== */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0a1018 0%,#1a2332 100%);
}
.login-card{
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:12px;padding:36px 32px;width:360px;text-align:center;
}
.login-logo{font-size:42px;margin-bottom:12px}
.login-card h1{font-size:18px;font-weight:700;color:var(--accent);margin-bottom:4px}
.login-sub{font-size:12px;color:var(--text3);margin-bottom:24px}
.login-card .form-group{text-align:left;margin-bottom:14px}
.login-card label{display:block;font-size:11px;color:var(--text2);font-weight:600;margin-bottom:5px}
.login-card input{
  width:100%;padding:9px 11px;background:var(--bg);
  border:1px solid var(--border2);border-radius:6px;
  color:var(--text);font-size:13px;outline:none;transition:border-color .15s
}
.login-card input:focus{border-color:var(--accent)}
.btn-full{width:100%;margin-top:4px}
.login-error{
  margin-top:12px;padding:8px;border-radius:6px;
  background:rgba(252,129,129,.1);color:var(--red);font-size:12px;text-align:center
}

/* ===== APP ===== */
.app{display:flex;flex-direction:column;height:100vh}

/* HEADER */
.header{
  background:var(--bg3);border-bottom:1px solid var(--border);
  padding:10px 20px;display:flex;align-items:center;gap:20px;flex-shrink:0;
}
.header-icon{font-size:24px}
.header-title{font-size:15px;font-weight:700;color:var(--accent)}
.header-sub{font-size:11px;color:var(--text3)}
.header-stats{display:flex;gap:28px;margin-left:24px}
.stat{text-align:center}
.stat-val{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.stat-val.red{color:var(--red)}
.stat-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--green);animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.btn-icon{
  background:none;border:1px solid var(--border2);color:var(--text2);
  width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.btn-icon:hover{border-color:var(--accent);color:var(--accent)}
.btn-icon.logout:hover{border-color:var(--red);color:var(--red)}

/* NAV */
.nav{
  background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;padding:0 20px;flex-shrink:0;
}
.nav-btn{
  background:none;border:none;color:var(--text2);font-size:13px;font-weight:500;
  padding:12px 16px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;
}
.nav-btn:hover{color:var(--text)}
.nav-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

/* TABS */
.tab{display:none;flex-direction:column;flex:1;overflow:hidden}
.tab.active{display:flex}

/* TOOLBAR */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 20px;background:var(--bg2);border-bottom:1px solid var(--border);
  flex-shrink:0;gap:12px;
}
.filter-group{display:flex;gap:4px}
.filter-btn{
  background:none;border:1px solid var(--border2);color:var(--text2);
  font-size:12px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .15s;
}
.filter-btn:hover{border-color:var(--accent);color:var(--text)}
.filter-btn.active{background:rgba(255,153,0,.12);border-color:var(--accent);color:var(--accent)}
.toolbar-right{display:flex;align-items:center;gap:10px}
.count-lbl{font-size:11px;color:var(--text3)}

.btn-sm{
  font-size:11px;padding:4px 10px;border-radius:4px;cursor:pointer;
  border:1px solid;font-weight:500;transition:opacity .15s;
}
.btn-sm:hover{opacity:.8}
.btn-danger{background:rgba(252,129,129,.1);border-color:#9b2c2c;color:var(--red)}

/* TABLE */
.table-wrap{flex:1;overflow-y:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table thead{position:sticky;top:0;z-index:1;background:var(--bg3)}
.data-table th{
  text-align:left;padding:8px 12px;font-size:11px;font-weight:600;
  color:var(--text3);text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid var(--border);
}
.data-table td{
  padding:7px 12px;border-bottom:1px solid var(--border);
  vertical-align:top;font-size:12px;
}
.data-table tbody tr:hover{background:rgba(255,255,255,.02)}

.ts{color:var(--text3);font-size:11px;white-space:nowrap}

/* Badges */
.badge{
  display:inline-block;font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:10px;white-space:nowrap;
}
.badge-sent    {background:rgba(104,211,145,.15);color:var(--green);border:1px solid rgba(104,211,145,.3)}
.badge-failed  {background:rgba(252,129,129,.15);color:var(--red);  border:1px solid rgba(252,129,129,.3)}
.badge-skipped {background:rgba(246,173,85,.15); color:var(--yellow);border:1px solid rgba(246,173,85,.3)}
.badge-ok      {background:rgba(104,211,145,.15);color:var(--green);border:1px solid rgba(104,211,145,.3)}
.badge-err     {background:rgba(252,129,129,.15);color:var(--red);  border:1px solid rgba(252,129,129,.3)}
.badge-upcoming   {background:rgba(246,173,85,.15); color:var(--yellow);border:1px solid rgba(246,173,85,.3)}
.badge-in_transit {background:rgba(99,179,237,.15); color:var(--blue);  border:1px solid rgba(99,179,237,.3)}
.badge-history    {background:rgba(104,211,145,.15);color:var(--green); border:1px solid rgba(104,211,145,.3)}
.badge-canceled   {background:rgba(252,129,129,.15);color:var(--red);   border:1px solid rgba(252,129,129,.3)}

.trip-id{font-family:monospace;color:var(--accent)}
.chat-id{font-family:monospace;font-size:11px;color:var(--text3)}
.preview{color:var(--text2);max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.err-txt{color:var(--red);font-size:11px}

/* EMPTY */
.empty{
  text-align:center;padding:60px 20px;color:var(--text3);font-size:14px;line-height:2.5
}
.empty span{display:block;font-size:40px;margin-bottom:4px}

/* TRIPS GRID */
.trips-grid{
  flex:1;overflow-y:auto;padding:16px 20px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:12px;align-content:start;
}
.trip-card{
  background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:14px;
  transition:border-color .15s;
}
.trip-card:hover{border-color:var(--accent)}
.tc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tc-id{font-family:monospace;font-size:13px;font-weight:700;color:var(--accent)}
.tc-route{font-size:11px;color:var(--text2);margin-bottom:10px}
.tc-route strong{color:var(--text)}
.tc-stops{margin-bottom:10px}
.stop-row{
  display:flex;align-items:center;gap:6px;font-size:11px;
  color:var(--text2);margin-bottom:5px;
}
.stop-type{width:18px;text-align:center}
.stop-name{color:var(--text);font-weight:500}
.stop-city{color:var(--text3);font-size:10px;flex:1}
.ci-badge{
  font-size:10px;padding:1px 5px;border-radius:3px;white-space:nowrap;
}
.ci-done   {background:rgba(104,211,145,.15);color:var(--green)}
.ci-pending{color:var(--text3)}
.tc-footer{
  border-top:1px solid var(--border);padding-top:8px;margin-top:8px;
  display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--text3);
}
.tc-footer span{color:var(--text2)}

/* BUTTONS */
.btn{
  padding:8px 16px;border:none;border-radius:6px;
  cursor:pointer;font-size:12px;font-weight:600;transition:opacity .15s;
}
.btn:hover{opacity:.85}
.btn-primary{background:var(--accent);color:#000}

/* SETTINGS TAB */
.settings-section{max-width:520px;margin:32px auto;padding:0 16px}
.settings-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px}
.settings-desc{font-size:13px;color:var(--text2);margin-bottom:24px}
.settings-form{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:24px}
.sform-group{margin-bottom:18px}
.sform-group label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.sform-group .hint{color:var(--text3);font-weight:400;text-transform:none;font-size:11px}
.sform-group input{width:100%;padding:9px 12px;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-size:13px;outline:none;transition:border .2s}
.sform-group input:focus{border-color:var(--accent)}
.sform-group small{display:block;font-size:11px;color:var(--text3);margin-top:5px}
.sform-actions{display:flex;gap:10px;margin-top:8px}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}
.settings-msg{margin-top:14px;font-size:13px;font-weight:500;min-height:20px}
.settings-msg.ok{color:var(--green)}
.settings-msg.err{color:var(--red)}
.settings-msg.warn{color:var(--yellow)}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}