:root{--wq-green:#173f36;--wq-green2:#245a4d;--wq-orange:#e76632;--wq-orange2:#f39a72;--wq-cream:#f6f0e6;--wq-ink:#1c2723;--wq-muted:#68736f;--wq-line:#e4e6e0;--wq-soft:#f5f6f2;--wq-shadow:0 18px 48px rgba(28,39,35,.09)}
body{color:var(--wq-ink)!important;background:radial-gradient(circle at 96% 0,rgba(231,102,50,.075),transparent 24%),#f5f6f2!important}
.layout{background:#f5f6f2}.side{background:radial-gradient(circle at 20% 3%,rgba(231,102,50,.18),transparent 24%),linear-gradient(180deg,#173f36,#102f28)!important;box-shadow:-10px 0 40px rgba(23,63,54,.13)!important}.side .brand-logo{background:#fff!important;color:var(--wq-green)!important;box-shadow:0 13px 28px rgba(0,0,0,.2)!important;position:relative;overflow:hidden}.side .brand-logo:after{content:"";position:absolute;left:-7px;bottom:8px;width:29px;height:7px;background:var(--wq-orange);border-radius:6px;transform:rotate(-38deg)}.side .brand small{color:#9ab5aa!important}.nav-group-label,.side .group{color:#7f9d91!important}.side .nav button,.side .nav a{color:#c3d5ce!important}.side .nav button:hover,.side .nav button.active,.side .nav a:hover,.side .nav a.active{background:rgba(255,255,255,.09)!important;color:#fff!important;box-shadow:inset -3px 0 0 var(--wq-orange)!important}.side .nav .store{border-color:rgba(238,138,88,.35)!important;background:rgba(231,102,50,.08)!important;color:#ffd7c3!important}
.main{padding-top:28px!important}.top-title h1,.top h1{color:var(--wq-ink)}.top-title p{color:var(--wq-muted)!important}.btn,.go{border-color:var(--wq-line)!important;border-radius:11px!important;box-shadow:none!important;transition:.2s!important}.btn:hover,.go:hover{transform:translateY(-2px)!important;box-shadow:0 10px 22px rgba(23,63,54,.09)!important}.btn.dark{background:var(--wq-green)!important;border-color:var(--wq-green)!important}.btn.gold,.gold,.go{background:var(--wq-orange)!important;color:#fff!important;border-color:var(--wq-orange)!important}.btn.danger{background:#fff2ee!important;color:#ae4428!important;border-color:#f2c9bd!important}
.panel,.metric,.card,.prod-stat,.products-panel,.toolbar,.box{border-color:var(--wq-line)!important;box-shadow:var(--wq-shadow)!important;background:rgba(255,255,255,.97)!important}.panel,.metric,.card,.prod-stat,.products-panel,.toolbar{border-radius:18px!important}.metric:after{background:rgba(231,102,50,.085)!important}.metric b,.prod-stat b,.card b{color:var(--wq-green)!important}.metric small,.prod-stat span,.card span{color:var(--wq-muted)!important}.row{border-color:#edf0eb!important}.chip{background:#f6f8f5!important;border-color:#dfe4df!important}.pill.on,.on{background:#e2f1e9!important;color:var(--wq-green)!important}.pill.off,.off{background:#fff0eb!important;color:#ad4328!important}.warn{background:#fff4df!important;color:#a16618!important}
.product-hero{background:linear-gradient(125deg,#173f36,#245a4d)!important;border-radius:22px!important;box-shadow:0 22px 48px rgba(23,63,54,.17)!important}.product-hero:after{content:"ورقة وقلم"!important;font-size:70px!important;opacity:.035!important;left:20px!important}.product-hero p{color:#c7d9d1!important}.searchbox{background:#f5f7f4!important;border-color:#dde3de!important}.searchbox:focus-within{border-color:#8fa79d!important;box-shadow:0 0 0 4px rgba(23,63,54,.08)!important}.toolbar select,.field input,.field select,.field textarea,.form input,.form select,.auth input,input,select,textarea{border-color:#dfe4df!important}.field input:focus,.field select:focus,.field textarea:focus,.form input:focus,.form select:focus,input:focus,select:focus,textarea:focus{outline:0!important;border-color:#8fa79d!important;box-shadow:0 0 0 4px rgba(23,63,54,.08)!important}.prod-table th{background:#f5f7f4!important;color:#6c7873!important;border-color:#e7ebe7!important}.prod-table td{border-color:#edf0ed!important}.prod-table tr:hover td{background:#f8faf7!important}.prod-img{background:#f0f3ef!important;border-color:#dde3de!important}.modal{background:rgba(14,42,35,.62)!important}.modal-card{border-radius:22px!important}.modal-head,.modal-foot{background:#fff!important;border-color:var(--wq-line)!important}.uploadZone{background:linear-gradient(145deg,#fff,#f4f7f3)!important;border-color:#9fb4aa!important}.uploadZone b{color:var(--wq-green)!important}.img-card,.previewGrid .thumb,.vprodImg{border-color:var(--wq-line)!important;box-shadow:0 8px 20px rgba(23,63,54,.08)!important}.main-photo{background:var(--wq-orange)!important;color:#fff!important}
/* Vendor portal */
.wrap{padding-top:28px!important}.wrap .top{background:#fff;border:1px solid var(--wq-line);border-radius:18px;padding:14px 16px;box-shadow:0 8px 24px rgba(23,63,54,.05)}.wrap .top h2{color:var(--wq-green)}.wrap .cards .card{position:relative;overflow:hidden}.wrap .cards .card:after{content:"";position:absolute;width:52px;height:52px;border-radius:50%;left:-18px;top:-18px;background:rgba(231,102,50,.08)}.wrap .note{border-color:#efd3c6!important;background:#fff4ef!important;color:#76402e!important}.wrap .note.danger{background:#fff0eb!important}.salesTable th{background:#f4f6f2;color:#6d7974}.salesTable td,.salesTable th{border-color:#e8ece8!important}.auth{margin-top:54px!important}.auth>div:first-child h1{color:var(--wq-green)}.authGrid .panel{padding:24px!important}.authGrid .panel h3{border-bottom:1px solid var(--wq-line);padding-bottom:11px;margin-top:0}.previewGrid .thumb span{background:var(--wq-green)!important}
/* Login */
body:has(>.box){background:radial-gradient(circle at 20% 20%,rgba(231,102,50,.18),transparent 22%),linear-gradient(140deg,#102f28,#1d4b40)!important}.box{border-radius:23px!important;padding:32px!important;position:relative;overflow:hidden}.box:before{content:"";display:block;width:49px;height:7px;border-radius:7px;background:var(--wq-orange);margin-bottom:18px}.box .logo{color:var(--wq-green)!important;font-size:26px!important}.box .logo small{color:var(--wq-muted)!important}.box .quick a{border-radius:12px!important;border-color:var(--wq-line)!important}.box .quick a:first-child{background:var(--wq-orange)!important;color:#fff!important}.box .quick a:last-child{background:var(--wq-green)!important;border-color:var(--wq-green)!important}.box .hint{background:#f4f7f4!important;border:1px solid #e3e8e4!important;color:#53615b!important}.box .sep:before,.box .sep:after{background:#e4e8e4!important}
/* Unified platform */
.storebox{border-color:#d8e2dd!important;background:linear-gradient(135deg,#fff,#eff5f1)!important}.storebox .badge,.badge{background:#e0f0e8!important;color:var(--wq-green)!important}.links a{border-color:var(--wq-line)!important;transition:.2s}.links a:hover{transform:translateY(-2px);border-color:#9fb3aa!important;box-shadow:0 10px 22px rgba(23,63,54,.07)}.notice{background:#f4f7f4!important;border-color:#b8c8c0!important;color:#53615b!important}
@media(max-width:820px){.main{padding:14px!important}.top-actions{max-width:100%;overflow:auto;flex-wrap:nowrap!important}.top-actions .btn{white-space:nowrap}.mobile-nav{padding-bottom:4px}.mobile-nav .btn{background:#fff!important}.auth{margin-top:25px!important}}
@media(max-width:520px){.box{padding:23px!important}.quick{grid-template-columns:1fr!important}.wrap .top{align-items:flex-start!important;flex-direction:column}.wrap .top>div:last-child{display:flex;gap:6px;flex-wrap:wrap}.wrap .cards .card{padding:14px!important}}

/* V6 — compact control-panel visual language inspired by the supplied reference (style only) */
@media(min-width:821px){
  .layout{grid-template-columns:248px minmax(0,1fr)!important;background:#f4f7f6!important}
  .side{padding:14px 10px 20px!important;background:linear-gradient(180deg,#0e5d59 0%,#11766f 48%,#0c625e 100%)!important;box-shadow:-5px 0 24px rgba(10,80,76,.18)!important}
  .side .brand{padding:7px 7px 14px!important;margin-bottom:4px;border-radius:14px;background:linear-gradient(135deg,#173d63,#244f7b)!important;box-shadow:0 8px 18px rgba(8,37,64,.2)!important}
  .side .brand-logo{width:40px!important;height:40px!important;border-radius:11px!important;background:#f7d348!important;color:#173d63!important;font-size:21px!important;box-shadow:none!important}
  .side .brand b{font-size:18px!important}.side .brand small{font-size:9px!important;color:#d5e1ec!important}
  .side .nav-group-label{padding:8px 7px 5px!important;color:#d9f1ef!important;font-size:9px!important;font-weight:800!important}
  .side .nav{display:flex!important;flex-direction:column!important;gap:6px!important}
  .side .nav button{position:relative!important;min-height:42px!important;margin:0!important;padding:8px 10px 8px 48px!important;border-radius:10px!important;background:linear-gradient(90deg,#0f8780,#0d756f)!important;color:#fff!important;font-size:12px!important;font-weight:900!important;box-shadow:0 3px 7px rgba(4,70,66,.15)!important;border:1px solid rgba(255,255,255,.13)!important;overflow:hidden!important}
  .side .nav button:hover{transform:translateX(-2px)!important;background:linear-gradient(90deg,#11958d,#0e7c75)!important;box-shadow:0 7px 14px rgba(4,70,66,.2)!important}
  .side .nav button.active{background:linear-gradient(90deg,#d7b523,#e3c431)!important;color:#183f45!important;border-color:#ead86c!important;box-shadow:0 5px 12px rgba(115,91,0,.18)!important}
  .side .nav button .icon{position:absolute!important;right:auto!important;left:8px!important;top:6px!important;width:30px!important;height:30px!important;border-radius:9px!important;display:grid!important;place-items:center!important;background:#f6c939!important;color:#173c5d!important;font-size:15px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)!important}
  .side .nav button:nth-child(2) .icon{background:#27d3a0!important}.side .nav button:nth-child(3) .icon{background:#5cb6ff!important}.side .nav button:nth-child(4) .icon{background:#ffb43b!important}.side .nav button:nth-child(5) .icon{background:#28d0c4!important}.side .nav button:nth-child(6) .icon{background:#ef73c2!important}.side .nav button:nth-child(7) .icon{background:#f2cf42!important}.side .nav button:nth-child(8) .icon{background:#c996ff!important}.side .nav button:nth-child(9) .icon{background:#70c6ff!important}
  .main{padding:18px 22px 38px!important}
  .top{margin-bottom:13px!important}.top-title h1{font-size:25px!important}.top-title p{font-size:10px!important;margin-top:4px!important}
  .top-actions .btn{padding:8px 11px!important;border-radius:9px!important;font-size:10px!important}
  .cards{gap:9px!important}.metric{padding:13px 14px!important;border-radius:13px!important;box-shadow:0 5px 16px rgba(25,66,61,.06)!important}.metric b{font-size:22px!important;margin-top:4px!important}.metric small{font-size:9px!important}
  .panel{border-radius:14px!important;padding:14px!important;box-shadow:0 5px 17px rgba(25,66,61,.055)!important}.grid{gap:10px!important;margin-top:10px!important}.row{padding:9px 0!important}
  .product-hero{padding:17px 18px!important;border-radius:15px!important;margin-bottom:10px!important}.product-hero h2{font-size:24px!important}.product-hero p{font-size:10px!important}.product-hero:after{font-size:54px!important}
  .prod-stats{gap:8px!important;margin-bottom:10px!important}.prod-stat{padding:11px!important;border-radius:12px!important}.prod-stat b{font-size:18px!important}
  .toolbar{padding:9px!important;border-radius:13px!important;gap:6px!important;margin-bottom:9px!important}.searchbox,.toolbar select{border-radius:9px!important}.searchbox input{padding:9px 10px!important}.toolbar select{padding:8px!important;font-size:10px!important}
  .products-panel{border-radius:14px!important}.products-head{padding:11px 13px!important}.prod-table th{padding:9px 10px!important}.prod-table td{padding:9px 10px!important}.prod-img{width:45px!important;height:45px!important;border-radius:10px!important;font-size:22px!important}.product-cell{gap:8px!important}.product-cell b{font-size:11px!important}
}