/* Presentation only. Business rules and generator canvases keep their own state. */
.workspace-layout {
  --brand-ink: #ffac61;
  --brand-title: #ffac61;
  --brand-green: #acd47e;
  --brand-green-soft: #26301c;
  --brand-orange-soft: #35200f;
  --brand-surface: #1d160c;
  --brand-field: #171108;
  --brand-rule: #503a23;
  --brand-shadow: 0 6px 18px #0003;
  --brand-ease: cubic-bezier(.2,.7,.25,1);
  accent-color: var(--green);
}
html[data-theme="light"] .workspace-layout {
  --brand-ink: #b04b09;
  --brand-title: #bf5109;
  --brand-green: #40671d;
  --brand-green-soft: #eaf0df;
  --brand-orange-soft: #fce5ce;
  --brand-surface: #fffdf8;
  --brand-field: #fffdf8;
  --brand-rule: #dccaad;
  --brand-shadow: 0 6px 18px #5334120d;
}
.workspace-layout ::selection { background: var(--brand-orange-soft); color: var(--brand-ink); }
.workspace-layout :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--brand-green);
  outline-offset: 3px;
}
.workspace-layout .main :where(input[type="text"],input[type="number"],input[type="search"],input[type="tel"],input[type="email"],input[type="date"],select,textarea) {
  min-height: 42px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--brand-field);
  color: var(--text);
  font: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.workspace-layout .main :where(input,select,textarea):focus-visible { border-color: var(--brand-green); }
.workspace-layout :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
.workspace-layout .main :where(input[type="range"],input[type="checkbox"],input[type="radio"]) { accent-color: var(--green); }
.workspace-layout .main :where(h2,h3,.card-title) { overflow-wrap: anywhere; }
.workspace-layout .main h2 {
  color: var(--brand-title) !important;
  font-family: 'Gatify Fredoka','Segoe UI',sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

/* A compact brand header keeps the products and tools in the first viewport. */
.workspace-layout .topbar {
  background: var(--card);
  border-bottom: 2px solid var(--orange);
  box-shadow: 0 3px 0 var(--brand-green-soft);
}
.workspace-layout .topbar-logo img { filter: drop-shadow(0 2px 2px #0002); }
.workspace-layout:not(.guest-mode) .topbar { height: 74px; min-height: 74px; }
.workspace-layout:not(.guest-mode) .topbar-logo { padding: 0; }
.workspace-layout .topbar-brand .brand-name {
  font-family: 'Gatify Fredoka','Segoe UI',sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--brand-title);
  line-height: 1.05;
}
.workspace-layout .topbar-brand .brand-slogan { font-size: .65rem; }
.workspace-layout .topbar-logo:hover .brand-name { text-shadow: none; }
.workspace-layout.guest-mode .topbar-logo img { width: 58px; height: 58px; }
.workspace-layout .nav-session { background: var(--brand-surface); border: 1px solid var(--brand-rule); border-radius: 7px; }
.workspace-layout.guest-mode .topbar .guest-inline-nav {
  gap: 9px;
  padding: 10px 0 3px;
  border-top-color: var(--brand-rule);
}
.workspace-layout.guest-mode .topbar .guest-inline-nav .nav-btn {
  min-height: 46px;
  padding: 10px 16px;
  margin-bottom: 0;
  border: 1px solid var(--brand-rule);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--text);
  box-shadow: 0 2px 0 var(--brand-rule);
  font-size: .85rem;
  font-weight: 700;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms var(--brand-ease);
}
.workspace-layout.guest-mode .topbar .guest-inline-nav .nav-btn .gatify-icon { color: var(--brand-green); }
.workspace-layout.guest-mode .topbar .guest-inline-nav .nav-btn.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #261a0b;
  box-shadow: 0 3px 0 #b44e0b;
}
.workspace-layout.guest-mode .topbar .guest-inline-nav .nav-btn.active .gatify-icon { color: inherit; }
.workspace-layout .guest-cart-float { background: var(--green); color: #fff; box-shadow: 0 2px 0 #345812; }
.workspace-layout .guest-cart-count { color: var(--brand-green); background: var(--brand-surface); font-weight: 800; }

.brand-catalog-heading { display: flex; align-items: center; gap: 15px; min-width: 0; }
.brand-catalog-heading > div { min-width: 0; }
.brand-catalog-heading img { flex: 0 0 72px; width: 72px; height: 72px; object-fit: contain; }
.brand-eyebrow { display: block; color: var(--brand-green); font-size: .7rem; font-weight: 800; margin-bottom: 4px; }
.workspace-layout.guest-mode .brand-catalog-heading h2 { font-size: 1.85rem !important; }
.workspace-layout .brand-catalog-toolbar { position: relative; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--brand-rule); }
.brand-catalog-toolbar::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 72px; height: 3px; background: var(--green); }
.brand-workshop-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 14px; }
.brand-workshop-heading h2 { margin: 0 !important; font-size: 1.6rem !important; }
.brand-workshop-heading img { width: 70px; height: 70px; object-fit: contain; }

/* Controls share color, depth and touch feedback without changing their actions. */
.workspace-layout .btn {
  border-radius: 7px;
  line-height: 1.3;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms var(--brand-ease);
}
body.workspace-layout .btn.btn-primary,
body.workspace-layout.guest-mode :is(#page-grid,#page-charms,#page-pixelart) .btn.btn-primary {
  background: var(--orange);
  color: #261a0b;
  box-shadow: 0 3px 0 #b44e0b;
  font-weight: 800;
}
.workspace-layout .btn-success { background: var(--green); color: #fff; box-shadow: 0 2px 0 #345812; }
.workspace-layout .btn-secondary { background: var(--brand-surface); border-color: var(--brand-rule); color: var(--text); }
.workspace-layout.guest-mode .btn { min-height: 44px; }
.workspace-layout :is(.btn,.nav-btn):disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.workspace-layout :is(.btn,.guest-inline-nav .nav-btn):not(:disabled):active { transform: translateY(2px); box-shadow: none; }
.workspace-layout .icon-search-btn { width: 44px; height: 44px; border-radius: 8px; background: var(--brand-surface); border-color: var(--brand-rule); flex-shrink: 0; }
.workspace-layout .icon-search-btn::before { border-color: var(--brand-ink); }
.workspace-layout .icon-search-btn::after { background: var(--brand-ink); }
.workspace-layout .quick-pricer-toggle { box-shadow: 0 3px 0 #b44e0b, var(--brand-shadow); color: #261a0b; }
.workspace-layout .guest-whatsapp-float { box-shadow: 0 3px 0 #116431, 0 5px 12px #0002; }
.workspace-layout .guest-whatsapp-float:active { transform: translateY(2px); box-shadow: none; }
.workspace-layout .quick-pricer-panel { border-top: 4px solid var(--green); border-radius: 8px; box-shadow: 0 12px 40px #0003; }
.workspace-layout .quick-pricer-result strong { color: var(--brand-ink); }

/* Product photography stays still and fully legible; movement belongs to its frame. */
.workspace-layout.guest-mode :is(.guest-product-card,.pixel-library-card) {
  background: var(--brand-surface);
  border-color: var(--brand-rule);
  border-radius: 8px;
  box-shadow: var(--brand-shadow);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--brand-ease);
}
.workspace-layout.guest-mode :is(.guest-product-card.top-seller,.pixel-library-card.top-seller) { border-color: var(--green); }
.workspace-layout.guest-mode .guest-product-card.expanded { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), var(--brand-shadow); }
.workspace-layout .guest-visual-body { padding: 15px 15px 10px; }
.workspace-layout .guest-visual-title { font-size: 1rem; font-weight: 750; line-height: 1.35; }
.workspace-layout .guest-product-quick-row { padding: 0 15px 15px; margin-top: auto; }
.workspace-layout .guest-visual-foot { align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.workspace-layout :is(.guest-product-price,.guest-visual-action,.catalog-price-list strong,.pixel-price strong,.charm-price strong,.ornament-pricebar strong,.pixel-stat strong,.gridorg-request-price) { color: var(--brand-ink); }
.workspace-layout .pixel-library-card { --orange-light: var(--brand-ink); }
.workspace-layout .gridorg-result-stats strong { color: var(--brand-ink); }
.workspace-layout .guest-product-price { font-size: 1.1rem; font-weight: 800; }
.workspace-layout .guest-visual-action { font-size: .75rem; font-weight: 650; }
.workspace-layout .guest-add-open-btn { min-width: 94px; text-transform: capitalize; }
.workspace-layout :is(.guest-top-badge,.pixel-library-rank) { border-radius: 5px; background: var(--green); box-shadow: 0 2px 5px #0002; padding: 6px 8px; }
.workspace-layout .guest-category-strip { padding-bottom: 7px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.workspace-layout .guest-category-strip button { min-height: 42px; border-radius: 6px; background: var(--brand-surface); color: var(--text); }
.workspace-layout .guest-category-strip button.active { background: var(--brand-green-soft); border-color: var(--green); color: var(--brand-green); box-shadow: inset 0 -2px var(--green); font-weight: 750; }
.workspace-layout .guest-view-toggle { background: var(--brand-surface); color: var(--brand-ink); border-radius: 6px; min-height: 36px; }
.workspace-layout .guest-product-options { background: var(--card); }
.workspace-layout .guest-product-card.visual-card .guest-product-options { padding: 15px; }
.workspace-layout .guest-custom-card { background: transparent; border: 1px solid var(--brand-rule); border-left: 4px solid var(--green); }
.workspace-layout :is(.guest-custom-card,.advanced-settings) > summary { color: var(--brand-ink); }
.workspace-layout .guest-custom-summary::after { color: var(--brand-green); border-color: var(--green); background: var(--brand-green-soft); border-radius: 6px; }

/* A quiet green accent also carries through the working area. */
.workspace-layout:not(.guest-mode) .topbar-menu { background: var(--card); border-right-color: var(--brand-rule); }
.workspace-layout .workspace-nav-label { display: flex; align-items: center; gap: 7px; font-size: .65rem; color: var(--brand-green); }
.workspace-nav-label::before { content: ''; flex: 0 0 3px; height: 11px; background: var(--green); border-radius: 1px; }
.workspace-layout .nav-menu-item { border: 1px solid transparent; transition: background-color 140ms ease, border-color 140ms ease; }
.workspace-layout .nav-menu-item .gatify-icon { color: var(--brand-green); }
.workspace-layout .nav-menu-item.active { color: var(--brand-ink); background: var(--brand-orange-soft); box-shadow: inset 3px 0 var(--orange); }
.workspace-layout .nav-menu-item.active .gatify-icon { color: var(--brand-ink); }
.workspace-layout .workspace-context { border-bottom-color: var(--brand-rule); }
.workspace-layout .home-stats { background: var(--brand-surface); border-top: 3px solid var(--orange); border-bottom-color: var(--brand-rule); }
.workspace-layout .workspace-stage { border-color: var(--brand-rule); }
.workspace-layout .workspace-stage > .gatify-icon:first-child { color: var(--brand-ink); width: 22px; height: 22px; }
.workspace-layout .workspace-stage:nth-child(even) > .gatify-icon:first-child { color: var(--brand-green); }
.workspace-layout :is(.workspace-order-row,.workspace-compact-row) { transition: background-color 140ms ease; }
.workspace-layout .workspace-order-number { color: var(--brand-ink); }
.workspace-layout .workspace-section-head h3 { border-left: 3px solid var(--green); padding-left: 10px; }
.workspace-layout :is(.workspace-empty,.empty-state) { color: var(--muted); }
.workspace-layout .table-wrap { border-radius: 6px; }
.workspace-layout th { color: var(--brand-ink); background: var(--brand-orange-soft); }
.workspace-layout tbody tr { transition: background-color 140ms ease; }
.workspace-layout .card-title { color: var(--brand-ink); }
.workspace-layout .card-title::before { background: var(--green); }
.workspace-layout :is(.modal,.modal-content,.auth-box) { border-radius: 8px; }
.workspace-layout .toast { border-radius: 8px; box-shadow: 0 8px 24px #0003; }

/* Generator tools retain exact canvas geometry and pointer behavior. */
.workspace-layout :is(.pixel-page-head,.gridorg-head,.charm-head,.ornament-head) { border-bottom: 1px solid var(--brand-rule); padding-bottom: 18px; margin-bottom: 20px; }
.workspace-layout :is(.gridorg-head,.charm-head,.ornament-head) h2 { font-size: 1.55rem; }
.workspace-layout .gatavo-generator-mascot { object-fit: contain; transform-origin: 50% 85%; }
.workspace-layout .gatavo-pixel-letter { color: var(--brand-ink); }
.workspace-layout .gatavo-pixel-letter:nth-child(3n) { color: var(--brand-green); }
.workspace-layout .pixel-route-tabs { gap: 7px; }
.workspace-layout .pixel-route-btn { min-height: 44px; border-radius: 6px; background: var(--brand-surface); color: var(--brand-ink); border: 1px solid var(--border); }
.workspace-layout .pixel-route-btn.active { background: var(--brand-orange-soft); border-color: var(--orange); box-shadow: inset 0 -3px var(--orange); }
.workspace-layout :is(.charm-font-btn,.charm-segmented button) { border: 2px solid var(--brand-rule); background: var(--brand-surface); transition: border-color 150ms ease, background-color 150ms ease; }
.workspace-layout :is(.charm-font-btn.active,.charm-segmented button.active) { color: var(--brand-green); background: var(--brand-green-soft); border-color: var(--green); }
.workspace-layout .charm-text-row input { min-height: 48px; padding: 11px 13px; font-size: 1.1rem; }
.workspace-layout :is(.charm-preview-stage,.pixel-preview-shell,.gridorg-preview-stage) { border-color: var(--brand-rule); background: var(--brand-surface); box-shadow: 0 3px 0 var(--brand-green-soft); }
.workspace-layout .charm-preview-stage::before { border-color: var(--border); }
.workspace-layout .gridorg-basket-item { background: var(--brand-surface); border-color: var(--brand-rule); }
.workspace-layout .gridorg-basket-mini i { border-color: var(--green); background: var(--brand-green-soft); }
.workspace-layout :is(.gridorg-mm-input,.charm-size-output) { background: var(--brand-field); }
.workspace-layout .gridorg-stepper button { color: var(--brand-ink); }
.workspace-layout :is(.pixel-price,.charm-price,.ornament-pricebar) { border-top: 2px solid var(--green); }
.workspace-layout .ornament-template { border-radius: 8px; }
.workspace-layout .ornament-template.active { border-color: var(--green); }
.workspace-layout .charm-head .badge { background: var(--brand-green-soft); border: 1px solid var(--green); color: var(--brand-green); border-radius: 5px; padding: 6px 9px; }

@media (hover:hover) and (pointer:fine) {
  .workspace-layout.guest-mode .topbar .guest-inline-nav .nav-btn:not(.active):hover { background: var(--brand-green-soft); border-color: var(--green); transform: translateY(-1px); }
  .workspace-layout .btn:not(:disabled):hover:not(:active) { transform: translateY(-1px); }
  body.workspace-layout .btn.btn-primary:hover,
  body.workspace-layout.guest-mode :is(#page-grid,#page-charms,#page-pixelart) .btn.btn-primary:hover { background: var(--orange-light); }
  .workspace-layout .btn-success:hover { background: #3f6b15; }
  .workspace-layout .btn-secondary:hover { border-color: var(--green); color: var(--brand-green); background: var(--brand-green-soft); }
  .workspace-layout.guest-mode :is(.guest-product-card,.pixel-library-card):hover { transform: translateY(-3px); box-shadow: 0 9px 22px #53341217; border-color: var(--green); }
  .workspace-layout :is(.workspace-stage,.workspace-order-row,.workspace-compact-row,.nav-menu-item:not(.active),tbody tr):hover { background: var(--brand-green-soft); }
  .workspace-layout .guest-category-strip button:not(.active):hover { border-color: var(--green); color: var(--brand-green); }
  .workspace-layout :is(.brand-catalog-heading,.gatavo-generator-heading):hover img { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion:no-preference) {
  .workspace-layout .page.active { animation: gatify-page-in 180ms ease-out; }
  .workspace-layout :is(.brand-catalog-heading img,.gatavo-generator-mascot,.brand-workshop-heading img) { transition: transform 220ms var(--brand-ease); }
  .workspace-layout .page.active :is(.brand-catalog-heading img,.gatavo-generator-mascot) { animation: gatify-hello 480ms var(--brand-ease); }
  .workspace-layout .brand-cart-added { animation: gatify-cart-pop 360ms var(--brand-ease); }
  .workspace-layout .page.active .gatavo-pixel-letter { animation: gatify-pixel-in 280ms var(--brand-ease) both; }
  .workspace-layout .gatavo-pixel-letter:nth-child(2n) { animation-delay: 35ms; }
  .workspace-layout .gatavo-pixel-letter:nth-child(3n) { animation-delay: 70ms; }
}
@keyframes gatify-page-in { from { opacity: .55; } to { opacity: 1; } }
@keyframes gatify-hello { 0% { transform: rotate(-7deg); } 55% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes gatify-cart-pop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.06); } }
@keyframes gatify-pixel-in { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:1000px) {
  .workspace-layout:not(.guest-mode) .topbar { height: 68px; min-height: 68px; }
}
@media (max-width:650px) {
  .workspace-layout.guest-mode .topbar-logo img { width: 42px; height: 42px; }
  .workspace-layout .topbar .topbar-brand .brand-name { font-size: 1.2rem; }
  .workspace-layout.guest-mode .topbar .guest-inline-nav { gap: 6px; padding-top: 8px; }
  .workspace-layout.guest-mode .topbar .guest-inline-nav .nav-btn { min-height: 44px; padding: 8px 5px; font-size: .76rem; line-height: 1.2; }
  .brand-catalog-heading { gap: 10px; }
  .brand-catalog-heading img { width: 52px; height: 52px; flex-basis: 52px; }
  .brand-eyebrow { font-size: .65rem; }
  .workspace-layout.guest-mode .brand-catalog-heading h2 { font-size: 1.4rem !important; }
  .workspace-layout .brand-catalog-toolbar { gap: 10px; padding-bottom: 14px; margin-bottom: 14px; }
  .workspace-layout.guest-mode .guest-catalog-grid.visual-view { gap: 12px; }
  .workspace-layout .guest-visual-body { padding: 11px 10px 8px; }
  .workspace-layout .guest-visual-title { font-size: .88rem; }
  .workspace-layout .guest-product-price { font-size: 1rem; }
  .workspace-layout .guest-product-quick-row { padding: 0 10px 11px; }
  .workspace-layout .guest-visual-foot { gap: 4px; }
  .workspace-layout :is(.guest-top-badge,.pixel-library-rank) { font-size: .64rem; }
  .workspace-layout .guest-add-open-btn { width: 100%; min-width: 0; }
  .workspace-layout :is(.gridorg-head,.charm-head,.ornament-head) h2 { font-size: 1.35rem; }
  .workspace-layout :is(.pixel-page-head,.gridorg-head,.charm-head,.ornament-head) { padding-bottom: 14px; }
  .brand-workshop-heading img { width: 56px; height: 56px; }
  .brand-workshop-heading h2 { font-size: 1.4rem !important; }
}
@media (prefers-reduced-motion:reduce) {
  .workspace-layout *, .workspace-layout *::before, .workspace-layout *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .workspace-layout :is(.btn,.nav-btn,.guest-product-card,.pixel-library-card):hover,
  .workspace-layout :is(.brand-catalog-heading,.gatavo-generator-heading):hover img { transform: none; }
}
@media (forced-colors:active) {
  .workspace-layout :is(.btn,.nav-btn,.nav-menu-item,.guest-product-card,.pixel-library-card) { border: 1px solid ButtonText; }
  .workspace-layout :is(.nav-btn,.nav-menu-item).active { outline: 2px solid Highlight; outline-offset: -3px; }
}