:root { --ink:#3b2416; --ink-2:#6b4423; --yellow:#f4c430; --orange:#8a5a00; --cream:#fff5d6; --paper:#f8f4ec; --white:#fff; --muted:#75675e; --border:#ded3c6; --danger:#b33636; --shadow:0 18px 50px rgba(59,36,22,.12); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:#251a13; background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.eyebrow { margin:0 0 6px; color:var(--orange); font-size:11px; font-weight:850; letter-spacing:1.3px; }
.muted { color:var(--muted); line-height:1.55; }
.brand-mark { display:grid; place-items:center; width:56px; height:56px; border-radius:18px; color:var(--ink); background:var(--yellow); font-weight:900; letter-spacing:-1px; box-shadow:0 12px 24px rgba(244,196,48,.24); }
.brand-mark.small { width:38px; height:38px; border-radius:12px; font-size:13px; box-shadow:none; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 70% 20%,rgba(244,196,48,.34) 0,transparent 30%),linear-gradient(145deg,#2d1b10,#6b4423); }
.login-card { width:min(430px,100%); padding:38px; border-radius:28px; background:var(--white); box-shadow:0 30px 90px rgba(0,0,0,.25); }
.login-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.language-toggle { min-width:46px; padding-inline:12px; }.login-card h1 { margin:14px 0 8px; font-size:30px; }
.login-fields { display:grid; gap:14px; margin:28px 0 12px; }.login-card label { display:grid; gap:8px; font-weight:750; }
code { padding:2px 6px; border-radius:6px; background:#eee7dc; font-size:.9em; }
.shell { min-height:100vh; display:grid; grid-template-columns:240px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 18px; display:flex; flex-direction:column; color:white; background:var(--ink); }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:0 8px 28px; font-size:18px; font-weight:900; }
nav { display:grid; gap:6px; }
.nav-item { border:0; border-radius:12px; padding:13px 14px; display:flex; align-items:center; gap:12px; color:#e8d7c7; background:transparent; text-align:left; font-weight:700; }
.nav-item:hover,.nav-item.active { color:white; background:rgba(255,255,255,.11); }
.nav-item > span:first-child { width:20px; color:var(--yellow); font-size:18px; text-align:center; }.nav-item .nav-label { width:auto; color:inherit; font-size:inherit; text-align:left; }
.sidebar-footer { margin-top:auto; padding:16px 10px 4px; display:flex; align-items:center; gap:8px; color:#e8d7c7; font-size:12px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#5edb90; box-shadow:0 0 0 4px rgba(94,219,144,.12); }
.link-button { padding:0; border:0; color:var(--orange); background:transparent; font-weight:800; }
.sidebar-footer .link-button { margin-left:auto; color:#fff; }
main { min-width:0; padding:0 42px 60px; }
.topbar { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--border); }
.topbar h1 { margin:0; font-size:29px; letter-spacing:-.6px; }
.top-actions,.button-row { display:flex; align-items:center; gap:10px; }
.sync-label { color:var(--muted); font-size:12px; }
.button { min-height:42px; padding:0 17px; border:1px solid transparent; border-radius:12px; font-weight:800; transition:.15s ease; }
.button:hover { transform:translateY(-1px); }
.button.primary { color:var(--ink); background:var(--yellow); box-shadow:0 8px 18px rgba(244,196,48,.22); }
.button.secondary { color:var(--ink); border-color:var(--border); background:white; }
.button.danger { color:var(--danger); border-color:#f0cece; background:#fff5f5; }
.button.full { width:100%; }
.view { padding-top:32px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.stat-card { min-height:120px; padding:24px; display:flex; align-items:center; gap:18px; border-radius:20px; }
.stat-card.orange { background:#fff0b8; }.stat-card.green { background:#ead8c8; }.stat-card.cream { background:var(--cream); }
.stat-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:white; background:var(--ink); font-size:20px; }
.stat-card strong { display:block; font-size:30px; line-height:1; }.stat-card div span { display:block; margin-top:7px; color:var(--muted); font-size:13px; }
.panel { margin-top:22px; padding:26px; border:1px solid var(--border); border-radius:20px; background:white; box-shadow:0 8px 30px rgba(59,36,22,.05); }
.overview-grid { display:grid; grid-template-columns:1.3fr .8fr; align-items:center; gap:42px; }
.panel h2 { margin:0; font-size:21px; }.panel .button-row { margin-top:22px; }
.api-card { padding:22px; border-radius:16px; color:white; background:linear-gradient(145deg,var(--ink),var(--ink-2)); }
.api-card code { display:block; padding:10px; margin-top:14px; overflow-wrap:anywhere; color:#fff4d6; background:rgba(255,255,255,.08); }
.api-card p { margin:12px 0 0; color:#e8d7c7; font-size:12px; line-height:1.5; }.api-card p code { display:inline; padding:2px 4px; margin:0; }
.api-badge { font-size:9px; font-weight:900; letter-spacing:1px; color:#ffd95a; }
.panel-heading,.section-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.recent-panel { margin-top:22px; }.card-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.recent-card { padding:14px; border:1px solid var(--border); border-radius:14px; display:flex; align-items:center; gap:12px; }
.thumb { width:48px; height:48px; border-radius:12px; object-fit:cover; background:#eee7dc; }
.thumb-fallback { display:grid; place-items:center; color:var(--ink); font-weight:900; }
.recent-card strong { display:block; font-size:13px; }.recent-card span { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.section-toolbar { margin-bottom:20px; }.section-toolbar p { margin:0; }
.store-grid { display:grid; grid-template-columns:repeat(3,minmax(240px,1fr)); gap:18px; }
.store-card { padding:22px; border:1px solid var(--border); border-radius:20px; background:white; box-shadow:0 8px 30px rgba(59,36,22,.05); }
.store-head { display:flex; align-items:center; gap:13px; }.store-logo { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:white; font-weight:900; }.store-head h3 { margin:0; font-size:17px; }.store-head p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.store-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; padding:15px 0; border-block:1px solid var(--border); }.store-meta span { color:var(--muted); font-size:10px; }.store-meta strong { display:block; margin-top:4px; color:#4a3324; font-size:12px; }
.card-actions { display:flex; gap:8px; }.card-actions .button { min-height:36px; flex:1; padding:0 10px; font-size:12px; }
.catalog-toolbar .search-field { margin-left:auto; }.catalog-tabs { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; }.catalog-tab { min-width:180px; padding:11px; border:1px solid var(--border); border-radius:15px; display:flex; align-items:center; gap:10px; color:var(--ink); background:white; text-align:left; }.catalog-tab:hover,.catalog-tab.active { border-color:#b98a45; background:#fff8df; box-shadow:0 0 0 2px rgba(244,196,48,.16); }.compact-logo { flex:0 0 auto; width:38px; height:38px; border-radius:11px; font-size:11px; }.catalog-tab-copy strong,.catalog-tab-copy small { display:block; }.catalog-tab-copy small { margin-top:3px; color:var(--muted); font-size:10px; }.catalog-summary { display:flex; align-items:center; justify-content:space-between; gap:24px; }.catalog-store-heading { display:flex; align-items:center; gap:14px; min-width:0; }.catalog-store-heading h2 { margin:0; }.catalog-store-heading .muted { margin:5px 0 0; font-size:12px; }.catalog-summary-actions { display:flex; align-items:center; gap:18px; }.catalog-summary-actions .button { display:inline-flex; align-items:center; text-decoration:none; }.catalog-metrics { display:flex; gap:8px; }.catalog-metric { min-width:92px; padding:9px 11px; border-radius:11px; background:#f4eee5; }.catalog-metric span,.catalog-metric strong { display:block; }.catalog-metric span { color:var(--muted); font-size:9px; text-transform:uppercase; }.catalog-metric strong { margin-top:3px; font-size:16px; }.catalog-product-grid { display:grid; grid-template-columns:repeat(4,minmax(190px,1fr)); gap:16px; margin-top:18px; }.catalog-product-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:white; box-shadow:0 8px 24px rgba(59,36,22,.05); }.catalog-product-image { width:100%; height:160px; border-radius:0; object-fit:cover; font-size:24px; }.catalog-product-body { padding:15px; }.catalog-product-meta { color:var(--orange); font-size:9px; font-weight:850; letter-spacing:.5px; text-transform:uppercase; }.catalog-product-body h3 { min-height:40px; margin:6px 0 4px; font-size:15px; line-height:1.3; }.catalog-product-body p { min-height:38px; margin:0; font-size:11px; }.catalog-pricing-form { margin-top:12px; padding:10px; border:1px solid var(--border); border-radius:12px; background:#fbf8f1; }.catalog-pricing-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; }.catalog-price-field { display:grid; gap:5px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }.catalog-price-field input { min-height:36px; padding:7px 9px; font-size:12px; }.catalog-purchase-toggle { min-height:36px; display:flex; align-items:center; gap:6px; color:var(--ink); font-size:10px; font-weight:750; white-space:nowrap; }.catalog-purchase-toggle input { width:auto; margin:0; }.catalog-price-save { width:100%; min-height:34px; margin-top:8px; padding:0 10px; font-size:10px; }.catalog-price-save:disabled { cursor:wait; opacity:.65; }.catalog-product-footer { min-height:41px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }.catalog-product-footer > strong { font-size:15px; }.catalog-product-footer .quote-price { font-size:12px; }.catalog-product-actions { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }.catalog-product-actions .link-button { font-size:10px; text-decoration:none; }
.catalog-product-toggles { display:grid; gap:2px; }.catalog-product-toggles .catalog-purchase-toggle { min-height:24px; line-height:1.2; white-space:normal; }.unpublished-product-card { border-style:dashed; background:#fbf8f1; }.unpublished-product-card .catalog-product-image { opacity:.68; filter:saturate(.55); }.product-visibility { margin-top:8px; color:#6b4423; background:#fff0b8; }
.filters { justify-content:flex-start; }.filters .button { margin-left:auto; }
.search-field { min-height:44px; width:min(420px,45vw); padding:0 14px; display:flex; align-items:center; gap:9px; border:1px solid var(--border); border-radius:12px; background:white; }.search-field input { width:100%; border:0; outline:0; }
select,input,textarea { width:100%; border:1px solid #ded3c6; border-radius:10px; padding:10px 11px; color:#251a13; background:white; outline:none; }.filters select { width:210px; min-height:44px; }
input[type="checkbox"] { accent-color:var(--ink); }
input:focus,select:focus,textarea:focus { border-color:#b98a45; box-shadow:0 0 0 3px rgba(244,196,48,.20); }
.table-wrap { padding:0; overflow:hidden; }.table-wrap table { width:100%; border-collapse:collapse; }.table-wrap th { padding:13px 18px; color:var(--muted); background:#fbf8f1; font-size:10px; text-align:left; letter-spacing:.5px; text-transform:uppercase; }.table-wrap td { padding:15px 18px; border-top:1px solid var(--border); font-size:13px; }.product-cell { display:flex; align-items:center; gap:12px; min-width:250px; }.product-cell strong { display:block; max-width:330px; }.product-cell span { display:block; margin-top:3px; color:var(--muted); font-size:10px; }.pill { display:inline-block; padding:5px 8px; border-radius:99px; background:#f4eee5; font-size:10px; font-weight:800; }.row-actions { white-space:nowrap; text-align:right; }.row-actions button { border:0; padding:7px; color:var(--ink); background:transparent; font-weight:800; }.row-actions .delete { color:var(--danger); }
.empty { padding:48px; color:var(--muted); text-align:center; }
.compact { margin-top:4px; font-size:10px; white-space:nowrap; }.status-select { min-width:150px; }.order-actions { display:flex; flex-wrap:wrap; gap:6px; min-width:190px; }.order-actions .button { min-height:34px; padding:0 10px; font-size:11px; }.payment-authorized { background:#fff0c7; }.payment-paid { color:#17663c; background:#dff2e6; }.payment-failed,.payment-cancelled,.payment-refunded { color:var(--danger); background:#fde6e6; }
dialog { width:min(680px,calc(100% - 32px)); max-height:calc(100vh - 40px); padding:0; border:0; border-radius:22px; box-shadow:var(--shadow); overflow:auto; }dialog::backdrop { background:rgba(45,27,16,.58); backdrop-filter:blur(3px); }.dialog-form { padding:26px; }.dialog-form.wide { width:100%; }.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; }.dialog-heading h2 { margin:0; font-size:23px; }.icon-button { width:38px; height:38px; border:0; border-radius:11px; color:var(--muted); background:#f4eee5; font-size:24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.form-grid label { display:grid; align-content:start; gap:7px; color:#4a3324; font-size:12px; font-weight:750; }.form-grid small { color:var(--muted); font-weight:400; }.span-2 { grid-column:1/-1; }.checks { display:flex; gap:24px; }.checks label { display:flex; grid-auto-flow:column; align-items:center; justify-content:start; }.checks input { width:auto; }.color-control { display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px; }.color-input { width:52px; height:44px; padding:4px; cursor:pointer; }.color-input::-webkit-color-swatch-wrapper { padding:0; }.color-input::-webkit-color-swatch { border:0; border-radius:6px; }.color-input::-moz-color-swatch { border:0; border-radius:6px; }.color-value { min-height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; letter-spacing:.5px; transition:background-color .15s,color .15s; }.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }.form-error { min-height:18px; margin:10px 0 0; color:var(--danger); font-size:12px; }
.product-image-editor { display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:8px 16px; padding:14px; border:1px solid var(--border); border-radius:14px; background:#fbf8f1; }.product-image-upload input { padding:7px; background:white; }.product-image-upload input::file-selector-button { margin-right:10px; padding:8px 11px; border:0; border-radius:8px; color:var(--ink); background:var(--yellow); font-weight:800; cursor:pointer; }.product-image-preview { grid-column:2; grid-row:1/3; width:150px; height:112px; border:1px dashed #bda890; border-radius:12px; display:grid; place-items:center; overflow:hidden; color:var(--muted); background:white; font-size:11px; }.product-image-preview img { width:100%; height:100%; object-fit:cover; }.product-image-editor > small { grid-column:1; }
.toast { position:fixed; right:24px; bottom:24px; padding:13px 18px; border-radius:12px; color:white; background:var(--ink); box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(10px); transition:.2s; }.toast.visible { opacity:1; transform:none; }
@media (max-width:1200px) { .catalog-product-grid { grid-template-columns:repeat(3,minmax(190px,1fr)); }.catalog-summary { align-items:flex-start; flex-direction:column; }.catalog-summary-actions { width:100%; justify-content:space-between; } }
@media (max-width:1000px) { .shell { grid-template-columns:78px 1fr; }.sidebar-brand span:last-child,.nav-item:not(.active)::after,.nav-item { font-size:0; }.nav-item > span:first-child { width:100%; font-size:20px; }.nav-item .nav-label { display:none; }.sidebar-footer span:not(.status-dot),.sidebar-footer .link-button { display:none; }.stats,.store-grid { grid-template-columns:repeat(2,1fr); }.card-list { grid-template-columns:1fr; }.catalog-product-grid { grid-template-columns:repeat(2,minmax(180px,1fr)); } }
@media (max-width:720px) { .shell { display:block; }.sidebar { position:fixed; z-index:5; left:0; right:0; top:auto; bottom:0; width:auto; height:68px; padding:8px 14px; flex-direction:row; }.sidebar-brand,.sidebar-footer { display:none; }.sidebar nav { width:100%; grid-template-columns:repeat(5,1fr); }.nav-item { display:grid; place-items:center; padding:8px; font-size:0; }.nav-item > span:first-child { font-size:21px; }.nav-item.active { background:rgba(255,255,255,.12); } main { padding:0 18px 100px; }.topbar { align-items:flex-start; padding:22px 0; min-height:0; }.top-actions { flex-wrap:wrap; justify-content:flex-end; }.sync-label { display:none; }.top-actions .secondary:not(.language-toggle) { display:none; }.stats { grid-template-columns:1fr; }.overview-grid { grid-template-columns:1fr; gap:24px; }.store-grid { grid-template-columns:1fr; }.filters,.catalog-toolbar { align-items:stretch; flex-wrap:wrap; }.search-field,.filters select,.catalog-toolbar .search-field { width:100%; margin-left:0; }.filters .button { width:100%; margin-left:0; }.table-wrap { overflow-x:auto; }.form-grid { grid-template-columns:1fr; }.span-2 { grid-column:auto; }.product-image-editor { grid-template-columns:1fr; }.product-image-preview,.product-image-editor > small { grid-column:1; grid-row:auto; }.product-image-preview { width:100%; height:180px; }.login-card { padding:28px 22px; }.catalog-product-grid { grid-template-columns:1fr; }.catalog-summary-actions { align-items:stretch; flex-direction:column; }.catalog-metrics { width:100%; }.catalog-metric { flex:1; min-width:0; }.catalog-summary-actions .button { text-align:center; } }
.catalog-category-section { margin-top:24px; }.catalog-category-section > h3 { margin:0 0 12px; font-size:17px; }.catalog-category-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:8px; }.catalog-category-button { min-width:0; min-height:64px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; color:var(--ink); background:white; text-align:left; }.catalog-category-button strong,.catalog-category-button span { display:block; }.catalog-category-button strong { font-size:12px; overflow-wrap:anywhere; }.catalog-category-button span { margin-top:4px; font-size:10px; }.catalog-category-button.active,.catalog-category-button:hover { border-color:#b98a45; background:var(--cream); }.catalog-category-button:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }.catalog-product-groups { display:grid; gap:24px; margin-top:18px; }.catalog-group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:2px solid var(--yellow); }.catalog-group-heading h3 { margin:0; color:var(--ink); font-size:19px; }.catalog-group-heading > span { font-size:12px; white-space:nowrap; }.catalog-product-group > .catalog-product-grid { margin-top:14px; }.catalog-grouping-hint { margin:12px 0 0; font-size:12px; }
.catalog-group-controls { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-top:18px; }.catalog-group-controls label { display:grid; gap:6px; max-width:100%; }.catalog-group-controls label > span { font-size:12px; font-weight:750; }.catalog-group-controls select { min-width:250px; max-width:100%; }.catalog-load-more { display:block; margin:20px auto 0; }
.catalog-variant-list { display:grid; gap:9px; margin-top:14px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--cream); }.catalog-variant-list > strong { color:var(--ink); font-size:12px; }.catalog-variant-list > small { font-size:10px; }.catalog-variant-form { display:grid; gap:6px; padding:10px; border:1px solid var(--border); border-radius:10px; background:white; }.catalog-variant-form > strong { font-size:12px; }.catalog-variant-form > label:not(.catalog-purchase-toggle) { display:grid; gap:4px; font-size:10px; }.catalog-variant-form input[type="number"] { min-height:36px; padding:6px 9px; }.catalog-variant-form .button { min-height:34px; font-size:10px; }
@media (max-width:720px) { .catalog-group-controls { align-items:stretch; flex-direction:column; }.catalog-group-controls select { width:100%; min-width:0; } }