:root { --ink:#173d35; --ink-2:#245248; --orange:#f06a2b; --cream:#fff4d9; --paper:#f7f6f1; --white:#fff; --muted:#6f7e79; --border:#e2e5df; --danger:#b33636; --shadow:0 18px 50px rgba(23,61,53,.10); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:#172520; 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:white; background:var(--orange); font-weight:900; letter-spacing:-1px; box-shadow:0 12px 24px rgba(240,106,43,.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%,#fbd9bd 0,transparent 28%),linear-gradient(145deg,#12352f,#265b50); }
.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-card h1 { margin:14px 0 8px; font-size:30px; }
.login-card label { display:grid; gap:8px; margin:28px 0 12px; font-weight:750; }
code { padding:2px 6px; border-radius:6px; background:#edf0eb; 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:#bed0ca; 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 { width:20px; color:#f8aa74; font-size:18px; text-align:center; }
.sidebar-footer { margin-top:auto; padding:16px 10px 4px; display:flex; align-items:center; gap:8px; color:#bfd2cb; 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:white; background:var(--orange); box-shadow:0 8px 18px rgba(240,106,43,.18); }
.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:#fde5d5; }.stat-card.green { background:#dfeee8; }.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(23,61,53,.04); }
.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:#dcebe6; background:rgba(255,255,255,.08); }
.api-card p { margin:12px 0 0; color:#bcd0ca; 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:#ffb582; }
.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:#edf0eb; }
.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(23,61,53,.04); }
.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:#263b35; 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:#80a89c; background:#eef6f2; box-shadow:0 0 0 2px rgba(90,143,128,.10); }.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:#f3f5f1; }.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(23,61,53,.04); }.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-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; }
.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 #d8ddd7; border-radius:10px; padding:10px 11px; color:#182a24; background:white; outline:none; }.filters select { width:210px; min-height:44px; }
input:focus,select:focus,textarea:focus { border-color:#5a8f80; box-shadow:0 0 0 3px rgba(90,143,128,.12); }
.table-wrap { padding:0; overflow:hidden; }.table-wrap table { width:100%; border-collapse:collapse; }.table-wrap th { padding:13px 18px; color:var(--muted); background:#fafaf7; 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:#edf2ef; 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(10,30,25,.55); 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:#f0f2ee; 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:#30413c; 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; }.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; }
.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 { width:100%; font-size:20px; }.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 { 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 { 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; }.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; } }