:root {
  color-scheme: light;
  --ink: #20342e;
  --muted: #7b8982;
  --line: #e9ece5;
  --paper: #fbfcf8;
  --green: #295b49;
  --green-dark: #1e4638;
  --orange: #e6945e;
  --serif: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.app-shell { min-height: 100vh; }
.topbar { height: 78px; position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 230px minmax(220px, 1fr) auto; align-items: center; gap: 34px; padding: 0 5.1%; background: rgba(251,252,248,.94); border-bottom: 1px solid #edf0e9; backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: var(--ink); text-decoration: none; font-family: Manrope, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -1.5px; }
.brand-dot, .footer-brand span { color: #dc8a54; }
.brand-logo { width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; }
.brand-highlight { color: #e88b24; }
.brand-mark { position: relative; width: 25px; height: 24px; display: inline-flex; align-items: end; gap: 2px; transform: skew(-9deg); }
.brand-mark span { display: block; width: 7px; border-radius: 5px 5px 2px 2px; background: #32664f; }
.brand-mark span:nth-child(1) { height: 12px; }
.brand-mark span:nth-child(2) { height: 20px; background: #d99560; }
.brand-mark span:nth-child(3) { height: 16px; background: #84a58a; }
.header-search { width: 100%; max-width: 505px; height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 13px; border: 1px solid #e6eae2; border-radius: 9px; background: white; color: #8b9690; }
.header-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }
.header-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.header-search input::placeholder { color: #9aa59f; }
.header-search kbd { padding: 3px 5px; border: 1px solid #e9ece6; border-radius: 4px; color: #a1aaa3; font-size: 9px; white-space: nowrap; }
.role-switch { justify-self: end; display: flex; gap: 4px; padding: 4px; border: 1px solid #e9ece6; border-radius: 9px; background: #f4f6f1; }
.role-button { padding: 8px 13px; border: 0; border-radius: 6px; background: transparent; color: #7d8b83; font-size: 11px; font-weight: 600; cursor: pointer; transition: .2s ease; }
.role-button.active { background: white; color: var(--green); box-shadow: 0 1px 4px #20342e12; }
.mobile-menu { display: none; border: 0; background: none; font-size: 21px; cursor: pointer; }
.workspace { display: grid; grid-template-columns: 252px minmax(0,1fr); max-width: 1600px; margin: 0 auto; padding: 0 5.1%; }
.business-sidebar { position: sticky; top: 78px; height: calc(100vh - 78px); min-height: 600px; display: flex; flex-direction: column; padding: 36px 22px 20px 0; border-right: 1px solid var(--line); }
.sidebar-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 14px 23px 2px; }
.eyebrow { margin: 0 0 8px; color: #9ba69d; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; }
.sidebar-heading h2 { margin: 0; font-family: Manrope, sans-serif; font-size: 17px; letter-spacing: -.5px; }
.count-badge { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #edf2e9; color: #52715a; font-size: 10px; font-weight: 700; }
.business-filter, .business-item { display: flex; align-items: center; width: 100%; border: 0; text-align: left; cursor: pointer; }
.business-filter { gap: 11px; padding: 11px 12px; border-radius: 8px; background: transparent; }
.business-filter.active { background: #eff4ec; }
.filter-icon { width: 33px; height: 33px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: white; color: #649073; font-size: 18px; }
.business-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.business-copy strong { color: #34483e; font-size: 12px; font-weight: 700; }
.business-copy small { color: #9aa59e; font-size: 10px; white-space: nowrap; }
.filter-chevron { color: #809887; font-size: 20px; }
.business-list { display: grid; gap: 4px; margin-top: 5px; }
.business-item { gap: 11px; padding: 10px 12px; border-radius: 8px; background: transparent; transition: .18s ease; }
.business-item:hover, .business-item.active { background: #f0f3ed; }
.business-avatar { display: grid; width: 34px; height: 34px; flex-shrink: 0; place-items: center; border-radius: 10px; font-size: 17px; }
.business-item .business-copy small { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.business-num { color: #a4aea7; font-size: 10px; }
.sidebar-note { display: flex; gap: 10px; margin: auto 8px 15px 4px; padding: 14px 12px; border: 1px solid #e9ece5; border-radius: 9px; background: #fffefa; }
.note-sparkle { color: #da9260; font-size: 17px; }
.sidebar-note p { margin: 0; color: #8b978f; font-size: 10px; line-height: 1.7; }
.sidebar-note strong { color: #50645a; font-weight: 600; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; padding-left: 4px; color: #9da79f; font-size: 10px; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: #85b187; box-shadow: 0 0 0 3px #85b18722; }
.main-content { min-width: 0; padding: 28px 0 0 34px; }
.hero-banner { position: relative; min-height: 306px; display: flex; align-items: center; overflow: hidden; border-radius: 12px; background: #e9efe4; }
.hero-content { position: relative; z-index: 2; max-width: 52%; padding: 31px 0 31px 44px; }
.hero-kicker { display: flex; align-items: center; gap: 7px; color: #6f8a72; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.hero-kicker span { color: #d88f5e; font-size: 15px; }
.hero-content h1 { margin: 15px 0 12px; color: #244b3b; font-family: Manrope, sans-serif; font-size: clamp(34px, 3.1vw, 45px); font-weight: 600; letter-spacing: -2.7px; line-height: 1.1; }
.hero-content h1 em { color: #528062; font-family: var(--serif); font-weight: 400; letter-spacing: -1.9px; }
.hero-content p { max-width: 330px; margin: 0; color: #74887a; font-size: 12px; line-height: 1.7; }
.hero-link { display: inline-flex; gap: 12px; align-items: center; margin-top: 18px; color: #315c45; font-size: 11px; font-weight: 700; text-decoration: none; }
.hero-link span { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #aabca8; border-radius: 50%; }
.hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 51%; overflow: hidden; }
.sun-shape { position: absolute; top: 12%; right: 16%; width: 205px; height: 205px; border-radius: 50%; background: #dfae7f; }
.sun-shape::after { content: ''; position: absolute; inset: 14px; border: 1px solid #f3d5ae; border-radius: 50%; }
.art-vase { position: absolute; right: 28%; bottom: -17px; width: 99px; height: 169px; border-radius: 34px 34px 27px 27px / 17px 17px 34px 34px; background: linear-gradient(90deg,#8c785b,#b29b74 50%,#95815e); box-shadow: inset 9px 0 11px #554d3b28, 9px 4px 14px #68775b22; transform: rotate(4deg); }
.art-vase::before { content: ''; position: absolute; top: -23px; left: 33px; width: 33px; height: 39px; border-radius: 6px 6px 8px 8px; background: #8d795a; }
.art-vase span { position: absolute; z-index: 1; top: -27px; left: 30px; width: 39px; height: 10px; border-radius: 50%; background: #6c5e48; }
.art-vase i { position: absolute; top: 56px; right: 15px; width: 43px; height: 51px; border: 1px solid #d2bb8c55; border-radius: 50%; transform: rotate(-28deg); }
.art-cup { position: absolute; z-index: 2; right: 7%; bottom: 24px; width: 93px; height: 83px; border-radius: 9px 9px 28px 28px; background: linear-gradient(90deg,#c57950,#e3a16c 55%,#bd774d); box-shadow: 5px 6px 10px #58685826; transform: rotate(-7deg); }
.art-cup::before { content: ''; position: absolute; top: -7px; left: 0; width: 93px; height: 18px; border-radius: 50%; background: #725c45; }
.art-cup span { position: absolute; top: 2px; left: 9px; width: 75px; height: 9px; border-radius: 50%; background: #4d4938; }
.art-cup::after { content: ''; position: absolute; right: -26px; top: 18px; width: 29px; height: 35px; border: 8px solid #c77c51; border-left: 0; border-radius: 0 18px 18px 0; }
.art-plant { position: absolute; z-index: 1; bottom: 111px; width: 92px; height: 113px; }
.plant-left { right: 55%; transform: rotate(-13deg); }
.plant-right { right: 2%; bottom: 101px; transform: rotate(15deg) scale(.82); }
.art-plant b { position: absolute; left: 44px; bottom: -48px; width: 3px; height: 118px; background: #586e4b; transform: rotate(9deg); transform-origin: bottom; }
.art-plant i { position: absolute; z-index: 1; width: 24px; height: 49px; border-radius: 100% 0 100% 0; background: #54785a; transform: rotate(18deg); }
.art-plant i:nth-child(1) { left: 18px; bottom: 46px; transform: rotate(-35deg); background: #648162; }
.art-plant i:nth-child(2) { left: 45px; bottom: 60px; transform: rotate(29deg); background: #6f8a65; }
.art-plant i:nth-child(3) { left: 40px; bottom: 21px; transform: rotate(50deg); background: #4c6a50; }
.art-orbit { position: absolute; right: 19%; top: 28px; width: 130px; color: #f7e2c1; font-size: 6px; letter-spacing: 1.8px; transform: rotate(24deg); }
.hero-index { position: absolute; z-index: 3; bottom: 15px; left: 45px; color: #8ea38e; font-size: 9px; letter-spacing: 1px; }
.catalog-section { padding: 40px 0 0; }
.catalog-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.catalog-heading h2, .panel-intro h1 { margin: 0; color: #263d33; font-family: Manrope, sans-serif; font-size: clamp(22px, 2.2vw, 28px); font-weight: 650; letter-spacing: -1.2px; }
.accent-dot { color: #da9260; }
.catalog-subtitle, .panel-subtitle { margin: 8px 0 0; color: #87938b; font-size: 11px; }
.catalog-controls { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; }
.sort-label { color: #9ba69f; font-size: 10px; white-space: nowrap; }
.catalog-controls select { padding: 9px 28px 9px 10px; border: 1px solid #e6eae2; border-radius: 7px; outline: 0; background: white; color: #57685e; font-size: 10px; cursor: pointer; }
.category-chips { display: flex; gap: 8px; overflow-x: auto; padding: 20px 0 18px; scrollbar-width: none; }
.category-chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 12px; border: 1px solid #e9ece6; border-radius: 6px; background: white; color: #77857c; font-size: 10px; cursor: pointer; transition: .15s ease; }
.chip:hover { border-color: #bdcfc0; }
.chip.active { border-color: var(--green); background: var(--green); color: white; }
.chip span { color: #e9b583; }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 19px; }
.product-card { overflow: hidden; border: 1px solid #eaede7; border-radius: 9px; background: white; transition: transform .2s ease,box-shadow .2s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px #253f3211; }
.product-visual { position: relative; height: 165px; display: grid; overflow: hidden; place-items: center; }
.product-visual::before, .product-visual::after { content: ''; position: absolute; border-radius: 50%; }
.product-visual::before { width: 145px; height: 145px; background: #ffffff3d; }
.product-visual::after { right: -32px; bottom: -55px; width: 140px; height: 140px; border: 1px solid #ffffff62; }
.product-art { position: relative; z-index: 1; display: grid; width: 104px; height: 104px; place-items: center; border-radius: 50%; font-size: 49px; filter: drop-shadow(0 8px 8px #243b3322); transition: transform .3s ease; }
.product-card:hover .product-art { transform: scale(1.08) rotate(-5deg); }
.product-badge { position: absolute; z-index: 2; top: 11px; left: 11px; padding: 6px 8px; border: 1px solid #ffffff9c; border-radius: 5px; background: #fffefaed; color: #637369; font-size: 8px; font-weight: 700; letter-spacing: .3px; }
.product-favorite { position: absolute; z-index: 2; top: 9px; right: 10px; width: 28px; height: 28px; border: 1px solid #ffffff8a; border-radius: 50%; background: #ffffffce; color: #708177; font-size: 17px; cursor: pointer; }
.product-favorite.saved { color: #c67460; }
.product-details { padding: 13px 14px 12px; }
.product-business { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #9aa49c; font-size: 9px; }
.mini-avatar { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 5px; font-size: 10px; }
.product-details h3 { overflow: hidden; margin: 0; color: #304238; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.product-meta { display: flex; justify-content: space-between; align-items: end; margin-top: 12px; }
.price { color: #315b44; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.stock { color: #9aa49c; font-size: 9px; }
.product-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #f0f2ed; }
.product-actions small { color: #a0aaa3; font-size: 9px; }
.view-product { padding: 6px 9px; border: 1px solid #dfe8df; border-radius: 5px; background: #f8faf6; color: #52735d; font-size: 9px; font-weight: 700; cursor: pointer; }
.view-product:hover { background: #eff5ee; }
.empty-state { padding: 48px 10px; text-align: center; }
.empty-state > span { color: #b3c1b2; font-size: 35px; }
.empty-state h3 { margin: 9px 0 5px; color: #43584b; font-family: Manrope,sans-serif; font-size: 17px; }
.empty-state p { color: #95a199; font-size: 11px; }
.catalog-end { display: flex; align-items: center; gap: 15px; justify-content: center; padding: 31px 0 26px; color: #a3ada5; font-size: 9px; }
.catalog-end span { width: 35px; height: 1px; background: #e4e9e1; }
.catalog-end p { margin: 0; }
.site-footer { display: flex; align-items: center; gap: 16px; min-height: 61px; border-top: 1px solid var(--line); color: #a0aaa3; font-size: 9px; }
.footer-brand { display: inline-flex; align-items: center; gap: 4px; color: #425b4a; font-family: Manrope,sans-serif; font-size: 13px; font-weight: 800; letter-spacing: -.8px; text-decoration: none; }
.footer-brand img { width: 32px; height: 32px; object-fit: contain; }
.footer-brand > span { color: #e88b24; }
.site-footer p { flex: 1; }
.site-footer > span { color: #8c9a90; }
.site-footer b { color: #d69262; }
.role-panel { margin: 0 0 32px; padding: 26px; border: 1px solid #e7ece5; border-radius: 11px; background: #fff; }
.panel-intro { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #eff1ed; }
.panel-intro .eyebrow { color: #88a18c; }
.panel-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; font-size: 22px; }
.worker-icon { background: #edf4e9; color: #638567; }
.boss-icon { background: #fbefe5; color: #ce8855; }
.worker-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(210px,.75fr); gap: 20px; padding-top: 20px; }
.worker-session-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #e8eee6; border-radius: 7px; background: #fbfcf8; color: #849188; font-size: 10px; }
.worker-session-bar strong { color: #486450; }
.worker-session-bar .text-button { margin-left: auto; }
.worker-products { display: grid; gap: 10px; align-content: start; }
.worker-product { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid #edf0eb; border-radius: 8px; }
.worker-thumb { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 9px; font-size: 22px; }
.worker-product h3 { margin: 0 0 4px; color: #3a5044; font-size: 11px; }
.worker-product p { margin: 0; color: #98a39b; font-size: 9px; }
.worker-controls { display: flex; align-items: center; gap: 6px; }
.worker-controls input { width: 54px; height: 32px; padding: 0 6px; border: 1px solid #e5eae3; border-radius: 5px; color: #53665a; font-size: 11px; text-align: center; }
.sell-button { height: 32px; padding: 0 9px; border: 0; border-radius: 5px; background: #315b45; color: white; font-size: 9px; font-weight: 700; cursor: pointer; }
.sell-button:disabled { background: #c7d0c8; cursor: not-allowed; }
.sales-summary { align-self: start; padding: 15px; border-radius: 8px; background: #f5f7f2; }
.sales-summary h3 { margin: 0 0 13px; color: #506457; font-family: Manrope,sans-serif; font-size: 12px; }
.summary-stat { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #e8ece5; color: #8e9b91; font-size: 10px; }
.summary-stat strong { color: #365a43; font-size: 11px; }
.recent-sales { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4e9e1; }
.recent-sales h4 { margin: 0 0 8px; color: #7c8c80; font-size: 9px; }
.recent-sales p { margin: 5px 0; color: #929e95; font-size: 9px; }
.boss-layout { display: grid; grid-template-columns: minmax(220px,.85fr) minmax(0,1.4fr); gap: 23px; padding-top: 20px; }
.product-form { align-self: start; padding: 16px; border: 1px solid #edf0eb; border-radius: 8px; background: #fdfefb; }
.form-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.form-spark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: #f8eee3; color: #d28c59; }
.form-heading h2, .inventory-heading h2 { margin: 0; color: #3c5245; font-family: Manrope,sans-serif; font-size: 13px; }
.form-heading p { margin: 4px 0 0; color: #9aa49d; font-size: 9px; }
.product-form label { display: grid; gap: 6px; margin: 11px 0; color: #6d7c72; font-size: 9px; font-weight: 700; }
.product-form input, .product-form select { width: 100%; height: 35px; min-width: 0; padding: 0 9px; border: 1px solid #e5eae3; border-radius: 5px; outline-color: #88a18c; background: white; color: #4a5e51; font-size: 10px; }
.product-form input::placeholder { color: #b1bab3; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: 9px; top: 10px; color: #91a096; font-size: 10px; }
.input-prefix input { padding-left: 21px; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 15px; padding: 10px 12px; border: 0; border-radius: 6px; background: #315b45; color: white; font-size: 10px; font-weight: 700; cursor: pointer; }
.primary-button:hover { background: #224a38; }
.primary-button span { font-size: 14px; }
.form-footnote { margin: 10px 0 0; color: #a4aea6; font-size: 8px; text-align: center; }
.inventory-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.inventory-hint { margin: 5px 0 0; color: #99a49c; font-size: 8px; }
.inventory-heading .eyebrow { margin-bottom: 5px; }
.inventory-count { color: #9ca79e; font-size: 9px; white-space: nowrap; }
.inventory-list { display: grid; gap: 8px; }
.inventory-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid #edf0eb; border-radius: 7px; }
.inventory-thumb { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; font-size: 20px; }
.inventory-name { min-width: 0; }
.inventory-name strong { display: block; overflow: hidden; color: #4b5f52; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-name small { display: block; margin-top: 4px; color: #a0aaa2; font-size: 8px; }
.inventory-price { color: #55715b; font-size: 10px; font-weight: 700; white-space: nowrap; }
.inventory-stock { padding: 5px 7px; border-radius: 5px; background: #f0f4ed; color: #7a8d7d; font-size: 8px; white-space: nowrap; }
.inventory-empty { padding: 35px 15px; border: 1px dashed #dfe6dd; border-radius: 7px; color: #95a199; font-size: 10px; text-align: center; line-height: 1.6; }
.auth-gate { display: grid; grid-template-columns: 175px minmax(0,1fr); align-items: center; gap: 25px; max-width: 800px; margin: 24px auto 0; padding: 24px 32px; border: 1px solid #e9ede6; border-radius: 10px; background: linear-gradient(120deg,#f8faf5,#fffefa); }
.auth-mark { width: 160px; height: 160px; object-fit: contain; filter: drop-shadow(0 10px 16px #25483512); }
.auth-copy > p:not(.eyebrow):not(.auth-demo-note) { max-width: 510px; margin: 9px 0 16px; color: #819087; font-size: 11px; line-height: 1.7; }
.auth-copy h2, .join-gate h2 { margin: 0; color: #294536; font-family: Manrope,sans-serif; font-size: 22px; letter-spacing: -.9px; }
.code-form label { display: block; margin-bottom: 6px; color: #718076; font-size: 9px; font-weight: 700; }
.auth-tabs { display: flex; gap: 5px; margin: 15px 0 12px; padding: 4px; border: 1px solid #e8ece5; border-radius: 7px; background: #f3f6f0; }
.auth-tab { flex: 1; padding: 8px 10px; border: 0; border-radius: 5px; background: transparent; color: #829087; font-size: 10px; font-weight: 700; cursor: pointer; }
.auth-tab.active { background: white; color: #315b44; box-shadow: 0 1px 4px #20342e12; }
.boss-auth-form { display: grid; gap: 9px; }
.boss-auth-form label { display: grid; gap: 5px; color: #718076; font-size: 9px; font-weight: 700; }
.boss-auth-form input { width: 100%; height: 37px; padding: 0 10px; border: 1px solid #e3e9e1; border-radius: 6px; outline-color: #88a18c; background: white; color: #42564a; font-size: 10px; }
.boss-auth-form .primary-button { width: 100%; min-height: 39px; margin-top: 2px; }
.boss-auth-form .primary-button:disabled { opacity: .6; cursor: progress; }
.auth-error { margin: 10px 0 0; padding: 9px 10px; border-radius: 5px; background: #fff1ed; color: #9b5144; font-size: 9px; line-height: 1.6; }
.auth-error.success { background: #f0f6ee; color: #55715b; }
.local-save-status { margin-left: auto; color: #819488; font-size: 8px; white-space: nowrap; }
.auth-demo-note { margin: 12px 0 0; padding: 9px 10px; border-radius: 5px; background: #f5f7f2; color: #8b978f; font-size: 8px; line-height: 1.6; }
.auth-demo-note strong { color: #5f7564; }
.boss-dashboard { padding-top: 17px; }
.boss-session-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eff1ed; }
.boss-session-bar > div { display: grid; gap: 3px; flex: 1; }
.boss-session-bar strong { color: #4d6255; font-size: 10px; }
.boss-session-bar small { color: #9aa59e; font-size: 8px; }
.provider-avatar { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #e9ece7; border-radius: 50%; background: white; color: #315b44; font-family: Arial,sans-serif; font-size: 13px; font-weight: 700; }
.text-button { padding: 5px 8px; border: 0; border-radius: 4px; background: transparent; color: #87958b; font-size: 9px; cursor: pointer; }
.text-button:hover { background: #f2f5ef; color: #40594a; }
.invite-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 17px 19px; border: 1px solid #e2eadd; border-radius: 8px; background: linear-gradient(110deg,#f1f5ed,#fcf8ef); }
.invite-copy .eyebrow { color: #839b82; }
.invite-toggle { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: #2d503d; font-family: Manrope,sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.6px; text-align: left; cursor: pointer; }
.invite-toggle:hover { color: #507957; }
.invite-toggle-icon { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #cbd8c6; border-radius: 50%; color: #5e8063; font-family: 'DM Sans',sans-serif; font-size: 14px; transition: transform .2s ease; }
.invite-card.open .invite-toggle-icon { transform: rotate(45deg); }
.invite-copy p:last-child { margin: 6px 0 0; color: #88958d; font-size: 9px; }
.invite-copy p strong { color: #58735e; }
.invite-code-wrap { min-width: 185px; padding: 10px 12px; border: 1px dashed #bdcdbb; border-radius: 7px; background: #fffefa; }
.invite-code-wrap > span { color: #99a59a; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.invite-code-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.invite-code-row code { color: #345b43; font-family: 'DM Sans',sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 1px; }
.invite-code-row button { width: 27px; height: 27px; border: 1px solid #e5ebe1; border-radius: 5px; background: white; color: #628069; font-size: 16px; cursor: pointer; }
.invite-code-wrap small { display: block; margin-top: 5px; color: #a0aaa2; font-size: 8px; }
.join-gate { position: relative; max-width: 470px; margin: 24px auto 6px; padding: 25px 28px 20px; border: 1px solid #e6ece4; border-radius: 9px; background: linear-gradient(130deg,#f7faf4,#fffefa); }
.gate-mark { position: absolute; top: 23px; right: 23px; display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #eaf1e6; color: #63856a; font-size: 9px; font-weight: 700; }
.join-gate h2 { font-size: 20px; }
.gate-copy { max-width: 370px; margin: 8px 0 18px; color: #859188; font-size: 10px; line-height: 1.7; }
.code-form label { margin-bottom: 7px; }
.code-input-row { display: flex; gap: 8px; }
.code-input-row input { flex: 1; min-width: 0; height: 39px; padding: 0 10px; border: 1px solid #e2e9df; border-radius: 6px; outline-color: #88a18c; background: white; color: #415a49; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.code-input-row input::placeholder { color: #b1bbb2; font-size: 10px; }
.code-input-row button { display: flex; align-items: center; gap: 12px; padding: 0 13px; border: 0; border-radius: 6px; background: #315b45; color: white; font-size: 10px; font-weight: 700; cursor: pointer; }
.code-input-row button:hover { background: #224a38; }
.gate-footnote { margin: 11px 0 0; color: #a2ada4; font-size: 8px; }
.context-menu { position: fixed; z-index: 60; width: 205px; padding: 5px; border: 1px solid #e5eae2; border-radius: 8px; background: #fffefa; box-shadow: 0 12px 32px #21382a26; }
.context-action { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 5px; background: transparent; color: #52675a; font-size: 10px; text-align: left; cursor: pointer; }
.context-action:hover { background: #f1f5ef; }
.context-action > span { width: 16px; color: #78917a; font-size: 13px; text-align: center; }
.context-action.danger { color: #b6695e; }
.context-action.danger > span { color: #c17568; }
.context-action.danger:hover { background: #fff2ee; }
.edit-dialog { position: fixed; width: min(400px,calc(100vw - 28px)); padding: 0; border: 1px solid #e2e8df; border-radius: 10px; background: #fffefa; color: var(--ink); box-shadow: 0 18px 60px #1b302340; }
.edit-dialog::backdrop { background: #1e302877; backdrop-filter: blur(3px); }
.edit-form { position: relative; padding: 24px; }
.edit-form h2 { margin: 0 0 18px; color: #314b3d; font-family: Manrope,sans-serif; font-size: 19px; letter-spacing: -.7px; }
.edit-form label { display: grid; gap: 7px; color: #6d7c72; font-size: 9px; font-weight: 700; }
.edit-form input { height: 38px; padding: 0 10px; border: 1px solid #e2e8df; border-radius: 5px; outline-color: #88a18c; color: #4a5e51; font-size: 11px; }
.dialog-x { position: absolute; top: 15px; right: 15px; width: 28px; height: 28px; border: 1px solid #e7ebe4; border-radius: 50%; background: white; color: #819087; font-size: 18px; cursor: pointer; }
.edit-actions { display: flex; justify-content: end; gap: 8px; margin-top: 18px; }
.secondary-button { padding: 9px 12px; border: 1px solid #e4e9e2; border-radius: 5px; background: white; color: #718076; font-size: 9px; cursor: pointer; }
.edit-actions .primary-button { width: auto; margin: 0; padding: 9px 12px; font-size: 9px; }
.search-status { margin: -7px 0 13px; color: #7c8c80; font-size: 10px; }
.business-no-results { margin: 14px 10px; color: #929e95; font-size: 10px; line-height: 1.5; }
.auth-copy > p:not(.eyebrow):not(.auth-demo-note) { line-height: 1.7; }
.venture-create-panel, .my-ventures-panel { margin-top: 17px; padding: 17px; border: 1px solid #edf0eb; border-radius: 8px; background: #fdfefb; }
.venture-create-panel .form-heading { margin-bottom: 13px; }
.venture-create-panel .form-heading h2, .my-ventures-panel h2 { margin: 0; color: #3c5245; font-family: Manrope,sans-serif; font-size: 14px; }
.venture-create-panel .form-heading > div > p:last-child { margin: 4px 0 0; color: #9aa49d; font-size: 9px; }
.venture-form { display: grid; grid-template-columns: minmax(200px,.8fr) minmax(0,1.2fr) minmax(150px,.55fr); align-items: end; gap: 12px; }
.venture-form label { display: grid; gap: 6px; color: #6d7c72; font-size: 9px; font-weight: 700; }
.venture-form input, .venture-form textarea, .edit-form textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #e5eae3; border-radius: 5px; outline-color: #88a18c; background: white; color: #4a5e51; font: 10px 'DM Sans',sans-serif; resize: vertical; }
.venture-form input { height: 36px; }
.venture-form textarea { min-height: 36px; max-height: 160px; line-height: 1.5; }
.venture-form .primary-button { align-self: end; margin: 0; min-height: 36px; }
.character-count { justify-self: end; color: #9aa59e; font-size: 8px; font-weight: 500; }
.character-count b { color: #5f7564; }
.my-ventures-panel .inventory-heading { margin-bottom: 11px; }
.my-business-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 8px; }
.my-venture { display: flex; min-width: 0; align-items: center; gap: 4px; padding: 6px; border: 1px solid #e9ede6; border-radius: 7px; background: white; transition: border-color .15s ease, background .15s ease; }
.my-venture.selected { border-color: #a8bea8; background: #f5f8f2; }
.my-venture-select { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; padding: 3px; border: 0; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; }
.my-venture-select:hover { background: #f7f9f5; }
.my-venture .business-copy strong { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.my-venture .business-copy small { display: -webkit-box; overflow: hidden; max-width: 190px; white-space: normal; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.venture-arrow { color: #76917a; font-size: 15px; }
.venture-trash { flex: 0 0 auto; }
.venture-empty { grid-column: 1 / -1; padding: 18px 12px; }
.product-management { margin-top: 18px; padding: 18px; border: 1px solid #e8ede5; border-radius: 9px; background: #fff; }
.selected-venture-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #eff1ed; }
.selected-venture-heading h2 { margin: 0; color: #314b3d; font: 700 17px Manrope,sans-serif; letter-spacing: -.5px; }
.selected-venture-heading > div > p:last-child { max-width: 650px; margin: 5px 0 0; overflow-wrap: anywhere; color: #87938b; font-size: 9px; line-height: 1.5; }
.selected-venture-badge { padding: 7px 9px; border-radius: 5px; background: #eff5ec; color: #69826b; font-size: 8px; white-space: nowrap; }
.product-trash { grid-column: 5; }
.trash-button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid #f0e4e0; border-radius: 6px; background: #fffaf8; color: #bc7568; font-size: 15px; cursor: pointer; transition: .15s ease; }
.trash-button:hover { border-color: #e3b9ad; background: #fff0ec; color: #a95043; }
.inventory-row { grid-template-columns: 40px minmax(0,1fr) auto auto 30px; }
.recent-sale { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 5px 0; border-top: 1px solid #e8ece5; }
.recent-sale p { margin: 0; line-height: 1.5; }
.cancel-sale-button { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #eadbd6; border-radius: 4px; background: #fffaf8; color: #ad6c5f; font-size: 8px; cursor: pointer; }
.cancel-sale-button:hover { background: #fff0ec; }
.edit-form textarea { min-height: 105px; font-size: 11px; }
@media (max-width: 860px) { .venture-form { grid-template-columns: 1fr 1fr; } .venture-form .primary-button { grid-column: 1 / -1; } }
@media (max-width: 650px) {
  .venture-create-panel, .my-ventures-panel { padding: 13px; }
  .venture-form { grid-template-columns: 1fr; gap: 8px; }
  .venture-form .primary-button { grid-column: auto; }
  .product-management { padding: 12px; }
  .selected-venture-heading { align-items: start; flex-direction: column; }
  .inventory-row { grid-template-columns: 36px minmax(0,1fr) auto 30px; gap: 6px; }
  .inventory-price { grid-column: 2; grid-row: 2; }
  .inventory-stock { grid-column: 3; grid-row: 1 / span 2; }
  .product-trash { grid-column: 4; grid-row: 1 / span 2; }
  .recent-sale { align-items: start; flex-direction: column; }
}
.hidden { display: none !important; }
.toast { position: fixed; z-index: 40; right: 24px; bottom: 22px; max-width: calc(100vw - 32px); padding: 12px 17px; border-radius: 8px; background: #254d3b; color: white; box-shadow: 0 8px 30px #162a201c; font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.product-dialog { position: fixed; width: min(430px,calc(100vw - 28px)); padding: 22px; border: 1px solid #e4e9e1; border-radius: 12px; background: #fffefa; color: var(--ink); box-shadow: 0 20px 80px #1b302347; }
.product-dialog::backdrop { background: #1e302877; backdrop-filter: blur(3px); }
.dialog-close-form { display: flex; justify-content: end; margin: -9px -8px 8px; }
.dialog-close-form button { width: 30px; height: 30px; border: 1px solid #e7ebe4; border-radius: 50%; background: white; color: #819087; font-size: 20px; cursor: pointer; }
.dialog-art { display: grid; height: 170px; margin-bottom: 19px; place-items: center; border-radius: 9px; font-size: 67px; }
.product-dialog .eyebrow { margin-bottom: 7px; }
.product-dialog h2 { margin: 0; color: #31483b; font-family: Manrope,sans-serif; font-size: 22px; letter-spacing: -.8px; }
.dialog-business { margin-top: 8px; color: #85938a; font-size: 11px; }
.dialog-description { margin: 17px 0; color: #738178; font-size: 12px; line-height: 1.7; }
.dialog-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #edf0eb; }
.dialog-foot strong { color: #315b45; font-family: Manrope,sans-serif; font-size: 18px; }
.dialog-foot span { color: #87948a; font-size: 10px; }
.mobile-backdrop { display: none; }
@media (min-width: 1500px) { .product-visual { height: 195px; } .hero-banner { min-height: 340px; } }
@media (max-width: 1120px) { .topbar { grid-template-columns: 170px minmax(180px,1fr) auto; gap: 20px; padding-inline: 3.5%; } .workspace { grid-template-columns: 225px minmax(0,1fr); padding-inline: 3.5%; } .main-content { padding-left: 25px; } .role-button { padding-inline: 10px; } .hero-content { padding-left: 32px; } .product-grid { gap: 13px; } .product-visual { height: 145px; } }
@media (max-width: 860px) { .topbar { height: 68px; grid-template-columns: 140px minmax(160px,1fr) auto auto; gap: 13px; padding-inline: 22px; } .role-switch { gap: 1px; } .role-button { padding: 8px; font-size: 10px; } .mobile-menu { display: block; color: #50675a; } .workspace { display: block; padding-inline: 22px; } .business-sidebar { position: fixed; z-index: 30; top: 68px; left: 0; width: 275px; height: calc(100vh - 68px); min-height: 0; padding: 27px 18px 18px 21px; border-right: 1px solid var(--line); background: var(--paper); box-shadow: 12px 8px 25px #263b2f12; transform: translateX(-105%); transition: transform .25s ease; } .business-sidebar.open { transform: translateX(0); } .mobile-backdrop.show { position: fixed; z-index: 25; inset: 68px 0 0; display: block; background: #26372e3d; } .main-content { padding: 21px 0 0; } .hero-banner { min-height: 287px; } .hero-content { max-width: 58%; padding-left: 32px; } .hero-art { width: 48%; } .worker-layout, .boss-layout { grid-template-columns: minmax(0,1.3fr) minmax(200px,.7fr); } .boss-layout { grid-template-columns: minmax(220px,.85fr) minmax(0,1.2fr); gap: 14px; } }
@media (max-width: 650px) { .topbar { height: 62px; grid-template-columns: auto 1fr auto; gap: 13px; padding-inline: 15px; backdrop-filter: none; } .brand { font-size: 21px; gap: 7px; } .brand-mark { transform: scale(.9) skew(-9deg); transform-origin: left; width: 22px; } .header-search { height: 36px; padding: 0 9px; gap: 7px; } .header-search input { font-size: 10px; } .header-search kbd { display: none; } .role-switch { position: fixed; z-index: 21; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 5px; border: 1px solid #dfe5dc; background: #fbfcf3ed; box-shadow: 0 5px 20px #273d321c; } .role-button { min-width: 88px; padding: 10px 12px; font-size: 10px; } .mobile-menu { font-size: 19px; } .workspace { padding-inline: 15px; } .business-sidebar { top: 62px; width: min(290px,85vw); height: calc(100vh - 62px); padding-left: 17px; } .mobile-backdrop.show { top: 62px; } .main-content { padding-top: 14px; padding-bottom: 68px; } .hero-banner { min-height: 285px; align-items: start; } .hero-content { max-width: 72%; padding: 29px 0 25px 22px; } .hero-kicker { font-size: 7px; letter-spacing: 1.1px; } .hero-kicker span { font-size: 12px; } .hero-content h1 { margin-top: 15px; font-size: 34px; letter-spacing: -2px; } .hero-content p { max-width: 230px; font-size: 10px; } .hero-link { margin-top: 15px; font-size: 10px; } .hero-art { right: -24%; bottom: 0; width: 57%; opacity: .62; } .sun-shape { top: 19%; right: 4%; width: 125px; height: 125px; } .art-vase { right: 22%; transform: scale(.72) rotate(4deg); transform-origin: bottom; } .art-cup { right: 1%; transform: scale(.72) rotate(-7deg); transform-origin: bottom right; } .plant-left, .plant-right { display: none; } .hero-index { left: 22px; bottom: 12px; font-size: 8px; } .catalog-section { padding-top: 31px; } .catalog-heading { align-items: start; flex-direction: column; gap: 14px; } .catalog-heading h2, .panel-intro h1 { font-size: 23px; } .catalog-subtitle { font-size: 10px; } .catalog-controls { width: 100%; justify-content: space-between; } .catalog-controls select { flex: 1; max-width: 190px; } .category-chips { margin-right: -15px; padding-top: 15px; padding-bottom: 15px; } .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .product-visual { height: 132px; } .product-art { width: 86px; height: 86px; font-size: 40px; } .product-details { padding: 10px; } .product-details h3 { font-size: 11px; } .product-business { font-size: 8px; } .price { font-size: 13px; } .stock { font-size: 8px; } .product-actions { gap: 4px; margin-top: 9px; padding-top: 8px; } .product-actions small { font-size: 8px; } .view-product { padding: 6px; font-size: 8px; white-space: nowrap; } .product-badge { top: 8px; left: 8px; padding: 5px 6px; font-size: 7px; } .product-favorite { width: 25px; height: 25px; top: 7px; right: 7px; font-size: 15px; } .catalog-end { gap: 8px; font-size: 8px; } .catalog-end span { width: 18px; } .site-footer { gap: 9px; font-size: 8px; } .site-footer p { max-width: 150px; line-height: 1.4; } .site-footer > span { white-space: nowrap; font-size: 8px; } .role-panel { margin-bottom: 24px; padding: 16px 13px; } .panel-intro { align-items: start; } .panel-intro h1 { font-size: 22px; } .panel-subtitle { max-width: 260px; font-size: 10px; line-height: 1.5; } .panel-icon { width: 35px; height: 35px; } .worker-layout, .boss-layout { grid-template-columns: 1fr; } .worker-layout { gap: 13px; } .sales-summary { order: -1; } .worker-product { grid-template-columns: 40px minmax(0,1fr); gap: 8px; } .worker-thumb { width: 38px; height: 38px; } .worker-controls { grid-column: 2; justify-self: start; margin-top: 4px; } .worker-product { grid-template-rows: auto auto; } .worker-product h3 { font-size: 10px; } .inventory-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 7px; } .inventory-thumb { width: 34px; height: 34px; } .inventory-price { grid-column: 2; grid-row: 2; } .inventory-stock { grid-column: 3; grid-row: 1 / span 2; } .toast { right: 12px; bottom: 75px; } }
@media (max-width: 380px) { .topbar { grid-template-columns: auto 1fr auto; gap: 8px; padding-inline: 10px; } .brand { font-size: 19px; } .header-search input { font-size: 9px; } .hero-content { max-width: 78%; padding-left: 17px; } .hero-content h1 { font-size: 30px; } .product-visual { height: 115px; } .product-actions small { display: none; } .view-product { margin-left: auto; } }
@media (max-width: 1120px) { .brand { gap: 5px; font-size: 19px; letter-spacing: -1px; } .brand-logo { width: 40px; height: 40px; } }
@media (max-width: 860px) { .brand > span { display: none; } .brand-logo { width: 44px; height: 44px; } .auth-gate { grid-template-columns: 130px minmax(0,1fr); gap: 15px; padding: 20px; } .auth-mark { width: 125px; height: 125px; } }
@media (max-width: 650px) { .brand { gap: 0; } .brand-logo { width: 48px; height: 48px; } .auth-gate { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 16px 13px; } .auth-mark { width: 100px; height: 100px; } .auth-copy { width: 100%; } .auth-copy h2 { font-size: 19px; } .join-gate { margin: 18px auto 0; padding: 20px 16px 17px; } .join-gate h2 { max-width: 250px; font-size: 18px; } .gate-mark { top: 17px; right: 15px; width: 27px; height: 27px; } .code-input-row { flex-direction: column; } .code-input-row button { justify-content: space-between; min-height: 38px; } .worker-session-bar { flex-wrap: wrap; } .worker-session-bar .text-button { margin-left: auto; } .invite-card { align-items: stretch; flex-direction: column; gap: 13px; padding: 14px; } .invite-toggle { font-size: 16px; } .invite-code-wrap { min-width: 0; } .boss-session-bar { gap: 7px; flex-wrap: wrap; } .boss-session-bar strong { font-size: 9px; } .local-save-status { margin-left: 38px; } .inventory-heading { align-items: start; } .inventory-count { padding-top: 15px; } .role-panel { padding-inline: 12px; } .context-menu { width: 195px; } .site-footer .footer-brand { font-size: 0; } .footer-brand img { width: 34px; height: 34px; } }

@media (max-width: 650px) {
  .inventory-row { grid-template-columns: 36px minmax(0,1fr) auto 30px; }
  .product-trash { grid-column: 4; grid-row: 1 / span 2; }
  .recent-sale { align-items: start; flex-direction: column; }
}