/* Задаём общие цвета сайта планшета. */
:root{--blue:#1769e0;--green:#159b68;--red:#dc4c4c;--ink:#172235;--muted:#6f7a8d;--line:#dfe4ec;--bg:#f2f5f9;--shadow:0 18px 48px rgba(24,38,60,.11)}
/* Учитываем границы в размерах элементов. */
*{box-sizing:border-box}
/* Оформляем страницу для сенсорного экрана. */
body{margin:0;color:var(--ink);background:radial-gradient(circle at top left,#dceaff,transparent 38%),var(--bg);font-family:Inter,Arial,sans-serif}
/* Полностью скрываем закрытые области. */
.hidden{display:none!important}
/* Ограничиваем и центрируем рабочую область. */
.workspace{width:min(820px,100%);min-height:100vh;margin:auto;padding:28px}
/* Располагаем шапку в одну строку. */
.header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
/* Оформляем логотип. */
.brand{display:flex;align-items:center;gap:9px;color:#0f4ca8;font-size:18px;font-weight:900}
/* Оформляем знак логотипа. */
.brand span{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;color:#fff;background:var(--blue)}
/* Настраиваем главный заголовок. */
.header h1{margin:16px 0 4px;font-size:34px}
/* Настраиваем пояснение. */
.header p{margin:0;color:var(--muted)}
/* Оформляем индикатор работы. */
.online{padding:9px 12px;border-radius:999px;color:#08784e;background:#eaf9f3;font-size:13px;font-weight:850}
/* Оформляем белую рабочую панель. */
.panel{padding:25px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}
/* Ограничиваем ширину входа. */
.login-panel{width:min(600px,100%);margin:auto;text-align:center}
/* Настраиваем заголовки панелей. */
.panel h2{margin:0 0 8px}
/* Настраиваем пояснение входа. */
.login-panel p{margin:0;color:var(--muted);line-height:1.5}
/* Располагаем цифры PIN рядом. */
.pin-row{display:grid;grid-template-columns:repeat(4,76px);justify-content:center;gap:13px;margin:27px 0}
/* Оформляем одну цифру PIN. */
.pin-row input{height:78px;border:2px solid #ccd5e2;border-radius:16px;outline:0;color:var(--ink);font-size:31px;font-weight:900;text-align:center}
/* Выделяем активную цифру. */
.pin-row input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(23,105,224,.12)}
/* Создаём общий стиль кнопок. */
.button{border:0;padding:12px 16px;border-radius:11px;color:#fff;background:#59677c;font:inherit;font-weight:850;cursor:pointer}
/* Оформляем синюю кнопку. */
.button.primary{background:var(--blue)}
/* Оформляем зелёную кнопку. */
.button.success{background:var(--green)}
/* Оформляем красную кнопку. */
.button.danger{background:var(--red)}
/* Оформляем светлую кнопку. */
.button.secondary{border:1px solid var(--line);color:var(--ink);background:#fff}
/* Увеличиваем основную кнопку входа. */
.button.large{width:100%;padding:15px;font-size:16px}
/* Растягиваем отдельную кнопку. */
.button.full{width:100%;margin-top:18px}
/* Создаём переключатель вкладок. */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:20px;padding:5px;border-radius:14px;background:#edf1f6}
/* Оформляем вкладку. */
.tab{border:0;padding:13px;border-radius:10px;color:var(--muted);background:transparent;font:inherit;font-weight:850;cursor:pointer}
/* Выделяем открытую вкладку. */
.tab.active{color:#fff;background:var(--blue)}
/* Оформляем карточку водителя. */
.driver-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:15px 0;padding:17px;border:1px solid #cfe0fa;border-radius:15px;background:#f1f6ff}
/* Оформляем номер машины. */
.plate{font-size:20px;font-weight:950;letter-spacing:.5px}
/* Оформляем вторичный текст. */
.muted{display:block;margin-top:5px;color:var(--muted);font-size:13px}
/* Оформляем статус или место. */
.badge{padding:8px 10px;border-radius:9px;color:#40506a;background:#e4e9f0;font-size:12px;font-weight:900;text-align:center}
/* Оформляем текущий статус. */
.status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:15px;border:1px solid var(--line);border-radius:14px}
/* Рисуем цвет статуса. */
.dot{display:inline-block;width:11px;height:11px;margin-right:8px;border-radius:50%}
/* Оформляем полный список очереди. */
.queue-list{display:grid;gap:8px;margin-top:14px}
/* Оформляем одну машину в очереди. */
.queue-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px;border-radius:12px;background:#f3f5f8}
/* Выделяем свою машину. */
.queue-row.self{border:2px solid var(--blue);color:#0f4ca8;background:#eaf2ff}
/* Оформляем подписи полей. */
label{display:grid;gap:7px;margin:16px 0;color:#445066;font-size:13px;font-weight:850}
/* Оформляем поля и селекторы. */
input,select{width:100%;border:1px solid #ccd5e2;padding:13px;border-radius:11px;outline:0;color:var(--ink);background:#fff;font:inherit}
/* Оформляем флажок остатка. */
.checkbox{display:flex;align-items:center;gap:10px;font-size:15px}
/* Увеличиваем флажок. */
.checkbox input{width:21px;height:21px;accent-color:var(--blue)}
/* Располагаем действия рядом. */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
/* Оформляем затемнение модального окна. */
.modal{position:fixed;inset:0;z-index:20;display:grid;padding:20px;place-items:center;background:rgba(10,17,28,.72)}
/* Оформляем карточку модального окна. */
.modal-card{width:min(480px,100%);padding:25px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
/* Оформляем предупреждение. */
.warning{padding:13px;border:1px solid #f2cf83;border-radius:11px;color:#805300;background:#fff7e3;font-size:13px;line-height:1.45}
/* Оформляем ошибку входа. */
.error{margin:0 0 16px;padding:12px;border-radius:11px;color:#a52828;background:#fff0f0;font-weight:800}
/* Оформляем уведомление. */
.toast{position:fixed;right:22px;bottom:22px;z-index:30;max-width:380px;padding:14px 17px;border-radius:12px;color:#fff;background:#172235;box-shadow:var(--shadow)}
/* Адаптируем шапку под узкий экран. */
@media(max-width:620px){.workspace{padding:16px}.header{align-items:flex-start;flex-direction:column}.pin-row{grid-template-columns:repeat(4,60px)}.pin-row input{height:65px}.driver-card{align-items:flex-start;flex-direction:column}}