:root{ --bg:#f4f6fb;--surface:#fff;--ink:#0f172a;--muted:#64748b;--line:#e8eaf1; --brand:#7c4dff;--brand-d:#6a3af0;--brand-2:#a855f7;--brand-tint:#f1ecff;--brand-rgb:124,77,255;--accent:#ff8a00; --green:#059669;--green-tint:#ecfdf5;--red:#e11d48;--cyan:#0891b2; --sb:#141a2e;--sb-2:#1e2740;--sb-ink:#c7cde0;--sb-active:#7c4dff; --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06); --shadow-lg:0 18px 50px rgba(15,23,42,.22);--radius:16px; } /* ===== 2026 premium SaaS dark palette ===== */ :root[data-theme="dark"]{ --bg:#050b1a;--surface:#0c1628;--ink:#e9edf6;--muted:#94a0b8;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.05); --brand:#7c4dff;--brand-d:#6a3af0;--brand-2:#a855f7;--brand-tint:rgba(var(--brand-rgb),.16);--brand-rgb:124,77,255; --accent:#ff8a00;--accent-tint:rgba(255,138,0,.16); --green:#00d26a;--green-tint:rgba(0,210,106,.14);--red:#ff5b5b;--red-tint:rgba(255,91,91,.14);--cyan:#38bdf8; --panel-2:#111d33; --sb:#070e1f;--sb-2:#131f38;--sb-ink:#aeb6cc;--sb-active:#7c4dff; --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.42);--shadow-lg:0 24px 60px rgba(0,0,0,.55);--radius:16px; } :root[data-theme="dark"] .topbar{background:rgba(5,11,26,.72);border-bottom-color:var(--line)} :root[data-theme="dark"] .dgrid thead th{background:#0e1a30} :root[data-theme="dark"] .gridfoot,:root[data-theme="dark"] .dgrid tbody tr:hover{background:rgba(var(--brand-rgb),.06)} :root[data-theme="dark"] .search2,:root[data-theme="dark"] .fsel,:root[data-theme="dark"] .iconbtn,:root[data-theme="dark"] .refresh,:root[data-theme="dark"] .fld input,:root[data-theme="dark"] .fld select,:root[data-theme="dark"] .fld textarea{background:var(--surface);color:var(--ink)} :root[data-theme="dark"] .userchip,:root[data-theme="dark"] .bell{background:var(--surface)} /* dark: dashboard stat cards (were light tints → invisible text) */ :root[data-theme="dark"] .stat.st-brand, :root[data-theme="dark"] .stat.st-amber, :root[data-theme="dark"] .stat.st-cyan, :root[data-theme="dark"] .stat.st-green, :root[data-theme="dark"] .stat.st-red{background:var(--surface);border-color:var(--line)} :root[data-theme="dark"] .stat .val{color:var(--ink)} :root[data-theme="dark"] .ic-brand{background:rgba(var(--brand-rgb),.20);color:#c4b5fd} :root[data-theme="dark"] .ic-amber{background:rgba(255,138,0,.18);color:#ffb454} :root[data-theme="dark"] .ic-cyan{background:rgba(56,189,248,.2);color:#7dd3fc} :root[data-theme="dark"] .ic-green{background:rgba(0,210,106,.18);color:#5ef2a4} :root[data-theme="dark"] .ic-red{background:rgba(255,91,91,.18);color:#ff9a9a} /* dark: modals + notification popover */ :root[data-theme="dark"] .modal,:root[data-theme="dark"] .notifpop,:root[data-theme="dark"] .notifpop .nhd{background:var(--surface);color:var(--ink)} :root[data-theme="dark"] .mhint{background:#1b2547;color:#c3caff} :root[data-theme="dark"] .cancel{background:#1c2540;color:var(--ink)} :root[data-theme="dark"] .imgprev,:root[data-theme="dark"] .pthumb{background:#0f1626} :root[data-theme="dark"] .filebtn{background:#0f1626} :root[data-theme="dark"] .nitem.nclick:hover{background:#0f1626} *{box-sizing:border-box}html,body{margin:0;height:100%} body{font-family:'Inter',system-ui,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none}.muted{color:var(--muted)} svg{display:block} .app{display:flex;min-height:100vh} /* premium depth: soft radial purple glow + faint grid, dark theme only */ :root[data-theme="dark"] .app{position:relative} :root[data-theme="dark"] .app::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(900px 520px at 80% -40px,rgba(var(--brand-rgb),.16),transparent 60%),radial-gradient(680px 460px at 6% 4%,rgba(var(--brand-rgb),.08),transparent 60%)} :root[data-theme="dark"] .app::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:46px 46px; -webkit-mask:radial-gradient(1100px 640px at 74% -2%,#000,transparent 72%);mask:radial-gradient(1100px 640px at 74% -2%,#000,transparent 72%)} /* sidebar */ .sidebar{width:214px;background:var(--sb);color:var(--sb-ink);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;transition:transform .25s;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin} .sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:var(--sb-2);border-radius:6px} .snav{flex:0 0 auto} .sbrand{display:flex;align-items:flex-start;gap:11px;padding:20px 18px 16px} .sbrand .logo{width:38px;height:38px;flex-shrink:0}.sbrand .logo svg{width:38px;height:38px} .sbrand .sbtext{min-width:0} .sbrand .sbtext b{display:block;color:#fff;font-weight:800;font-size:15px;line-height:1.15} .sbrand .abadge{display:inline-block;margin-top:5px;background:rgba(var(--brand-rgb),.22);color:#c4b5fd;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:5px;letter-spacing:1px} .snav{padding:6px 12px} .navi{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;font-size:14px;font-weight:600;color:var(--sb-ink);cursor:pointer;margin-bottom:3px;transition:.15s} .navi svg{width:19px;height:19px;opacity:.85} .navi:hover{background:var(--sb-2);color:#fff} .navi.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 8px 22px rgba(var(--brand-rgb),.4)} .navi.active svg{opacity:1} .sbtn{margin:0 14px 10px;border:1px solid rgba(255,255,255,.09);background:transparent;color:var(--sb-ink);font-size:12.5px;font-weight:600;padding:9px;border-radius:10px;cursor:pointer;width:calc(100% - 28px)} .sbtn:hover{background:var(--sb-2);color:#fff} .boost{margin:8px 14px 12px;padding:16px;border-radius:14px;background:linear-gradient(160deg,rgba(var(--brand-rgb),.18),rgba(var(--brand-rgb),.05));border:1px solid rgba(var(--brand-rgb),.24);text-align:left} .boost .brk{width:38px;height:38px;border-radius:11px;background:rgba(var(--brand-rgb),.24);display:grid;place-items:center;color:#c4b5fd;margin-bottom:10px} .boost .brk svg{width:20px;height:20px} .boost>b{color:#fff;font-size:14px;display:block} .boost p{color:var(--sb-ink);font-size:11.5px;line-height:1.5;margin:4px 0 12px} .boost .bbtn{width:100%;border:0;background:var(--brand);color:#fff;font-weight:700;font-size:12.5px;padding:9px;border-radius:10px;cursor:pointer;transition:.15s} .boost .bbtn:hover{background:var(--brand-d)} .sbuser{display:flex;align-items:center;gap:10px;margin:2px 14px 16px;padding:8px 10px;border-radius:12px;background:var(--sb-2)} .sbuser .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0} .sbuser .sbuinfo{flex:1;min-width:0} .sbuser .sbuinfo b{color:#fff;font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sbuser .sbuinfo span{font-size:11px} .sbout{border:0;background:transparent;color:var(--sb-ink);cursor:pointer;padding:4px;border-radius:8px} .sbout:hover{color:#fff;background:rgba(255,255,255,.08)}.sbout svg{width:17px;height:17px} /* ===== light theme: white sidebar (dark text) ===== */ :root[data-theme="light"]{--sb:#ffffff;--sb-2:#f1f4fa;--sb-ink:#475569} :root[data-theme="light"] .sidebar{border-right:1px solid var(--line)} :root[data-theme="light"] .sbrand .sbtext b{color:var(--ink)} :root[data-theme="light"] .sbrand .abadge{background:rgba(var(--brand-rgb),.12);color:var(--brand-d)} :root[data-theme="light"] .navi:hover{color:var(--ink)} :root[data-theme="light"] .sbtn{border-color:var(--line);color:var(--ink)} :root[data-theme="light"] .sbtn:hover{background:var(--sb-2);color:var(--ink)} :root[data-theme="light"] .boost{background:linear-gradient(160deg,rgba(var(--brand-rgb),.1),rgba(var(--brand-rgb),.04));border-color:rgba(var(--brand-rgb),.22)} :root[data-theme="light"] .boost>b{color:var(--ink)} :root[data-theme="light"] .boost p{color:var(--muted)} :root[data-theme="light"] .boost .brk{background:rgba(var(--brand-rgb),.14);color:var(--brand-d)} :root[data-theme="light"] .sbuser{background:var(--sb-2)} :root[data-theme="light"] .sbuser .sbuinfo b{color:var(--ink)} :root[data-theme="light"] .sbuser .sbuinfo span{color:var(--muted)} :root[data-theme="light"] .sbout{color:var(--muted)} :root[data-theme="light"] .sbout:hover{background:var(--sb-2);color:var(--ink)} /* content */ .content{flex:1;margin-left:214px;min-width:0} .topbar{position:sticky;top:0;z-index:20;background:rgba(244,246,251,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:15px 26px} .ptitle{font-size:20px;font-weight:800;letter-spacing:-.4px} .spacer{flex:1} .hamb{display:none;border:0;background:var(--surface);width:38px;height:38px;border-radius:10px;box-shadow:var(--shadow);cursor:pointer;font-size:18px} .userchip{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px;box-shadow:var(--shadow)} .userchip .uchev{width:15px;height:15px;color:var(--muted)} .userchip .nm{font-size:13px;font-weight:700}.userchip .rl{font-size:11px;color:var(--muted)} .av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px} .topsearch{flex:0 1 480px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:0 13px;margin-left:14px} .topsearch svg{width:16px;height:16px;color:var(--muted);flex-shrink:0} .topsearch input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:13.5px;padding:10px 0;color:var(--ink)} .topsearch kbd{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-family:inherit} .ticon{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;flex-shrink:0} .ticon:hover{color:var(--ink);border-color:var(--brand)}.ticon svg{width:18px;height:18px} .wrap{padding:22px 24px 50px;max-width:1680px} .page{display:none}.page.show{display:block;animation:fade .2s} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}} /* cards / stats */ .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} @media(max-width:1080px){.stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s;min-width:0;min-height:112px;overflow:hidden} @keyframes statin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .stat:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:rgba(var(--brand-rgb),.35)} .stat .delta{font-size:11px;font-weight:700;margin-top:6px;display:flex;align-items:center;gap:5px;color:var(--muted)} .stat .delta.up{color:var(--green)}.stat .delta.down{color:var(--red)} .stat .delta span{color:var(--muted);font-weight:500} .stat .note{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:6px} .stat .sparkwrap{margin:12px -15px -15px;height:40px} .stat .spark{display:block;width:100%;height:40px} .stat.hero .delta{color:#fff}.stat.hero .delta span{color:rgba(255,255,255,.75)} .stat.hero{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:0;box-shadow:0 16px 40px rgba(var(--brand-rgb),.4)} .stat.hero .lab{color:rgba(255,255,255,.88)} .stat.hero .val{color:#fff} .stat.hero .sic{background:rgba(255,255,255,.2);color:#fff} .stat.st-brand{background:linear-gradient(135deg,#f6f7ff,#edf0ff);border-color:#e0e4ff} .stat.st-amber{background:linear-gradient(135deg,#fffaf2,#fff3e2);border-color:#ffe6c2} .stat.st-cyan{background:linear-gradient(135deg,#f1fdff,#e4fafe);border-color:#c7f0f7} .stat.st-green{background:linear-gradient(135deg,#f1fdf7,#e6fbee);border-color:#c9f0d8} .stat.st-red{background:linear-gradient(135deg,#fff4f5,#ffe9ec);border-color:#ffd4da} .stat .sthead{display:flex;align-items:center;gap:12px} .stat .stinfo{min-width:0;flex:1} .stat .sic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)} .stat .sic svg{width:22px;height:22px} .stat .lab{font-size:12.5px;color:var(--muted);font-weight:600} .stat .val{font-size:24px;font-weight:800;letter-spacing:-.6px;margin-top:3px;white-space:nowrap} .stat .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ===== premium polish: panels, tables, status pills, header ===== */ .panel{transition:border-color .2s,box-shadow .2s;animation:statin .45s ease both} :root[data-theme="dark"] .panel:hover{border-color:rgba(var(--brand-rgb),.24)} .panel .head h3,.panel>h3{letter-spacing:-.2px} .topbar{backdrop-filter:blur(14px)} /* dark status pills — translucent instead of the light chips */ :root[data-theme="dark"] .tag{background:rgba(255,255,255,.06);color:var(--ink)} :root[data-theme="dark"] .t-Placed{background:rgba(255,138,0,.16);color:#ffb454} :root[data-theme="dark"] .t-AcceptedByErp,:root[data-theme="dark"] .t-Confirmed{background:rgba(var(--brand-rgb),.18);color:#c4b5fd} :root[data-theme="dark"] .t-Assigned{background:rgba(167,139,250,.18);color:#c4b5fd} :root[data-theme="dark"] .t-Processing{background:rgba(250,204,21,.16);color:#fde047} :root[data-theme="dark"] .t-Packed{background:rgba(251,146,60,.18);color:#fdba74} :root[data-theme="dark"] .t-Shipped,:root[data-theme="dark"] .t-OutForDelivery{background:rgba(56,189,248,.18);color:#7dd3fc} :root[data-theme="dark"] .t-Dispatched{background:rgba(56,189,248,.18);color:#7dd3fc} :root[data-theme="dark"] .t-Delivered{background:rgba(0,210,106,.18);color:#5ef2a4} :root[data-theme="dark"] .t-Cancelled,:root[data-theme="dark"] .t-SyncFailed{background:rgba(255,91,91,.18);color:#ff9a9a} /* action buttons pick up the new palette */ .act.d{background:var(--brand)}.act.v{background:var(--green)}.act.c{background:var(--accent)}.act.x{background:var(--red)} /* ===== Phase 2: enterprise widgets ===== */ .wrap{padding:20px 26px 46px} .row{gap:16px;margin-top:16px} .welcome{margin-bottom:16px} .sidebar{width:206px} .content{margin-left:206px} .navi{position:relative;transition:background .15s,color .15s,transform .15s} .navi:hover{transform:translateX(2px)} .navi.active::before{content:'';position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#fff} /* KPI glass highlight */ .stat{position:relative} .stat::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%)} .stat.hero::after{background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 44%)} .sthead{position:relative;z-index:1} /* recent-orders avatars + row hover */ .miniav{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex:none} .cflex{display:flex;align-items:center;gap:9px;min-width:0} .cflex .cnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dtbl-orders tbody tr,.dtbl-low tbody tr{transition:background .15s} .dtbl-orders tbody tr:hover,.dtbl-low tbody tr:hover{background:rgba(var(--brand-rgb),.06)} /* top products — rank + gradient bars */ .topi{display:flex;align-items:center;gap:12px;margin-bottom:14px} .trank{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;background:var(--panel-2);color:var(--muted)} .trank.r1{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#3a2500} .trank.r2{background:linear-gradient(135deg,#d5deea,#9aa8bd);color:#1e293b} .trank.r3{background:linear-gradient(135deg,#eba875,#c2703c);color:#3a1e00} .tmid{flex:1;min-width:0} .tpb2{height:6px;background:var(--panel-2);border-radius:5px;overflow:hidden;margin-top:7px} .tpb2>div{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:5px;transition:width .7s cubic-bezier(.2,.7,.2,1)} .ttrend{font-size:10.5px;font-weight:700;color:var(--green);white-space:nowrap} /* low-stock alert list */ .alist{display:flex;flex-direction:column;gap:10px} .aitem{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);transition:border-color .15s} .aitem:hover{border-color:rgba(var(--brand-rgb),.3)} .aico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none} .aico svg{width:17px;height:17px} .amid{flex:1;min-width:0} .amid .anm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .amid .asku{font-size:11px;color:var(--muted)} .abar{height:6px;background:rgba(255,255,255,.07);border-radius:5px;overflow:hidden;margin-top:7px} .abar>div{height:100%;border-radius:5px;transition:width .7s cubic-bezier(.2,.7,.2,1)} .areorder{border:1px solid var(--line);background:transparent;color:var(--ink);font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:9px;cursor:pointer;flex:none;transition:.15s} .areorder:hover{background:var(--brand);color:#fff;border-color:transparent} /* activity feed timeline */ .feed{display:flex;flex-direction:column;max-height:352px;overflow:auto} .fitem{display:flex;gap:12px;padding:10px 2px;position:relative} .fitem::before{content:'';position:absolute;left:16px;top:36px;bottom:-10px;width:2px;background:var(--line)} .fitem:last-child::before{display:none} .fic{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;flex:none;z-index:1} .fic svg{width:16px;height:16px} .ftx{flex:1;min-width:0} .ftx b{font-size:13px;font-weight:600;display:block} .ftx .fsub{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ftime{font-size:11px;color:var(--muted);white-space:nowrap;flex:none} /* revenue range chips */ .chips{display:flex;gap:6px} .chip2{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:8px;cursor:pointer;transition:.15s} .chip2:hover{color:var(--ink)} .chip2.on{background:var(--brand);border-color:transparent;color:#fff} /* donut legend rows */ .legend .li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;padding:6px 0} .legend .li .sw{width:11px;height:11px;border-radius:4px;flex:none} .legend .li .lpct{margin-left:auto;color:var(--muted);font-weight:700;font-size:12px} .legend .li b{min-width:26px;text-align:right} /* ===== enterprise refinement pass ===== */ .dgrid3 .panel,.botrow .panel{padding-bottom:12px} .dtbl-orders td,.dtbl-orders th{padding:8px 8px} .omuted{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px} .cflex .cnm{font-weight:600;color:var(--ink)} /* status pill subtle glow */ :root[data-theme="dark"] .t-Delivered{box-shadow:0 2px 10px rgba(0,210,106,.16)} :root[data-theme="dark"] .t-Dispatched{box-shadow:0 2px 10px rgba(56,189,248,.14)} :root[data-theme="dark"] .t-AcceptedByErp,:root[data-theme="dark"] .t-Confirmed{box-shadow:0 2px 10px rgba(var(--brand-rgb),.16)} :root[data-theme="dark"] .t-Placed{box-shadow:0 2px 10px rgba(255,138,0,.14)} /* top products — bigger ranks + top-3 emphasis + hover */ .topi{margin-bottom:12px;transition:transform .15s} .topi:hover{transform:translateX(2px)} .topi:hover .tpb2>div{filter:brightness(1.12)} .trank{width:30px;height:30px;border-radius:9px;font-size:13px} .trank.r1{box-shadow:0 4px 14px rgba(245,158,11,.4)} .topi:has(.trank.r1) .topn{font-weight:700} /* inventory alerts — compact */ .aitem{padding:9px 11px;gap:11px} .aico{width:32px;height:32px} .amid .anm{font-size:12.5px} .areorder{padding:6px 12px;font-size:11px;background:var(--panel-2)} .areorder:hover{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff} /* activity feed compact */ .feed{max-height:none} .fitem{padding:8px 2px} /* ERP health + quick actions */ .botrow{grid-template-columns:1.6fr 1fr} .sidecol{display:flex;flex-direction:column;gap:16px} .erphealth .hrow{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px} .erphealth .hrow:last-child{border-bottom:0;padding-bottom:0} .erphealth .hrow>span:first-child{color:var(--muted);font-weight:500} .hstat{font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:7px} .hstat.ok{color:#5ef2a4} .hstat.ok::before{content:'';width:7px;height:7px;border-radius:50%;background:#00d26a;box-shadow:0 0 0 3px rgba(0,210,106,.16)} .hstat.mut{color:var(--muted)} .hstat.bad{color:#ff9a9a} .hdot{color:#00d26a;font-size:9px} .qacts{display:grid;grid-template-columns:1fr 1fr;gap:8px} .qa{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:12px;font-weight:600;padding:9px 10px;border-radius:10px;cursor:pointer;transition:.15s} .qa:hover{border-color:var(--brand);background:rgba(var(--brand-rgb),.1);transform:translateY(-1px)} .qa svg{width:14px;height:14px;color:var(--brand);flex:none} .qafull{grid-column:1/-1;justify-content:center} @media(max-width:1000px){.botrow{grid-template-columns:1fr}} /* ===== dashboard block: snapshot, order list, revenue mini, top %, inventory levels ===== */ .snap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px} .snapc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px 14px 18px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s} .snapc:hover{transform:translateY(-2px);border-color:rgba(var(--brand-rgb),.3)} .snapc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--brand),var(--brand-2))} .snapc .sl{font-size:11.5px;color:var(--muted);font-weight:600} .snapc .sv{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-top:3px} .snapc .ss2{font-size:11px;color:var(--muted);margin-top:2px} .olist{display:flex;flex-direction:column} .oli{display:flex;align-items:center;gap:12px;padding:10px 6px;border-radius:10px;transition:background .15s} .oli+.oli{border-top:1px solid var(--line)} .oli:hover{background:rgba(var(--brand-rgb),.06)} .olim{flex:1;min-width:0} .olinm{font-size:13px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .oliid{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums} .olir{text-align:right;flex:none} .oliamt{font-size:14px;font-weight:800;display:block} .olimeta{font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:3px} .olimeta .tag{font-size:9.5px;padding:2px 7px} .revmini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:2px 0 14px} .rm{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px} .rm .rml{display:block;font-size:11px;color:var(--muted);font-weight:600} .rm .rmv{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px;margin-top:2px} .rm .rmv.up{color:var(--green)}.rm .rmv.down{color:var(--red)} .topfoot{display:flex;justify-content:space-between;margin-top:5px;font-size:10.5px;color:var(--muted)} .topct{font-weight:700;color:var(--brand-2)} .lvl{font-size:9px;font-weight:800;padding:1px 6px;border-radius:5px;letter-spacing:.3px;margin-left:6px;text-transform:uppercase} .lvl.crit{background:rgba(255,91,91,.18);color:#ff9a9a}.lvl.low{background:rgba(255,138,0,.18);color:#ffb454}.lvl.warn{background:rgba(234,179,8,.2);color:#facc15} @media(max-width:1000px){.snap{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.revmini{grid-template-columns:repeat(2,1fr)}} /* user menu dropdown */ .userwrap{position:relative} .userchip{cursor:pointer;transition:border-color .15s} .userchip:hover{border-color:var(--brand)} .usermenu{position:absolute;top:calc(100% + 8px);right:0;min-width:196px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.16s;z-index:60} .usermenu.show{opacity:1;pointer-events:auto;transform:none} .umhd{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px} .umhd b{display:block;font-size:13px}.umhd span{font-size:11.5px;color:var(--muted)} .umitem{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--ink);font-size:13px;font-weight:600;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left} .umitem:hover{background:var(--panel-2)} .umitem svg{width:16px;height:16px;color:var(--muted)} .umitem.danger{color:#ff9a9a}.umitem.danger svg{color:#ff9a9a}.umitem.danger:hover{background:rgba(255,91,91,.12)} /* order status: centered donut + legend below */ .ostatus{display:flex;flex-direction:column} .donutwrap{flex-direction:column;align-items:center;gap:18px} .ostatus .donutwrap{flex:1;justify-content:center} .donutwrap .legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;width:100%} /* dashboard grid cards: capped height + hidden scrollbar (up/down slider) */ #recentBody,#topProducts,#lowBody{max-height:300px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none} #recentBody::-webkit-scrollbar,#topProducts::-webkit-scrollbar,#lowBody::-webkit-scrollbar{display:none} .ic-brand{background:var(--brand-tint);color:var(--brand)}.ic-green{background:var(--green-tint);color:var(--green)} .ic-amber{background:#fff7ed;color:#d97706}.ic-cyan{background:#ecfeff;color:var(--cyan)}.ic-red{background:#ffe4e6;color:var(--red)} .row{display:grid;gap:18px;margin-top:18px} .row.dgrid2{grid-template-columns:1.7fr 1fr} .row.dgrid3{grid-template-columns:1fr 1fr 1fr} /* keep the 3-column layout (min-width:0 + compact text lets it fit); only stack on small screens */ @media(max-width:1150px){.row.dgrid2{grid-template-columns:1fr}} @media(max-width:900px){.row.dgrid3{grid-template-columns:1fr}} .panel h3 .wk{color:var(--muted);font-weight:500;font-size:13px} .topi{margin-bottom:14px} .topr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:6px} .topn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;font-weight:600} .topn b{color:var(--muted);font-weight:700;margin-right:2px} .topmeta{flex-shrink:0;display:flex;align-items:baseline;gap:9px;white-space:nowrap} .tops{font-size:11.5px;color:var(--muted)} .toprev{flex-shrink:0} .tpb{height:7px;background:var(--brand-tint);border-radius:5px;overflow:hidden} .tpb>div{height:100%;background:linear-gradient(90deg,#818cf8,#6366f1);border-radius:5px} .ss{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap} .ss.low{background:#fef3c7;color:#92400e}.ss.out{background:#fee2e2;color:#b91c1c} :root[data-theme="dark"] .ss.low{background:rgba(245,158,11,.16);color:#fbbf24} :root[data-theme="dark"] .ss.out{background:rgba(239,68,68,.16);color:#f87171} .row.c2{grid-template-columns:340px 1fr} @media(max-width:1000px){.row.c2{grid-template-columns:1fr}} .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;min-width:0} .setgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch} .setgrid .panel{display:flex;flex-direction:column} @media(max-width:960px){.setgrid{grid-template-columns:1fr}} .panel h3{margin:0 0 14px;font-size:15px} .panel .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .panel .head h3{margin:0} /* donut + legend */ .donutwrap{display:flex;align-items:center;gap:18px} .legend{display:flex;flex-direction:column;gap:9px;font-size:13px} .legend .li{display:flex;align-items:center;gap:8px} .legend .sw{width:11px;height:11px;border-radius:3px} .legend b{margin-left:auto} table{width:100%;border-collapse:collapse;font-size:12.5px} .scrollx{overflow:auto;max-height:72vh;min-width:0;scrollbar-width:none;cursor:grab} .scrollx::-webkit-scrollbar{display:none} .scrollx.dragging{cursor:grabbing;user-select:none} .scrollx.dragging *{cursor:grabbing} .row>*{min-width:0} /* grid children must be allowed to shrink, else wide tables overflow the page */ /* dashboard mini-tables: fixed layout so they ALWAYS fit their column (long names -> ellipsis, never a scroller) */ .dtbl-orders,.dtbl-low{table-layout:fixed;width:100%} .dtbl-orders td,.dtbl-orders th,.dtbl-low td,.dtbl-low th{overflow:hidden;text-overflow:ellipsis} .dtbl-orders th:nth-child(1),.dtbl-orders td:nth-child(1){width:22%} .dtbl-orders th:nth-child(2),.dtbl-orders td:nth-child(2){width:32%} .dtbl-orders th:nth-child(3),.dtbl-orders td:nth-child(3){width:26%} .dtbl-orders th:nth-child(4),.dtbl-orders td:nth-child(4){width:20%} .dtbl-low th:nth-child(1),.dtbl-low td:nth-child(1){width:24%} .dtbl-low th:nth-child(2),.dtbl-low td:nth-child(2){width:38%} .dtbl-low th:nth-child(3),.dtbl-low td:nth-child(3){width:15%} .dtbl-low th:nth-child(4),.dtbl-low td:nth-child(4){width:23%} .dtbl-orders .tag,.dtbl-low .ss{font-size:9.5px;padding:2px 6px} .scrollx:has(.dtbl-orders),.scrollx:has(.dtbl-low){overflow-x:hidden} /* ERP Integration page */ .intbanner{display:flex;align-items:center;gap:16px} .intico{width:50px;height:50px;border-radius:14px;flex:none;display:grid;place-items:center;background:linear-gradient(150deg,rgba(139,92,246,.28),rgba(37,99,235,.22));color:#a5b4fc;border:1px solid rgba(139,92,246,.3)} .intico svg{width:24px;height:24px} .intbtxt{flex:1;min-width:0} .intbtxt h3{margin:0 0 3px;font-size:16px} .intbtxt p{margin:0;color:var(--muted);font-size:13px;line-height:1.6} .intref{flex:none;white-space:nowrap} .ipill{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 11px;white-space:nowrap} .ihint{margin:0 0 12px;color:var(--muted);font-size:12px;line-height:1.55} .intsteps{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px} .istep{display:flex;gap:12px;align-items:flex-start} .istep .in{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--brand-tint);color:var(--brand)} .istep b{font-size:13.5px;display:block;margin-bottom:2px} .istep p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55} .dtbl-int{table-layout:fixed;width:100%} .dtbl-int th:nth-child(1),.dtbl-int td:nth-child(1){width:9%;text-align:center;color:var(--muted)} .dtbl-int th:nth-child(2),.dtbl-int td:nth-child(2){width:40%;overflow:hidden;text-overflow:ellipsis} .dtbl-int th:nth-child(3),.dtbl-int td:nth-child(3){width:28%} .dtbl-int th:nth-child(4),.dtbl-int td:nth-child(4){width:23%} /* status pills for the integration tables (correct colours, never clipped) */ .pil{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap} .pil.ok{background:#dcfce7;color:#166534} .pil.warn{background:#fef3c7;color:#92400e} .pil.err{background:#fee2e2;color:#b91c1c} .pil.mut{background:var(--bg);color:var(--muted);border:1px solid var(--line)} :root[data-theme="dark"] .pil.ok{background:rgba(34,197,94,.16);color:#4ade80} :root[data-theme="dark"] .pil.warn{background:rgba(245,158,11,.16);color:#fbbf24} :root[data-theme="dark"] .pil.err{background:rgba(239,68,68,.16);color:#f87171} .intnote{margin:12px 0 0;font-size:11.5px;color:var(--muted);line-height:1.55;display:flex;gap:7px;align-items:flex-start} .intnote svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--accent,#f97316)} @media(max-width:820px){#page-integration .row{grid-template-columns:1fr!important}.intsteps{grid-template-columns:1fr}} /* ===== integration monitor dashboard ===== */ .inthead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px} .intt{margin:0;font-size:20px;font-weight:800;letter-spacing:-.4px} .ints{margin:3px 0 0;color:var(--muted);font-size:13px} .introw2{grid-template-columns:1fr 1fr} .ihcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .ihcard{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 16px;transition:border-color .2s,transform .2s} .ihcard:hover{border-color:rgba(var(--brand-rgb),.3);transform:translateY(-2px)} .ihic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.06)} .ihic svg{width:21px;height:21px} .ih-purple{background:rgba(var(--brand-rgb),.16);color:#c4b5fd}.ih-cyan{background:rgba(56,189,248,.16);color:#7dd3fc}.ih-green{background:rgba(0,210,106,.16);color:#5ef2a4}.ih-red{background:rgba(255,91,91,.16);color:#ff9a9a} .ihtx{min-width:0}.ihlab{display:block;font-size:12px;color:var(--muted);font-weight:600} .ihval{display:block;font-size:19px;font-weight:800;letter-spacing:-.3px;margin-top:2px} .hv-ok{color:#5ef2a4}.hv-warn{color:#ffb454}.hv-err{color:#ff9a9a}.hv-mut{color:var(--ink)} .ialert{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border-radius:var(--radius);background:rgba(255,91,91,.09);border:1px solid rgba(255,91,91,.3)} .ialic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(255,91,91,.16);color:#ff9a9a} .ialic svg{width:19px;height:19px} .ialtx{flex:1;min-width:0}.ialtx b{display:block;font-size:13.5px;color:#ffb4b4}.ialtx span{font-size:12px;color:var(--muted)} .ialacts{display:flex;gap:8px;flex:none} .ialbtn{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:12px;font-weight:700;padding:8px 14px;border-radius:9px;cursor:pointer;transition:.15s} .ialbtn:hover{border-color:var(--brand)} .ialbtn.primary{background:var(--red);border-color:transparent;color:#fff}.ialbtn.primary:hover{filter:brightness(1.08)} .qhtop{display:flex;align-items:baseline;gap:10px;margin:2px 0 10px} .qhrate{font-size:34px;font-weight:800;letter-spacing:-1px} .qhlab{font-size:13px;color:var(--muted);font-weight:600} .qhbar{height:8px;background:var(--panel-2);border-radius:6px;overflow:hidden} .qhbar>div{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.2,.7,.2,1)} .qhgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px} .qhm{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center} .qhm span{display:block;font-size:20px;font-weight:800} .qhm small{font-size:11px;color:var(--muted);font-weight:600} .tline{display:flex;flex-direction:column} .tstep{display:flex;align-items:center;gap:13px;padding:9px 0;position:relative} .tstep::before{content:'';position:absolute;left:6px;top:30px;bottom:-9px;width:2px;background:var(--line)} .tstep:last-child::before{display:none} .tdot{width:14px;height:14px;border-radius:50%;flex:none;z-index:1;border:2px solid var(--line);background:var(--surface)} .tstep.done .tdot{background:#00d26a;border-color:#00d26a;box-shadow:0 0 0 3px rgba(0,210,106,.16)} .tsx{flex:1;min-width:0}.tsx b{display:block;font-size:13px;font-weight:600}.tsx span{font-size:11.5px;color:var(--muted)} .tstep.wait .tsx b{color:var(--muted)} .intfilters{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 0;flex-wrap:wrap} .iflab{font-size:15px;font-weight:700} .minisum{display:flex;gap:8px;margin:0 0 12px} .ms{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:10px;color:var(--muted);font-weight:600} .ms b{font-size:16px;color:var(--ink);font-weight:800} .ms.ok b{color:#5ef2a4}.ms.rt b{color:#ffb454}.ms.er b{color:#ff9a9a} .dtbl-ob,.dtbl-se{table-layout:fixed;width:100%} .dtbl-ob td,.dtbl-ob th,.dtbl-se td,.dtbl-se th{overflow:hidden;text-overflow:ellipsis} .dtbl-ob th:nth-child(1),.dtbl-ob td:nth-child(1){width:20%} .dtbl-ob th:nth-child(2),.dtbl-ob td:nth-child(2){width:31%} .dtbl-ob th:nth-child(3),.dtbl-ob td:nth-child(3){width:24%} .dtbl-ob th:nth-child(4),.dtbl-ob td:nth-child(4){width:11%} .dtbl-ob th:nth-child(5),.dtbl-ob td:nth-child(5){width:14%} .dtbl-se th:nth-child(1),.dtbl-se td:nth-child(1){width:26%} .dtbl-se th:nth-child(3),.dtbl-se td:nth-child(3){width:24%} .miniretry{border:1px solid var(--line);background:transparent;color:var(--muted);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:14px;line-height:1} .miniretry:hover{border-color:var(--brand);color:var(--brand)} @media(max-width:1000px){.introw2{grid-template-columns:1fr}.ihcards{grid-template-columns:repeat(2,1fr)}} th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap} th{color:var(--muted);font-weight:600;font-size:12px} tr:last-child td{border-bottom:0} .tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px} .t-Placed{background:#fef3c7;color:#92400e}.t-AcceptedByErp{background:#e0e7ff;color:#3730a3} .t-Assigned{background:#ede9fe;color:#5b21b6}.t-Processing{background:#fef9c3;color:#854d0e}.t-Packed{background:#ffedd5;color:#9a3412}.t-Shipped{background:#e0f2fe;color:#075985}.t-OutForDelivery{background:#cffafe;color:#155e75} .t-Dispatched{background:#e0f2fe;color:#075985}.t-Delivered{background:#dcfce7;color:#166534}.t-Cancelled{background:#fee2e2;color:#b91c1c}.t-SyncFailed{background:#ffe4e6;color:#9f1239} .src{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:5px;letter-spacing:.3px} .src.erp{background:#e0e7ff;color:#3730a3}.src.portal{background:var(--green-tint);color:#065f46} .pthumb{width:42px;height:42px;border-radius:9px;object-fit:cover;background:#f1f5f9;display:grid;place-items:center;color:#94a3b8} .pthumb svg{width:21px;height:21px} .act{border:0;border-radius:8px;padding:7px 12px;font-weight:700;cursor:pointer;font-size:12.5px;color:#fff} .act.d{background:var(--brand)}.act.v{background:var(--green)}.act.e{background:#334155}.act.x{background:var(--red)}.act.c{background:var(--accent,#f97316)} .act:disabled{background:#e2e6ee;color:#9aa3b2;cursor:not-allowed} .ok{display:inline-block;background:#dcfce7;color:#15803d;font-weight:700;font-size:12px;padding:7px 12px;border-radius:8px;white-space:nowrap} :root[data-theme="dark"] .ok{background:rgba(34,197,94,.16);color:#4ade80} .erpsub{font-size:11px;color:#94a3b8;font-weight:600;margin-top:2px} .low{color:var(--red);font-weight:700}.inn{color:var(--green);font-weight:600} .addbtn{border:0;background:var(--brand);color:#fff;font-weight:700;padding:10px 16px;border-radius:10px;cursor:pointer;font-size:13.5px} .addbtn:hover{background:var(--brand-d)} .refresh{font-size:12px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:9px;padding:6px 12px;cursor:pointer} .empty{padding:22px;text-align:center;color:var(--muted);font-size:13px} .avatarS{width:30px;height:30px;border-radius:50%;background:var(--brand-tint);color:var(--brand-d);display:inline-grid;place-items:center;font-weight:800;font-size:12px;margin-right:8px} .pwcell{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;font-weight:600;background:var(--brand-tint,#eef2ff);color:var(--brand-d,#4338ca);padding:3px 9px;border-radius:7px;letter-spacing:.5px} :root[data-theme="dark"] .pwcell{background:rgba(var(--brand-rgb),.16);color:#c4b5fd} tbody tr:hover{background:#fafbff} /* sales trend bars */ .bars{display:flex;align-items:flex-end;gap:12px;height:180px;padding-top:12px} .bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%} .barval{font-size:10.5px;color:var(--muted);font-weight:700;margin-bottom:5px;white-space:nowrap} .barfill{width:100%;max-width:46px;background:linear-gradient(180deg,#a78bfa,#6366f1);border-radius:9px 9px 4px 4px;min-height:3px;box-shadow:0 6px 16px rgba(99,102,241,.3);transition:height .35s} .barlab{font-size:11px;color:var(--muted);margin-top:9px;font-weight:600} /* product grid */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px} .pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:.16s} .pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)} .pc-img{height:134px;background:#f6f7fb;display:grid;place-items:center;position:relative;overflow:hidden} .pc-img img{width:100%;height:100%;object-fit:cover} .pc-img svg.pic{width:56px;height:56px} .fld input:disabled,.fld textarea:disabled{background:#f6f7fb;color:#94a3b8;cursor:not-allowed} .mhint{background:var(--brand-tint);color:#3730a3;font-size:12px;font-weight:600;padding:9px 12px;border-radius:9px;margin-bottom:12px;display:none} /* toolbar + filters */ .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px} .search2{flex:1;min-width:190px;max-width:360px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:0 13px;height:42px;box-shadow:var(--shadow)} .search2 svg{width:16px;height:16px;color:var(--muted)} .search2 input{flex:1;border:0;outline:none;font-size:13.5px;background:transparent;color:var(--ink)} .fsel{height:42px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:0 14px;cursor:pointer;box-shadow:var(--shadow)} /* DATA GRID (Attio-style tabular) */ .gridcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .dgrid{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px} .dgrid thead th{position:sticky;top:0;background:#fff;color:var(--muted);font-weight:600;font-size:12.5px;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left;z-index:1} .dgrid th.sortable{cursor:pointer;user-select:none} .dgrid th.sortable:hover{color:var(--ink)} .dgrid th .chev{display:inline-block;margin-left:5px;opacity:.4;vertical-align:-2px} .dgrid th.sorted{color:var(--brand)}.dgrid th.sorted .chev{opacity:1} .dgrid td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap} .dgrid th,.dgrid td{border-right:1px solid var(--line)} .dgrid th:last-child,.dgrid td:last-child{border-right:0} .dgrid tbody tr:last-child td{border-bottom:0} .dgrid tbody tr{transition:background .12s} .dgrid tbody tr:hover{background:#f7f8fd} .dgrid .ar{text-align:right}.dgrid .ac{text-align:center} .dgrid .rownum{width:52px;color:#a2abbd;font-size:12.5px;font-weight:600;text-align:center} .omono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--muted);font-weight:700} .pcell{display:flex;align-items:center;gap:11px} .pcell .thumb{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;overflow:hidden} .pcell .thumb img{width:100%;height:100%;object-fit:cover} .pcell .thumb svg{width:21px;height:21px} .pcell .pnm{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:5px} .pcell .psku{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px} .lnk{color:#c1c8d6;transition:.12s} .dgrid tbody tr:hover .lnk{color:var(--brand)} .openbtn{margin-left:auto;opacity:0;border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 13px;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.05);transition:.12s} .dgrid tbody tr:hover .openbtn{opacity:1} .openbtn:hover{border-color:var(--brand);color:var(--brand)} .price-main{font-weight:800} .pill{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:8px;line-height:1} .pill.hi{background:var(--green-tint);color:#047857}.pill.md{background:#fef7e0;color:#b45309}.pill.lo{background:#fee2e4;color:#be123c} .oitemsum{font-size:11.5px;color:var(--muted);margin-top:2px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* order detail modal */ .odmeta{background:var(--panel-2,#f9fafe);border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin:6px 0 16px;display:flex;flex-direction:column;gap:7px} .odrow{display:flex;justify-content:space-between;font-size:13px}.odrow span{color:var(--muted)} .odhd{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px} .oditem{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2,#eef1f8)} .oditem:last-child{border-bottom:0} .oditem .odq{font-weight:800;color:var(--brand);min-width:34px} .oditem .odn{flex:1;font-size:13.5px;font-weight:600}.oditem .odn small{display:block;color:var(--muted);font-weight:500;font-size:11.5px} .oditem .odp{font-weight:700;font-size:13.5px} .odtotal{display:flex;justify-content:space-between;align-items:center;margin:14px 0 4px;padding-top:12px;border-top:2px solid var(--line);font-size:18px;font-weight:800} .drow2{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px} .drow2:last-child{border-bottom:0} .gridfoot{padding:11px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);background:#fbfcff} .rowacts{display:flex;gap:7px;justify-content:flex-end} .iconbtn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px;cursor:pointer;color:var(--muted);display:inline-grid;place-items:center;transition:.12s} .iconbtn svg{display:block;width:16px;height:16px} .iconbtn:hover{background:#f1f3f9} .iconbtn.edit:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)} .iconbtn.del:hover{border-color:var(--red);color:var(--red);background:#fff1f2} /* welcome header */ .welcome{margin-bottom:22px} .welcome h1{margin:0;font-size:25px;letter-spacing:-.6px} .welcome .sub{color:var(--muted);font-size:13.5px;margin-top:4px} .pc-img .src{position:absolute;top:9px;left:9px} .pc-body{padding:12px 13px 14px} .pc-sku{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.3px} .pc-name{font-weight:700;font-size:14px;margin:3px 0 7px;min-height:36px;line-height:1.25} .pc-price{font-size:18px;font-weight:800;letter-spacing:-.3px} .pc-b2b{font-size:11.5px;font-weight:600;color:var(--muted)} .pc-acts{display:flex;gap:8px;margin-top:11px} .pc-acts .act{flex:1;text-align:center} /* modal */ .overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);opacity:0;pointer-events:none;transition:.2s;z-index:60} .overlay.show{opacity:1;pointer-events:auto} .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);z-index:70;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:24px;width:100%;max-width:470px;max-height:92vh;overflow:auto;opacity:0;pointer-events:none;transition:.2s} .modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)} /* ===== Premium Shopify-style product modal ===== */ #mProduct.pmodal{max-width:1700px;width:95vw;height:92vh;max-height:92vh;padding:0;border-radius:24px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 100px rgba(15,23,42,.35)} .pmhead{padding:22px 32px 0;border-bottom:1px solid #E5E7EB;flex-shrink:0} .pmhead-top{display:flex;align-items:flex-start;gap:16px} .pmicon{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#7c6cf7,#5b46e0);display:grid;place-items:center;color:#fff;flex-shrink:0;box-shadow:0 6px 16px rgba(109,92,245,.32)} .pmicon svg{width:24px;height:24px} #mProduct .pmhead h3{margin:0;font-size:23px;font-weight:800;letter-spacing:-.3px} .pmsub{font-size:13.5px;color:var(--muted);margin-top:3px} .pmx{margin-left:auto;width:38px;height:38px;border-radius:10px;border:1px solid #E5E7EB;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;flex-shrink:0} .pmx:hover{background:var(--bg,#f3f4f6)} .pmtabs{display:flex;gap:8px;margin-top:18px;overflow-x:auto;scrollbar-width:none} .pmtabs::-webkit-scrollbar{display:none} .pmtab{border:0;background:none;padding:11px 16px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;border-radius:9px 9px 0 0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:.15s} .pmtab svg{width:16px;height:16px} .pmtab.active{color:var(--brand);border-bottom-color:var(--brand)} .pmtab:hover:not(.active){color:var(--brand);background:rgba(var(--brand-rgb),.07)} .pmbody{flex:1;overflow:auto;display:grid;grid-template-columns:40% 60%;min-height:0} .pmbody.novar{grid-template-columns:1fr} .pmbody.novar .pmcol-left{border-right:0} .pmcol{padding:28px 32px} .pmcol-left{border-right:1px solid #E5E7EB} .pmcol h4{position:relative;padding-left:13px} .pmcol h4::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--brand),var(--brand-2))} .pmcol .fld input,.pmcol .fld textarea,.pmcol .fld select{transition:border-color .15s,box-shadow .15s} .pmcol .fld input:focus,.pmcol .fld textarea:focus{box-shadow:0 0 0 3px var(--brand-tint)} .pmcol h4{margin:0 0 16px;font-size:16px;font-weight:800} .pmfoot{flex-shrink:0;border-top:1px solid #E5E7EB;padding:18px 24px 24px;display:flex;align-items:center;gap:14px;background:var(--surface)} .pmfoot .merr{flex:1;margin:0;order:0} .pmfoot .cancel{margin:0;order:1;width:140px;height:50px;padding:0;border-radius:12px;font-weight:700} .pmfoot .save{margin:0;order:2;width:auto;min-width:210px;height:50px;padding:0 30px;border-radius:12px;font-weight:700;font-size:15px;background:linear-gradient(135deg,#7c6cf7,#5b46e0);box-shadow:0 8px 20px rgba(109,92,245,.35);transition:transform .16s,box-shadow .16s} .pmfoot .save:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(109,92,245,.45)} .pmg2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .pmg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .pmcol .fld{margin-bottom:16px} .cc-gallery{margin-top:16px} .cclabel{margin:18px 0 10px} /* product images gallery — single horizontal row */ .pgal{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin} .pgal::-webkit-scrollbar{height:6px} .pgal::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px} .pgi{position:relative;width:80px;height:80px;flex-shrink:0;border:1.5px solid #E5E7EB;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s} .pgi:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1)} .pgi.main{border-color:var(--brand);box-shadow:0 0 0 2px rgba(var(--brand-rgb),.2)} .pgi img{width:100%;height:100%;object-fit:contain;padding:7px} .pgi .pgx{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;cursor:pointer;line-height:1} .pgbadge{position:absolute;bottom:0;left:0;right:0;background:var(--brand);color:#fff;font-size:8.5px;font-weight:800;text-align:center;padding:2px 0;letter-spacing:.3px;text-transform:uppercase} .pgadd{width:80px;height:80px;flex-shrink:0;border:1.6px dashed #cbd5e1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:11px;font-weight:600;text-align:center;gap:3px;transition:.15s} .pgadd:hover{border-color:var(--brand);color:var(--brand);background:rgba(var(--brand-rgb),.06)} .pgadd svg{width:18px;height:18px} /* colour card */ .pmrhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .btnpurple{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border:0;border-radius:11px;padding:11px 18px;font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 6px 16px rgba(var(--brand-rgb),.3)} .btnpurple:hover{filter:brightness(1.06)} .ccard{border:1px solid #E5E7EB;border-radius:16px;background:#F8FAFC;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:14px 18px;margin-bottom:14px;transition:box-shadow .18s} .ccard:hover{box-shadow:0 8px 22px rgba(15,23,42,.08)} .cchead{display:flex;align-items:center;gap:14px;cursor:pointer} .cc-thumb{width:52px;height:52px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid #E5E7EB;flex-shrink:0} .ccinfo{flex:1;min-width:0} .ccname-row{display:flex;align-items:center;gap:9px} .cc-name{border:0;background:transparent;font-size:16px;font-weight:800;color:var(--ink);padding:2px 0;min-width:0;width:120px} .cc-name:focus{outline:1px solid #E5E7EB;border-radius:6px;padding:2px 8px} .ccbadge{font-size:11px;font-weight:700;color:#16a34a;background:rgba(22,163,74,.12);padding:2px 10px;border-radius:20px} .ccbadge.off{color:#9ca3af;background:rgba(156,163,175,.15)} .cc-summary{font-size:12px;color:var(--muted);font-weight:600;margin-top:3px} .ccactions{display:flex;gap:6px;flex-shrink:0} .ccbtn{width:34px;height:34px;border-radius:9px;border:1px solid #E5E7EB;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer} .cctog{flex-shrink:0;color:var(--muted);transition:transform .15s;font-size:11px;width:16px;text-align:center} .ccard.collapsed .cctog{transform:rotate(-90deg)} .ccbody{margin-top:12px} .ccard.collapsed .ccbody{display:none} .cc-gallery{display:flex;flex-wrap:nowrap;gap:8px;margin-top:0;overflow-x:auto;padding-bottom:4px} .cc-gallery .pgi,.cc-gallery .pgadd{width:56px;height:56px;flex-shrink:0} .cc-gallery .pgbadge{font-size:7px;padding:1px 0} .ccbtn:hover{background:var(--surface);border-color:var(--brand);color:var(--brand)} .ccbtn.del:hover{border-color:#ef4444;color:#ef4444} .ccbtn svg{width:15px;height:15px} .cclabel{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:12px 0 6px} .ccchips{display:flex;flex-wrap:wrap;gap:7px} .szchip{min-width:40px;padding:8px 10px;border:1.5px solid var(--border);border-radius:9px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;transition:.14s} .szchip.on{border-color:var(--brand);color:var(--brand);background:rgba(var(--brand-rgb),.08)} .szcustom{padding:8px 12px;border:1.5px dashed var(--brand);border-radius:9px;background:transparent;color:var(--brand);font-size:13px;font-weight:700;cursor:pointer} .ccstock{margin-top:6px} .skgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .skcard{display:flex;flex-direction:column;gap:5px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;padding:8px 9px;min-width:0;transition:border-color .15s,box-shadow .15s} .skcard:hover{border-color:var(--brand);box-shadow:0 4px 12px rgba(var(--brand-rgb),.12)} .skc-size{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px} .sk-qty{width:100%;border:1px solid #E5E7EB;border-radius:7px;padding:5px 8px;font-size:13px;text-align:center;background:var(--bg,#fafbfc);color:var(--ink);font-weight:700} .sk-qty:focus{border-color:var(--brand);outline:none} .ccfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} .vu-price{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted)} .vu-price input{width:120px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 11px;font-size:13.5px;font-weight:700} .vu-price input:focus{outline:none;border-color:var(--brand)} /* colour/variant picker in card header — searchable dropdown styled like a title */ .cc-namesel{position:relative;min-width:120px;max-width:230px} .cc-namesel .sdrop-btn{height:auto;min-height:30px;border:0;background:transparent;padding:2px 5px;font-size:16px;font-weight:800;color:var(--ink);gap:7px;justify-content:flex-start} .cc-namesel .sdrop-btn:hover,.cc-namesel .sdrop.open .sdrop-btn{background:var(--bg);border:0;border-radius:8px} .cc-namesel .sdrop-lbl{flex:0 1 auto} .cc-namesel .sdrop-lbl.ph{color:var(--muted);font-weight:700} .cc-namesel .sdrop-menu{right:auto;min-width:212px} .cc-extra{max-width:300px;margin-bottom:2px} .tgl{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:600} .tgl input{display:none} .tglsw{width:40px;height:22px;border-radius:20px;background:#cbd5e1;position:relative;transition:.18s;flex-shrink:0} .tglsw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .tgl input:checked+.tglsw{background:var(--brand)} .tgl input:checked+.tglsw::after{transform:translateX(18px)} /* ---- dark-mode fixes for the Edit Product modal (its sub-parts use hardcoded light colours) ---- */ :root[data-theme="dark"] .pmhead, :root[data-theme="dark"] .pmcol-left, :root[data-theme="dark"] .pmfoot{border-color:var(--line)} :root[data-theme="dark"] .pmx{border-color:var(--line)} :root[data-theme="dark"] .pmx:hover{background:rgba(255,255,255,.06)} :root[data-theme="dark"] .pgi{background:#0f1626;border-color:var(--line)} :root[data-theme="dark"] .pgadd{border-color:rgba(255,255,255,.2);background:transparent;color:var(--muted)} :root[data-theme="dark"] .pgal::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)} :root[data-theme="dark"] .ccard{background:rgba(255,255,255,.035);border-color:var(--line)} :root[data-theme="dark"] .ccard:hover{box-shadow:0 8px 22px rgba(0,0,0,.45)} :root[data-theme="dark"] .cc-thumb{background:#0f1626;border-color:var(--line)} :root[data-theme="dark"] .cc-name{color:var(--ink)} :root[data-theme="dark"] .cc-name:focus{outline-color:var(--line)} :root[data-theme="dark"] .ccbtn{background:#0f1626;border-color:var(--line);color:var(--ink)} :root[data-theme="dark"] .ccbtn:hover{background:rgba(var(--brand-rgb),.16);border-color:var(--brand);color:var(--brand)} :root[data-theme="dark"] .szchip{background:#0f1626;border-color:var(--line);color:var(--ink)} :root[data-theme="dark"] .szchip.on{background:rgba(var(--brand-rgb),.2);border-color:var(--brand);color:var(--brand)} :root[data-theme="dark"] .skcard{background:#0f1626;border-color:var(--line)} :root[data-theme="dark"] .skcard:hover{border-color:var(--brand)} :root[data-theme="dark"] .sk-qty{background:#050b1a;border-color:var(--line);color:var(--ink)} :root[data-theme="dark"] .tglsw{background:rgba(255,255,255,.22)} @media(max-width:900px){.pmbody{grid-template-columns:1fr}.pmcol-left{border-right:0;border-bottom:1px solid var(--border)}} @media(max-width:560px){.pmg3,.pmg2{grid-template-columns:1fr}.skgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.pmfoot .save{min-width:0;flex:1;padding:0 14px}.pmfoot .cancel{width:110px}} .modal h3{margin:0 0 16px;font-size:18px} .fld{margin-bottom:12px}.fld label{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-bottom:4px} .fld input,.fld textarea,.fld select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;outline:none;font-family:inherit;background:#fff} .fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--brand)} .pwwrap{position:relative} .pwwrap input{padding-right:44px} .pweye{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:0;background:transparent;-webkit-appearance:none;appearance:none;box-shadow:none;cursor:pointer;padding:4px 6px;color:var(--muted);line-height:1;display:grid;place-items:center} .pweye svg{display:block} .pweye:hover{color:var(--brand)} .pmcol .fld input,.pmcol .fld select{height:44px} .pmcol .fld textarea{border-radius:12px} /* searchable category combobox */ .combo{position:relative} .combo-btn{width:100%;height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:14px;font-family:inherit;cursor:pointer;text-align:left} .combo-btn:hover{border-color:var(--brand)} .combo-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .combo-lbl.ph{color:var(--muted)} .combo-caret{color:var(--muted);font-size:11px;flex-shrink:0} .combo-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.22);display:none;overflow:hidden} .combo-menu.open{display:block} .combo-search{padding:8px} .combo-search input{width:100%;height:38px;padding:0 12px;border:1.5px solid var(--line);border-radius:9px;font-size:13.5px;font-family:inherit;background:var(--bg,#fafbfc);color:var(--ink);outline:none} .combo-search input:focus{border-color:var(--brand)} .combo-list{max-height:200px;overflow-y:auto;padding:0 6px 6px;scrollbar-width:thin;scrollbar-color:rgba(120,120,140,.45) transparent} .combo-list::-webkit-scrollbar{width:7px} .combo-list::-webkit-scrollbar-thumb{background:rgba(120,120,140,.4);border-radius:6px} .combo-list::-webkit-scrollbar-track{background:transparent} /* thin scrollbar for the product modal body too */ .pmbody{scrollbar-width:thin;scrollbar-color:rgba(120,120,140,.4) transparent} .pmbody::-webkit-scrollbar,.pmcol-right::-webkit-scrollbar{width:8px} .pmbody::-webkit-scrollbar-thumb,.pmcol-right::-webkit-scrollbar-thumb{background:rgba(120,120,140,.38);border-radius:7px} .pmbody::-webkit-scrollbar-track,.pmcol-right::-webkit-scrollbar-track{background:transparent} .combo-opt{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;justify-content:space-between;gap:8px} .combo-opt:hover{background:rgba(109,92,245,.13)} .combo-opt.on{background:rgba(109,92,245,.10);font-weight:700} .combo-check{color:#6d5cf5;flex-shrink:0} .combo-add{color:#6d5cf5;font-weight:700;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px;padding-bottom:11px} .combo-add:hover{background:rgba(109,92,245,.15)} .combo-empty{padding:9px 12px;color:var(--muted);font-size:13px} /* add-new-category mini modal (sits above the product modal) */ .catm-ov{position:fixed;inset:0;background:rgba(10,12,25,.55);backdrop-filter:blur(2px);z-index:9998;display:none} .catm-ov.show{display:block} .catm{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:9999;width:min(92vw,420px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);padding:24px;display:none;opacity:0;transition:opacity .16s,transform .16s} .catm.show{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)} .catm-h{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:16px} .catm-l{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px} .catm input{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--line);border-radius:11px;font-size:15px;font-family:inherit;background:var(--bg,#fafbfc);color:var(--ink);outline:none} .catm input:focus{border-color:var(--brand)} .catm-f{display:flex;gap:10px;justify-content:flex-end;margin-top:20px} .catm-cancel{height:44px;padding:0 20px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--ink);font-weight:700;cursor:pointer} .catm-save{height:44px;padding:0 22px;border:0;border-radius:11px;background:linear-gradient(135deg,#7c6cf7,#5b46e0);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(109,92,245,.35)} .catm-save:hover{filter:brightness(1.06)} /* notifications bell + popover */ .bell{position:relative;border:1px solid var(--line);background:var(--surface);width:38px;height:38px;border-radius:10px;box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;color:var(--muted)} .bell:hover{color:var(--ink)}.bell svg{width:19px;height:19px} .bell .badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:9px;display:none;place-items:center;border:2px solid var(--bg)} .bell .badge.show{display:grid} .notifpop{position:fixed;top:62px;right:26px;width:350px;max-height:82vh;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);z-index:80;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.16s;scrollbar-width:none} .notifpop::-webkit-scrollbar{display:none} .notifpop.show{opacity:1;pointer-events:auto;transform:none} .notifpop .nhd{padding:14px 16px;font-weight:800;font-size:14.5px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff} .nitem{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;align-items:center} .nitem:last-child{border-bottom:0} .nitem .ntx{flex:1;min-width:0} .nitem.nclick{cursor:pointer;transition:background .12s} .nitem.nclick:hover{background:#f7f9ff} .ngo{width:16px;height:16px;color:#c1c8d6;flex-shrink:0} .nitem.nclick:hover .ngo{color:var(--brand)} .nitem .nic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0} .nitem .nic svg{width:16px;height:16px} .nitem .ntx b{display:block;font-weight:700;margin-bottom:1px} .nitem .ntx span{color:var(--muted);font-size:12px} .nempty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px} .row2{display:flex;gap:12px}.row2>*{flex:1} .imgpick{display:flex;gap:12px;align-items:center} .imgprev{width:64px;height:64px;border-radius:10px;object-fit:cover;background:#f1f5f9;border:1px solid var(--line)} .filebtn{border:1px dashed var(--line);background:#fafbff;color:var(--brand);font-weight:600;font-size:12.5px;padding:9px 14px;border-radius:10px;cursor:pointer} .merr{color:var(--red);font-size:12.5px;min-height:16px;margin:2px 0} .save{width:100%;border:0;background:var(--brand);color:#fff;font-weight:800;padding:13px;border-radius:11px;cursor:pointer;font-size:15px;margin-top:6px} .cancel{width:100%;border:0;background:#f1f3f9;color:var(--ink);font-weight:700;padding:11px;border-radius:11px;cursor:pointer;margin-top:8px} .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(10px);background:linear-gradient(180deg,#1e2942,#141c31);color:#f2f5ff;padding:13px 22px;border-radius:12px;font-size:14px;font-weight:600;letter-spacing:.1px;border:1px solid rgba(var(--brand-rgb),.55);box-shadow:0 12px 36px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset;opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;z-index:9999;max-width:calc(100vw - 32px);text-align:center} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .scrim{display:none} @media(max-width:900px){ .sidebar{transform:translateX(-100%)}.sidebar.open{transform:none} .content{margin-left:0}.hamb{display:block} .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35;opacity:0;pointer-events:none;transition:.2s} .scrim.show{opacity:1;pointer-events:auto} } /* ===== ERP Operations Center ===== */ .livebadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--green,#00d26a);background:rgba(0,210,106,.1);border:1px solid rgba(0,210,106,.25);padding:7px 12px;border-radius:20px} .dot{width:8px;height:8px;border-radius:50%;background:var(--green,#00d26a);flex-shrink:0} .dot.warn{background:var(--accent,#ff8a00)} .dot.bad{background:var(--red,#ff5b5b)} .dot.mut{background:#64748b} .dot.pulse{animation:ocpulse 1.8s infinite} @keyframes ocpulse{0%{box-shadow:0 0 0 0 rgba(0,210,106,.5)}70%{box-shadow:0 0 0 6px rgba(0,210,106,0)}100%{box-shadow:0 0 0 0 rgba(0,210,106,0)}} .ocbar{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px} .ocpill{background:var(--surface,#0c1628);border:1px solid var(--border);border-radius:14px;padding:13px 15px;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden;transition:border-color .18s} .ocpill::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green,#00d26a)} .ocpill.warn::before{background:var(--accent,#ff8a00)} .ocpill.bad::before{background:var(--red,#ff5b5b)} .ocpill.mut::before{background:#64748b} .ocpill .l{font-size:10.5px;color:var(--muted,#9aa4bf);font-weight:700;letter-spacing:.4px;text-transform:uppercase} .ocpill .v{font-size:15px;font-weight:800;color:var(--ink,#e8edf7);display:flex;align-items:center;gap:8px} .ockpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} .ockpi{background:var(--surface,#0c1628);border:1px solid var(--border);border-radius:16px;padding:16px 17px;transition:transform .18s,border-color .18s} .ockpi:hover{transform:translateY(-2px);border-color:rgba(var(--brand-rgb),.4)} .ockpi .kl{font-size:12px;color:var(--muted,#9aa4bf);font-weight:600;display:flex;align-items:center;gap:9px} .ockpi .kic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0} .ockpi .kic svg{width:16px;height:16px} .kic.p{background:rgba(var(--brand-rgb),.15);color:var(--brand)} .kic.c{background:rgba(0,190,220,.14);color:#22d3ee} .kic.r{background:rgba(255,91,91,.14);color:#ff7a7a} .kic.a{background:rgba(255,138,0,.14);color:#ffb454} .ockpi .kv{font-size:27px;font-weight:800;color:var(--ink,#e8edf7);margin-top:11px;letter-spacing:-.5px;line-height:1} .ockpi .ks{font-size:11.5px;color:var(--muted,#9aa4bf);margin-top:6px;display:flex;align-items:center;gap:7px} .kbadge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px} .kbadge.ok{color:#00d26a;background:rgba(0,210,106,.12)} .kbadge.bad{color:#ff5b5b;background:rgba(255,91,91,.12)} .kbadge.mut{color:#94a3b8;background:rgba(148,163,184,.12)} .ocflow{display:flex;align-items:stretch;gap:0;background:var(--surface,#0c1628);border:1px solid var(--border);border-radius:16px;padding:16px 12px;margin-bottom:16px;overflow-x:auto} .ocnode{flex:1;min-width:104px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 6px;text-align:center;position:relative} .ocnode .ndot{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(0,210,106,.12);color:var(--green,#00d26a);border:1px solid rgba(0,210,106,.3);box-shadow:0 0 14px rgba(0,210,106,.15)} .ocnode .ndot svg{width:18px;height:18px} .ocnode.wait .ndot{background:rgba(148,163,184,.08);color:#64748b;border-color:var(--border);box-shadow:none} .ocnode .nlab{font-size:11.5px;font-weight:700;color:var(--ink,#e8edf7)} .ocnode .ncnt{font-size:12px;color:var(--muted,#9aa4bf);font-weight:600} .ocnode:not(:last-child)::after{content:'';position:absolute;right:-1px;top:18px;width:calc(100% - 40px);height:2px;background:linear-gradient(90deg,rgba(var(--brand-rgb),.4),rgba(var(--brand-rgb),.05));transform:translateX(50%)} .ocgrid{display:grid;grid-template-columns:320px 1fr;gap:14px;margin-bottom:16px} .ocpanel{background:var(--surface,#0c1628);border:1px solid var(--border);border-radius:16px;padding:18px} .ocph{font-size:14px;font-weight:700;color:var(--ink,#e8edf7);margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;gap:10px} .ocph .wk{font-size:11px;color:var(--muted,#9aa4bf);font-weight:500} .ringwrap{display:flex;flex-direction:column;align-items:center;gap:16px} .ring{position:relative;width:150px;height:150px} .ring .rc{font-size:30px;font-weight:800;fill:var(--ink,#e8edf7)} .ringmg{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%} .rmc{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:11px 13px} .rmc b{font-size:20px;font-weight:800;display:block;line-height:1.1} .rmc small{font-size:11px;color:var(--muted,#9aa4bf)} .ocfeed{max-height:350px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;scrollbar-width:thin} .afi{display:flex;align-items:center;gap:12px;padding:10px 9px;border-radius:10px;transition:background .15s} .afi:hover{background:rgba(255,255,255,.03)} .afi .aic{width:9px;height:9px;border-radius:50%;flex-shrink:0} .afi .atx{flex:1;font-size:12.5px;color:var(--ink,#e8edf7);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .afi .ati{font-size:11px;color:var(--muted,#9aa4bf);white-space:nowrap} .oevs{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:360px;overflow-y:auto;scrollbar-width:thin;padding-right:2px} .oev{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px;padding:12px 13px;transition:border-color .15s} .oev:hover{border-color:rgba(var(--brand-rgb),.35)} .oev .oevh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px} .oev .oid{font-size:12.5px;font-weight:700;color:var(--ink,#e8edf7)} .oev .otype{font-size:11px;color:var(--muted,#9aa4bf);font-family:ui-monospace,'Cascadia Code',monospace} .oev .oevf{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:var(--muted,#9aa4bf)} .ocfail{background:linear-gradient(135deg,rgba(255,91,91,.09),rgba(255,91,91,.02));border:1px solid rgba(255,91,91,.25);border-radius:16px;padding:16px 18px;margin-bottom:16px} .ocfail.ok{background:linear-gradient(135deg,rgba(0,210,106,.06),transparent);border-color:rgba(0,210,106,.2)} .ocfail .fhd{font-size:13.5px;font-weight:700;color:var(--ink,#e8edf7);display:flex;justify-content:space-between;align-items:center;gap:12px} #failList .fitem{display:flex;align-items:center;gap:12px;background:rgba(255,91,91,.07);border:1px solid rgba(255,91,91,.22);border-radius:12px;padding:11px 14px;margin-top:11px} #failList .fitem .fic{color:var(--red,#ff5b5b);flex-shrink:0} #failList .fitem .ftx{flex:1;min-width:0} #failList .fitem .ftx b{font-size:12.5px;color:var(--ink,#e8edf7)} #failList .fitem .ftx small{display:block;font-size:11px;color:var(--muted,#9aa4bf);margin-top:2px} .ocqa{display:flex;gap:10px;flex-wrap:wrap} .qabtn{display:inline-flex;align-items:center;gap:8px;background:var(--surface,#0c1628);border:1px solid var(--border);border-radius:11px;padding:10px 15px;color:var(--ink,#e8edf7);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s} .qabtn:hover{border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.08);transform:translateY(-1px)} .qabtn svg{width:15px;height:15px} .qabtn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff} .qabtn.primary:hover{filter:brightness(1.08)} @media(max-width:1050px){.ocgrid{grid-template-columns:1fr}.ocbar{grid-template-columns:repeat(3,1fr)}.ockpis{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.ocbar{grid-template-columns:repeat(2,1fr)}.ockpis{grid-template-columns:1fr}.oevs{grid-template-columns:1fr}} /* ============ ERP Integration Control Center — 2026 premium (Stripe/Linear light) ============ */ #page-integration{--pri:#635BFF;--pri-d:#4F46E5;--csh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);--csh-h:0 12px 30px rgba(16,24,40,.10)} /* header */ #page-integration .inthead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap} #page-integration .intt{margin:0;font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--ink)} #page-integration .ints{margin:4px 0 0;color:var(--muted);font-size:13.5px} #page-integration .intactions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} #page-integration .livebadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#16a34a;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.24);padding:8px 13px;border-radius:999px} #page-integration .dot{width:8px;height:8px;border-radius:50%;background:#22C55E;flex-shrink:0} #page-integration .dot.warn{background:#F59E0B}#page-integration .dot.bad{background:#EF4444}#page-integration .dot.mut{background:#94A3B8} #page-integration .dot.pulse{animation:ocpulse 1.8s infinite} #page-integration .intref{flex:none;white-space:nowrap;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;padding:0 15px;cursor:pointer;transition:.16s} #page-integration .intref:hover{border-color:var(--pri);color:var(--pri)} #page-integration .intsync{height:38px;border-radius:10px;border:0;background:linear-gradient(135deg,#6D5DFF,#4F46E5);color:#fff;font-weight:700;font-size:13px;padding:0 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 20px rgba(99,91,255,.32);transition:.16s} #page-integration .intsync:hover{transform:translateY(-1px);filter:brightness(1.05)} #page-integration .intsync svg{width:16px;height:16px} /* ERP health cards */ #page-integration .ocbar{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:16px} #page-integration .ocpill{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;box-shadow:var(--csh);transition:transform .18s,box-shadow .18s} #page-integration .ocpill:hover{transform:translateY(-2px);box-shadow:var(--csh-h)} #page-integration .ocpill::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#22C55E} #page-integration .ocpill.warn::before{background:#F59E0B}#page-integration .ocpill.bad::before{background:#EF4444}#page-integration .ocpill.mut::before{background:#94A3B8} #page-integration .ocpill .l{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.5px;text-transform:uppercase} #page-integration .ocpill .v{font-size:15.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px} /* KPI metric cards */ #page-integration .ockpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px} #page-integration .ockpi{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--csh);transition:transform .18s,box-shadow .18s} #page-integration .ockpi:hover{transform:translateY(-3px);box-shadow:var(--csh-h)} #page-integration .ockpi .kl{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:10px} #page-integration .ockpi .kic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex-shrink:0} #page-integration .ockpi .kic svg{width:17px;height:17px} #page-integration .kic.p{background:rgba(99,91,255,.12);color:#635BFF}#page-integration .kic.c{background:rgba(59,130,246,.12);color:#3B82F6}#page-integration .kic.r{background:rgba(239,68,68,.12);color:#EF4444}#page-integration .kic.a{background:rgba(245,158,11,.12);color:#F59E0B} #page-integration .ockpi .kv{font-size:30px;font-weight:800;color:var(--ink);margin-top:12px;letter-spacing:-.6px;line-height:1} #page-integration .ockpi .ks{font-size:11.5px;color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:7px} #page-integration .kbadge{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px} #page-integration .kbadge.ok{color:#16a34a;background:rgba(34,197,94,.13)}#page-integration .kbadge.bad{color:#dc2626;background:rgba(239,68,68,.12)}#page-integration .kbadge.mut{color:#64748b;background:rgba(148,163,184,.14)} /* sync flow pipeline */ #page-integration .ocflow{display:flex;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 14px;margin-bottom:16px;overflow-x:auto;box-shadow:var(--csh)} #page-integration .ocnode{flex:1;min-width:108px;display:flex;flex-direction:column;align-items:center;gap:9px;padding:2px 6px;text-align:center;position:relative} #page-integration .ocnode .ndot{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(99,91,255,.10);color:#635BFF;border:1px solid rgba(99,91,255,.22);transition:.2s} #page-integration .ocnode .ndot svg{width:19px;height:19px} #page-integration .ocnode:not(.wait) .ndot{background:linear-gradient(135deg,rgba(99,91,255,.16),rgba(79,70,229,.10));animation:ndpulse 2.6s ease-in-out infinite} @keyframes ndpulse{0%,100%{box-shadow:0 0 0 4px rgba(99,91,255,.08)}50%{box-shadow:0 0 0 8px rgba(99,91,255,.02)}} #page-integration .ocnode.wait .ndot{background:#F1F3F9;color:#94A3B8;border-color:var(--line);animation:none} #page-integration .ocnode .nlab{font-size:12px;font-weight:700;color:var(--ink)} #page-integration .ocnode .ncnt{font-size:12px;color:var(--muted);font-weight:600} #page-integration .ocnode:not(:last-child)::after{content:'';position:absolute;right:-1px;top:20px;width:calc(100% - 46px);height:2px;background:linear-gradient(90deg,rgba(99,91,255,.35),rgba(99,91,255,.08));transform:translateX(50%)} /* content panels */ #page-integration .ocgrid{display:grid;grid-template-columns:340px 1fr;gap:16px;margin-bottom:16px} #page-integration .ocpanel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--csh)} #page-integration .ocph{font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:10px} #page-integration .ocph .wk{font-size:11px;color:var(--muted);font-weight:500} /* sync health ring */ #page-integration .ringwrap{display:flex;flex-direction:column;align-items:center;gap:18px} #page-integration .ring{position:relative;width:150px;height:150px} #page-integration .ring .rtrack{stroke:var(--line)} #page-integration .ring .rc{font-size:30px;font-weight:800;fill:var(--ink)} #page-integration .ringmg{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%} #page-integration .rmc{background:var(--bg);border:1px solid var(--line);border-radius:13px;padding:12px 14px;transition:.16s} #page-integration .rmc:hover{border-color:var(--pri)} #page-integration .rmc b{font-size:21px;font-weight:800;display:block;line-height:1.1} #page-integration .rmc small{font-size:11px;color:var(--muted);font-weight:600} /* live activity timeline */ #page-integration .ocfeed{max-height:352px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin} #page-integration .afi{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:11px;transition:background .15s} #page-integration .afi:hover{background:var(--bg)} #page-integration .afi .aic{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(99,91,255,.07)} #page-integration .afi .atx{flex:1;font-size:12.5px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #page-integration .afi .ati{font-size:11px;color:var(--muted);white-space:nowrap;font-weight:600} /* event stream cards */ #page-integration .oevs{display:grid;grid-template-columns:1fr 1fr;gap:11px;max-height:360px;overflow-y:auto;scrollbar-width:thin;padding-right:2px} #page-integration .oev{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:13px 14px;transition:border-color .15s,transform .15s,box-shadow .15s} #page-integration .oev:hover{border-color:var(--pri);transform:translateY(-1px);box-shadow:var(--csh)} #page-integration .oev .oevh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px} #page-integration .oev .oid{font-size:12.5px;font-weight:800;color:var(--ink)} #page-integration .oev .otype{font-size:11px;color:var(--muted);font-family:ui-monospace,'Cascadia Code',monospace} #page-integration .oev .oevf{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:var(--muted)} /* action required alerts */ #page-integration .ocfail{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-bottom:16px;box-shadow:var(--csh)} #page-integration .ocfail.ok{border-color:rgba(34,197,94,.3)} #page-integration .ocfail:not(.ok){border-color:rgba(239,68,68,.28);background:linear-gradient(180deg,rgba(239,68,68,.03),transparent)} #page-integration .ocfail .fhd{font-size:14px;font-weight:800;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px} #page-integration #failList .fitem{display:flex;align-items:center;gap:13px;background:var(--bg);border:1px solid rgba(239,68,68,.18);border-radius:14px;padding:12px 15px;margin-top:11px;transition:.15s} #page-integration #failList .fitem:hover{border-color:rgba(239,68,68,.34);box-shadow:var(--csh)} #page-integration #failList .fitem .fic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(239,68,68,.1);color:#EF4444;flex-shrink:0} #page-integration #failList .fitem .ftx{flex:1;min-width:0} #page-integration #failList .fitem .ftx b{font-size:13px;color:var(--ink)} #page-integration #failList .fitem .ftx small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px} /* quick action pills */ #page-integration .ocqa{display:flex;gap:10px;flex-wrap:wrap} #page-integration .qabtn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 17px;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:all .16s;box-shadow:var(--csh)} #page-integration .qabtn:hover{border-color:var(--pri);color:var(--pri);transform:translateY(-2px);box-shadow:var(--csh-h)} #page-integration .qabtn svg{width:16px;height:16px} #page-integration .qabtn.primary{background:linear-gradient(135deg,#6D5DFF,#4F46E5);border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(99,91,255,.3)} #page-integration .qabtn.primary:hover{filter:brightness(1.06);color:#fff} /* mini summary + filter tabs */ #page-integration .minisum{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:9px;margin:0 0 14px} #page-integration .ms{display:flex;flex-direction:column;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px} #page-integration .ms b{font-size:19px;color:var(--ink);font-weight:800;letter-spacing:-.4px} #page-integration .ms.ok b{color:#16a34a}#page-integration .ms.rt b{color:#F59E0B}#page-integration .ms.er b{color:#EF4444} #page-integration .intfilters{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 14px;flex-wrap:wrap} #page-integration .iflab{font-size:16px;font-weight:800;color:var(--ink)} #page-integration .chips{display:flex;gap:8px;flex-wrap:wrap} #page-integration .chip2{border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:999px;cursor:pointer;transition:.15s} #page-integration .chip2:hover{border-color:var(--pri);color:var(--pri)} #page-integration .chip2.on{background:linear-gradient(135deg,#635BFF,#4F46E5);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(99,91,255,.28)} :root[data-theme="dark"] #page-integration .ocnode.wait .ndot{background:rgba(148,163,184,.1)} @media(max-width:1050px){#page-integration .ocgrid{grid-template-columns:1fr}#page-integration .ocbar{grid-template-columns:repeat(3,1fr)}#page-integration .ockpis{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){#page-integration .ocbar{grid-template-columns:repeat(2,1fr)}#page-integration .ockpis{grid-template-columns:1fr}#page-integration .oevs{grid-template-columns:1fr}} /* ===== Storefront sections manager ===== */ #mSections .secmgr{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px} #mSections .secrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface);transition:.12s} #mSections .secrow:hover{border-color:var(--brand)} #mSections .secrow.dragging{opacity:.5} #mSections .secrow.off{opacity:.55} #mSections .secdrag{cursor:grab;color:var(--muted);font-weight:800;font-size:15px;letter-spacing:-2px;user-select:none} #mSections .secname{flex:1;font-size:14px;font-weight:600;color:var(--ink)} /* ===== Footer Pages CMS ===== */ #page-pages .pghint{background:var(--brand-tint,#eef2ff);border:1px solid var(--line);border-radius:12px;padding:11px 15px;font-size:12.8px;color:var(--muted);margin:0 0 16px;line-height:1.55} :root[data-theme="dark"] #page-pages .pghint{background:rgba(var(--brand-rgb),.10)} #page-pages .pghint .pgdrag{color:var(--brand,#6d5cf5);font-weight:800} .pgmgr{display:flex;flex-direction:column} .pgrow{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface);transition:.12s} .pgrow:last-child{border-bottom:0} .pgrow:hover{background:var(--brand-tint,#f6f7ff)} :root[data-theme="dark"] .pgrow:hover{background:rgba(var(--brand-rgb),.07)} .pgrow.dragging{opacity:.5} .pgrow.off{opacity:.6} .pgrow .pgdrag{cursor:grab;color:var(--muted);font-weight:800;font-size:15px;letter-spacing:-2px;user-select:none} .pgmain{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pgmain b{font-size:14px;color:var(--ink)} .pgmain small{color:var(--muted);font-size:11.5px;font-family:ui-monospace,Consolas,monospace} .pggroup{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--brand-tint,#eef2ff);color:var(--brand-d,#4338ca)} :root[data-theme="dark"] .pggroup{background:rgba(var(--brand-rgb),.16);color:#c4b5fd} .pgtog{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer} .pgtog input{width:15px;height:15px;accent-color:var(--brand,#6d5cf5);cursor:pointer} /* rich-text editor */ #mPage .rtebar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;padding:8px 10px;background:var(--surface-2,#f6f7fb)} :root[data-theme="dark"] #mPage .rtebar{background:rgba(148,163,184,.08)} #mPage .rtegrp{display:flex;gap:4px;align-items:center;flex-wrap:nowrap} #mPage .rtesep{width:1px;height:20px;background:var(--line);margin:0 2px} #mPage .rtebar button{min-width:32px;height:31px;white-space:nowrap;flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;padding:0 10px;transition:.15s} #mPage .rtebar button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint,#eef2ff)} :root[data-theme="dark"] #mPage .rtebar button:hover{background:rgba(124,92,246,.16)} #mPage .rtebar button:active{transform:translateY(1px)} #mPage .rtesize{height:31px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;padding:0 8px} #mPage .rtesize:hover{border-color:var(--brand)} #mPage .rtesize:focus{outline:none;border-color:var(--brand)} #mPage .rtecolor{position:relative;display:inline-grid;place-items:center;width:32px;height:30px;border:1px solid var(--line);border-radius:7px;cursor:pointer;overflow:hidden} #mPage .rtecolor:hover{border-color:var(--brand)} #mPage .rtecolor span{font-weight:800;font-size:13px;color:var(--ink);pointer-events:none;border-bottom:3px solid #7c3aed;line-height:1;padding-bottom:1px} #mPage .rtecolor input{position:absolute;inset:0;opacity:0;cursor:pointer} /* editor heading — distinct so headings don't look like body text */ #mPage .rte{border:1px solid var(--line);border-radius:0 0 12px 12px;min-height:400px;max-height:64vh;overflow:auto;padding:20px 22px;font-size:14.5px;line-height:1.7;color:var(--ink);background:var(--surface);outline:none;box-shadow:inset 0 1px 4px rgba(15,23,42,.05)} :root[data-theme="dark"] #mPage .rte{box-shadow:inset 0 1px 4px rgba(0,0,0,.25)} #mPage .rte:focus{border-color:var(--brand);box-shadow:inset 0 1px 4px rgba(15,23,42,.05),0 0 0 3px var(--brand-tint,rgba(124,92,246,.14))} #mPage .rte:empty:before{content:attr(data-ph);color:var(--muted)} #mPage .rte h3{font-size:19px;font-weight:800;color:var(--ink);margin:22px 0 9px;padding-bottom:7px;border-bottom:2px solid var(--line);position:relative} #mPage .rte h3:before{content:"";position:absolute;left:0;bottom:-2px;width:44px;height:2px;background:var(--brand,#6d5cf5)} #mPage .rte p{margin:0 0 10px} #mPage .rte ul{list-style:none;margin:10px 0;padding-left:2px} #mPage .rte ul>li{position:relative;padding-left:26px;margin-bottom:6px} #mPage .rte ul>li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brand,#6d5cf5);font-weight:800} #mPage .rte ol{margin:10px 0;padding-left:24px} #mPage .rte ol>li{margin-bottom:6px;padding-left:4px} #mPage .rte ol>li::marker{color:var(--brand,#6d5cf5);font-weight:800} #mPage .rte a{color:var(--brand,#6d5cf5);text-decoration:underline} #mPage .rte .pcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0} #mPage .rte .pcol{border:1px dashed var(--line);border-radius:9px;padding:12px 14px;min-height:60px} #mPage .rte .pcol:focus{outline:none;border-color:var(--brand)} #mPage .pgchk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);margin:6px 0 4px;cursor:pointer} #mPage .pgchk input{width:16px;height:16px;accent-color:var(--brand,#6d5cf5)} /* page editor opens as a right slide-in drawer (not a centered popup) */ #mPage{top:0;right:0;left:auto;bottom:0;width:72vw;max-width:1040px;height:100vh;max-height:100vh;border-radius:0;overflow:auto;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)} #mPage.show{transform:translateX(0)} #mPage.modal{padding:24px 34px 34px} @media(max-width:900px){#mPage{width:100%;max-width:100%}} /* rich content preview inside the editor — keeps card icons small & tidy */ #mPage .rte svg{width:20px;height:20px;flex-shrink:0} #mPage .rte .psec{margin:0 0 14px} #mPage .rte .psec h2{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 8px} #mPage .rte .pcards{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0} #mPage .rte .pcard{flex:1;min-width:170px;border:1px solid var(--line);border-radius:10px;padding:12px 13px;background:var(--surface-2,#f8faff)} :root[data-theme="dark"] #mPage .rte .pcard{background:rgba(148,163,184,.06)} #mPage .rte .pcard .pcico{width:34px;height:34px;border-radius:9px;background:var(--brand-tint,#eef2ff);color:var(--brand,#6d5cf5);display:grid;place-items:center;margin-bottom:7px} #mPage .rte .pcard .pcico svg{width:18px;height:18px} #mPage .rte .pcard h4{font-size:13.5px;margin:0 0 3px} #mPage .rte .pcard p{font-size:12px;color:var(--muted);margin:0} #mPage .rte .pstats{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0} #mPage .rte .pstat{flex:1;min-width:100px;text-align:center;border:1px solid var(--line);border-radius:10px;padding:9px} #mPage .rte .pstat b{display:block;font-size:18px;color:var(--brand,#6d5cf5)} #mPage .rte .pstat span{font-size:11px;color:var(--muted)} #mPage .rte .faqi{border:1px solid var(--line);border-radius:9px;margin-bottom:6px;overflow:hidden} #mPage .rte .faqq{width:100%;text-align:left;background:var(--surface-2,#f8faff);border:0;padding:9px 12px;font-weight:600;font-size:13px;cursor:pointer;color:var(--ink)} :root[data-theme="dark"] #mPage .rte .faqq{background:rgba(148,163,184,.08)} #mPage .rte .faqa{max-height:0;overflow:hidden;transition:.2s;font-size:12.5px;color:var(--muted)} #mPage .rte .faqi.open .faqa{max-height:320px;padding:8px 12px} #mPage .rte .ptimeline{display:flex;flex-direction:column;gap:8px;margin:6px 0} #mPage .rte .ptstep{display:flex;gap:10px;align-items:flex-start} #mPage .rte .ptdot{width:24px;height:24px;border-radius:50%;background:var(--brand,#6d5cf5);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0} #mPage .rte .pttext b{display:block;font-size:13px} #mPage .rte .pttext span{font-size:12px;color:var(--muted)} /* ===== Cancel-trial modal ===== */ #mCancelTrial{text-align:center} #mCancelTrial .ctwrap{padding:6px 6px 2px} #mCancelTrial .cticon{width:60px;height:60px;margin:2px auto 14px;border-radius:50%;background:rgba(245,158,11,.14);color:#f59e0b;display:grid;place-items:center} #mCancelTrial .cticon svg{width:30px;height:30px} #mCancelTrial h3{margin:0 0 8px;font-size:19px} #mCancelTrial .ctmsg{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 6px} /* ===== Subscription / trial banner ===== */ #subBanner{margin:0 0 20px} #subBanner .subbar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;border:1px solid var(--line)} #subBanner .subbar.trial{background:linear-gradient(100deg,rgba(var(--brand-rgb),.12),rgba(var(--brand-rgb),.05));border-color:rgba(var(--brand-rgb),.30)} #subBanner .subbar.warn{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.34)} :root[data-theme="dark"] #subBanner .subbar.trial{background:rgba(var(--brand-rgb),.14)} #subBanner .subic{font-size:22px;flex-shrink:0} #subBanner .subtx{flex:1;min-width:0} #subBanner .subtx b{display:block;font-size:14.5px;color:var(--ink);font-weight:800} #subBanner .subtx small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px} #subBanner .subacts{display:flex;align-items:center;gap:12px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end} #subBanner .subtog{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer} #subBanner .subtog input{width:16px;height:16px;accent-color:var(--brand,#6d5cf5);cursor:pointer} #subBanner .subbtn{border:0;border-radius:9px;padding:8px 15px;font-weight:700;font-size:12.5px;cursor:pointer} #subBanner .subbtn.cancel{background:transparent;border:1px solid var(--line);color:var(--muted)} #subBanner .subbtn.cancel:hover{border-color:var(--red);color:var(--red)} #subBanner .subbtn.resume{background:var(--brand,#6d5cf5);color:#fff} @media(max-width:640px){#subBanner .subbar{flex-wrap:wrap}#subBanner .subacts{width:100%}} /* ===== Workers page ===== */ #page-workers .wkrole{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--brand-tint,#eef2ff);color:var(--brand-d,#4338ca)} :root[data-theme="dark"] #page-workers .wkrole{background:rgba(var(--brand-rgb),.16);color:#c4b5fd} #page-workers .wkload{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 8px;border-radius:999px;font-weight:800;font-size:12.5px;background:#eef1f8;color:var(--muted)} #page-workers .wkload.on{background:#dcfce7;color:#166534} :root[data-theme="dark"] #page-workers .wkload{background:rgba(148,163,184,.14)} :root[data-theme="dark"] #page-workers .wkload.on{background:rgba(0,210,106,.16);color:#5ef2a4} #page-workers .wkoff{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:#fee2e2;color:#b91c1c;margin-left:6px;vertical-align:1px} :root[data-theme="dark"] #page-workers .wkoff{background:rgba(255,91,91,.16);color:#ff9a9a} /* ===== Attributes manager (category → spec fields) ===== */ .attrmgr{display:flex;flex-direction:column;gap:16px} .attrtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px} .attrtop select,.attrtop input{height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 12px;font-size:13.5px;min-width:230px} .attrtop input:focus{outline:none;border-color:var(--brand)} .vurow-opt{font-weight:600} .attrcard{border:1px solid var(--line);border-radius:14px;padding:15px 18px;background:var(--surface)} .attrhd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .attrhd b{font-size:15px} .attrhd-r{display:flex;align-items:center;gap:14px} .attrtgl{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap} .attrtgl input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer} .attrrow{display:flex;align-items:center;gap:10px;margin-bottom:9px} .attrrow input,.attrrow select{height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 11px;font-size:13.5px;min-width:0} .attrrow input:focus,.attrrow select:focus{outline:none;border-color:var(--brand)} .attrrow .af-name{flex:1} .attrrow .af-type{width:132px;flex:none} .attrrow .af-opts{flex:1.25} .attraddf{display:inline-flex;align-items:center;gap:6px;margin-top:4px;border:1px dashed var(--line);background:transparent;color:var(--brand);font-weight:700;font-size:13px;padding:8px 14px;border-radius:9px;cursor:pointer} .attraddf:hover{border-color:var(--brand);background:var(--brand-tint)} @media(max-width:640px){.attrrow{flex-wrap:wrap}.attrrow .af-type{width:120px}} /* reusable searchable dropdown */ .sdrop{position:relative} .sdrop-btn{width:100%;height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 12px;font-size:13.5px;cursor:pointer;text-align:left} .sdrop-btn:hover,.sdrop.open .sdrop-btn{border-color:var(--brand)} .sdrop-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sdrop-lbl.ph{color:var(--muted)} .sdrop-caret{color:var(--muted);font-size:11px;flex:none} .sdrop-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden} .sdrop.open .sdrop-menu{display:block} .sdrop-search{width:100%;height:36px;border:0;border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 12px;font-size:13px;outline:none} .sdrop-list{max-height:220px;overflow:auto} .sdrop-opt{padding:9px 12px;font-size:13.5px;cursor:pointer;color:var(--ink)} .sdrop-opt:hover{background:var(--brand-tint);color:var(--brand)} .sdrop-opt.on{color:var(--brand);font-weight:700} .sdrop-add{padding:9px 12px;font-size:13px;font-weight:700;color:var(--brand);cursor:pointer;background:var(--brand-tint);border-bottom:1px solid var(--line)} .sdrop-add:hover{background:var(--brand);color:#fff} .sdrop-var .sdrop-btn{height:34px} .vucard,.gcard{overflow:visible} /* highlight settings action buttons so they don't blend with the page */ #page-settings .refresh{border:1.5px solid var(--brand);color:var(--brand);font-weight:700;background:var(--surface)} #page-settings .refresh:hover{background:var(--brand);color:#fff} .iconbtn.del{border:1px solid rgba(225,29,72,.4);color:var(--red);background:var(--surface)} .iconbtn.del:hover{background:var(--red);color:#fff;border-color:var(--red)} /* product editor specifications */ #pSpecs .pmg2{margin-top:2px} #pSpecs .muted b{color:var(--brand)} .attraxes{margin:2px 0 12px;padding:11px 13px;border:1px dashed var(--line);border-radius:11px;background:var(--brand-tint)} :root[data-theme="dark"] .attraxes{background:rgba(var(--brand-rgb),.08)} .attraxes-l{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px} .attrsublbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:4px 0 8px} .pmvtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 6px} .pmvtop input{height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 12px;font-size:13.5px;min-width:250px} .pmvtop input:focus{outline:none;border-color:var(--brand)} .pmvrow{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--line)} .pmvname{width:120px;flex:none;font-size:13.5px;font-weight:800;color:var(--ink);padding-top:6px} .pmvrow .vuchips{flex:1} /* ===== Attributes page — modern 3-panel layout ===== */ .atx{display:flex;flex-direction:column;gap:16px;padding-bottom:78px} .atx-topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px 18px} .atx-title{display:flex;align-items:center;gap:12px} .atx-hic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand)} .atx-hic svg{width:22px;height:22px} .atx-title b{font-size:18px;font-weight:800;display:block;color:var(--ink)} .atx-title small{font-size:12.5px;color:var(--muted)} .atx-searchbox{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;height:42px;border:1px solid var(--line);border-radius:11px;background:var(--bg);padding:0 14px} .atx-searchbox svg{width:17px;height:17px;color:var(--muted);flex:none} .atx-searchbox input{flex:1;border:0;background:transparent;color:var(--ink);font-size:13.5px;outline:none} .atx-primary{display:inline-flex;align-items:center;gap:8px;border:0;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:700;font-size:13.5px;padding:0 18px;height:42px;border-radius:11px;cursor:pointer;box-shadow:0 8px 20px rgba(var(--brand-rgb),.32);transition:.15s;white-space:nowrap} .atx-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(var(--brand-rgb),.42)} .atx-primary.lg{height:46px;padding:0 26px;font-size:14.5px} .atx-main{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start} .atx-side{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px;position:sticky;top:14px} .atx-side-hd{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:2px 4px 12px} .atx-plus{width:26px;height:26px;border:1px solid var(--line);background:var(--surface);color:var(--brand);border-radius:8px;cursor:pointer;display:grid;place-items:center} .atx-plus:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .atx-catlist{display:flex;flex-direction:column;gap:7px;max-height:calc(100vh - 200px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none} .atx-catlist::-webkit-scrollbar{width:0;height:0;display:none} .atx-cat{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1.5px solid transparent;background:transparent;border-radius:12px;padding:10px 11px;cursor:pointer;transition:.15s} .atx-cat:hover{background:var(--bg)} .atx-cat.on{border-color:var(--brand);background:var(--brand-tint)} .atx-cic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--bg);color:var(--muted)} .atx-cat.on .atx-cic{background:var(--surface);color:var(--brand)} .atx-cic svg{width:18px;height:18px} .atx-cic.big{width:40px;height:40px;background:var(--brand-tint);color:var(--brand)} .atx-ctx{min-width:0} .atx-ctx b{display:block;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .atx-ctx small{font-size:11.5px;color:var(--muted)} .atx-col{display:flex;flex-direction:column;gap:16px;min-width:0} .atx-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px} .atx-card-hd{margin-bottom:14px} .atx-card-hd b{font-size:16px;font-weight:800;color:var(--ink);display:block} .atx-card-hd small{font-size:12.5px;color:var(--muted)} /* variant library rows */ .atx-lib{display:flex;flex-direction:column;gap:10px} .atx-lrow{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--bg)} .atx-lic{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand)} .atx-lic svg{width:16px;height:16px} .atx-lname{font-size:13.5px;font-weight:700;color:var(--ink);min-width:70px} .atx-lvals{flex:1;display:flex;flex-wrap:wrap;gap:7px;align-items:center} .atx-vchip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;padding:5px 6px 5px 11px;border-radius:8px} .atx-vchip button{border:0;background:var(--bg);color:var(--muted);width:16px;height:16px;border-radius:5px;cursor:pointer;font-size:10px;line-height:1;display:grid;place-items:center} .atx-vchip button:hover{background:var(--red);color:#fff} .atx-valin,.atx-addtype,.atx-addvar{border:1px dashed var(--line);border-radius:8px;background:var(--surface);color:var(--ink);height:30px;padding:0 11px;font-size:12.5px;outline:none} .atx-valin{min-width:110px} .atx-valin:focus,.atx-addtype:focus,.atx-addvar:focus{border-color:var(--brand);border-style:solid} .atx-addtype{margin-top:2px;width:100%;height:38px;color:var(--brand);font-weight:600} .atx-ibtn{width:32px;height:32px;flex:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;cursor:pointer;display:grid;place-items:center} .atx-ibtn svg{width:15px;height:15px} .atx-ibtn:hover{border-color:var(--brand);color:var(--brand)} .atx-ibtn.del:hover{border-color:var(--red);color:var(--red)} /* category config + preview */ .atx-cfg{display:grid;grid-template-columns:1fr 300px;gap:18px} .atx-empty{padding:40px;text-align:center;color:var(--muted);font-size:13.5px} .atx-cfg-hd{display:flex;align-items:center;gap:12px;margin-bottom:16px} .atx-cfg-t{flex:1;min-width:0} .atx-cfg-t b{font-size:17px;font-weight:800;color:var(--ink);display:block} .atx-cfg-t small{font-size:12px;color:var(--muted)} .atx-usevar{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap} .atx-usevar input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer} .atx-sec{margin-bottom:18px} .atx-seclbl{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px} .atx-seclbl small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:1px} .atx-vwrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .atx-vpill{display:inline-flex;align-items:center;gap:6px;background:var(--brand-tint);border:1px solid rgba(var(--brand-rgb),.28);color:var(--brand-d);font-size:12.5px;font-weight:700;padding:6px 8px 6px 10px;border-radius:9px} :root[data-theme="dark"] .atx-vpill{color:#c4b5fd} .atx-vpill svg{width:14px;height:14px} .atx-vpill button{border:0;background:rgba(var(--brand-rgb),.18);color:inherit;width:16px;height:16px;border-radius:5px;cursor:pointer;font-size:10px;display:grid;place-items:center} .atx-vpill button:hover{background:var(--brand);color:#fff} .atx-flds{display:flex;flex-direction:column;gap:9px} .atx-frow{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:8px 11px;background:var(--bg)} .atx-drag{color:var(--muted);cursor:grab;font-size:15px;flex:none;letter-spacing:-2px} .atx-fname{flex:1;min-width:0;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 11px;font-size:13.5px;font-weight:600} .atx-ftype{width:120px;flex:none;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 8px;font-size:13px} .atx-fopts{flex:1.1;min-width:110px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 11px;font-size:13px} .atx-fname:focus,.atx-ftype:focus,.atx-fopts:focus{outline:none;border-color:var(--brand)} .atx-addfield{display:inline-flex;align-items:center;gap:6px;margin-top:2px;border:1px dashed var(--line);background:transparent;color:var(--brand);font-weight:700;font-size:13px;padding:9px 14px;border-radius:10px;cursor:pointer;align-self:flex-start} .atx-addfield:hover{border-color:var(--brand);background:var(--brand-tint)} /* preview panel */ .atx-prevcol{background:var(--brand-tint);border:1px solid rgba(var(--brand-rgb),.2);border-radius:14px;padding:16px} :root[data-theme="dark"] .atx-prevcol{background:rgba(var(--brand-rgb),.08)} .atx-prev-hd{margin-bottom:14px} .atx-prev-hd b{font-size:14px;font-weight:800;color:var(--ink);display:block} .atx-prev-hd small{font-size:11.5px;color:var(--muted)} .atx-pv-sec{margin-bottom:16px} .atx-pv-l{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:8px} .atx-pv-var{margin-bottom:9px} .atx-pv-vl{font-size:12px;font-weight:700;color:var(--ink);display:block;margin-bottom:5px} .atx-pv-vals{display:flex;flex-wrap:wrap;gap:6px} .atx-pv-chip{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:7px} .atx-pv-f{display:flex;flex-direction:column;gap:4px;margin-bottom:9px} .atx-pv-fn{font-size:12px;font-weight:700;color:var(--ink)} .atx-pv-in{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--muted)} .atx-savebar{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:12px 2px;background:linear-gradient(180deg,transparent,var(--bg) 55%)} @media(max-width:1080px){.atx-cfg{grid-template-columns:1fr}.atx-main{grid-template-columns:1fr}.atx-side{position:static}.atx-catlist{max-height:none;flex-direction:row;flex-wrap:wrap}.atx-cat{width:auto}} @media(max-width:640px){.atx-frow{flex-wrap:wrap}.atx-ftype-wrap{width:120px}} /* --- reference-match polish --- */ .atx-card-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .atx-ghost{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--brand);font-weight:600;font-size:12.5px;padding:8px 13px;border-radius:10px;cursor:pointer;white-space:nowrap} .atx-ghost:hover{background:var(--brand-tint);border-color:var(--brand)} .atx-ghost svg{width:14px;height:14px} .atx-sw{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.14);box-shadow:0 1px 2px rgba(0,0,0,.14)} .atx-vchip{background:var(--surface)} .atx-outbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(var(--brand-rgb),.5);background:var(--surface);color:var(--brand);font-weight:600;font-size:12.5px;padding:6px 13px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:.15s} .atx-outbtn:hover{background:var(--brand-tint)} .atx-outbtn.wide{width:100%;justify-content:center;margin-top:2px;padding:10px} .atx-revin{border:1px solid var(--brand);border-radius:9px;background:var(--surface);color:var(--ink);height:32px;padding:0 11px;font-size:12.5px;outline:none;min-width:130px} .atx-ftype-wrap{display:inline-flex;align-items:center;gap:6px;width:140px;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--surface);height:34px;padding-left:10px;overflow:hidden} .atx-ftype-wrap:focus-within{border-color:var(--brand)} .atx-ftype-ic{font-size:11px;font-weight:800;color:var(--brand);display:grid;place-items:center;min-width:18px} .atx-ftype-ic svg{color:var(--brand);width:13px;height:13px} .atx-ftype-wrap .atx-ftype{width:100%;border:0;background:transparent;height:100%;padding:0 6px 0 2px} .atx-cat.on{border-color:var(--brand);box-shadow:0 4px 12px rgba(var(--brand-rgb),.14)} .atx-cat.on .atx-ctx b{color:var(--brand-d)} :root[data-theme="dark"] .atx-cat.on .atx-ctx b{color:#fff} .atx-pv-vals.dots{gap:10px;align-items:center} .atx-pv-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(0,0,0,.12)} .atx-pv-box{min-width:30px;text-align:center;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px} /* --- premium SaaS refinements --- */ .atx-main{gap:18px} .atx-col{gap:18px} .atx-card{border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px rgba(15,23,42,.06)} .atx-side{border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px rgba(15,23,42,.06)} .atx-topbar{border-radius:14px} .atx-cat{padding:12px;border-radius:12px;border-width:2px;transition:transform .16s,box-shadow .16s,background .16s} .atx-cat:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.09)} .atx-cat.on{background:linear-gradient(135deg,var(--brand-tint),var(--surface));box-shadow:0 8px 22px rgba(var(--brand-rgb),.20);border-color:transparent;position:relative} .atx-cat.on::before{content:"";position:absolute;inset:0;border-radius:12px;padding:2px;background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .atx-cic{width:40px;height:40px} .atx-lrow{border-radius:14px;padding:13px 15px} .atx-lic{width:36px;height:36px;border-radius:11px} .atx-frow{border-radius:12px;padding:9px 12px} .atx-outbtn.dash{border-style:dashed;border-width:1.5px} .atx-prevcol{border-radius:14px;padding:18px} /* sticky action footer */ .atx-savebar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 6px;margin-top:4px;background:linear-gradient(180deg,transparent,var(--bg) 45%);z-index:5} .atx-dirty{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted)} .atx-dirty .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none} .atx-dirty.on{color:#b45309} :root[data-theme="dark"] .atx-dirty.on{color:#fbbf24} .atx-dirty.on .dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.22)} .atx-savebtns{display:flex;gap:10px} .atx-primary.ghost2{background:var(--surface);color:var(--brand);border:1px solid var(--line);box-shadow:none} .atx-primary.ghost2:hover{background:var(--brand-tint);border-color:var(--brand);transform:none;box-shadow:none} .atx-primary.pulse{animation:atxpulse 1.9s ease-in-out infinite} @keyframes atxpulse{0%,100%{box-shadow:0 8px 20px rgba(var(--brand-rgb),.30)}50%{box-shadow:0 10px 30px rgba(var(--brand-rgb),.55)}} /* search: clear button + shortcut hint */ .atx-searchbox{position:relative;gap:10px} .atx-clear{display:none;width:26px;height:26px;flex:none;border:0;background:var(--line);color:var(--muted);border-radius:7px;cursor:pointer;place-items:center} .atx-searchbox.has .atx-clear{display:grid} .atx-searchbox.has .atx-kbd{display:none} .atx-clear:hover{background:var(--brand);color:#fff} .atx-kbd{flex:none;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 8px} /* sidebar stat badges + configure hint */ .atx-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px} .atx-badge{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:2px 8px;border-radius:6px} .atx-cat.on .atx-badge{background:var(--surface);border-color:rgba(var(--brand-rgb),.3);color:var(--brand-d)} :root[data-theme="dark"] .atx-cat.on .atx-badge{color:#c4b5fd} .atx-setup{display:inline-block;margin-top:5px;font-size:11px;font-weight:700;color:var(--brand)} .atx-cat.empty:not(.on) .atx-cic{color:var(--muted)} /* section divider inside category config */ .atx-sec+.atx-sec{border-top:1px solid var(--line);padding-top:18px} /* larger variant chips */ .atx-vchip{font-size:13px;padding:6px 8px 6px 12px} .atx-vpill{font-size:13px;padding:7px 9px 7px 12px} .atx-pv-chip{font-size:12px;padding:5px 12px} /* drag-and-drop states */ .atx-drag{cursor:grab} .atx-drag:active{cursor:grabbing} .atx-frow{transition:box-shadow .12s,border-color .12s,opacity .12s} .atx-frow.dragging{opacity:.45} .atx-frow.dropto{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-tint)} /* --- match reference: bigger chips, boxes & rows --- */ .atx-lrow{padding:14px 16px;gap:13px} .atx-lvals{gap:9px} .atx-lic svg{width:17px;height:17px} .atx-lname{font-size:14px;min-width:80px} .atx-vchip{min-height:36px;padding:0 8px 0 13px;gap:8px;font-size:13.5px;font-weight:600;border-radius:9px} .atx-vchip .atx-sw{width:15px;height:15px} .atx-vchip button{width:18px;height:18px;font-size:11px} .atx-outbtn{min-height:36px;padding:0 14px;border-radius:9px} .atx-outbtn.wide{min-height:44px} .atx-vpill{min-height:36px;padding:0 9px 0 12px;font-size:13px;border-radius:10px} .atx-vpill svg{width:15px;height:15px} .atx-frow{padding:10px 13px;gap:10px} .atx-fname{height:40px;font-size:14px} .atx-ftype-wrap{height:40px;width:152px} .atx-fopts{height:40px} .atx-drag{font-size:16px} .atx-ibtn{width:34px;height:34px} /* --- targeted fixes --- */ /* clean custom field-type dropdown */ .atx-tsel{position:relative;width:160px;flex:none} .atx-tsel-btn{width:100%;display:flex;align-items:center;gap:8px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 10px;font-size:13.5px;font-weight:600;cursor:pointer} .atx-tsel-btn:hover,.atx-tsel.open .atx-tsel-btn{border-color:var(--brand)} .atx-tsel-lbl{flex:1;text-align:left} .atx-tsel-btn>svg{color:var(--muted)} .atx-tsel-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;padding:4px} .atx-tsel.open .atx-tsel-menu{display:block} .atx-tsel-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13.5px;color:var(--ink);cursor:pointer;border-radius:7px} .atx-tsel-opt:hover{background:var(--brand-tint);color:var(--brand)} .atx-tsel-opt.on{background:var(--brand-tint);color:var(--brand);font-weight:700} .atx-tsel .atx-ftype-ic{min-width:22px} /* spec field rows: white background */ .atx-frow{background:var(--surface)} /* highlighted edit / delete buttons */ .atx-ibtn{background:var(--brand-tint);border-color:transparent;color:var(--brand)} .atx-ibtn:hover{background:var(--brand);color:#fff;border-color:transparent} .atx-ibtn.del{background:rgba(225,29,72,.1);color:var(--red)} .atx-ibtn.del:hover{background:var(--red);color:#fff;border-color:transparent} /* categories sidebar wraps its list (which scrolls within a fixed cap) */ .atx-side{align-self:start} /* subtler selected category (less blue glow) */ .atx-cat.on{box-shadow:0 2px 8px rgba(var(--brand-rgb),.10)} /* preview specs: side-by-side plain text (no input boxes) */ .atx-pv-f{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px} .atx-pv-fn{font-size:12.5px} .atx-pv-in{background:transparent;border:0;padding:0;color:var(--muted);font-size:12.5px;text-align:right;white-space:nowrap} /* slim top action bar (New Category only) */ .atx-topbar.solo{justify-content:flex-end;padding:10px 12px;background:transparent;border:0;box-shadow:none} /* editable value chips in the Global Variant Library */ .atx-vtext{cursor:text;border-radius:4px;padding:0 1px} .atx-vchip .atx-vtext:hover{text-decoration:underline dotted;text-underline-offset:2px} .atx-vedit{border:1px solid var(--brand);border-radius:6px;background:var(--surface);color:var(--ink);height:24px;padding:0 7px;font-size:12.5px;font-weight:600;outline:none;width:96px} /* variant-type picker (custom searchable dropdown) */ .atx-vsel{position:relative;display:inline-block} .atx-vsel-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;z-index:70;min-width:246px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px} .atx-vsel.open .atx-vsel-menu{display:block} .atx-vsel-srch{display:flex;align-items:center;gap:8px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--bg);padding:0 10px;margin-bottom:6px} .atx-vsel-srch svg{width:15px;height:15px;color:var(--muted);flex:none} .atx-vsel-srch input{flex:1;border:0;background:transparent;color:var(--ink);font-size:13px;outline:none} .atx-vsel-list{max-height:236px;overflow:auto;display:flex;flex-direction:column;gap:2px} .atx-vsel-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink)} .atx-vsel-opt:hover{background:var(--brand-tint);color:var(--brand)} .atx-vsel-ic{width:22px;height:22px;display:grid;place-items:center;color:var(--brand);flex:none} .atx-vsel-ic svg{width:16px;height:16px} .atx-vsel-nm{flex:1;font-weight:600} .atx-vsel-ct{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:1px 8px} .atx-vsel-opt.create{color:var(--brand);font-weight:700} .atx-vsel-none{padding:12px 10px;text-align:center;color:var(--muted);font-size:12.5px} .atx-vsel-list::-webkit-scrollbar{width:0;height:0;display:none} .atx-vsel-list{scrollbar-width:none;-ms-overflow-style:none} /* ===== universal variant editor (Variants & Inventory) ===== */ .vulbl{font-size:12.5px;font-weight:700;color:var(--ink);margin:2px 0 10px} .vuaxes{display:flex;flex-direction:column;gap:12px;margin-bottom:14px} .vuaxis-h{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px} .vuchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center} .vuchip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-tint);color:var(--brand-d);border:1px solid rgba(var(--brand-rgb),.28);font-size:12.5px;font-weight:700;padding:5px 6px 5px 11px;border-radius:8px} :root[data-theme="dark"] .vuchip{color:#c4b5fd} .vuchip button{border:0;background:rgba(var(--brand-rgb),.18);color:inherit;width:16px;height:16px;border-radius:5px;cursor:pointer;font-size:10px;line-height:1;display:grid;place-items:center} .vuchip button:hover{background:var(--brand);color:#fff} .vuchip-in{border:1px dashed var(--line);border-radius:8px;background:var(--surface);color:var(--ink);height:30px;padding:0 10px;font-size:12.5px;min-width:120px;flex:1} .vuchip-in:focus{outline:none;border-color:var(--brand)} .vusugg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px;width:100%} .vusugg-l{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px} .vusugg button{border:1px dashed var(--line);background:var(--surface);color:var(--muted);font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:7px;cursor:pointer} .vusugg button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)} /* hero slider manager (Settings) */ .socgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .socgrid input{height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 11px;font-size:13px;width:100%} .socgrid input:focus{outline:none;border-color:var(--brand)} @media(max-width:560px){.socgrid{grid-template-columns:1fr}} .hsmode{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:0 0 16px} .hsmode-opt{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;cursor:pointer;background:var(--surface);transition:.15s} .hsmode-opt:hover{border-color:rgba(var(--brand-rgb),.5)} .hsmode-opt.on{border-color:var(--brand);background:var(--brand-tint)} .hsmode-opt input{accent-color:var(--brand);width:16px;height:16px;margin:2px 0 0;flex:none} .hsmode-tx b{display:block;font-size:13.5px;color:var(--ink);font-weight:700} .hsmode-tx small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45} @media(max-width:560px){.hsmode{grid-template-columns:1fr}} .hslist{display:flex;flex-direction:column;gap:11px} .hscard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px;background:var(--surface)} .hsimg{width:92px;height:58px;flex:none;border-radius:9px;border:1px solid var(--line);background:var(--brand-tint) center/cover no-repeat;display:grid;place-items:center;cursor:pointer;color:var(--brand);overflow:hidden} .hsimg svg{width:18px;height:18px} .hsfields{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0} .hsfields input{height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 10px;font-size:13px} .hsfields input:focus{outline:none;border-color:var(--brand)} .hsdel{border:1px solid var(--line);background:var(--surface);color:var(--muted);width:32px;height:32px;flex:none;border-radius:8px;cursor:pointer;display:grid;place-items:center} .hsdel svg{width:15px;height:15px} .hsdel:hover{border-color:var(--red);color:var(--red)} .btnpurple.vugen{width:100%;justify-content:center;margin-bottom:14px} .vugrid{display:flex;flex-direction:column;gap:11px} .vucount{font-size:12px;font-weight:700;color:var(--muted)} .vuempty{padding:26px 18px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed var(--line);border-radius:12px} .vucard{border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);padding:12px 13px;transition:.15s} .vucard.off{opacity:.6} .vuc-top{display:flex;align-items:center;gap:11px;margin-bottom:11px} .vuc-img{width:44px;height:44px;flex:none;border-radius:11px;border:1px solid var(--line);background:var(--brand-tint) center/cover no-repeat;display:grid;place-items:center;cursor:pointer;color:var(--brand);overflow:hidden} .vuc-img svg{width:17px;height:17px} .vuc-name{flex:1;min-width:0;font-size:14px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap} .vuc-badge{font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:6px} .vuc-badge.on{background:#dcfce7;color:#166534}.vuc-badge.no{background:#fee2e2;color:#b91c1c} :root[data-theme="dark"] .vuc-badge.on{background:rgba(0,210,106,.16);color:#5ef2a4} :root[data-theme="dark"] .vuc-badge.no{background:rgba(255,91,91,.16);color:#ff9a9a} .vuc-tgl{position:relative;width:38px;height:22px;flex:none;cursor:pointer} .vuc-tgl input{opacity:0;width:0;height:0;position:absolute} .vuc-tgl span{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.2s} .vuc-tgl span:before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .vuc-tgl input:checked+span{background:var(--brand)} .vuc-tgl input:checked+span:before{transform:translateX(16px)} .vuc-del{border:1px solid var(--line);background:var(--surface);color:var(--muted);width:30px;height:30px;flex:none;border-radius:8px;cursor:pointer;display:grid;place-items:center} .vuc-del svg{width:15px;height:15px} .vuc-del:hover{border-color:var(--red);color:var(--red)} .vuc-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px} .vuc-f label{display:block;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px} .vuc-f input{width:100%;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 10px;font-size:13px} .vuc-f input:focus{outline:none;border-color:var(--brand)} /* grouped (colour → sizes) variant cards */ .gcard{border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);padding:12px 13px;margin-bottom:11px} .gc-top{display:flex;align-items:center;gap:11px;margin-bottom:12px} .gc-name{flex:1;min-width:0;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 11px;font-size:14px;font-weight:700} .gc-name:focus{outline:none;border-color:var(--brand)} .gc-meta{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap} .gc-sizes{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .gsz{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)} .gsz-v{width:66px;height:32px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--ink);padding:0 8px;font-size:12.5px;font-weight:700;text-align:center} .gsz-s{width:52px;height:32px;border:0;background:transparent;color:var(--ink);padding:0 6px;font-size:12.5px;text-align:center} .gsz-v:focus,.gsz-s:focus{outline:none;background:var(--brand-tint)} .gsz>button{border:0;border-left:1px solid var(--line);background:transparent;color:var(--muted);width:26px;height:32px;cursor:pointer;font-size:11px} .gsz>button:hover{background:var(--red);color:#fff} .gsz-add{height:34px;border:1px dashed var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 11px;font-size:12.5px;min-width:130px} .gsz-add:focus{outline:none;border-color:var(--brand)} /* ===== Add/Edit worker modal — wider + clearer slide-in, no inner scrollbar ===== */ #mWorker{max-width:560px;overflow:visible;max-height:none;transform:translate(-50%,-50%) translateY(26px);opacity:0} #mWorker.show{transform:translate(-50%,-50%);opacity:1} @media(max-width:600px){#mWorker{max-width:94vw}} /* ===== Assign worker modal ===== */ #mAssign{overflow:visible;max-height:none} #mAssign .awtabs{display:flex;gap:8px;margin:4px 0 16px;background:var(--surface-2,#f1f4fb);padding:5px;border-radius:12px} :root[data-theme="dark"] #mAssign .awtabs{background:rgba(148,163,184,.1)} #mAssign .awtab{flex:1;border:0;background:transparent;padding:9px 12px;border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;color:var(--muted);transition:.14s} #mAssign .awtab.active{background:var(--surface,#fff);color:var(--brand,#6d5cf5);box-shadow:0 2px 8px rgba(15,23,42,.08)} :root[data-theme="dark"] #mAssign .awtab.active{background:rgba(255,255,255,.08);color:#c4b5fd;box-shadow:none} #mAssign .awcard{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border,var(--line));border-radius:14px;background:var(--surface-2,#f8faff);margin-top:6px} :root[data-theme="dark"] #mAssign .awcard{background:rgba(148,163,184,.07)} #mAssign .awav{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#8b7ff5,#4f46e5);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;flex-shrink:0} #mAssign .awinfo{display:flex;flex-direction:column;gap:3px;min-width:0} #mAssign .awinfo b{font-size:15px;color:var(--ink)} #mAssign .awload{font-size:12px;font-weight:700;color:var(--brand,#6d5cf5)} /* ============================================================ ERP INTEGRATION — modern 2026 SaaS redesign ============================================================ */ #page-integration .igwrap{--ig:#5B4CFF;--ig-ok:#16a34a;--ig-warn:#f59e0b;--ig-bad:#ef4444;display:flex;flex-direction:column;gap:24px} :root[data-theme="dark"] #page-integration .igwrap{--ig-ok:#22c55e} /* header */ #page-integration .ighead{display:flex;align-items:center;gap:16px;flex-wrap:wrap} #page-integration .ightitle{display:flex;align-items:center;gap:12px} #page-integration .ightitle h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--ink)} #page-integration .igpill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(22,163,74,.12);color:#15803d} :root[data-theme="dark"] #page-integration .igpill{background:rgba(34,197,94,.16);color:#4ade80} #page-integration .igpill .igdot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:igpulse 1.8s infinite} @keyframes igpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} #page-integration .igsearch{flex:1;min-width:220px;position:relative;max-width:460px} #page-integration .igsearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)} #page-integration .igsearch input{width:100%;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:0 14px 0 38px;font-size:13.5px;outline:none} #page-integration .igsearch input:focus{border-color:var(--ig);box-shadow:0 0 0 3px rgba(91,76,255,.15)} #page-integration .igactions{display:flex;gap:10px;margin-left:auto} #page-integration .igbtn{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-radius:12px;font-weight:700;font-size:13px;cursor:pointer;border:1px solid var(--line);transition:.14s} #page-integration .igbtn svg{width:16px;height:16px} #page-integration .igbtn.ghost{background:var(--surface);color:var(--ink)} #page-integration .igbtn.ghost:hover{border-color:var(--ig);color:var(--ig)} #page-integration .igbtn.primary{background:var(--ig);border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(91,76,255,.28)} #page-integration .igbtn.primary:hover{filter:brightness(1.06)} /* cards */ #page-integration .igcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.04);padding:22px 24px} :root[data-theme="dark"] #page-integration .igcard{box-shadow:none} #page-integration .igch{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:18px} #page-integration .igch-sub{font-size:12px;font-weight:600;color:var(--muted)} /* KPI row */ #page-integration .igkpis{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} #page-integration .igkpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.04);transition:.16s} :root[data-theme="dark"] #page-integration .igkpi{box-shadow:none} #page-integration .igkpi:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(15,23,42,.1)} #page-integration .igk-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px} #page-integration .igk-ic svg{width:20px;height:20px} #page-integration .igk-ic.ok{background:rgba(22,163,74,.12);color:var(--ig-ok)} #page-integration .igk-ic.warn{background:rgba(245,158,11,.14);color:var(--ig-warn)} #page-integration .igk-ic.bad{background:rgba(239,68,68,.12);color:var(--ig-bad)} #page-integration .igk-ic.brand{background:rgba(91,76,255,.12);color:var(--ig)} #page-integration .igk-ic.mut{background:rgba(148,163,184,.16);color:var(--muted)} #page-integration .igk-v{font-size:28px;font-weight:800;letter-spacing:-.6px;color:var(--ink);line-height:1} #page-integration .igk-l{font-size:13px;font-weight:700;color:var(--ink);margin-top:6px} #page-integration .igk-t{font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:600} /* sync-health flow */ #page-integration .igflow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} #page-integration .igfnode{flex:1;min-width:110px;text-align:center;padding:16px 10px;border:1.5px solid var(--line);border-radius:14px;transition:.15s} #page-integration .igfnode.ok{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.05)} #page-integration .igfnode.warn{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.06)} #page-integration .igfnode.bad{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.06)} #page-integration .igf-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin:0 auto 10px;background:rgba(91,76,255,.1);color:var(--ig)} #page-integration .igfnode.ok .igf-ic{background:rgba(22,163,74,.14);color:var(--ig-ok)} #page-integration .igfnode.warn .igf-ic{background:rgba(245,158,11,.16);color:var(--ig-warn)} #page-integration .igfnode.bad .igf-ic{background:rgba(239,68,68,.14);color:var(--ig-bad)} #page-integration .igf-ic svg{width:19px;height:19px} #page-integration .igf-v{font-size:22px;font-weight:800;color:var(--ink);line-height:1} #page-integration .igf-l{font-size:12px;font-weight:600;color:var(--muted);margin-top:5px} #page-integration .igfarrow{color:var(--muted);font-size:18px;font-weight:700;flex:0 0 auto} /* queue analytics */ #page-integration .igqa{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} #page-integration .igqc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 1px 3px rgba(15,23,42,.05)} :root[data-theme="dark"] #page-integration .igqc{box-shadow:none} #page-integration .igqc-h{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--muted)} #page-integration .igqc-h b{font-size:22px;font-weight:800;color:var(--ink)} #page-integration .igqbar{height:7px;border-radius:999px;background:var(--line);margin-top:12px;overflow:hidden} #page-integration .igqbar>div{height:100%;border-radius:999px;width:0;transition:width .4s} #page-integration .igqbar>div.warn{background:var(--ig-warn)} #page-integration .igqbar>div.brand{background:var(--ig)} #page-integration .igqbar>div.ok{background:var(--ig-ok)} #page-integration .igqbar>div.bad{background:var(--ig-bad)} /* two-column layout */ #page-integration .igcols{display:grid;grid-template-columns:1.3fr 1fr;gap:24px} /* tables */ #page-integration .igtblwrap{overflow-x:auto;margin:0 -6px} #page-integration .igtable{width:100%;border-collapse:collapse;min-width:520px} #page-integration .igtable th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:0 12px 10px;border-bottom:1px solid var(--line);white-space:nowrap} #page-integration .igtable th.sortable{cursor:pointer;user-select:none} #page-integration .igtable th.sortable:hover{color:var(--ig)} #page-integration .igtable td{padding:12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink);vertical-align:middle} #page-integration .igtable tr:last-child td{border-bottom:0} #page-integration .igtable tbody tr{transition:.12s} #page-integration .igtable tbody tr:hover{background:rgba(91,76,255,.04)} #page-integration .igtable .omono{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:12.5px} #page-integration .igtable .ac{text-align:center} #page-integration .igtable .muted{color:var(--muted)} #page-integration .igempty{text-align:center;color:var(--muted);padding:26px 0;font-size:13px} #page-integration .igact{display:flex;gap:6px;white-space:nowrap} #page-integration .igbadge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px} #page-integration .igbadge.ok{background:rgba(22,163,74,.12);color:#15803d} #page-integration .igbadge.warn{background:rgba(245,158,11,.14);color:#b45309} #page-integration .igbadge.bad{background:rgba(239,68,68,.12);color:#b91c1c} #page-integration .igbadge.mut{background:rgba(148,163,184,.16);color:var(--muted)} :root[data-theme="dark"] #page-integration .igbadge.ok{color:#4ade80} :root[data-theme="dark"] #page-integration .igbadge.warn{color:#fbbf24} :root[data-theme="dark"] #page-integration .igbadge.bad{color:#fca5a5} #page-integration .igmini{border:1px solid var(--line);background:var(--surface);color:var(--ig);font-weight:700;font-size:12px;padding:5px 11px;border-radius:8px;cursor:pointer;transition:.12s} #page-integration .igmini:hover{background:var(--ig);color:#fff;border-color:transparent} #page-integration .igmini.ghost{color:var(--muted)} #page-integration .igmini.ghost:hover{background:var(--muted);color:#fff} /* activity feed */ #page-integration .igfeed{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto} #page-integration .igfeed .afi{display:flex;align-items:center;gap:11px;padding:10px 6px;border-bottom:1px solid var(--line)} #page-integration .igfeed .afi:last-child{border-bottom:0} #page-integration .igfeed .aic{width:9px;height:9px;border-radius:50%;flex-shrink:0} #page-integration .igfeed .atx{flex:1;font-size:13px;color:var(--ink);font-weight:500} #page-integration .igfeed .ati{font-size:11.5px;color:var(--muted);white-space:nowrap} /* select + footer + pagination */ #page-integration .igsel{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0 12px;font-size:13px;cursor:pointer} #page-integration .igfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:12.5px;color:var(--muted)} #page-integration .igpg{display:flex;align-items:center;gap:10px} #page-integration .igpg span{font-weight:700;color:var(--ink)} /* quick actions */ #page-integration .igquick{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} #page-integration .igqa-btn{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-weight:700;font-size:12.5px;cursor:pointer;transition:.15s} #page-integration .igqa-btn:hover{transform:translateY(-3px);border-color:var(--ig);box-shadow:0 10px 26px rgba(91,76,255,.14)} #page-integration .igqa-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center} #page-integration .igqa-ic svg{width:21px;height:21px} #page-integration .igqa-ic.brand{background:rgba(91,76,255,.12);color:var(--ig)} #page-integration .igqa-ic.warn{background:rgba(245,158,11,.14);color:var(--ig-warn)} #page-integration .igqa-ic.ok{background:rgba(22,163,74,.12);color:var(--ig-ok)} #page-integration .igqa-ic.mut{background:rgba(148,163,184,.16);color:var(--muted)} /* responsive */ @media(max-width:1100px){#page-integration .igkpis{grid-template-columns:repeat(3,1fr)}#page-integration .igcols{grid-template-columns:1fr}#page-integration .igquick{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){#page-integration .igkpis{grid-template-columns:repeat(2,1fr)}#page-integration .igqa{grid-template-columns:repeat(2,1fr)}#page-integration .igquick{grid-template-columns:repeat(2,1fr)}#page-integration .igfarrow{display:none}#page-integration .igfnode{min-width:calc(50% - 6px)}} /* ===== Order Sync (simplified integration) — modern stat cards ===== */ #page-integration .syncstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px} #page-integration .synccard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 1px 3px rgba(16,24,40,.05);transition:transform .18s,box-shadow .18s} #page-integration .synccard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(16,24,40,.1)} #page-integration .synccard .scico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px} #page-integration .synccard .scico svg{width:19px;height:19px} #page-integration .synccard.ok .scico{background:rgba(34,197,94,.12);color:#22C55E} #page-integration .synccard.pend .scico{background:rgba(245,158,11,.12);color:#F59E0B} #page-integration .synccard.fail .scico{background:rgba(239,68,68,.12);color:#EF4444} #page-integration .synccard.last .scico{background:rgba(99,91,255,.12);color:#635BFF} #page-integration .synccard .scv{font-size:30px;font-weight:800;letter-spacing:-.6px;color:var(--ink);line-height:1} #page-integration .synccard .scl{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:6px} @media(max-width:760px){#page-integration .syncstats{grid-template-columns:repeat(2,1fr)}} /* super-admin plan buttons in the edit-company modal */ .coplan{border:1px solid var(--border,#e2e8f0);background:var(--panel,#fff);color:var(--ink,#0f172a);font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:10px;cursor:pointer;transition:.15s} .coplan:hover{transform:translateY(-1px)} .coplan.paid{border-color:#10b981;color:#047857;background:#ecfdf5} .coplan.extend{border-color:#6366f1;color:#4338ca;background:#eef2ff} .coplan.expire{border-color:#f59e0b;color:#b45309;background:#fffbeb} .coplan.cancel{border-color:#ef4444;color:#b91c1c;background:#fef2f2} /* business-type multi-select pills (super-admin edit + owner settings) */ .indchecks{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .indchecks label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border,#e2e8f0);background:var(--panel,#fff);color:var(--ink,#0f172a);font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:10px;cursor:pointer;user-select:none;transition:.14s} .indchecks label:has(input:checked){border-color:var(--brand,#7c3aed);background:rgba(124,60,237,.1);color:var(--brand,#7c3aed)} .indchecks input{accent-color:var(--brand,#7c3aed);width:15px;height:15px;margin:0} .giftpill{display:inline-block;background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px;margin-left:4px;vertical-align:middle} /* Marketplace vendors */ .vform{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} @media(max-width:820px){.vform{grid-template-columns:1fr 1fr}} @media(max-width:560px){.vform{grid-template-columns:1fr}} .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .vcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:8px} .vtop{display:flex;align-items:center;justify-content:space-between;gap:10px} .vname{font-weight:800;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px} .vcount{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap} .vpill{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:20px;letter-spacing:.3px} .vdesc{font-size:13px;color:var(--ink);opacity:.85} .vmeta{font-size:12px;color:var(--muted)} .vcred{font-size:12px;font-weight:700;color:var(--ink);background:var(--panel-2,rgba(124,58,237,.06));padding:6px 10px;border-radius:8px;word-break:break-all} .vacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px} .vbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:9px;cursor:pointer} .vbtn:hover{border-color:var(--brand)} .vb-ok{background:#16a34a;color:#fff;border-color:#16a34a} .vb-warn{background:#f59e0b;color:#fff;border-color:#f59e0b} .vb-x{background:#ef4444;color:#fff;border-color:#ef4444} /* super-admin: company-vendors popup */ .vov{position:fixed;inset:0;z-index:3000;background:rgba(2,6,23,.5);display:grid;place-items:center;padding:20px} .vmodal{background:var(--surface);border:1px solid var(--line);border-radius:16px;width:100%;max-width:520px;max-height:84vh;overflow:auto;box-shadow:var(--shadow-lg)} .vmhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)} .vmhead b{font-size:15px} .vmx{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer;line-height:1} .vmbody{padding:16px 18px}