:root {
  /* Cliq dark theme (reference: bootstrapget.com Cliq admin template) */
  --page: #0f0e0f;
  --surface: #1f1e1f;
  --surface-subtle: rgba(0, 0, 0, .28);
  --ink: #e4e3e4;
  --muted: #8a8a8a;
  --line: #2e2d2e;
  --line-strong: #565556;
  --accent: #03835d;
  --accent-gradient: linear-gradient(45deg, #006b60 0%, #96c252 100%);
  --card-gradient: linear-gradient(45deg, #464646 0%, #141819 100%);
  --sidebar: #1b1a1b;
  --sidebar-active: #2b2a2b;
  --success: #b2ce84;
  --warning: #ffd26a;
  --danger: #ff6a59;
  --radius: 8px;
  --shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { background: var(--page); color: var(--ink); font-family: Lato, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); background: transparent; color: #fff; border-radius: 4px; padding: 9px 10px; outline: none; }
select option { background: #1f1e1f; color: #fff; }
::placeholder { color: #6b6a6b; }
input:focus, select:focus, textarea:focus { border-color: #96c252; box-shadow: 0 0 0 2px rgba(150, 194, 82, .18); }
input[type="number"] { font-variant-numeric: tabular-nums; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 10px auto 10px 10px; z-index: 20; width: 232px; display: flex; flex-direction: column; background: var(--sidebar); color: #fff; border-radius: 10px; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 12px; height: 82px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-train { margin-left: auto; width: 104px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.brand strong, .brand small, .sidebar-foot strong, .sidebar-foot small { display: block; }
.brand strong { font-size: 15px; }.brand small,.sidebar-foot small { margin-top: 2px; color: rgba(255,255,255,.55); font-size: 11px; }
.nav { display: grid; align-content: start; gap: 2px; padding: 18px 12px; overflow-y: auto; overscroll-behavior: contain; }
.nav-group { display: grid; gap: 2px; }
.nav-group[hidden] { display: none; }
.nav-toggle,.nav-item { width: 100%; min-height: 34px; border: 0; border-radius: 4px; background: transparent; color: #979697; text-align: left; text-transform: uppercase; }
.nav-toggle { display: flex; align-items: center; gap: 7px; padding: 7px 8px; font-size: 12px; }
.nav-toggle:hover,.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-chevron { width: 11px; color: rgba(255,255,255,.45); font-size: 18px; line-height: 1; transform: rotate(90deg); transition: transform .16s ease; }
.nav-toggle[aria-expanded="false"] .nav-chevron { transform: rotate(0); }
.nav-toggle.nav-level-0 { color: #fff; font-size: 13px; }
.nav-toggle.nav-level-1 { padding-left: 22px; }
.nav-toggle.nav-level-2 { padding-left: 42px; }
.nav-item { display: flex; align-items: center; padding: 8px 10px; font-size: 11px; line-height: 1.25; }
.nav-item.nav-level-1 { padding-left: 41px; }
.nav-item.nav-level-2 { padding-left: 34px; gap: 8px; white-space: nowrap; }
.nav-toggle.nav-level-2.nav-po { padding-left: 16px; gap: 8px; white-space: nowrap; }
.nav-item.nav-level-3 { padding-left: 62px; }
.nav-ico { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; }
.nav-ico svg { width: 14px; height: 14px; }
.nav-item.active .nav-ico, .nav-item:hover .nav-ico { box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.nav-item.nav-level-4 { padding-left: 100px; font-size: 10px; }
.nav-item.nav-level-4.nav-po-row { padding-left: 78px; }
.nav-note { display: block; padding: 6px 12px 6px 100px; color: rgba(255,255,255,.45); font-size: 10px; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--sidebar-active); color: #fff; font-weight: 700; }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; }
.status-dot { width: 8px; height: 8px; background: #96c252; border-radius: 50%; box-shadow: 0 0 0 4px rgba(150,194,82,.18); }

.main { min-height: 100vh; margin-left: 252px; }
.topbar { position: sticky; top: 0; z-index: 10; min-height: 82px; display: flex; align-items: center; gap: 20px; padding: 14px 28px; background: rgba(15,14,15,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.menu-toggle { display: none; border: 0; background: transparent; color: #fff; font-size: 20px; }
.event-context { width: min(330px, 34vw); }
.event-context label, .date-field { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.event-context input { margin-top: 4px; padding: 0; border: 0; border-radius: 0; font-size: 15px; font-weight: 700; box-shadow: none; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.date-field { width: 160px; }.date-field input { margin-top: 4px; padding: 0; border: 0; border-radius: 0; color: #fff; box-shadow: none; }
.save-status { color: var(--muted); font-size: 11px; }
.button { min-height: 36px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 50px; font-size: 12px; font-weight: 700; }
.button.primary { background: var(--accent-gradient); color: white; border-color: transparent; }
.button.secondary { background: transparent; color: #fff; }
.button.secondary:hover { background: rgba(255,255,255,.06); }
.text-button { padding: 0; background: transparent; border: 0; color: var(--muted); font-size: 12px; }
.text-button:hover { color: var(--ink); }

.view { display: none; padding: 34px 28px 56px; }.view.active { display: block; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.title-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.countdown { display: grid; gap: 1px; min-width: 150px; padding: 8px 14px; background: var(--card-gradient); border: 0; border-radius: 8px; box-shadow: var(--shadow); }
.countdown span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.countdown strong { font-size: 18px; letter-spacing: -.02em; line-height: 1.1; }
.countdown small { color: var(--muted); font-size: 10px; }
.countdown.live strong { color: var(--success); }.countdown.past strong { color: var(--muted); }
.page-heading h1 { color: #fff; margin: 5px 0 0; font-size: clamp(26px, 3vw, 38px); line-height: 1; letter-spacing: -.04em; }
.page-heading p { max-width: 440px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: right; }
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.metric-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-grid.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; background: var(--card-gradient); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.metric span { color: var(--muted); font-size: 11px; font-weight: 700; }.metric strong { margin: 14px 0 6px; color: #fff; font-size: 25px; letter-spacing: -.04em; }.metric small { color: var(--muted); font-size: 10px; line-height: 1.4; }

.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.span-4 { grid-column: span 4; }.span-5 { grid-column: span 5; }.span-7 { grid-column: span 7; }.span-8 { grid-column: span 8; }.span-12 { grid-column: span 12; }
.panel { padding: 20px; background: var(--card-gradient); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.panel-head h2 { margin: 4px 0 0; color: #fff; font-size: 16px; letter-spacing: -.02em; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.2fr; align-items: stretch; gap: 9px; }
.flow > div { min-height: 104px; display: flex; flex-direction: column; justify-content: center; padding: 14px; background: var(--surface-subtle); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; }
.flow > div.result { background: rgba(0,0,0,.45); border-color: rgba(150,194,82,.5); }.flow i { align-self: center; color: var(--muted); font-style: normal; }.flow span { color: var(--muted); font-size: 10px; text-transform: uppercase; }.flow strong { margin: 5px 0; color: #fff; font-size: 24px; }.flow small { color: var(--muted); font-size: 10px; }
.field { display: block; color: var(--muted); font-size: 11px; font-weight: 650; }.field input,.field select,.field textarea { margin-top: 6px; color: var(--ink); font-weight: 500; }
.panel > .field + .field { margin-top: 12px; }
.form-grid { display: grid; gap: 13px; }
.basic-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.field-span-3 { grid-column: span 3; }
.schedule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facilities-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.basic-vendor-table td:first-child { width: 52%; }
.basic-vendor-table td:last-child { width: 42px; min-width: 42px; }
.time-between { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); align-items: center; gap: 8px; }
.time-between span { color: var(--muted); text-align: center; }
input[readonly] { background: rgba(255,255,255,.04); color: var(--muted); }
.address-lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 6px; }
.address-lookup-row input { margin-top: 0; }
.lookup-status { display: block; min-height: 15px; margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 500; }
.lookup-status.success { color: var(--success); }.lookup-status.error { color: var(--danger); }
.onemap-connect { padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface-subtle); color: var(--ink); }
.onemap-connect summary { cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 700; }
.onemap-connect .field { max-width: 520px; margin-top: 12px; }
.formula-card { margin-top: 18px; padding: 16px; background: var(--surface-subtle); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; }.formula-card span,.formula-card code { display: block; color: var(--muted); font-size: 10px; }.formula-card strong { display: block; margin: 7px 0; color: #fff; font-size: 28px; }.formula-card code { font-family: inherit; }

.table-wrap { width: 100%; overflow: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }.wide-table table { min-width: 980px; }
.view:not(#view-purchase-orders) .table-wrap { max-height: min(68vh, 640px); overflow: auto; }
.view:not(#view-purchase-orders) .table-wrap thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--line-strong), 0 5px 10px rgba(0,0,0,.35); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: #262527; color: #b5b4b5; border-bottom: 1px solid var(--line-strong); text-align: left; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }tbody tr:hover td { background: rgba(255,255,255,.04); }
tfoot th { position: static; border-top: 1px solid var(--line-strong); border-bottom: 0; }
.input-table td { min-width: 92px; }.input-table td:nth-child(2) { min-width: 150px; }.input-table input,.input-table select { min-width: 76px; padding: 7px 8px; border-radius: 4px; }.input-table .computed { background: rgba(255,255,255,.05); color: #fff; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.view:not(#view-purchase-orders) .table-wrap th:first-child,
.view:not(#view-purchase-orders) .table-wrap td:first-child { text-align: left; }
.view:not(#view-purchase-orders) .table-wrap th:not(:first-child),
.view:not(#view-purchase-orders) .table-wrap td:not(:first-child) { text-align: center; }
.view:not(#view-purchase-orders) .table-wrap td:first-child input,
.view:not(#view-purchase-orders) .table-wrap td:first-child select { text-align: left; text-align-last: left; }
.view:not(#view-purchase-orders) .table-wrap td:not(:first-child) input,
.view:not(#view-purchase-orders) .table-wrap td:not(:first-child) select { text-align: center; text-align-last: center; }
.currency-input { position: relative; display: flex; align-items: center; }
.currency-input > span { position: absolute; left: 9px; z-index: 1; color: var(--muted); font-weight: 700; pointer-events: none; }
.currency-input input { padding-left: 22px !important; }
.logic-table { max-width: 620px; margin: 0 auto; }
.logic-measure { display: grid; grid-template-columns: minmax(90px, 140px) auto; align-items: center; justify-content: center; gap: 8px; }
.logic-measure span { color: var(--muted); font-weight: 700; }
.delete-row,.visibility-row,.edit-row { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.delete-row svg,.visibility-row svg,.edit-row svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.delete-row:hover { color: var(--danger); border-color: rgba(255,106,89,.4); background: rgba(255,106,89,.12); }
.edit-row:hover { color: #fff; border-color: var(--line-strong); background: rgba(255,255,255,.06); }
.edit-row.editing { color: var(--success); border-color: rgba(178,206,132,.4); background: rgba(178,206,132,.12); }
.cell-text { display: block; white-space: normal; line-height: 1.35; }
.menu-cards { display: grid; gap: 16px; }
.menu-card .panel-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.menu-card .menu-card-eyebrow { justify-self: start; }
.menu-card .panel-title-edit { grid-column: 2; text-align: center; }
.menu-card .panel-title-edit .title-input { margin: 0 auto; text-align: center; min-width: 320px; }
.menu-card .panel-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.menu-card .panel-head .delete-row { margin-left: 4px; }
.panel-title-edit { min-width: 0; flex: 1; }
.title-input { display: block; width: 100%; max-width: 640px; margin: 5px 0 0; padding: 0 0 2px; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; background: transparent; color: #fff; font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.title-input:hover { border-bottom-color: var(--line-strong); }.title-input:focus { outline: none; border-bottom-color: #96c252; box-shadow: none; }
.status-cell { white-space: nowrap; }.status-cell .status-label { display: inline-block; min-width: 62px; margin-right: 6px; font-size: 11px; font-weight: 650; color: var(--muted); text-align: right; }
.status-cell .status-label.approved { color: var(--success); }.status-cell .status-label.adjust { color: var(--warning); }
.status-row { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.status-row svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.status-row:hover { color: #fff; border-color: var(--line-strong); background: rgba(255,255,255,.06); }
.status-row.active.approve { color: var(--success); border-color: rgba(178,206,132,.4); background: rgba(178,206,132,.12); }.status-row.active.adjust { color: var(--warning); border-color: rgba(255,210,106,.4); background: rgba(255,210,106,.12); }
.move-row { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--line-strong); border-radius: 5px; cursor: pointer; font-size: 11px; }
.move-row:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.06); }.move-row:disabled { opacity: .35; cursor: default; }
.row-actions-cell.arranging { width: 64px; min-width: 64px !important; }
.button.active { background: var(--sidebar-active); color: #fff; border-color: var(--line-strong); }
.panel-head-lead { display: flex; align-items: flex-start; gap: 10px; }
.panel-head-lead .edit-row { margin-top: 2px; flex: none; }
.panel-subhead { margin: 18px 0 10px; }.panel-subhead h3 { margin: 4px 0 0; color: #fff; font-size: 14px; letter-spacing: -.02em; }
.assumption-list { display: grid; gap: 10px; }.assumption-list div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 12px; }.assumption-list span { color: var(--muted); font-weight: 650; font-size: 11px; }.assumption-list strong { color: #fff; font-weight: 700; }
.visibility-row:hover { color: #fff; border-color: var(--line-strong); background: rgba(255,255,255,.06); }
.row-actions-cell { width: 58px; min-width: 58px !important; padding-right: 8px; text-align: right; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.cogs-toolbar { margin-top: 0; }
.cogs-row-hidden td { opacity: .48; }
.ratio-status { padding: 5px 8px; color: var(--success); background: rgba(178,206,132,.14); border-radius: 999px; font-size: 11px; font-weight: 800; }.ratio-status.invalid { color: var(--danger); background: rgba(255,106,89,.14); }
.check-list { display: grid; gap: 8px; }.check { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; background: var(--surface-subtle); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; font-size: 12px; }.check span:last-child { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }.check.warning span:last-child { color: var(--warning); }.check.danger span:last-child { color: var(--danger); }
.inline-number { display: inline-block; width: 54px; margin: 0 4px; padding: 3px 5px; }
.panel-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.po-workspace { max-width: 1060px; margin: 0 auto; }
.po-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 12px 14px; background: var(--card-gradient); border: 0; border-radius: 8px; box-shadow: var(--shadow); }
.po-toolbar strong { display: block; margin-top: 3px; color: #fff; font-size: 12px; }.po-toolbar .panel-actions { margin: 0; }
.po-document { min-height: 860px; padding: 42px 54px 38px; background: #fff; border: 0; box-shadow: 0 16px 50px rgba(0,0,0,.45); color: #2e2c29; font-family: Cambria, Georgia, serif; }
.po-document input, .po-document select, .po-document textarea { color: #2e2c29; }
.po-document input:focus, .po-document select:focus, .po-document textarea:focus { box-shadow: none; }
.po-document ::placeholder { color: #8f8a83; }
.po-document .currency-input > span { color: #2e2c29; }
.po-document .delete-row { color: #8f8a83; }
.po-document-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); align-items: start; gap: 24px; margin-bottom: 30px; }.po-title { margin: 0; text-align: right; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 42px; font-weight: 700; letter-spacing: .01em; }.po-event-title { min-width: 0; padding: 0; border: 0; background: transparent; color: #2e2c29; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 42px; font-weight: 700; line-height: 1.1; }.po-event-title:focus { border: 0; box-shadow: none; }
.po-details-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 60px; margin-bottom: 30px; }.po-details-block { display: grid; align-content: start; gap: 4px; }.po-details-block.right .po-line span { text-align: right; }
.po-line { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; min-height: 25px; font-size: 11px; }.po-details-block.right .po-line { grid-template-columns: 112px minmax(0, 1fr); }.po-line span { font-weight: 700; }.po-line input { height: 25px; padding: 2px 4px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font-family: Cambria, Georgia, serif; font-size: 12px; }.po-line input:hover,.po-line input:focus { border-bottom-color: #a9a49c; box-shadow: none; }.po-line select { height: 25px; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font-family: Cambria, Georgia, serif; font-size: 12px; }.po-line select:hover,.po-line select:focus { border-bottom-color: #a9a49c; box-shadow: none; }.po-spacer { height: 15px; }.po-spacer.small { height: 6px; }
.po-line.billing-line { grid-template-columns: 92px minmax(0, 1fr); }.po-line .billing-name { height: auto; min-height: 29px; font-size: 13px; font-weight: 800; white-space: normal; }
.po-table-wrap { overflow-x: auto; }.po-table { min-width: 760px; font-family: Cambria, Georgia, serif; font-size: 11px; }.po-table th { position: static; padding: 8px; background: transparent; color: #2e2c29; border-top: 1px solid #2e2c29; border-bottom: 1px solid #2e2c29; font-family: Cambria, Georgia, serif; font-size: 10px; letter-spacing: 0; text-align: center; text-transform: none; }.po-table th:nth-child(2) { text-align: left; }.po-table td { height: 34px; padding: 3px 6px; border-bottom: 0; }.po-table td { text-align: center; }.po-table td.po-product { text-align: left; }.po-table td.po-qty input { text-align: center; }.po-table td.po-qty input::placeholder { color: #2e2c29; opacity: 1; }.po-table tbody tr:hover td { background: #fbfaf8; }.po-table input { height: 28px; min-width: 70px; padding: 3px 4px; border: 0; border-bottom: 1px solid #dedbd6; border-radius: 0; background: transparent; font-family: Cambria, Georgia, serif; font-size: 11px; }.po-table input:focus { border-bottom-color: #2e2c29; box-shadow: none; }.po-table .serial { width: 48px; min-width: 48px; text-align: center; }.po-table .po-amount { min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.po-table .currency-input > span { left: 4px; }.po-table .currency-input input { padding-left: 14px !important; }
.po-totals { display: grid; grid-template-columns: 1fr 270px; margin-top: 14px; }.po-totals table { font-family: Cambria, Georgia, serif; font-size: 11px; }.po-totals th { position: static; padding: 5px 10px; background: transparent; border: 0; color: #2e2c29; font-family: Cambria, Georgia, serif; font-size: 10px; letter-spacing: 0; text-align: right; text-transform: none; }.po-totals td { width: 120px; padding: 5px 8px; border: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }.po-totals .grand-total th,.po-totals .grand-total td { padding-top: 10px; border-top: 1px solid #2e2c29; font-size: 12px; }.po-gst-input { display: inline-block; width: 40px; padding: 1px 3px; border: 0; border-bottom: 1px solid #c9c5be; border-radius: 0; text-align: right; }
.po-notes { margin-top: 28px; }.po-notes label { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; }.po-notes textarea { min-height: 88px; padding: 7px 0; border: 0; border-top: 1px solid #dedbd6; border-bottom: 1px solid #dedbd6; border-radius: 0; font-family: Cambria, Georgia, serif; font-size: 11px; line-height: 1.55; resize: vertical; }.po-notes textarea:focus { box-shadow: none; border-color: #2e2c29; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 50; max-width: 320px; padding: 12px 15px; background: #2b2a2b; color: white; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.5); font-size: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; }.toast.show { opacity: 1; transform: translateY(0); }

.panel-note { margin: 14px 0 0; color: var(--muted, #6b6b6b); font-size: 12px; }
/* Bento dashboard (Cliq colour set) */
.bento-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bento-hint { color: var(--muted); font-size: 11px; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 128px; grid-auto-flow: dense; gap: 16px; }
.bento.editing .bento-tile { cursor: grab; outline: 2px dashed rgba(255,255,255,.45); outline-offset: -2px; }
.bento.editing .bento-tile.dragging { opacity: .4; }
.bento.editing .bento-tile.drop-before { box-shadow: -6px 0 0 #96c252, var(--shadow); }
.bento.editing .bento-tile.drop-after { box-shadow: 6px 0 0 #96c252, var(--shadow); }
.tile-tools { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); font-size: 11px; color: #fff; }
.tile-swatches { display: flex; gap: 6px; }
.tile-swatch { width: 16px; height: 16px; border: 2px solid transparent; border-radius: 50%; padding: 0; cursor: pointer; }
.tile-swatch.active { border-color: #fff; }
.tile-size { display: flex; align-items: center; gap: 4px; }
.tile-size button { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: transparent; color: #fff; font-size: 13px; line-height: 1; padding: 0; }
.tile-size button:hover { background: rgba(255,255,255,.15); }
.tile-size span { min-width: 34px; text-align: center; }
.tile-font { width: auto; padding: 3px 6px; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; }
.tile-size button[data-font-step] { width: auto; padding: 0 6px; border-radius: 11px; font-size: 11px; }
.bento-tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 24px; border-radius: 10px; box-shadow: var(--shadow); color: #fff; overflow: hidden; }
.bento-tile h2 { margin: 0; color: inherit; font-size: 20px; letter-spacing: -.01em; }
.bento-tile > small { margin-top: 8px; font-size: 12px; opacity: .85; }
.bento-big { display: block; margin-top: 18px; color: inherit; font-size: clamp(40px, 4vw, 60px); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.bento-dark { background: var(--card-gradient); }
.bento-teal { background: linear-gradient(160deg, #3fb0c1 0%, #67cdca 100%); }
.bento-green { background: linear-gradient(160deg, #5aa66b 0%, #a7d05e 100%); }
.bento-orange { background: linear-gradient(160deg, #ee6f57 0%, #f9a27c 100%); }
.bento-purple { background: linear-gradient(160deg, #4a4fd6 0%, #5d6ff3 100%); }
.bento-warm { background: linear-gradient(160deg, #5a4b41 0%, #2b3a3c 100%); }
.bento-light { background: linear-gradient(160deg, #f2f2f2 0%, #d9d9d9 100%); color: #1b1a1b; }
.bento-doors .eyebrow { color: var(--muted); }
.bento-doors small { margin-top: auto; color: var(--muted); font-size: 12px; line-height: 1.5; }
.bento-doors.live .bento-big { color: var(--success); }.bento-doors.past .bento-big { color: var(--muted); }
.bento:not(.editing) .bento-doors { cursor: pointer; }
.bento-doors.has-poster { background-size: cover; background-position: center; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.bento-doors.has-poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.65) 100%); pointer-events: none; }
.bento-doors.has-poster > * { position: relative; }
.bento-doors.has-poster .eyebrow, .bento-doors.has-poster small { color: rgba(255,255,255,.85); }
.bento-doors.has-poster.past .bento-big { color: rgba(255,255,255,.7); }
.poster-hint { position: absolute; right: 14px; bottom: 12px; color: var(--muted); font-size: 10px; opacity: 0; transition: opacity .15s; }
.bento:not(.editing) .bento-doors:hover .poster-hint { opacity: 1; }
.bento-doors.has-poster .poster-hint { display: none; }
.poster-remove { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; line-height: 1; opacity: 0; transition: opacity .15s; }
.bento-doors:hover .poster-remove { opacity: 1; }
.bento.editing .poster-remove { display: none; }
.bento-drinks > small { margin-top: auto; }
.bento-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bento-flow { justify-content: center; }
.bento-flow .panel-head { margin-bottom: 10px; }
.bento-flow .flow > div { min-height: 64px; padding: 10px 12px; }.bento-flow .flow strong { font-size: 20px; margin: 3px 0; }
.tile-action { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.82); color: #ee6f57; }
.tile-action:hover { background: #fff; }
.bento.editing .tile-action { display: none; }
.bento-foot { margin-top: auto; }
.button.pill-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.button.pill-light:hover { background: rgba(255,255,255,.14); }
.bento-inputs { margin-top: auto; padding-top: 18px; display: grid; gap: 10px; }
.bento-inputs .field { color: rgba(255,255,255,.9); font-weight: 700; }
.bento-inputs input { background: rgba(255,255,255,.45); border-color: rgba(255,255,255,.55); color: #0f2b2e; font-weight: 700; }
.bento-inputs input:focus { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.ring-stat { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; text-align: center; }
.ring-stat span { font-size: 12px; opacity: .75; }.ring-stat strong { font-size: 22px; letter-spacing: -.02em; color: inherit; }.ring-stat small { font-size: 10px; opacity: .6; }
.ring circle { fill: none; stroke: rgba(128,128,128,.3); stroke-width: 6; }
.ring .ring-fill { stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray .4s ease; }
.ring text { font-family: inherit; font-size: 14px; font-weight: 700; fill: currentColor; text-anchor: middle; }
.ring-lg circle { stroke: rgba(255,255,255,.28); stroke-width: 10; }.ring-lg text { font-size: 22px; fill: #fff; }
.gap-row { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.gap-row .bento-big { margin-top: 0; }.gap-row small { display: block; margin-top: 6px; font-size: 12px; opacity: .85; }
.bento-rows { margin-top: auto; display: grid; gap: 8px; font-size: 13px; }
.bento-rows > div { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.3); }
.bento-checks .check-list { margin-top: 12px; gap: 0; }
.bento-checks .check { padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; font-size: 13px; }
.bento-checks .check:last-child { border-bottom: 0; }
.bento-checks .check span:last-child { padding: 4px 10px; border-radius: 4px; background: #8dc25a; color: #0f0e0f; letter-spacing: .06em; }
.bento-checks .check.warning span:last-child { background: var(--warning); color: #0f0e0f; }.bento-checks .check.danger span:last-child { background: var(--danger); color: #fff; }
@media (max-width: 1120px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bento-tile { grid-column: auto !important; grid-row: auto !important; min-height: 180px; }
  .bento-flow, .bento-tile[data-cols="3"], .bento-tile[data-cols="4"] { grid-column: 1 / -1 !important; }
}
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .span-4,.span-5,.span-7,.span-8 { grid-column: span 6; }
  .facilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .save-status { display: none; }
}
@media (max-width: 820px) {
  .sidebar { transform: translateX(calc(-100% - 12px)); transition: transform .22s ease; }.sidebar.open { transform: translateX(0); box-shadow: 20px 0 50px rgba(0,0,0,.55); }
  .main { margin-left: 0; }.menu-toggle { display: block; }.topbar { padding: 12px 16px; }.topbar-actions .date-field,.topbar-actions .secondary { display: none; }.event-context { width: auto; flex: 1; }
  .view { padding: 26px 16px 48px; }.page-heading { align-items: start; flex-direction: column; }.page-heading p { text-align: left; }
  .basic-info-grid,.schedule-grid,.facilities-grid { grid-template-columns: 1fr; }
  .field-span-3 { grid-column: span 1; }
  .time-between { grid-template-columns: 1fr; }
  .time-between span { display: none; }
  .address-lookup-row { grid-template-columns: 1fr; }
  .span-4,.span-5,.span-7,.span-8,.span-12 { grid-column: span 12; }.metric-grid,.metric-grid.compact { grid-template-columns: repeat(2, 1fr); }.flow { grid-template-columns: 1fr; }.flow i { transform: rotate(90deg); }
  .po-toolbar { align-items: flex-start; flex-direction: column; }.po-document { min-height: 0; padding: 32px 24px; }.po-document-head { grid-template-columns: 1fr; }.po-event-title,.po-title { font-size: 34px; text-align: left; }.po-details-grid { grid-template-columns: 1fr; gap: 24px; }.po-details-block.right .po-line span { text-align: left; }
}
@media (max-width: 480px) {
  .metric-grid,.metric-grid.compact { grid-template-columns: 1fr; }.metric { min-height: 108px; }.topbar-actions .button { padding-inline: 9px; }.page-heading h1 { font-size: 27px; }
}

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  .sidebar,.topbar,.page-heading,.po-toolbar,.panel-actions,.delete-row,.button,.toast { display: none !important; }.main { margin: 0; }.view { display: none !important; padding: 0; }.view.active { display: block !important; }.panel { border: 0; box-shadow: none; }.table-wrap { overflow: visible; }.po-workspace { max-width: none; }.po-document { min-height: 0; padding: 7mm 9mm; border: 0; box-shadow: none; }.po-document-head { margin-bottom: 5mm; }.po-event-title,.po-title { font-size: 28pt; }.po-table-wrap { overflow: visible; }.po-table { min-width: 0; }.po-table td { height: 7mm; }.po-line input,.po-table input,.po-notes textarea,.po-gst-input { border-color: transparent !important; }.po-details-grid { gap: 10mm; margin-bottom: 6mm; }.po-totals { margin-top: 3mm; }.po-notes { margin-top: 5mm; }.po-notes textarea { min-height: 18mm; }
  /* print layout restore: mobile breakpoint must not apply on A4 */
  .po-workspace { padding: 0; }
  .po-document-head { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 8mm; margin-bottom: 4mm; }
  .po-event-title, .po-title { font-size: 24pt; }
  .po-title { text-align: right; }
  .po-details-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 12mm; margin-bottom: 5mm; }
  .po-details-block.right .po-line span { text-align: right; }
  .po-line { min-height: 5.4mm; font-size: 10px; }
  .po-line input, .po-line select { height: 5.4mm; font-size: 10.5px; }
  .po-line select { appearance: none; -webkit-appearance: none; }
  .po-line .billing-name { min-height: 6mm; font-size: 11px; }
  .po-spacer { height: 3mm; } .po-spacer.small { height: 1.5mm; }
  .po-table td { height: 6.4mm; padding: 1px 6px; }
  .po-table input { height: 5.6mm; }
  .po-notes { margin-top: 4mm; }
  .po-notes textarea { min-height: 14mm; }
  .po-table tr, .po-totals, .po-notes { page-break-inside: avoid; }

  html, body, .app, .main, .view, .po-workspace { background: #fff !important; }
  .po-document-head { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .po-event-title { width: 100%; font-size: 20pt; }
  .po-table input { width: 100%; min-width: 0; }
  .po-table .serial { width: 8mm; min-width: 8mm; }
  .po-table .po-amount { min-width: 22mm; }
  .po-notes textarea { resize: none; }

  .po-title { white-space: nowrap; font-size: 22pt; }
  .po-document input, .po-document textarea { background: transparent !important; }
  .po-table th:nth-child(2), .po-table td:nth-child(2) { width: 32%; }
  .po-table th:nth-child(3), .po-table td:nth-child(3) { width: 16%; }

  .po-table tbody tr:hover td { background: transparent !important; }

}

/* ── Entry / sign-in screen ─────────────────────────────────────────── */
body.auth-checking .app-shell,
body.auth-locked .app-shell { display: none; }
body.auth-checking .auth-screen { display: none; }
body.auth-open .auth-screen,
body.auth-open .auth-boot { display: none; }

.auth-boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--page); z-index: 60; }
body:not(.auth-checking) .auth-boot { display: none; }
.auth-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.16); border-top-color: #96c252; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-screen { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; overflow-y: auto; background:
  radial-gradient(900px 520px at 12% -10%, rgba(0,107,96,.34), transparent 60%),
  radial-gradient(760px 480px at 96% 108%, rgba(150,194,82,.16), transparent 62%), var(--page); }
.auth-panel { width: min(1040px, 100%); display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--sidebar); box-shadow: 0 30px 80px rgba(0,0,0,.55); }

.auth-hero { display: flex; flex-direction: column; padding: 40px 38px; background: var(--card-gradient); border-right: 1px solid rgba(255,255,255,.08); }
.auth-hero-top { display: flex; align-items: center; gap: 14px; }
.auth-mark strong { display: block; color: #fff; font-size: 17px; letter-spacing: .01em; }
.auth-mark small { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.auth-train { margin-left: auto; width: 128px; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.auth-hero h1 { margin: 34px 0 0; color: #fff; font-size: 34px; line-height: 1.12; font-weight: 900; letter-spacing: -.01em; }
.auth-hero-sub { margin: 14px 0 0; max-width: 40ch; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.65; }
.auth-points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.auth-points li { position: relative; padding-left: 22px; color: rgba(255,255,255,.78); font-size: 12.5px; line-height: 1.5; }
.auth-points li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-gradient); }
.auth-hero-foot { margin-top: auto; padding-top: 30px; color: rgba(255,255,255,.4); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }

.auth-card { padding: 44px 38px; background: var(--sidebar); }
.auth-card form { display: grid; gap: 0; }
.auth-card .eyebrow { color: #96c252; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.auth-card h2 { margin: 8px 0 0; color: #fff; font-size: 24px; font-weight: 700; }
.auth-sub { margin: 8px 0 26px; color: var(--muted); font-size: 12.5px; }
.auth-card label { margin-bottom: 7px; color: rgba(255,255,255,.72); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.auth-card input { margin-bottom: 16px; padding: 11px 12px; background: rgba(0,0,0,.28); border-radius: 6px; }
.auth-submit { margin-top: 6px; padding: 12px 14px; border: 0; border-radius: 6px; background: var(--accent-gradient); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transition: filter .15s ease; }
.auth-submit:hover:not(:disabled) { filter: brightness(1.08); }
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-alt { margin-top: 12px; padding: 9px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: rgba(255,255,255,.7); font-size: 12px; }
.auth-alt:hover:not(:disabled) { border-color: #96c252; color: #fff; }
.auth-alt:disabled { opacity: .5; cursor: default; }
.auth-msg { min-height: 18px; margin: 14px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.auth-msg.is-error { color: var(--danger); }
.auth-msg.is-ok { color: var(--success); }

.sign-out { flex: 0 0 auto; margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: transparent; color: rgba(255,255,255,.6); }
.sign-out:hover { border-color: var(--danger); color: var(--danger); }
.sign-out svg { width: 15px; height: 15px; }
.sidebar-foot strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 126px; }

@media (max-width: 820px) {
  .auth-panel { grid-template-columns: minmax(0, 1fr); }
  .auth-hero { padding: 32px 26px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .auth-hero h1 { margin-top: 24px; font-size: 27px; }
  .auth-points { display: none; }
  .auth-card { padding: 30px 26px; }
}
@media print { .auth-screen, .auth-boot { display: none !important; } }

/* ── Intro film → sign-in transition ────────────────────────────────── */
.intro-layer { position: fixed; inset: 0; z-index: 70; overflow: hidden; background: #000; }
.intro-layer[hidden] { display: none; }
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-vignette { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%),
  linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 74%, rgba(0,0,0,.6) 100%); }
.intro-sweep { position: absolute; top: -60%; left: -40%; width: 45%; height: 220%; pointer-events: none; opacity: 0;
  transform: rotate(14deg); background: linear-gradient(90deg, transparent, rgba(150,194,82,.16) 38%, rgba(255,255,255,.55) 50%, rgba(0,107,96,.18) 62%, transparent); filter: blur(6px); }
.intro-skip { position: absolute; right: 26px; bottom: 26px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(0,0,0,.32); color: rgba(255,255,255,.86); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); transition: border-color .15s ease, color .15s ease; }
.intro-skip:hover { border-color: #96c252; color: #fff; }
.intro-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.12); }
.intro-progress i { display: block; width: 0; height: 100%; background: var(--accent-gradient); }

body.intro-playing { overflow: hidden; }
body.intro-playing .auth-panel { opacity: 0; transform: translateY(34px) scale(.965); }
body.intro-playing .auth-screen { filter: blur(6px); }

body.intro-exit .intro-layer { animation: intro-out 1.15s cubic-bezier(.55, 0, .3, 1) forwards; }
body.intro-exit .intro-sweep { animation: intro-sweep 1.05s cubic-bezier(.45, 0, .2, 1) forwards; }
body.intro-exit .intro-skip, body.intro-exit .intro-progress { animation: intro-fade .35s ease forwards; }
body.intro-exit .auth-screen { animation: auth-unblur 1s ease forwards; }
body.intro-exit .auth-panel { animation: auth-rise 1s cubic-bezier(.16, .84, .34, 1) .12s forwards; }

@keyframes intro-out {
  0%   { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
  45%  { opacity: 1; transform: scale(1.06); filter: blur(3px) brightness(1.14); }
  100% { opacity: 0; transform: scale(1.18); filter: blur(20px) brightness(1.5); }
}
@keyframes intro-sweep {
  0%   { opacity: 0; transform: translateX(0) rotate(14deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(280%) rotate(14deg); }
}
@keyframes intro-fade { to { opacity: 0; } }
@keyframes auth-unblur { from { filter: blur(6px); } to { filter: blur(0); } }
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(34px) scale(.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-layer { display: none !important; }
  body.intro-playing .auth-panel, body.intro-playing .auth-screen { opacity: 1; transform: none; filter: none; }
}
@media print { .intro-layer { display: none !important; } }