/*
 * meckly-customer.css  —  Shared stylesheet for all Meckly customer pages
 * Fonts  : Inter (UI/body) + JetBrains Mono (data/code)  ← matches SaaS brand
 * Layout : max-width 1140px, padding 0 5%               ← matches .wrap on SaaS
 * Colours: --brand #1a6fdb, --brand-d #0d47a1            ← exact SaaS tokens
 */

/* ── RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: #f0f2f5;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
  visibility: hidden; /* JS reveals after auth */
}
body.auth-ok { visibility: visible; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ── TOKENS — exact match to SaaS :root ─────────────────────────────── */
:root {
  --brand:      #1a6fdb;
  --brand-d:    #0d47a1;
  --brand-l:    #e8f1fd;
  --brand-b:    rgba(26,111,219,.25);
  --brand-m:    rgba(26,111,219,.12);

  --nav-bg:     rgba(7,19,36,.96);
  --nav-border: rgba(0,143,235,.18);

  --page-bg:    #f0f2f5;
  --off:        #f4f4f4;
  --surface:    #ffffff;
  --light-bd:   #dddddd;
  --light-bd2:  #c0cfe0;

  --ink:        #1a1a1a;
  --ink2:       #1a2236;
  --muted-l:    #5a5a5a;
  --muted-xs:   #777777;

  --teal:       #0f9e75;
  --teal-l:     #e1f5ee;
  --amber:      #e08c00;
  --amber-l:    #fdf3d7;
  --red:        #c0392b;
  --red-l:      #fdecea;
  --green:      #1a7a3c;
  --green-l:    #eaf5ee;

  --g-brand:    linear-gradient(135deg, #1a6fdb, #0d47a1);
  --g-hero:     linear-gradient(160deg, #071324 0%, #0B2447 55%, #0D3B6E 100%);

  --card-radius: 10px;
  --card-shadow: 0 2px 12px rgba(0,0,0,.10);
  --r:           10px;
  --r2:          9px;
  --r3:          7px;

  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── LOADING SCREEN ─────────────────────────────────────────────────── */
#loadScreen {
  position: fixed; inset: 0; background: #071324;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; z-index: 9999;
}
#loadScreen .logo-mark {
  width: 52px; height: 52px; background: var(--g-brand);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: 0 8px 24px rgba(26,111,219,.4); overflow: hidden;
  animation: loadPulse 1.4s ease-in-out infinite;
}
#loadScreen .logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
#loadScreen p { color: rgba(255,255,255,.45); font-size: 13px; font-weight: 600; }
@keyframes loadPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.94)} }

/* ── NAV — pixel-identical to SaaS .nav ─────────────────────────────── */
.mk-nav {
  height: 58px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px;
  position: sticky; top: 0; z-index: 60;
  width: 100%; max-width: 100vw; overflow: hidden;
}
.mk-nav-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 12px; min-width: 0;
}

/* Logo mark — same as .nav-logo in SaaS */
.mk-nav-logo-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--g-brand);
  box-shadow: 0 6px 18px rgba(0,143,235,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; overflow: hidden; cursor: pointer;
  transition: box-shadow .2s;
}
.mk-nav-logo-mark:hover { box-shadow: 0 8px 24px rgba(0,143,235,.5); }
.mk-nav-logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }

/* Shop name — same as .nav-brand in SaaS */
.mk-nav-logo-name {
  font-size: 20px; font-weight: 800; letter-spacing: -.3px;
  color: #fff; line-height: 1; white-space: nowrap; flex-shrink: 0;
  cursor: pointer;
}

/* Desktop nav links — same as .nav-links in SaaS */
.mk-nav-links { display: flex; align-items: center; gap: 2px; margin-left: 16px; }
.mk-nav-link {
  height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 6px;
  border: none; background: transparent; cursor: pointer;
  transition: all .12s; white-space: nowrap;
  font-family: 'Inter', sans-serif; text-decoration: none;
}
.mk-nav-link:hover { background: rgba(0,143,235,.15); color: #fff; }
.mk-nav-link.active { color: #fff; background: rgba(0,143,235,.18); }

/* Right side */
.mk-nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Avatar — same concept as .nav-login-btn in SaaS, but for logged-in user */
.mk-nav-avatar-wrap {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-decoration: none;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1.5px solid rgba(96,196,255,.35);
  background: rgba(26,111,219,.10);
  transition: all .15s; flex-shrink: 0;
}
.mk-nav-avatar-wrap:hover { background: rgba(26,111,219,.22); border-color: rgba(96,196,255,.65); }
.mk-nav-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--g-brand);
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); letter-spacing: .03em; flex-shrink: 0;
}
.mk-nav-avatar-name {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85);
  white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}

/* ── MOBILE BOTTOM TAB BAR ───────────────────────────────────────────── */
.mk-tab-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: rgba(7,19,36,.97);
  border-top: 1px solid rgba(0,143,235,.15);
  padding: 6px 0 max(8px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0,0,0,.28);
}
.mk-tab-bar-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.mk-tab-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 8px; border: none; background: transparent;
  cursor: pointer; font-family: 'Inter', sans-serif; color: #fff;
  transition: opacity .18s; position: relative;
}
.mk-tab-btn:active { opacity: .6; }
.mk-tab-btn-ico { font-size: 24px; line-height: 1; position: relative; display: inline-block; }
.mk-tab-btn-label { font-size: 10px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.65); }
.mk-tab-badge {
  position: absolute; top: -3px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; font-size: 9px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  color: #fff; background: var(--red);
  border: 2px solid #071324; line-height: 1;
}
.mk-tab-badge.show { display: flex; }

/* ── PAGE CONTAINER — matches .wrap on SaaS ─────────────────────────── */
.mk-page { max-width: 1140px; margin: 0 auto; padding: 32px 5% 100px; }

/* ── GREETING ────────────────────────────────────────────────────────── */
.mk-greeting { margin-bottom: 28px; }
.mk-greeting-date { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-xs); margin-bottom: 4px; }
.mk-greeting-hi { font-size: 26px; font-weight: 800; color: var(--ink2); letter-spacing: -.02em; line-height: 1.2; }
.mk-greeting-sub { font-size: 13px; color: var(--muted-xs); margin-top: 3px; }

/* ── SECTION LABEL ───────────────────────────────────────────────────── */
.mk-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-xs); margin-bottom: 12px; padding-left: 2px;
}

/* ── HERO ACTIONS ────────────────────────────────────────────────────── */
.mk-hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.mk-hero-btn {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px; border-radius: var(--r);
  border: none; cursor: pointer; font-family: 'Inter', sans-serif;
  text-align: left; transition: transform .18s, box-shadow .18s; text-decoration: none;
}
.mk-hero-btn:hover { transform: translateY(-2px); }
.mk-hero-btn:active { transform: scale(.98); }
.mk-hero-btn.primary { background: var(--g-brand); box-shadow: 0 6px 20px rgba(26,111,219,.32); }
.mk-hero-btn.primary:hover { box-shadow: 0 10px 28px rgba(26,111,219,.42); }
.mk-hero-btn.secondary { background: var(--surface); border: 1px solid var(--light-bd); box-shadow: var(--card-shadow); }
.mk-hero-btn.secondary:hover { box-shadow: 0 8px 28px rgba(26,111,219,.14); border-color: var(--brand); }
.mk-hero-btn-ico { font-size: 30px; flex-shrink: 0; }
.mk-hero-btn-title { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.mk-hero-btn-sub { font-size: 12px; font-weight: 500; }
.mk-hero-btn.primary .mk-hero-btn-title,
.mk-hero-btn.primary .mk-hero-btn-sub { color: #fff; }
.mk-hero-btn.primary .mk-hero-btn-sub { opacity: .78; }
.mk-hero-btn.secondary .mk-hero-btn-title { color: var(--ink2); }
.mk-hero-btn.secondary .mk-hero-btn-sub { color: var(--muted-xs); }

/* ── ALERT STRIP ─────────────────────────────────────────────────────── */
.mk-alert-strip {
  background: var(--red-l); border: 1px solid rgba(192,57,43,.2);
  border-radius: var(--r); padding: 14px 18px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
  animation: fadeUp .35s ease;
}
.mk-alert-ico { font-size: 20px; flex-shrink: 0; }
.mk-alert-text { flex: 1; min-width: 0; }
.mk-alert-title { font-size: 14px; font-weight: 700; color: var(--red); margin-bottom: 2px; }
.mk-alert-sub { font-size: 12px; color: var(--muted-l); line-height: 1.4; }
.mk-alert-cta {
  flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: var(--r3);
  border: none; background: var(--red); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  display: flex; align-items: center;
}

/* ── ACTION CARDS ────────────────────────────────────────────────────── */
.mk-action-card {
  border-radius: var(--r); border: 1px solid; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
  cursor: pointer; text-decoration: none;
  transition: transform .15s, box-shadow .15s; animation: fadeUp .3s ease;
}
.mk-action-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.mk-action-card.approve { background: var(--amber-l); border-color: rgba(224,140,0,.3); }
.mk-action-card.collect { background: var(--teal-l); border-color: rgba(15,158,117,.3); }
.mk-action-card-ico { font-size: 26px; flex-shrink: 0; }
.mk-action-card-body { flex: 1; min-width: 0; }
.mk-action-card-title { font-size: 15px; font-weight: 700; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-action-card.approve .mk-action-card-title { color: #7a4f00; }
.mk-action-card.collect .mk-action-card-title { color: #0a6b48; }
.mk-action-card-sub { font-size: 12px; line-height: 1.4; }
.mk-action-card.approve .mk-action-card-sub { color: #92600e; }
.mk-action-card.collect .mk-action-card-sub { color: #0e7a50; }
.mk-action-card-cta {
  flex-shrink: 0; height: 36px; padding: 0 14px; border-radius: var(--r3);
  border: none; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; pointer-events: none;
}
.mk-action-card.approve .mk-action-card-cta { background: var(--amber); color: #fff; }
.mk-action-card.collect .mk-action-card-cta { background: var(--teal); color: #fff; }

/* ── UPCOMING CARD ───────────────────────────────────────────────────── */
.mk-upcoming-card {
  background: var(--surface); border: 1px solid var(--light-bd);
  border-radius: var(--r); box-shadow: var(--card-shadow);
  overflow: hidden; margin-bottom: 24px;
}
.mk-card-head {
  padding: 13px 18px; border-bottom: 1px solid #edf0f4;
  display: flex; align-items: center; justify-content: space-between;
}
.mk-card-head-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-xs); }
.mk-card-head-link { font-size: 12px; font-weight: 700; color: var(--brand); cursor: pointer; text-decoration: none; }
.mk-card-head-link:hover { color: var(--brand-d); }
.mk-upcoming-item {
  padding: 15px 18px; display: grid; grid-template-columns: 46px 1fr auto;
  gap: 14px; align-items: center; border-bottom: 1px solid #edf0f4;
  animation: fadeUp .3s ease;
}
.mk-upcoming-item:last-child { border-bottom: none; }
.mk-date-badge {
  text-align: center; background: var(--brand-l); border-radius: 8px;
  padding: 6px 4px; border: 1px solid rgba(26,111,219,.18);
}
.mk-date-month { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.mk-date-day { font-size: 20px; font-weight: 800; color: var(--brand); line-height: 1.1; font-family: var(--mono); }
.mk-upcoming-car { font-size: 14px; font-weight: 700; color: var(--ink2); margin-bottom: 2px; }
.mk-upcoming-detail { font-size: 12px; color: var(--muted-xs); }
.mk-empty-state { text-align: center; padding: 32px 20px; color: var(--muted-xs); font-size: 14px; }
.mk-empty-state a { color: var(--brand); }

/* ── PILLS ───────────────────────────────────────────────────────────── */
.mk-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.mk-pill.blue   { background: var(--brand-l); color: var(--brand-d); border-color: rgba(26,111,219,.22); }
.mk-pill.amber  { background: var(--amber-l); color: #7a4f00; border-color: rgba(224,140,0,.22); }
.mk-pill.red    { background: var(--red-l); color: var(--red); border-color: rgba(192,57,43,.22); }
.mk-pill.green  { background: var(--teal-l); color: #0a6b48; border-color: rgba(15,158,117,.22); }
.mk-pill.grey   { background: var(--off); color: var(--muted-xs); border-color: var(--light-bd); }

/* ── CARS GRID ───────────────────────────────────────────────────────── */
.mk-cars-grid { display: grid; gap: 10px; margin-bottom: 24px; }
.mk-car-card {
  background: var(--surface); border: 1px solid var(--light-bd);
  border-radius: var(--r); box-shadow: var(--card-shadow);
  display: grid; grid-template-columns: 52px 1fr auto;
  gap: 14px; align-items: center; padding: 15px 18px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  cursor: pointer; text-decoration: none;
}
.mk-car-card:hover { box-shadow: 0 8px 28px rgba(26,111,219,.14); transform: translateY(-1px); border-color: var(--brand); }
.mk-car-icon {
  width: 52px; height: 42px; border-radius: 10px; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-l); border: 1px solid rgba(26,111,219,.15);
}
.mk-car-name { font-size: 15px; font-weight: 700; color: var(--ink2); margin-bottom: 3px; }
.mk-car-meta { font-size: 12px; color: var(--muted-xs); }
.mk-car-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* ── TUCKED SECTIONS ─────────────────────────────────────────────────── */
.mk-tucked { margin-bottom: 10px; }
.mk-tucked-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--light-bd);
  border-radius: var(--r); cursor: pointer; transition: background .18s, border-color .18s;
  font-family: 'Inter', sans-serif;
}
.mk-tucked-toggle:hover { background: var(--off); border-color: var(--brand); }
.mk-tucked-toggle.open-state { border-radius: var(--r) var(--r) 0 0; border-bottom-color: transparent; }
.mk-tucked-left { display: flex; align-items: center; gap: 10px; }
.mk-tucked-ico { font-size: 16px; }
.mk-tucked-label { font-size: 14px; font-weight: 700; color: var(--ink2); }
.mk-tucked-count { font-size: 12px; color: var(--muted-xs); font-weight: 500; }
.mk-tucked-caret { font-size: 11px; color: var(--muted-l); transition: transform .22s; }
.mk-tucked.open .mk-tucked-caret { transform: rotate(180deg); }
.mk-tucked-body { display: none; border: 1px solid var(--light-bd); border-top: none; border-radius: 0 0 var(--r) var(--r); background: var(--surface); overflow: hidden; }
.mk-tucked.open .mk-tucked-body { display: block; animation: fadeUp .2s ease; }

/* ── TABLE ROWS ──────────────────────────────────────────────────────── */
.mk-t-row { padding: 13px 18px; border-bottom: 1px solid #edf0f4; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; }
.mk-t-row:last-child { border-bottom: none; }
.mk-t-row.clickable { cursor: pointer; transition: background .14s; text-decoration: none; display: grid; }
.mk-t-row.clickable:hover { background: var(--off); }
.mk-t-ico { width: 38px; height: 32px; border-radius: 8px; background: var(--brand-l); border: 1px solid rgba(26,111,219,.15); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.mk-t-name { font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 2px; }
.mk-t-sub { font-size: 11px; color: var(--muted-xs); }

/* ── NOTIFICATION ROWS ───────────────────────────────────────────────── */
.mk-notif-row { padding: 16px 20px; border-bottom: 1px solid #edf0f4; display: flex; gap: 12px; align-items: start; }
.mk-notif-row:last-child { border-bottom: none; }
.mk-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
.mk-notif-title { font-size: 14px; font-weight: 700; color: var(--ink2); margin-bottom: 3px; }
.mk-notif-sub { font-size: 12px; color: var(--muted-xs); line-height: 1.45; }
.mk-notif-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.mk-notif-btn { height: 32px; padding: 0 14px; border-radius: var(--r3); border: none; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; text-decoration: none; display: inline-flex; align-items: center; }

/* ── DRAWER (bottom sheet) ───────────────────────────────────────────── */
.mk-drawer-bg { position: fixed; inset: 0; z-index: 200; background: rgba(7,19,36,.55); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.mk-drawer-bg.open { opacity: 1; pointer-events: all; }
.mk-drawer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-radius: 20px 20px 0 0; max-height: 82vh; overflow-y: auto; transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); box-shadow: 0 -12px 40px rgba(0,0,0,.2); }
.mk-drawer-bg.open .mk-drawer { transform: none; }
.mk-drawer-head { padding: 16px 20px; border-bottom: 1px solid #edf0f4; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.mk-drawer-head h3 { font-size: 16px; font-weight: 700; color: var(--ink2); }
.mk-drawer-x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--light-bd); background: var(--off); color: var(--muted-l); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ── INLINE ALERT ────────────────────────────────────────────────────── */
.alert { display: none; padding: 12px 16px; border-radius: var(--r2); font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 12px; }
.alert.err  { display: block; background: var(--red-l); border-left: 4px solid var(--red); color: #7a1818; }
.alert.ok   { display: flex; background: var(--teal-l); border-left: 4px solid var(--teal); color: #0a6b48; align-items: flex-start; gap: 8px; }
.alert.warn { display: flex; background: var(--amber-l); border-left: 4px solid var(--amber); color: #7a4f00; align-items: flex-start; gap: 8px; }
.alert.show { display: block; }

/* ── BOOKING TABS ────────────────────────────────────────────────────── */
.mk-tabs { display: flex; background: var(--surface); border: 1px solid var(--light-bd); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; box-shadow: var(--card-shadow); }
.mk-tab { flex: 1; padding: 12px 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--muted-xs); cursor: pointer; border: none; background: transparent; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mk-tab.active, .tab.active { color: var(--brand); border-bottom-color: var(--brand); }
#tabActive.active { color: var(--amber); border-bottom-color: var(--amber); }
#tabPast.active { color: var(--muted-xs); border-bottom-color: var(--light-bd); }
.tab-badge { display: none; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; }
.tab-badge.show { display: inline-flex; }
.tab-panel { display: none; flex-direction: column; gap: 12px; }
.tab-panel.active { display: flex; }

/* ── BOOKING CARDS ───────────────────────────────────────────────────── */
.bk-card { background: var(--surface); border-radius: var(--r); border: 1.5px solid var(--light-bd); overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; box-shadow: var(--card-shadow); }
.bk-card:hover { border-color: var(--brand); box-shadow: 0 8px 28px rgba(26,111,219,.14); transform: translateY(-1px); }
.bk-card.is-urgent { border-color: rgba(224,140,0,.5); box-shadow: 0 0 0 3px rgba(224,140,0,.08), var(--card-shadow); }
.bk-card.is-collect { border-color: rgba(15,158,117,.45); box-shadow: 0 0 0 3px rgba(15,158,117,.08), var(--card-shadow); }
.bk-card.is-done { opacity: .6; }
.bk-strip { height: 3px; }
.bk-strip.s-blue  { background: var(--g-brand); }
.bk-strip.s-green { background: linear-gradient(90deg, #0f9e75, #0a6b48); }
.bk-strip.s-amber { background: linear-gradient(90deg, var(--amber), #c47700); }
.bk-strip.s-grey  { background: var(--light-bd); }
.bk-strip.s-red   { background: linear-gradient(90deg, var(--red), #8b1a0e); }
.bk-body { padding: 14px 16px 10px; }
.bk-row1 { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.bk-veh-ico { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.bk-veh-ico--img { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--light-bd); }
.bk-veh-ico--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-veh { flex: 1; min-width: 0; }
.bk-veh-name { font-size: 17px; font-weight: 700; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.bk-veh-rego { font-family: var(--mono); font-size: 12px; color: var(--muted-xs); margin-top: 3px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.sp-blue  { background: var(--brand-l); color: var(--brand-d); border: 1px solid rgba(26,111,219,.22); }
.sp-green { background: var(--teal-l);  color: #0a6b48;       border: 1px solid rgba(15,158,117,.22); }
.sp-amber { background: var(--amber-l); color: #7a4f00;        border: 1px solid rgba(224,140,0,.25); }
.sp-grey  { background: var(--off);     color: var(--muted-xs);border: 1px solid var(--light-bd); }
.sp-red   { background: var(--red-l);   color: var(--red);     border: 1px solid rgba(192,57,43,.2); }
.s-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; position: relative; }
.s-dot.radar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: radar 1.6s ease-out infinite; }
@keyframes radar { 0%{inset:0;opacity:.7} 100%{inset:-10px;opacity:0} }
.pulse { animation: pdot 1.3s ease-in-out infinite; }
@keyframes pdot { 0%,100%{opacity:1} 50%{opacity:.25} }
.bk-row2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.plate-rego { display: inline-flex; align-items: center; gap: 5px; background: var(--amber-l); border: 1.5px solid #d97706; border-radius: 5px; padding: 3px 10px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #7a4f00; letter-spacing: .06em; white-space: nowrap; }
.plate-label { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #b45309; opacity: .8; font-family: 'Inter', sans-serif; }
.plate-state { display: inline-flex; align-items: center; padding: 3px 8px; background: var(--off); border: 1px solid var(--light-bd); border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-xs); }
.bk-date { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.bk-date-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; border: none; background: none; padding: 0; transition: opacity .12s; font-family: 'Inter', sans-serif; }
.bk-date-link:hover { opacity: .7; }
.bk-areas { display: flex; flex-wrap: wrap; gap: 5px; }
.area-tag { padding: 3px 9px; border-radius: 20px; background: var(--off); border: 1px solid var(--light-bd); font-size: 11px; font-weight: 600; color: var(--muted-l); white-space: nowrap; }
.bk-notes { margin-top: 7px; font-size: 13px; color: var(--muted-xs); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.bk-cta { display: none; align-items: center; gap: 8px; padding: 10px 16px; font-size: 13px; font-weight: 700; }
.bk-cta.show { display: flex; }
.bk-cta.cta-amber { background: var(--amber-l); border-top: 1px solid rgba(224,140,0,.2); color: #7a4f00; }
.bk-cta.cta-green { background: var(--teal-l); border-top: 1px solid rgba(15,158,117,.2); color: #0a6b48; }
.cta-arrow { margin-left: auto; font-size: 18px; }
.card-actions { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 12px; }
.btn-edit { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; border-radius: var(--r3); border: 1px solid var(--light-bd); background: var(--off); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--muted-l); cursor: pointer; transition: border-color .12s, color .12s; }
.btn-edit:hover { border-color: var(--brand); color: var(--brand); }
.btn-cancel { background: none; border: none; padding: 4px 2px; font-size: 12px; font-weight: 600; color: var(--muted-xs); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color .12s; font-family: 'Inter', sans-serif; }
.btn-cancel:hover { color: var(--red); }
.prog-notes { padding: 10px 16px; border-top: 1px solid #edf0f4; background: var(--off); }
.prog-notes-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-xs); margin-bottom: 6px; }
.prog-note-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid #edf0f4; }
.prog-note-row:last-child { border-bottom: none; }
.prog-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 5px; }
.prog-note-text { font-size: 13px; color: var(--muted-l); line-height: 1.45; flex: 1; }
.prog-note-time { font-size: 11px; color: var(--muted-xs); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.prog-empty { font-size: 12px; color: var(--muted-xs); font-style: italic; }

/* ── SKELETON ────────────────────────────────────────────────────────── */
.skel { border-radius: var(--r); background: linear-gradient(90deg, var(--off) 25%, var(--surface) 50%, var(--off) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border: 1px solid var(--light-bd); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── EMPTY STATE ─────────────────────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; padding: 48px 20px; gap: 10px; text-align: center; }
.empty-ico { font-size: 40px; opacity: .25; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--ink2); }
.empty-sub { font-size: 13px; color: var(--muted-xs); line-height: 1.55; max-width: 280px; }
.btn-book { margin-top: 6px; height: 46px; padding: 0 24px; border-radius: var(--r2); border: none; background: var(--g-brand); color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(26,111,219,.3); transition: filter .12s, transform .1s; }
.btn-book:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ── CAL / CANCEL SHEETS ─────────────────────────────────────────────── */
.cal-overlay, .overlay { display: none; position: fixed; inset: 0; background: rgba(7,19,36,.55); backdrop-filter: blur(3px); z-index: 400; align-items: flex-end; justify-content: center; }
.cal-overlay.show, .overlay.show { display: flex; }
.cal-sheet, .btm-sheet { background: var(--surface); border-radius: 20px 20px 0 0; padding: 22px 20px calc(28px + env(safe-area-inset-bottom,0)); width: 100%; max-width: 600px; box-shadow: 0 -8px 32px rgba(0,0,0,.2); }
.cal-sheet-title, .btm-title { font-size: 18px; font-weight: 700; color: var(--ink2); letter-spacing: -.01em; margin-bottom: 4px; }
.cal-sheet-sub, .btm-sub { font-size: 13px; color: var(--muted-xs); margin-bottom: 18px; line-height: 1.4; }
.cal-options { display: flex; flex-direction: column; gap: 10px; }
.cal-opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--off); border: 1px solid var(--light-bd); text-decoration: none; cursor: pointer; transition: border-color .12s, background .12s; }
.cal-opt:hover { border-color: var(--brand); background: var(--brand-l); }
.cal-opt-ico { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.cal-opt-name { font-size: 15px; font-weight: 700; color: var(--ink2); flex: 1; }
.cal-opt-arrow { color: var(--muted-xs); font-size: 16px; flex-shrink: 0; }
.cal-sheet-dismiss { margin-top: 12px; width: 100%; height: 46px; border-radius: var(--r2); border: 1px solid var(--light-bd); background: transparent; color: var(--muted-l); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .1s; }
.cal-sheet-dismiss:hover { background: var(--off); }
.btn-sh { height: 52px; border-radius: var(--r2); font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; cursor: pointer; border: none; display: flex; align-items: center; justify-content: center; transition: filter .12s; }
.btn-sh-danger { background: linear-gradient(135deg, var(--red), #8b1a0e); color: #fff; box-shadow: 0 4px 14px rgba(192,57,43,.28); }
.btn-sh-ghost  { background: linear-gradient(135deg, #0f9e75, #0a6b48); color: #fff; box-shadow: 0 4px 14px rgba(15,158,117,.28); }
.btn-sh-bare { background: none; border: none; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: rgba(192,57,43,.6); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 6px 0; text-align: center; transition: color .12s; }
.btn-sh-bare:hover { color: var(--red); }
.cancel-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cancel-opt { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r2); background: var(--off); border: 1px solid var(--light-bd); text-decoration: none; cursor: pointer; transition: border-color .12s, background .12s; }
.cancel-opt:hover { border-color: var(--brand); background: var(--brand-l); }
.cancel-opt-ico { font-size: 20px; flex-shrink: 0; }
.cancel-opt-body { flex: 1; min-width: 0; }
.cancel-opt-title { font-size: 14px; font-weight: 700; color: var(--ink2); }
.cancel-opt-sub { font-size: 12px; color: var(--muted-xs); margin-top: 1px; line-height: 1.4; }
.cancel-opt-arrow { color: var(--muted-xs); font-size: 16px; flex-shrink: 0; }
.cancel-divider { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-xs); margin: 12px 0; position: relative; }
.cancel-divider::before, .cancel-divider::after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--light-bd); }
.cancel-divider::before { left: 0; } .cancel-divider::after { right: 0; }

/* ── NEEDS-ACTION / COLLECT banners (bookings.html renderPanel) ──────── */
.needs-action { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--amber-l); border: 1px solid rgba(224,140,0,.3); cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.needs-action:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.na-ico { font-size: 22px; flex-shrink: 0; }
.na-body { flex: 1; min-width: 0; }
.na-title { font-size: 14px; font-weight: 700; color: #7a4f00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-sub { font-size: 12px; color: #92600e; margin-top: 2px; line-height: 1.4; }
.na-arrow { color: var(--amber); font-size: 20px; flex-shrink: 0; font-weight: 700; }
.collect-now { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--teal-l); border: 1px solid rgba(15,158,117,.28); cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.collect-now:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.cn-ico { font-size: 22px; flex-shrink: 0; }
.cn-body { flex: 1; min-width: 0; }
.cn-title { font-size: 14px; font-weight: 700; color: #0a6b48; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-sub { font-size: 12px; color: #0e7a50; margin-top: 2px; }
.cn-arrow { color: var(--teal); font-size: 20px; flex-shrink: 0; font-weight: 700; }
.section-lbl { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-xs); padding: 2px 2px 0; margin-top: 4px; }

/* ── VEHICLES PAGE ───────────────────────────────────────────────────── */
.page { max-width: 680px; margin: 0 auto; padding: 24px 16px 80px; }
.page-eyebrow { font-size: 10px; font-weight: 700; color: var(--brand); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
.page-title { font-size: 22px; font-weight: 800; color: var(--ink2); letter-spacing: -.02em; margin-bottom: 2px; }
.page-sub { font-size: 13px; color: var(--muted-xs); margin-bottom: 16px; }
.search-bar { position: relative; margin-bottom: 16px; }
.search-bar-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-xs); font-size: 14px; pointer-events: none; }
.search-input { width: 100%; padding: 10px 12px 10px 36px; border: 1.5px solid var(--light-bd); border-radius: var(--r3); font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink); background: #fff; outline: none; transition: border-color .18s, box-shadow .18s; }
.search-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-m); }
.search-input::placeholder { color: var(--muted-xs); }
.saving-banner { display: none; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--r2); background: var(--brand-l); border-left: 4px solid var(--brand); color: var(--brand-d); font-size: 13px; font-weight: 700; }
.saving-banner.show { display: flex; }
.saving-spinner { width: 16px; height: 16px; border: 2px solid var(--brand-m); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { text-align: center; padding: 52px 24px; display: none; }
.empty-state.show { display: block; }
.empty-icon { font-size: 48px; margin-bottom: 14px; opacity: .3; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }
.empty-sub { font-size: 14px; color: var(--muted-l); margin-bottom: 20px; line-height: 1.5; }
.veh-card { background: var(--surface); border: 1px solid var(--light-bd); border-radius: var(--r); box-shadow: var(--card-shadow); margin-bottom: 10px; overflow: hidden; transition: box-shadow .22s, border-color .22s, transform .18s; }
.veh-card:hover { box-shadow: 0 8px 28px rgba(26,111,219,.14); border-color: var(--brand); transform: translateY(-1px); }
.veh-main { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.veh-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; background: var(--brand-l); border: 1.5px solid var(--brand-b); display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; position: relative; overflow: hidden; transition: border-color .18s; }
.veh-avatar:hover { border-color: var(--brand); }
.veh-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.veh-avatar-img.loaded { display: block; }
.veh-avatar-cam { position: absolute; bottom: 0; right: 0; background: var(--brand); color: #fff; font-size: 9px; padding: 2px 4px; border-radius: 4px 0 0 0; opacity: 0; transition: opacity .18s; line-height: 1; }
.veh-avatar:hover .veh-avatar-cam { opacity: 1; }
.veh-info { flex: 1; min-width: 0; }
.veh-name { font-size: 15px; font-weight: 700; color: var(--ink2); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-plates { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.veh-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.colour-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1px solid transparent; }
.tag-label { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.veh-actions { display: flex; gap: 8px; padding: 0 16px 14px; }
.veh-act { flex: 1; height: 38px; border-radius: var(--r3); border: 1.5px solid var(--light-bd); background: var(--off); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--muted-l); cursor: pointer; transition: all .18s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.veh-act:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-l); }
.veh-act.remove:hover { border-color: var(--red); background: var(--red-l); color: var(--red); }
.btn-book { height: 38px; padding: 0 16px; border-radius: var(--r3); border: none; background: var(--g-brand); color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 14px rgba(26,111,219,.28); transition: filter .18s, transform .15s; flex-shrink: 0; }
.btn-book:hover { filter: brightness(1.08); transform: translateY(-1px); }
.add-panel { background: var(--surface); border: 1px solid var(--light-bd); border-radius: var(--r); box-shadow: var(--card-shadow); overflow: hidden; margin-bottom: 20px; display: none; }
.add-panel.show { display: block; }
.add-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid #edf0f4; }
.add-panel-header h2 { font-size: 16px; font-weight: 700; color: var(--ink2); margin-bottom: 3px; border: none !important; display: block; }
.add-panel-header p { font-size: 12px; color: var(--muted-xs); line-height: 1.4; }
.add-panel-body { padding: 16px 18px; }
.btn-close { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--light-bd); background: var(--off); color: var(--muted-l); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-close:hover { background: var(--light-bd); }
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-xs); }
.field input, .field select { width: 100%; height: 42px; border: 1.5px solid var(--light-bd); border-radius: var(--r3); background: var(--off); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 14px; padding: 0 12px; outline: none; transition: border-color .18s, box-shadow .18s; }
.field input:focus, .field select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-m); }
.field input.mono { font-family: var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.field input::placeholder { color: var(--muted-xs); font-family: 'Inter', sans-serif; text-transform: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hidden { display: none !important; }
.unreg-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted-l); cursor: pointer; }
.unreg-toggle input[type=checkbox] { width: auto; height: 15px; cursor: pointer; accent-color: var(--brand); padding: 0; }
.unreg-toggle input:checked ~ span { color: var(--brand); }
.unreg-warn { padding: 10px 13px; border-radius: var(--r3); background: var(--amber-l); border-left: 4px solid var(--amber); color: #7a4f00; font-size: 12px; line-height: 1.5; }
.unreg-warn strong { display: block; margin-bottom: 2px; font-size: 12px; }
.rego-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rego-row label { margin: 0; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: var(--off); border-radius: var(--r3); border: 1.5px solid var(--light-bd); }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all .15s; }
.color-swatch.light { border-color: rgba(26,36,50,.2); }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: var(--brand) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.color-selected-label { font-size: 12px; font-weight: 700; color: var(--ink2); padding: 3px 0; }
.color-selected-label.none { color: var(--muted-xs); font-weight: 400; }
.btnbar { display: flex; gap: 10px; margin-top: 4px; }
.btn { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; border-radius: var(--r3); border: none; cursor: pointer; transition: all .18s; white-space: nowrap; padding: 9px 18px; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--g-brand); color: #fff; box-shadow: 0 4px 14px rgba(26,111,219,.28); }
.btn-ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand-b); }
.btn-ghost:hover { background: var(--brand-l); }
.btn-fat { padding: 11px 22px; font-size: 15px; font-weight: 700; border-radius: var(--r2); flex: 1; }
.sheet-handle { width: 36px; height: 4px; background: var(--light-bd); border-radius: 2px; margin: 0 auto 16px; }
.sheet-title { font-size: 17px; font-weight: 700; color: var(--ink2); margin-bottom: 3px; }
.sheet-sub { font-size: 13px; color: var(--muted-xs); margin-bottom: 16px; }
.photo-opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 8px; border: 1.5px solid var(--light-bd); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: all .18s; width: 100%; text-align: left; }
.photo-opt:hover { border-color: var(--brand); background: var(--brand-l); }
.photo-opt-icon { font-size: 26px; flex-shrink: 0; }
.photo-opt-title { font-size: 14px; font-weight: 700; color: var(--ink2); }
.photo-opt-sub { font-size: 12px; color: var(--muted-xs); }
.btn-remove-photo { width: 100%; padding: 10px; background: transparent; border: 1.5px dashed rgba(192,57,43,.3); border-radius: var(--r3); color: var(--red); font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 4px; transition: all .18s; display: none; font-family: 'Inter', sans-serif; }
.btn-remove-photo.show { display: block; }
.btn-remove-photo:hover { background: var(--red-l); }
.btn-dismiss { width: 100%; margin-top: 10px; background: transparent; border: 1.5px solid var(--light-bd); border-radius: var(--r3); color: var(--muted-l); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; padding: 10px; cursor: pointer; transition: all .18s; }
.btn-dismiss:hover { background: var(--off); }
.btn-keep { width: 100%; padding: 12px; background: linear-gradient(135deg, #0f9e75, #0a6b48); color: #fff; border: none; border-radius: var(--r2); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(15,158,117,.28); transition: all .18s; }
.btn-keep:hover { filter: brightness(1.07); }
.btn-remove-confirm { width: 100%; margin-top: 8px; background: transparent; border: 1.5px solid rgba(192,57,43,.3); border-radius: var(--r3); color: rgba(192,57,43,.7); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; padding: 10px; cursor: pointer; transition: all .18s; }
.btn-remove-confirm:hover { background: var(--red-l); color: var(--red); border-color: var(--red); }
.sheet-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.sheet-btnbar { display: flex; gap: 10px; margin-top: 8px; }
.sheet-save { flex: 1; padding: 11px; background: var(--g-brand); color: #fff; border: none; border-radius: var(--r2); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(26,111,219,.28); transition: all .18s; }
.sheet-save:hover { filter: brightness(1.07); }
.sheet-cancel { padding: 11px 18px; background: transparent; border: 1.5px solid var(--light-bd); border-radius: var(--r2); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--muted-l); cursor: pointer; transition: all .18s; }
.sheet-cancel:hover { background: var(--off); }
.loading-wrap { display: none; }
.loading-wrap.show { display: block; }
#scrollBar { position: fixed; bottom: 0; left: 0; height: 3px; background: var(--g-brand); z-index: 59; width: 0%; transition: width .1s; }
.cant-find-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--brand); cursor: pointer; background: none; border: none; padding: 0; font-family: 'Inter', sans-serif; text-decoration: underline; text-underline-offset: 2px; opacity: .8; transition: opacity .15s; }
.cant-find-link:hover { opacity: 1; }
.manual-entry-banner { display: none; padding: 10px 13px; border-radius: var(--r3); background: var(--amber-l); border-left: 4px solid var(--amber); color: #7a4f00; font-size: 12px; line-height: 1.5; margin-bottom: 2px; }
.manual-entry-banner.show { display: flex; align-items: flex-start; gap: 8px; }
.manual-entry-banner strong { font-size: 12px; }
.btn-back-to-catalog { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--brand); cursor: pointer; background: none; border: none; padding: 0; font-family: 'Inter', sans-serif; text-decoration: underline; text-underline-offset: 2px; opacity: .8; transition: opacity .15s; }
.btn-back-to-catalog:hover { opacity: 1; }

/* ── ANIMATIONS ──────────────────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes badgePop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media(max-width: 900px) {
  .mk-nav-links { display: none; }
}
@media(max-width: 620px) {
  .mk-page { padding: 20px 4% 100px; }
  .mk-hero-actions { grid-template-columns: 1fr; }
  .mk-nav-links { display: none; }
  .mk-tab-bar { display: block; }
  .mk-car-right { display: none; }
  .mk-alert-strip { flex-wrap: wrap; }
  .mk-nav-avatar-name { display: none; }
}
@media(max-width: 380px) {
  .btn-fat { font-size: 14px; padding: 10px 16px; }
  .two { grid-template-columns: 1fr; }
}