/* ============ Station Bus Nation — DRIVER ZONE · styles (dark, mobile-first) ============ */
:root{
  --dz-bg:#070E18; --dz-bg2:#0C1826; --dz-card:#111F30; --dz-card2:#162A3E;
  --dz-line:#22374F; --dz-ink:#EAF1FB; --dz-mut:#8CA3BF;
  --dz-gold:#E7B65D; --dz-gold-d:#C89438; --dz-navy:#0A1C30;
  --dz-green:#2FBF71; --dz-amber:#E7B65D; --dz-red:#E5544B;
  --dz-font:"Inter","Segoe UI",system-ui,sans-serif; --dz-disp:"Sora","Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--dz-bg);color:var(--dz-ink);font-family:var(--dz-font);-webkit-font-smoothing:antialiased}
body{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:78px}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h2{font-family:var(--dz-disp);font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:4px}
h2 .ti{color:var(--dz-gold)}
.dz-h3{font-family:var(--dz-disp);font-size:14px;color:var(--dz-mut);text-transform:uppercase;letter-spacing:1px;margin:22px 0 10px;display:flex;align-items:center;gap:7px}
.dz-h3 .ti{color:var(--dz-gold)}
.dz-sub{color:var(--dz-mut);font-size:13.5px;margin-bottom:14px}

/* ---------- header ---------- */
.dz-head{background:linear-gradient(180deg,var(--dz-navy),var(--dz-bg2));border-bottom:1px solid var(--dz-line);padding:16px 16px 14px;position:sticky;top:0;z-index:30}
.dz-head-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dz-greet{font-family:var(--dz-disp);font-size:18px;font-weight:700}
.dz-coach{font-size:12px;color:var(--dz-mut);margin-top:2px}
.dz-duty{background:var(--dz-card);border:1px solid var(--dz-line);border-radius:12px;padding:8px 12px;color:var(--dz-ink);font-size:12px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;cursor:pointer;min-width:118px}
.dz-duty b{font-size:12.5px}
.dz-duty-green b{color:var(--dz-green)} .dz-duty-gold b{color:var(--dz-amber)} .dz-duty-red b{color:var(--dz-red)}
.dz-duty-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.dz-dot-off{background:var(--dz-mut)} .dz-dot-onduty{background:var(--dz-amber)} .dz-dot-driving{background:var(--dz-green);box-shadow:0 0 0 3px rgba(47,191,113,.2)}

/* ---------- sections ---------- */
.dz-sec{padding:16px}
.dz-daychip{font-size:12px;font-weight:700;color:var(--dz-gold);text-transform:uppercase;letter-spacing:1px;margin:14px 0 8px}
.dz-empty{background:var(--dz-card);border:1px dashed var(--dz-line);border-radius:12px;padding:22px;text-align:center;color:var(--dz-mut);font-size:14px}

/* ---------- HOS panel ---------- */
.dz-hos{background:var(--dz-card);border:1px solid var(--dz-line);border-radius:16px;padding:15px;margin-bottom:18px}
.dz-hos-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.dz-hos-head span{font-family:var(--dz-disp);font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
.dz-hos-head .ti{color:var(--dz-gold)}
.dz-hos-head small{color:var(--dz-mut);font-size:11px}
.dz-hos-bars{display:flex;flex-direction:column;gap:12px}
.dz-hos-bar-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.dz-hos-bar-top span{color:var(--dz-mut)}
.dz-track{height:10px;background:#0A1522;border-radius:99px;overflow:hidden}
.dz-fill{height:100%;border-radius:99px;transition:width .5s ease}
.dz-hos-bar small{font-size:11px;color:var(--dz-mut);margin-top:3px;display:block}
.dz-green,.dz-fill.dz-green{color:var(--dz-green)} .dz-fill.dz-green{background:linear-gradient(90deg,#1E7A4A,var(--dz-green))}
.dz-gold,.dz-fill.dz-gold{color:var(--dz-amber)} .dz-fill.dz-gold{background:linear-gradient(90deg,var(--dz-gold-d),var(--dz-gold))}
.dz-red,.dz-fill.dz-red{color:var(--dz-red)} .dz-fill.dz-red{background:linear-gradient(90deg,#A8352E,var(--dz-red))}
.dz-duty-btns{display:flex;gap:8px;margin-top:14px}
.dz-duty-btn{flex:1;background:var(--dz-bg2);border:1px solid var(--dz-line);border-radius:11px;color:var(--dz-mut);padding:10px 4px;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-family:var(--dz-font)}
.dz-duty-btn .ti{font-size:18px}
.dz-duty-btn.on{background:var(--dz-gold);color:#101C2B;border-color:var(--dz-gold)}

/* ---------- trip cards ---------- */
.dz-trip{background:var(--dz-card);border:1px solid var(--dz-line);border-radius:16px;padding:15px;margin-bottom:12px}
.dz-trip-next{border-color:var(--dz-gold);box-shadow:0 0 0 1px var(--dz-gold),0 10px 30px rgba(0,0,0,.35)}
.dz-trip-flag{display:inline-flex;align-items:center;gap:6px;background:var(--dz-gold);color:#101C2B;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.dz-trip-top{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.dz-trip-time{text-align:center;background:var(--dz-navy);border:1px solid var(--dz-line);border-radius:12px;padding:8px 12px;min-width:88px}
.dz-trip-time b{display:block;font-family:var(--dz-disp);font-size:18px;color:var(--dz-gold)}
.dz-trip-time small{font-size:10px;color:var(--dz-mut);text-transform:uppercase;letter-spacing:1px}
.dz-trip-grp b{font-family:var(--dz-disp);font-size:16px;display:block}
.dz-trip-grp small{color:var(--dz-mut);font-size:12.5px;display:flex;align-items:center;gap:5px;margin-top:3px}
.dz-leg{border-left:2px dashed var(--dz-line);margin-left:6px;padding-left:16px}
.dz-leg-row{display:flex;gap:10px;align-items:flex-start;position:relative}
.dz-pin{position:absolute;left:-24px;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--dz-card)}
.dz-pin-a{background:var(--dz-gold)} .dz-pin-b{background:var(--dz-green)}
.dz-leg-row b{font-size:14.5px} .dz-leg-row small{display:block;color:var(--dz-mut);font-size:12px}
.dz-leg-line{color:var(--dz-mut);font-size:12px;padding:7px 0;font-style:italic}
.dz-trip-note{background:var(--dz-bg2);border-radius:10px;padding:10px 12px;font-size:12.5px;color:#C6D5E8;margin-top:12px;display:flex;gap:8px}
.dz-trip-note .ti{color:var(--dz-gold);flex-shrink:0}
.dz-trip-acts{display:flex;align-items:center;gap:8px;margin-top:12px}
.dz-drop{margin-left:auto;font-size:12px;color:var(--dz-mut)}

/* ---------- buttons ---------- */
.dz-btn{background:var(--dz-gold);color:#101C2B;border:0;border-radius:11px;font-family:var(--dz-font);font-weight:700;font-size:14px;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.dz-btn.sm{padding:8px 12px;font-size:12.5px;border-radius:9px}
.dz-btn.ghost{background:transparent;border:1.5px solid var(--dz-line);color:var(--dz-ink)}
.dz-btn.wide{width:100%;margin-top:14px}
.dz-link{background:none;border:0;color:var(--dz-mut);font-size:13px;cursor:pointer;margin-top:10px;width:100%;font-family:var(--dz-font)}

/* ---------- chips ---------- */
.dz-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dz-chips::-webkit-scrollbar{display:none}
.dz-chip{white-space:nowrap;background:var(--dz-card);border:1px solid var(--dz-line);color:var(--dz-mut);border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--dz-font)}
.dz-chip .ti{font-size:15px}
.dz-chip.on{background:var(--dz-gold);color:#101C2B;border-color:var(--dz-gold)}

/* ---------- road spots ---------- */
.dz-spot{background:var(--dz-card);border:1px solid var(--dz-line);border-radius:14px;padding:13px;margin-bottom:10px}
.dz-spot-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dz-spot-top b{font-size:15px}
.dz-stars{margin-left:auto;color:var(--dz-gold);font-size:13px;font-weight:700}
.dz-stars small{color:var(--dz-mut);font-weight:400}
.dz-tag-you{background:var(--dz-navy);color:var(--dz-gold);font-size:10px;padding:2px 7px;border-radius:99px;border:1px solid var(--dz-line)}
.dz-spot-where{color:var(--dz-mut);font-size:12.5px;margin:6px 0;display:flex;align-items:center;gap:5px}
.dz-spot-note{font-size:13px;color:#C6D5E8;line-height:1.5}
.dz-spot-acts{display:flex;align-items:center;gap:8px;margin-top:11px}
.dz-hours{font-size:12px;color:var(--dz-mut);display:flex;align-items:center;gap:5px;margin-right:auto}

/* ---------- chat ---------- */
.dz-chatsec{display:flex;flex-direction:column}
.dz-thread{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 320px);overflow-y:auto;padding:4px 2px 12px}
.dz-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:82%}
.dz-msg.mine{align-self:flex-end;align-items:flex-end}
.dz-msg-who{font-size:11px;color:var(--dz-gold);font-weight:700;margin-bottom:3px;padding-left:4px}
.dz-bubble{background:var(--dz-card);border:1px solid var(--dz-line);padding:9px 13px;border-radius:14px 14px 14px 4px;font-size:14px;line-height:1.45}
.dz-msg.mine .dz-bubble{background:var(--dz-gold);color:#101C2B;border-color:var(--dz-gold);border-radius:14px 14px 4px 14px}
.dz-msg-t{font-size:10.5px;color:var(--dz-mut);margin-top:3px;padding:0 4px}
.dz-composer{display:flex;gap:8px;position:sticky;bottom:0;padding-top:8px;background:linear-gradient(180deg,transparent,var(--dz-bg) 30%)}
.dz-composer input{flex:1;background:var(--dz-card);border:1px solid var(--dz-line);border-radius:99px;padding:12px 16px;color:var(--dz-ink);font-size:14px;font-family:var(--dz-font);outline:none}
.dz-composer input:focus{border-color:var(--dz-gold)}
.dz-send{width:46px;height:46px;border-radius:50%;background:var(--dz-gold);color:#101C2B;border:0;font-size:19px;cursor:pointer;flex-shrink:0}

/* ---------- alerts ---------- */
.dz-alert{background:var(--dz-card);border:1px solid var(--dz-line);border-radius:14px;padding:13px;margin-bottom:10px;display:flex;gap:12px;position:relative;cursor:pointer}
.dz-alert.urgent{border-color:var(--dz-red)}
.dz-alert.read{opacity:.6}
.dz-alert-ic{width:38px;height:38px;border-radius:11px;background:var(--dz-navy);color:var(--dz-gold);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.dz-alert.urgent .dz-alert-ic{background:rgba(229,84,75,.15);color:var(--dz-red)}
.dz-alert-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.dz-alert-top b{font-size:14.5px} .dz-alert-top small{color:var(--dz-mut);font-size:11px;white-space:nowrap}
.dz-alert-body p{font-size:13px;color:#C6D5E8;margin:4px 0 0;line-height:1.45}
.dz-alert-body .dz-btn{margin-top:10px}
.dz-unread{position:absolute;top:13px;right:13px;width:9px;height:9px;border-radius:50%;background:var(--dz-gold)}

/* ---------- me ---------- */
.dz-profile{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.dz-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--dz-gold),var(--dz-gold-d));color:#101C2B;font-family:var(--dz-disp);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dz-avatar.big{width:60px;height:60px;font-size:26px}
.dz-profile b{font-family:var(--dz-disp);font-size:18px;display:block}
.dz-profile small{display:block;color:var(--dz-mut);font-size:12.5px}
.dz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dz-stat{background:var(--dz-card);border:1px solid var(--dz-line);border-radius:12px;padding:12px 4px;text-align:center}
.dz-stat b{font-family:var(--dz-disp);font-size:16px;display:block;color:var(--dz-gold)}
.dz-stat small{font-size:10.5px;color:var(--dz-mut)}
.dz-exp{background:var(--dz-card);border:1px solid var(--dz-line);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.dz-exp b{font-size:14px} .dz-exp small{display:block;color:var(--dz-mut);font-size:12px;margin-top:2px}
.dz-exp-tag{font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--dz-bg2)}
.dz-me-row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--dz-line);font-size:14px}
.dz-me-row .ti{color:var(--dz-gold)}

/* ---------- tab bar ---------- */
.dz-tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;background:var(--dz-bg2);border-top:1px solid var(--dz-line);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
.dz-tab{flex:1;background:none;border:0;color:var(--dz-mut);font-family:var(--dz-font);font-size:10.5px;font-weight:600;padding:9px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative}
.dz-tab .ti{font-size:21px}
.dz-tab.on{color:var(--dz-gold)}
.dz-tab-sos{color:var(--dz-red)}
.dz-badge{position:absolute;top:4px;right:calc(50% - 20px);background:var(--dz-red);color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* ---------- login ---------- */
.dz-login{padding:40px 22px;text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.dz-login-brand img{height:64px;margin:0 auto 10px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.dz-login-word{font-family:var(--dz-disp);font-weight:700;letter-spacing:2px;font-size:15px}
.dz-login-zone{font-family:var(--dz-disp);font-weight:700;letter-spacing:4px;font-size:22px;color:var(--dz-gold);margin-top:2px}
.dz-login-tag{color:var(--dz-mut);font-size:14px;margin:14px 0 26px}
.dz-login-card{background:var(--dz-card);border:1px solid var(--dz-line);border-radius:18px;padding:18px;text-align:left}
.dz-lbl{display:block;font-size:12px;color:var(--dz-mut);font-weight:600;letter-spacing:.5px;margin:4px 0 8px}
.dz-lbl small{font-weight:400}
.dz-driver-pick{width:100%;display:flex;align-items:center;gap:12px;background:var(--dz-bg2);border:1px solid var(--dz-line);border-radius:13px;padding:12px;margin-bottom:10px;cursor:pointer;color:var(--dz-ink);font-family:var(--dz-font);text-align:left}
.dz-dp-main{flex:1} .dz-dp-main b{display:block;font-size:15px} .dz-dp-main small{color:var(--dz-mut);font-size:12.5px}
.dz-driver-pick .ti{color:var(--dz-mut)}
.dz-pin{width:100%;background:var(--dz-bg2);border:1.5px solid var(--dz-line);border-radius:12px;padding:14px;color:var(--dz-ink);font-size:24px;letter-spacing:12px;text-align:center;font-family:var(--dz-disp);outline:none;margin-bottom:12px}
.dz-pin:focus{border-color:var(--dz-gold)}
.dz-pin.err{border-color:var(--dz-red);animation:dzshake .4s}
@keyframes dzshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.dz-login-foot{color:var(--dz-mut);font-size:11px;text-align:center;margin-top:22px}

/* ---------- modal ---------- */
#dz-modal-back{position:fixed;inset:0;background:rgba(3,8,16,.74);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.dz-modal{background:var(--dz-card);border:1px solid var(--dz-line);border-radius:18px 18px 0 0;width:100%;max-width:520px;padding:22px 18px 30px;position:relative;animation:dzup .25s ease}
@keyframes dzup{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
.dz-modal h3{font-family:var(--dz-disp);font-size:18px;margin-bottom:4px}
.dz-modal-x{position:absolute;top:14px;right:14px;background:var(--dz-bg2);border:1px solid var(--dz-line);color:var(--dz-ink);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px}
.dz-in{width:100%;background:var(--dz-bg2);border:1.5px solid var(--dz-line);border-radius:11px;padding:12px;color:var(--dz-ink);font-size:15px;font-family:var(--dz-font);outline:none;margin-bottom:12px}
.dz-in:focus{border-color:var(--dz-gold)}
.dz-ratepick{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dz-ratestar{background:none;border:0;color:var(--dz-gold);font-size:38px;cursor:pointer;line-height:1;opacity:.4;transition:opacity .1s}
.dz-ratestar:hover,.dz-ratestar:hover~.dz-ratestar{opacity:1}
.dz-ratepick:hover .dz-ratestar{opacity:1}

/* add-a-trip form */
.dz-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* trip cover — the brotherhood button */
.dz-cover-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  margin-top: 10px; padding: 10px; border-radius: 10px; border: 1.5px dashed rgba(231,182,93,.55);
  background: rgba(231,182,93,.07); color: #E7B65D; font-size: 13px; font-weight: 600; cursor: pointer; }
.dz-cover-flag { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px;
  border-radius: 10px; background: rgba(231,182,93,.12); border: 1px solid rgba(231,182,93,.4);
  color: #E7B65D; font-size: 12.5px; line-height: 1.5; }
.dz-cover-trip { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 10px 12px; margin: 10px 0 12px; }
.dz-cover-trip b { display: block; } .dz-cover-trip small { opacity: .75; }
.dz-modal-foot { font-size: 11.5px; opacity: .65; text-align: center; margin-top: 10px; }
select.dz-in { appearance: none; -webkit-appearance: none; }