:root {
  --bg: #0a0c10;
  --surface: #11141a;
  --surface-2: #171b22;
  --surface-3: #1d222b;
  --line: #292f39;
  --line-soft: #20252e;
  --text: #f5f6f8;
  --muted: #9299a6;
  --orange: #ff6b35;
  --orange-bright: #ff8255;
  --violet: #8f7cff;
  --cyan: #51c9dd;
  --green: #4bd29b;
  --red: #ff6175;
  --yellow: #f7c95c;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled, .is-disabled { cursor: not-allowed; }

.eyebrow { display: block; color: var(--orange-bright); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.mono { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: -.02em; }
.status-good { color: var(--green) !important; }
.status-bad { color: var(--red) !important; }
.is-hidden { display: none !important; }
.full-width { width: 100%; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 18px 20px; display: flex; flex-direction: column; border-right: 1px solid var(--line-soft); background: #0d1015; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 0 10px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 13px; background: linear-gradient(135deg, var(--orange), #ff3d23); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: -.05em; box-shadow: 0 9px 28px rgba(255, 82, 40, .25); }
.brand-copy { display: grid; line-height: 1; gap: 5px; }
.brand-copy strong { font-size: 15px; letter-spacing: .1em; }
.brand-copy small { color: var(--muted); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.primary-nav { display: grid; gap: 5px; margin-top: 54px; }
.nav-item { position: relative; min-height: 46px; padding: 0 11px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 12px; color: #a9b0bb; font-size: 13px; font-weight: 650; transition: .2s ease; }
.nav-item:hover:not(.is-disabled) { color: var(--text); background: var(--surface-2); }
.nav-item.is-active { color: #fff; background: rgba(255, 107, 53, .1); border-color: rgba(255, 107, 53, .2); }
.nav-item.is-active::before { content: ""; position: absolute; left: -19px; height: 22px; width: 3px; border-radius: 0 4px 4px 0; background: var(--orange); }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; font-size: 17px; color: var(--orange-bright); }
.nav-item.is-disabled { opacity: .48; }
.soon { margin-left: auto; padding: 3px 6px; border-radius: 5px; background: var(--surface-3); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-footer { margin-top: auto; display: grid; gap: 12px; }
.role-card { padding: 12px; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--surface); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #292e39; color: var(--orange-bright); font-weight: 800; }
.role-card > span:last-child { min-width: 0; display: grid; gap: 3px; }
.role-card strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.role-card small { color: var(--muted); font-size: 10px; }

.app-main { min-width: 0; }
.topbar { height: 72px; padding: 0 clamp(20px, 3vw, 52px); display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--line-soft); background: rgba(10, 12, 16, .9); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 15; }
.topbar-title { font-size: 13px; font-weight: 750; letter-spacing: .01em; }
.market-widgets { margin-left: auto; display: flex; gap: 8px; }
.market-pill { min-width: 130px; padding: 8px 11px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface); }
.market-pill span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.market-pill strong { grid-row: span 2; align-self: center; font-size: 12px; }
.market-pill small { color: #666e7a; font-size: 9px; }
.menu-button { display: none; border: 0; color: #fff; background: transparent; font-size: 22px; }
.content { width: min(1660px, 100%); margin: 0 auto; padding: 38px clamp(20px, 3vw, 52px) 80px; }

.catalog-hero, .admin-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; padding: clamp(26px, 4vw, 52px); overflow: hidden; position: relative; border: 1px solid var(--line-soft); border-radius: 24px; background: radial-gradient(circle at 78% 15%, rgba(255, 107, 53, .15), transparent 28%), linear-gradient(135deg, #141820, #0f1218); box-shadow: var(--shadow); }
.catalog-hero::after { content: "SW"; position: absolute; right: 4%; top: -43%; color: rgba(255,255,255,.018); font-size: 280px; font-weight: 950; letter-spacing: -.12em; pointer-events: none; }
.catalog-hero h1, .admin-hero h1 { margin: 14px 0 12px; font-size: clamp(34px, 4.3vw, 68px); line-height: .98; letter-spacing: -.055em; }
.catalog-hero h1 em, .login-story h1 em { color: var(--orange-bright); font-style: normal; }
.catalog-hero p, .admin-hero p { margin: 0; color: var(--muted); font-size: 14px; }
.hero-stats { z-index: 1; display: flex; gap: 10px; }
.hero-stats > div { min-width: 132px; padding: 18px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: rgba(255,255,255,.035); backdrop-filter: blur(8px); }
.hero-stats strong { display: block; font-size: 26px; letter-spacing: -.04em; }
.hero-stats span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.catalog-search { min-height: 74px; margin-top: 16px; padding: 10px 10px 10px 19px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: 0 12px 35px rgba(0,0,0,.2); }
.catalog-search input[type="text"], .catalog-search > input:not([type]) { min-width: 0; flex: 1; padding: 13px 2px; border: 0; outline: none; color: #fff; background: transparent; font-size: 15px; }
.catalog-search input::placeholder { color: #69717e; }
.search-icon { color: var(--orange-bright); font-size: 25px; }
.check-control { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.check-control input { width: 16px; height: 16px; accent-color: var(--orange); }
.clear-search { color: var(--orange-bright); font-size: 11px; }
.primary-button, .ghost-button { min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; font-size: 12px; font-weight: 750; transition: .2s ease; }
.primary-button { border: 1px solid var(--orange); color: #fff; background: linear-gradient(135deg, var(--orange), #f34e2a); box-shadow: 0 8px 22px rgba(255, 86, 42, .18); }
.primary-button:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(135deg, var(--orange-bright), var(--orange)); }
.primary-button:disabled { opacity: .5; }
.ghost-button { border: 1px solid var(--line); color: #bec4ce; background: var(--surface-2); }
.ghost-button:hover:not(:disabled) { color: #fff; border-color: #3b4350; }
.text-button { border: 0; color: var(--muted); background: transparent; font-size: 11px; }

.section-block { margin-top: 42px; }
.section-heading { margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 7px 0 0; font-size: 23px; letter-spacing: -.035em; }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.category-card { min-height: 188px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); transition: .2s ease; }
.category-card:hover { transform: translateY(-2px); border-color: #363d48; background: var(--surface-2); }
.category-glyph { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: #272d36; font-size: 11px; font-weight: 900; letter-spacing: -.03em; }
.accent-orange .category-glyph { background: rgba(255,107,53,.16); color: var(--orange-bright); }
.accent-violet .category-glyph { background: rgba(143,124,255,.16); color: var(--violet); }
.accent-cyan .category-glyph { background: rgba(81,201,221,.14); color: var(--cyan); }
.accent-green .category-glyph { background: rgba(75,210,155,.14); color: var(--green); }
.category-card h3 { margin: 20px 0 6px; font-size: 15px; line-height: 1.25; }
.category-card p { min-height: 34px; margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.category-card small { color: #646c78; font-size: 9px; }

.view-switch { padding: 3px; display: flex; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface); }
.view-switch button { padding: 7px 10px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; }
.view-switch button.is-active { color: #fff; background: var(--surface-3); }
.products-table, .supplier-table, .transit-table { overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.product-row { min-height: 82px; padding: 11px 15px; display: grid; grid-template-columns: minmax(250px, 2fr) minmax(110px, .8fr) minmax(110px, .8fr) minmax(120px, .8fr) minmax(120px, 1fr) minmax(85px, .6fr) 24px; gap: 15px; align-items: center; border-top: 1px solid var(--line-soft); transition: .18s ease; }
.product-row:not(.product-head):hover { background: var(--surface-2); }
.product-row > span { min-width: 0; color: #c4c9d1; font-size: 11px; }
.product-row > span > strong { display: block; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; }
.product-row > span > small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.product-head { min-height: 42px; border-top: 0; color: #6d7581; background: #0e1116; }
.product-head span { color: #747c88; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.product-identity { display: flex; align-items: center; gap: 11px; }
.product-thumb { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: 12px; color: var(--orange-bright); background: radial-gradient(circle at 30% 20%, #2c333d, #181c23); font-size: 11px; font-weight: 900; }
.stock-badge { width: fit-content; padding: 5px 8px; display: inline-flex; border-radius: 7px; font-size: 9px; font-weight: 750; }
.stock-badge.in-stock { color: var(--green); background: rgba(75,210,155,.1); }
.stock-badge.out-stock { color: #818895; background: #222730; }
.row-arrow { color: var(--orange-bright) !important; font-size: 16px !important; }
.products-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.product-tile { padding: 15px; min-height: 315px; display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); transition: .2s ease; }
.product-tile:hover { transform: translateY(-2px); border-color: #3a424e; }
.tile-visual { height: 130px; padding: 12px; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 13px; background: radial-gradient(circle, #252b34, #14171d 70%); }
.tile-visual > span { color: var(--orange-bright); font-size: 28px; font-weight: 900; }
.tile-visual button { position: absolute; right: 10px; top: 10px; border: 0; color: #777f8b; background: transparent; font-size: 20px; }
.tile-brand { margin-top: 17px; color: var(--orange-bright); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-tile h3 { margin: 7px 0 5px; font-size: 13px; line-height: 1.35; }
.product-tile p { margin: 0; color: var(--muted); font-size: 9px; }
.tile-price { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.tile-price small { color: var(--muted); font-size: 9px; }
.tile-price strong { display: block; margin-top: 2px; font-size: 17px; }
.empty-state { min-height: 300px; padding: 40px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed #343a45; border-radius: var(--radius); background: var(--surface); }
.empty-state > span { color: var(--orange); font-size: 34px; font-weight: 900; }
.empty-state h3, .empty-state h1 { margin: 15px 0 5px; }
.empty-state p { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.empty-state.standalone { min-height: 60vh; }

.breadcrumbs { margin-bottom: 18px; display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 10px; }
.breadcrumbs a { color: var(--orange-bright); }
.product-hero-card { padding: 24px; display: grid; grid-template-columns: minmax(340px, .85fr) minmax(450px, 1.25fr); gap: 38px; border: 1px solid var(--line-soft); border-radius: 23px; background: var(--surface); }
.product-gallery { display: grid; grid-template-rows: minmax(340px, 1fr) auto; gap: 10px; }
.main-product-image { display: grid; place-items: center; align-content: center; gap: 14px; border-radius: 17px; background: radial-gradient(circle, #272e38, #101319 70%); }
.main-product-image span { color: var(--orange-bright); font-size: 64px; font-weight: 950; letter-spacing: -.08em; }
.main-product-image small { color: #69717d; font-size: 10px; }
.gallery-strip { display: flex; gap: 8px; }
.gallery-placeholder { width: 62px; height: 54px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-2); font-size: 9px; }
.gallery-placeholder.is-active { border-color: var(--orange); color: var(--orange-bright); }
.product-summary { padding: 16px 12px 12px 0; }
.product-tags { display: flex; gap: 7px; }
.product-tags span, .info-chip { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface-2); font-size: 9px; }
.product-tags span:first-child { color: var(--orange-bright); border-color: rgba(255,107,53,.24); background: rgba(255,107,53,.07); }
.product-summary h1 { margin: 22px 0 30px; font-size: clamp(28px, 3vw, 47px); line-height: 1.08; letter-spacing: -.045em; }
.product-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-soft); }
.product-meta > div { padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.product-meta > div:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--line-soft); }
.product-meta > div:nth-child(even) { padding-left: 18px; }
.product-meta dt { color: var(--muted); font-size: 9px; }
.product-meta dd { margin: 5px 0 0; font-size: 12px; font-weight: 650; }
.best-offer-panel { margin-top: 24px; padding: 19px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid rgba(75,210,155,.18); border-radius: 14px; background: rgba(75,210,155,.055); }
.best-offer-panel > div { display: grid; gap: 4px; }
.best-offer-panel span { color: var(--muted); font-size: 9px; }
.best-offer-panel strong { color: #fff; font-size: 27px; letter-spacing: -.04em; }
.best-offer-panel small { color: #7e8793; font-size: 9px; }
.best-offer-panel.no-offer { border-color: var(--line); background: var(--surface-2); }
.product-actions { margin-top: 14px; display: flex; gap: 9px; }

.supplier-row { min-height: 84px; padding: 12px 16px; display: grid; grid-template-columns: 1.2fr .85fr .7fr 1.4fr .9fr .9fr; gap: 16px; align-items: center; border-top: 1px solid var(--line-soft); }
.supplier-row.is-best { background: linear-gradient(90deg, rgba(75,210,155,.07), transparent); box-shadow: inset 3px 0 var(--green); }
.supplier-row > span { min-width: 0; color: #c6cbd3; font-size: 11px; }
.supplier-row strong { display: block; color: #fff; font-size: 12px; }
.supplier-row small { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.35; }
.supplier-head, .transit-head { min-height: 42px !important; border-top: 0 !important; background: #0e1116; }
.supplier-head span, .transit-head span { color: #737b87; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.transit-label { color: var(--yellow); }
.info-chip.warning { color: var(--yellow); border-color: rgba(247,201,92,.2); background: rgba(247,201,92,.06); }
.transit-row { min-height: 76px; padding: 12px 16px; display: grid; grid-template-columns: 1.2fr 1fr .7fr 1fr 1.2fr; gap: 16px; align-items: center; border-top: 1px solid var(--line-soft); }
.transit-row > span { color: #c6cbd3; font-size: 11px; }
.transit-row strong { display: block; font-size: 12px; }
.transit-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.approval-badge { padding: 6px 8px; display: inline-flex; border-radius: 7px; color: var(--yellow); background: rgba(247,201,92,.08); font-size: 9px; }
.empty-inline { padding: 30px; color: var(--muted); text-align: center; font-size: 11px; }
.details-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; }
.details-grid article { padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.details-grid h3 { margin: 0 0 13px; font-size: 14px; }
.details-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.details-grid dl { margin: 0; }
.details-grid dl div { padding: 10px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line-soft); }
.details-grid dl div:first-child { border-top: 0; }
.details-grid dt { color: var(--muted); font-size: 10px; }
.details-grid dd { margin: 0; font-size: 10px; }

.admin-hero { align-items: center; }
.admin-hero h1 { font-size: clamp(32px, 3.4vw, 52px); }
.owner-shield { z-index: 1; padding: 11px 14px; border: 1px solid rgba(255,107,53,.23); border-radius: 11px; color: var(--orange-bright); background: rgba(255,107,53,.08); font-size: 10px; font-weight: 750; }
.admin-metrics { margin-top: 13px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.admin-metrics article { padding: 20px; display: grid; border: 1px solid var(--line-soft); border-radius: 15px; background: var(--surface); }
.admin-metrics span { color: var(--muted); font-size: 9px; }
.admin-metrics strong { margin: 8px 0 3px; font-size: 27px; }
.admin-metrics small { color: #656d79; font-size: 9px; }
.admin-supplier-list { overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.admin-supplier-list article { min-height: 78px; padding: 12px 15px; display: grid; grid-template-columns: 44px minmax(220px, 1.5fr) 10px minmax(170px, .7fr) auto; gap: 13px; align-items: center; border-top: 1px solid var(--line-soft); }
.admin-supplier-list article:first-child { border-top: 0; }
.supplier-logo { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--orange-bright); background: #282e37; font-size: 9px; font-weight: 900; }
.admin-supplier-list strong { display: block; font-size: 12px; }
.admin-supplier-list small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-dot.is-ok { background: var(--green); box-shadow: 0 0 10px rgba(75,210,155,.55); }
.status-dot.is-error { background: var(--red); }
.sync-info { text-align: right; }
.admin-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.admin-module-grid article { min-height: 180px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.module-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--orange-bright); background: rgba(255,107,53,.1); font-size: 9px; font-weight: 900; }
.admin-module-grid h3 { margin: 16px 0 7px; font-size: 14px; }
.admin-module-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.module-state { width: fit-content; margin-top: auto; padding-top: 17px; color: #68717d; font-size: 9px; }

.login-page { min-height: 100vh; overflow: hidden; background: #090b0f; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1.12fr .88fr; position: relative; z-index: 1; }
.login-story { padding: clamp(32px, 5vw, 78px); display: flex; flex-direction: column; position: relative; background: radial-gradient(circle at 68% 36%, rgba(255,107,53,.12), transparent 28%), linear-gradient(145deg, #11151c, #090b0f 76%); }
.login-story::after { content: "S"; position: absolute; right: -3%; bottom: -31%; color: rgba(255,255,255,.015); font-size: min(75vw, 850px); font-weight: 950; line-height: 1; pointer-events: none; }
.brand-large { padding: 0; }
.brand-large .brand-mark { width: 50px; height: 50px; border-radius: 15px; }
.story-copy { max-width: 760px; margin: auto 0; }
.login-story h1 { margin: 18px 0 22px; font-size: clamp(50px, 6.2vw, 104px); line-height: .9; letter-spacing: -.07em; }
.login-story p { max-width: 590px; margin: 0; color: #a0a8b4; font-size: clamp(14px, 1.25vw, 19px); line-height: 1.6; }
.story-features { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 9px; }
.story-features span { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; color: #aeb5c0; background: rgba(255,255,255,.025); font-size: 10px; }
.login-note { z-index: 1; color: #505863; font-size: 9px; }
.login-panel { padding: 28px; display: grid; place-items: center; background: #0c0f14; }
.login-card { width: min(440px, 100%); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.login-card h2 { margin: 10px 0 7px; font-size: 28px; letter-spacing: -.04em; }
.login-card > p { margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.field-label { display: block; margin: 16px 0 7px; color: #b1b7c0; font-size: 10px; font-weight: 700; }
.text-field { width: 100%; height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: #fff; background: #0e1116; transition: .2s ease; }
.text-field:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,53,.08); }
.password-field { position: relative; }
.password-field .text-field { padding-right: 82px; }
.password-field button { position: absolute; right: 8px; top: 8px; height: 32px; border: 0; color: var(--muted); background: transparent; font-size: 9px; }
.login-button { width: 100%; margin-top: 23px; justify-content: space-between; height: 48px; padding: 0 17px; }
.help-copy { display: block; margin-top: 17px; color: #656d79; text-align: center; font-size: 9px; }
.form-error { margin-bottom: 17px; padding: 10px 12px; border: 1px solid rgba(255,97,117,.22); border-radius: 9px; color: #ff99a6; background: rgba(255,97,117,.07); font-size: 10px; }
.mobile-login-brand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; }
.mobile-login-brand .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
.mobile-login-brand strong { font-size: 13px; }
.login-ambient { position: fixed; border-radius: 50%; filter: blur(90px); opacity: .18; }
.ambient-one { width: 340px; height: 340px; right: -120px; top: -80px; background: var(--orange); }
.ambient-two { width: 260px; height: 260px; left: 30%; bottom: -130px; background: var(--violet); }

@media (max-width: 1250px) {
  .category-grid, .products-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-row { grid-template-columns: minmax(240px, 2fr) minmax(100px, .8fr) minmax(105px, .8fr) minmax(110px, .8fr) minmax(90px, .7fr) 24px; }
  .product-row > span:nth-child(5), .product-head > span:nth-child(5) { display: none; }
  .supplier-row { grid-template-columns: 1.1fr .75fr .65fr 1.2fr .8fr; }
  .supplier-row > span:nth-child(6), .supplier-head > span:nth-child(6) { display: none; }
}

@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 270px; transition: transform .2s ease; box-shadow: var(--shadow); }
  .sidebar.is-open { transform: translateX(0); }
  .menu-button { display: block; }
  .catalog-hero { align-items: flex-start; flex-direction: column; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products-table { overflow-x: auto; }
  .product-row { min-width: 930px; }
  .product-hero-card { grid-template-columns: 1fr; }
  .product-summary { padding: 5px; }
  .supplier-table, .transit-table { overflow-x: auto; }
  .supplier-row { min-width: 950px; grid-template-columns: 1.1fr .75fr .65fr 1.2fr .8fr .8fr; }
  .supplier-row > span:nth-child(6), .supplier-head > span:nth-child(6) { display: block; }
  .transit-row { min-width: 850px; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-layout { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .mobile-login-brand { display: flex; }
}

@media (max-width: 650px) {
  .topbar { height: 62px; }
  .topbar-title { display: none; }
  .content { padding-top: 20px; }
  .hide-mobile { display: none; }
  .market-pill { min-width: 120px; }
  .catalog-hero, .admin-hero { padding: 25px 20px; border-radius: 17px; }
  .catalog-hero h1 { font-size: 36px; }
  .hero-stats { width: 100%; }
  .hero-stats > div { min-width: 0; flex: 1; }
  .catalog-search { align-items: stretch; flex-wrap: wrap; }
  .catalog-search input[type="text"], .catalog-search > input:not([type]) { width: calc(100% - 40px); flex: auto; }
  .catalog-search .primary-button { margin-left: auto; }
  .category-grid, .products-tiles, .details-grid, .admin-module-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 170px; }
  .section-heading { align-items: flex-start; }
  .info-chip { display: none; }
  .product-hero-card { padding: 14px; gap: 20px; }
  .product-gallery { grid-template-rows: 260px auto; }
  .product-meta { grid-template-columns: 1fr; }
  .product-meta > div:nth-child(odd), .product-meta > div:nth-child(even) { padding: 13px 0; border-right: 0; }
  .best-offer-panel { align-items: flex-start; flex-direction: column; }
  .product-actions { flex-direction: column; }
  .admin-hero { align-items: flex-start; flex-direction: column; }
  .admin-metrics { grid-template-columns: 1fr 1fr; }
  .admin-supplier-list { overflow-x: auto; }
  .admin-supplier-list article { min-width: 760px; }
  .login-panel { padding: 14px; }
  .login-card { padding: 26px 20px; }
}