/* Independent sidebar scrolling and collapse-to-icons rail. */
:root{--sidebar-width:240px}
html[data-sidebar-collapsed="true"]{--sidebar-width:76px}
.app-sidebar{display:flex;flex-direction:column;overflow:hidden;transition:width .2s ease,background .2s ease}
.app-sidebar .offcanvas-body{min-height:0;overflow:hidden;flex:1;padding:18px 14px 12px}
.sidebar-brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:54px;margin-bottom:10px}
.sidebar-brand-row .boba-brand{min-width:0;gap:8px;font-size:26px}
.sidebar-brand-row .boba-brand small{font-size:7px}
.sidebar-collapse-toggle{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid var(--boba-line);border-radius:9px;background:var(--boba-glass);color:var(--boba-muted)}
.sidebar-collapse-toggle .icon{width:15px;height:15px;transform:rotate(90deg);transition:transform .2s}
.sidebar-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:0 2px}
.sidebar-scroll::-webkit-scrollbar{width:0;height:0}
.workspace-label{margin:14px 0 18px}
.sidebar-bottom{flex:0 0 auto;margin-top:0;padding-top:10px}
.sidebar-note{padding:12px;margin-bottom:8px}
.workspace-shell .app-frame{transition:margin-left .2s ease}
html[data-sidebar-collapsed="true"] .app-sidebar .offcanvas-body{padding-right:10px;padding-left:10px}
html[data-sidebar-collapsed="true"] .sidebar-brand-row{justify-content:center;position:relative}
html[data-sidebar-collapsed="true"] .sidebar-brand-row .boba-brand{justify-content:center}
html[data-sidebar-collapsed="true"] .brand-word,
html[data-sidebar-collapsed="true"] .sidebar-brand-row .boba-brand>span:not(.mode-brand-art),
html[data-sidebar-collapsed="true"] .workspace-label-text,
html[data-sidebar-collapsed="true"] .workspace-label>svg,
html[data-sidebar-collapsed="true"] .nav-item-link>span,
html[data-sidebar-collapsed="true"] .nav-caption,
html[data-sidebar-collapsed="true"] .sidebar-note,
html[data-sidebar-collapsed="true"] .signout-text{display:none}
html[data-sidebar-collapsed="true"] .sidebar-brand-row .boba-brand{font-size:0}
html[data-sidebar-collapsed="true"] .sidebar-collapse-toggle{position:absolute;right:-4px;top:4px;width:25px;height:25px}
html[data-sidebar-collapsed="true"] .sidebar-collapse-toggle .icon{transform:rotate(-90deg)}
html[data-sidebar-collapsed="true"] .workspace-label{justify-content:center;padding:10px;margin:10px 0 14px}
html[data-sidebar-collapsed="true"] .workspace-dot{flex:0 0 7px}
html[data-sidebar-collapsed="true"] .nav-item-link{justify-content:center;padding:12px 8px;position:relative}
html[data-sidebar-collapsed="true"] .nav-item-link .icon{width:20px;height:20px}
html[data-sidebar-collapsed="true"] .nav-item-link.active::after{position:absolute;right:7px}
html[data-sidebar-collapsed="true"] .sidebar-bottom .signout{justify-content:center}

/* Tabs and distinct content surface for Client Tracker. */
.workspace-tabs{display:flex;align-items:stretch;gap:4px;min-height:49px;margin:0 0 18px;padding:5px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border:1px solid var(--boba-border);border-radius:14px;background:var(--boba-glass);box-shadow:var(--boba-shadow);overscroll-behavior-x:contain}
.workspace-tabs::-webkit-scrollbar{display:none}
.workspace-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:10px 14px;border-radius:10px;color:var(--boba-muted);font-size:11px;font-weight:650;white-space:nowrap;transition:background .15s,color .15s}
.workspace-tab:hover{background:rgba(var(--boba-accent-rgb),.08);color:var(--boba-ink)}
.workspace-tab.active{background:var(--boba-accent);color:#fff;box-shadow:0 3px 10px rgba(var(--boba-accent-rgb),.25)}
.workspace-tab.active::after{content:"";position:absolute;left:18px;right:18px;bottom:4px;height:2px;border-radius:2px;background:rgba(255,255,255,.8)}
.workspace-content{padding:25px;margin-bottom:20px;border-radius:18px;min-width:0}
.workspace-content>h1{font-size:26px;margin-bottom:8px}
.workspace-content>.table-responsive{border-radius:12px}

/* Role-based mode selector and generic future-workflow template. */
.mode-switcher{display:grid;grid-template-columns:minmax(145px,.7fr) minmax(0,2fr);gap:12px;margin:0 0 23px;padding:12px;border:1px solid var(--boba-border);border-radius:17px;background:var(--boba-glass);box-shadow:var(--boba-shadow)}
.mode-switcher-classic,.mode-switcher-specialized{display:flex;min-width:0;flex-direction:column;gap:7px}
.mode-row-label{padding-left:5px;color:var(--boba-muted);font-size:8px;font-weight:800;letter-spacing:.12em}
.mode-choice-row{display:flex;flex-wrap:wrap;gap:7px}
.mode-choice{display:flex;min-height:46px;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border:1px solid var(--boba-line);border-radius:11px;background:rgba(255,255,255,.34);color:var(--boba-muted);font-size:10px;font-weight:750;white-space:nowrap;transition:transform .15s,background .15s,color .15s,border-color .15s}
.mode-choice:hover{transform:translateY(-1px);background:rgba(var(--boba-accent-rgb),.1);color:var(--boba-ink)}
.mode-choice.is-selected{border-color:var(--boba-accent);background:var(--boba-accent-soft);color:var(--boba-accent);box-shadow:inset 0 0 0 1px rgba(var(--boba-accent-rgb),.16)}
.mode-choice-classic{justify-content:flex-start;background:var(--boba-accent);border-color:var(--boba-accent);color:#fff}
.mode-choice-classic:hover,.mode-choice-classic.is-selected{background:var(--boba-ink);border-color:var(--boba-ink);color:#fff}
.mode-choice small{font-size:8px;font-weight:550;opacity:.78}
.mode-symbol{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:rgba(var(--boba-accent-rgb),.12);font-size:16px;line-height:1}
.mode-choice-classic .mode-symbol{background:rgba(255,255,255,.17)}
.mode-preview-intro{margin-bottom:16px}
.mode-preview-panel{margin-bottom:16px;overflow:hidden}
.mode-preview-panel .panel-heading{padding:22px 24px}
.mode-preview-panel .panel-heading h2{margin-bottom:5px}
.mode-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 24px 24px}
.mode-stat-grid article{display:grid;gap:6px;padding:15px;border:1px solid var(--boba-line);border-radius:12px;background:rgba(255,255,255,.2)}
.mode-stat-grid span,.mode-stat-grid small{color:var(--boba-muted);font-size:10px}
.mode-stat-grid strong{font-size:24px}
.mode-template-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mode-copy{padding:0 24px 24px;color:var(--boba-muted);font-size:12px;line-height:1.7}
.mode-copy h3{font-size:15px;color:var(--boba-ink)}
.mode-filter-demo{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 24px 24px}
.mode-filter-demo label{display:grid;gap:5px;color:var(--boba-muted);font-size:10px;font-weight:650}
.mode-filter-demo .btn{grid-column:1/-1;justify-self:start}
.mode-template-table{--bs-table-bg:transparent;--bs-table-color:var(--boba-ink);--bs-table-border-color:var(--boba-line);min-width:740px;margin:0}
.mode-template-table th,.mode-template-table tfoot td{color:var(--boba-muted);font-size:9px;letter-spacing:.04em}
.mode-template-table td{font-size:11px;vertical-align:middle}
.mode-template-table td small{display:block;margin-top:3px;color:var(--boba-muted)}
.mode-cup-panel{display:flex;align-items:center;justify-content:space-between;min-height:200px;padding:16px 22px;border:1px solid var(--boba-border);border-radius:18px;background:var(--boba-glass)}
.mode-cup-panel h2{font-size:20px}
.mode-cup-panel .boba-art{width:240px;min-height:180px;flex:0 0 240px;transform:scale(.56);transform-origin:center}

/* Beverage art swaps with mode. */
.mode-beverage{display:none;position:absolute;left:50%;top:50%;width:180px;height:230px;transform:translate(-50%,-43%)}
.mode-beverage-employee{display:block}
html[data-boba-mode="Manager"] .mode-beverage-employee,html[data-boba-mode="Education"] .mode-beverage-employee,html[data-boba-mode="Sales"] .mode-beverage-employee,html[data-boba-mode="Technician"] .mode-beverage-employee{display:none}
html[data-boba-mode="Manager"] .mode-beverage-manager,html[data-boba-mode="Education"] .mode-beverage-education,html[data-boba-mode="Sales"] .mode-beverage-sales,html[data-boba-mode="Technician"] .mode-beverage-technician{display:block}
.tea-mug{position:absolute;left:20px;top:55px;width:135px;height:112px;border:5px solid rgba(255,255,255,.85);border-radius:14px 14px 40px 40px;background:linear-gradient(110deg,#fffaf1,#d9c8ae 60%,#b99d7a);box-shadow:inset 0 -8px 15px rgba(102,74,47,.15),0 15px 22px rgba(0,0,0,.1)}
.tea-mug:before{content:"";position:absolute;left:8px;right:8px;top:10px;height:18px;border-radius:50%;background:linear-gradient(#533c2c,#9c7049);border:3px solid #f5ead8}
.mug-handle{position:absolute;right:-35px;top:26px;width:42px;height:52px;border:8px solid #cfb99b;border-left:0;border-radius:0 28px 28px 0}
.tea-bag-string{position:absolute;top:2px;left:93px;width:2px;height:65px;background:#68452f;transform:rotate(9deg);z-index:2}
.tea-bag-tag{position:absolute;top:57px;left:89px;z-index:3;padding:5px 4px;border-radius:3px;background:#f6e2ad;color:#61451f;font-size:6px;font-weight:800}
.coffee-cup{position:absolute;left:29px;top:42px;width:124px;height:158px;border-radius:9px 9px 35px 35px;background:linear-gradient(100deg,#fff 0,#faf8f4 58%,#e6e0d7);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);box-shadow:inset -8px 0 16px rgba(0,0,0,.09)}
.coffee-lid{position:absolute;z-index:3;top:-8px;left:-10px;width:144px;height:25px;border:4px solid #221f20;border-radius:50%;background:linear-gradient(#555,#171719 60%)}
.coffee-sleeve{position:absolute;top:44px;left:0;width:124px;height:64px;display:grid;place-items:center;background:linear-gradient(100deg,#bd8a54,#e0b577 54%,#a96d37);box-shadow:0 3px 5px rgba(0,0,0,.13)}
.coffee-flavor{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f5e6cb;color:#674121;font-size:18px;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.energy-can{position:absolute;top:42px;width:75px;height:174px;border:2px solid #d9e1df;border-radius:15px 15px 19px 19px;background:linear-gradient(90deg,#7a8990,#f4f5f0 24%,#bbc8c5 54%,#f8faf8 72%,#77878c);box-shadow:inset 0 -8px 12px rgba(0,0,0,.18),0 12px 19px rgba(0,0,0,.1)}
.energy-can:before{content:"";position:absolute;left:8px;right:8px;top:-5px;height:9px;border:2px solid #919a9a;border-radius:50%;background:#d7dedd}
.energy-can small{position:absolute;left:0;right:0;top:102px;text-align:center;color:#27433b;font-size:8px;font-weight:900;letter-spacing:.12em}
.can-one{left:26px;transform:rotate(-9deg)}.can-two{right:17px;top:29px;transform:rotate(8deg)}
.can-flavor{position:absolute;top:48px;left:19px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#4d946b;color:#fff;font-size:20px;box-shadow:0 0 0 4px rgba(255,255,255,.4)}
.can-two .can-flavor{background:#e07982}
.mode-brand-art{display:grid;place-items:center;flex:0 0 38px;width:38px;height:42px}
.brand-beverage{display:none;place-items:center;width:29px;height:34px;border-radius:6px 6px 9px 9px;background:linear-gradient(120deg,var(--boba-accent-soft),var(--boba-accent));color:#fff;font-size:17px;box-shadow:inset 3px 0 4px rgba(255,255,255,.35),0 2px 4px rgba(0,0,0,.1)}
.brand-beverage-employee{display:grid}
html[data-boba-mode="Manager"] .brand-beverage-employee,html[data-boba-mode="Education"] .brand-beverage-employee,html[data-boba-mode="Sales"] .brand-beverage-employee,html[data-boba-mode="Technician"] .brand-beverage-employee{display:none}
html[data-boba-mode="Manager"] .brand-beverage-manager,html[data-boba-mode="Education"] .brand-beverage-education,html[data-boba-mode="Sales"] .brand-beverage-sales,html[data-boba-mode="Technician"] .brand-beverage-technician{display:grid}
html[data-boba-mode="Manager"] .brand-beverage-manager{background:linear-gradient(120deg,#e9d8bc,#a98252);color:#4c351f}
html[data-boba-mode="Education"] .brand-beverage-education{border-radius:4px;background:linear-gradient(120deg,#edaa67,#a74770)}
html[data-boba-mode="Sales"] .brand-beverage-sales{border-radius:5px;background:linear-gradient(#272323 0 18%,#f6f3ed 18% 76%,#c79a65 76%);color:#784c2d}
html[data-boba-mode="Technician"] .brand-beverage-technician{border-radius:3px;background:linear-gradient(90deg,#879994,#eef4ef 45%,#688679);color:#2e6b55}

@media(max-width:991.98px){html[data-sidebar-collapsed="true"]{--sidebar-width:0px}.app-sidebar .brand-word,.app-sidebar .nav-item-link>span,.app-sidebar .nav-caption,.app-sidebar .sidebar-note,.app-sidebar .signout-text{display:initial!important}.app-sidebar .sidebar-brand-row .boba-brand>span:not(.mode-brand-art){display:initial!important}.app-sidebar .workspace-label-text{display:inline!important}.app-sidebar .workspace-label>svg{display:block!important}.app-sidebar .nav-item-link{justify-content:flex-start!important}.app-sidebar{--bs-offcanvas-width:268px}.app-sidebar .offcanvas-body{height:calc(100% - 54px);flex:1;padding:12px 18px 16px}.sidebar-mobile-header{display:flex!important}.sidebar-collapse-toggle{display:none}.mode-switcher{grid-template-columns:1fr}.mode-choice-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.mode-choice-row::-webkit-scrollbar{display:none}}
@media(max-width:767.98px){.workspace-tabs{margin-bottom:14px}.workspace-tab{padding:10px 12px;font-size:10px}.workspace-content{padding:16px}.mode-template-grid{grid-template-columns:1fr}.mode-stat-grid{grid-template-columns:1fr 1fr}.mode-cup-panel{min-height:160px}.mode-cup-panel .boba-art{transform:scale(.45);transform-origin:right center;flex-basis:150px;width:150px;margin-right:-15px}.mode-choice{font-size:9px;padding:8px 10px}}

/* Paired surface/foreground tokens: mode overrides update every shared component. */
:root{--ui-surface:#fffafc;--ui-soft:#f2eaf0;--ui-link:color-mix(in srgb,var(--boba-accent) 45%,#17121c);--ui-button:color-mix(in srgb,var(--boba-accent) 45%,#17121c);--ui-button-ink:#fff;--boba-muted:#55485a}
html[data-boba-theme="midnight"],html[data-boba-theme="emerald"],html[data-boba-theme="burgundy"]{--ui-surface:var(--boba-canvas);--ui-soft:var(--boba-accent-soft);--ui-link:color-mix(in srgb,var(--boba-accent) 55%,#fff)}
html[data-boba-mode="Manager"],html[data-boba-mode="Technician"]{--boba-ink:#f4f5f8;--boba-muted:#c6cbd5;--ui-surface:#20242c;--ui-soft:#303641;--ui-link:color-mix(in srgb,var(--boba-accent) 45%,#fff);--boba-glass:#20242c;--boba-border:#697282;--boba-line:#697282;color-scheme:dark}
html[data-boba-mode="Technician"]{--ui-surface:#142421;--ui-soft:#243c35;--boba-glass:#142421;--boba-border:#a2c7b4;--boba-line:#7caa96}
html[data-boba-mode="Education"],html[data-boba-mode="Sales"]{--boba-ink:#29212d;--boba-muted:#584c5e;--ui-surface:#fffafc;--ui-soft:#efe8ef;--ui-link:color-mix(in srgb,var(--boba-accent) 45%,#17121c);--boba-glass:#fffafc;--boba-border:#a797ad;--boba-line:#b8aabd;color-scheme:light}
html[data-boba-mode="Manager"] body,html[data-boba-mode="Technician"] body{background:color-mix(in srgb,var(--boba-canvas) 22%,#11171d)}
html[data-boba-mode="Education"] body,html[data-boba-mode="Sales"] body{background:color-mix(in srgb,var(--boba-canvas) 18%,#fff)}
html body{color:var(--boba-ink);--bs-body-color:var(--boba-ink);--bs-secondary-color:var(--boba-muted);--bs-emphasis-color:var(--boba-ink);--bs-body-bg:var(--ui-surface);--bs-link-color:var(--ui-link);--bs-link-hover-color:var(--boba-ink)}
html body :is(.glass-panel,.app-sidebar,.workspace-tabs,.mode-switcher,.mode-cup-panel,.hero,.workspace-card,.signin-panel,.theme-menu,.dropdown-menu,.modal-content){background:var(--ui-surface);color:var(--boba-ink);border-color:var(--boba-border)}
html body :is(h1,h2,h3,h4,h5,h6,.profile-pill,.theme-choice,.mode-choice,.workspace-tab,.nav-item-link,.jump-result,.mode-stat-grid strong){color:var(--boba-ink)}
html body :is(.eyebrow,.theme-menu-title,.mode-row-label,.theme-trigger,.breadcrumb-label,.panel-heading p,.hero-copy p,.mode-copy,.mode-filter-demo label,.nav-caption,.mode-stat-grid span,.mode-stat-grid small){color:var(--boba-muted)}
html body :is(.mode-choice,.mode-stat-grid article,.btn-glass,.jump-button,.sidebar-note,.workspace-label,.date-chip,.rhythm-bar,.status-badge,.placeholder-pill,.role-badge,.float-label){background:var(--ui-soft);color:var(--boba-ink);border-color:var(--boba-line)}
html body :is(a:not(.btn):not(.nav-item-link):not(.workspace-tab):not(.mode-choice):not(.boba-brand):not(.profile-pill),.hero h2 span){color:var(--ui-link)}
html body :is(.theme-choice:hover,.theme-choice[aria-pressed="true"],.nav-item-link:hover,.nav-item-link.active,.workspace-tab:hover,.mode-choice:hover,.mode-choice.is-selected,.btn-glass:hover){background:var(--ui-soft);color:var(--boba-ink);border-color:var(--ui-link)}
html body :is(.btn-boba,.workspace-tab.active,.mode-choice-classic,.mode-choice-classic.is-selected){background:var(--ui-button);border-color:var(--ui-button);color:var(--ui-button-ink);--bs-btn-color:var(--ui-button-ink);--bs-btn-bg:var(--ui-button);--bs-btn-hover-color:var(--ui-button-ink);--bs-btn-hover-bg:var(--ui-button);--bs-btn-active-color:var(--ui-button-ink);--bs-btn-active-bg:var(--ui-button)}
html body :is(.btn-boba:hover,.btn-boba:focus-visible,.workspace-tab.active:hover,.mode-choice-classic:hover){color:var(--ui-button-ink);background:var(--ui-button);filter:brightness(1.12)}
html body :is(.form-control,.form-select,.form-control:focus,.form-select:focus,.form-control[readonly],.form-control:disabled){background-color:var(--ui-surface);color:var(--boba-ink);border-color:var(--boba-line);opacity:1}
html body .form-control::placeholder{color:var(--boba-muted);opacity:1}
html body select option{background:var(--ui-surface);color:var(--boba-ink)}
html body .table{--bs-table-bg:var(--ui-surface);--bs-table-color:var(--boba-ink);--bs-table-border-color:var(--boba-line);--bs-table-striped-bg:var(--ui-soft);--bs-table-striped-color:var(--boba-ink);--bs-table-hover-bg:var(--ui-soft);--bs-table-hover-color:var(--boba-ink)}
html body .table :is(th,td){color:var(--boba-ink)}
html body .table :is(small,tfoot td){color:var(--boba-muted)}
html body .table thead th{background:var(--ui-soft)}
html body .dropdown-menu{--bs-dropdown-bg:var(--ui-surface);--bs-dropdown-color:var(--boba-ink);--bs-dropdown-link-color:var(--boba-ink);--bs-dropdown-link-hover-color:var(--boba-ink);--bs-dropdown-link-hover-bg:var(--ui-soft)}
html body .topbar{background:var(--ui-surface);border-color:var(--boba-line)}
html body .mode-beverage-art .float-label{color:var(--boba-ink);background:var(--ui-surface)}

/* An independent illustration column keeps copy and labels off the beverages. */
html body .hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);align-items:center;isolation:isolate}
html body .hero-copy{min-width:0;padding:32px;position:relative;z-index:1}
html body .hero .boba-art{position:relative;inset:auto;width:100%;height:320px;min-height:320px;transform:none}
html body .mode-preview-hero{margin-bottom:20px;min-height:320px}
html body .mode-preview-hero h2{color:var(--boba-ink)}
html body .mode-preview-hero .hero-copy p{max-width:440px}
.mode-beverage-art .label-top{top:10px;right:12%;transform:none}
.mode-beverage-art .label-bottom{bottom:10px;left:12%;transform:none}
html:not([data-boba-mode="Employee"]) .mode-beverage-art .float-label{display:none}
.mode-beverage-art .art-orbit{border-color:var(--boba-line)}
.mode-beverage-art .mode-beverage{transform:translate(-50%,-50%)}
/* Preserve the reference carton's rectangular perspective, folds and bendy straw. */
.apple-juice-carton{position:absolute;inset:-20px -10px;width:200px;height:270px;overflow:visible;filter:drop-shadow(0 10px 9px rgba(0,0,0,.15))}
.carton-front{fill:var(--boba-tea)}.carton-side{fill:color-mix(in srgb,var(--boba-tea) 35%,#fff)}.carton-top{fill:var(--boba-tea-deep)}
.carton-fold{fill:none;stroke:var(--boba-tea-deep);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.carton-straw{fill:none;stroke:#fff0b0;stroke-width:68;stroke-linecap:round;stroke-linejoin:round}.carton-bend{fill:none;stroke:#dbc780;stroke-width:8;stroke-linecap:round}
.carton-apple{fill:color-mix(in srgb,var(--boba-accent) 65%,#ab2332)}.carton-leaf{fill:color-mix(in srgb,var(--boba-tea-deep) 55%,#236342)}.carton-stem{fill:none;stroke:var(--boba-tea-deep);stroke-width:17;stroke-linecap:round}
/* Lid stays outside the tapered body instead of being clipped off. */
.mode-beverage-art .coffee-cup{clip-path:none;background:none;box-shadow:none;border-radius:0}
.mode-beverage-art .coffee-cup:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#fff,#e6e0d7);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);border-radius:8px}
.mode-beverage-art .coffee-sleeve{background:var(--boba-tea-deep);clip-path:polygon(4% 0,96% 0,91% 100%,9% 100%)}
.mode-beverage-art .coffee-flavor{background:#fff5df;color:#402b20}
.mode-beverage-art .can-flavor{background:var(--boba-tea-deep);color:#fff}.mode-beverage-art .can-two .can-flavor{background:var(--boba-accent)}
@media(max-width:767.98px){html body .hero{grid-template-columns:1fr}html body .hero .boba-art{height:290px;min-height:290px;width:100%;position:relative;inset:auto;transform:none}html body .hero-copy{padding:26px}.mode-preview-hero .hero-copy p{max-width:none}}
@media print{html body{color:#222;background:#fff}html body :is(.glass-panel,.table){background:#fff;color:#222}html body .hero{display:block}html body .hero .boba-art{display:none}}
html[data-boba-mode="Manager"] .form-select,html[data-boba-mode="Technician"] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f4f5f8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
html[data-boba-mode="Education"] .form-select,html[data-boba-mode="Sales"] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2329212d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
html[data-boba-mode="Manager"] .btn-close,html[data-boba-mode="Technician"] .btn-close{filter:invert(1)}
html[data-boba-mode="Education"] .btn-close,html[data-boba-mode="Sales"] .btn-close{filter:none}
html[data-boba-mode="Manager"] :is(.text-danger,.field-validation-error,.validation-summary-errors),html[data-boba-mode="Technician"] :is(.text-danger,.field-validation-error,.validation-summary-errors){color:#ffb4bd!important}

/* Page tabs share a single bordered container with their content. */
html body .workspace-tab-shell{min-width:0;padding:24px;border:1px solid var(--boba-border);border-radius:18px;background:var(--ui-surface);color:var(--boba-ink);box-shadow:var(--boba-shadow)}
html body .workspace-tab-shell>.workspace-tabs{margin:-24px -24px 24px;padding:10px 12px 0;gap:6px;border:0;border-bottom:1px solid var(--boba-line);border-radius:17px 17px 0 0;background:var(--ui-soft);box-shadow:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--boba-line) transparent}
html body .workspace-tabs::-webkit-scrollbar{display:block;height:5px}
html body .workspace-tabs::-webkit-scrollbar-thumb{background:var(--boba-line);border-radius:4px}
html body .workspace-tabs .workspace-tab{flex-shrink:0;min-height:44px;padding:12px 16px;border:1px solid var(--boba-line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--ui-surface);color:var(--boba-muted);font-size:12px;font-weight:650}
html body .workspace-tabs .workspace-tab.active{background:var(--ui-button);color:#fff;border-color:var(--ui-button);box-shadow:inset 0 3px 0 var(--boba-tea);font-weight:800}
html body .workspace-tabs .workspace-tab.active:after{display:none}
html body .workspace-tab-shell>.workspace-content{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
html body .workspace-tab-shell>.area-welcome{min-height:240px}
html body .workspace-tab-shell .edu-toolbar{gap:10px;flex-wrap:wrap}
html body .workspace-tab-shell .edu-toolbar :is(input,select){padding:7px 9px;border:1px solid var(--boba-line);border-radius:7px;background:var(--ui-surface);color:var(--boba-ink);font-size:12px}
html body .workspace-tab-shell .edu-toolbar label{font-size:11px;color:var(--boba-ink)}

/* All drink marks select the actual blend, without JavaScript or emoji fonts. */
.flavor-icon{display:none;width:100%;height:100%;overflow:visible}
html[data-boba-theme="strawberry"] .flavor-strawberry{display:block}
html[data-boba-theme="milk-tea"] .flavor-milk-tea{display:block}
html[data-boba-theme="taro"] .flavor-taro{display:block}
html[data-boba-theme="blueberry"] .flavor-blueberry{display:block}
html[data-boba-theme="midnight"] .flavor-midnight{display:block}
html[data-boba-theme="emerald"] .flavor-emerald{display:block}
html[data-boba-theme="burgundy"] .flavor-burgundy{display:block}
html[data-boba-theme="pearl"] .flavor-pearl{display:block}
html[data-boba-theme="coffee-cream"] .flavor-coffee-cream{display:block}
html[data-boba-theme="strawberry-kiwi"] .flavor-strawberry-kiwi{display:block}
html[data-boba-theme="matcha"] .flavor-matcha{display:block}
html[data-boba-theme="brown-sugar-matcha"] .flavor-brown-sugar-matcha{display:block}
html[data-boba-theme="mango-passion"] .flavor-mango-passion{display:block}
html[data-boba-theme="lychee-rose"] .flavor-lychee-rose{display:block}
.carton-flavor{width:100%;height:100%;display:grid;place-items:center}
.carton-flavor .flavor-icon{width:100%;height:100%;filter:drop-shadow(2px 4px 1px rgba(0,0,0,.12))}
/* Porcelain tea cup, saucer, a visible sachet and three wisps of steam. */
.mode-beverage-art .tea-saucer{position:absolute;left:-9px;top:150px;width:204px;height:43px;border-radius:50%;background:radial-gradient(ellipse at 50% 43%,#fffdf3 28%,var(--boba-tea) 30%,#fff8ea 35%,#dfd2bc 64%,#fffef3 68%,var(--boba-tea-deep) 72%,#e9dec8 76%);box-shadow:0 10px 12px rgba(0,0,0,.22)}
.mode-beverage-art .tea-mug{top:54px;height:112px;border-color:#fff9ea;border-radius:12px 12px 48px 48px;background:linear-gradient(100deg,#fffdf6 0%,color-mix(in srgb,var(--boba-tea) 24%,#fff7e6) 48%,color-mix(in srgb,var(--boba-tea-deep) 45%,#d8c4a1) 100%);box-shadow:inset 2px -9px 12px rgba(83,59,28,.16),0 8px 8px rgba(0,0,0,.15)}
.mode-beverage-art .tea-mug:before{left:1px;right:1px;top:2px;height:24px;background:radial-gradient(ellipse at 40% 50%,color-mix(in srgb,var(--boba-tea) 55%,#ad6e20),#69421e);border:3px solid #fff5df;z-index:1}
.tea-bag-visible{position:absolute;left:31px;top:-3px;width:48px;height:40px;border:1px solid #d5c6a5;border-radius:3px;background:linear-gradient(#fff9deee,#d2bb8999);transform:rotate(9deg);z-index:2;box-shadow:inset 0 -8px 7px #906d3b55}
.mode-beverage-art .tea-bag-string{left:64px;top:-15px;height:78px;transform:rotate(-15deg);z-index:3}
.mode-beverage-art .tea-bag-tag{left:83px;top:55px;width:23px;height:29px;padding:2px;background:#fff5d8;box-shadow:0 2px 3px #49331644;border:1px solid var(--boba-tea-deep);transform:rotate(8deg)}
.tea-decoration{position:absolute;left:33px;top:45px;width:42px;height:45px;opacity:.8}
.tea-steam{position:absolute;top:1px;left:60px;width:14px;height:40px;border-left:2px solid var(--boba-muted);border-radius:50%;opacity:.6;transform:rotate(15deg)}
.steam-two{left:88px;top:-9px;height:49px;transform:rotate(-12deg)}.steam-three{left:113px;top:2px;height:36px}
/* A curved sleeve and lit body give the takeaway cup volume. */
.mode-beverage-art .coffee-cup:before{background:linear-gradient(95deg,#d7cfc3 0%,#fffdf7 20%,#fffaf2 47%,#e9dfd0 77%,#b8aa97 100%);filter:drop-shadow(4px 7px 4px #0003)}
.mode-beverage-art .coffee-lid{top:-9px;height:27px;background:radial-gradient(ellipse at 50% 25%,#646365 0%,#2a292b 58%,#111 72%);border:3px solid #262426;box-shadow:0 5px 0 #171619,0 8px 4px #0004,inset 0 3px 2px #9996}
.mode-beverage-art .coffee-sleeve{top:48px;height:66px;border-radius:50% / 10%;background:linear-gradient(90deg,color-mix(in srgb,var(--boba-tea-deep) 75%,#17110c),var(--boba-tea) 32%,var(--boba-tea-deep) 82%,color-mix(in srgb,var(--boba-tea-deep) 60%,#100c08));box-shadow:inset 0 3px 2px #fff4,0 5px 4px #0003}
.mode-beverage-art .coffee-flavor{width:49px;height:49px;background:#fff6e3;border:2px solid #fff9ee;box-shadow:0 2px 3px #0003;padding:3px}
.coffee-cup-base{position:absolute;bottom:0;left:17px;right:17px;height:10px;border-radius:50%;background:linear-gradient(#f1e7d8,#cbbca8);box-shadow:0 6px 5px #0002}
/* Open aluminum tops and large vertical marks, roughly half the can height. */
.mode-beverage-art .energy-can{border-radius:12px 12px 17px 17px;box-shadow:inset -9px 0 11px #34454455,inset 5px 0 5px #ffffffbb,0 15px 12px #0003}
.mode-beverage-art .energy-can:before{display:none}
.can-top{position:absolute;left:-1px;right:-1px;top:-7px;height:21px;border:2px solid #889897;border-radius:50%;background:linear-gradient(170deg,#fafdf8,#a1b2b0 55%,#dce5df);box-shadow:inset 0 0 0 3px #d7dfdc,0 2px 1px #455653}
.can-opening{position:absolute;left:12px;top:6px;width:19px;height:9px;border-radius:50%;background:#182324;box-shadow:inset 0 2px 2px #000}
.can-tab{position:absolute;left:33px;top:3px;width:22px;height:12px;border:3px solid #f0f3ef;border-radius:6px;transform:rotate(-12deg);box-shadow:0 1px 1px #364843}
.mode-beverage-art .can-flavor{top:31px;left:8px;width:56px;height:84px;border-radius:0;background:none;box-shadow:none;padding:0;filter:drop-shadow(1px 2px 1px #0003)}
.mode-beverage-art .can-two .can-flavor{background:none}
.mode-beverage-art .energy-can small{top:126px;color:#19382c;font-size:8px;letter-spacing:.15em}
/* Quiet four-point stars are decoration; they never sit over a text block. */
.mode-beverage-art .spark-three{top:14%;left:44%;font-size:12px;opacity:.5}.mode-beverage-art .spark-four{bottom:12%;right:14%;font-size:17px;opacity:.5}
.mode-beverage-art .spark-five{bottom:20%;left:18%;font-size:11px;opacity:.4}.mode-beverage-art .spark-six{top:35%;right:9%;font-size:13px;opacity:.45}
.hero,.mode-preview-panel,.workspace-card{position:relative}
.hero:after,.mode-preview-panel:after,.workspace-card:after{content:"✧";position:absolute;right:14px;top:12px;color:var(--boba-tea-deep);opacity:.25;font-size:20px;line-height:1;pointer-events:none}
.ambient-three:after{content:"✧";position:absolute;right:10%;top:10%;color:var(--boba-tea-deep);font-size:100px}
@media(max-width:767.98px){html body .workspace-tab-shell{padding:16px}html body .workspace-tab-shell>.workspace-tabs{margin:-16px -16px 18px}html body .workspace-tabs .workspace-tab{font-size:11px;padding:11px 13px}}

/* Education keeps its juice-box hero even when entered from the classic sidebar. */
html body .education-workspace-hero .mode-beverage,
html body .education-workspace-hero .mode-beverage-employee,
html body .education-workspace-hero .float-label{display:none}
html body .education-workspace-hero .mode-beverage-education{display:block}
html body .education-workspace-hero .hero-copy p{color:var(--boba-muted)}