/* TELEGRAM-MS premium design layer, 0.3.0.
 * Pure presentation. Keep server authorization, CSRF and data validations intact.
 * Brand: MINA orange + obsidian, generous whitespace, accessible controls.
 */
:root {
  --premium-ink: #182234; --premium-navy:#121b2b; --premium-orange:#f19228;
  --premium-warm:#fff7ee; --premium-edge:#e5e9ef; --premium-secondary:#6d7c91;
  --premium-shadow:0 4px 14px rgba(17,31,49,.035),0 16px 44px rgba(17,31,49,.04);
  --premium-shadow-lift:0 10px 25px rgba(17,31,49,.05),0 26px 60px rgba(17,31,49,.09);
  --premium-radius:20px;
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  --page-bg:#f7f8fb; --border:#e9ecf2; --radius:18px; --text:#182234;
  --muted:#758196;
}
html {scroll-padding-top:96px}
body {background:var(--page-bg);font-size:14px}
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent }
::selection {background:rgba(241,146,40,.24);color:#162133}
.skip-link{position:fixed;top:-100px;right:20px;z-index:9999;background:#172234;color:#fff;padding:12px 18px;border-radius:12px}
.skip-link:focus{top:15px;color:#fff}
.main {background:linear-gradient(180deg,#f7f8fb 0%,#f6f8fb 70%,#f9fafc 100%)}
.page-content {max-width:1560px;padding:30px clamp(20px,3.2vw,46px) 60px}
.card {border:1px solid var(--premium-edge);border-radius:var(--premium-radius);box-shadow:var(--premium-shadow)}
h1 {letter-spacing:-.045em}
h2,h3 {letter-spacing:-.015em}
.muted {color:var(--premium-secondary)}
/* Polished workspace chrome */
.sidebar {background:linear-gradient(168deg,#172233 0%,#111a2a 63%,#0e1726 100%);border-left:1px solid #263345;padding:27px 17px 19px;width:268px;flex-basis:268px}
.sidebar:before{content:"";position:absolute;inset:0 0 auto;height:280px;background:radial-gradient(circle at 90% -35%,rgba(241,146,40,.12),transparent 70%);pointer-events:none}
.brand{padding:3px 7px 29px;position:relative}
.brand-logo{border-radius:15px;width:49px;height:49px}
.brand-copy b{font-size:1rem;letter-spacing:.045em}
.workspace-switcher {background:#1e2c3e;border-color:#354357;border-radius:15px;padding:12px 11px;position:relative;box-shadow:0 8px 20px rgba(0,0,0,.075)}
.workspace-avatar {border-radius:12px;box-shadow:0 4px 9px rgba(241,146,40,.25)}
.nav-group-title{margin-top:7px;color:#8f9db0;text-transform:none;font-size:.68rem;letter-spacing:.04em}
.nav-link {border-radius:12px;margin:2px 0;min-height:46px;font-weight:600;font-size:.87rem}
.nav-link .ui-icon{height:19px;width:19px}
.nav-link.active{background:linear-gradient(95deg,rgba(241,146,40,.2),rgba(241,146,40,.075));box-shadow:inset 0 0 0 1px rgba(241,146,40,.07)}
.nav-link.active:before{width:3px;top:12px;bottom:12px}
.topbar {height:78px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 2px 16px rgba(25,39,57,.025)}
.topbar-context>span{font-size:.69rem;letter-spacing:.025em}
.breadcrumb-slash{color:#f19228;padding:0 6px;font-weight:800}
.topbar-context>strong{color:#19263a;font-size:1.05rem}
.topbar-quick{background:#fff5e8;color:#9c530d;border:1px solid #f5d5a9;min-height:39px;border-radius:11px;padding:9px 14px}
.topbar-quick:hover{background:#ffebcf}
.user-avatar {background:linear-gradient(135deg,#f6f0e8,#eef2f8);color:#303e54;border:1px solid #e2e7ee}
.main-footer {border-top:1px solid #e7e9ef;color:#8993a3}
/* Buttons and controls */
.primary,.button {background:linear-gradient(180deg,#f6a43b 0%,#f09225 100%);border-color:#e78c22;border-radius:11px;min-height:45px;color:#33200c;box-shadow:0 7px 16px rgba(241,146,40,.18),inset 0 1px 0 rgba(255,255,255,.4);font-weight:850;transition:transform .18s,box-shadow .18s,filter .18s}
.primary:hover,.button:hover {filter:brightness(.98);transform:translateY(-2px);background:#ef9127;box-shadow:0 12px 23px rgba(241,146,40,.22);color:#2f1d09}
.primary:active,.button:active {transform:translateY(0)}
.subtle-button {border-color:#e1e6ed;background:#fff;color:#35445a;border-radius:11px;box-shadow:0 2px 4px rgba(16,30,47,.02)}
.subtle-button:hover{border-color:#cbd4e0;background:#f8fafc}
input,select,textarea{border-color:#dfe5ed;border-radius:11px;min-height:46px;background-color:#fff}
input:focus,select:focus,textarea:focus {border-color:#ed9b3e;box-shadow:0 0 0 4px rgba(241,146,40,.12)}
label{color:#314056}
/* Upload page hero, counts are live server values */
.catalog-hero {position:relative;isolation:isolate;overflow:hidden;min-height:226px;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,340px);gap:36px;align-items:center;background:linear-gradient(116deg,#172234,#101a2b 74%);border:1px solid #263449;border-radius:24px;margin-bottom:17px;padding:31px 37px;color:white;box-shadow:0 18px 36px rgba(19,29,47,.13)}
.catalog-hero-copy,.hero-metrics{position:relative;z-index:2}
.catalog-hero-kicker{display:flex;align-items:center;gap:8px;color:#e8ba82;letter-spacing:.04em;font-size:.73rem;font-weight:850;margin:0 0 13px}
.hero-spark{background:#f49a33;box-shadow:0 0 0 4px rgba(241,146,40,.17);height:7px;width:7px;border-radius:50%}
.hero-sep{color:#6b7383}
.catalog-hero h1{font-size:clamp(1.7rem,2.7vw,2.75rem);line-height:1.36;font-weight:850;color:#fff;margin:0 0 9px}
.catalog-hero h1 em{color:#fab35b;font-style:normal}
.catalog-hero-copy>p:not(.catalog-hero-kicker){max-width:670px;line-height:1.85;font-size:.85rem;color:#b9c3d2;margin:0}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:19px}
.hero-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;background:#f3a039;color:#211b16;border:1px solid #ffbd6c;border-radius:11px;padding:10px 15px;font-size:.84rem;font-weight:900;box-shadow:0 8px 21px rgba(238,136,29,.21)}
.hero-link:hover{color:#211b16;background:#ffb254;transform:translateY(-1px)}
.hero-link .ui-icon{height:17px;width:17px}
.hero-muted-link{display:flex;align-items:center;gap:8px;color:#e5eaf3;font-size:.83rem;font-weight:700}
.hero-muted-link:hover{color:#fff}
.hero-muted-link .ui-icon{width:16px;height:16px}
.hero-metrics {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-metric{display:flex;flex-direction:column;justify-content:center;min-height:142px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.065);border-radius:17px;padding:18px;backdrop-filter:blur(6px)}
.hero-metric>span{color:#c3cddd;font-size:.76rem;font-weight:650}
.hero-metric strong{font-size:clamp(2rem,3vw,2.85rem);font-weight:850;line-height:1.2;margin:10px 0 3px;color:#fff;font-variant-numeric:tabular-nums}
.hero-metric small{color:#98a9bf;font-size:.69rem}
.hero-metric-primary{border-color:rgba(241,146,40,.35);background:rgba(241,146,40,.1)}
.hero-metric-primary strong{color:#ffb153}
.hero-decoration{position:absolute;pointer-events:none;border:1px solid rgba(255,255,255,.045);border-radius:50%;z-index:1}
.hero-decoration-one{width:500px;height:500px;top:-375px;left:24%;box-shadow:0 0 0 78px rgba(255,255,255,.015),0 0 0 155px rgba(255,255,255,.015)}
.hero-decoration-two{width:250px;height:250px;bottom:-205px;left:5%;border-color:rgba(241,146,40,.2);box-shadow:0 0 0 48px rgba(241,146,40,.035)}
/* Three-step workflow */
.workflow-steps-premium{box-shadow:none;background:transparent;border:0;padding:12px 6px 17px;margin-bottom:9px;gap:15px}
.workflow-steps-premium .workflow-step{flex:0 1 auto;gap:9px}
.workflow-steps-premium .workflow-step-index{background:#fff;border:1px solid #e7e9ef;border-radius:50%;width:32px;height:32px;color:#d18635;font-size:.72rem}
.workflow-steps-premium .workflow-step:first-child .workflow-step-index{background:#f19228;color:#1a1f25;border-color:#f19228}
.workflow-steps-premium .workflow-step strong{font-size:.83rem;color:#243248}
.workflow-steps-premium .workflow-step small{font-size:.72rem;color:#8a95a5}
.workflow-steps-premium .workflow-step-line{width:56px;border-color:#d8dfe7}
/* Workbench is the primary action, always visible high on the page */
.premium-workbench{grid-template-columns:minmax(0,1.57fr) minmax(300px,.81fr);gap:19px;margin-bottom:24px;scroll-margin-top:108px}
.premium-workbench .card{box-shadow:var(--premium-shadow);border-radius:20px;min-height:382px}
.premium-upload-panel{padding:27px 29px !important}
.section-kicker{letter-spacing:.025em;font-size:.73rem}
.quick-upload-panel .section-title-row{margin-bottom:18px}
.quick-upload-panel .section-title-row h2{margin-bottom:3px;font-size:1.24rem}
.quick-upload-panel .soft-badge{border-radius:999px;background:#edf8f2;color:#12744c;white-space:nowrap}
.dropzone-modern{background:repeating-linear-gradient(45deg,#fbfcfe,#fbfcfe 12px,#fafbfd 12px,#fafbfd 24px);border:1.8px dashed #d9e1eb;border-radius:17px;min-height:213px;box-shadow:inset 0 0 0 4px #fff;gap:9px;transition:box-shadow .2s,border-color .2s,background .2s,transform .2s}
.dropzone-modern:hover,.dropzone-modern.is-drag-over{background:#fff8f0;border-color:#f19e3f;box-shadow:inset 0 0 0 4px #fff,0 0 0 4px rgba(241,146,40,.09)}
.dropzone-modern .drop-icon{width:53px;height:53px;border-radius:16px;background:linear-gradient(135deg,#fff1df,#ffe5bb);color:#ab641d;box-shadow:0 8px 17px rgba(209,127,29,.09)}
.dropzone-modern .drop-title{color:#1a2a3d;font-size:1.05rem}
.dropzone-modern .drop-hint{color:#8996a5;font-size:.75rem}
.dropzone-modern .choose-files{background:white;color:#8e5417;border:1px solid #edcd9e;box-shadow:0 2px 4px rgba(181,103,16,.025);border-radius:9px;margin-top:5px;display:flex;gap:7px;align-items:center}
.dropzone-modern .choose-files .ui-icon{width:15px;height:15px}
.upload-feedback-row{margin-top:12px}
.upload-limit-hint{display:inline-flex;gap:5px;align-items:center}
.upload-limit-hint .ui-icon{height:14px;width:14px;color:#e18a2a}
.upload-actions-row{border-top:1px solid #f0f2f5;margin-top:13px;padding-top:15px;gap:13px}
.upload-actions-row .primary{min-width:181px}
.upload-actions-row .muted{font-size:.74rem}
/* Real local file previews; no image is uploaded until server accepts the form. */
.selection-preview[hidden]{display:none!important}
.selection-preview{display:flex;gap:8px;flex-wrap:wrap;padding:9px 0 1px;align-items:center}
.preview-chip{height:50px;max-width:155px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #e4e8ee;border-radius:10px;padding:5px 9px 5px 5px;box-shadow:0 2px 5px rgba(30,40,57,.03)}
.preview-chip img{width:38px;height:38px;object-fit:cover;border-radius:7px;flex:none}
.preview-chip .preview-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;font-weight:700;color:#44546b;min-width:0;direction:ltr}
.preview-chip.preview-more{max-width:none;background:#fff6ec;color:#9c601e;font-size:.75rem;font-weight:800}
.file-feedback.is-invalid{color:#b3343d;font-weight:750}
/* Conversion card is the deliberate second action */
.premium-convert-panel{background:radial-gradient(circle at -5% -10%,rgba(255,208,133,.25),transparent 50%),linear-gradient(160deg,#fff9f2,#fff 77%);border-color:#f0dfc7!important;box-shadow:var(--premium-shadow)}
.premium-convert-panel:before{width:190px;height:190px;left:-90px;top:-110px;background:rgba(241,146,40,.08)}
.premium-convert-panel .section-kicker{color:#ac6d29}
.premium-convert-panel .convert-icon{background:#ffead0;border:1px solid #f5d2a0;color:#bc7121;border-radius:16px;width:54px;height:54px}
.premium-convert-panel .convert-icon .ui-icon{width:25px;height:25px}
.premium-convert-panel h2{font-size:1.3rem;line-height:1.5;letter-spacing:-.035em;color:#202b3b}
.premium-convert-panel>p{line-height:1.85;font-size:.81rem;color:#77869a}
.premium-convert-panel .ready-count{background:rgba(255,255,255,.7);border-top:1px solid #eedbc3;border-bottom:1px solid #eedbc3;padding:13px 0}
.premium-convert-panel .ready-count strong{font-size:2.8rem;color:#cb791c;line-height:1.1}
.premium-convert-panel .ready-count span{color:#8190a3;font-size:.78rem}
.premium-convert-panel .convert-button{width:100%;min-height:49px;font-size:.95rem}
.premium-convert-panel .convert-hint{line-height:1.7;color:#968373;font-size:.74rem}
/* Library, filters and bulk actions */
.premium-library-panel,.premium-product-library,.premium-filter-panel{padding:25px 27px}
.library-panel .section-title-row h2{font-size:1.2rem}
.library-title-row .count-pill{color:#3c4c61;background:#f1f4f8;border-radius:9px}
.display-switch{border:1px solid #e4e8ee;border-radius:11px;background:#f7f9fb;padding:3px}
.display-option{border-radius:8px;min-height:35px}
.display-option.is-active{background:white;box-shadow:0 3px 9px rgba(30,46,70,.07);color:#b37327}
.quick-filter-form .search-field{border-color:#e0e6ee;background:#fff;border-radius:12px}
.quick-filter-form .search-field:focus-within{border-color:#e7a250;box-shadow:0 0 0 3px rgba(241,146,40,.095)}
.advanced-filter-details>summary{background:#fff;border-radius:11px}
.advanced-filter-details[open]>summary{background:#fff7ee;color:#a65c16}
.advanced-filter-body{background:#fafbfc;border:1px solid #f0f1f4;border-radius:13px;padding:14px;margin-top:8px}
.bulk-toolbar-clean{padding:12px 3px 16px;border-bottom:1px solid #edf0f4;margin-bottom:17px;transition:background .18s}
.bulk-toolbar-clean.has-selection{background:#fff8ef;border:1px solid #f2d3ac;border-radius:12px;padding:12px 13px;margin:10px 0 17px}
.bulk-toolbar-clean.has-selection .selection-count{background:#f19228;color:#222;border-radius:999px;padding:4px 10px;font-weight:850}
.check-inline{gap:7px}
.check-inline input[type=checkbox]{height:17px;width:17px;cursor:pointer;flex:none}
.catalog-results.catalog-grid {grid-template-columns:repeat(auto-fill,minmax(194px,1fr));gap:17px}
.catalog-tile {border-color:#e5e9f0;border-radius:16px;background:#fff;box-shadow:0 4px 10px rgba(25,40,62,.025);transition:border-color .17s,box-shadow .2s,transform .2s;overflow:hidden}
.catalog-tile:hover{border-color:#d7dfe9;box-shadow:var(--premium-shadow-lift);transform:translateY(-3px)}
.catalog-tile.is-selected{border-color:#e69b44;box-shadow:0 0 0 3px rgba(241,146,40,.13),var(--premium-shadow)}
.catalog-tile .tile-picture {background:#f1f4f8;aspect-ratio:1/1}
.catalog-tile .tile-picture img {object-fit:cover;transition:transform .42s cubic-bezier(.22,1,.36,1)}
.catalog-tile:hover .tile-picture img{transform:scale(1.045)}
.media-type-chip{background:rgba(255,255,255,.94);backdrop-filter:blur(9px);border:1px solid rgba(240,242,246,.92);box-shadow:0 3px 8px rgba(30,50,60,.045);border-radius:8px}
.catalog-tile .tile-details{padding:13px 14px 14px}
.catalog-tile .tile-top{gap:8px}
.catalog-tile .tile-top strong{font-size:.86rem;font-weight:850}
.catalog-tile .filename{font-size:.75rem;color:#8490a2}
.meta-pill{border-radius:7px;font-size:.69rem}
.catalog-tile .tile-foot{border-top:1px solid #f1f3f6;padding-top:11px;margin-top:9px}
.catalog-tile .tile-link{font-weight:800;color:#aa6519}
.catalog-tile .status{border-radius:999px}
/* Product listing hero, product gallery and editor */
.product-list-hero,.product-edit-hero {display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #e5e9f0;border-radius:20px;background:linear-gradient(115deg,#fff,#fffbf6);padding:29px 31px;margin-bottom:19px;box-shadow:var(--premium-shadow)}
.product-list-hero .eyebrow,.product-edit-hero .eyebrow{margin-bottom:9px}
.product-list-hero h1,.product-edit-hero h1{font-size:clamp(1.48rem,2.4vw,2.2rem);margin:0 0 7px}
.product-list-hero p:not(.eyebrow){color:#738197;line-height:1.85;margin:0;font-size:.86rem}
.product-hero-quick{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.product-hero-quick span{display:flex;align-items:center;gap:6px;font-size:.77rem;color:#7d8999}
.product-hero-quick .ui-icon{height:16px;width:16px;color:#c47b2e}
.product-hero-quick strong{color:#27344a}
.premium-product-tile h3{font-size:.96rem;margin:8px 0;color:#1b2c44}
.premium-product-tile .mini-thumbs img{border:2px solid white;box-shadow:0 2px 5px rgba(30,45,60,.09);border-radius:8px}
.premium-product-editor{grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);gap:20px}
.premium-product-editor>.card{padding:27px}
.product-edit-hero{background:linear-gradient(116deg,#fff,#f9fafc)}
.sku-highlight{font-size:.73em;background:#fff0dd;color:#b06818;border-radius:10px;padding:6px 12px;display:inline-block;vertical-align:middle;letter-spacing:0}
.product-edit-actions{padding-top:15px;border-top:1px solid #eef0f4}
.product-gallery{align-self:start}
/* Dashboard */
.dashboard-hero{min-height:222px;display:flex;justify-content:space-between;align-items:center;gap:32px;padding:33px 40px;margin-bottom:24px;border-radius:24px;background:linear-gradient(115deg,#172336,#111a29);color:#fff;position:relative;overflow:hidden;box-shadow:0 16px 33px rgba(19,29,47,.11)}
.dashboard-hero:before{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(255,255,255,.07);border-radius:50%;top:-370px;right:30%;box-shadow:0 0 0 90px rgba(255,255,255,.018),0 0 0 190px rgba(255,255,255,.01)}
.dashboard-hero>div:first-child{z-index:2;position:relative}
.dashboard-hero h1{color:#fff;margin:0 0 7px;font-size:clamp(1.5rem,2.5vw,2.4rem)}
.dashboard-hero h1 em{font-style:normal;color:#ffb65b}
.dashboard-hero p:not(.dashboard-hero-eyebrow){color:#b9c5d4;font-size:.9rem;line-height:1.85;margin:0}
.dashboard-hero-eyebrow{color:#f0ad60;font-size:.76rem;font-weight:850;letter-spacing:.03em;margin:0 0 11px}
.dashboard-hero-eyebrow span{font-size:.45rem;margin:0 8px}
.dashboard-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.dashboard-hero-outline{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:44px;color:#f1f4fa;border:1px solid rgba(255,255,255,.23);border-radius:11px;padding:10px 15px;font-weight:750}
.dashboard-hero-outline:hover{color:#fff;background:rgba(255,255,255,.1)}
.dashboard-hero-mark {height:148px;width:148px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.98);border-radius:32px;transform:rotate(-6deg);box-shadow:0 20px 50px rgba(0,0,0,.25);z-index:2}
.dashboard-hero-mark img{width:104px;height:104px;object-fit:contain;transform:rotate(6deg)}
.stat {min-height:125px;border-radius:17px}
.stat strong{color:#1e2c40}
.quick-action{border-radius:14px;transition:transform .2s,box-shadow .2s}
.quick-action:hover{transform:translateY(-2px);box-shadow:var(--premium-shadow)}
/* Screen size adjustments */
@media(min-width:1640px){.page-content{padding-left:56px;padding-right:56px}}
@media(max-width:1190px){.catalog-hero{grid-template-columns:minmax(0,1fr) 270px;gap:17px;padding:28px}.premium-workbench{grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr)}.catalog-results.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(171px,1fr));gap:13px}}
@media(max-width:1020px){.premium-workbench{grid-template-columns:1fr}.premium-workbench .card{min-height:auto}.premium-convert-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(205px,260px);gap:8px 20px}.premium-convert-panel .ready-count{margin:0 0 6px}.premium-convert-panel .convert-icon{margin:4px 0}}
@media(max-width:800px){.page-content{padding:22px 18px 45px}.catalog-hero{grid-template-columns:1fr;gap:16px;padding:25px;min-height:0}.hero-metrics{max-width:none;grid-template-columns:1fr 1fr}.hero-metric{min-height:96px;padding:12px 16px}.hero-metric strong{font-size:2rem;margin:3px 0}.workflow-steps-premium .workflow-step-line{width:20px}.premium-workbench .card{padding:21px!important}.premium-library-panel,.premium-product-library,.premium-filter-panel{padding:20px}.catalog-results.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
@media(max-width:590px){.page-content{padding:15px 13px 40px}.catalog-hero{border-radius:18px;padding:24px 20px;margin-bottom:15px}.catalog-hero h1{font-size:1.8rem}.catalog-hero-copy>p:not(.catalog-hero-kicker){font-size:.8rem}.hero-actions{gap:12px}.hero-link{width:auto}.hero-metric{min-height:88px}.hero-metric strong{font-size:1.85rem}.workflow-steps-premium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:5px 0 17px;margin-bottom:0}.workflow-steps-premium .workflow-step{display:grid;justify-items:center;align-content:center;gap:5px;text-align:center}.workflow-steps-premium .workflow-step-line{display:none}.workflow-steps-premium .workflow-step strong{font-size:.72rem}.workflow-steps-premium .workflow-step small{font-size:.65rem;line-height:1.55}.workflow-steps-premium .workflow-step-index{height:30px;width:30px}.premium-workbench{gap:13px}.premium-workbench .card{padding:18px!important}.premium-upload-panel .section-title-row{align-items:start}.premium-convert-panel{display:flex;gap:0}.premium-convert-panel .ready-count{margin:15px 0 12px}.dropzone-modern{min-height:190px;padding:21px 12px}.upload-actions-row{gap:7px}.catalog-results.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-tile .tile-details{padding:10px}.catalog-tile .tile-top strong{font-size:.75rem}.catalog-tile .filename{font-size:.69rem}.product-list-hero,.product-edit-hero{padding:20px;display:grid;gap:17px}.product-list-hero .primary{width:100%}.product-hero-quick{gap:10px}.premium-product-editor>.card{padding:19px}.dashboard-hero{padding:26px 21px;border-radius:18px}.dashboard-hero-mark{display:none}.dashboard-hero-actions .primary,.dashboard-hero-outline{flex:1}.preview-chip{max-width:125px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* v0.3.0 — Control-center settings, responsive forms and one-click product flow. */
[hidden]{display:none!important}
.settings-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,.76fr);gap:23px;align-items:start}
.settings-layout .settings-panel,.settings-layout .settings-aside>.card{margin-bottom:18px}
.settings-panel{padding:clamp(20px,2.6vw,34px);border-radius:20px}
.settings-panel>h2{font-size:1.35rem;margin:7px 0 21px}
.settings-block{border-top:1px solid #e9edf2;padding:25px 0 3px;display:grid;gap:14px}
.settings-block:first-child{border-top:0;padding-top:10px}
.settings-block-head{display:flex;align-items:center;gap:13px;margin-bottom:5px}
.settings-block-head>b{display:grid;place-items:center;width:39px;height:39px;flex:none;border-radius:13px;background:#fff0dd;color:#b86b1b;font-size:.87rem}
.settings-block-head h3{margin:0 0 3px;font-size:1.02rem;color:#233045}.settings-block-head p{margin:0;font-size:.78rem;color:#8791a0}
.settings-block input[type=color]{height:48px;padding:5px;cursor:pointer}
.settings-sticky-actions{display:flex;gap:13px;align-items:center;justify-content:flex-start;flex-wrap:wrap;padding:19px 0 0;border-top:1px solid #edf0f4}
.settings-sticky-actions .muted{font-size:.76rem}
.settings-toggle{display:flex;align-items:center;gap:14px;cursor:pointer;background:#f7fafc;border:1px solid #e5eaf0;padding:19px;border-radius:14px}
.settings-toggle input{width:21px;height:21px;flex:none}.settings-toggle span{display:grid;gap:5px}.settings-toggle strong{font-size:.89rem;color:#213149}.settings-toggle small{font-size:.74rem;color:#8895a3;font-weight:500}
.brand-preview-card{padding:19px!important;overflow:hidden}.brand-preview-cover{height:155px;background:linear-gradient(135deg,#27354b,#101823);color:#a4b3c7;border-radius:15px;display:grid;place-items:center;overflow:hidden;font-size:.83rem;letter-spacing:.05em}.brand-preview-cover img{width:100%;height:100%;object-fit:cover}
.brand-preview-identity{display:flex;align-items:center;gap:12px;margin:18px 0 16px;min-width:0}.brand-preview-identity img{height:53px;width:53px;object-fit:contain;border:2px solid var(--brand-accent,#f19228);border-radius:13px;padding:4px;background:white}.brand-preview-identity h3{font-size:1rem;margin:0 0 7px}.brand-preview-identity p{font-size:.76rem;color:#7f8a98;margin:0;line-height:1.5}
.guide-card h3{font-size:1.05rem}.guide-card .muted{overflow-wrap:anywhere}.guide-card hr{border:0;border-top:1px solid #e9edf2;margin:18px 0}.text-action{display:block;color:#a96a23;font-size:.84rem;font-weight:750;padding:10px 0;border-bottom:1px solid #f0f2f5}.info-stack{display:grid;gap:14px;font-size:.83rem;color:#546173;margin-top:20px}
.template-list{display:grid;gap:13px;margin-top:20px}.template-item{padding:15px 0;border-bottom:1px solid #edf0f4}.template-item:last-child{border-bottom:0}.template-item strong{font-size:.9rem}.template-item p{white-space:pre-line;line-height:1.75;font-size:.75rem;color:#808c9b;max-height:85px;overflow:hidden}.template-item .inline-actions{flex-wrap:wrap}.template-item .subtle-button{padding:8px 11px;min-height:35px}
.token-row{display:flex;gap:8px;flex-wrap:wrap}.token-pill{border:1px solid #edd9bd;border-radius:100px;background:#fff7ee;color:#a4621c;padding:7px 11px;font:600 .76rem ui-monospace,monospace;cursor:pointer;direction:ltr}.token-pill:hover{background:#fce9cb}
.bulk-actions-wide{display:flex;align-items:end;justify-content:flex-end;flex-wrap:wrap;gap:10px}.bulk-category-input{max-width:195px;min-width:150px}.bulk-category-input input{min-height:40px}.bulk-edit-options label>span{display:flex;align-items:center;gap:10px;color:#34435b;font-weight:800}.bulk-edit-options label>span>input{width:18px;height:18px}.bulk-edit-options{margin-top:15px}
/* Keep upload-to-product as one primary call-to-action. Historic pending images
   remain accessible but do not compete visually with the main upload button. */
.premium-workbench{grid-template-columns:minmax(0,1.55fr) minmax(260px,.56fr)}.premium-convert-panel{min-height:unset!important;background:#fff!important;box-shadow:var(--premium-shadow);border-color:#e7ecf2!important}.premium-convert-panel h2{font-size:1.08rem}.premium-convert-panel .ready-count strong{font-size:2rem}.premium-convert-panel .convert-icon{width:45px;height:45px}.premium-upload-panel .primary-wide{min-width:220px}
@media(max-width:1100px){.settings-layout{grid-template-columns:minmax(0,1fr) minmax(240px,.64fr)}.premium-workbench{grid-template-columns:1fr}.premium-convert-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:18px 22px!important}.premium-convert-panel>.section-kicker,.premium-convert-panel>p,.premium-convert-panel>.convert-hint,.premium-convert-panel>.convert-icon{display:none}.premium-convert-panel .ready-count{border:0;padding:0}.premium-convert-panel h2{margin:0}.premium-convert-panel .convert-button{width:auto}}
@media(max-width:820px){.settings-layout{grid-template-columns:1fr}.settings-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-aside .card{margin-bottom:0}.bulk-actions-wide{justify-content:flex-start}}
@media(max-width:580px){.settings-panel{padding:19px}.settings-aside{display:block}.settings-aside .card{margin-bottom:14px}.settings-sticky-actions .primary{width:100%}.settings-block-head{align-items:flex-start}.premium-convert-panel{display:block!important}.premium-convert-panel .convert-button{width:100%}.premium-convert-panel>.convert-hint{display:block}.bulk-category-input{max-width:none;width:100%}.bulk-actions-wide{width:100%}.bulk-actions-wide .inline-choice{flex:1}.bulk-actions-wide .primary{flex:1}.settings-toggle{padding:14px}}
.brand-asset-upload{padding:20px!important}.brand-asset-upload h3{font-size:1.07rem;margin:9px 0}.brand-asset-upload label{font-size:.8rem}.brand-asset-upload input[type=file]{font-size:.71rem;padding:11px}.brand-asset-upload .subtle-button{width:100%}


/* ================================================================
   v0.3.1 — Independent workspace and navigation scrolling.

   The desktop application occupies one viewport. Only .main scrolls
   the document content, while .side-nav scrolls inside the sidebar.
   The logo/workspace and sign-out remain visible at all times.
   On mobile the document scrolls normally and the menu popover has its
   own bounded scrolling area. No overlay hides links or actions.
   ================================================================ */
@media (min-width:781px) {
  .shell:not(.shell-auth) {
    height:100vh; height:100dvh; min-height:0;
    overflow:hidden;
  }
  .shell:not(.shell-auth) .sidebar {
    position:relative; top:auto;
    height:100%; min-height:0;
    overflow:hidden; /* never cut navigation: .side-nav scrolls */
    flex-shrink:0;
  }
  .shell:not(.shell-auth) .brand,
  .shell:not(.shell-auth) .workspace-switcher,
  .shell:not(.shell-auth) .sidebar-bottom {
    flex:0 0 auto;
  }
  .shell:not(.shell-auth) .side-nav {
    flex:1 1 auto; min-height:0;
    overflow-y:auto; overflow-x:hidden;
    align-content:start; grid-auto-rows:max-content;
    overscroll-behavior-y:contain;
    scroll-padding-block:12px;
    scrollbar-width:thin;
    scrollbar-color:#72849c transparent;
    padding-inline-end:6px;
  }
  .shell:not(.shell-auth) .side-nav::-webkit-scrollbar {width:7px}
  .shell:not(.shell-auth) .side-nav::-webkit-scrollbar-track {background:transparent}
  .shell:not(.shell-auth) .side-nav::-webkit-scrollbar-thumb {
    background:#55667c;border-radius:10px;border:1px solid #172233;
  }
  .shell:not(.shell-auth) .side-nav::-webkit-scrollbar-thumb:hover {background:#8291a5}
  .shell:not(.shell-auth) .main {
    height:100%; min-height:0; min-width:0;
    overflow-y:auto; overflow-x:hidden;
    overscroll-behavior-y:contain;
    scrollbar-width:thin; scrollbar-color:#c4cbd6 transparent;
  }
  .shell:not(.shell-auth) .main::-webkit-scrollbar {width:9px}
  .shell:not(.shell-auth) .main::-webkit-scrollbar-thumb {
    background:#c9d0db;border-radius:12px;
  }
}
/* Preserve usable navigation on short desktop displays. */
@media (min-width:781px) and (max-height:680px) {
  .shell:not(.shell-auth) .sidebar {padding-top:14px;padding-bottom:12px}
  .shell:not(.shell-auth) .brand {padding-bottom:12px}
  .shell:not(.shell-auth) .workspace-switcher {margin-bottom:8px}
  .shell:not(.shell-auth) .sidebar-help {display:none}
  .shell:not(.shell-auth) .sidebar-bottom {padding-top:9px}
}
/* On tablets and phones, use the document scrollbar for content and
   a separate scrollbar for the expandable mobile navigation menu. */
@media (max-width:780px) {
  .shell:not(.shell-auth) {height:auto;min-height:100dvh;overflow:visible}
  .shell:not(.shell-auth) .main {height:auto;min-height:100dvh;overflow:visible}
  .mobile-menu-content {
    max-height:min(70dvh,560px);
    overflow-y:auto; overflow-x:hidden;
    overscroll-behavior-y:contain;
    align-content:start;
    scrollbar-width:thin; scrollbar-color:#aeb9c8 transparent;
  }
}