/* ====================================================================
   CareSpirit UI-Toolbox (Phase 8b) — ZENTRALE Design-Elemente.
   Hier einmal aendern = ueberall geaendert (Management, Buchungsverwaltung,
   Portal, Konto, Wizard). Wird VOR den System-Stylesheets geladen.
   ==================================================================== */
:root{
	--g:#009345;--gd:#006837;--gs:#e7f6ee;--ink:#15241c;--muted:#5d6b62;
	--line:#e3e8e5;--bg:#eef3f0;--white:#fff;--danger:#d4351c;--amber:#b9770f;
	--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--csa-side:252px; /* Breite der Desktop-Seitenleiste — NUR hier aendern */
}
*{box-sizing:border-box;}

/* ===== Banner oben (Topbar) — Referenz-Look Management-Konsole ===== */
.csm-top,.csa-top{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--g);background-image:linear-gradient(180deg,var(--g) 0%,var(--gd) 150%);color:#fff;padding:15px 20px 17px;box-shadow:0 8px 24px rgba(0,40,20,.10);position:sticky;top:0;}
.csm-top{z-index:20;}
.csa-top{z-index:6;min-height:var(--csa-top-h);}
.csm-brand,.csa-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:17px;min-width:0;}
.csa-brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.csm-top .csm-logo-badge,.csa-brandbadge{width:32px;height:32px;flex:0 0 auto;border-radius:9px;background:#fff;color:var(--gd);display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,30,15,.18);}
.csm-brand-sub,.csa-brand-sub{font-weight:600;color:rgba(255,255,255,.82);}
.csm-top-right,.csa-top-right{display:flex;align-items:center;gap:14px;}
.csm-who,.csa-who{font-size:13.5px;color:rgba(255,255,255,.88);}
.csm-top .csm-link,.csa-top .csa-link{color:rgba(255,255,255,.92);opacity:1;margin:0;}
.csm-top .csm-link:hover,.csa-top .csa-link:hover{color:#fff;}

/* ===== Status-Badges (Fahrt-Status, ueberall identisch) ===== */
.csa-badge,.csbp-badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap;}
.csa-badge-neu,.csbp-badge-neu{background:#eef2f7;color:#3a4a63;}
.csa-badge-bestätigt,.csa-badge-bestaetigt,.csbp-badge-bestaetigt,.csbp-badge-bestätigt{background:var(--gs);color:var(--gd);}
.csa-badge-unterwegs,.csbp-badge-unterwegs{background:#fff4e0;color:#9a6b00;}
.csa-badge-erledigt,.csbp-badge-erledigt{background:#e8f7ee;color:#127a3d;}
.csa-badge-storniert,.csbp-badge-storniert{background:#fde8e6;color:var(--danger);}

/* ===== Kennzeichen-Tags ===== */
.csm-tag{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#eef2f0;color:#3a4a41;}
.csa-tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;background:#eef2f7;color:#3a4a63;}
.csa-tag-backfill,.csbp-tag-backfill{background:#fff4e0;color:#9a6b1f;border:1px solid #f0dcb2;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700;vertical-align:1px;display:inline-block;}

/* ===== Leere Zustaende + Lade-Spinner ===== */
.csm-empty{text-align:center;color:var(--muted);padding:30px 14px;font-size:14px;}
.csa-empty,.csbp-empty{padding:40px 16px;text-align:center;color:var(--muted);}
.csm-spinner,.csa-spinner,.csbp-spinner{width:42px;height:42px;border:4px solid var(--gs);border-top-color:var(--g);border-radius:50%;animation:csbu-spin .8s linear infinite;}
.csm-spinner{margin:auto;}
@keyframes csbu-spin{to{transform:rotate(360deg);}}

/* ===== Formular-Grundelemente (Label + Eingabefelder + Fokus) ===== */
.csm-form label,.csa-form label,.csm-card label,.csa-card label{font-size:13px;font-weight:600;color:#2a3a31;}
.csm-form input,.csm-form select,.csa-form input,.csa-form select,.csm-card input,.csa-card input,.csbp-mform input:not([type=checkbox]),.csbp-mform select{border:2px solid var(--line);outline:none;font-family:inherit;}
.csm-form input:focus,.csm-form select:focus,.csa-form input:focus,.csa-form select:focus,.csm-card input:focus,.csa-card input:focus,.csbp-mform input:not([type=checkbox]):focus,.csbp-mform select:focus{border-color:var(--g);box-shadow:0 0 0 4px rgba(0,147,69,.1);}

/* ===== Endpointwerk-Credit (Fusszeile) ===== */
.csbp-credit{text-align:center;font-size:12px;color:#8a978f;padding:4px 0 18px;display:flex;align-items:center;justify-content:center;gap:7px;}
.csbp-credit img{height:15px;width:auto;display:block;opacity:.85;}

/* ===== Serien-Elemente (Phase 8e) ===== */
.csa-tag-series{background:#e8effc;color:#1c4f8a;}
.csa-wdays,.csbp-wdays{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 6px;}
.csa-wday,.csbp-wdays label{position:relative;display:inline-flex;}
.csa-wday input,.csbp-wdays label input{position:absolute;opacity:0;width:0;height:0;}
.csa-wday span,.csbp-wdays label span{display:inline-block;min-width:44px;text-align:center;padding:9px 10px;border:2px solid var(--line);border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;transition:.12s;background:var(--white);}
.csa-wday input:checked+span,.csbp-wdays label input:checked+span{background:var(--g);border-color:var(--g);color:#fff;}
.csbp-d-actions{margin:14px 0 4px;display:flex;gap:8px;flex-wrap:wrap;}
.csbp-series-form{margin-bottom:14px;}

/* ===== Tagesplan (Phase 8h) ===== */
.csa-dayplan{display:flex;flex-direction:column;gap:8px;}
.csa-dp-hour{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.05em;margin:14px 0 2px;border-bottom:1px solid var(--line);padding-bottom:4px;}
.csa-dp-item{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:12px;padding:11px 14px;cursor:pointer;transition:.12s;}
.csa-dp-item:hover{border-color:var(--g);box-shadow:0 6px 18px rgba(0,55,28,.07);}
.csa-dp-neu{border-left-color:#3a4a63;}
.csa-dp-bestätigt{border-left-color:var(--g);}
.csa-dp-unterwegs{border-left-color:#e0922b;}
.csa-dp-erledigt{border-left-color:#127a3d;opacity:.75;}
.csa-dp-storniert{border-left-color:var(--danger);opacity:.55;}
.csa-dp-item.is-cancelled .csa-dp-main{text-decoration:line-through;}
.csa-dp-time{font-weight:800;font-size:15px;color:var(--ink);flex:0 0 auto;min-width:48px;}
.csa-dp-main{min-width:0;flex:1;}
.csa-dp-route{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.csa-dp-right{display:flex;align-items:center;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;}
@media(max-width:560px){.csa-dp-item{flex-wrap:wrap;}.csa-dp-right{width:100%;justify-content:flex-start;}}

/* ===== mgmt-Statistik (Phase 8i) ===== */
.csm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:6px 0 8px;}
.csm-kpi{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center;}
.csm-kpi-n{font-size:26px;font-weight:800;color:var(--gd);line-height:1;}
.csm-kpi-l{font-size:12px;color:var(--muted);margin-top:6px;font-weight:600;}
.csm-chartwrap{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px;overflow-x:auto;}
.csm-chartwrap svg{width:100%;min-width:480px;height:auto;display:block;}
.csm-statrow{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:7px;font-size:13.5px;}
.csm-statname{flex:0 0 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.csm-statbar{flex:1;height:12px;background:#eef2f0;border-radius:99px;overflow:hidden;}
.csm-statbar span{display:block;height:100%;background:var(--g);border-radius:99px;}
.csm-statn{flex:0 0 auto;font-weight:800;color:var(--gd);}
@media(max-width:560px){.csm-statname{flex-basis:110px;}}

/* ====================================================================
   Phase 9a: Seitenleiste (Desktop) fuer die internen Werkzeuge.
   Gebaut aus den vorhandenen Elementen (top/tabs/main) — kein JS-Umbau.
   WICHTIG: kein zusaetzlicher Scrollbalken (Screen-Mindesthoehe aufheben,
   Inhalt uebernimmt die Hoehe). Unter 1100px bleibt alles wie gehabt
   (Mobil + App-WebView unveraendert).
   ==================================================================== */
@media (min-width: 1024px) {
  /* ---------- Buchungsverwaltung ---------- */
  .csa-screen[data-screen="app"].is-active { display: block; min-height: 0; }
  .csa-screen[data-screen="app"] .csa-top {
    position: fixed; left: 0; top: 0; width: var(--csa-side); height: 100vh;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 22px 16px 18px; border-radius: 0; z-index: 30; box-sizing: border-box;
    background-image: linear-gradient(180deg, var(--g) 0%, var(--gd) 130%);
    box-shadow: 2px 0 18px rgba(0, 40, 20, .12);
  }
  .csa-screen[data-screen="app"] .csa-brand { font-size: 17.5px; padding: 0 6px 18px; }
  .csa-screen[data-screen="app"] .csa-top-right {
    margin-top: auto; flex-direction: column; align-items: flex-start; gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, .22); padding: 14px 8px 0;
  }
  .csa-screen[data-screen="app"] .csa-who { font-size: 13px; }
  .csa-screen[data-screen="app"] .csa-tabs {
    position: fixed; left: 0; top: 84px; width: var(--csa-side); z-index: 31; box-sizing: border-box;
    flex-direction: column; gap: 3px; background: transparent; border: 0; padding: 0 12px; box-shadow: none;
  }
  .csa-screen[data-screen="app"] .csa-tab {
    display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
    padding: 11px 14px; border-radius: 11px; color: #fff; font-size: 15px; transition: .12s;
  }
  .csa-screen[data-screen="app"] .csa-tab:hover { background: rgba(255, 255, 255, .14); color: #fff; }
  .csa-screen[data-screen="app"] .csa-tab.is-active { background: #fff; color: var(--gd); box-shadow: 0 3px 12px rgba(0, 30, 15, .18); }
  .csa-screen[data-screen="app"] .csa-main {
    margin-left: var(--csa-side); max-width: none; width: auto;
    padding: 26px 36px 40px; box-sizing: border-box;
  }

  /* ---------- Management-Konsole ---------- */
  .csm-screen[data-screen="app"].is-active { display: block; min-height: 0; }
  .csm-app { min-height: 0; }
  .csm-screen[data-screen="app"] .csm-top {
    position: fixed; left: 0; top: 0; width: var(--csa-side); height: 100vh;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 22px 16px 18px; z-index: 30; box-sizing: border-box;
    background-image: linear-gradient(180deg, var(--g) 0%, var(--gd) 130%);
    box-shadow: 2px 0 18px rgba(0, 40, 20, .12);
  }
  .csm-screen[data-screen="app"] .csm-brand { font-size: 17.5px; padding: 0 6px 6px; }
  .csm-screen[data-screen="app"] .csm-top-right {
    margin-top: auto; flex-direction: column; align-items: flex-start; gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, .22); padding: 14px 8px 0;
  }
  .csm-screen[data-screen="app"] .csm-main {
    margin-left: var(--csa-side); max-width: none;
    padding: 26px 36px 20px; box-sizing: border-box;
  }
  .csm-screen[data-screen="app"] .csm-foot { margin-left: var(--csa-side); }
  .csm-modules { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 1150px; }
  .csm-chartwrap { max-width: 1150px; }

  /* ---------- mehrspaltige Listen auf breiten Screens ---------- */
  .csa-panel[data-panel="companies"] .csa-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; align-items: start;
  }
}
@media (min-width: 1600px) {
  .csa-screen[data-screen="app"] .csa-main,
  .csm-screen[data-screen="app"] .csm-main { padding-left: 52px; padding-right: 52px; }
}

/* ===== Phase 9b-9e: Herkunft, Gruppierung, Aufmerksamkeit, Ansichten ===== */
.csa-src{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11.5px;font-weight:700;background:#eef2f7;color:#3a4a63;}
.csa-src-business{background:#e8effc;color:#1c4f8a;}
.csa-src-customer{background:#e7f6ee;color:#1a6b3f;}
.csa-src-web{background:#f2f0fb;color:#5a3fa0;}
.csa-src-backfill{background:#fff4e0;color:#9a6b1f;}
.csa-src-series{background:#e8effc;color:#1c4f8a;}
.csa-tag-dupe{background:#fdeceb;color:#a3261f;}
.csa-row.is-nodriver{border-color:#e0922b;box-shadow:0 0 0 2px rgba(224,146,43,.15);}

.csa-group-h{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;grid-column:1/-1;}
.csa-group-h:first-child{margin-top:0;}
.csa-group-h:after{content:'';flex:1;height:1px;background:var(--line);}
.csa-group-n{background:var(--gs);color:var(--gd);border-radius:99px;padding:1px 9px;font-size:11.5px;}
.csa-grouped{display:block!important;}
.csa-group-list{display:flex;flex-direction:column;gap:10px;}

.csa-attn{margin-bottom:14px;}
.csa-attn-h{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.csa-attn-row{display:flex;flex-wrap:wrap;gap:10px;}
.csa-attn-card{display:flex;align-items:center;gap:10px;background:var(--white);border:2px solid var(--line);border-radius:14px;padding:12px 16px;cursor:pointer;font-family:inherit;transition:.12s;}
.csa-attn-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,55,28,.08);}
.csa-attn-ico{font-size:20px;}
.csa-attn-n{font-size:22px;font-weight:800;color:var(--ink);}
.csa-attn-l{font-size:13.5px;color:var(--muted);font-weight:600;}
.csa-attn-new{border-color:#bcd3f5;background:#f5f9ff;}
.csa-attn-nodriver{border-color:#f3cdb8;background:#fff8f2;}
.csa-attn-problems{border-color:#f0c0bb;background:#fff5f4;}
.csa-attn-ok{background:#f2faf5;border:1px solid #cfe9da;border-radius:12px;padding:10px 14px;font-size:13.5px;color:#1a6b3f;font-weight:600;}

.csa-views{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;}
.csa-view{background:var(--white);border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;transition:.12s;}
.csa-view:hover{border-color:var(--g);color:var(--gd);}
.csa-view-mine{color:var(--gd);border-color:#cfe9da;background:#f6fbf8;}
.csa-view-x{margin-left:7px;color:#b9c4bd;font-weight:800;}
.csa-view-x:hover{color:var(--danger);}
.csa-view-add{border-style:dashed;}

/* ====================================================================
   Phase 9L: EIN Design-System fuer alle internen Oberflaechen.
   Prinzip: ruhige Flaechen, EINE Akzentfarbe pro Status, Information
   in fester Reihenfolge (Zeit → Person → Strecke → Herkunft → Aktion).
   ==================================================================== */
:root {
  /* Status-Skala: gleiche Saettigung, gleiche Helligkeit — nur der Farbton wechselt */
  --st-neu-bg:#eef3fb;      --st-neu-fg:#2c4a78;   --st-neu-line:#5b83c4;
  --st-best-bg:#e9f6ef;     --st-best-fg:#1a6b41;  --st-best-line:#2f9c66;
  --st-unter-bg:#fdf3e3;    --st-unter-fg:#8a5a12;  --st-unter-line:#d99420;
  --st-erl-bg:#eef1f0;      --st-erl-fg:#5a6b62;   --st-erl-line:#93a69b;
  --st-storno-bg:#fbeceb;   --st-storno-fg:#973229; --st-storno-line:#cf6459;
  /* Hinweis-Toene (Warnungen bleiben dezent, damit Status fuehrt) */
  --warn-bg:#fdf3e3; --warn-fg:#8a5a12; --warn-line:#e8cfa4;
  --info-bg:#f1f4f8; --info-fg:#4a5a6b;
  --card-radius:14px;
}

/* ---------- Fahrt-Karte: klare Zonen statt Farbsalat ---------- */
.csa-row.csa-ride{
  display:grid; grid-template-columns:88px 1fr auto; grid-template-areas:'time main status' 'time meta status' 'quick quick quick';
  gap:2px 16px; align-items:start; padding:14px 16px; border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:var(--card-radius); background:var(--white); cursor:pointer; transition:.12s;
}
.csa-row.csa-ride:hover{border-color:#c9d6cf;border-left-color:inherit;box-shadow:0 6px 18px rgba(0,55,28,.07);transform:translateY(-1px);}
.csa-ride-time{grid-area:time;display:flex;flex-direction:column;gap:1px;}
.csa-ride-hhmm{font-size:19px;font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.02em;}
.csa-ride-date{font-size:11.5px;color:var(--muted);font-weight:600;}
.csa-ride-main{grid-area:main;min-width:0;}
.csa-ride-name{font-size:15.5px;font-weight:700;color:var(--ink);}
.csa-ride-route{grid-area:meta;min-width:0;font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px;}
.csa-ride-route b{font-weight:600;color:#3c4d44;}
.csa-ride-arrow{color:#9fb0a6;margin:0 4px;}
.csa-ride-status{grid-area:status;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.csa-ride-flags{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;}
.csa-ride-foot{grid-area:quick;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #f0f4f1;}
.csa-ride-src{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;min-width:0;}
.csa-ride-ref{font-size:11.5px;color:#9fb0a6;font-family:ui-monospace,Menlo,Consolas,monospace;margin-left:auto;}

/* Status faerbt NUR die linke Kante + das Abzeichen (ein Signal, nicht drei) */
.csa-ride[data-st="neu"]{border-left-color:var(--st-neu-line);}
.csa-ride[data-st="bestätigt"]{border-left-color:var(--st-best-line);}
.csa-ride[data-st="unterwegs"]{border-left-color:var(--st-unter-line);}
.csa-ride[data-st="erledigt"]{border-left-color:var(--st-erl-line);background:#fbfcfb;}
.csa-ride[data-st="storniert"]{border-left-color:var(--st-storno-line);background:#fcfbfb;}
.csa-ride[data-st="storniert"] .csa-ride-name,.csa-ride[data-st="storniert"] .csa-ride-hhmm{text-decoration:line-through;color:var(--muted);}
.csa-ride[data-st="erledigt"] .csa-ride-hhmm{color:var(--muted);}

/* Status-Abzeichen einheitlich (ersetzt die alten Badge-Farben) */
.csa-badge-neu{background:var(--st-neu-bg);color:var(--st-neu-fg);}
.csa-badge-bestätigt,.csa-badge-bestaetigt{background:var(--st-best-bg);color:var(--st-best-fg);}
.csa-badge-unterwegs{background:var(--st-unter-bg);color:var(--st-unter-fg);}
.csa-badge-erledigt{background:var(--st-erl-bg);color:var(--st-erl-fg);}
.csa-badge-storniert{background:var(--st-storno-bg);color:var(--st-storno-fg);}
.csbp-badge-neu{background:var(--st-neu-bg);color:var(--st-neu-fg);}
.csbp-badge-bestaetigt,.csbp-badge-bestätigt{background:var(--st-best-bg);color:var(--st-best-fg);}
.csbp-badge-unterwegs{background:var(--st-unter-bg);color:var(--st-unter-fg);}
.csbp-badge-erledigt{background:var(--st-erl-bg);color:var(--st-erl-fg);}
.csbp-badge-storniert{background:var(--st-storno-bg);color:var(--st-storno-fg);}

/* Hinweis-Chips: dezent, damit der Status fuehrt */
.csa-flag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:700;background:var(--info-bg);color:var(--info-fg);}
.csa-flag-driver{background:var(--st-best-bg);color:var(--st-best-fg);}
.csa-flag-nodriver{background:var(--warn-bg);color:var(--warn-fg);}
.csa-flag-warn{background:var(--warn-bg);color:var(--warn-fg);}
.csa-flag-alert{background:var(--st-storno-bg);color:var(--st-storno-fg);}
.csa-flag-series{background:#eef3fb;color:#2c4a78;}

/* ---------- Formular-Elemente: weich statt kantig ---------- */
.csa-filter,.csa-search,.csbp-select{
  border-radius:11px!important;border:1.5px solid var(--line)!important;background:var(--white);
  font-size:14.5px;padding:10px 14px;transition:.12s;box-shadow:0 1px 2px rgba(0,40,20,.03);
}
select.csa-filter,select.csbp-select{
  -webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235d6b62' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.csa-filter:hover,.csbp-select:hover{border-color:#c9d6cf!important;}
.csa-filter:focus,.csa-search:focus,.csbp-select:focus{border-color:var(--g)!important;box-shadow:0 0 0 3px rgba(0,147,69,.12);outline:none;}
.csa-toolbar{gap:8px;align-items:center;}

/* ---------- Abschnitts-Ueberschriften (Heute + Gruppen) ---------- */
.csa-sec{margin:22px 0 10px;display:flex;align-items:center;gap:10px;}
.csa-sec:first-child{margin-top:0;}
.csa-sec-t{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);}
.csa-sec-n{background:var(--gs);color:var(--gd);border-radius:99px;padding:1px 9px;font-size:11.5px;font-weight:700;}
.csa-sec-line{flex:1;height:1px;background:var(--line);}
.csa-sec-done .csa-sec-t{color:var(--muted);}
.csa-sec-done .csa-sec-n{background:#eef1f0;color:var(--muted);}

@media(max-width:620px){
  .csa-row.csa-ride{grid-template-columns:1fr auto;grid-template-areas:'time status' 'main main' 'meta meta' 'quick quick';gap:2px 10px;}
  .csa-ride-time{flex-direction:row;align-items:baseline;gap:7px;}
  .csa-ride-status{align-items:flex-end;}
}

/* ===== Phase 9N: Firmen-Detailseite ===== */
.csa-co-back{margin:0 0 14px;display:inline-block;}
.csa-cohero{display:flex;align-items:center;gap:20px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px;flex-wrap:wrap;}
.csa-cohero-logo{width:76px;height:76px;flex:0 0 auto;border-radius:16px;background:var(--gs);display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);}
.csa-cohero-logo img{width:100%;height:100%;object-fit:contain;background:#fff;}
.csa-cohero-ph{font-size:26px;font-weight:800;color:var(--gd);}
.csa-cohero-main{flex:1;min-width:200px;}
.csa-cohero-name{margin:0 0 5px;font-size:24px;font-weight:800;letter-spacing:-.02em;}
.csa-cohero-sub{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);}
.csa-cohero-sub code{background:#f1f5f3;border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:12.5px;color:var(--ink);}
.csa-cohero-kpis{display:flex;gap:26px;flex-wrap:wrap;}
.csa-cokpi{text-align:center;}
.csa-cokpi b{display:block;font-size:24px;font-weight:800;color:var(--gd);line-height:1.1;}
.csa-cokpi span{font-size:11.5px;color:var(--muted);font-weight:600;}
.csa-cogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:14px;}
.csa-cocard{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 20px 20px;}
.csa-cofull{margin-bottom:14px;}
.csa-cocard-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.csa-cocard-h h3{margin:0;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;}
.csa-cocard-h .csa-btn-sm{margin:0;}
.csa-cofield{display:flex;flex-direction:column;gap:1px;padding:8px 0;border-bottom:1px solid #f2f6f3;}
.csa-cofield:last-child{border-bottom:0;}
.csa-cofield-l{font-size:11.5px;color:var(--muted);font-weight:600;}
.csa-cofield-v{font-size:14.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
.csa-cofield-empty{color:#a8b5ad;font-weight:400;font-style:italic;}
.csa-cofield-h{font-size:11.5px;color:var(--muted);font-weight:400;}
.csa-cocard-foot{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.csa-cotoggle{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;color:var(--muted);border-bottom:1px solid #f2f6f3;}
.csa-cotoggle:last-child{border-bottom:0;}
.csa-cotoggle span{width:22px;height:22px;border-radius:7px;background:#eef1f0;color:#9fb0a6;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;}
.csa-cotoggle.is-on{color:var(--ink);font-weight:600;}
.csa-cotoggle.is-on span{background:var(--gs);color:var(--gd);}
.csa-cologo{display:flex;align-items:flex-start;gap:14px;}
.csa-cologo p{margin:0;}
.csa-cologo img,.csa-cologo .csa-cohero-ph{width:56px;height:56px;border-radius:12px;object-fit:contain;display:grid;place-items:center;font-size:19px;border:1px solid var(--line);}
.csa-cologo img{background:#fff;}
.csa-cologo .csa-cohero-ph{background:var(--gs);}
.csa-colist{display:flex;flex-direction:column;}
.csa-corow{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid #f2f6f3;cursor:pointer;}
.csa-corow:last-child{border-bottom:0;}
.csa-corow:hover{background:#fafcfb;}
.csa-coav{width:34px;height:34px;border-radius:10px;background:var(--gs);color:var(--gd);display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 auto;}
.csa-corow-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.csa-corow-main b{font-size:14px;}
.csa-corow-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.csa-codanger{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
@media(max-width:620px){
  .csa-cohero{gap:14px;padding:16px;}
  .csa-cohero-logo{width:56px;height:56px;}
  .csa-cohero-name{font-size:20px;}
  .csa-cohero-kpis{gap:18px;width:100%;justify-content:space-between;}
  .csa-corow-tags{justify-content:flex-start;}
}

/* ===== Phase 9M: Navigation in Abschnitten (Desktop-Sidebar + Handy) ===== */
.csa-navsec{display:flex;flex-direction:column;gap:2px;}
.csa-navsec-t{display:none;}
.csa-subtabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 18px;flex-wrap:wrap;}
.csa-subtab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;font-size:14.5px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;margin-bottom:-1px;}
.csa-subtab.is-active{color:var(--gd);border-bottom-color:var(--g);}
@media (max-width:1023px){
  .csa-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;padding:8px 12px;gap:4px;}
  .csa-tabs::-webkit-scrollbar{display:none;}
  .csa-navsec{flex-direction:row;gap:4px;align-items:center;flex:0 0 auto;}
  .csa-navsec+.csa-navsec{border-left:1px solid var(--line);margin-left:8px;padding-left:10px;}
  .csa-navsec-t{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding:0 6px 0 2px;}
  .csa-tab{white-space:nowrap;flex:0 0 auto;}
}
@media (min-width:1024px){
  .csa-screen[data-screen="app"] .csa-navsec-t{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:16px 14px 6px;}
  .csa-screen[data-screen="app"] .csa-navsec:first-child .csa-navsec-t{padding-top:4px;}
  .csa-screen[data-screen="app"] .csa-tabs{top:88px;bottom:150px;overflow-y:auto;}
}

/* ===== Phase 9Q: Vollbreite OHNE Kappungen — Inhalt fuellt alles rechts der Sidebar. ===== */
/* Fahrten IMMER einspaltig — nebeneinander zerreisst die Lesereihenfolge. */
@media (min-width:1024px){
  .csa-screen[data-screen="app"] .csa-panel[data-panel="bookings"] .csa-list,
  .csa-screen[data-screen="app"] .csa-panel[data-panel="dashboard"] .csa-list{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
  .csa-screen[data-screen="app"] .csa-main{max-width:none;margin-left:var(--csa-side);margin-right:0;}
}

/* Sidebar-Kopf: Marken-Zeichen + Schriftzug (statt Logo-Kachel) */
.csa-brandmark{width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:#fff;color:var(--g);display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,30,15,.22);}
.csa-brandmark svg{width:24px;height:24px;display:block;}
.csa-brandtxt{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.csa-brandtxt b{font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:#fff;white-space:nowrap;}
.csa-brandtxt span{font-size:11px;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:.03em;white-space:nowrap;}
@media (min-width:1024px){
  .csa-screen[data-screen="app"] .csa-top{padding:18px 16px;}
  .csa-screen[data-screen="app"] .csa-brand{width:100%;gap:11px;padding:0 4px;}
}
@media (max-width:1023px){
  .csa-brandmark{width:32px;height:32px;border-radius:10px;}
  .csa-brandmark svg{width:20px;height:20px;}
  .csa-brandtxt b{font-size:15px;}
  .csa-brandtxt span{display:none;}
}

/* Strich-Symbole statt Emoji */
.csa-tab-ico{width:19px;height:19px;flex:0 0 auto;}
.csa-tab{display:flex;align-items:center;gap:10px;}

/* Rechtliches immer ganz unten: die App ist eine Flex-Spalte, der Footer rutscht ans Seitenende. */
.csa-app{display:flex;flex-direction:column;min-height:100dvh;}
.csa-app>.csa-screen{width:100%;}
.csa-legal{margin-top:auto;}
@media (min-width:1024px){
  .csa-body.is-app .csa-legal{margin-left:var(--csa-side);padding:18px 40px 24px;justify-content:flex-start;}
}

/* Kassen-Genehmigungen: eingebettete Oberflaeche */
.csa-h2{font-size:20px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em;}
.csa-bill-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.csa-billgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:14px;}
.csa-drop{display:grid;place-items:center;text-align:center;border:2px dashed #b7cabf;border-radius:14px;padding:24px 16px;cursor:pointer;color:var(--muted);font-weight:600;font-size:13.5px;background:#fafdfb;transition:.15s;}
.csa-drop:hover,.csa-drop.is-over{border-color:var(--g);background:var(--gs);color:var(--gd);}
.csa-billfiles{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.csa-billfile{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;}
.csa-billfile button{background:none;border:0;color:var(--danger);cursor:pointer;font-family:inherit;font-size:15px;}
.csa-bill-kinfo{margin-top:10px;font-size:13px;color:var(--muted);background:var(--gs);border-radius:10px;padding:10px 12px;}
.csa-bill-status{font-size:13.5px;font-weight:600;}
.csa-bill-status.is-ok{color:var(--gd);}
.csa-bill-status.is-err{color:var(--danger);}

/* ===== Phase 9P: Tagesplan-Kopf mit Wochenstreifen ===== */
.csa-dphead{display:grid;grid-template-columns:minmax(280px,1.4fr) minmax(220px,.8fr);gap:14px;margin-bottom:18px;}
.csa-dpcal{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 16px 16px;}
.csa-dpcal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.csa-dpcal-title{text-align:center;line-height:1.25;}
.csa-dpcal-title b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;}
.csa-dpcal-title span{font-size:12.5px;color:var(--muted);}
.csa-dpnav{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:var(--white);color:var(--muted);font-size:18px;cursor:pointer;font-family:inherit;line-height:1;}
.csa-dpnav:hover{border-color:var(--g);color:var(--gd);}
.csa-dpweek{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.csa-dpday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:11px;border:1.5px solid transparent;background:#f6f9f7;cursor:pointer;font-family:inherit;transition:.12s;}
.csa-dpday:hover{background:var(--gs);}
.csa-dpday-w{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.csa-dpday-n{font-size:15px;font-weight:800;color:var(--ink);}
.csa-dpday.is-today .csa-dpday-n{color:var(--gd);}
.csa-dpday.is-today{border-color:#bfe3cd;}
.csa-dpday.is-active{background:var(--g);border-color:var(--g);}
.csa-dpday.is-active .csa-dpday-w,.csa-dpday.is-active .csa-dpday-n{color:#fff;}
.csa-dpmeta{display:flex;flex-direction:column;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 16px;}
.csa-dpkw,.csa-dpcount{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.csa-dpkw span,.csa-dpcount span{font-size:12px;color:var(--muted);font-weight:600;}
.csa-dpkw b,.csa-dpcount b{font-size:18px;font-weight:800;color:var(--gd);}
.csa-dpactions{display:flex;gap:8px;align-items:center;}
.csa-dpactions .csa-filter{flex:1;min-width:0;}
@media(max-width:820px){ .csa-dphead{grid-template-columns:1fr;} }

/* ===== Phase 9P: Statistik & Auswertungen ===== */
.csa-strange{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:16px;}
.csa-strange-presets{display:flex;flex-wrap:wrap;gap:6px;}
.csa-chipbtn{border:1.5px solid var(--line);background:var(--white);color:var(--muted);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:.12s;}
.csa-chipbtn:hover{border-color:var(--g);color:var(--gd);}
.csa-chipbtn.is-on{background:var(--g);border-color:var(--g);color:#fff;}
.csa-strange-dates{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.csa-strange-dates label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600;margin:0;}
.csa-strhead{font-size:13px;color:var(--muted);margin:0 2px 12px;}
.csa-strhead b{color:var(--ink);}
.csa-kpi-s{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.3;}
.csa-kpis-sm .csa-kpi-n{font-size:22px;}
.csa-legend{display:flex;gap:12px;align-items:center;font-size:11.5px;color:var(--muted);font-weight:600;}
.csa-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;}
.csa-stat2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:900px){ .csa-stat2{grid-template-columns:1fr;} }
.csa-colchart{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;align-items:end;height:150px;padding-top:6px;}
.csa-colbar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px;}
.csa-colbar-n{font-size:11.5px;font-weight:800;color:var(--ink);}
.csa-colbar-b{display:block;width:100%;max-width:46px;background:linear-gradient(180deg,#2bb56a,#009345);border-radius:6px 6px 3px 3px;min-height:4px;}
.csa-colbar-l{font-size:11px;color:var(--muted);font-weight:700;}
.csa-statstock{margin-top:14px;padding:12px 14px;background:var(--gs);border-radius:14px;font-size:13px;color:var(--muted);}
.csa-statstock b{color:var(--gd);}
.csa-exportcard{margin-top:18px;}
.csa-exportgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.csa-expbtn{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:12px 14px;border:1.5px solid var(--line);border-radius:13px;background:var(--white);cursor:pointer;font-family:inherit;transition:.12s;}
.csa-expbtn:hover{border-color:var(--g);background:var(--gs);}
.csa-expbtn:disabled{opacity:.55;cursor:default;}
.csa-expbtn b{font-size:14px;color:var(--ink);}
.csa-expbtn b:before{content:'⬇ ';color:var(--g);}
.csa-expbtn span{font-size:11.5px;color:var(--muted);line-height:1.35;}

/* ===== Phase 9P: Kassen-Genehmigungen (Oberflaeche im Verwaltungstool) ===== */
.csa-bill-head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.csa-billgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:820px){ .csa-billgrid{grid-template-columns:1fr;} }
.csa-bill-kinfo{margin-top:10px;padding:10px 12px;background:var(--gs);border-radius:11px;font-size:13px;line-height:1.5;}
.csa-drop{display:flex;align-items:center;justify-content:center;text-align:center;min-height:110px;padding:16px;border:2px dashed var(--line);border-radius:13px;color:var(--muted);font-size:13.5px;cursor:pointer;transition:.12s;line-height:1.5;}
.csa-drop:hover,.csa-drop.is-over{border-color:var(--g);background:var(--gs);color:var(--gd);}
.csa-billfiles{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.csa-billfile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--gs);border-radius:10px;font-size:13px;}
.csa-billfile button{border:0;background:transparent;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;padding:0 2px;font-family:inherit;}
.csa-billfile button:hover{color:#c2503f;}
.csa-bill-status{font-size:13px;font-weight:600;color:var(--muted);}
.csa-bill-status.is-ok{color:var(--gd);}
.csa-bill-status.is-err{color:#c2503f;}

.csa-billnote{margin:0 0 14px;padding:11px 14px;background:#fdf6e3;border:1px solid #e8d9a8;border-left:4px solid #e0b23c;border-radius:12px;font-size:13px;line-height:1.5;color:#5b4a1e;}
.csa-billnote b{color:#3f3210;}

/* ===== Phase 9f/9g: Verlauf + interne Notiz im Fahrt-Detail ===== */
.csa-note{width:100%;font-family:inherit;font-size:14px;padding:10px 12px;border:1.5px solid var(--line);border-radius:11px;background:var(--white);resize:vertical;min-height:56px;}
.csa-note:focus{outline:0;border-color:var(--g);}
.csa-noterow{display:flex;align-items:center;gap:12px;margin-top:8px;}
.csa-fullhist{margin:10px 0 4px;}
.csa-timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);}
.csa-timeline li{position:relative;display:flex;flex-wrap:wrap;gap:4px 12px;padding:7px 0;font-size:13px;line-height:1.45;}
.csa-timeline li:before{content:'';position:absolute;left:-19px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--g);}
.csa-tl-when{flex:0 0 128px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;}
.csa-tl-what{flex:1;min-width:180px;}
@media(max-width:520px){ .csa-tl-when{flex:1 0 100%;} }

.csa-dpmode{display:flex;gap:6px;}
.csa-dpmode .csa-chipbtn{flex:1;text-align:center;}
.csa-dp-day{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 8px;padding-bottom:6px;border-bottom:1.5px solid var(--line);}
.csa-dp-day span{font-size:14px;font-weight:800;color:var(--ink);}
.csa-dp-day b{font-size:12px;font-weight:700;color:var(--muted);}
.csa-dp-day:first-child{margin-top:4px;}

/* ===== Phase 9Q: Konto-Bereich unten links + Profilseite ===== */
.csa-me{display:flex;align-items:center;gap:10px;width:100%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:10px 12px;cursor:pointer;font-family:inherit;text-align:left;transition:.12s;}
.csa-me:hover{background:rgba(255,255,255,.18);}
.csa-me-ava{width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:#fff;color:var(--gd);display:grid;place-items:center;font-weight:800;font-size:13.5px;letter-spacing:.02em;}
.csa-me-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1;}
.csa-me-txt b{color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.csa-me-txt span{color:rgba(255,255,255,.65);font-size:11.5px;font-weight:600;}
.csa-me-arrow{color:rgba(255,255,255,.55);font-size:16px;}
.csa-me-out{align-self:center;margin-top:8px;}
@media (max-width:1023px){
  .csa-me{width:auto;background:transparent;border:0;padding:4px;}
  .csa-me-txt,.csa-me-arrow{display:none;}
  .csa-me-ava{width:30px;height:30px;font-size:12.5px;}
  .csa-me-out{margin-top:0;}
}

.csa-pfhead{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.csa-pfhead-ava{width:64px;height:64px;flex:0 0 auto;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px;letter-spacing:.02em;}
.csa-pfhead-t b{display:block;font-size:21px;font-weight:800;letter-spacing:-.01em;}
.csa-pfhead-t span{color:var(--muted);font-size:13px;}
.csa-pfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start;max-width:1100px;}
.csa-pfmeta{margin-top:14px;font-size:12.5px;color:var(--muted);}
.csa-2fa-state{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;}
.csa-2fa-state.is-on{color:var(--gd);}
.csa-2fa-state.is-off{color:#9a6b00;}
.csa-2fa-secret{font-family:ui-monospace,Consolas,monospace;font-size:14px;letter-spacing:.12em;background:var(--gs);border-radius:10px;padding:10px 12px;word-break:break-all;user-select:all;margin:8px 0;}
.csa-2fa-hint{font-size:12.5px;color:var(--muted);line-height:1.5;}

/* ===== Phase 10: Fahrzeuge ===== */
.csa-vcaps{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;}
.csa-vdue{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;margin-left:6px;}
.csa-vdue-warn{background:#fff4e0;color:#9a6b00;}
.csa-vdue-due{background:#fdeceb;color:#a3261f;}
.csa-vdue-okpill{background:var(--gs);color:var(--gd);margin-left:0;}
.csa-vhero-ico{width:76px;height:76px;flex:0 0 auto;border-radius:16px;background:var(--gs);display:grid;place-items:center;font-size:34px;border:1px solid var(--line);}
@media(max-width:1023px){
  .csa-vord1{order:1;} .csa-vord2{order:2;} .csa-vord3{order:3;}
}

.csa-dpveh{margin:0 0 14px;}
.csa-dpveh-line{width:100%;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--ink);cursor:pointer;font-family:inherit;line-height:1.5;}
.csa-dpveh-line:hover{border-color:var(--g);}
.csa-dpveh-arr{color:var(--muted);float:right;}
.csa-dpveh-list{background:var(--white);border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;margin-top:-8px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px;}
.csa-dpveh-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f7faf8;border:1px solid transparent;border-radius:11px;padding:10px 12px;font-size:14px;cursor:pointer;font-family:inherit;text-align:left;}
.csa-dpveh-row:hover{border-color:var(--g);background:var(--gs);}
.csa-dpveh-warn{font-size:12.5px;font-weight:700;color:#9a6b00;background:#fff4e0;border-radius:9px;padding:7px 11px;margin-top:4px;}
.csa-dpveh-pick{display:flex;flex-direction:column;gap:6px;}
.csa-dpveh-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#f7faf8;border:1.5px solid transparent;border-radius:11px;padding:11px 13px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;text-align:left;}
.csa-dpveh-opt:hover{border-color:var(--g);background:var(--gs);}
.csa-dpveh-opt.is-cur{border-color:var(--g);}
.csa-dpveh-swap{margin-top:12px;padding:11px 13px;background:#fff4e0;border-radius:11px;font-size:13.5px;line-height:2;}

.csa-myveh{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--g);border-radius:12px;padding:11px 14px;font-size:14.5px;margin-bottom:14px;}

.csa-vehline{margin-top:10px;padding:10px 12px;background:#f7faf8;border:1px solid var(--line);border-radius:11px;font-size:13.5px;line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.csa-vehline .csa-filter{flex:1;min-width:180px;}