:root {
    --bg: #f4f6fb;
    --panel: #ffffff;
    --border: #e6e9f2;
    --text: #1a2233;
    --muted: #7a8699;
    --brand: #2f6bff;
    --brand-2: #1f4fd8;
    --green: #16a34a;
    --green-bg: #e8f8ee;
    --orange: #f59e0b;
    --orange-bg: #fef3e2;
    --red: #ef4444;
    --red-bg: #fdecec;
    --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    --shadow-lg: 0 10px 30px rgba(16,24,40,.12);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #dfe3ec;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.45;
    display: flex;
    justify-content: center;
  }

  .phone {
    width: 100%;
    max-width: 430px;
    height: 100vh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 480px) {
    .phone { height: 92vh; margin-top: 4vh; border-radius: 34px; box-shadow: var(--shadow-lg); border: 10px solid #0f1b33; }
  }

  .app-head {
    background: linear-gradient(135deg, #0f1b33, #1e2f52);
    color: #fff;
    padding: 16px;
    flex-shrink: 0;
  }
  .head-row { display: flex; align-items: center; justify-content: space-between; }
  .head-row .hello { font-size: 12.5px; color: #9fb0d0; }
  .head-row .name { font-size: 17px; font-weight: 800; }
  .head-actions { display: flex; gap: 8px; }
  .head-actions .icon-btn {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,.12); border: none; color: #fff;
    font-size: 15px; cursor: pointer;
  }

  .scroll { flex: 1; overflow-y: auto; padding: 12px 12px 84px; -webkit-overflow-scrolling: touch; }
  .scroll::-webkit-scrollbar { width: 0; }
  .view { display: none; animation: fade .2s ease; }
  .view.active { display: block; }
  @keyframes fade { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} }

  .card {
    background: var(--panel); border-radius: 16px; padding: 14px;
    box-shadow: var(--shadow); margin-bottom: 12px;
  }
  .card .card-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; display:flex; justify-content:space-between; align-items:center; }

  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .stat { background: var(--panel); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); }
  .stat .lbl { font-size: 11px; color: var(--muted); }
  .stat .val { font-size: 19px; font-weight: 800; margin-top: 2px; }
  .stat .val.green { color: var(--green); }
  .stat .sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

  .order {
    background: var(--panel); border-radius: 16px; padding: 14px;
    box-shadow: var(--shadow); margin-bottom: 12px; cursor: pointer;
    border: 1px solid transparent; transition: .15s;
  }
  .order:active { transform: scale(.985); }
  .order-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .order-id { font-size: 12px; color: var(--muted); font-weight: 600; }
  .status-pill { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 700; }
  .st-new { background: #eef2ff; color: var(--brand); }
  .st-accepted { background: var(--green-bg); color: var(--green); }
  .st-done { background: #eef2f7; color: var(--muted); }

  .route { display: flex; align-items: flex-start; gap: 10px; }
  .route-dots { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 2px; }
  .route-dots .d { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .route-dots .d.a { background: var(--brand); }
  .route-dots .d.b { background: var(--green); }
  .route-dots .line { width: 2px; height: 22px; background: #d6dbe8; }
  .route-pts { flex: 1; min-width: 0; }
  .route-pts .pt { font-size: 13.5px; font-weight: 600; }
  .route-pts .pt.muted { color: var(--muted); font-weight: 400; font-size: 11.5px; }

  .order-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
  .price .val { font-size: 19px; font-weight: 800; color: var(--text); }

  .chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; }
  .chips::-webkit-scrollbar { height: 0; }
  .chip {
    background: #fff; border: 1px solid var(--border); border-radius: 20px;
    padding: 6px 12px; font-size: 12.5px; color: var(--muted); font-weight: 600;
    white-space: nowrap; cursor: pointer;
  }
  .chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 15px; border-radius: 12px; border: none;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s;
    font-family: inherit; width: 100%;
  }
  .btn-primary { background: var(--brand); color: #fff; }
  .btn-green { background: var(--green); color: #fff; }
  .btn-ghost { background: #fff; border: 1px solid var(--border); color: var(--text); }
  .btn-sm { padding: 7px 12px; font-size: 12px; border-radius: 8px; }

  .tabbar {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--border);
    display: flex; padding: 6px 2px 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 40;
  }
  .tabbar .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--muted); font-size: 9.5px; font-weight: 600; cursor: pointer;
    padding: 3px 0; text-align: center;
  }
  .tabbar .tab .ico { font-size: 17px; }
  .tabbar .tab.active { color: var(--brand); }

  .sheet {
    position: absolute; inset: 0; background: var(--bg);
    transform: translateX(100%); transition: transform .25s ease;
    z-index: 50; display: flex; flex-direction: column;
  }
  .sheet.open { transform: translateX(0); }
  .sheet-head {
    background: #fff; padding: 12px 14px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  }
  .sheet-head .back { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 14px; }
  .sheet-head h3 { font-size: 15px; }
  .sheet-body { flex: 1; overflow-y: auto; padding: 12px; }

  .kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; align-items: center; }
  .kv:last-child { border-bottom: none; }
  .kv .k { color: var(--muted); }
  .kv .v { font-weight: 600; text-align: right; }

  .profile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg,#2f6bff,#7c3aed); color:#fff; display:grid; place-items:center; font-weight:800; font-size: 20px; flex-shrink: 0; }
  .profile-head .nm { font-size: 17px; font-weight: 800; }
  .rating { display: inline-flex; align-items: center; gap: 4px; color: var(--orange); font-weight: 700; font-size: 12.5px; }
  .field { margin-bottom: 10px; }
  .field label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
  .field input, .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; outline: none; font-family: inherit; background: #fff; }

  .toast-wrap { position: absolute; bottom: 74px; left: 12px; right: 12px; z-index: 300; display: flex; flex-direction: column; gap: 6px; }
  .toast { background: #0f1b33; color: #fff; padding: 10px 14px; border-radius: 11px; font-size: 13px; box-shadow: var(--shadow-lg); animation: slidein .25s ease; }
  .toast.ok { background: var(--green); }
  .toast.err { background: var(--red); }
  .toast.info { background: var(--brand); }
  @keyframes slidein { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform:none;} }

  .badge { font-size: 10px; padding: 2px 7px; border-radius: 6px; font-weight: 700; }
  .badge.pro { background: var(--brand); color: #fff; }
  .badge.jur { background: #e0f2fe; color: #0369a1; }
  .badge.phys { background: #fef3c7; color: #b45309; }

  .order.exchange { border-color: #f0b429; background: linear-gradient(0deg,#fffaf0,#fff); }
  .exch-tag { font-size: 10.5px; color: #b45309; background: var(--orange-bg); padding: 2px 7px; border-radius: 6px; font-weight: 700; display:inline-block; margin-top:3px; }

  .client-card, .friend-card { background: #fff; border-radius: 14px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border); box-shadow: var(--shadow); }
  .client-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
  .client-name { font-weight: 700; font-size: 14.5px; }

  .friend-card { display: flex; align-items: center; justify-content: space-between; }
  .friend-info { display: flex; align-items: center; gap: 10px; }
  .friend-avatar { width: 42px; height: 42px; border-radius: 50%; background: #e0e7ff; color: var(--brand); font-weight: 800; display: grid; place-items: center; font-size: 15px; }
  .friend-status { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 4px; }
  .friend-status.off { background: var(--muted); }

  .friend-select-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .friend-select-item:last-child { border-bottom: none; }
  .friend-select-item input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand); }
  input[type=range] { width: 100%; accent-color: var(--brand); margin-top: 4px; }

  /* ===== Google/Yandex Calendar Grid Style ===== */
  .cal-toolbar { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
  .cal-grid-wrap { overflow-x: auto; max-height: 440px; border: 1px solid var(--border); border-radius: 12px; background: #fff; position: relative; }
  .cal-grid { display: grid; grid-template-columns: 50px repeat(3, minmax(110px, 1fr)); min-width: 380px; }
  .cal-header-cell { background: #f8fafc; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 8px 4px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); position: sticky; top: 0; z-index: 10; }
  .cal-time-cell { border-bottom: 1px solid #f1f3f9; border-right: 1px solid var(--border); padding: 4px; font-size: 10px; color: var(--muted); text-align: right; height: 36px; background: #fafbfc; }
  .cal-slot-cell { border-bottom: 1px solid #f1f3f9; border-right: 1px solid var(--border); height: 36px; position: relative; cursor: pointer; transition: background .1s; }
  .cal-slot-cell:hover { background: #eef2ff; }
  
  .cal-event { position: absolute; inset: 2px 4px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; z-index: 5; box-shadow: var(--shadow); cursor: pointer; }
  .cal-event.done { background: var(--green); }
  .cal-event.exchange { background: var(--orange); color: #3a2a00; }
  .cal-event.blocked { background: #cbd5e1; color: #334155; border: 1px dashed #94a3b8; }

/* Driver onboarding — separate registration flow */
.registration { position:absolute; inset:0; z-index:500; background:#f4f6fb; display:flex; flex-direction:column; }
.registration[hidden] { display:none; }
.reg-top { background:linear-gradient(135deg,#0f1b33,#1e2f52); color:white; padding:22px 20px 20px; }
.reg-brand { font-weight:800; font-size:18px; letter-spacing:.1px; }
.reg-caption { margin-top:13px; font-size:12px; color:#9fb0d0; }
.reg-title { font-size:22px; font-weight:800; margin-top:3px; }
.reg-progress { height:5px; display:flex; gap:5px; margin-top:19px; }
.reg-progress span { flex:1; border-radius:8px; background:#465675; }
.reg-progress span.done { background:#65a0ff; }
.reg-body { flex:1; overflow-y:auto; padding:18px 16px 24px; }
.reg-card { background:white; border-radius:16px; padding:16px; box-shadow:var(--shadow); margin-bottom:12px; }
.reg-card h3 { font-size:15px; margin-bottom:5px; }
.reg-hint { font-size:12px; color:var(--muted); margin:0 0 14px; }
.reg-field { margin-bottom:14px; }
.reg-field label { font-weight:700; display:block; font-size:12px; margin-bottom:6px; }
.reg-field input,.reg-field select { display:block; width:100%; background:#fff; border:1px solid #d8deeb; border-radius:10px; padding:11px 12px; font:inherit; min-height:44px; }
.reg-field input:focus,.reg-field select:focus { border-color:var(--brand); outline:2px solid #dce8ff; }
.reg-field small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.reg-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.reg-upload { display:block; border:1px dashed #aebcda; padding:12px; border-radius:12px; margin-top:10px; cursor:pointer; }
.reg-upload strong { display:block; font-size:12px; }
.reg-upload small { color:var(--muted); font-size:11px; }
.reg-upload input { max-width:100%; margin-top:8px; font-size:11px; }
.reg-foot { flex-shrink:0; display:flex; gap:10px; padding:12px 16px 18px; background:#fff; border-top:1px solid var(--border); }
.reg-foot .btn { flex:1; }
.reg-step { display:none; }
.reg-step.active { display:block; }
.reg-error { color:#b91c1c; font-size:12px; margin:0 0 10px; display:none; }
.reg-checkbox { display:flex; gap:10px; align-items:flex-start; font-size:12px; line-height:1.5; }
.reg-checkbox input { margin-top:3px; accent-color:var(--brand); }
.reg-summary { font-size:13px; line-height:1.9; }
.reg-success { text-align:center; padding-top:26px; }
.reg-success .check { display:grid; place-items:center; border-radius:50%; background:#e8f8ee; color:var(--green); font-size:34px; width:76px; height:76px; margin:0 auto 20px; }


/* Фото автомобиля при регистрации */
.reg-photo-progress {font-size:12px;font-weight:700;color:#2f6bff;margin:12px 0 10px}
.reg-photo-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.reg-photo-tile {display:flex;flex-direction:column;gap:5px;border:1.5px dashed #bac6dc;border-radius:13px;padding:10px;min-height:140px;background:#fbfcff;cursor:pointer;position:relative;overflow:hidden}
.reg-photo-tile:last-child {grid-column:1/-1}
.reg-photo-tile.uploaded {border-color:#16a34a;background:#f2fcf5}
.reg-photo-tile .photo-label {font-size:12px;font-weight:750}
.reg-photo-tile .photo-hint {font-size:10.5px;color:#7a8699}
.reg-photo-tile .photo-placeholder {display:flex;flex:1;align-items:center;justify-content:center;font-size:31px;min-height:64px;color:#8395b1}
.reg-photo-tile img {width:100%;height:90px;object-fit:cover;border-radius:8px;display:none}
.reg-photo-tile.uploaded img {display:block}
.reg-photo-tile.uploaded .photo-placeholder {display:none}
.reg-photo-tile input {position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.reg-photo-tile .photo-status {font-size:10.5px;color:#2f6bff;font-weight:700}
.reg-photo-tile.uploaded .photo-status {color:#15803d}
  .setup-item{display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid #edf0f5;padding:12px 0} .setup-item:last-child{border-bottom:0}.setup-item .setup-label{font-weight:650;font-size:12.5px;flex:1}.setup-item .setup-unit{font-size:10.5px;color:var(--muted);margin-top:2px}.setup-item input{width:105px;min-width:0;flex:none;text-align:right;border:1px solid #d8deeb;border-radius:9px;padding:10px;font:inherit}.setup-section{font-size:14px;font-weight:800;margin:0 0 8px}.extra-switch{width:20px;height:20px;accent-color:var(--brand);flex:none}.extra-price{max-width:125px;text-align:right}.extra-off{opacity:.7}.setup-chip{font-size:10px;border-radius:7px;background:#f1f5f9;color:#64748b;padding:4px 7px}.reg-preview{padding:12px;border-radius:12px;background:#eff6ff;font-size:12px;color:#1e40af;margin-bottom:12px}
  .reg-legal-item{border:1px solid #e6e9f2;border-radius:12px;padding:12px;margin-top:10px;background:#f8fafc}
  .reg-legal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
  .reg-legal-header strong{font-size:13px}
  .reg-doc-link{border:0;background:none;color:#2f6bff;font-size:12px;font-weight:700;cursor:pointer;text-align:left}
  .reg-legal-modal:not([hidden]){display:flex}
  .reg-legal-modal{position:absolute;inset:0;z-index:500;background:rgba(15,27,51,.6);align-items:center;justify-content:center;padding:16px}
  .reg-legal-panel{background:#fff;border-radius:16px;padding:20px;width:100%;max-width:390px;box-shadow:0 12px 32px #0003}
  .reg-legal-panel h3{font-size:16px}
  .reg-legal-panel .reg-hint{margin:15px 0 20px}

/* SaaS reference pricing and global support */
.price-compare {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;font-size:10.5px;color:#6b7280}
.price-status {font-size:10px;font-weight:750;border-radius:7px;padding:4px 6px;display:inline-block;margin-top:5px}
.price-green {background:#dcfce7!important;border-color:#16a34a!important;color:#166534!important}
.price-yellow {background:#fef3c7!important;border-color:#eab308!important;color:#92400e!important}
.price-locked {background:#fee2e2!important;border-color:#ef4444!important;color:#991b1b!important}
.setup-item .price-field {width:116px;min-width:105px; flex-shrink:0;display:flex;flex-direction:column}
.setup-item .price-field input {width:100%;}
.platform-note {font-size:11px;color:#64748b;line-height:1.5;background:#f8fafc;padding:10px;border-radius:9px;margin-bottom:12px}
.support-fab {position:absolute;z-index:800;right:14px;bottom:84px;border:0;border-radius:30px;color:white;background:#2f6bff;padding:12px 14px;box-shadow:0 5px 16px #132b6c55;cursor:pointer;font-size:13px;font-weight:800}
.support-overlay {position:absolute;z-index:810;inset:0;background:#0c18344d;display:flex;align-items:flex-end;justify-content:center}
.support-overlay[hidden]{display:none}
.support-panel {background:white;width:100%;height:min(76%,620px);border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden}
.support-header {padding:15px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e6e9f2}
.support-messages {flex:1;overflow:auto;padding:14px;background:#f4f6fb;display:flex;flex-direction:column;gap:10px}
.support-bubble {max-width:91%;align-self:flex-start;background:white;border:1px solid #e6e9f2;padding:10px 12px;border-radius:12px;font-size:12px}
.support-bubble.mine {align-self:flex-end;background:#e0ebff;border-color:#c5d6ff}
.support-compose {display:flex;gap:8px;padding:12px;border-top:1px solid #e6e9f2}
.support-compose input {flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:10px;padding:10px}
.geo-option{display:flex;align-items:center;gap:9px;margin:11px 0;font-size:13px;cursor:pointer}.geo-option input{accent-color:#2f6bff;width:17px;height:17px}.geo-chip{background:#edf3ff;border-radius:18px;padding:6px 9px;font-size:12px;color:#1f4fd8;display:inline-flex;align-items:center;gap:5px}.geo-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-weight:bold}

/* Fleet module */
.fleet-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px}.fleet-tab{border:1px solid #dce3f0;background:white;border-radius:11px;padding:9px 12px;font-size:12px;white-space:nowrap;cursor:pointer}.fleet-tab.active{background:#2f6bff;color:#fff;border-color:#2f6bff}.fleet-note{background:#eef5ff;border-radius:12px;padding:11px;font-size:12px;color:#234c83;margin:10px 0}.fleet-grid{overflow-x:auto;background:#fff;border:1px solid #e6e9f2;border-radius:12px}.fleet-line{display:grid;grid-template-columns:115px repeat(12,minmax(37px,1fr));min-width:590px;border-bottom:1px solid #e9edf5;min-height:47px;align-items:stretch}.fleet-line>div{border-right:1px solid #edf0f5;padding:8px 3px;font-size:10px;min-width:0}.fleet-line .fleet-label{font-weight:700;padding:6px 7px;font-size:11px;display:flex;align-items:center}.fleet-slot{background:#fff;cursor:pointer}.fleet-slot.busy{background:#dbeafe;color:#1d4ed8;font-weight:750}.fleet-slot.conflict{background:#fef3c7}.fleet-slot.maintenance{background:#e2e8f0;color:#475569}.fleet-main-btn{margin:10px 0}.fleet-card{border:1px solid #e3e8f0;border-radius:14px;background:#fff;padding:13px;margin-bottom:10px}.fleet-pill{border-radius:30px;padding:3px 9px;font-size:11px;background:#f1f5f9}.fleet-car-choice{display:block;border:1px solid #e1e7f0;border-radius:12px;padding:11px;margin:8px 0;cursor:pointer}.fleet-car-choice:has(input:checked){border-color:#2f6bff;background:#eff6ff}.fleet-car-choice input{margin-right:6px;accent-color:#2f6bff}.fleet-car-choice small{display:block;color:#64748b;margin:4px 0 0 22px}.fleet-error{color:#b91c1c;font-size:12px;margin:10px 0}

/* DriverCRM Driver v16 — shared visual tokens from DriverCRM Staff v9.
   Presentation-only layer. No remote fonts, images or UI dependencies. */
:root {
 --ui-bg:#f1f4f9; --ui-surface:#fff; --ui-text:#2c3038; --ui-muted:#838891;
 --ui-line:#e5e8ed; --ui-input:#d6dbe2; --ui-blue:#589ff0; --ui-blue-hover:#3f8fe9;
 --ui-blue-light:#eef6ff; --ui-blue-border:#c1ddf8; --ui-green:#dff5e8; --ui-red:#fff1f2;
 --ui-shadow:0 4px 18px rgba(45,65,97,.055); --ui-font:Arial,'Helvetica Neue',sans-serif;
 --bg:var(--ui-bg); --panel:var(--ui-surface); --border:var(--ui-line); --text:var(--ui-text);
 --muted:var(--ui-muted); --brand:var(--ui-blue); --brand-2:var(--ui-blue-hover);
 --green:#388269; --green-bg:#dff5e8; --orange:#b38c4b; --orange-bg:#fff7e8;
 --red:#bc6870; --red-bg:#fff1f3; --shadow:var(--ui-shadow); --shadow-lg:0 12px 36px #2d416118;
 color-scheme:light;
}
html,body { min-width:320px; font-family:var(--ui-font); }
body { font-family:var(--ui-font);font-size:14px;font-weight:400;color:var(--ui-text);background:linear-gradient(135deg,#f5f7fb 0%,#edf1f7 100%);-webkit-font-smoothing:antialiased;line-height:1.5; }
button,input,select,textarea { font-family:var(--ui-font); }
button,a,input,select,textarea { touch-action:manipulation; }
button { transition:background-color .15s,border-color .15s,color .15s; }
button:disabled { cursor:not-allowed;opacity:.5; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=button]:focus-visible { outline:3px solid #9acbfc;outline-offset:2px; }
input::placeholder,textarea::placeholder { color:#989fa9;opacity:1; }
input[type=checkbox],input[type=radio],input[type=range] { accent-color:var(--ui-blue)!important; }
b,strong { font-weight:500; }
[hidden] { display:none!important; }
.phone { width:100%;max-width:450px;height:100vh;height:100dvh;background:var(--ui-bg);isolation:isolate; }
@media(min-width:480px) {
 .phone { height:calc(100vh - 40px);height:calc(100dvh - 40px);max-height:1000px;margin:20px 0;border:1px solid #d5dbe4;border-radius:23px;box-shadow:0 8px 38px #2d416114; }
}
.app-head { background:white;color:var(--ui-text);padding:16px 18px 17px;border-bottom:1px solid var(--ui-line); }
.d-brandline { display:flex;align-items:center;min-height:36px;padding-right:110px;margin-bottom:17px; }
.d-brand { display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:#4e535c;font-size:19px;font-weight:500;letter-spacing:-.6px;line-height:1.2; }
.d-brand em { color:var(--ui-blue);font-style:normal; }
.d-brand-mark { display:grid;place-items:center;width:27px;height:27px;background:#5a9eea;color:white;border-radius:7px;font-size:19px;font-weight:600;letter-spacing:-1px; }
.head-row { gap:12px; }
.d-head-person { display:flex;align-items:center;gap:10px;min-width:0; }
.d-head-avatar { width:39px;height:39px;background:#f0f2f5;color:#9ba4b1;border:1px solid #e9ecf0;border-radius:50%;display:grid;place-items:center;flex-shrink:0; }
.head-row .hello { color:#8b929c;font-size:11px; }
.head-row .name { color:#353b44;font-size:17px;font-weight:500;line-height:1.35;max-width:245px;overflow-wrap:anywhere; }
.head-actions { gap:7px;flex-shrink:0; }
.head-actions .icon-btn { width:34px;height:36px;border:1px solid #e3e8f0;background:#f9fbfe;border-radius:8px;color:#7e9fbe;display:grid;place-items:center;font-size:15px; }
.head-actions .icon-btn:hover { background:#edf5ff;color:var(--ui-blue);border-color:#c4ddf8; }
.ui-icon { width:19px;height:19px;vertical-align:middle;flex-shrink:0;display:inline-block;stroke-width:1.65; }
.d-inline-icon { width:17px;height:17px;margin-right:5px;vertical-align:-3px;color:#80a6cf; }
.scroll { padding:16px 14px 96px;overscroll-behavior:contain; }
.card,.stat,.order,.client-card,.friend-card,.reg-card,.fleet-card { background:#fff;border:1px solid #e6eaf0;border-radius:16px;box-shadow:var(--ui-shadow); }
.card { padding:16px;margin-bottom:14px; }
.card[style*="linear-gradient"] { background:white!important;border-color:#e6eaf0!important; }
.card[style*="2px solid"] { border:1px solid #d6e5f7!important; }
.card .card-title { font-size:15px;font-weight:500;line-height:1.45;gap:10px;margin-bottom:12px; }
.card .card-title>span:first-child { min-width:0; }
.card .card-title>.btn { flex-shrink:0; }
.card-title>button { font-weight:400; }
.stats { gap:10px;margin-bottom:16px; }
.stat { padding:15px;min-height:104px; }
.stat .lbl { font-size:11px;color:#8a929e; }
.stat .val { font-size:23px;letter-spacing:-.5px;font-weight:500;line-height:1.5;color:#394351; }
.stat .val.green { color:#43826b; }
.stat .sub { font-size:10px;color:#959da8;margin-top:2px; }
.d-section-heading { display:flex;align-items:center;gap:8px;color:#363b44;font-size:17px;letter-spacing:-.2px;font-weight:500;margin:21px 2px 12px; }
.d-section-heading .ui-icon { width:19px;color:#8299b6; }
.chips { gap:5px;padding-bottom:13px; }
.chip { border-color:#e0e5ec;border-radius:7px;padding:8px 11px;font-size:11px;font-weight:400;color:#7d8591;background:#fff; }
.chip.active { background:#589ff0;color:white;border-color:#589ff0; }
.chip:hover:not(.active) { background:#f5f9ff;border-color:#c5daf1; }
.order { border-color:#e6eaf0;padding:16px;margin-bottom:13px; }
.order.exchange { background:#fff;border-color:#e0e8f3; }
.order-top { gap:10px;margin-bottom:15px;align-items:flex-start; }
.order-id { font-size:11px;color:#8a95a4;font-weight:400; }
.status-pill { font-size:10px;font-weight:400;padding:3px 8px;border:1px solid transparent;white-space:nowrap; }
.st-new { background:#edf5ff;color:#518ec5;border-color:#d3e5f8; }
.st-accepted { background:#ddf5e7;color:#388269;border-color:#b7e5ce; }
.st-done { background:#f2f4f8;color:#8a94a2;border-color:#e4e8ef; }
.route { gap:11px; }
.route-pts .pt { font-size:14px;font-weight:500;color:#434d5d;line-height:1.5; }
.route-pts .pt.muted { font-size:11px;font-weight:400;color:#929aa7;margin-top:5px; }
.route-dots .d { width:8px;height:8px; }
.route-dots .d.b { background:#8bb3d8; }
.route-dots .line { background:#dfe8f3;height:23px;width:1px; }
.order-bottom { margin-top:15px;padding-top:12px;border-top:1px solid #edf0f4; }
.price .val { font-size:21px;color:#384555;font-weight:500;letter-spacing:-.4px; }
.exch-tag { background:#f2f6fc;color:#7c95b2;border:1px solid #e4eaf3;font-size:10px;font-weight:400;border-radius:5px; }
.btn { min-height:42px;border-radius:7px;padding:10px 14px;font-size:13px;font-weight:400;line-height:1.5;box-shadow:none; }
.btn-primary,.btn-green { border:1px solid var(--ui-blue);background:var(--ui-blue);color:#fff; }
.btn-primary:hover,.btn-green:hover { background:var(--ui-blue-hover);border-color:var(--ui-blue-hover); }
.btn-ghost { background:#fff;border:1px solid #d7dce2;color:#616772; }
.btn-ghost:hover { background:#f7faff;border-color:#bfcfde; }
.btn-sm { min-height:33px;border-radius:7px;padding:7px 10px;font-size:11px;font-weight:400; }
.btn-danger-ghost { background:#fff6f6;border:1px solid #efcbd0!important;color:#b56b74!important; }
.tabbar { border-top:1px solid #e4e9f0;box-shadow:0 -3px 14px #34476604;background:#fff;padding:8px 5px max(10px,env(safe-area-inset-bottom));gap:2px; }
.tabbar .tab { color:#939aa4;font-size:9px;font-weight:400;gap:5px;padding:8px 0 6px;border-radius:8px;min-height:51px;line-height:1.2; }
.tabbar .tab .ico { font-size:18px;line-height:1; }
.tabbar .tab .ico .ui-icon { width:19px;height:19px;display:block; }
.tabbar .tab.active { background:#edf5ff;color:#549eea; }
.tabbar .tab:hover { background:#f3f8ff; }
.sheet { background:var(--ui-bg); }
.sheet-head { position:relative;padding:66px 16px 14px;min-height:116px;align-items:center;border-bottom:1px solid #e5e9f0;background:#fff;gap:10px; }
.sheet-head::before { content:'DriverCRM';position:absolute;left:18px;top:23px;font-size:18px;font-weight:500;letter-spacing:-.5px;color:#689bcc; }
.sheet-head .back { height:34px;width:34px;flex-shrink:0;border-color:#dce3ee;border-radius:7px;color:#7893b4;background:#f9fbfe; }
.sheet-head h3 { font-weight:500;font-size:16px;line-height:1.45;color:#414955; }
#shStatus { color:#7f9ab8;font-size:11px;white-space:nowrap; }
.sheet-body { padding:16px 14px 28px;overscroll-behavior:contain; }
.kv { font-size:12px;line-height:1.5;border-bottom:1px solid #edf0f4;gap:16px;padding:11px 0; }
.kv .k { color:#8a94a1; }
.kv .v { font-weight:400;color:#4f5c6e;overflow-wrap:anywhere;max-width:66%; }
.field { margin-bottom:16px; }
.field label { color:#8b919b;font-weight:400;font-size:11px;margin-bottom:7px; }
.field input:not([type=radio]):not([type=checkbox]),.field select,.support-compose input { border-color:#d5dbe3;border-radius:7px;padding:10px 11px;font-size:13px;color:#474e58;background:#fff;min-height:42px; }
select { background-color:#fff; }
.avatar { background:#e9edf3;border:1px solid #e3e7ee;color:#99a2af;font-size:20px;font-weight:500; }
.profile-head .nm { font-size:18px;font-weight:500;color:#3f4651; }
.rating { color:#ba9b65;font-size:11px;font-weight:400; }
.badge { font-weight:400;font-size:10px;border-radius:5px;padding:3px 7px; }
.badge.pro { background:#edf5ff;color:#589bdc;border:1px solid #d4e6f9; }
.badge.jur { background:#edf5ff;color:#6c99c5; }
.badge.phys { background:#fff7e8;color:#ab8c56; }
.client-card,.friend-card { padding:15px;margin-bottom:12px; }
.client-name { font-size:14px;font-weight:500;color:#434d5a; }
.friend-avatar { color:#7c9bbd;background:#edf3fb;font-size:14px;font-weight:500;border:1px solid #e0e8f3; }
.friend-status { width:6px;height:6px; }
.friend-select-item { border-color:#edf0f4;font-size:12px; }
.registration { background:var(--ui-bg); }
.reg-top { background:#fff;color:#373e48;padding:17px 18px 21px;border-bottom:1px solid #e6eaf0; }
.reg-brand { display:flex;align-items:center;min-height:36px;padding-right:110px; }
.reg-caption { color:#8d97a5;font-size:11px;margin-top:22px; }
.reg-title { color:#363d47;font-size:25px;line-height:1.25;font-weight:500;margin-top:8px;letter-spacing:-.5px; }
.reg-progress { gap:6px;height:4px;margin-top:20px; }
.reg-progress span { background:#e9eef6; }
.reg-progress span.done { background:#74b3f5; }
.reg-body { padding:16px 14px 23px;overscroll-behavior:contain; }
.reg-card { padding:18px 16px;margin-bottom:14px; }
.reg-card h3 { font-size:15px;font-weight:500;color:#46515f;margin-bottom:6px; }
.reg-hint { color:#8c96a5;font-size:11px;line-height:1.65;margin-bottom:17px; }
.reg-field { margin-bottom:17px; }
.reg-field:last-child { margin-bottom:0; }
.reg-field label { color:#7f8997;font-weight:400;font-size:11px;margin-bottom:7px; }
.reg-field input,.reg-field select { min-height:44px;border:1px solid #d5dbe3;border-radius:7px;padding:11px;font-size:13px;color:#474e58; }
.reg-field input:focus,.reg-field select:focus { border-color:#9cc6f2;outline:2px solid #e8f3ff; }
.reg-field input[readonly] { background:#f6f9fd!important;color:#7591b1!important;font-weight:400!important;border-color:#e2e8f1; }
.reg-field small { font-size:10px;color:#959eac;line-height:1.55;margin-top:6px; }
.reg-foot { padding:13px 14px max(16px,env(safe-area-inset-bottom));border-top:1px solid #e4e9f1;background:#fff;gap:8px; }
.reg-foot .btn { min-height:44px; }
.reg-error { font-size:12px;padding:12px 13px;color:#ab5b67;border:1px solid #efcbd0;background:#fff4f5;border-radius:8px;line-height:1.6; }
.reg-checkbox { font-size:11px;color:#7c8797;line-height:1.65;gap:10px; }
.reg-checkbox input { flex-shrink:0;width:17px;height:17px; }
.reg-upload { border:1px dashed #c3d3e7;border-radius:10px;background:#fafcff;padding:15px 12px; }
.reg-upload strong { color:#657a96;font-size:12px;font-weight:500; }
.reg-upload input { color:#7c8b9e; }
input[type=file]::file-selector-button { background:#edf5ff;color:#6394c4;border:1px solid #cbdff5;border-radius:6px;padding:7px 9px;font-family:var(--ui-font);margin-right:7px; }
.reg-photo-progress { color:#749bc1;font-weight:400;font-size:11px; }
.reg-photo-tile { border:1px dashed #c3d3e7;border-radius:11px;background:#fafcff;padding:12px;min-height:146px; }
.reg-photo-tile .photo-label { color:#677b96;font-weight:500;font-size:12px; }
.reg-photo-tile .photo-hint { color:#9aa5b3;font-size:10px; }
.reg-photo-tile .photo-placeholder { color:#aec6e2; }
.reg-photo-tile .photo-placeholder .ui-icon { width:32px;height:32px;stroke-width:1.3; }
.reg-photo-tile .photo-status { color:#78a3ce;font-weight:400;font-size:10px; }
.reg-photo-tile.uploaded { border-color:#b0d8c4;background:#f8fcfa; }
.reg-photo-tile.uploaded .photo-status { color:#4b8e73; }
.reg-legal-item { background:#fafcfe;border-color:#e2e8f1;border-radius:10px;padding:14px 12px; }
.reg-legal-header strong { font-weight:500;color:#526075;font-size:13px; }
.reg-doc-link { color:#579ce8;font-weight:400;font-size:11px; }
.reg-legal-modal { background:#26374f40;backdrop-filter:blur(2px);z-index:850; }
.reg-legal-panel { border:1px solid #e1e7f0;border-radius:17px;box-shadow:0 12px 40px #253b5b24;padding:21px; }
.reg-legal-panel h3 { font-weight:500;font-size:17px; }
.reg-preview { background:#f2f7fd;color:#7494b7;border:1px solid #dce8f6;font-size:11px;border-radius:9px; }
.reg-success { padding-top:26px; }
.reg-success .check { background:#e8f7ef;border:1px solid #c9e7d7;color:#64a68a; }
.setup-item { border-bottom:1px solid #edf0f4;gap:12px;padding:14px 0; }
.setup-item .setup-label { font-size:12px;font-weight:400;line-height:1.55;color:#5f6b7d; }
.setup-item .setup-unit { font-size:10px;color:#9ba6b5; }
.setup-item input { font-size:13px;color:#4e5d70;border:1px solid #d5dbe3;border-radius:7px;min-height:40px;padding:9px; }
.setup-section { font-size:14px;font-weight:500;color:#4e647f;margin-bottom:9px; }
.setup-chip { font-size:9px;padding:4px 7px;color:#8499b0;background:#f2f6fb;border:1px solid #e4ebf4;border-radius:5px; }
.price-compare { font-size:10px;color:#9ca7b6;margin-top:6px;line-height:1.5; }
.price-status { font-size:9px;font-weight:400;line-height:1.45;border:1px solid transparent;border-radius:5px; }
.price-green { background:#e7f6ee!important;border-color:#b7e5ce!important;color:#468368!important; }
.price-yellow { background:#fff7e8!important;border-color:#efddb5!important;color:#a28349!important; }
.price-locked { background:#fff1f3!important;border-color:#efcbd0!important;color:#b06471!important; }
.platform-note { font-size:11px;background:#f7fafe;color:#8599b2;border:1px solid #e4ebf5;border-radius:9px;line-height:1.7;padding:12px; }
.support-fab { position:absolute;top:17px;right:15px;bottom:auto;background:#edf6ff;color:#579ce9;border:1px solid #8fbef0;border-radius:22px;padding:8px 11px;height:35px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:400;line-height:1;box-shadow:none;z-index:800; }
.support-fab .ui-icon { width:15px;height:15px; }
.support-fab:hover { background:#e0efff; }
.support-overlay { background:#26374f40;backdrop-filter:blur(2px); }
.support-panel { height:min(82%,690px);background:#fff;border:1px solid #d7e3f1;border-radius:20px 20px 0 0;box-shadow:0 -8px 32px #2d416118; }
.support-header { border-bottom:1px solid #e5eaf0;gap:10px;padding:17px 15px; }
.support-header strong { font-weight:500;font-size:14px;color:#4e627e; }
.support-messages { background:#f6f9fd;padding:17px 14px; }
.support-bubble { border-color:#e3eaf4;border-radius:12px 12px 12px 3px;color:#657489;line-height:1.65;box-shadow:0 2px 6px #405a8003; }
.support-bubble.mine { background:#edf5ff;border-color:#d2e4f9;border-radius:12px 12px 3px 12px;color:#5a7ca1; }
.support-bubble small { display:block;color:#9ba8b9;margin-top:8px; }
.support-compose { padding:13px 12px max(15px,env(safe-area-inset-bottom));gap:8px;border-top-color:#e5eaf0; }
.support-compose .btn { min-height:42px; }
.toast-wrap { bottom:92px; }
.toast { color:#5a7e9f;background:white;border:1px solid #d3e1f0;border-radius:10px;box-shadow:0 8px 28px #31476a24;font-size:12px;line-height:1.6; }
.toast.ok { background:#f1faf6;color:#458068;border-color:#cbe9db; }
.toast.err { background:#fff5f6;color:#ab6370;border-color:#efcbd0; }
.toast.info { background:#f4f9ff;color:#668db6;border-color:#d3e5f8; }
.geo-option { color:#6c7b8f;font-size:12px;line-height:1.6; }
.geo-chip { background:#edf5ff;color:#6897c7;border:1px solid #d6e7f9;font-size:11px;padding:6px 10px; }
.cal-toolbar { flex-wrap:wrap; }
.cal-grid-wrap { border-color:#e2e8f1;border-radius:10px; }
.cal-header-cell { background:#f7f9fc;color:#8694a7;font-size:10px;font-weight:400;border-color:#e6ebf3;padding:10px 4px; }
.cal-time-cell { color:#9aa7b7;background:#fafcff;font-size:10px; }
.cal-slot-cell { border-color:#edf1f6; }
.cal-event { background:#e8f2ff;color:#6296cb;border:1px solid #c9dff8;box-shadow:none;border-radius:5px;font-size:9px;font-weight:400; }
.cal-event.done { background:#e8f7ef;color:#5f927d;border-color:#c7e5d6; }
.cal-event.exchange { background:#fff7e8;color:#a58856;border-color:#efdfbf; }
.cal-event.blocked { background:#f0f3f8;color:#8492a4;border-color:#d2dce8; }
.fleet-tabs { gap:6px; }
.fleet-tab { border:1px solid #dae2ee;border-radius:7px;color:#7f8c9e;font-size:11px;padding:8px 11px;background:#fff; }
.fleet-tab.active { color:#fff;border-color:#589ff0;background:#589ff0; }
.fleet-note { color:#7f96b2;background:#f3f8ff;border:1px solid #dce9f9;font-size:11px;line-height:1.7;border-radius:9px;padding:12px; }
.fleet-grid { border-color:#e0e7f2;border-radius:9px; }
.fleet-line { border-color:#e9eef5; }
.fleet-line .fleet-label { font-weight:400;color:#7f8ea3; }
.fleet-slot.busy { background:#edf5ff;color:#619bd4;font-weight:400;border-color:#d4e5f8; }
.fleet-slot.maintenance { background:#f0f3f8;color:#97a2b2; }
.fleet-card { padding:15px;border-radius:11px;box-shadow:none; }
.fleet-card b { font-weight:500;font-size:14px;color:#4e6076; }
.fleet-pill { border:1px solid #dce8f6;background:#f0f6fd;color:#7f9dbd;font-weight:400;font-size:10px;white-space:nowrap; }
.fleet-car-choice { border:1px solid #e2e8f1;border-radius:9px;color:#6d7f96;font-size:12px;line-height:1.6; }
.fleet-car-choice:has(input:checked) { background:#f3f8ff;border-color:#96c2f2; }
.fleet-car-choice small { font-size:10px;color:#94a3b7; }
.fleet-error { color:#b36b74;font-size:11px; }
.d-demo-entry { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 3px 0;font-size:11px;color:#9ca7b6;line-height:1.5; }
.d-demo-entry button { border:0;background:transparent;color:#6c9dd0;font-size:11px;text-decoration:underline;text-underline-offset:4px;line-height:1.6;text-align:right;padding:6px 0; }
.d-demo-status { background:#edf5ff;color:#7499c2;padding:5px 9px;border:1px solid #dae7f7;border-radius:5px;font-size:10px;line-height:1.4; }
#view-feed>.d-demo-status { margin-bottom:14px;display:inline-flex; }
/* Remove legacy heavy inline weights without touching values or controls. */
.phone [style*="font-weight:800"],.phone [style*="font-weight: 800"],.phone [style*="font-weight:700"],.phone [style*="font-weight: 700"] { font-weight:500!important; }
.phone select[style*="border-radius:11px"],.phone select[style*="border-radius:9px"] { border-radius:7px!important;color:#61758e; }
@media(max-width:375px) {
 .app-head,.reg-top { padding-left:14px;padding-right:14px; }
 .d-brand { font-size:17px;gap:6px; }.d-brand-mark { width:25px;height:25px;font-size:18px; }
 .support-fab { right:12px;padding-left:9px;padding-right:9px;font-size:10px; }
 .head-row .name { font-size:16px;max-width:177px; }
 .head-actions .icon-btn { width:29px;height:34px; }
 .scroll,.reg-body,.sheet-body { padding-left:11px;padding-right:11px; }
 .card,.reg-card,.order { padding:14px 12px; }
 .reg-title { font-size:23px; }
 .chip { padding:8px 9px;font-size:10px; }
 .tabbar .tab { font-size:8px; }
 .card-title { flex-wrap:wrap; }
 .setup-item { gap:8px; }.setup-item .setup-label { font-size:11px; }.setup-item .price-field { width:100px;min-width:94px; }
 .reg-two { gap:8px; }.reg-legal-header { gap:7px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }
/* Compact option controls must not inherit the full-width text-field geometry. */
.phone input[type=checkbox],.phone input[type=radio] { width:17px!important;height:17px;min-height:0!important;padding:0!important;flex-shrink:0;vertical-align:-3px; }
.field label.fleet-car-choice { color:#6d7f96;font-size:12px;padding:13px; }
.card .card-title { justify-content:flex-start; }
.card .card-title>button,.card .card-title>.btn,.card .card-title>span+span { margin-left:auto; }
.card .card-title>svg { margin-right:0; }

.sheet:not(.open){visibility:hidden;pointer-events:none}.sheet.open{visibility:visible}