
  :root{
    --bg:#0a0a0b;
    --panel:#161618;
    --panel-2:#1c1c1f;
    --border:#2a2a2e;
    --border-soft:#232327;
    --text:#ececee;
    --muted:#8d8d94;
    --gold:#f5b50a;
    --gold-soft:#3a2f08;
    --cyan:#19b6cc;
    --green:#36c26a;
    --red:#e0443e;
    --blue:#3b82f6;
    --radius:10px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45}
  a{color:inherit}
  button{font-family:inherit;cursor:pointer}
  .wrap{max-width:1280px;margin:18px auto;padding:0 16px}
  .shell{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden}

  /* header */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:16px 22px;background:#101012;border-bottom:1px solid var(--border)}
  .brand{display:flex;align-items:center;gap:12px}
  .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#222,#0e0e10);
    border:1px solid #333;display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:18px}
  .brand h1{font-size:18px;margin:0;font-weight:700}
  .brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
  .pill{display:inline-flex;align-items:center;gap:6px;background:#0f2417;color:var(--green);
    border:1px solid #1d4a30;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
  .top-actions{display:flex;align-items:center;gap:8px}

  /* tabs */
  .tabs{display:flex;gap:4px;padding:0 16px;background:#101012;border-bottom:1px solid var(--border);overflow-x:auto}
  .tab{background:none;border:none;color:var(--muted);padding:14px 16px;font-size:13px;font-weight:600;
    border-bottom:2px solid transparent;white-space:nowrap}
  .tab.active{color:var(--gold);border-bottom-color:var(--gold)}
  .tab:hover{color:var(--text)}

  .panel-body{padding:22px}
  .hint{color:var(--muted);font-size:12px;margin:0 0 16px}

  /* stat cards */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
  .stat{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);
    padding:18px;border-left:3px solid var(--gold)}
  .stat:nth-child(2){border-left-color:var(--cyan)}
  .stat:nth-child(3){border-left-color:var(--green)}
  .stat:nth-child(4){border-left-color:var(--gold)}
  .stat .num{font-size:30px;font-weight:800;letter-spacing:-.5px}
  .stat .lbl{color:var(--muted);font-size:12px;margin-top:2px}
  .stat .sub{color:#6f6f76;font-size:11px;margin-top:4px}

  /* toolbar */
  .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
    background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:16px}
  .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
  .field{display:flex;flex-direction:column;gap:5px}
  .field label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  input,select,textarea{background:#0e0e10;border:1px solid var(--border);color:var(--text);
    border-radius:8px;padding:9px 11px;font-size:13px;outline:none}
  input:focus,select:focus,textarea:focus{border-color:var(--gold)}
  input[type=date]{color-scheme:dark}
  .search{min-width:200px}

  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);
    background:#1f1f22;color:var(--text);padding:9px 14px;border-radius:8px;font-size:13px;font-weight:600}
  .btn:hover{border-color:#3a3a40}
  .btn-gold{background:var(--gold);color:#000;border-color:var(--gold)}
  .btn-gold:hover{background:#ffc62a}
  .btn-ghost{background:transparent}
  .btn-sm{padding:6px 10px;font-size:12px}
  .btn-icon{padding:7px 9px}
  .btn-red{background:#3a1413;border-color:#5a201d;color:#ff8a85}
  .btn-green{background:#0f2417;border-color:#1d4a30;color:var(--green)}

  /* table */
  .table-card{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
  .table-scroll{overflow-x:auto}
  table{width:100%;border-collapse:collapse;min-width:1000px}
  th{background:#121214;color:var(--muted);text-align:left;padding:13px 14px;font-size:11px;
    text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);font-weight:700}
  td{padding:13px 14px;border-bottom:1px solid var(--border-soft);font-size:13px;vertical-align:middle}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:#1a1a1d}
  .ref{font-weight:700;color:var(--gold);background:#211b06;border:1px solid #3a2f08;
    padding:4px 8px;border-radius:6px;font-size:12px;white-space:nowrap}
  .badge{display:inline-block;padding:4px 11px;border-radius:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
  .b-upcoming{background:#0c3540;color:#54d6ea}
  .b-completed{background:#0f2417;color:var(--green)}
  .b-cancelled{background:#3a1413;color:#ff7b75}
  .pay{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;border:1px solid}
  .pay-full{background:#0f2417;color:var(--green);border-color:#1d4a30}
  .pay-deposit{background:#3a2f08;color:var(--gold);border-color:#5a4a10}
  .pay-whatsapp{background:#0c2e1a;color:#3fd373;border-color:#1d4a30}
  .pay-cash{background:#1a2a3a;color:#6fb6ff;border-color:#27425f}
  .price{font-weight:700;color:var(--gold);background:#211b06;padding:4px 8px;border-radius:6px;font-size:12px;white-space:nowrap}
  .driver-cell{display:flex;flex-direction:column;gap:2px}
  .driver-cell .dn{font-weight:700}
  .driver-cell .dp{color:var(--muted);font-size:11px}
  .none{color:#5f5f66;font-style:italic;font-size:12px}
  .balance{color:#ff9b6b;font-size:11px}
  .paid-full{color:var(--green);font-size:11px}
  .row-actions{display:flex;gap:6px;flex-wrap:wrap}

  .table-foot{display:flex;justify-content:space-between;align-items:center;padding:14px;color:var(--muted);font-size:12px;flex-wrap:wrap;gap:10px}

  /* modal */
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:flex-start;
    justify-content:center;padding:30px 16px;z-index:50;overflow-y:auto}
  .overlay.open{display:flex}
  .modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;width:100%;max-width:640px;
    animation:pop .18s ease}
  @keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
  .modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border)}
  .modal-head h3{margin:0;font-size:16px}
  .modal-body{padding:22px;max-height:70vh;overflow-y:auto}
  .modal-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
  .close-x{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;padding:0}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
  .form-field label{font-size:12px;color:var(--muted);font-weight:600}
  .form-field input,.form-field select,.form-field textarea{width:100%}
  .req{color:var(--red)}
  .calc-box{background:#0e0e10;border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-top:6px;
    display:flex;justify-content:space-between;font-size:13px}
  .calc-box .bal{color:#ff9b6b;font-weight:700}

  .notify-preview{background:#0e0e10;border:1px solid var(--border);border-radius:8px;padding:14px;
    white-space:pre-wrap;font-size:12.5px;color:#d6d6da;line-height:1.6;max-height:240px;overflow:auto;margin-bottom:14px}
  .notify-actions{display:flex;gap:10px;flex-wrap:wrap}
  .wa-btn{background:#25d366;color:#062b15;border-color:#25d366;font-weight:700}
  .wa-btn:hover{background:#2ee673}
  .mail-btn{background:#0c3540;color:#54d6ea;border-color:#0c3540;font-weight:700}

  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
    background:#1f1f22;border:1px solid var(--gold);color:var(--text);padding:13px 20px;border-radius:10px;
    font-size:13px;font-weight:600;opacity:0;transition:.25s;z-index:99;box-shadow:0 8px 30px rgba(0,0,0,.5)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  .empty{text-align:center;padding:50px 20px;color:var(--muted)}
  .empty .big{font-size:34px;margin-bottom:8px;opacity:.5}

  .info-note{background:#13212e;border:1px solid #1d3a52;color:#9fc7e8;border-radius:8px;
    padding:12px 14px;font-size:12px;margin-bottom:16px;line-height:1.6}
  .info-note b{color:#cfe6f7}

  @media(max-width:640px){.grid2{grid-template-columns:1fr}.brand small{display:none}}
