/* FastBot product theme: warm paper, forest actions, and measured lilac accents. */
.shell {
  --workspace-canvas: color-mix(in srgb,var(--bg) 91%,#fff5e7);
  --workspace-outline: color-mix(in srgb,var(--border) 84%,transparent);
  background:
    radial-gradient(ellipse at 98% 0,color-mix(in srgb,var(--pastel-lavender) 27%,transparent),transparent 38rem),
    linear-gradient(145deg,var(--workspace-canvas),var(--bg) 48rem);
}
[data-theme="dark"] .shell {
  --workspace-canvas:var(--bg);
  --workspace-outline:color-mix(in srgb,var(--border) 92%,transparent);
}
.shell .main { min-height:100vh; background:transparent; }
.shell .page { max-width:1480px; padding:clamp(22px,3vw,38px) clamp(18px,3vw,42px) 56px; }
.shell .page-head { align-items:center; margin-bottom:26px; }
.shell .page-head h1 { font-size:clamp(24px,2.5vw,34px); letter-spacing:-.6px; }
.shell .page-head p { max-width:720px; line-height:1.9; }

/* Workspace navigation */
.shell .sidebar {
  padding:20px 13px;
  gap:8px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--side) 96%,var(--pastel-lavender)),var(--side) 36%);
  border-inline-end:1px solid var(--workspace-outline);
  box-shadow:5px 0 26px color-mix(in srgb,var(--brand) 5%,transparent);
}
.shell .sidebar-brand { padding:5px 5px 18px; }
.shell .brand { gap:12px; padding:5px 7px 15px; font-size:16px; }
.shell .brand-mark { width:42px; height:42px; border:1px solid color-mix(in srgb,var(--brand) 13%,var(--border)); border-radius:14px; box-shadow:0 5px 16px color-mix(in srgb,var(--brand) 10%,transparent); }
.shell .workspace-picker { padding:13px; border:1px solid var(--workspace-outline); border-radius:16px; background:color-mix(in srgb,var(--pastel-mint) 22%,var(--side)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bg-elev) 75%,transparent); }
.shell .workspace-picker label { display:block; margin-bottom:7px; color:var(--side-muted); font-size:10px; font-weight:700; }
.shell .workspace-picker select { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--workspace-outline); border-radius:10px; background:var(--bg-elev); color:var(--text); font:inherit; font-size:11px; }
.shell .workspace-status { display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--side-muted); font-size:10px; }
.shell .nav-group h2,.shell .nav-advanced > summary { padding:12px 10px 6px; color:var(--side-muted); font-size:10px; font-weight:750; letter-spacing:.03em; }
.shell .nav-item { min-height:42px; padding:8px 11px; border-radius:11px; font-size:12px; transition:background .18s,color .18s,transform .18s,box-shadow .18s; }
.shell .nav-item > .icon { width:17px; height:17px; opacity:.82; transition:transform .18s,color .18s; }
.shell .nav-item:hover { transform:translateX(-2px); background:color-mix(in srgb,var(--pastel-lavender) 32%,var(--side)); }
.shell .nav-item:hover > .icon { transform:scale(1.08); }
.shell .nav-item.active { background:linear-gradient(100deg,color-mix(in srgb,var(--pastel-mint) 76%,var(--side-active)),var(--side-active)); color:var(--brand-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 11%,transparent); }
.shell .nav-item.active > .icon { color:var(--brand); opacity:1; }
.shell .sidebar-footer { padding-top:14px; border-color:var(--workspace-outline); }
.shell .nav-advanced { border:1px solid transparent; border-radius:13px; }
.shell .nav-advanced[open] { padding-bottom:5px; border-color:var(--workspace-outline); background:color-mix(in srgb,var(--bg-elev) 56%,transparent); }
.shell .nav-advanced > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; border-radius:11px; cursor:pointer; list-style:none; }
.shell .nav-advanced > summary::-webkit-details-marker { display:none; }
.shell .mobile-bar { border-color:var(--workspace-outline); background:color-mix(in srgb,var(--side) 96%,var(--bg)); box-shadow:0 6px 22px color-mix(in srgb,var(--brand) 6%,transparent); backdrop-filter:none; -webkit-backdrop-filter:none; }

/* Common surfaces and controls */
.shell .card,.shell .creation-path,.shell .setup-form,.shell .shop-form,.shell .studio-main {
  border-color:var(--workspace-outline);
  box-shadow:0 12px 34px color-mix(in srgb,var(--brand) 6%,transparent),inset 0 1px 0 color-mix(in srgb,var(--bg-elev) 74%,transparent);
}
.shell .card { border-radius:20px; }
.shell .card-head { padding:17px 21px; background:color-mix(in srgb,var(--pastel-mint) 23%,var(--bg-elev)); }
.shell .card-body { padding:21px; }
.shell .card.hover { transition:transform .16s cubic-bezier(.2,.7,.25,1),border-color .16s; }
.shell .card.hover:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--lavender-ink) 27%,var(--border)); }
.shell .btn { min-height:42px; border-radius:12px; font-weight:700; box-shadow:0 3px 10px color-mix(in srgb,var(--brand) 5%,transparent); transition:transform .15s cubic-bezier(.2,.7,.25,1),background-color .15s,border-color .15s,color .15s; }
.shell .btn:hover:not(:disabled) { transform:translateY(-1px); }
.shell .btn:active:not(:disabled) { transform:scale(.98); }
.shell .btn.primary { background:var(--action-bg); border-color:var(--action-bg); color:var(--action-text); box-shadow:0 7px 18px color-mix(in srgb,var(--action-bg) 18%,transparent); }
.shell .btn.primary:hover:not(:disabled) { background:var(--action-hover); border-color:var(--action-hover); color:var(--action-text); }
.shell .btn.ghost { box-shadow:none; }
.shell .btn.sm { min-height:34px; }
.shell .btn.icon-only { min-width:40px; }
.shell :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid color-mix(in srgb,var(--lavender-ink) 52%,var(--brand)); outline-offset:3px; }
.shell .input,.shell input[type="search"],.shell select { border-color:color-mix(in srgb,var(--border-strong) 74%,var(--lavender-ink)); border-radius:12px; background:var(--bg-elev); box-shadow:0 2px 7px color-mix(in srgb,var(--brand) 4%,transparent); transition:border-color .14s; }
.shell .input:hover:not(:disabled),.shell input[type="search"]:hover:not(:disabled),.shell select:hover:not(:disabled) { border-color:color-mix(in srgb,var(--lavender-ink) 44%,var(--border-strong)); }
.shell .input:focus,.shell input[type="search"]:focus,.shell select:focus { border-color:var(--brand); background:var(--bg-elev); box-shadow:0 0 0 3px color-mix(in srgb,var(--pastel-lavender) 70%,transparent); }
.shell .field > label,.shell .field-label { font-weight:700; }
.shell .field .hint,.shell .hint { line-height:1.85; }
.shell .badge { border:1px solid color-mix(in srgb,currentColor 10%,transparent); font-weight:700; }
.shell .callout { border-radius:14px; box-shadow:0 5px 16px color-mix(in srgb,currentColor 5%,transparent); }
.shell .empty .ic { border-radius:18px; background:var(--pastel-lavender); color:var(--lavender-ink); }

/* Lists, tables, and tabs */
.shell .tabs { border-color:var(--workspace-outline); border-radius:15px; background:color-mix(in srgb,var(--bg-elev) 80%,var(--pastel-lavender)); box-shadow:none; padding:5px; }
.shell .tab { border-radius:10px; border-bottom:0; margin:0; transition:background .16s,color .16s,box-shadow .16s; }
.shell .tab:hover { background:color-mix(in srgb,var(--pastel-lavender) 42%,var(--bg-elev)); }
.shell .tab.on { background:var(--bg-elev); color:var(--brand-ink); box-shadow:0 3px 10px color-mix(in srgb,var(--brand) 8%,transparent); }
.shell .table { border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:17px; }
.shell .table th { background:color-mix(in srgb,var(--pastel-mint) 34%,var(--bg-elev)); color:var(--text-2); font-size:11px; letter-spacing:0; text-transform:none; }
.shell .table td { border-color:var(--workspace-outline); }
.shell .table tbody tr { transition:background .16s; }
.shell .table tbody tr:hover td { background:color-mix(in srgb,var(--pastel-lavender) 22%,var(--bg-elev)); }
.shell .list-item { transition:background .16s,padding .16s; }
.shell .list-item.click:hover { background:color-mix(in srgb,var(--pastel-mint) 34%,var(--bg-elev)); }
.shell .kpi { border-radius:17px; background:linear-gradient(145deg,color-mix(in srgb,var(--pastel-lavender) 22%,var(--bg-elev)),var(--bg-elev) 70%); }

/* Creation and editing workspaces */
.shell .creation-path { border-radius:22px; box-shadow:0 10px 28px color-mix(in srgb,var(--brand) 7%,transparent); transition:transform .17s cubic-bezier(.2,.7,.25,1); }
.shell .creation-path:hover:not(.unavailable) { transform:translateY(-2px); }
.shell .creation-path.unavailable:hover { transform:none; }
.shell .setup-form,.shell .shop-form,.shell .studio-main { border-radius:24px; }
.shell :is(.setup-pane-heading,.shop-pane-heading,.studio-pane-head) { border-color:var(--workspace-outline); background:linear-gradient(112deg,color-mix(in srgb,var(--pastel-mint) 46%,var(--bg-elev)),var(--bg-elev) 62%,color-mix(in srgb,var(--pastel-lavender) 32%,var(--bg-elev))); }
.shell .setup-steps,.shell .shop-steps { gap:10px; }
.shell :is(.setup-step,.shop-steps button,.studio-step) { border-radius:13px; transition:transform .18s,border-color .18s,background .18s,box-shadow .18s; }
.shell :is(.setup-step:hover:not(:disabled),.shop-steps button:hover:not(:disabled),.studio-step:hover:not(:disabled)) { transform:translateY(-1px); }
.shell :is(.setup-step.current,.shop-steps button.current,.studio-step.current) { box-shadow:0 6px 17px color-mix(in srgb,var(--brand) 10%,transparent); }
.shell .compact-record,.shell .shop-product,.shell .shop-method,.shell .studio-review-card { border-color:var(--workspace-outline); border-radius:16px; box-shadow:0 5px 18px color-mix(in srgb,var(--brand) 4%,transparent); }
.shell :is(.bot-setup,.shop-setup,.form-studio) :is(.editor-empty,.shop-product-empty) { border:1px solid color-mix(in srgb,var(--lavender-ink) 24%,var(--border)); border-style:solid; border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--pastel-lavender) 27%,var(--bg-elev)),color-mix(in srgb,var(--pastel-mint) 16%,var(--bg-elev))); box-shadow:0 5px 16px color-mix(in srgb,var(--brand) 5%,transparent); }
.shell :is(.bot-setup,.shop-setup,.form-studio) :is(.editor-add,.add-item,.shop-add-product) { border:1px solid color-mix(in srgb,var(--brand) 31%,var(--border)); border-style:solid; border-radius:12px; background:color-mix(in srgb,var(--pastel-mint) 38%,var(--bg-elev)); color:var(--brand-ink); transition:transform .15s cubic-bezier(.2,.7,.25,1),background-color .15s,border-color .15s; }
.shell :is(.bot-setup,.shop-setup,.form-studio) :is(.editor-add,.add-item,.shop-add-product):hover { transform:translateY(-1px); background:color-mix(in srgb,var(--pastel-mint) 58%,var(--bg-elev)); border-color:var(--brand); }
.shell .catalog-empty { border-color:color-mix(in srgb,var(--lavender-ink) 20%,var(--border)); border-radius:15px; background:color-mix(in srgb,var(--pastel-lavender) 18%,var(--bg-elev)); }
.shell .photo-drop { border-radius:15px; }
.shell .photo-drop.dragging { border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--pastel-mint) 55%,transparent); }

/* Build progress, assistant, overlays, and feedback */
.shell .agent-progress,.shell .build-current-state,.shell .job-banner { border-color:var(--workspace-outline); border-radius:17px; box-shadow:0 6px 20px color-mix(in srgb,var(--brand) 5%,transparent); }
.shell .agent-stage-event { border-radius:5px 14px 14px 5px; background:color-mix(in srgb,var(--pastel-mint) 28%,var(--bg-elev)); }
.shell .journey-step { border-radius:14px; }
.shell .assistant-popup { border-color:color-mix(in srgb,var(--lavender-ink) 22%,var(--border)); border-radius:23px; box-shadow:0 28px 86px color-mix(in srgb,var(--brand) 22%,transparent); }
.shell .assistant-popup-header { background:linear-gradient(112deg,color-mix(in srgb,var(--pastel-lavender) 70%,var(--bg-elev)),color-mix(in srgb,var(--pastel-mint) 42%,var(--bg-elev))); }
.shell .assistant-chat-intro,.shell .assistant-starters button { border-color:var(--workspace-outline); border-radius:14px; }
.shell .modal,.shell .drawer { border-color:var(--workspace-outline); border-radius:20px; }
.shell .modal-head { background:linear-gradient(110deg,color-mix(in srgb,var(--pastel-lavender) 33%,var(--bg-elev)),var(--bg-elev)); }
.shell .toast { border-color:var(--workspace-outline); border-radius:15px; box-shadow:0 18px 48px color-mix(in srgb,var(--brand) 15%,transparent); }

/* Small interaction cues use transforms and opacity instead of page-wide motion. */
.shell .nav-item { position:relative; }
.shell .nav-item::before { content:""; position:absolute; inset-inline-start:0; top:calc(50% - 9px); width:3px; height:18px; border-radius:99px; background:var(--brand); opacity:0; transform:scaleY(.45); transition:transform .2s cubic-bezier(.2,.7,.25,1),opacity .2s; pointer-events:none; }
.shell .nav-item.active::before { opacity:1; transform:scaleY(1); }
.shell .nav-item { transition:transform .15s cubic-bezier(.2,.7,.25,1),background-color .15s,color .15s; }
.shell .nav-item > .icon { transition:transform .15s cubic-bezier(.2,.7,.25,1),color .15s; }
.shell .tab { transition:background-color .14s,color .14s; }
.shell .creation-path,.shell .business-type-card,.shell .mybots-page .mybot-card,.shell .mybots-page .mybot-add { transition:transform .16s cubic-bezier(.2,.7,.25,1); }
.shell .business-type-card:hover { transform:translateY(-2px); }
.shell .mybots-page .mybot-card:hover,.shell .mybots-page .mybot-add:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.shell .mybots-page .mybots-stat { transition:none; }
.shell .mybots-page .mybots-stat:hover { transform:none; box-shadow:0 14px 34px color-mix(in srgb,var(--brand) 9%,transparent),inset 0 1px 0 color-mix(in srgb,var(--bg-elev) 78%,transparent); }
.shell .mybots-page .mybots-choice { transition:transform .16s cubic-bezier(.2,.7,.25,1),border-color .16s; }
.shell .mybots-page .mybots-choice:hover { box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 5%,transparent); }
.shell .field > label { transition:color .16s; }
.shell .field:focus-within > label { color:var(--brand-ink); }
.shell .table tbody td { transition:background-color .15s; }
.shell :is(.setup-step > span,.shop-steps button > span,.studio-step-number) { transition:transform .18s cubic-bezier(.2,.7,.25,1); }
.shell :is(.setup-step.current > span,.shop-steps button.current > span,.studio-step.current .studio-step-number) { transform:scale(1.07); }
.shell :is(.setup-type,.setup-method) { transition:transform .17s cubic-bezier(.2,.7,.25,1),border-color .17s,background-color .17s; }
.shell :is(.setup-type-icon,.setup-method > span:first-child,.creation-path-icon,.mybots-choice-icon) { transition:transform .2s cubic-bezier(.2,.7,.25,1); }
.shell :is(.creation-path-cta > svg,.mybots-choice > svg:last-child) { transition:transform .18s cubic-bezier(.2,.7,.25,1); }
.shell :is(.setup-disclosure,.record-more,.optional-records,.inventory-variants) > summary > svg:last-child { transition:transform .18s cubic-bezier(.2,.7,.25,1); }
.shell .assistant-launcher,.shell .build-next-step { transition:transform .17s cubic-bezier(.2,.7,.25,1); }
.shell .assistant-launcher:hover { box-shadow:0 9px 24px rgba(15,54,36,.22),inset 0 1px 0 rgba(255,255,255,.13); }
.shell .build-next-step:hover { box-shadow:none; }
.shell .assistant-launcher-icon > svg,.shell .assistant-starters button { transition:transform .18s cubic-bezier(.2,.7,.25,1); }
.shell .mybots-hero-art :is(.mybots-art-core,.mybots-art-chip) { transition:transform .32s cubic-bezier(.2,.7,.25,1); }
.shell :is(.creation-path:not(.unavailable),.mybots-choice,.setup-type,.setup-method,.assistant-launcher):active:not(:disabled) { transform:scale(.985); }
@media(hover:hover) {
  .shell .btn.primary { position:relative; overflow:hidden; isolation:isolate; }
  .shell .btn.primary::after { content:""; position:absolute; inset-block:-45%; left:-42%; width:24%; background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 28%,transparent),transparent); opacity:0; transform:translateX(0) skewX(-20deg); transition:transform .38s cubic-bezier(.2,.7,.25,1),opacity .12s; pointer-events:none; }
  .shell .btn.primary:is(:hover,:focus-visible):not(:disabled)::after { opacity:1; transform:translateX(560%) skewX(-20deg); }
}
@media(hover:hover) and (pointer:fine) {
  .shell .mybots-hero:hover .mybots-art-core { transform:translateY(-5px) rotate(-7deg); }
  .shell .mybots-hero:hover .art-chip-one { transform:translate(3px,-3px) rotate(4deg); }
  .shell .mybots-hero:hover .art-chip-two { transform:translate(-3px,3px) rotate(-4deg); }
  .shell .creation-path:not(.unavailable):is(:hover,:focus-visible) .creation-path-icon { transform:translateY(-3px) rotate(-5deg); }
  .shell .creation-path:not(.unavailable):is(:hover,:focus-visible) .creation-path-cta > svg,.shell .mybots-choice:is(:hover,:focus-visible) > svg:last-child { transform:translateX(-4px); }
  .shell :is(.setup-type,.setup-method):hover:not(:disabled) { transform:translateY(-2px); }
  .shell .setup-type:hover:not(:disabled) .setup-type-icon,.shell .setup-method:hover:not(:disabled) > span:first-child { transform:translateY(-2px) scale(1.06); }
  .shell .mybots-choice:is(:hover,:focus-visible) .mybots-choice-icon { transform:rotate(-5deg) scale(1.05); }
  .shell .assistant-launcher:hover .assistant-launcher-icon > svg { transform:rotate(-9deg) scale(1.08); }
  .shell .assistant-starters button:hover { transform:translateY(-2px); }
}
@media(max-width:900px) {
  .shell .sidebar { box-shadow:14px 0 42px color-mix(in srgb,var(--brand) 16%,transparent); }
  .shell .page { padding-top:22px; }
  .shell .store-home-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
  .shell .page { padding-inline:15px; padding-bottom:40px; }
  .shell .card-body { padding:17px; }
  .shell .card-head { padding:15px 17px; }
  .shell .setup-form,.shell .shop-form,.shell .studio-main { border-radius:19px; }
  .shell .table th,.shell .table td { padding-inline:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .shell .btn.primary::after { display:none; }
  .shell .btn,.shell .card.hover,.shell .nav-item,.shell .nav-item::before,.shell .nav-item > .icon,.shell .business-type-card,.shell .creation-path,.shell .mybots-page .mybot-card,.shell .mybots-page .mybot-add,.shell .mybots-page .mybots-choice,.shell .setup-step,.shell .setup-step > span,.shell .shop-steps button,.shell .shop-steps button > span,.shell .studio-step,.shell .studio-step-number,.shell .tab,.shell .table tbody td,.shell .list-item,.shell .input,.shell input[type="search"],.shell select,.shell .editor-add,.shell .add-item,.shell .shop-add-product,.shell .setup-type,.shell .setup-method,.shell .setup-type-icon,.shell .setup-method > span:first-child,.shell .creation-path-icon,.shell .mybots-choice-icon,.shell .creation-path-cta > svg,.shell .mybots-choice > svg:last-child,.shell .assistant-launcher,.shell .assistant-launcher-icon > svg,.shell .assistant-starters button,.shell .build-next-step,.shell .mybots-hero-art .mybots-art-core,.shell .mybots-hero-art .mybots-art-chip { transition:none !important; }
  .shell .btn:hover:not(:disabled),.shell .card.hover:hover,.shell .creation-path:hover,.shell .creation-path:active,.shell .nav-item:hover,.shell .nav-item:hover > .icon,.shell .business-type-card:hover,.shell .mybots-page .mybot-card:hover,.shell .mybots-page .mybot-add:hover,.shell .mybots-page .mybots-choice:hover,.shell .mybots-choice:active,.shell .setup-step:hover,.shell .setup-step.current > span,.shell .shop-steps button:hover,.shell .shop-steps button.current > span,.shell .studio-step:hover,.shell .studio-step.current .studio-step-number,.shell .editor-add:hover,.shell .add-item:hover,.shell .shop-add-product:hover,.shell .setup-type:hover,.shell .setup-type:active,.shell .setup-method:hover,.shell .setup-method:active,.shell .setup-type:hover .setup-type-icon,.shell .setup-method:hover > span:first-child,.shell .creation-path:hover .creation-path-icon,.shell .creation-path:hover .creation-path-cta > svg,.shell .mybots-choice:hover .mybots-choice-icon,.shell .mybots-choice:hover > svg:last-child,.shell .assistant-launcher:active,.shell .assistant-launcher:hover .assistant-launcher-icon > svg,.shell .assistant-starters button:hover,.shell .build-next-step:hover,.shell .mybots-hero:hover .mybots-art-core,.shell .mybots-hero:hover .mybots-art-chip { transform:none !important; }
}