:root { --xsuri-primary:#008aff; --xsuri-secondary:#2bbaff; --xsuri-bg_soft:#eaf5ff; --xsuri-accent:#005bb5; --xsuri-radius:18px; }
[data-theme="dark"] { --xsuri-primary:#4da3ff; --xsuri-secondary:#79c7ff; --xsuri-bg_soft:#0f1b2a; --xsuri-accent:#a9c8ff; --xsuri-radius:18px; }
.xsuri-sort-wrap * { box-sizing:border-box; }
.xsuri-layout { display:flex; gap:32px; align-items:stretch; margin-top:20px; }
.xsuri-sidebar { flex:0 0 260px; background:#ffffff; border:1px solid #e4ebf2; border-radius:var(--xsuri-radius); padding:18px 18px 24px; box-shadow:0 4px 22px rgba(0,0,0,0.06); display:flex; flex-direction:column; }
.xsuri-main { flex:1; background:#fff; border:1px solid #e4ebf2; border-radius:var(--xsuri-radius); padding:20px 26px 32px; box-shadow:0 4px 22px rgba(0,0,0,0.04); position:relative; }
[data-theme="dark"] .xsuri-sidebar { background:#121821; border-color:#1f2a3a; box-shadow:none; }
[data-theme="dark"] .xsuri-main { background:#0b121b; border-color:#1f2a3a; box-shadow:none; }
[data-theme="dark"] body, [data-theme="dark"] .wrap * { color:#d7e3f5; }
[data-theme="dark"] .xsuri-sort-wrap h1 { color:#0a0e14; }
[data-theme="dark"] .xsuri-hint { color:#0a0e14; background:#eef7ff; }
[data-theme="dark"] #xsuri-per-page { background:#0f1b2a; color:#d7e3f5; border-color:#28415e; }
[data-theme="dark"] #xsuri-per-page option { background:#0f1b2a; color:#d7e3f5; }
[data-theme="dark"] #xsuri-scroll-toggle { background:#0f1b2a; color:#d7e3f5; border-color:#28415e; }
[data-theme="dark"] .xsuri-cat-btn { background:#1e293b; border-color:#334155; color:#e2e8f0; }
[data-theme="dark"] .xsuri-cat-btn:hover { background:#283548; border-color:#475569; }
[data-theme="dark"] .xsuri-cat-btn.active { background:#0ea5e9; border-color:#0ea5e9; color:#ffffff; }
[data-theme="dark"] .xsuri-cat-grip::before { background:#64748b; box-shadow:4px 0 0 #64748b; }
[data-theme="dark"] .xsuri-cat-toggle { background:#1e293b; }
[data-theme="dark"] .xsuri-cat-toggle:hover { background:#283548; }
[data-theme="dark"] .xsuri-cat-toggle::before { color:#60a5fa; }
[data-theme="dark"] .xsuri-cat-children > .xsuri-cat-row > .xsuri-cat-line > .xsuri-cat-btn { background:#0f172a; border-color:#1e293b; }
[data-theme="dark"] .xsuri-cat-children > .xsuri-cat-row > .xsuri-cat-line > .xsuri-cat-btn:hover { background:#1e293b; }
[data-theme="dark"] .xsuri-cat-btn--fixed { background:#1e293b !important; border-color:#475569 !important; }
[data-theme="dark"] .xsuri-products-sortable, [data-theme="dark"] #xsuri-products-pane { background:#0f1b2a; }
[data-theme="dark"] .xsuri-product-item { background:#172840; border-color:#28415e; }
[data-theme="dark"] .xsuri-product-item:hover { background:#1b2c49; border-color:#35608e; }
[data-theme="dark"] .no-img { background:#22324a; color:#9fb7d4; }
[data-theme="dark"] .xsuri-context-menu { background:#152235; border-color:#28415e; }
[data-theme="dark"] .xsuri-context-menu-btn { background:#172840; border-color:#28415e; color:#a9c8ff; }
.xsuri-sidebar-head { font-size:15px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
[data-theme="dark"] th, [data-theme="dark"] td input, [data-theme="dark"] td p, [data-theme="dark"] a.nav-tab, [data-theme="dark"] td label, [data-theme="dark"] div.wrap h1, [data-theme="dark"] div.wrap h3 {color: black !important;}
[data-theme="dark"] div .card *, [data-theme="dark"] table.widefat * {color: black !important}
[data-theme="dark"] table.widefat tbody tr td button, [data-theme="dark"] button#xsuri-create-backup {color: #2271b1 !important}

.xsuri-main-head { font-size:15px; margin-bottom:16px; display:flex; align-items:center; gap:14px; }
.xsuri-nav-tabs { display:flex; gap:6px; margin:0 0 14px; }
.xsuri-nav-tab { text-decoration:none; padding:8px 14px; background:#f2f7fb; border:1px solid #d5e3ed; border-radius:8px; font-size:13px; font-weight:600; color:#1f374d; transition:background .18s, box-shadow .25s; }
.xsuri-nav-tab:hover { background:#e8f2f9; box-shadow:0 4px 14px rgba(0,0,0,0.08); }
.xsuri-nav-tab.active { background:linear-gradient(135deg,var(--xsuri-secondary) 0%, var(--xsuri-primary) 100%); color:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.18); border-color: var(--xsuri-primary); }
[data-theme="dark"] .xsuri-nav-tab { background:#132033; border-color:#233147; color:#d7e3f5; }
[data-theme="dark"] .xsuri-nav-tab:hover { background:#172840; }
[data-theme="dark"] .xsuri-nav-tab.active { background:linear-gradient(135deg,#1b3252 0%, #0f2240 100%); color:#fff; }
#xsuri-category-list { list-style:none; margin:0; padding:0; display:block; }
#xsuri-category-list > .xsuri-cat-row { margin-bottom:4px; }
#xsuri-category-list > .xsuri-cat-row:last-child { margin-bottom:0; }
.xsuri-cat-row { margin:0; padding:0; position:relative; }
.xsuri-cat-row.xsuri-dragging { opacity:.6; }
.xsuri-cat-line { display:flex; align-items:center; gap:6px; padding:2px 0; }
.xsuri-cat-grip { width:24px; height:28px; display:inline-flex; align-items:center; justify-content:center; cursor:grab; border-radius:4px; margin-left:8px; flex-shrink:0; position:relative; transition:opacity .2s, background .2s; min-width:24px; padding:4px; }
.xsuri-cat-grip:hover { opacity:0.8; background:rgba(0,0,0,0.05); }
.xsuri-cat-grip:active { cursor:grabbing; background:rgba(0,0,0,0.1); }
.xsuri-cat-grip::before { content:''; width:3px; height:12px; background:#9ca8b5; border-radius:1.5px; box-shadow:5px 0 0 #9ca8b5; display:block; pointer-events:none; }
.xsuri-cat-grip--spacer { width:24px; height:28px; display:inline-block; visibility:hidden; flex-shrink:0; margin-left:8px; }
.xsuri-cat-btn { flex:1; text-align:left; background:#ffffff; border:1px solid #e8edf2; color:#2d3748; padding:9px 14px; font-size:13px; font-weight:500; border-radius:8px; cursor:pointer; position:relative; display:flex; align-items:center; gap:8px; transition:all .2s ease; box-shadow:0 1px 2px rgba(0,0,0,0.02); }
.xsuri-cat-btn:hover { background:#f7fafc; border-color:#cbd5e0; transform:translateX(2px); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.xsuri-cat-btn.active { background:#008aff; color:#ffffff; border-color:#008aff; box-shadow:0 4px 12px rgba(0,138,255,0.25); font-weight:600; }
.ui-sortable-helper .xsuri-cat-btn { cursor:grabbing; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.ui-sortable-helper .xsuri-cat-grip { cursor:grabbing; }
.xsuri-cat-children { list-style:none; margin:4px 0 0 20px; padding:0; display:block; }
.xsuri-cat-row.xsuri-cat-collapsed > .xsuri-cat-children { display:none; }
.xsuri-cat-toggle { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; margin-right:6px; border-radius:6px; border:none; background:#e8f0f8; cursor:pointer; flex-shrink:0; transition:all .25s cubic-bezier(0.4,0,0.2,1); }
.xsuri-cat-toggle:hover { background:#d0e2f2; transform:scale(1.15); box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.xsuri-cat-toggle:active { transform:scale(0.95); }
.xsuri-cat-toggle::before { content:'▼'; font-size:11px; color:#3b82f6; line-height:1; font-weight:bold; transition:transform .25s cubic-bezier(0.4,0,0.2,1); }
.xsuri-cat-row.xsuri-cat-collapsed .xsuri-cat-toggle::before { transform:rotate(-90deg); }
.xsuri-cat-toggle--spacer { width:24px; height:24px; display:inline-block; margin-right:6px; visibility:hidden; pointer-events:none; flex-shrink:0; }
.xsuri-cat-disabled .xsuri-cat-grip { cursor:not-allowed; opacity:.4; }
.xsuri-products-disabled .xsuri-product-item { cursor:default; }
.xsuri-products-disabled .xsuri-product-item:hover { transform:none; box-shadow:0 3px 14px rgba(0,0,0,0.06); }
#xsuri-category-list > .xsuri-cat-row.depth-0 > .xsuri-cat-line > .xsuri-cat-btn { font-weight:600; }
.xsuri-cat-children > .xsuri-cat-row > .xsuri-cat-line > .xsuri-cat-btn { background:#fafbfc; border-color:#f1f3f5; font-weight:400; font-size:12px; padding:7px 12px; }
.xsuri-cat-children > .xsuri-cat-row > .xsuri-cat-line > .xsuri-cat-btn:hover { background:#f4f6f8; border-color:#e4e7eb; }
.xsuri-cat-children > .xsuri-cat-row { position:relative; }
[data-theme="dark"] #xsuri-category-list { --xsuri-branch:#2a3a52; }
.xsuri-cat-btn--fixed { background:#f8f9fa !important; border:1px dashed #cbd5e0 !important; opacity:0.8; color:black !important; }
[data-theme="dark"] .xsuri-cat-btn--fixed { background:#1e293b !important; border-color:#475569 !important; color:#d7e3f5 !important; }
.xsuri-cat-fixed .xsuri-cat-grip { cursor:not-allowed !important; opacity:0.3; pointer-events:none; }
.xsuri-cat-placeholder, #xsuri-category-list > .ui-sortable-placeholder { height:34px !important; border:2px dashed var(--xsuri-primary); border-radius:8px; background:rgba(0,138,255,0.15); margin:0 0 4px; box-sizing:border-box; width:100%; animation:xsuriCatPH 1.2s ease-in-out infinite; }
.xsuri-cat-manual-placeholder { height:34px; border:2px dashed var(--xsuri-primary); border-radius:8px; background:rgba(0,138,255,0.15); margin:0 0 4px; box-sizing:border-box; width:100%; animation:xsuriCatPH 1.2s ease-in-out infinite; position:relative; }
.xsuri-cat-ghost { position:absolute; left:0; top:0; z-index:9999; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.18); background:#fff; border:2px solid var(--xsuri-primary); border-radius:8px; }
.xsuri-cat-row.xsuri-dragging { opacity:.7; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.12); }
@keyframes xsuriCatPH { 0%,100% { background:rgba(0,138,255,0.12);} 50% { background:rgba(0,138,255,0.18);} }
.xsuri-multi-count-helper { font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,var(--xsuri-primary), var(--xsuri-secondary)); color:#fff; border-radius:14px; padding:16px 22px; box-shadow:0 10px 30px rgba(0,0,0,0.25); }
#xsuri-products-pane { list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; min-height:140px; }
.xsuri-products-sortable, #xsuri-products-pane { grid-auto-flow:dense; }
#xsuri-products-pane.xsuri-drag-flex { display:flex; flex-wrap:wrap; gap:16px; }
#xsuri-products-pane.xsuri-drag-flex > .xsuri-product-item { flex:1 1 180px; }
.xsuri-sort-placeholder, .ui-sortable-placeholder { border:2px dashed var(--xsuri-primary) !important; border-radius:8px !important; min-height:120px !important; background:rgba(0,138,255,0.1) !important; width:auto !important; visibility:visible !important; display:block !important; opacity:1 !important; box-sizing:border-box !important; animation:pulsePlaceholder 1.5s ease-in-out infinite; }
@keyframes pulsePlaceholder { 0%,100% { opacity:1; background:rgba(0,138,255,0.1);} 50% { opacity:.7; background:rgba(0,138,255,0.15);} }
[data-theme="dark"] .xsuri-sort-placeholder,[data-theme="dark"] .ui-sortable-placeholder { border-color:var(--xsuri-secondary) !important; background:rgba(77,163,255,0.15) !important; }
#xsuri-products-pane.xsuri-no-placeholder .ui-sortable-placeholder { display:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; }
body.xsuri-hide-placeholders .ui-sortable-placeholder { display:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; visibility:hidden !important; }
[data-theme="dark"] .xsuri-cat-btn--fixed { background:#152235; border-color:#2a3a52; }
[data-theme="dark"] .xsuri-cat-grip::before { background:#9fb7d4; box-shadow:4px 0 0 #9fb7d4; }
[data-theme="dark"] .xsuri-cat-grip:hover { background-color:#142135; }
[data-theme="dark"] .xsuri-cat-toggle { border-color:#2a3a52; background:#0e1a2a; }
[data-theme="dark"] .xsuri-cat-toggle:hover { background:#132133; border-color:#34455e; }
[data-theme="dark"] .xsuri-cat-placeholder, [data-theme="dark"] #xsuri-category-list .ui-sortable-placeholder { border-color:#4da3ff; background:rgba(77,163,255,0.12); }
[data-theme="dark"] .xsuri-sort-placeholder { border-color:#4da3ff; background:rgba(77,163,255,0.12); }
[data-theme="dark"] .xsuri-multi-count-helper { background:linear-gradient(145deg,#1b5fcc, #3aa0ff); }
[data-theme="dark"] .xsuri-cat-toggle { border-color:#9fb7d4; }
@media (max-width:1020px){ .xsuri-layout { flex-direction:column; } .xsuri-sidebar { flex:none; width:100%; order:2; } .xsuri-main { order:1; } }
.xsuri-demo-note { background:var(--xsuri-bg_soft); border-left:4px solid var(--xsuri-primary); padding:12px 16px; border-radius:var(--xsuri-radius); font-size:13px; }
#xsuri-category-sortable { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:30px; }
.xsuri-category-item { background:#fff; border:2px solid var(--xsuri-bg_soft); border-radius:var(--xsuri-radius); box-shadow:0 2px 12px rgba(0,0,0,0.05); overflow:hidden; position:relative; }
.xsuri-category-title { font-weight:600; font-size:1.15em; color:var(--xsuri-primary); background:linear-gradient(90deg,var(--xsuri-bg_soft) 0%, #fff 100%); padding:12px 24px 12px 54px; margin:0 0 4px; border-bottom:1px solid #d2eaff; position:relative; user-select:none; cursor:move; }
.xsuri-category-title .xsuri-collapse-btn { position:absolute; left:12px; top:10px; width:30px; height:30px; border:none; border-radius:50%; background:var(--xsuri-secondary); color:#fff; font-weight:700; font-size:20px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.12); transition:transform .2s, background .2s; }
.xsuri-category-title .xsuri-collapse-btn:hover { transform:scale(1.12); background:var(--xsuri-primary); }
.xsuri-category-collapsed > ul { display:none!important; }
.xsuri-products-sortable { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; list-style:none; margin:0; padding:24px; min-height:120px; transition:box-shadow .3s, background .3s; background:#fafbfd; border-radius:0 0 var(--xsuri-radius) var(--xsuri-radius); }
.xsuri-product-item { cursor:move; background:#fff; border:1.5px solid #d9e2ec; padding:14px 12px 10px; display:flex; flex-direction:column; align-items:center; min-height:120px; border-radius:var(--xsuri-radius); box-shadow:0 3px 14px rgba(0,0,0,0.06); transition:box-shadow .2s, transform .22s, border-color .22s, background .22s; position:relative; }
.xsuri-product-item:hover { box-shadow:0 6px 24px rgba(0,0,0,0.10); transform:translateY(-4px); border-color:var(--xsuri-secondary); background:linear-gradient(140deg,#fff 0%, #f4fbff 100%); }
.xsuri-product-item.outofstock { opacity:.55; pointer-events:none; background:#f2f3f5; border:1.5px dashed #c5ccd3; }
.xsuri-product-item.xsuri-selected { border:2px solid var(--xsuri-primary); box-shadow:0 0 0 3px rgba(0,138,255,0.15), 0 8px 30px rgba(0,138,255,0.25); background:linear-gradient(120deg,var(--xsuri-bg_soft) 40%, #fff 100%); transform:scale(1.02); cursor:move; }
.xsuri-product-item.xsuri-being-moved { opacity:0 !important; pointer-events:none !important; position:absolute !important; left:-9999px !important; }
[data-theme="dark"] .xsuri-product-item.xsuri-selected { box-shadow:0 0 0 3px rgba(77,163,255,0.2), 0 8px 30px rgba(77,163,255,0.3); }
#xsuri-selection-counter { position:fixed; top:120px; right:40px; background:linear-gradient(145deg,var(--xsuri-primary), var(--xsuri-secondary)); color:#fff; padding:12px 24px; border-radius:50px; font-size:14px; font-weight:700; box-shadow:0 8px 30px rgba(0,138,255,0.4); z-index:9999; pointer-events:none; animation:slideInRight .3s ease; }
[data-theme="dark"] #xsuri-selection-counter { background:linear-gradient(145deg,#1b5fcc,#3aa0ff); }
@keyframes slideInRight { from { transform:translateX(100px); opacity:0; } to { transform:translateX(0); opacity:1; } }
.xsuri-multiselect-hint { position:fixed; bottom:120px; right:40px; background:#1e293b; color:#e2e8f0; padding:16px 20px; border-radius:12px; font-size:13px; line-height:1.6; box-shadow:0 10px 40px rgba(0,0,0,0.3); z-index:9998; max-width:280px; animation:fadeInUp .4s ease; }
.xsuri-multiselect-hint::before { content:"💡 Multi-select tips:"; display:block; font-weight:700; margin-bottom:8px; color:#60a5fa; }
.xsuri-multiselect-hint ul { margin:0; padding-left:20px; }
.xsuri-multiselect-hint li { margin:4px 0; }
.xsuri-multiselect-hint .close-hint { position:absolute; top:8px; right:12px; background:transparent; border:none; color:#94a3b8; font-size:18px; cursor:pointer; padding:0; width:24px; height:24px; }
.xsuri-multiselect-hint .close-hint:hover { color:#fff; }
@keyframes fadeInUp { from { transform:translateY(20px); opacity:0;} to { transform:translateY(0); opacity:1;} }
.xsuri-title { margin-top:8px; font-weight:600; text-align:center; font-size:13px; color:#222; line-height:1.25; }
.xsuri-title.outofstock { color:#888; text-decoration:line-through; }
.no-img { width:60px; height:60px; background:#e0e6ec; display:inline-flex; align-items:center; justify-content:center; color:#6b7785; border-radius:12px; font-size:11px; }
#xsuri-save-order { margin-top:24px; }
#xsuri-save-status { margin-top:10px; font-weight:600; }
.xsuri-badge-demo { margin-left:10px; padding:2px 8px; background:#ffd8b3; color:#7a3f00; border-radius:999px; font-size:10px; font-weight:700; vertical-align:middle; }
#xsuri-scroll-btns { position:fixed; right:32px; bottom:32px; display:flex; flex-direction:column; gap:14px; z-index:1000; }
.xsuri-scroll-btn { background:linear-gradient(135deg,var(--xsuri-secondary) 0%, var(--xsuri-primary) 100%); color:#fff; border:none; border-radius:50%; box-shadow:0 8px 32px rgba(0,0,0,.25); font-size:26px; width:66px; height:66px; cursor:pointer; opacity:.96; display:flex; align-items:center; justify-content:center; transition:transform .25s, box-shadow .25s; }
.xsuri-scroll-btn:hover { transform:scale(1.12) rotate(-3deg); box-shadow:0 10px 40px rgba(0,0,0,.30); }
.xsuri-context-menu { position:absolute; background:#fff; border:1px solid #ced7e0; border-radius:12px; padding:8px; box-shadow:0 12px 42px rgba(0,0,0,0.18); z-index:10000; min-width:180px; }
.xsuri-context-menu-btn { width:100%; text-align:left; background:#f6fbff; border:1px solid #d3e7f5; color:var(--xsuri-accent); border-radius:8px; padding:8px 10px; margin:6px 0; cursor:pointer; font-size:13px; font-weight:600; transition:background .2s, color .2s; }
.xsuri-context-menu-btn:hover { background:var(--xsuri-primary); color:#fff; }
.xsuri-hint { font-size:11px; margin-left:12px; color:var(--xsuri-accent); background:#eef7ff; padding:4px 8px; border-radius:999px; }
.xsuri-license-status { padding:4px 10px; border-radius:999px; font-weight:600; }
.xsuri-license-active { background:#e6ffec; color:#055d20; border:1px solid #c3f3cf; }
.xsuri-license-inactive { background:#fff4e5; color:#6b3b00; border:1px solid #ffe3bd; }
.xsuri-disabled-cat .xsuri-category-title { cursor:not-allowed; }
.xsuri-cat-disabled .xsuri-category-item { opacity:0.92; }
@media (max-width:1200px){ .xsuri-products-sortable { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } }
@media (max-width:800px){ .xsuri-products-sortable { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); } .xsuri-product-item { padding:12px 8px; } }