:root {
  --bg: #08101e;
  --panel: rgba(11, 18, 36, .78);
  --text: #f7fbff;
  --muted: #9fb3c8;
  --line: rgba(149, 167, 190, .18);
  --cyan: #25d0ff;
  --blue: #3488ff;
  --violet: #8268ff;
  --orange: #ff8a34;
  --lime: #67e8b1;
  --good: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --shadow: 0 28px 90px rgba(0,0,0,.46);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: -.015em;
}
.app-bg {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(circle at 9% 10%, rgba(130,104,255,.28), transparent 26%),
    radial-gradient(circle at 85% 10%, rgba(37,208,255,.22), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(255,138,52,.12), transparent 30%),
    linear-gradient(135deg, #030611 0%, #0c1430 45%, #08101e 100%);
}
.app-bg::before {
  content:""; position:fixed; inset:0; z-index:-2;
  background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.35), transparent);
}
.app-bg::after {
  content:""; position:fixed; inset:-20%; z-index:-1;
  background: conic-gradient(from 190deg at 50% 50%, transparent, rgba(37,208,255,.09), transparent, rgba(255,138,52,.08), transparent, rgba(130,104,255,.08), transparent);
  animation: aura 18s linear infinite;
}
@keyframes aura { to { transform: rotate(360deg); } }
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)), var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(140%);
}
.hidden { display:none !important; }

.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(480px,100%); padding:38px; border-radius:36px; text-align:center; position:relative; overflow:hidden; }
.brand-mark, .brand-mini {
  position: relative;
  display:grid; place-items:center; color:#fff; font-weight:950;
  background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 48%, var(--orange) 100%);
  box-shadow: 0 18px 42px rgba(37, 99, 235, .26);
  border: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
}
.brand-mark::before, .brand-mini::before {
  content:""; position:absolute; left:14%; right:14%; top:20%; height:3px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  transform:skewX(-28deg);
}
.brand-mark::after, .brand-mini::after {
  content:""; position:absolute; width:56%; height:20%; bottom:16%; left:22%;
  border-top:3px solid rgba(255,255,255,.88);
  border-radius: 26px 26px 0 0;
  transform:skewX(-20deg);
  opacity:.92;
}
.brand-mark { width:82px; height:82px; border-radius:24px; margin:0 auto 18px; font-size:26px; }
.brand-mini { width:46px; height:46px; border-radius:16px; font-size:16px; flex:0 0 auto; }

h1,h2,h3,h4,p { margin-top:0; }
h1 { margin-bottom:8px; font-size:34px; line-height:1.05; font-weight:950; }
h2 { margin-bottom:6px; font-size:30px; line-height:1.05; font-weight:950; }
h3 { margin-bottom:0; font-size:20px; font-weight:900; }
h4 { font-size:15px; margin-bottom:12px; font-weight:900; }
.muted { color: var(--muted); }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:10px;
  color:#9ff1ff; font-size:12px; font-weight:950; text-transform:uppercase; letter-spacing:.08em;
}
.eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 18px rgba(37,208,255,.7); }

.login-form, .form-grid, .edit-grid { display:grid; gap:14px; text-align:left; }
.login-form { margin-top:28px; }
label { color:#dcf0ff; font-size:12px; font-weight:850; display:grid; gap:8px; }
input,select,textarea,button.range-trigger {
  width:100%; color:var(--text); background:rgba(12,20,40,.8);
  border:1px solid rgba(149,167,190,.24); border-radius:16px; padding:12px 14px; outline:none;
  min-height: 46px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}
select option { background:#0f172a; color:white; }
input::placeholder, textarea::placeholder { color:rgba(159,179,200,.68); }
input:focus,select:focus,textarea:focus,button.range-trigger:focus {
  border-color:rgba(37,208,255,.86);
  box-shadow:0 0 0 4px rgba(37,208,255,.13), inset 0 1px 0 rgba(255,255,255,.08);
  background:rgba(12,20,40,.92);
}
button.range-trigger { text-align:left; cursor:pointer; font-weight:800; }
.btn {
  border:1px solid rgba(226,232,240,.14); background:rgba(255,255,255,.07); color:var(--text);
  padding:12px 16px; border-radius:16px; cursor:pointer; font-weight:900;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform:translateY(-1px); background:rgba(255,255,255,.12); border-color:rgba(226,232,240,.22); }
.btn.primary {
  color:#fff; border:none;
  background: linear-gradient(135deg, var(--violet) 0%, var(--blue) 45%, var(--cyan) 75%, var(--orange) 100%);
  box-shadow: 0 14px 34px rgba(37,208,255,.2);
}
.btn.ghost { background:rgba(255,255,255,.04); }
.btn.danger { color:#ffe4e6; background:rgba(251,113,133,.13); border-color:rgba(251,113,133,.28); }
.btn.small, .small-btn { padding:9px 12px; font-size:12px; border-radius:13px; }
.error { color:var(--danger); min-height:20px; font-size:13px; }
.login-hint { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px; margin-top:18px; }
.login-hint span, .lang-switch { border:1px solid var(--line); background:rgba(255,255,255,.04); border-radius:999px; }
.login-hint span { padding:7px 10px; }
.login-lang { margin:18px auto 0; width:max-content; }
.lang-switch { display:flex; gap:4px; padding:4px; align-items:center; }
.lang-btn { border:0; color:var(--muted); background:transparent; border-radius:999px; padding:7px 10px; cursor:pointer; font-weight:950; font-size:12px; }
.lang-btn.active { color:#fff; background:linear-gradient(135deg, rgba(130,104,255,.8), rgba(37,208,255,.72)); }

.app-shell { min-height:100vh; padding:14px; display:grid; gap:14px; align-content:start; }
.top-dock {
  position:sticky; top:12px; z-index:20; border-radius:28px; padding:12px 14px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
}
.top-dock::after {
  content:""; position:absolute; inset:auto -8% -55% -8%; height:120px;
  background:radial-gradient(circle, rgba(255,138,52,.16), transparent 58%), radial-gradient(circle at 70% 0%, rgba(37,208,255,.14), transparent 52%);
  animation:dockPulse 5.8s ease-in-out infinite;
}
@keyframes dockPulse { 0%,100% { transform:translateX(-4%); opacity:.55; } 50% { transform:translateX(4%); opacity:.9; } }
.dock-brand { display:flex; gap:12px; align-items:center; min-width:210px; position:relative; z-index:1; }
.dock-brand strong { display:block; font-size:15px; font-weight:950; }
.dock-brand small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.dock-nav {
  display:flex; justify-content:center; align-items:center; gap:8px;
  background:rgba(4,9,22,.28); border:1px solid rgba(149,167,190,.14); border-radius:999px; padding:6px;
  position:relative; z-index:1;
}
.nav-btn {
  border:0; border-radius:999px; padding:10px 15px; color:#cfdced; background:transparent;
  cursor:pointer; font-weight:950; white-space:nowrap;
}
.nav-btn.active, .nav-btn:hover {
  color:#fff; background: linear-gradient(135deg, rgba(130,104,255,.84), rgba(52,136,255,.68), rgba(255,138,52,.48));
  box-shadow: 0 12px 30px rgba(52,136,255,.18);
}
.dock-side { display:flex; align-items:center; gap:18px; position:relative; z-index:1; }
.dock-tools { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.admin-entry { margin-left: 10px; white-space: nowrap; }
.sync-badge {
  position:relative; border:1px solid var(--line); background:rgba(255,255,255,.045);
  border-radius:999px; padding:9px 12px 9px 30px; color:var(--muted); font-size:12px; line-height:1.2; white-space:nowrap;
}
.sync-badge::before {
  content:""; position:absolute; left:12px; top:50%; width:8px; height:8px; transform:translateY(-50%);
  border-radius:999px; background:#64748b; box-shadow:0 0 0 4px rgba(100,116,139,.12);
}
.sync-badge.ok { color:#bbf7d0; border-color:rgba(52,211,153,.28); background:rgba(52,211,153,.08); }
.sync-badge.ok::before { background:var(--good); box-shadow:0 0 0 4px rgba(52,211,153,.14),0 0 22px rgba(52,211,153,.55); }
.sync-badge.warn { color:#fde68a; border-color:rgba(251,191,36,.3); background:rgba(251,191,36,.08); }
.sync-badge.warn::before { background:var(--warn); box-shadow:0 0 0 4px rgba(251,191,36,.14),0 0 22px rgba(251,191,36,.42); }
.sync-badge.bad { color:#fecdd3; border-color:rgba(251,113,133,.32); background:rgba(251,113,133,.08); }
.sync-badge.bad::before { background:var(--danger); box-shadow:0 0 0 4px rgba(251,113,133,.14),0 0 22px rgba(251,113,133,.44); }

.content { display:grid; gap:14px; max-width:1480px; width:100%; margin:0 auto; }
.page { display:none; }
.page.active { display:grid; gap:14px; animation: pageIn .26s ease both; }
@keyframes pageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.hero-panel {
  border-radius:30px; padding:22px; display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:center; position:relative; overflow:hidden;
}
.hero-panel::after { content:""; position:absolute; right:-50px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(37,208,255,.2), transparent 62%); }
.hero-panel.compact { grid-template-columns:1fr auto; }
.hero-home::after { background: radial-gradient(circle, rgba(255,138,52,.18), transparent 64%); }
.hero-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; position:relative; z-index:1; }
.hero-metrics div, .summary-item, .list-item, .confirm-item, .price-card {
  background:rgba(6,13,28,.46); border:1px solid rgba(149,167,190,.14);
}
.hero-metrics div { border-radius:22px; padding:15px; }
.hero-metrics span { color:var(--muted); font-size:12px; font-weight:900; }
.hero-metrics strong { display:block; margin-top:8px; font-size:28px; font-weight:950; color:#6ceaff; }
.confirm-badge { border:1px solid rgba(52,211,153,.24); background:rgba(52,211,153,.08); color:#bbf7d0; border-radius:22px; padding:16px; min-width:140px; text-align:center; }
.confirm-badge strong { display:block; font-size:28px; margin-top:6px; }

.panel { border-radius:28px; padding:18px; overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:16px; }
.panel-head.compact { align-items:flex-start; }
.panel-head.stacked { align-items:flex-start; }
.tag { border:1px solid rgba(37,208,255,.28); color:#a6f5ff; background:rgba(37,208,255,.08); padding:8px 11px; border-radius:999px; font-size:12px; font-weight:900; }
.form-actions { display:flex; gap:10px; padding-top:4px; }
.top-space { margin-top:10px; }
.pricing-inline { display:grid; grid-template-columns:minmax(260px, 440px) auto; gap:14px; align-items:end; }
.pricing-grid.six { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px; }
.price-card { border-radius:22px; padding:16px; background:radial-gradient(circle at 90% 0%, rgba(130,104,255,.16), transparent 36%), rgba(9,17,34,.55); }
.price-card h4 { color:#dff5ff; margin-bottom:8px; font-weight:950; min-height:24px; }
.price-card strong { display:block; font-size:26px; line-height:1; color:#6ceaff; margin:12px 0; font-weight:950; }
.price-card small { color:var(--muted); line-height:1.45; }

.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.simple-list, .summary-grid { display:grid; gap:12px; }
.list-item, .summary-item { border-radius:18px; padding:14px; }
.list-item strong, .summary-item strong { display:block; font-size:16px; margin-bottom:6px; }
.summary-grid { grid-template-columns:repeat(2,1fr); }

.order-grid { grid-template-columns:repeat(3,1fr); }
.order-grid .full { grid-column:1 / -1; }
.date-range-card {
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  border:1px solid rgba(149,167,190,.16); background:linear-gradient(135deg, rgba(130,104,255,.12), rgba(37,208,255,.07));
  border-radius:22px; padding:15px;
}
.date-title { grid-column:1 / -1; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.date-title strong { font-size:15px; }
.date-title small { color:var(--muted); }
.night-pill { min-width:84px; display:grid; place-items:center; text-align:center; border:1px solid rgba(37,208,255,.25); background:rgba(37,208,255,.08); border-radius:18px; padding:10px; }
.night-pill span { color:var(--muted); font-size:12px; font-weight:900; }
.night-pill strong { display:block; color:#6ceaff; font-size:28px; margin-top:4px; }
.range-trigger { display:flex; align-items:center; font-size:14px; }

.confirm-card { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.confirm-item { border-radius:18px; padding:14px; }
.confirm-item span { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.confirm-item strong { display:block; font-size:18px; }
.filters { display:flex; gap:10px; min-width:390px; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:22px; background:rgba(8,13,26,.4); }
table { width:100%; border-collapse:collapse; min-width:1120px; }
th,td { padding:15px 14px; border-bottom:1px solid rgba(149,167,190,.12); text-align:left; vertical-align:top; font-size:13px; }
th { color:#bfdbfe; background:rgba(15,23,42,.72); font-size:12px; font-weight:950; letter-spacing:.02em; }
td { color:#e5e7eb; }
tr:hover td { background:rgba(59,130,246,.05); }
.status { padding:6px 9px; border-radius:999px; font-size:12px; font-weight:950; display:inline-block; }
.status.booked { background:rgba(251,191,36,.13); color:#fde68a; }
.status.confirmed { background:rgba(59,130,246,.13); color:#bfdbfe; }
.status.in { background:rgba(52,211,153,.13); color:#bbf7d0; }
.status.out { background:rgba(226,232,240,.12); color:#e2e8f0; }
.status.cancel { background:rgba(251,113,133,.13); color:#fecdd3; }
.project-badge { display:inline-flex; padding:6px 9px; border-radius:999px; font-weight:950; font-size:12px; margin-bottom:6px; }
.project-lk { color:#bfdbfe; background:rgba(59,130,246,.14); }
.project-plj { color:#ddd6fe; background:rgba(139,92,246,.17); }
.project-other { color:#fde68a; background:rgba(251,191,36,.12); }
.admin-panel-shift { margin-left: 48px; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.admin-box { border:1px solid rgba(149,167,190,.17); border-radius:24px; padding:19px; background:rgba(15,23,42,.5); }
.account-row, .rate-list li { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid rgba(149,167,190,.13); }
.account-row strong, .rate-list strong { color:#a6f5ff; }
.rate-list { list-style:none; padding:0; margin:0; }
code { display:block; white-space:normal; color:#c4b5fd; background:rgba(0,0,0,.25); padding:11px; border:1px solid rgba(149,167,190,.14); border-radius:14px; font-size:12px; }
.empty-state { color:var(--muted); padding:20px; border:1px dashed rgba(149,167,190,.22); border-radius:20px; background:rgba(15,23,42,.32); }

.edit-dialog, .range-dialog { border:0; padding:0; background:transparent; }
.edit-dialog { width:min(960px, calc(100vw - 24px)); }
.range-dialog { width:min(920px, calc(100vw - 24px)); }
.edit-dialog::backdrop, .range-dialog::backdrop { background:rgba(3,6,18,.68); backdrop-filter:blur(4px); }
.edit-shell, .range-shell { border-radius:26px; padding:18px; }
.edit-head, .range-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.edit-grid { grid-template-columns:repeat(2,1fr); }
.range-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.calendar-months { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.month-box { border:1px solid rgba(149,167,190,.14); border-radius:22px; padding:12px; background:rgba(8,13,26,.36); }
.month-title { font-weight:900; margin-bottom:12px; }
.weekdays, .day-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.weekdays span { text-align:center; font-size:12px; color:var(--muted); font-weight:900; padding:6px 0; }
.day-cell {
  min-height:38px; display:grid; place-items:center; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.02); border:1px solid transparent; font-size:13px;
}
.day-cell.muted-day { opacity:.35; cursor:default; }
.day-cell.active-start, .day-cell.active-end { background:linear-gradient(135deg, var(--violet), var(--blue), var(--orange)); color:white; font-weight:900; }
.day-cell.in-range { background:rgba(37,208,255,.12); border-color:rgba(37,208,255,.22); }
.day-cell:hover:not(.muted-day) { border-color:rgba(37,208,255,.28); }

@media (max-width: 1280px) {
  .pricing-grid.six { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 1100px) {
  .top-dock { grid-template-columns:1fr; }
  .dock-nav { justify-content:flex-start; overflow-x:auto; }
  .dock-side { justify-content:space-between; flex-wrap:wrap; }
  .hero-panel, .hero-panel.compact { grid-template-columns:1fr; }
  .dashboard-grid, .admin-grid { grid-template-columns:1fr; }
  .summary-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 960px) {
  .app-shell { padding:10px; gap:12px; }
  .pricing-inline, .order-grid, .confirm-card, .edit-grid { grid-template-columns:1fr; }
  .date-range-card { grid-template-columns:1fr; }
  .filters { min-width:0; flex-direction:column; }
  .panel-head, .panel-head.stacked { flex-direction:column; align-items:stretch; }
  .admin-panel-shift { margin-left: 0; }
  .calendar-months { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .app-shell { padding:8px; }
  .top-dock { position:relative; top:0; padding:12px; border-radius:24px; }
  .dock-side { display:grid; gap:10px; }
  .dock-tools { display:grid; grid-template-columns:1fr; }
  .admin-entry { margin-left:0; justify-self:end; }
  .hero-panel, .panel { border-radius:22px; padding:16px; }
  .hero-metrics { grid-template-columns:1fr; }
  .pricing-grid.six { grid-template-columns:repeat(2,1fr); }
  .summary-grid { grid-template-columns:1fr; }
  .confirm-card { grid-template-columns:1fr; }
  input, select, textarea, button.range-trigger { min-height:48px; font-size:16px; }
  .form-actions { display:grid; grid-template-columns:1fr; }
  table, thead, tbody, tr, th, td { display:block; min-width:0; width:100%; }
  thead { display:none; }
  .table-wrap { border:0; background:transparent; overflow:visible; }
  tr { border:1px solid rgba(149,167,190,.18); border-radius:18px; padding:12px; margin-bottom:12px; background:rgba(15,23,42,.54); }
  td { border:0; padding:8px 4px; }
}


/* ===== v7 mobile layout optimization ===== */
.home-pricing-panel { scroll-margin-top: 90px; }
.order-grid label { min-width: 0; }

@media (max-width: 860px) {
  .dock-brand { min-width: 0; }
  .dock-side {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dock-tools {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
  }
  .sync-badge { grid-column: 1 / -1; }
  .admin-entry {
    justify-self: end;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .top-dock {
    padding: 12px;
    gap: 10px;
  }
  .dock-brand {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 10px;
    align-items: center;
  }
  .dock-brand strong { font-size: 14px; }
  .dock-brand small { font-size: 11px; }

  .dock-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 6px;
    width: 100%;
    border-radius: 20px;
    padding: 6px;
    overflow: visible;
  }
  .nav-btn {
    width: 100%;
    text-align: center;
    padding: 10px 8px;
    font-size: 13px;
    min-width: 0;
  }

  .dock-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  .dock-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    align-items: stretch;
  }
  .sync-badge {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }
  .lang-switch {
    width: 100%;
    justify-content: space-between;
  }
  .lang-switch .lang-btn {
    flex: 1 1 0;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  #logoutBtn,
  .admin-entry {
    width: 100%;
    min-height: 44px;
    justify-self: stretch;
  }
  .admin-entry {
    justify-self: stretch;
  }

  .hero-home,
  .hero-panel.compact,
  .panel {
    padding: 15px;
  }

  .pricing-inline {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pricing-inline .form-actions {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .order-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }
  .order-grid > label,
  .order-grid > .date-range-card,
  .order-grid > .form-actions,
  .order-grid > .full {
    min-width: 0;
  }
  /* Compact mobile grouping for order entry */
  .order-grid > label:nth-child(1),
  .order-grid > label:nth-child(2),
  .order-grid > label:nth-child(3),
  .order-grid > label:nth-child(4),
  .order-grid > label:nth-child(5),
  .order-grid > label:nth-child(6),
  .order-grid > label:nth-child(7),
  .order-grid > label:nth-child(8),
  .order-grid > label:nth-child(9) {
    grid-column: span 1;
  }
  .date-range-card,
  .order-grid > .full {
    grid-column: 1 / -1;
  }
  .date-range-card {
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
  }
  .date-title {
    grid-column: 1 / -1;
    display: grid;
    gap: 4px;
  }
  .range-trigger {
    min-height: 48px;
    font-size: 14px;
    padding: 12px;
  }
  .night-pill.compact {
    min-width: 72px;
    padding: 8px;
  }
  .night-pill.compact strong {
    font-size: 24px;
  }
  .order-grid textarea {
    min-height: 88px;
  }
  .order-grid .form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
  }
  .hero-metrics div {
    padding: 12px;
    border-radius: 18px;
  }
  .hero-metrics strong {
    font-size: 22px;
  }
}

@media (max-width: 430px) {
  .top-dock { padding: 10px; }
  .dock-nav {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .dock-tools {
    grid-template-columns: 1fr 1fr;
  }
  .pricing-inline .form-actions,
  .order-grid .form-actions {
    grid-template-columns: 1fr;
  }
  .pricing-grid.six {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  .price-card {
    padding: 14px;
    border-radius: 18px;
  }
  .price-card h4 {
    font-size: 13px;
    min-height: auto;
  }
  .price-card strong {
    font-size: 18px;
    margin: 10px 0 8px;
  }
  .price-card small {
    font-size: 11px;
    line-height: 1.35;
  }
  .order-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  .order-grid label span {
    font-size: 11px;
  }
  .order-grid input,
  .order-grid select,
  .order-grid textarea {
    padding: 11px 12px;
    min-height: 46px;
    font-size: 15px;
    border-radius: 14px;
  }
  .hero-home h2,
  .hero-panel h2 {
    font-size: 24px;
  }
}