:root {
  color-scheme: light;
  --ink: #292b24;
  --muted: #898b80;
  --line: #e9e7de;
  --paper: #fffefa;
  --canvas: #f5f3ed;
  --olive: #65704e;
  --olive-dark: #4b5637;
  --gold: #c5a96e;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page-shell { max-width: 1280px; margin: 0 auto; padding: 0 54px 28px; }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8e5dc; }
.brand { color: var(--ink); display: inline-flex; align-items: center; margin: 0; font-weight: 700; font-size: 17px; letter-spacing: -.5px; }
.account-bar { display: flex; align-items: center; gap: 12px; }
.account-name { padding: 6px 10px; color: var(--olive-dark); background: #eef0e8; border-radius: 999px; font-size: 11px; font-weight: 600; }
.view-nav { display: flex; align-items: center; gap: 8px; padding: 16px 0; }
.view-tab { min-height: 38px; padding: 8px 15px; color: #77796e; background: transparent; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 600; }
.view-tab:hover { background: #eeede6; }
.view-tab.is-active { color: var(--olive-dark); background: #eef0e8; border-color: #e2e5d9; }
.role-badge { margin-left: auto; padding: 6px 10px; color: #77796e; background: #efeee8; border-radius: 999px; font-size: 10px; font-weight: 600; }
.auth-screen { display: grid; min-height: calc(100dvh - 65px); place-items: center; padding: 24px 0; }
.auth-card { width: min(100%, 390px); padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.auth-card h1 { margin-bottom: 10px; }
.auth-card > p:not(.auth-message) { margin-bottom: 20px; color: #77796e; font-size: 13px; line-height: 1.5; }
.google-button { width: 100%; justify-content: center; min-height: 48px; font-size: 12px; }
.google-g { color: #fff; font-weight: 700; font-size: 16px; }
.auth-message { min-height: 18px; margin: 14px 0 0; color: #74766c; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.account-bar .text-button { min-height: 40px; }
.bags-date { display: block; margin-top: 6px; color: #888a80; font-size: 11px; }
.intro { display: flex; align-items: flex-end; justify-content: space-between; padding: 24px 0 18px; }
.eyebrow { margin: 0 0 10px; color: #888a7f; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 600 28px/1.2 var(--serif); letter-spacing: -.6px; }

.summary-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 13px; margin-bottom: 21px; }
.summary-card { min-height: 100px; padding: 15px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; }
.summary-primary { color: #fff; background: var(--olive); border-color: var(--olive); }
.summary-top { display: flex; align-items: center; justify-content: space-between; }
.summary-label { font-size: 9px; letter-spacing: 1.1px; font-weight: 700; color: #929386; }
.summary-primary .summary-label { color: #d3d8c8; }
.summary-symbol { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #ffffff21; color: #edf0e7; font-size: 15px; }
.summary-symbol-muted { background: #f0efe9; color: #858779; }
.summary-value { margin: 10px 0 2px; font: 600 29px/1.1 var(--serif); letter-spacing: -.4px; }
.summary-page-heading { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; }
.summary-page-heading h1 { margin-right: auto; }
.date-picker-label { color: #77796e; font-size: 11px; font-weight: 600; }
.date-picker { width: auto; min-width: 150px; font-size: 12px; }
.period-stats { margin-bottom: 14px; }
.chart-panel, .day-summary-panel { padding: 22px 24px; margin-bottom: 14px; }
.chart-heading { align-items: center; margin-bottom: 14px; }
.chart-caption { margin: 5px 0 0; color: #898b80; font-size: 11px; }
.chart-toggle { display: flex; gap: 3px; padding: 3px; background: #f1f0e9; border-radius: 8px; }
.chart-range { min-height: 34px; padding: 7px 12px; color: #77796e; background: transparent; border: 0; border-radius: 6px; font-size: 11px; }
.chart-range.is-active { color: var(--olive-dark); background: #fffefa; box-shadow: 0 1px 3px #292b2418; }
.chart-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.sales-chart { display: flex; align-items: stretch; justify-content: space-around; gap: 5px; min-width: 440px; height: 190px; padding: 8px 2px 0; border-bottom: 1px solid var(--line); }
.chart-column { display: grid; grid-template-rows: 20px 1fr 22px; align-items: end; justify-items: center; flex: 1; min-width: 0; max-width: 82px; padding: 0 1px; color: #77796e; background: transparent; border: 0; }
.chart-column:hover .chart-bar, .chart-column:focus-visible .chart-bar { background: var(--olive-dark); }
.chart-column:focus-visible { outline: 2px solid #9da586; outline-offset: -2px; border-radius: 5px; }
.chart-value { width: 100%; overflow: hidden; color: #77796e; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.chart-bar { align-self: end; width: min(60%, 34px); height: var(--bar-height); min-height: 0; background: #87916f; border-radius: 5px 5px 0 0; transition: height .2s ease, background .15s ease; }
.chart-date { align-self: center; color: #77796e; font-size: 10px; }
.summary-error { margin: 12px 0; color: #a94438; font-size: 12px; }

.workspace { display: grid; grid-template-columns: minmax(340px, .88fr) minmax(440px, 1.12fr); align-items: start; gap: 17px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; min-width: 0; }
.entry-panel { padding: 24px 24px 21px; }
.bags-panel { min-height: 430px; padding: 24px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.panel-heading .eyebrow { margin-bottom: 5px; }
h2 { font: 600 21px/1.25 var(--serif); margin-bottom: 0; letter-spacing: -.2px; }
.step-badge { display: grid; place-items: center; width: 28px; height: 28px; color: #8c8e82; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; }
.field-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #56584f; font-size: 11px; font-weight: 600; }
.optional { color: #aaa99f; font-size: 8px; font-weight: 600; letter-spacing: .8px; }
.text-input { width: 100%; color: var(--ink); background: #fff; border: 1px solid #e5e3db; border-radius: 7px; outline: none; padding: 10px 11px; font-size: 11px; transition: border-color .16s ease, box-shadow .16s ease; }
.text-input:focus { border-color: #9da586; box-shadow: 0 0 0 3px #8f9b6b1c; }
.text-input::placeholder { color: #b1b2a9; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 28px; cursor: pointer; }
.select-chevron { position: absolute; right: 11px; top: 50%; transform: translateY(-57%); color: #87897f; font-size: 16px; pointer-events: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 15px; }
.field { min-width: 0; }
.conditional-section { margin-top: 18px; }
.custom-section .field + .field { margin-top: 15px; }
.section-label-row { display: flex; align-items: center; justify-content: space-between; }
.section-label-row .field-label { margin-bottom: 9px; }
.micro-copy { margin-bottom: 9px; color: #a0a195; font-size: 9px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-card { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; cursor: pointer; border: 1px solid #e8e6de; border-radius: 7px; transition: border-color .16s, background .16s; }
.choice-card:hover, .task-card:hover { border-color: #c9cbbd; }
.choice-card strong { color: #5f6157; font-size: 10px; font-weight: 600; }
.choice-card span { color: #a0a195; font-size: 9px; }
.choice-input:checked + .choice-card { background: #f4f5ef; border-color: #8b9675; box-shadow: inset 0 0 0 1px #8b96751c; }
.choice-input:checked + .choice-card strong { color: var(--olive-dark); }
.choice-input:focus-visible + .choice-card { outline: 2px solid #9da586; outline-offset: 2px; }
.task-section { margin-top: 19px; }
.task-list { display: grid; gap: 7px; }
.other-work { margin-top: 8px; padding: 10px; border: 1px solid #e8e6de; border-radius: 7px; }
.other-work-toggle { display: flex; align-items: center; min-height: 24px; gap: 10px; color: #5e6057; font-size: 10px; cursor: pointer; }
.other-work-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.task-option { display: flex; align-items: center; min-height: 42px; gap: 10px; padding: 8px 10px; border: 1px solid #e8e6de; border-radius: 7px; transition: border-color .16s, background .16s; }
.task-option { cursor: pointer; -webkit-user-select: none; user-select: none; }
.task-option:hover { border-color: #c9cbbd; background: #fcfcf8; }
.task-input { appearance: none; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; border: 1px solid #d5d4cb; border-radius: 4px; background: #fff; cursor: pointer; }
.task-input:checked { display: grid; place-items: center; border-color: var(--olive); background: var(--olive); }
.task-input:checked::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 700; }
.task-input:focus-visible + .task-card { outline: 2px solid #9da586; outline-offset: 2px; }
.task-card { display: flex; flex: 1; align-items: center; min-width: 0; cursor: pointer; }
.task-copy { display: flex; align-items: baseline; justify-content: space-between; flex: 1; min-width: 0; gap: 12px; }
.task-name { overflow: hidden; color: #5e6057; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.task-price { color: #818376; font-size: 10px; white-space: nowrap; }
.task-input:checked ~ .task-card .task-name { color: var(--olive-dark); }
.quantity-control { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.quantity-control input { width: 61px; height: 36px; padding: 4px; border: 1px solid #e2e0d8; border-radius: 6px; text-align: center; color: var(--ink); font-size: 14px; }
.quantity-control input { -webkit-user-select: text; user-select: text; cursor: text; }
.quantity-control span { color: #9b9c91; font-size: 9px; }
.task-footnote { margin: 8px 0 0; color: #95968b; font-size: 10px; line-height: 1.5; }
.notes-input { display: block; min-height: 55px; resize: vertical; line-height: 1.5; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; margin-top: 16px; border-top: 1px solid #eeece5; }
.estimate-line { color: #8a8c81; margin: 0; font-size: 10px; }
.estimate-line strong { display: block; margin-top: 3px; color: #3e4234; font: 600 19px var(--serif); }
.button-primary { display: flex; align-items: center; gap: 14px; padding: 11px 13px; color: white; background: var(--olive); border: 0; border-radius: 7px; font-size: 10px; transition: background .16s, transform .16s, box-shadow .16s; }
.button-primary:hover { background: var(--olive-dark); box-shadow: 0 4px 12px #4b56372a; transform: translateY(-1px); }
.button-primary:disabled { opacity: .6; cursor: not-allowed; }
.button-arrow { font-size: 15px; line-height: 10px; }
.form-error { margin: 10px 0 0; color: #a94438; font-size: 10px; }

.bags-heading { align-items: flex-end; margin-bottom: 17px; }
.heading-count { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-left: 5px; border-radius: 50%; color: #7a7c70; background: #f0efe9; font: 600 10px var(--sans); vertical-align: 3px; }
.text-button { color: #8d8e82; padding: 4px 0; border: 0; background: transparent; font-size: 10px; }
.text-button:hover { color: #a35245; }
.bag-list { display: grid; gap: 9px; }
.bag-card { padding: 14px 14px 12px; border: 1px solid #eae8e0; border-radius: 8px; animation: appear .24s ease both; }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.bag-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bag-title-wrap { min-width: 0; }
.bag-reference { margin-bottom: 4px; color: #383b31; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.bag-subtitle { margin-bottom: 0; color: #9a9b91; font-size: 9px; text-transform: capitalize; }
.bag-price-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bag-price { color: #424637; font: 600 17px var(--serif); }
.remove-button { display: grid; place-items: center; width: 23px; height: 23px; color: #a5a59a; background: transparent; border: 0; border-radius: 5px; font-size: 17px; line-height: 1; }
.remove-button:hover { color: #a35245; background: #f8efec; }
.bag-details { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.detail-chip { padding: 4px 7px; color: #787a70; background: #f4f3ed; border-radius: 4px; font-size: 9px; }
.staff-chip { display: inline-flex; margin-top: 10px; padding: 4px 8px; color: #52603d; background: #eff1e9; border-radius: 999px; font-size: 10px; font-weight: 600; }
.bag-notes { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid #f0eee8; color: #8d8e83; font-size: 10px; line-height: 1.45; }
.bags-total { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 14px; border-top: 1px solid #eceae3; color: #7d7e74; font-size: 10px; }
.bags-total strong { color: #424637; font: 600 21px var(--serif); }
.empty-state { display: flex; min-height: 120px; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.empty-state h3 { margin-bottom: 0; color: #585a51; font: 600 15px var(--sans); }
.toast { position: fixed; right: 28px; bottom: 24px; z-index: 3; padding: 11px 15px; color: #fff; background: #34372d; border-radius: 8px; box-shadow: 0 8px 25px #20241d26; font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(7px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.confetti-burst { position: fixed; z-index: 10; width: 1px; height: 1px; pointer-events: none; }
.confetti-piece { position: absolute; top: 0; left: 0; width: 8px; height: 5px; background: var(--confetti-color); border-radius: 1px; animation: confetti-fly 850ms cubic-bezier(.15,.7,.35,1) var(--confetti-delay) both; }
@keyframes confetti-fly { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) scale(.55) rotate(var(--confetti-spin)); } }
@media (prefers-reduced-motion: reduce) {
  .confetti-piece { animation-name: confetti-fade; animation-duration: 450ms; }
  @keyframes confetti-fade { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
}
.loading-message, .catalog-error { padding: 28px 16px; color: #898b80; text-align: center; font-size: 11px; line-height: 1.6; }
.catalog-error { color: #a94438; }

@media (max-width: 920px) {
  .page-shell { padding-right: 30px; padding-left: 30px; }
  .workspace { grid-template-columns: minmax(315px, .92fr) minmax(340px, 1.08fr); gap: 12px; }
  .entry-panel, .bags-panel { padding: 20px; }
}

@media (max-width: 720px) {
  .page-shell { padding: 0 18px 22px; }
  .topbar { height: 56px; }
  .brand { font-size: 16px; }
  .auth-screen { min-height: calc(100dvh - 57px); }
  .auth-card { padding: 22px; }
  .view-nav { padding: 10px 0; }
  .view-tab { min-height: 42px; }
  .summary-page-heading { flex-wrap: wrap; gap: 8px; }
  .summary-page-heading h1 { flex-basis: 100%; margin-bottom: 4px; }
  .date-picker { flex: 1; min-width: 0; }
  .chart-panel, .day-summary-panel { padding: 16px; }
  .sales-chart { height: 170px; }
  .chart-value { font-size: 8px; }
  .intro { align-items: flex-start; flex-direction: column; padding: 18px 0 14px; }
  h1 { font-size: 25px; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .summary-card { min-height: 82px; padding: 12px; border-radius: 9px; }
  .summary-primary { grid-column: 1 / -1; }
  .summary-value { margin-top: 7px; font-size: 22px; }
  .summary-label { font-size: 8px; }
  .workspace { grid-template-columns: 1fr; gap: 13px; }
  .entry-panel, .bags-panel { padding: 17px; border-radius: 10px; }
  .panel-heading { margin-bottom: 18px; }
  h2 { font-size: 20px; }
  .field-label { min-height: 18px; font-size: 12px; }
  .text-input { min-height: 46px; padding: 11px 12px; font-size: 16px; }
  .select-wrap select { padding-right: 30px; }
  .field-row { gap: 9px; margin-top: 13px; }
  .conditional-section { margin-top: 16px; }
  .choice-grid { gap: 6px; }
  .choice-card { min-height: 52px; justify-content: center; padding: 8px 7px; }
  .choice-card strong { font-size: 11px; }
  .choice-card span { font-size: 9px; }
  .task-list { gap: 8px; }
  .other-work-fields { grid-template-columns: 1fr; gap: 8px; }
  .task-option { min-height: 52px; gap: 9px; padding: 8px 9px; }
  .task-input { flex-basis: 21px; width: 21px; height: 21px; }
  .task-card { min-height: 38px; }
  .task-copy { align-items: flex-start; flex-direction: column; gap: 3px; }
  .task-name { font-size: 12px; white-space: normal; }
  .task-price { font-size: 10px; }
  .quantity-control { gap: 4px; }
  .quantity-control input { width: 57px; height: 42px; font-size: 16px; }
  .quantity-control span { max-width: 43px; font-size: 9px; }
  .notes-input { min-height: 66px; }
  .form-footer { align-items: center; gap: 9px; padding-top: 14px; margin-top: 14px; }
  .estimate-line { font-size: 10px; }
  .estimate-line strong { font-size: 20px; }
  .button-primary { min-height: 48px; justify-content: center; gap: 9px; padding: 12px 11px; font-size: 10px; }
  .bags-panel { min-height: 320px; }
  .empty-state { min-height: 90px; padding: 15px; }
  .bag-card { padding: 13px; }
  .bag-reference { font-size: 13px; }
  .bag-subtitle { font-size: 10px; }
  .bag-price { font-size: 18px; }
  .remove-button { width: 36px; height: 36px; font-size: 21px; }
  .detail-chip { min-height: 29px; display: inline-flex; align-items: center; font-size: 10px; }
  .text-button { min-height: 40px; padding: 8px 4px; font-size: 11px; }
  .bags-total { font-size: 11px; }
  .bags-total strong { font-size: 22px; }
}

@media (max-width: 410px) {
  .page-shell { padding-right: 12px; padding-left: 12px; }
  .entry-panel, .bags-panel { padding: 14px; }
  .field-row { grid-template-columns: 1fr; gap: 10px; }
  .field-row .field + .field { margin-top: 2px; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .estimate-line { display: flex; align-items: center; justify-content: space-between; }
  .estimate-line strong { margin-top: 0; }
  .button-primary { width: 100%; }
}