:root{
  --bg:#edf5f8;
  --panel:#ffffff;
  --panel2:#f5f9fb;
  --text:#09233f;
  --muted:#64788a;
  --line:#d8e5ec;
  --brand:#0aa6ad;
  --brand2:#087b87;
  --brand-deep:#052f56;
  --brand-ink:#061f3b;
  --shadow:0 12px 32px rgba(8,48,79,.08);
  --shadow-soft:0 5px 18px rgba(8,48,79,.06);
}

/* Sales orders are a read-only /sales workbench. Procurement and PO controls live in Shipping. */
.order-sales-only [data-order-col="select"],
.order-sales-only [data-order-col="procurement"],
.order-sales-only [data-order-col="po"],
.order-sales-only [data-order-col="logistics"]{display:none!important}
.order-sales-only .order-workflow-badges{display:none!important}
.order-section-title{display:flex;align-items:center;gap:10px;min-width:0}
.order-section-title strong{font-size:15px;color:var(--ink,#0b2942)}
.order-section-title span{font-size:11px;color:var(--muted,#64788b);white-space:nowrap}
.shipping-procurement-actions{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:5px}
.shipping-procurement-actions.done small{color:#587287}
.shipping-procurement-actions .order-action-stack{display:flex;flex-wrap:wrap;gap:4px}
.shipping-procurement-actions .btn{min-height:24px;padding:2px 7px}
.shipping-product-copy .shipping-procurement-actions{border-top:1px dashed #d6e5eb;padding-top:5px}
body[data-tab="shipping"] .shipping-table-card{min-height:420px}
body[data-tab="shipping"] .shipping-table td{vertical-align:middle}

body{background:var(--bg);color:var(--text)}

/* Application shell */
.app{grid-template-columns:248px minmax(0,1fr);background:linear-gradient(135deg,#edf6f8 0%,#f8fbfc 48%,#eaf4f7 100%)}
.side{
  position:relative;
  padding:18px 14px 16px;
  gap:18px;
  background:
    radial-gradient(circle at 16% 3%,rgba(19,196,201,.22),transparent 27%),
    linear-gradient(180deg,#061f3b 0%,#073451 56%,#05263d 100%);
  border-right:1px solid rgba(104,217,220,.16);
  box-shadow:12px 0 35px rgba(4,31,57,.13);
}
.side::after{content:"";position:absolute;inset:auto 0 0;height:210px;pointer-events:none;background:linear-gradient(155deg,transparent 25%,rgba(20,190,194,.08));clip-path:polygon(0 48%,100% 0,100% 100%,0 100%)}
.brand{position:relative;z-index:1;padding:3px 7px 13px;border-bottom:1px solid rgba(167,225,229,.14)}
.brand .logo{width:46px;height:46px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.brand strong{font-size:18px;letter-spacing:.02em;color:#fff}
.nav{position:relative;z-index:1;gap:16px}
.nav-group{gap:5px}
.nav-title{padding:0 11px 5px;color:#71c9d0;font-size:11px;letter-spacing:.13em;font-weight:800}
.nav a,.nav button{position:relative;min-height:42px;padding:10px 13px;border-radius:11px;color:#d8e9ef;font-size:14px;font-weight:700;letter-spacing:.01em;text-decoration:none;transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease}
.nav a:hover,.nav button:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateX(2px)}
.nav a.active,.nav button.active{background:linear-gradient(110deg,rgba(10,166,173,.96),rgba(19,193,190,.78));color:#fff;box-shadow:0 9px 22px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}
.nav a.active::before,.nav button.active::before{content:"";position:absolute;left:-7px;top:10px;bottom:10px;width:3px;border-radius:99px;background:#70f1ee;box-shadow:0 0 12px rgba(112,241,238,.8)}

.main{background:radial-gradient(circle at 85% -10%,rgba(24,190,195,.08),transparent 33%),linear-gradient(145deg,#f4f9fb,#eaf3f6)}
.top{position:relative;z-index:120;overflow:visible;min-height:82px;padding:15px 24px;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(164,193,207,.42);box-shadow:0 5px 18px rgba(8,48,79,.055);backdrop-filter:blur(12px)}
.top h1{font-size:25px;color:var(--brand-ink);font-weight:900;letter-spacing:.01em}
.top .sub{margin-top:3px;color:#668092}
.user-menu-trigger{background:linear-gradient(145deg,#e7fbfb,#eef7fb);border:1px solid rgba(10,166,173,.2);box-shadow:0 5px 15px rgba(7,70,92,.08)}
.user-menu-trigger:hover,.user-menu-trigger[aria-expanded="true"]{border-color:#39c7c8;background:#e5fbfb;box-shadow:0 0 0 4px rgba(10,166,173,.1),0 8px 20px rgba(7,70,92,.12)}
.user-avatar{background:linear-gradient(145deg,#20c4c3,#057986);box-shadow:0 5px 14px rgba(5,121,134,.24)}
.user-menu-profile .user-avatar{display:grid;place-items:center;color:#fff}.user-menu-profile .user-avatar svg{display:block;fill:#fff}
.top-account{position:relative;z-index:121}.user-menu-panel{z-index:1000;border-color:rgba(149,188,204,.42);border-radius:14px;box-shadow:0 22px 52px rgba(5,39,65,.2)}

/* Controls */
input,select,textarea{border-color:#ccdde6;border-radius:9px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
input:hover,select:hover,textarea:hover{border-color:#a9c6d3}
input:focus,select:focus,textarea:focus{border-color:#1bb4b7;box-shadow:0 0 0 3px rgba(10,166,173,.12)}
.btn{border-color:#cddde5;border-radius:9px;background:linear-gradient(180deg,#fff,#f8fbfc);box-shadow:0 2px 6px rgba(8,48,79,.04);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,filter .14s ease}
.btn:hover{border-color:#59bfc2;box-shadow:0 6px 16px rgba(8,74,94,.11);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary,.primary{background:linear-gradient(120deg,#07939d,#16b8b6);border-color:#07939d;color:#fff;box-shadow:0 7px 17px rgba(7,147,157,.2)}
.btn.primary:hover,.primary:hover{filter:saturate(1.08) brightness(1.03);box-shadow:0 9px 22px rgba(7,147,157,.27)}
.btn.orange,.orange{background:linear-gradient(120deg,#f47c20,#ff9b45);border-color:#f47c20;color:#fff}
.btn.danger,.danger{background:#fff7f7;border-color:#f3c4c4;color:#b42318}
.offer-sync-black{background:linear-gradient(120deg,#062c50,#075d78)!important;border-color:#063b61!important;color:#fff!important}

/* Global content surfaces */
.content{padding:15px 18px 22px}
.library-actions,.toolbar,.bulk-bar{background:rgba(255,255,255,.9);border-color:rgba(178,204,216,.55);backdrop-filter:blur(10px)}
.library-actions{padding:10px 22px;box-shadow:0 5px 16px rgba(8,48,79,.045)}
.toolbar{padding-top:10px;padding-bottom:10px}
.bulk-bar{min-height:39px}
.metrics{gap:10px;padding:12px 22px}
.metric,.home-metric,.pricing-stat{position:relative;overflow:hidden;border:1px solid rgba(171,201,214,.55);border-radius:13px;background:linear-gradient(145deg,#fff,#f7fbfc);box-shadow:var(--shadow-soft)}
.metric::after,.home-metric::after,.pricing-stat::after{content:"";position:absolute;right:-22px;top:-30px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(19,184,186,.13),transparent 68%)}
.metric{padding:11px 14px}
.metric span,.home-metric span,.pricing-stat span{color:#6b8292;font-weight:600}
.metric strong,.home-metric b,.pricing-stat b{color:#082f53;font-weight:900}
.panel.active{animation:premium-panel-in .2s ease both}
@keyframes premium-panel-in{from{opacity:.45;transform:translateY(3px)}to{opacity:1;transform:none}}

.card,.home-card,.offer-management-head,.store-manage-head,.store-list,.link-collect-card,.new-product-records,.pricing-run-card,.pricing-auto-card,.pricing-toolbar,.pricing-bulk,.task-toolbar,.settings-card,.account-card,.pager,.table-card{
  border-color:rgba(170,200,213,.58);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.card,.home-card,.offer-management-head,.store-manage-head,.store-list,.link-collect-card,.new-product-records,.pricing-run-card,.pricing-auto-card,.pricing-toolbar,.settings-card,.account-card{background:linear-gradient(145deg,#fff 0%,#fbfdfe 100%)}
.card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-2px);border-color:rgba(55,177,181,.45);box-shadow:0 14px 30px rgba(8,48,79,.11)}
.home-card h3,.offer-heading h2,.store-manage-title h2,.link-collect-head h2{color:#082f53;letter-spacing:.01em}
.trend-box{border-radius:11px!important;background:linear-gradient(120deg,#edfafa,#f5fbfd)!important;border:1px dashed rgba(10,166,173,.28)!important;color:#47717d!important}

/* Tables */
.table-card{background:#fff;overflow:auto}
table{border-collapse:separate;border-spacing:0}
th{background:linear-gradient(180deg,#edf5f8,#e6f0f4);color:#29485d;font-size:12px;font-weight:800;border-color:#d6e4eb}
td{border-color:#e1ebf0;background:#fff}
tbody tr{transition:background .12s ease,box-shadow .12s ease}
tbody tr:hover td{background:#f3fbfb}
.library-table tbody tr:hover td:nth-child(1),.library-table tbody tr:hover td:nth-child(2),.library-table tbody tr:hover td:nth-child(3){background:#f3fbfb}
.library-table th:nth-child(1),.library-table th:nth-child(2),.library-table th:nth-child(3){background:linear-gradient(180deg,#edf5f8,#e6f0f4)}
.thumb,.pricing-product img,.task-product-image{border-color:#d5e4eb;border-radius:9px;box-shadow:0 3px 9px rgba(8,48,79,.07)}
.badge,.pricing-status,.new-product-status{border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.ok,.pricing-status.active,.pricing-status.ready,.pricing-status.applied,.pricing-status.no_change{background:#ddf8e9;color:#137044}
.info,.pricing-status.candidate,.pricing-status.waiting,.pricing-status.applying{background:#e3f2ff;color:#1764a3}
.warn,.pricing-status.paused,.pricing-status.blocked{background:#fff2d6;color:#9a5b08}
.bad,.pricing-status.unavailable,.pricing-status.failed,.pricing-status.partial{background:#ffe6e6;color:#b42318}

/* Feature areas */
.new-product-tabs,.pricing-tabs{padding:4px;border-radius:11px;background:rgba(226,238,243,.72)}
.new-product-tabs button,.pricing-tabs button{border-radius:8px;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.new-product-tabs button.active,.pricing-tabs button.active{background:linear-gradient(120deg,#078f9b,#19b7b6);color:#fff;box-shadow:0 6px 15px rgba(7,143,155,.2)}
.link-collect-badge,.pricing-timezone{background:#e2f8f7;color:#087b87;border:1px solid rgba(10,166,173,.18)}
.pricing-automation{gap:12px}
.pricing-run-card,.pricing-auto-card{padding:15px 17px}
.pricing-toolbar,.pricing-bulk{border-color:rgba(170,200,213,.58)}
.pricing-product{gap:11px}
.store-manage-icon,.offer-icon{background:linear-gradient(145deg,#062f56,#078896);box-shadow:0 5px 14px rgba(6,47,86,.2)}
.new-product-list,.new-product-submission-list{gap:11px}

/* Dialogs and overlays */
dialog{border:1px solid rgba(147,184,200,.52)!important;border-radius:17px!important;box-shadow:0 28px 80px rgba(3,33,58,.27)!important}
dialog::backdrop{background:rgba(3,25,44,.52);backdrop-filter:blur(3px)}
.dialog-head{background:linear-gradient(180deg,#fff,#f7fbfc);border-color:#dbe7ed!important}
.dialog-body{background:#fff}
.dropdown-menu{border-color:rgba(153,188,202,.55);border-radius:11px;box-shadow:0 18px 42px rgba(5,39,65,.18)}

/* Scrollbars */
.side,.content,.table-card,*{scrollbar-color:#9bc3cc transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#a8cbd3;border:2px solid transparent;background-clip:padding-box;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#79afb9;background-clip:padding-box}

@media(max-width:1180px){
  .app{grid-template-columns:222px minmax(0,1fr)}
  .side{padding-left:11px;padding-right:11px}
  .content{padding-left:14px;padding-right:14px}
}

@media(prefers-reduced-motion:reduce){
  .panel.active,.nav a,.nav button,.btn,.card{animation:none!important;transition:none!important}
}

/* Dense operational workspaces: keep controls visible while giving the tables the screen. */
@media(min-width:901px){
  body:is([data-tab="orders"],[data-tab="pricing"],[data-tab="tasks"]) .top{min-height:58px;padding:5px 16px;gap:10px}
  body:is([data-tab="orders"],[data-tab="pricing"],[data-tab="tasks"]) .top>div:first-child{margin-right:auto;min-width:0}
  body:is([data-tab="orders"],[data-tab="pricing"],[data-tab="tasks"]) .top h1{font-size:20px}
  body:is([data-tab="orders"],[data-tab="pricing"],[data-tab="tasks"]) .top .sub{font-size:11px;margin:1px 0 0}
  body:is([data-tab="orders"],[data-tab="pricing"],[data-tab="tasks"]) .top-account{margin-left:0}
  body:is([data-tab="orders"],[data-tab="pricing"],[data-tab="tasks"]) .content{padding:0 16px 10px}

  body[data-tab="orders"] .order-panel.active{gap:5px}
  body[data-tab="orders"] .order-work-head{gap:4px;min-height:62px;padding:4px 8px;border-radius:9px}
  body[data-tab="orders"] .order-toolbar-row{gap:5px}
  body[data-tab="orders"] .order-stage-tabs{gap:5px;max-width:560px}
  body[data-tab="orders"] .order-stage-tab{height:28px;padding:2px 10px;font-size:12px}
  body[data-tab="orders"] .order-toolbar-primary #syncOrdersBtn{height:28px;min-height:28px;min-width:92px;padding:3px 10px;font-size:12px}
  body[data-tab="orders"] .order-toolbar-filters{padding-top:4px;gap:5px}
  body[data-tab="orders"] .order-toolbar-filters select,
  body[data-tab="orders"] .order-toolbar-filters input,
  body[data-tab="orders"] .order-toolbar-filters .btn,
  body[data-tab="orders"] .order-integration{height:27px!important;min-height:27px!important;font-size:11px}
  body[data-tab="orders"] #orderTable th,
  body[data-tab="orders"] #orderTable td{height:38px;padding:5px 7px}
  body[data-tab="orders"] .order-image{width:34px;height:34px}
  body[data-tab="orders"] .order-pager{padding:4px 8px;min-height:34px}

  body[data-tab="pricing"] .pricing-panel.active{gap:5px}
  body[data-tab="pricing"] .pricing-summary{gap:5px}
  body[data-tab="pricing"] .pricing-stat{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:4px 10px;border-radius:9px}
  body[data-tab="pricing"] .pricing-stat span{font-size:10px}
  body[data-tab="pricing"] .pricing-stat b{margin:0;font-size:17px}
  body[data-tab="pricing"] .pricing-automation{gap:5px;grid-template-columns:minmax(220px,.62fr) minmax(620px,1.38fr)}
  body[data-tab="pricing"] .pricing-run-card,
  body[data-tab="pricing"] .pricing-auto-card{padding:5px 8px;border-radius:9px}
  body[data-tab="pricing"] .pricing-run-head h3,
  body[data-tab="pricing"] .pricing-auto-head h3{font-size:12px}
  body[data-tab="pricing"] .pricing-run-head .btn,
  body[data-tab="pricing"] .pricing-auto-fields .btn{height:27px;min-height:27px;padding:3px 8px;font-size:11px}
  body[data-tab="pricing"] .pricing-run-progress{margin-top:2px;font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-tab="pricing"] .pricing-auto-fields{gap:6px;margin-top:3px;flex-wrap:nowrap}
  body[data-tab="pricing"] .pricing-auto-fields label{gap:4px;font-size:10px;white-space:nowrap}
  body[data-tab="pricing"] .pricing-auto-fields input[type="time"]{width:86px;height:27px;padding:3px 5px}
  body[data-tab="pricing"] .pricing-timezone{padding:2px 6px;font-size:9px}
  body[data-tab="pricing"] .pricing-auto-warning{margin-top:2px;font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-tab="pricing"] .pricing-toolbar{gap:5px;padding:4px 6px;border-radius:9px;flex-wrap:nowrap}
  body[data-tab="pricing"] .pricing-tabs{gap:2px;padding:2px;border-radius:8px}
  body[data-tab="pricing"] .pricing-tabs button{height:27px;padding:3px 8px;font-size:11px}
  body[data-tab="pricing"] .pricing-toolbar input,
  body[data-tab="pricing"] .pricing-toolbar select,
  body[data-tab="pricing"] .pricing-toolbar .btn{height:28px;min-height:28px;padding:3px 7px;font-size:11px}
  body[data-tab="pricing"] .pricing-toolbar input{width:min(280px,100%)}
  body[data-tab="pricing"] .pricing-toolbar select{min-width:112px}
  body[data-tab="pricing"] .pricing-refresh-msg{flex:1 1 100px;width:auto;min-height:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
  body[data-tab="pricing"] .pricing-bulk{min-height:31px;padding:3px 8px;border-radius:9px;font-size:11px}
  body[data-tab="pricing"] .pricing-bulk .btn{height:27px;min-height:27px;padding:3px 8px;font-size:11px}
  body[data-tab="pricing"] .pricing-product{grid-template-columns:38px minmax(190px,1fr);gap:7px;min-width:270px}
  body[data-tab="pricing"] .pricing-product img{width:38px;height:38px}
  body[data-tab="pricing"] .pricing-table th,
  body[data-tab="pricing"] .pricing-table td{height:42px;padding:5px 7px}
  body[data-tab="pricing"] .pricing-pager{padding:4px 8px;min-height:34px}

  body[data-tab="tasks"] .tasks-panel.active{gap:5px}
  body[data-tab="tasks"] .task-stats{gap:5px}
  body[data-tab="tasks"] .task-stat{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:4px 10px;border-radius:9px}
  body[data-tab="tasks"] .task-stat span{font-size:10px}
  body[data-tab="tasks"] .task-stat b{font-size:17px}
  body[data-tab="tasks"] .task-toolbar{grid-template-columns:repeat(3,minmax(130px,190px)) auto minmax(180px,1fr);gap:5px;padding:4px 6px;border-radius:9px}
  body[data-tab="tasks"] .task-toolbar select,
  body[data-tab="tasks"] .task-toolbar .btn{height:28px;min-height:28px;padding:3px 7px;font-size:11px}
  body[data-tab="tasks"] #taskHint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
  body[data-tab="tasks"] .task-product-summary{grid-template-columns:36px minmax(0,1fr);gap:6px}
  body[data-tab="tasks"] .task-product-image{width:36px;height:36px}
  body[data-tab="tasks"] .task-table-card th,
  body[data-tab="tasks"] .task-table-card td{height:40px;padding:5px 7px}
  body[data-tab="tasks"] .task-pager{padding:4px 8px;min-height:34px}
}