/* Umove — Coral Drive palette */
:root {
  --plum: #2B1A3F; --plum-soft: #5A4A66; --plum-mist: #D9CCE3;
  --coral: #FF6B4A; --coral-ink: #B8401F;
  --sand: #F6EFE6; --line: #EDE3DA; --field: #D8CBD2;
  --ok-bg: #E3F2E8; --ok: #1E5B34; --warn-bg: #FFF4D6; --warn: #6B4E00; --bad-bg: #FFE3DB; --bad: #8A2E14;
  --radius: 14px;
  --display: "Poppins", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--plum); background: #fff; line-height: 1.5; }
a { color: var(--coral-ink); }
a:hover { color: var(--plum); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; font-family: var(--body); letter-spacing: 0; }
p { margin: 0; }
.muted { color: var(--plum-soft); }
.small { font-size: 14px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.between { justify-content: space-between; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.section { padding: 56px 0; }
.sand { background: var(--sand); }
.dark { background: var(--plum); color: #fff; }
.dark .muted { color: var(--plum-mist); }
[hidden] { display: none !important; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.logo { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.04em; color: var(--plum); text-decoration: none; display: inline-flex; align-items: baseline; }
.logo .u { color: var(--coral); }
.logo svg { width: 18px; height: 22px; margin: 0 1px; position: relative; top: 3px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 500; font-size: 15px; }
.nav a { color: var(--plum); text-decoration: none; padding: 8px 0; }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--coral); }

/* Buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; }
.btn-coral { background: var(--coral); color: var(--plum); }
.btn-plum { background: var(--plum); color: #fff; }
.btn-line { background: #fff; color: var(--plum); border: 1px solid var(--plum); }
.btn-ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
.btn-danger { background: #B42318; color: #fff; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
input, select, textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--plum); border: 1px solid var(--field); border-radius: 10px; padding: 0 14px; height: 48px; background: #fff; width: 100%; }
textarea { height: auto; padding: 12px 14px; min-height: 100px; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--field); border-radius: 12px; cursor: pointer; }
.check input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--plum); }
.check span { flex: 1; }

/* Cards & pills */
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card.flat { border: 0; background: var(--sand); }
.pill { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--sand); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.kpi strong { display: block; font-family: var(--display); font-size: 1.7rem; }
.lines { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.lines div { display: flex; justify-content: space-between; gap: 12px; }
.lines .total { border-top: 1px solid var(--line); padding-top: 10px; font-weight: 700; font-size: 1.2rem; }

/* Tabs */
.tabs { display: flex; gap: 6px; background: var(--sand); border-radius: 999px; padding: 5px; }
.tabs button { flex: 1; min-height: 42px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 600; color: var(--plum); cursor: pointer; }
.tabs button[aria-pressed="true"], .tabs button[aria-selected="true"] { background: var(--plum); color: #fff; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; color: var(--plum-soft); font-weight: 600; font-size: 13px; padding: 0 10px 8px 0; }
td { padding: 10px 10px 10px 0; border-top: 1px solid var(--line); vertical-align: top; }

/* Messages */
.notice { padding: 12px 16px; border-radius: 12px; background: var(--sand); font-size: 15px; }
.notice.error { background: var(--bad-bg); color: var(--bad); }
.notice.success { background: var(--ok-bg); color: var(--ok); }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--plum); color: #fff; padding: 12px 20px; border-radius: 12px; z-index: 100; max-width: 90vw; }

/* Place autocomplete */
.place { position: relative; }
.place ul { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--field); border-radius: 10px; box-shadow: 0 8px 24px rgba(43,26,63,.12); max-height: 260px; overflow: auto; }
.place li button { width: 100%; text-align: left; border: 0; background: none; padding: 10px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--plum); cursor: pointer; }
.place li button:hover, .place li button:focus { background: var(--sand); }

/* Map */
.map { height: 320px; border-radius: 16px; overflow: hidden; background: var(--sand); }

/* Dashboard layout */
.dash { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 71px); }
.dash aside { background: var(--plum); padding: 20px 12px; }
.dash aside button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--plum-mist); font: inherit; font-weight: 500; padding: 10px 14px; border-radius: 10px; cursor: pointer; }
.dash aside button[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; font-weight: 700; }
.dash main { background: var(--sand); padding: 28px; min-width: 0; }
@media (max-width: 800px) {
  .dash { grid-template-columns: 1fr; }
  .dash aside { display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
  .dash aside button { white-space: nowrap; width: auto; }
  .dash main { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }