/* ==========================================================================
   АвтоМастер — общая дизайн-система (Экраны 1–2)
   ========================================================================== */
:root {
  --bg:            #0D0F12;
  --surface:       #15181D;
  --surface-hover: #1C2027;
  --surface-press: #23282F;
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);

  --text:          #FFFFFF;
  --text-soft:     #E6E8EB;
  --text-muted:    #8A8F98;
  --text-dim:      #6B7075;

  --orange:        #F5872B;
  --green:         #22C55E;
  --blue:          #3B82F6;
  --red:           #EF4444;
  --graphite:      #2A2E35;
  --silver:        #C6CBD2;

  --accent:        #4C7DF0;
  --accent-press:  #3D68D0;

  --radius-card:   16px;
  --radius-tile:   14px;

  --font-display:  'Oswald', 'Inter', system-ui, sans-serif;
  --font-text:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  padding:
    calc(env(safe-area-inset-top) + 14px)
    calc(env(safe-area-inset-right) + 16px)
    calc(env(safe-area-inset-bottom) + 24px)
    calc(env(safe-area-inset-left) + 16px);
}

.app {
  max-width: 480px;
  margin: 0 auto;
}

/* ==========================================================================
   Шапка + профиль мастера
   ========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.topbar--end { justify-content: flex-end; }

.master {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.master__meta {
  text-align: right;
  line-height: 1.25;
}

.master__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.master__sto {
  font-size: 13px;
  color: var(--text-muted);
}

.master__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
}

/* Кнопка-иконка (напр. «назад» в шапке) */
.iconbtn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.iconbtn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.iconbtn:active { background: var(--surface-press); }
.iconbtn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.iconbtn svg { width: 20px; height: 20px; display: block; }

/* Заголовок-навигация (Экран 2): марка + подзаголовок */
.navtitle {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.navtitle__main {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navtitle__sub {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Цветные плашки-иконки с машиной
   ========================================================================== */
.icon-tile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-tile);
}

.icon-tile svg { display: block; }

.icon-tile--blue  { background: var(--blue); }
.icon-tile--red   { background: var(--red); }
.icon-tile--dark  { background: var(--graphite); }
.icon-tile--light { background: var(--silver); }

.icon-tile--blue  svg,
.icon-tile--red   svg,
.icon-tile--dark  svg { color: #fff; }
.icon-tile--light svg { color: #d0362b; }

/* ==========================================================================
   Кнопки
   ========================================================================== */
.btn {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: 18px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn:active { transform: scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(76, 125, 240, 0.28);
}
.btn--primary:hover  { background: #567ff2; }
.btn--primary:active { background: var(--accent-press); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
.btn--ghost:hover  { background: var(--surface-hover); border-color: var(--border-strong); }
.btn--ghost:active { background: var(--surface-press); }

.btn:disabled {
  cursor: not-allowed;
  transform: none;
}

.btn--primary:disabled,
.btn--primary[disabled] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-dim);
  box-shadow: none;
}

.btn--orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 8px 24px rgba(245, 135, 43, 0.28);
}
.btn--orange:hover  { background: #f79a4c; }
.btn--orange:active { background: #db7620; }

.btn--orange:disabled,
.btn--orange[disabled] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-dim);
  box-shadow: none;
}

.btn--green {
  background: var(--green);
  color: #0B1F13;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.28);
}
.btn--green:hover  { background: #3ad673; }
.btn--green:active { background: #1ea653; }

.btn-row {
  display: flex;
  gap: 12px;
}
.btn-row .btn { flex: 1 1 0; }

@media (prefers-reduced-motion: reduce) {
  .btn, .iconbtn { transition: none; }
}