.opt-app{
  --purple:#8C3CFA; --purple-hi:#7A2BE8; --purple-soft:#F1E8FE; --purple-line:#E2D2FC;
  --teal:#0FA79E; --teal-soft:#E3F5EE; --teal-ink:#0E7C66;
  --amber:#C98A00; --amber-soft:#FDF3DE; --amber-line:#F1DDA6; --red:#D3453F; --red-soft:#FBE9E8;
  --canvas:#F4F3EF; --card:#FFFFFF; --field:#FAFAF8;
  --ink:#1A1A1F; --muted:#8A8A92; --faint:#B6B6BC;
  --line:rgba(0,0,0,0.08); --line-soft:rgba(0,0,0,0.05);
  --rail-bg:#24242E; --rail-ink:#C9C9D2; --rail-muted:#8A8A99; --rail-label:#5E5E6E;
  --rail-hover:rgba(255,255,255,0.06);
  --r-card:20px; --r-md:13px; --r-sm:10px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,0.04); --sh-pop:0 18px 50px rgba(0,0,0,0.16);
  --rail-w:230px; --top-h:60px;
  background:var(--canvas); color:var(--ink); font-size:14px; line-height:1.45;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  display:flex; min-height:100vh;
}
/* Body background — plain canvas (fallback if the ::before layer fails). */
body.opt-app-body{
    margin:0; padding:0; min-height:100vh;
    background:var(--canvas);
    position:relative;
}
/* Fixed layer with the dark rail column + canvas gradient. Sits behind
   everything (z-index:-1) and is `position:fixed` so it never scrolls
   with the page — the dark strip under the sticky rail stays painted no
   matter how far the user scrolls. Uses a pseudo-element (not
   background-attachment:fixed) because that CSS mode is unreliable with
   gradients across some browsers. */
body.opt-app-body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(90deg,
        var(--rail-bg) 0,
        var(--rail-bg) var(--rail-w, 230px),
        var(--canvas) var(--rail-w, 230px),
        var(--canvas) 100%);
}
html{ min-height:100vh; }
/* On mobile the rail is pulled off-screen (translateX(-100%)) so the
   left-side dark strip in the body gradient shouldn't be there. */
@media (max-width:900px){
    body.opt-app-body{ background:var(--canvas); }
}
.opt-app, .opt-app *{ box-sizing:border-box; -webkit-font-smoothing:antialiased; }
.opt-app button{ font:inherit; color:inherit; }
.opt-app a{ color:inherit; text-decoration:none; }
.opt-app input, .opt-app select, .opt-app textarea{ font-family:inherit; }
.opt-app p{ margin:0; }
.opt-app h1, .opt-app h2, .opt-app h3, .opt-app h4, .opt-app h5, .opt-app h6{ margin:0; font-weight:inherit; line-height:inherit; color:inherit; }
.opt-app label{ font-weight:400; margin-bottom:0; }
.opt-app ul{ list-style:none; margin:0; padding:0; }
.opt-app .num{ font-variant-numeric:tabular-nums; }
.opt-app :focus-visible{ outline:2px solid var(--purple); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){ .opt-app *{ animation:none!important; transition:none!important; } }

/* ================= RAIL ================= */
/* Rail is `position:fixed` (not sticky) so it's fully decoupled from any
   ancestor scroll container — sticky was intermittently breaking on pages
   where some ancestor had overflow/transform, causing the menu to scroll
   with content. Fixed + padding-left on .main keeps layout identical while
   guaranteeing the rail never scrolls. */
.opt-app .rail{ position:fixed; left:0; top:0; width:var(--rail-w); height:100vh;
  background:var(--rail-bg); color:var(--rail-ink);
  display:flex; flex-direction:column; z-index:40; }
.opt-app .main{ padding-left:var(--rail-w); box-sizing:border-box; }
.opt-app .rail-top{ height:var(--top-h); display:flex; align-items:center; padding:0 22px; flex:0 0 auto; }
.opt-app .rail-top .rail-logo{ display:inline-flex; align-items:center; text-decoration:none; opacity:1; transition:opacity .15s ease; }
.opt-app .rail-top .rail-logo:hover{ opacity:.85; }
.opt-app .railmark{ height:30px; width:auto; display:block; }
.opt-app .nav{
  display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important;
  flex:1 1 auto; overflow-y:auto; padding:8px 12px 16px !important;
  margin:0 !important; list-style:none !important;
  scrollbar-width:none;           /* Firefox */
  -ms-overflow-style:none;        /* IE 10+ */
}
.opt-app .nav::-webkit-scrollbar{ width:0; height:0; display:none; }  /* Chrome/Safari/Edge */
.opt-app .nav-label{ font-size:10px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--rail-label); padding:0 10px; margin:20px 0 8px; }
.opt-app .nav-label:first-child{ margin-top:4px; }
.opt-app .rail .nav-item, .opt-app .nav .nav-item{
  display:flex !important; align-items:center !important; gap:12px !important; padding:9px 11px !important;
  border-radius:var(--r-md) !important; font-size:13px !important; font-weight:500 !important;
  color:var(--rail-ink) !important; margin:0 0 2px 0 !important; width:100% !important;
  min-height:0 !important; height:auto !important; max-height:none !important; flex:0 0 auto !important;
  background:none; border:0; cursor:pointer; text-align:left; transition:background .14s ease,color .14s ease;
  text-decoration:none; box-sizing:border-box !important;
}
.opt-app .rail .nav-item svg, .opt-app .nav .nav-item svg{
  width:18px !important; height:18px !important; min-width:18px !important; min-height:18px !important;
  max-width:18px !important; max-height:18px !important; flex:0 0 18px !important;
  color:var(--rail-muted); transition:color .14s ease;
}
.opt-app .nav-item:hover{ background:var(--rail-hover); color:#fff; }
.opt-app .nav-item:hover svg{ color:#fff; }
.opt-app .nav-item.is-active{ background:var(--purple); color:#fff; font-weight:600; }
.opt-app .nav-item.is-active svg{ color:#fff; }
.opt-app .nav-item .chev{ margin-left:auto; width:14px; height:14px; color:var(--rail-label); transition:transform .16s ease; }
.opt-app .nav-item[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.opt-app .subnav{ display:none; margin:2px 0 6px 24px; padding-left:4px; border-left:1px solid rgba(255,255,255,0.10); }
.opt-app .subnav.is-open{ display:block; }
.opt-app .subnav a{ display:block; padding:7px 10px; font-size:13px; color:var(--rail-muted); border-radius:var(--r-sm); text-decoration:none; }
.opt-app .subnav a:hover{ background:var(--rail-hover); color:#fff; }
.opt-app .subnav a.is-active{ color:#fff; background:var(--rail-hover); }
.opt-app .subnav .todo{ color:var(--rail-label); font-style:italic; padding:7px 10px; font-size:12.5px; }
.opt-app .subnav .nav-item{ font-size:13px; padding:8px 10px; margin-bottom:0; }
.opt-app .subnav .nav-item svg{ width:16px !important; height:16px !important; min-width:16px !important; min-height:16px !important; max-width:16px !important; max-height:16px !important; flex:0 0 16px !important; }
.opt-app .subnav .nav-item.is-active{ background:var(--purple) !important; color:#fff !important; font-weight:600; }
.opt-app .subnav .nav-item.is-active svg{ color:#fff !important; }
.opt-app .nav-item.is-trail{ color:#fff; }
.opt-app .nav-item.is-trail svg{ color:var(--purple); }
.opt-app .subnav-group{ display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:13px; color:var(--rail-ink); background:none; border:0; width:100%; text-align:left; cursor:pointer; border-radius:var(--r-sm); }
.opt-app .subnav-group:hover{ background:var(--rail-hover); color:#fff; }
.opt-app .subnav-group .subnav-ico{ width:14px; height:14px; flex:0 0 14px; color:var(--rail-label); }
.opt-app .subnav-group:hover .subnav-ico{ color:#fff; }
.opt-app .subnav-group .chev{ margin-left:auto; width:12px; height:12px; color:var(--rail-label); transition:transform .16s ease; }
.opt-app .subnav-group[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.opt-app .subnav-nested{ margin:2px 0 6px 22px; padding-left:10px; border-left:1px solid rgba(255,255,255,0.10); }

/* ================= MAIN ================= */
.opt-app .main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.opt-app .topbar{ height:var(--top-h); flex:0 0 auto; position:sticky; top:0; z-index:30; background:var(--card);
  border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; padding:0 22px; }
.opt-app .iconbtn{ width:36px; height:36px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--card);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; color:inherit; }
.opt-app .iconbtn:hover{ border-color:var(--purple-line); color:var(--purple); }
.opt-app .iconbtn svg{ width:18px; height:18px; }
.opt-app .hamburger{ display:none; }
.opt-app .topbar .spacer{ flex:1 1 auto; }
.opt-app .shopbtn{ display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:5px 12px 5px 6px; cursor:pointer; position:relative; text-decoration:none; color:inherit; }
.opt-app .shopbtn:hover{ border-color:var(--purple-line); }
.opt-app .shopdot{ width:26px; height:26px; border-radius:50%; background:var(--purple-soft); color:var(--purple);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 26px; }
.opt-app .shopbtn .nm{ font-size:13px; font-weight:600; line-height:1.15; }
.opt-app .shopbtn .rl{ font-size:11px; color:var(--muted); line-height:1.15; }
.opt-app .shopbtn .chev{ width:14px; height:14px; color:var(--faint); }
.opt-app .lang{ border:1px solid var(--line); background:var(--card); border-radius:var(--r-pill); height:32px;
  padding:0 12px; font-size:12.5px; font-weight:600; cursor:pointer; color:inherit; text-decoration:none;
  display:inline-flex; align-items:center; }
.opt-app .lang:hover{ border-color:var(--purple-line); color:var(--purple); }
.opt-app .avatar{ width:34px; height:34px; border-radius:50%; background:var(--purple); color:#fff; font-size:12px;
  font-weight:600; display:flex; align-items:center; justify-content:center; flex:0 0 34px; }

/* dropdowns */
.opt-app .drop{ position:absolute; top:calc(100% + 6px); right:0; min-width:220px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-pop); padding:6px; display:none; z-index:50; }
.opt-app .drop.is-open{ display:block; }
.opt-app .drop a, .opt-app .drop button{ display:block; width:100%; padding:8px 10px; border-radius:var(--r-sm);
  font-size:13px; text-align:left; background:none; border:0; cursor:pointer; color:inherit; text-decoration:none; }
.opt-app .drop a:hover, .opt-app .drop button:hover{ background:var(--purple-soft); color:var(--purple); }
.opt-app .drop .divider{ height:1px; background:var(--line); margin:6px 0; }
.opt-app .drop .danger:hover{ background:var(--red-soft); color:var(--red); }

.opt-app .content{ flex:1 1 auto; padding:24px 22px 56px; }
.opt-app .wrap{ max-width:1320px; margin:0 auto; }

/* page head */
.opt-app .pagehead{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.opt-app .pagehead h1{ font-size:27px; font-weight:600; letter-spacing:-0.6px; }
.opt-app .pagehead .sub{ font-size:13px; color:var(--muted); margin-top:3px; }
.opt-app .headacts{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  align-self:flex-start; margin-top:24px; }
.opt-app .pagehead-sm .headacts{ margin-top:18px; }
.opt-app .seg{ display:flex; background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.opt-app .seg button, .opt-app .seg a{ border:0; background:none; padding:6px 14px; border-radius:var(--r-pill); font-size:13px;
  font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; text-decoration:none; }
.opt-app .seg button.is-on, .opt-app .seg a.is-on{ background:var(--purple); color:#fff; }
.opt-app .btn-quick{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--card); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; color:inherit; text-decoration:none; }
.opt-app .btn-quick svg{ width:16px; height:16px; color:var(--purple); }
.opt-app .btn-quick:hover{ border-color:var(--purple-line); }

/* sections */
.opt-app .sec{ margin-bottom:14px; display:flex; align-items:baseline; gap:10px; }
.opt-app .sec h2{ font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
.opt-app .sec .note{ font-size:12px; color:var(--faint); }
.opt-app .block{ margin-bottom:30px; }

/* hero + performance */
.opt-app .perf{ display:grid; grid-template-columns:1.55fr 1fr 1fr; gap:14px; }
.opt-app .hero{ position:relative; overflow:hidden; border-radius:var(--r-card); padding:22px; color:#fff;
  background:linear-gradient(122deg,#8C3CFA 0%,#7A50F2 40%,#3A9BC9 74%,#17C9A6 100%); }
.opt-app .hero::after{ content:""; position:absolute; right:-60px; bottom:-90px; width:280px; height:280px;
  border-radius:50%; background:rgba(255,255,255,0.10); }
.opt-app .hero .top{ display:flex; align-items:center; gap:7px; position:relative; z-index:1; }
.opt-app .hero .lbl{ font-size:12.5px; color:rgba(255,255,255,0.88); font-weight:500; }
.opt-app .hero .val{ font-size:40px; font-weight:700; letter-spacing:-1.4px; margin-top:14px; position:relative; z-index:1; }
.opt-app .hero .foot{ display:flex; align-items:center; gap:9px; margin-top:12px; position:relative; z-index:1; }
.opt-app .pill{ background:rgba(255,255,255,0.20); border-radius:var(--r-pill); padding:3px 10px; font-size:11.5px; font-weight:600; }
.opt-app .hero .cmp{ font-size:12px; color:rgba(255,255,255,0.82); }

.opt-app .mcard{ background:var(--card); border-radius:var(--r-card); padding:20px; box-shadow:var(--sh-1); display:flex; flex-direction:column; }
.opt-app .mcard .top{ display:flex; align-items:center; gap:7px; }
.opt-app .mcard .lbl{ font-size:12.5px; color:var(--muted); font-weight:500; }
.opt-app .mcard .val{ font-size:32px; font-weight:600; letter-spacing:-1px; margin-top:12px; }
.opt-app .mcard .val.empty{ color:var(--faint); }
.opt-app .mcard .foot{ margin-top:auto; padding-top:12px; font-size:12px; color:var(--muted); }
.opt-app .delta{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600;
  background:var(--teal-soft); color:var(--teal-ink); border-radius:var(--r-pill); padding:3px 9px; }
.opt-app .delta.down{ background:var(--red-soft); color:var(--red); }
.opt-app .cta{ color:var(--purple); font-weight:600; font-size:13px; }
.opt-app .cta:hover{ text-decoration:underline; }
.opt-app .info{ width:14px; height:14px; color:currentColor; opacity:.5; cursor:help; flex:0 0 14px; }
.opt-app .hero .info{ opacity:.8; }

/* config row */
.opt-app .cfg{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.opt-app .ccard{ background:var(--card); border-radius:var(--r-card); padding:18px 20px; box-shadow:var(--sh-1);
  display:flex; align-items:center; gap:15px; }
.opt-app .ccard .ic{ width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:0 0 40px; }
.opt-app .ccard .ic svg{ width:19px; height:19px; }
.opt-app .ic-purple{ background:var(--purple-soft); color:var(--purple); }
.opt-app .ic-teal{ background:var(--teal-soft); color:var(--teal); }
.opt-app .ccard .v{ font-size:22px; font-weight:600; letter-spacing:-0.5px; }
.opt-app .ccard .k{ font-size:12.5px; color:var(--muted); }
.opt-app .ccard .grow{ flex:1 1 auto; min-width:0; }
.opt-app .bar{ height:6px; border-radius:var(--r-pill); background:var(--teal-soft); margin-top:8px; overflow:hidden; }
.opt-app .bar > i{ display:block; height:100%; background:var(--teal); border-radius:var(--r-pill); }

/* charts */
.opt-app .charts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.opt-app .chartcard{ background:var(--card); border-radius:var(--r-card); padding:20px; box-shadow:var(--sh-1); }
.opt-app .chartcard .ch-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.opt-app .chartcard .ch-t{ font-size:13px; color:var(--muted); font-weight:500; }
.opt-app .chartcard .ch-v{ font-size:24px; font-weight:600; letter-spacing:-0.7px; margin-top:3px; }
.opt-app .chart{ width:100%; height:208px; display:block; overflow:visible; }
.opt-app .chart .gl{ stroke:var(--line-soft); stroke-width:1; }
.opt-app .chart .ln{ fill:none; stroke:var(--teal); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke; }
.opt-app .chart .pk{ fill:var(--purple); stroke:#fff; stroke-width:2; }
.opt-app .chart .lst{ fill:var(--teal); stroke:#fff; stroke-width:2; }
.opt-app .chart .yl{ font-size:10px; fill:var(--faint); text-anchor:end; font-family:inherit; }
.opt-app .chart .xl{ font-size:10px; fill:var(--faint); text-anchor:middle; font-family:inherit; }
.opt-app .legend{ display:flex; gap:16px; margin-top:12px; font-size:11.5px; color:var(--muted); flex-wrap:wrap; }
.opt-app .legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }

/* mobile nav */
.opt-app .drawer-scrim{ position:fixed; inset:0; background:rgba(20,18,26,0.45); z-index:39; display:none; }
.opt-app .drawer-scrim.is-open{ display:block; }
.opt-app .bottomnav{ display:none; position:sticky; bottom:0; z-index:35; background:rgba(255,255,255,0.96);
  backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:7px 6px calc(7px + env(safe-area-inset-bottom)); }
.opt-app .bn-items{ display:flex; }
.opt-app .bn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px;
  color:var(--muted); font-size:10.5px; font-weight:500; text-decoration:none; }
.opt-app .bn svg{ width:21px; height:21px; }
.opt-app .bn.is-active{ color:var(--purple); font-weight:600; }

/* ================= RESPONSIVE ================= */
@media (max-width:1160px){
  .opt-app .perf{ grid-template-columns:1fr 1fr; }
  .opt-app .hero{ grid-column:1 / -1; }
  .opt-app .charts{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .opt-app .rail{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease;
    z-index:41; box-shadow:var(--sh-pop); width:262px; flex-basis:262px; }
  .opt-app .rail.is-open{ transform:none; }
  /* Rail is off-screen on mobile — drop the reserved gutter on .main. */
  .opt-app .main{ padding-left:0; }
  .opt-app .hamburger{ display:flex; }
  .opt-app .topbar{ padding:0 14px; }
  .opt-app .content{ padding:18px 14px 34px; }
  .opt-app .cfg{ grid-template-columns:1fr; }
  .opt-app .bottomnav{ display:block; }
  .opt-app .pagehead h1{ font-size:23px; }
  .opt-app .headacts{ width:100%; }
  .opt-app .seg{ flex:1 1 auto; }
  .opt-app .seg button, .opt-app .seg a{ flex:1; padding:6px 8px; text-align:center; justify-content:center; }
}
@media (max-width:620px){
  .opt-app .perf{ grid-template-columns:1fr; }
  .opt-app .shopbtn .txt{ display:none; }
  .opt-app .shopbtn{ padding:5px 8px 5px 6px; }
  .opt-app .hero .val{ font-size:34px; }
  .opt-app .mcard .val{ font-size:27px; }
  .opt-app .btn-quick{ flex:1 1 calc(50% - 5px); justify-content:center; }
}

/* ================= LIST PAGE (Sort Categories & friends) — MATCHES TARGET ================= */
.opt-app .num{ font-variant-numeric:tabular-nums; }

/* breadcrumbs */
.opt-app .crumbs{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); margin-bottom:8px; }
.opt-app .crumbs svg{ width:13px; height:13px; color:var(--faint); }
.opt-app .crumbs a{ color:inherit; text-decoration:none; }
.opt-app .crumbs a:hover{ color:var(--purple); }

/* pagehead */
.opt-app .pagehead .sub{ font-size:13px; color:var(--muted); margin-top:3px; }
.opt-app .pagehead h1{ font-size:27px; font-weight:600; letter-spacing:-0.6px; margin:0; }
.opt-app .pagehead-sm h1{ font-size:22px; letter-spacing:-0.4px; }
.opt-app .headacts{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  align-self:flex-start; margin-top:24px; }
.opt-app .pagehead-sm .headacts{ margin-top:18px; }

/* buttons */
.opt-app .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 15px;
  border-radius:var(--r-md); border:1px solid var(--line); background:var(--card); font-size:13.5px;
  font-weight:600; cursor:pointer; white-space:nowrap; color:var(--ink); text-decoration:none; }
.opt-app .btn svg{ width:16px; height:16px; }
.opt-app .btn:hover{ border-color:var(--purple-line); }
.opt-app .btn.btn-primary{ background:var(--purple); border-color:var(--purple); color:#fff; }
.opt-app .btn.btn-primary:hover{ background:var(--purple-hi); border-color:var(--purple-hi); color:#fff; }

/* table card */
.opt-app .tcard{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); overflow:hidden; }
.opt-app .tbar{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }

/* search input (as <label>) */
.opt-app .tbar .search{ display:flex; align-items:center; gap:9px; background:var(--field); border:1px solid var(--line);
  border-radius:var(--r-md); height:38px; padding:0 14px; flex:1 1 260px; max-width:340px; }
.opt-app .tbar .search:focus-within{ border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); background:var(--card); }
.opt-app .tbar .search svg{ width:16px; height:16px; color:var(--faint); flex:0 0 16px; }
.opt-app .tbar .search input{ border:0; background:none; outline:none; width:100%; font-size:13.5px; color:var(--ink); box-shadow:none; padding:0; height:auto; }
.opt-app .tbar .search input::placeholder{ color:var(--faint); }

/* count on right */
.opt-app .tbar .count{ font-size:13px; color:var(--muted); margin-left:auto; white-space:nowrap; }

/* chip */
.opt-app .tbar .chip{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--card); font-size:13.5px; font-weight:500; color:var(--muted); cursor:pointer; }
.opt-app .tbar .chip:hover, .opt-app .tbar .chip.is-open{ border-color:var(--purple-line); color:var(--ink); }
.opt-app .tbar .chip svg{ width:15px; height:15px; }

/* chip dropdown */
.opt-app .chip-drop{ position:relative; }
.opt-app .chip-drop .drop{ display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:240px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-pop); padding:6px; z-index:20; max-height:320px; overflow-y:auto; }
.opt-app .chip-drop.is-open .drop{ display:block; }
.opt-app .chip-drop .drop a{ display:block; padding:8px 10px; border-radius:var(--r-sm); font-size:13px; color:var(--ink); cursor:pointer; text-decoration:none; }
.opt-app .chip-drop .drop a:hover{ background:var(--purple-soft); color:var(--purple); }
.opt-app .chip-drop .drop a.is-on{ background:var(--purple-soft); color:var(--purple); font-weight:600; }

/* table */
.opt-app .tablewrap{ overflow-x:auto; }
.opt-app table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:860px; margin:0; background:transparent; }
.opt-app table.tbl th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase;
  color:var(--muted); background:var(--field); border-bottom:1px solid var(--line);
  padding:0; position:sticky; top:0; z-index:2; white-space:nowrap; }
.opt-app table.tbl th button{ display:flex; align-items:center; gap:6px; width:100%; padding:11px 16px;
  background:none; border:0; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; }
.opt-app table.tbl th button:hover{ color:var(--ink); }
.opt-app table.tbl th .sort{ width:12px; height:12px; opacity:.4; }
.opt-app table.tbl th.is-sorted{ color:var(--purple); }
.opt-app table.tbl th.is-sorted .sort{ opacity:1; }
.opt-app table.tbl th.plain{ padding:11px 16px; }
.opt-app table.tbl td{ padding:11px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; color:var(--ink); background:var(--card); overflow-wrap:anywhere; }
.opt-app table.tbl tbody tr:last-child td{ border-bottom:0; }
.opt-app table.tbl tbody tr:hover td{ background:var(--field); }
.opt-app table.tbl td.idcell{ color:var(--muted); }

/* category path */
.opt-app .path{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.opt-app .path .anc{ font-size:12px; color:var(--faint); }
.opt-app .path .sep{ color:var(--faint); font-size:11px; }
.opt-app .path .leaf{ font-weight:600; color:var(--ink); }

/* variable badge — PURPLE not teal */
.opt-app .vbadge{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; border-radius:var(--r-pill);
  padding:3px 10px; background:var(--purple-soft); color:var(--purple); white-space:nowrap; }

/* date cell */
.opt-app td.date{ color:var(--muted); white-space:nowrap; }
.opt-app td.date small{ display:block; font-size:11px; color:var(--faint); }

/* action buttons — bordered rounded rectangles, not solid circles */
.opt-app .acts{ display:flex; gap:6px; justify-content:flex-end; }
.opt-app .act, .opt-app a.act, .opt-app button.act{ width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); text-decoration:none; padding:0; }
.opt-app .act svg{ width:16px; height:16px; }
.opt-app .act:hover, .opt-app a.act:hover, .opt-app button.act:hover{ border-color:var(--purple-line); color:var(--purple); background:var(--purple-soft); }

/* mobile row cards */
.opt-app .cards{ display:none; padding:12px; }
.opt-app .rowcard{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px; margin-bottom:10px; }
.opt-app .rowcard .rc-top{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.opt-app .rowcard .rc-id{ font-size:11.5px; font-weight:600; color:var(--muted); background:var(--field);
  border-radius:var(--r-pill); padding:2px 9px; }
.opt-app .rowcard .rc-acts{ margin-left:auto; display:flex; gap:6px; }
.opt-app .rowcard .rc-meta{ display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap;
  font-size:12px; color:var(--muted); }

/* pager */
.opt-app .pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px;
  border-top:1px solid var(--line-soft); flex-wrap:wrap; background:var(--card); }
.opt-app .pager .info{ font-size:12.5px; color:var(--muted); white-space:nowrap; flex:0 0 auto; }
.opt-app .pages{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; flex:1 1 auto; }
.opt-app .pg{ min-width:34px; height:34px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--card); font-size:13px; cursor:pointer; color:var(--ink); }
.opt-app .pg:hover{ border-color:var(--purple-line); }
.opt-app .pg.is-on{ background:var(--purple); border-color:var(--purple); color:#fff; font-weight:600; }
.opt-app .pg:disabled{ color:var(--faint); cursor:default; }
.opt-app .perpage{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); white-space:nowrap; flex:0 0 auto; }
/* Native <select> with our own chevron SVG. `appearance:none` MUST be set
   or the browser draws its own chevron on top of ours → two arrows. Every
   vendor prefix is included with !important because Chromium on some
   Windows builds still paints the native dropdown arrow when `appearance`
   is overridden by a later, less-specific rule. */
.opt-app .perpage select{
    height:32px; border-radius:var(--r-sm);
    border:1px solid var(--line); background-color:var(--card);
    font:inherit; font-size:13px; padding:0 28px 0 10px; color:var(--ink);
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 8px center;
    cursor:pointer;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
/* Firefox — kill the little inner triangle it draws next to the option
   text on some themes. `text-indent` + `text-overflow:''` used to be the
   workaround; modern FF respects `appearance:none` but this is a safety net. */
.opt-app .perpage select::-moz-focus-inner{ border:0; }
.opt-app .perpage select:focus{
    border-color:var(--purple);
    box-shadow:0 0 0 3px var(--purple-soft);
}
/* Kill the little inner arrow that appears in IE/older Firefox */
.opt-app .perpage select::-ms-expand{ display:none; }

.opt-app .empty{ text-align:center; padding:60px 20px; color:var(--muted); font-size:13px; }
.opt-app table.tbl td.empty{ text-align:center; padding:28px 20px; color:var(--muted); font-size:13.5px; background:var(--card); }
.opt-app .loading{ display:inline-block; width:16px; height:16px; border:2px solid var(--purple-soft); border-top-color:var(--purple); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:900px){
  .opt-app .tcard:has(> .cards) .tablewrap{ display:none; }
  .opt-app .tcard:has(> .cards) .cards{ display:block; }
  .opt-app .tbar .count{ margin-left:0; width:100%; }
  .opt-app .tbar .search{ max-width:none; }
}
@media (max-width:620px){
  .opt-app .headacts{ width:100%; }
  .opt-app .headacts .btn{ flex:1; }
  .opt-app .pager{ justify-content:center; }
}

/* ================= SORTING VARIABLES additions ================= */
.opt-app .hintbar{ display:flex; gap:11px; align-items:flex-start; padding:14px 18px; background:var(--purple-soft);
  border-bottom:1px solid var(--purple-line); font-size:13px; color:#5B2AA6; }
.opt-app .hintbar svg{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; }
.opt-app .hintbar a{ color:inherit; font-weight:600; text-decoration:none; }
.opt-app .hintbar a:hover{ text-decoration:underline; }

.opt-app .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--field); border:1px solid var(--line); border-radius:8px; padding:3px 9px; display:inline-block; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }

.opt-app .bdg{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap; }
.opt-app .bdg svg{ width:12px; height:12px; }
.opt-app .bdg-teal{ background:var(--teal-soft); color:var(--teal-ink); }
.opt-app .bdg-grey{ background:var(--field); color:var(--muted); border:1px solid var(--line); }
.opt-app .bdg-purple{ background:var(--purple-soft); color:var(--purple); }

.opt-app .act.danger:hover{ border-color:#F2C7C5; color:#D3453F; background:#FBE9E8; }
.opt-app .act-sep{ width:1px; height:20px; background:var(--line); align-self:center; margin:0 3px; }

.opt-app .empty-state{ text-align:center; padding:56px 24px; }
.opt-app .empty-state .eic{ width:54px; height:54px; border-radius:17px; background:var(--purple-soft); color:var(--purple);
  display:flex; align-items:center; justify-content:center; margin:0 auto 15px; }
.opt-app .empty-state .eic svg{ width:25px; height:25px; }
/* Alias for .empty (mockup uses this shorter class name) */
.opt-app .empty{ text-align:center; padding:56px 24px; }
.opt-app .empty .eic{ width:54px; height:54px; border-radius:17px; background:var(--purple-soft); color:var(--purple);
  display:flex; align-items:center; justify-content:center; margin:0 auto 15px; }
.opt-app .empty .eic svg{ width:25px !important; height:25px !important; }
.opt-app .empty h3{ font-size:17px; font-weight:600; margin:0 0 6px; color:var(--ink); }
.opt-app .empty p{ font-size:13.5px; color:var(--muted); margin:0 auto; max-width:420px; }
.opt-app .empty-state h3{ font-size:17px; font-weight:600; margin:0 0 6px; color:var(--ink); }
.opt-app .empty-state p{ font-size:13.5px; color:var(--muted); margin:0 auto 20px; max-width:380px; }
.opt-app .is-hidden{ display:none !important; }

/* ============================================================
   Modern v2 global loader — overrides style.css defaults.
   Every property is !important to beat the pre-existing rules
   for .loader / .loader-wrapper / .lds-spinner in style.css.
   Same DOM: .loader > .loader-wrapper > .lds-spinner > div * 12
   ============================================================ */
.loader{
    position:fixed !important; inset:0 !important;
    width:100vw !important; height:100vh !important;
    background:
        radial-gradient(ellipse at center, rgba(15,15,25,0.55), rgba(15,15,25,0.78)) !important;
    -webkit-backdrop-filter:blur(10px) saturate(1.1) !important;
            backdrop-filter:blur(10px) saturate(1.1) !important;
    z-index:99999999 !important;
    align-items:center !important; justify-content:center !important;
    animation:v2-loader-fadein .2s ease-out !important;
}
/* jQuery.show() sets inline style="display: block"; force flex instead. */
.loader[style*="display: block"], .loader[style*="display:block"],
.loader[style*="display: flex"],  .loader[style*="display:flex"]{
    display:flex !important;
}
/* No card — spinner sits directly on the dark scrim.
   Centered with inset:0 + margin:auto (not via the flex rule above) so it
   still lands mid-screen when .loader ends up display:block — e.g. the
   preview-pane clones in customExportBuilder.js, whose .show() leaves no
   inline display for the [style*="display: block"] selector to match. */
.loader .loader-wrapper{
    position:absolute !important;
    inset:0 !important;
    margin:auto !important;
    transform:none !important;
    width:max-content !important; height:max-content !important;
    display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    gap:22px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important; border-radius:0 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    animation:v2-loader-pop .32s cubic-bezier(.22,.61,.36,1) !important;
}
/* Purple halo behind the spinner — soft ambient glow floating on the scrim. */
.loader .loader-wrapper::before{
    content:'' !important;
    position:absolute !important;
    top:0 !important; left:50% !important; transform:translateX(-50%) !important;
    width:140px !important; height:140px !important;
    background:radial-gradient(circle, rgba(140,60,250,0.45) 0%, rgba(15,167,158,0.15) 45%, rgba(140,60,250,0) 70%) !important;
    border-radius:50% !important;
    pointer-events:none !important;
    animation:v2-loader-halo 1.8s ease-in-out infinite !important;
    filter:blur(6px) !important;
}
/* --- Spinner: dual concentric ring, opposite rotation.
       Outer ring: purple gradient trailing off, clockwise
       Inner ring: teal complementary arc, counter-clockwise. --- */
.loader .lds-spinner{
    position:relative !important;
    display:block !important;
    width:72px !important; height:72px !important;
    color:transparent !important;
    background:transparent !important;
    -webkit-mask:none !important; mask:none !important;
    border-radius:0 !important;
    animation:none !important;
}
.loader .lds-spinner::before,
.loader .lds-spinner::after{
    content:'' !important; position:absolute !important; inset:0 !important;
    border-radius:50% !important;
    border:3px solid transparent !important;
    display:block !important;
}
/* Outer ring — clockwise, purple gradient trailing off */
.loader .lds-spinner::before{
    border-top-color:#B98CFF !important;
    border-right-color:rgba(185,140,255,0.6) !important;
    border-bottom-color:rgba(185,140,255,0.18) !important;
    animation:v2-loader-spin 0.9s cubic-bezier(.5,0,.5,1) infinite !important;
    box-shadow:0 0 20px rgba(140,60,250,0.35) !important;
}
/* Inner ring — counter-clockwise, teal accent, smaller */
.loader .lds-spinner::after{
    inset:10px !important;
    border-width:2.5px !important;
    border-top-color:#4FD4C8 !important;
    border-right-color:rgba(79,212,200,0.45) !important;
    animation:v2-loader-spin-reverse 1.4s cubic-bezier(.5,0,.5,1) infinite !important;
    box-shadow:0 0 14px rgba(79,212,200,0.28) !important;
}
/* Kill the 12 original bar divs — we're using ::before/::after rings. */
.loader .lds-spinner div{ display:none !important; }
.loader .lds-spinner div::after,
.loader .lds-spinner div:after{ display:none !important; }
/* Loading label under the ring — light text on the dark scrim. */
.loader .loader-wrapper::after{
    content:'Loading' !important;
    position:relative !important;
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
    font-size:12px !important; letter-spacing:3px !important; color:rgba(255,255,255,0.82) !important;
    font-weight:600 !important; text-transform:uppercase !important;
    padding-right:14px !important;
    text-shadow:0 1px 8px rgba(0,0,0,0.35) !important;
    animation:v2-loader-dots 1.6s steps(4, end) infinite !important;
}
@keyframes v2-loader-spin{ to{ transform:rotate(360deg); } }
@keyframes v2-loader-spin-reverse{ to{ transform:rotate(-360deg); } }
@keyframes v2-loader-fadein{ from{ opacity:0; } to{ opacity:1; } }
@keyframes v2-loader-pop{
    from{ opacity:0; transform:translateY(6px) scale(0.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes v2-loader-halo{
    0%,100% { opacity:0.55; transform:translateX(-50%) scale(0.95); }
    50%     { opacity:1;    transform:translateX(-50%) scale(1.15); }
}
@keyframes v2-loader-dots{
    0%   { content:'Loading'; }
    25%  { content:'Loading.'; }
    50%  { content:'Loading..'; }
    75%  { content:'Loading...'; }
    100% { content:'Loading'; }
}
/* @media (prefers-reduced-motion:reduce){
    .loader, .loader .loader-wrapper, .loader .lds-spinner::before, .loader .lds-spinner::after,
    .loader .loader-wrapper::before, .loader .loader-wrapper::after{
        animation-duration:.001s !important;
    }
} */

/* ================= EXPORTS ================= */
.opt-app .typ{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:0.4px;
  border-radius:7px; padding:3px 8px; }
.opt-app .typ-json{ background:var(--purple-soft); color:var(--purple); }
.opt-app .typ-xml{ background:var(--teal-soft); color:var(--teal-ink); }
.opt-app .typ-csv{ background:#FDF3DE; color:#C98A00; }

.opt-app .newmenu{ position:relative; display:inline-block; }
.opt-app .newmenu .menu{ position:absolute; left:0; top:calc(100% + 6px); z-index:40; background:var(--card);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-pop); padding:6px; min-width:220px; display:none; }
.opt-app .newmenu.is-open .menu{ display:block; }
.opt-app .newmenu .menu button, .opt-app .newmenu .menu a{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 11px; border:0;
  background:none; border-radius:10px; cursor:pointer; font-size:13.5px; text-align:left; color:inherit; text-decoration:none; }
.opt-app .newmenu .menu button:hover, .opt-app .newmenu .menu a:hover{ background:var(--field); }
.opt-app .newmenu .menu svg{ width:16px; height:16px; color:var(--muted); flex:0 0 16px; }
.opt-app .newmenu .menu small{ display:block; font-size:11px; color:var(--faint); font-weight:400; margin-top:2px; }

/* type filter chips */
.opt-app .chipset{ display:flex; gap:6px; flex-wrap:wrap; }
.opt-app .chipset .chip{ height:34px; padding:0 14px; border-radius:var(--r-pill); font-size:12.5px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--muted); font-weight:500;
  display:inline-flex; align-items:center; }
.opt-app .chipset .chip:hover{ border-color:var(--purple-line); color:var(--ink); }
.opt-app .chipset .chip.is-on{ background:var(--purple-soft); border-color:var(--purple-line); color:var(--purple); font-weight:600; }

/* feed URL cell — plain monospace, no pill */
.opt-app .feed{ display:flex; align-items:center; gap:7px; min-width:0; }
.opt-app .feed code{ flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:transparent; border:0; padding:0; }
.opt-app .miniact{ width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--card);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); flex:0 0 28px;
  text-decoration:none; padding:0; }
.opt-app .miniact svg{ width:14px; height:14px; }
.opt-app .miniact:hover{ border-color:var(--purple-line); color:var(--purple); }
.opt-app .miniact.done{ border-color:var(--teal); color:var(--teal); }

/* fresh time — always dark, no amber/stale coloring */
.opt-app .fresh{ font-size:12.5px; white-space:nowrap; color:var(--ink) !important; }
.opt-app .fresh small{ display:block; font-size:11px; color:var(--faint) !important; margin-top:2px; }

/* ================= EDITOR (JSON/XML/CSV export & landing pages) ================= */
.opt-app .edit{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
.opt-app .pane{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); margin-bottom:16px; overflow:hidden; }
.opt-app .pane > h3{ font-size:15px; font-weight:600; margin:0; padding:16px 18px 0; color:var(--ink); letter-spacing:-0.1px; }
.opt-app .pane > .ph{ font-size:12.5px; color:var(--muted); padding:4px 18px 0; margin:0; }
.opt-app .pane > .pb{ padding:16px 18px 18px; }
.opt-app .f2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.opt-app .f1{ display:grid; gap:14px; }
.opt-app .fl > label{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.opt-app .fl .hint{ font-size:12px; color:var(--faint); margin-top:6px;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  word-wrap:break-word; overflow-wrap:break-word; line-height:1.4; }
.opt-app .ta{ width:100%; min-height:170px; padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--field); outline:none; resize:vertical; color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.55; }
.opt-app .ta:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }

/* inputs shared with editor */
.opt-app .inp, .opt-app .sel{ width:100%; height:42px; padding:0 14px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--field); font:inherit; font-size:14px; color:var(--ink); outline:none; }
.opt-app .inp:focus, .opt-app .sel:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .sel{ appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; }

/* Global native <select> styling was removed — the project already has
   its own legacy select frameworks (initFormsSelects / initFiltersSelects /
   updateCustomSelect) that render styled overlays. A blanket generic rule
   here conflicted with those and broke the appearance of selects across
   pages. Class-based rules (.sel, .vform-sel, .form-select) still handle
   the v2 look for the selects that need it. */

/* ==================================================================
   Global v2 skin for Select2 widgets — auto-init happens through
   v2-select-init.js on every plain <select> inside .opt-app.
   These rules give every Select2 instance the same rounded, purple-
   accented look that already exists inside the rules query builder.
   Deliberately unscoped: Select2 portals the dropdown into <body>.
   ================================================================== */
.select2-container{ min-width:0; }
.opt-app .select2-container{ width:100% !important; }

/* --- Closed trigger (the button-looking element) ---------------- */
.opt-app .select2-container--default .select2-selection--single,
.opt-app .select2-container--default .select2-selection--multiple{
    height:auto; min-height:40px;
    padding:0 38px 0 13px;
    border-radius:var(--r-md) !important;
    border:1px solid var(--line) !important;
    background:var(--field) !important;
    font-family:inherit !important; font-size:13.5px !important;
    color:var(--ink) !important;
    box-shadow:none !important;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    display:flex; align-items:center;
}
.opt-app .select2-container--default .select2-selection--single:hover,
.opt-app .select2-container--default .select2-selection--multiple:hover{
    border-color:var(--purple-line) !important;
}
.opt-app .select2-container--default.select2-container--focus .select2-selection,
.opt-app .select2-container--default.select2-container--open .select2-selection{
    border-color:var(--purple) !important; background:var(--card) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
}
.opt-app .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:var(--ink) !important;
    line-height:1.4 !important; padding:0 !important;
    font-weight:500;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.opt-app .select2-container--default .select2-selection--single .select2-selection__placeholder{
    color:var(--faint) !important; font-weight:400;
}
.opt-app .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:38px !important; width:34px !important; top:0 !important; right:4px !important;
    display:flex; align-items:center; justify-content:center;
    background-image:none !important;
    min-height:0 !important;
}
.opt-app .select2-container--default .select2-selection--single .select2-selection__arrow b{
    display:none !important;
}
.opt-app .select2-container--default .select2-selection--single .select2-selection__arrow::after{
    content:''; display:block;
    width:16px; height:16px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:center;
    transition:transform .18s ease;
}
.opt-app .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after{
    transform:rotate(180deg);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C3CFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* --- Multi-select chips ---------------------------------------- */
.opt-app .select2-container--default .select2-selection--multiple{
    padding:5px 10px !important;
    /* Override the single-select min-height/right-padding grouped rule
       above so single-chip multi-selects don't leave a big white gap
       under the chip or empty space next to the search field. */
    min-height:40px !important;
    height:auto !important;
    display:flex !important; flex-wrap:wrap; align-items:center; gap:5px;
}
.opt-app .select2-container--default .select2-selection--multiple .select2-selection__rendered{
    padding:0 !important; margin:0 !important; display:contents;
}
.opt-app .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background:var(--purple-soft) !important; border:1px solid var(--purple-line) !important;
    color:var(--purple) !important; font-weight:600; font-size:12px;
    border-radius:14px !important;
    padding:3px 10px !important; margin:0 !important;
    display:inline-flex; align-items:center; gap:6px;
    max-width:100%; min-width:0;
    /* Allow long labels (breadcrumb paths, etc.) to wrap inside the pill
       instead of being truncated with "…". */
    white-space:normal; word-break:break-word; overflow-wrap:anywhere;
    line-height:1.35;
}
.opt-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color:var(--purple) !important; border:0; background:none; padding:0; font-weight:700;
    margin-right:2px !important;
}
.opt-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
    background:none !important; color:var(--purple-hi) !important;
}
.opt-app .select2-container--default .select2-search--inline{
    flex:1 1 auto; min-width:60px;
}
.opt-app .select2-container--default .select2-search--inline .select2-search__field{
    margin:0 !important; height:26px !important; font:inherit !important;
    font-size:13px !important; color:var(--ink) !important;
}

/* --- Dropdown panel (Select2 portals it to <body>) -------------- */
.select2-container--open .select2-dropdown{
    z-index:9999 !important;
    background:var(--card, #FFFFFF) !important;
    border:1px solid var(--purple-line, #E2D2FC) !important;
    border-radius:var(--r-md, 13px) !important;
    box-shadow:0 18px 50px rgba(0,0,0,0.16) !important;
    overflow:hidden;
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
}
.select2-container--open .select2-dropdown--below{ margin-top:6px !important; }
.select2-container--open .select2-dropdown--above{ margin-bottom:6px !important; }
.select2-container--open .select2-search--dropdown{
    padding:8px !important; background:var(--card, #FFFFFF) !important;
    border-bottom:1px solid var(--line-soft, rgba(0,0,0,0.05)) !important;
    position:relative;
}
.select2-container--open .select2-search--dropdown .select2-search__field{
    height:36px !important; padding:0 12px 0 36px !important;
    border-radius:10px !important; border:1px solid var(--line, rgba(0,0,0,0.08)) !important;
    background-color:var(--field, #FAFAF8) !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:left 12px center !important;
    background-size:15px 15px !important;
    outline:none !important;
    font:inherit !important; font-size:13.5px !important; color:var(--ink, #1A1A1F) !important;
}
.select2-container--open .select2-search--dropdown .select2-search__field:focus{
    border-color:var(--purple, #8C3CFA) !important;
    background-color:#FFFFFF !important;
    box-shadow:0 0 0 3px var(--purple-soft, #F1E8FE) !important;
}
.select2-container--open .select2-search--dropdown .select2-search__field::placeholder{
    color:var(--faint, #B6B6BC);
}
.select2-container--default .select2-results__options{
    max-height:min(360px, 50vh) !important; overflow-y:auto !important;
    padding:8px !important;
}
/* Options — default dark text so nothing looks pre-selected. Purple
   accent is reserved for :hover / keyboard-highlighted / aria-selected
   states so the user can tell at a glance what is actually chosen. */
.select2-container--default .select2-results__option{
    padding:12px 14px !important;
    margin:3px 0 !important;
    border-radius:10px !important;
    font-size:13.5px !important; font-weight:500 !important;
    color:var(--ink, #1A1A1F) !important;
    line-height:1.55 !important;
    cursor:pointer;
    word-break:break-word;
    transition:background-color .12s ease, color .12s ease;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option:hover{
    background:var(--purple, #8C3CFA) !important;
    color:#FFFFFF !important;
}
.select2-container--default .select2-results__option[aria-selected=true]{
    background:var(--purple-soft, #F1E8FE) !important;
    color:var(--purple, #8C3CFA) !important;
    font-weight:700 !important;
}
.select2-container--default .select2-results__option[aria-selected=true].select2-results__option--highlighted{
    background:var(--purple, #8C3CFA) !important; color:#FFFFFF !important;
}
.select2-container--default .select2-results__option[aria-disabled=true]{
    color:var(--faint, #B6B6BC) !important; cursor:not-allowed; font-weight:400 !important;
}
.select2-container--default .select2-results__option[aria-disabled=true]:hover{
    background:transparent !important; color:var(--faint, #B6B6BC) !important;
}
.select2-container--default .select2-results__message{
    color:var(--muted, #8A8A92) !important; font-size:13px; padding:14px !important;
}
/* Optgroup label — subtle uppercase heading between groups */
.select2-container--default .select2-results__group{
    padding:12px 14px 6px !important;
    font-size:10.5px !important; font-weight:700 !important;
    letter-spacing:0.9px !important; text-transform:uppercase !important;
    color:var(--faint, #B6B6BC) !important;
    background:none !important;
    cursor:default;
}
/* Options inside an optgroup keep their normal padding — Select2 nests them
   so we override the extra indent it applies. */
.select2-container--default .select2-results__option .select2-results__option{
    padding-left:14px !important;
}

/* ------------------------------------------------------------------
   Nice-select — vanilla custom dropdown (niceselect.js).
   Replaces the native OS-drawn menu of <select> elements with a styled
   listbox matching v2. The underlying <select> stays in the DOM (visually
   hidden) so forms submit as usual.
   ------------------------------------------------------------------ */
.opt-app .ns{
  position:relative; display:inline-block; width:100%;
  vertical-align:top;
}
.opt-app .ns .ns-native,
.opt-app select.ns-native{
  position:absolute !important; left:0 !important; top:0 !important;
  width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  overflow:hidden !important;
  background:none !important; box-shadow:none !important;
  appearance:none !important; -webkit-appearance:none !important;
}

/* --- Context integration: keep the wrapper honoring parents' layout rules.
   The niceselect wrapper (.ns) replaces the visible <select> in the DOM,
   so any parent selector that targeted the <select> directly no longer
   matches. Re-route the common ones (.vform-fv, form-select frames, .sel
   contexts, list-filter-item, etc.) to hit the wrapper instead. --- */
.opt-app .vform-fv > .ns,
.opt-app .list-filter-item > .ns,
.opt-app .fs > .ns{
  width:100%; display:block; margin-top:auto;
}
.opt-app .vform-fv > .ns > .ns-btn{
  height:44px; font-size:14px; padding:0 38px 0 13px;
}
.opt-app .vform-fv.err > .ns > .ns-btn,
.opt-app .fs.err > .ns > .ns-btn{
  border-color:var(--red); background:var(--red-soft);
}
.opt-app .vform-fv.err > .ns > .ns-btn .ns-label,
.opt-app .fs.err > .ns > .ns-btn .ns-label{ color:var(--red); }
.opt-app .list-filter-item > .ns > .ns-btn{
  height:40px;
}
/* Ensure the wrapper doesn't collapse when the original <select> had inline
   width applied (we already copy width/min-width, this just keeps things tidy). */
.opt-app .ns[style*="width"], .opt-app .ns[style*="min-width"]{ display:inline-block; }
.opt-app .ns-btn{
  display:flex; align-items:center; gap:8px;
  width:100%; height:40px;
  padding:0 12px 0 13px;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--field); color:var(--ink);
  font:inherit; font-size:13.5px; text-align:left;
  cursor:pointer; outline:none;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.opt-app .ns-btn:hover{ border-color:var(--purple-line); }
.opt-app .ns.is-open .ns-btn,
.opt-app .ns-btn:focus-visible{
  border-color:var(--purple); background:var(--card);
  box-shadow:0 0 0 3px var(--purple-soft);
}
.opt-app .ns-btn:disabled{
  opacity:.6; cursor:not-allowed; background-color:var(--canvas); color:var(--muted);
}
.opt-app .ns-label{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.opt-app .ns-chev{
  flex:0 0 auto; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .18s ease, color .15s ease;
}
.opt-app .ns.is-open .ns-chev{ transform:rotate(180deg); color:var(--purple); }

.opt-app .ns-menu{
  position:absolute; z-index:1050;
  left:0; right:0; top:calc(100% + 6px);
  display:none;
  max-height:280px; overflow-y:auto;
  padding:6px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--sh-pop);
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.2) transparent;
  /* Contain wheel/touch scroll — do not bubble to the parent modal body
     (was causing the menu to "snap back" to the top when the user tried
     to scroll past its edges). */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  animation:ns-fade-in .13s ease-out;
}
.opt-app .ns-menu::-webkit-scrollbar{ width:6px; }
.opt-app .ns-menu::-webkit-scrollbar-track{ background:transparent; }
.opt-app .ns-menu::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:3px; }
.opt-app .ns.is-open .ns-menu{ display:block; }
.opt-app .ns.drop-up .ns-menu{ top:auto; bottom:calc(100% + 6px); }
@keyframes ns-fade-in{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0); }
}

.opt-app .ns-item{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:8px 10px 8px 12px;
  border-radius:9px; border:0;
  background:none; color:var(--ink);
  font:inherit; font-size:13.5px; text-align:left;
  cursor:pointer; outline:none;
  transition:background .12s ease, color .12s ease;
}
.opt-app .ns-item .ns-txt{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.opt-app .ns-item .ns-tick{
  flex:0 0 14px; opacity:0; color:var(--purple);
  transition:opacity .1s ease;
}
.opt-app .ns-item:hover,
.opt-app .ns-item.is-focus{ background:var(--field); }
.opt-app .ns-item.is-on{
  background:var(--purple-soft); color:var(--purple); font-weight:600;
}
.opt-app .ns-item.is-on .ns-tick{ opacity:1; }
.opt-app .ns-item.is-disabled{
  color:var(--faint); cursor:not-allowed;
}
.opt-app .ns-item.is-disabled:hover{ background:none; }

/* segmented control */
.opt-app .seg2{ display:flex; background:var(--field); border:1px solid var(--line); border-radius:var(--r-md); padding:3px; }
.opt-app .seg2 button{ flex:1; font-size:13px; color:var(--muted); padding:8px 10px; border-radius:9px; border:0;
  background:none; cursor:pointer; font-weight:500; }
.opt-app .seg2 button.on{ background:var(--purple); color:#fff; font-weight:600; }

/* picker pills */
.opt-app .picker{ display:flex; flex-wrap:wrap; gap:7px; }
/* width:auto ακυρώνει το legacy `.exportView button{ width:150px }` του style.css */
.opt-app .pick{ align-items:center; gap:7px; height:34px; padding:0 16px; width:auto;
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--card); font-size:13px; font-weight:500;
  color:var(--muted); cursor:pointer; white-space:nowrap; line-height:1; flex:0 0 auto; text-align:center; }
.opt-app .pick:hover{ border-color:var(--purple-line); color:var(--ink); }
.opt-app .pick.on{ background:var(--purple); border-color:var(--purple); color:#fff; font-weight:600; }
.opt-app .pick svg{ width:13px; height:13px; }

/* URL box */
.opt-app .urlbox{ display:flex; align-items:center; gap:8px; background:var(--field); border:1px solid var(--line);
  border-radius:var(--r-md); padding:8px 10px; }
.opt-app .urlbox code{ flex:1 1 auto; min-width:0; font-size:11.5px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* toggle switch */
.opt-app .switch{ display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none; position:relative; }
.opt-app .switch input{ position:absolute; opacity:0; }
.opt-app .track{ width:42px; height:24px; border-radius:var(--r-pill); background:#DDDCD7; position:relative;
  transition:background .16s ease; flex:0 0 42px; }
.opt-app .track::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-1); transition:transform .16s ease; }
.opt-app .switch input:checked + .track{ background:var(--purple); }

/* ===== Products page — .filterbar + .pthumb + .prodcell ===== */
.opt-app .filterbar{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:10px 18px;
  background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); margin-bottom:16px; }
/* Column-flex .fld so each label/select stack is a hard-bounded box: prevents
   Select2's inline-block .select2-container from ignoring width:100% and
   spilling into the adjacent field. */
.opt-app .filterbar .fld{ flex:0 1 320px; min-width:240px; max-width:360px;
    display:flex; flex-direction:column; align-items:stretch; }
.opt-app .filterbar .fld .select2-container{ width:100% !important; max-width:100% !important; box-sizing:border-box; }
.opt-app .filterbar .fld > label{ display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:3px; line-height:1.2; }
.opt-app .filterbar .sel{
  width:100%; height:42px; padding:0 36px 0 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); background-color:var(--card); font:inherit; font-size:13.5px; color:var(--ink);
  outline:none; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
  cursor:pointer; line-height:1;
}
.opt-app .filterbar .sel:hover{ border-color:var(--purple-line); }
.opt-app .filterbar .sel:focus{ border-color:var(--purple); background-color:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
/* Kill legacy custom-select transformer inside .filterbar (was making native selects into purple pills) */
.opt-app .filterbar select{ display:block !important; }
.opt-app .filterbar .select-selected,
.opt-app .filterbar .select-items{ display:none !important; }
.opt-app .filterbar .search{ display:flex; align-items:center; gap:9px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-pill); height:42px; padding:0 16px; }
.opt-app .filterbar .search input{ font-size:13.5px; }
.opt-app .filterbar > .btn{ height:42px; border-radius:var(--r-pill); padding:0 18px; }
.opt-app .filterbar .search:focus-within{ border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); background:var(--card); }
.opt-app .filterbar .search svg{ width:16px; height:16px; color:var(--faint); flex:0 0 16px; }
.opt-app .filterbar .search input{ border:0; background:none; outline:none; width:100%; font-size:13.5px; color:var(--ink); padding:0; }
.opt-app .filterbar .search input::placeholder{ color:var(--faint); }
.opt-app .filterbar .grow{ flex:1 1 auto; }

@media (max-width:720px){
    .opt-app .filterbar{ padding:14px; gap:10px; }
    .opt-app .filterbar .fld{ flex:1 1 100%; max-width:none; }
    .opt-app .filterbar .search{ flex:1 1 100% !important; max-width:none !important; }
    .opt-app .filterbar .grow{ display:none; }
    .opt-app .filterbar > .btn{ flex:1 1 100%; }
}

/* Product thumbnail */
.opt-app .pthumb{ width:52px; height:66px; border-radius:9px; background:#ECEAE4; flex:0 0 52px;
  overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.opt-app .pthumb .fake{ position:absolute; inset:0; }
.opt-app .pthumb svg{ width:18px; height:18px; color:#B9B7AF; position:relative; }
.opt-app .pthumb img{ width:100%; height:100%; object-fit:cover; }

/* Product cell (title + code · category subtitle) */
.opt-app .prodcell{ display:flex; align-items:center; gap:13px; min-width:0; }
.opt-app .prodcell .t{ font-weight:600; line-height:1.35; color:var(--ink); }
.opt-app .prodcell .c{ font-size:11.5px; color:var(--faint); margin-top:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Products table gets tighter row padding */
.opt-app #pTable td{ padding:9px 16px; }

/* Mobile card variant for products */
.opt-app #pCards .rowcard .pthumb{ width:60px; height:76px; flex-basis:60px; }

/* ===== Product detail page ===== */
.opt-app .pdgrid{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:16px; align-items:start; margin-bottom:18px; }
.opt-app .photo{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); overflow:hidden; }
.opt-app .photo .frame{ aspect-ratio:3/4; background:#ECEAE4; position:relative; display:flex; align-items:center; justify-content:center; }
.opt-app .photo .frame .fake{ position:absolute; inset:0; }
.opt-app .photo .frame > svg{ width:30px; height:30px; color:#B9B7AF; position:relative; }
.opt-app .photo .cap{ padding:11px 14px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.opt-app .photo .cap .grow{ flex:1 1 auto; }

.opt-app .infocard{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); padding:20px; }
.opt-app .infocard .idstrip{ display:flex; flex-wrap:wrap; gap:0; margin-bottom:4px; }
.opt-app .infocard .idstrip > div{ flex:1 1 130px; padding:0 18px 14px 0; }
.opt-app .infocard .idstrip .k{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:3px; }
.opt-app .infocard .idstrip .v{ display:block; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:0.2px; color:var(--ink); }

.opt-app .dl{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:0 18px; margin:0; }
.opt-app .dl dt{ font-size:12.5px; color:var(--muted); padding:10px 0; border-top:1px solid var(--line-soft); }
.opt-app .dl dd{ margin:0; font-size:13.5px; padding:10px 0; border-top:1px solid var(--line-soft); min-width:0; color:var(--ink); }
.opt-app .dl dt:first-of-type, .opt-app .dl dd:first-of-type{ border-top:0; }
.opt-app .dl dd.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.opt-app .dl dd.empty{ color:var(--faint); }

.opt-app .catlist{ display:flex; flex-direction:column; gap:6px; }
.opt-app .catline{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; }
.opt-app .catline .anc{ color:var(--faint); }
.opt-app .catline .sep{ color:var(--faint); font-size:11px; }
.opt-app .catline .leaf{ font-weight:600; color:var(--ink); }

.opt-app .sumstrip{ display:flex; gap:0; flex-wrap:wrap; background:var(--card); border-radius:var(--r-card);
  box-shadow:var(--sh-1); overflow:hidden; margin-bottom:14px; }
.opt-app .sumstrip > *{ flex:1 1 150px; padding:15px 18px; border-left:1px solid var(--line-soft); min-width:0; }
.opt-app .sumstrip > *:first-child{ border-left:0; }
.opt-app .sumstrip .v{ font-size:20px; font-weight:600; letter-spacing:-0.4px; color:var(--ink); }
.opt-app .sumstrip .k{ font-size:12px; color:var(--muted); margin-top:2px; }
.opt-app .sumstrip .v.warn{ color:var(--amber); }

/* ===== AI Product Grouping page ===== */
.opt-app .catname{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.opt-app .catname .t{ font-weight:600; }
.opt-app .dupbadge{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
    background:var(--amber-soft); color:var(--amber); border-radius:var(--r-pill); padding:2px 8px; cursor:help; }
.opt-app .dupbadge svg{ width:11px; height:11px; }
.opt-app .sizecell{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.opt-app .sizecell .n{ font-variant-numeric:tabular-nums; font-weight:600; min-width:34px; text-align:right; }
.opt-app .sizecell .n.thin{ color:var(--amber); }
.opt-app .sizebar{ width:96px; height:7px; border-radius:var(--r-pill); background:var(--field); overflow:hidden; flex:0 0 96px; }
.opt-app .sizebar > i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--teal); }
.opt-app .sizebar > i.thin{ background:var(--amber); }
.opt-app .notebar{ display:flex; gap:11px; align-items:flex-start; background:var(--amber-soft); color:var(--amber);
    border:1px solid var(--amber-line); border-radius:var(--r-md); padding:12px 15px; margin-bottom:16px; font-size:13px; }
.opt-app .notebar svg{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; }

/* ===== Variables Categories page ===== */
.opt-app .sumstrip .kpi-tile{ display:block; text-decoration:none; color:inherit;
    transition:background .12s ease, box-shadow .12s ease; }
.opt-app .sumstrip .kpi-tile[data-kpi], .opt-app .sumstrip a.kpi-tile{ cursor:pointer; }
.opt-app .sumstrip .kpi-tile[data-kpi]:hover, .opt-app .sumstrip a.kpi-tile:hover{ background:var(--field); }
.opt-app .sumstrip .kpi-tile.is-on{ background:var(--purple-soft); box-shadow:inset 0 -3px 0 var(--purple); }
.opt-app .sumstrip .kpi-tile.is-on .v{ color:var(--purple); }
.opt-app .usecell{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.opt-app .usecell .n{ font-variant-numeric:tabular-nums; font-weight:600; min-width:28px; text-align:right; color:var(--ink); }
.opt-app .usecell .n.none{ color:var(--faint); font-weight:400; }
.opt-app .usebar{ width:104px; height:7px; border-radius:var(--r-pill); background:var(--field); overflow:hidden; flex:0 0 104px; }
.opt-app .usebar > i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--purple); }
.opt-app .emptytag{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
    background:var(--field); color:var(--muted); border:1px solid var(--line); border-radius:var(--r-pill); padding:2px 8px; }
.opt-app .testtag{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:700;
    background:var(--amber-soft); color:var(--amber); border-radius:var(--r-pill); padding:2px 8px; margin-left:6px; }
.opt-app .act.danger:hover{ border-color:var(--red-line, #F2C7C5); color:var(--red); background:var(--red-soft); }
.opt-app .act-sep{ width:1px; height:20px; background:var(--line); align-self:center; margin:0 3px; }

/* ===== Score modal (create/edit) ===== */
.vmodal.sc-modal{ width:min(620px,calc(100vw - 32px)); max-height:min(90vh,900px); }
.vmodal.sc-modal .vhead{ padding:22px 28px; }
.vmodal.sc-modal .vbody{ padding:26px 28px; }
.vmodal.sc-modal .vfoot{ padding:20px 28px; }
.vmodal.sc-modal .fs + .fs{ margin-top:22px; }
.vmodal.sc-modal .previewbox{ margin-top:26px; padding:16px 18px; }
.vmodal .fs > label{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px; }
.vmodal .fs .req{ color:var(--red); }
.vmodal .fs + .fs{ margin-top:16px; }
.vmodal .fs .hint{ font-size:11.5px; color:var(--faint); margin-top:6px; }
.vmodal .fs .err-msg{ display:none; font-size:12px; color:var(--red); margin-top:6px; font-weight:600; }
.vmodal .fs.err .err-msg{ display:block; }
.vmodal .fs.err .hint{ display:none; }
.vmodal .inp5, .vmodal .sel5{ width:100%; height:46px; padding:0 14px; border-radius:var(--r-md); border:1px solid var(--line);
    background:var(--field); font:inherit; font-size:14.5px; color:var(--ink); outline:none; }
.vmodal .inp5:focus, .vmodal .sel5:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.vmodal .fs.err .inp5, .vmodal .fs.err .sel5, .vmodal .fs.err .stepper{ border-color:var(--red); background:var(--red-soft); }
.vmodal .fs.err .stepper button{ background:transparent; color:var(--red); }
.vmodal .fs.err .stepper input{ color:var(--red); }
.vmodal .sel5{ appearance:none; padding-right:38px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 13px center; }
.vmodal .stepper{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--field); overflow:hidden; max-width:220px; }
.vmodal .stepper button{ width:48px; border:0; background:var(--card); cursor:pointer; font-size:19px; color:var(--muted); font-family:inherit; }
.vmodal .stepper button:hover{ background:var(--purple-soft); color:var(--purple); }
.vmodal .stepper input{ flex:1 1 auto; min-width:0; border:0; background:none; outline:none; text-align:center;
    font:inherit; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; height:46px;
    -moz-appearance:textfield; }
.vmodal .stepper input::-webkit-inner-spin-button, .vmodal .stepper input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.vmodal .vfoot{ display:flex; align-items:center; gap:11px; padding:16px 22px; border-top:1px solid var(--line-soft);
    background:var(--field); }
.vmodal .vfoot .grow{ flex:1 1 auto; }
.vmodal .linkbtn3{ background:none; border:0; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; padding:6px 4px; }
.vmodal .linkbtn3:hover{ color:var(--purple); text-decoration:underline; }
.vmodal .vbody{ overflow-y:auto; padding:20px 22px; }

.vmodal .presets2{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.vmodal .presets2 button{ border:1px solid var(--line); background:var(--card); border-radius:var(--r-pill);
    padding:5px 12px; font-size:12px; color:var(--muted); cursor:pointer; font:inherit; font-variant-numeric:tabular-nums; }
.vmodal .presets2 button:hover{ border-color:var(--purple-line); color:var(--purple); }
.vmodal .presets2 button.on{ background:var(--purple-soft); border-color:var(--purple-line); color:var(--purple); font-weight:700; }

.vmodal .previewbox{ background:var(--field); border:1px solid var(--line); border-radius:var(--r-md);
    padding:14px 16px; margin-top:20px; }
.vmodal .previewbox .lbl{ font-size:10.5px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase;
    color:var(--faint); margin-bottom:8px; }

/* ===== Scores page ===== */
.opt-app .scorebadge{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:28px;
    padding:0 11px; border-radius:9px; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.opt-app .sb-pos{ background:var(--teal-soft); color:var(--teal-ink); }
.opt-app .sb-neg{ background:var(--red-soft); color:var(--red); }
.opt-app .sb-zero{ background:var(--field); color:var(--faint); border:1px solid var(--line); }
.opt-app .scoretitle .t{ font-weight:600; color:var(--ink); }
.opt-app .rulesent{ font-size:12.5px; color:var(--muted); margin-top:4px; display:flex;
    align-items:center; gap:6px; flex-wrap:wrap; }
.opt-app .rulesent .tok{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
    background:var(--field); border:1px solid var(--line); border-radius:6px; padding:1px 7px; color:var(--ink); }
.opt-app .rulesent .sep{ color:var(--faint); }

/* ===== Shop Categories page ===== */
.opt-app .pathcell{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; }
.opt-app .pathcell .anc{ font-size:12.5px; color:var(--faint); }
.opt-app .pathcell .sep{ color:var(--faint); font-size:11px; }
.opt-app .pathcell .leaf{ font-weight:600; color:var(--ink); }
.opt-app .lvl{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
    border-radius:7px; background:var(--field); border:1px solid var(--line); font-size:11px;
    font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; padding:0 6px; }
.opt-app .flag{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
    border-radius:var(--r-pill); padding:2px 8px; cursor:help; }
.opt-app .flag svg{ width:11px; height:11px; }
.opt-app .flag-dup{ background:var(--amber-soft); color:var(--amber); }
.opt-app .flag-esc{ background:var(--red-soft); color:var(--red); }

/* ===== Brands page ===== */
.opt-app .brandcell{ display:flex; align-items:center; gap:11px; min-width:0; }
.opt-app .brandmark{ width:34px; height:34px; border-radius:10px; background:var(--purple-soft); color:var(--purple);
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:0 0 34px; }
.opt-app .brandcell .t{ font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Rule Groups page ===== */
.opt-app .grouptitle{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.opt-app .grouptitle .t{ font-weight:600; color:var(--ink); }
.opt-app .usedin{ display:flex; gap:5px; flex-wrap:wrap; }
.opt-app .uchip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
    border-radius:var(--r-pill); padding:3px 9px; background:var(--purple-soft); color:var(--purple); }
.opt-app .uchip svg{ width:11px; height:11px; }
.opt-app .uchip.none{ background:none; color:var(--faint); font-weight:400; padding-left:0; }

/* ===== single-field form (Variables Categories / etc.) ===== */
.opt-app .formwrap{ max-width:880px; }
.opt-app .fcard2{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); overflow:hidden; }
.opt-app .fcard2 .fb{ padding:30px 32px; }
.opt-app .fl2 > label{ display:block; font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:9px; }
.opt-app .fl2 .req{ color:var(--red); }
.opt-app .inp3{ width:100%; height:56px; padding:0 18px; border-radius:16px; border:1px solid var(--line);
    background:var(--field); font:inherit; font-size:17px; color:var(--ink); outline:none; }
.opt-app .inp3:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .fl2.err .inp3{ border-color:var(--red); background:var(--red-soft); }
.opt-app .fhint2{ font-size:13px; color:var(--muted); margin-top:9px; display:flex;
    align-items:center; justify-content:space-between; gap:12px; }
.opt-app .fhint2.bad{ color:var(--red); }
.opt-app .counter{ font-variant-numeric:tabular-nums; color:var(--faint); flex:0 0 auto; font-size:13px; }
.opt-app .fcard2 .ff{ display:flex; align-items:center; gap:12px; padding:18px 32px;
    border-top:1px solid var(--line-soft); background:var(--field); }
.opt-app .fcard2 .ff .grow{ flex:1 1 auto; }
.opt-app .fcard2 .ff .btn{ height:46px; padding:0 22px; font-size:14.5px; }
.opt-app .taken{ display:none; gap:11px; align-items:flex-start; background:var(--amber-soft); color:var(--amber);
    border:1px solid var(--amber-line); border-radius:14px; padding:14px 17px; margin-top:18px; font-size:13.5px; }
.opt-app .taken.show{ display:flex; }
.opt-app .taken svg{ width:18px; height:18px; flex:0 0 18px; margin-top:1px; }
.opt-app .existing{ margin-top:26px; }
.opt-app .existing .lbl{ font-size:11.5px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase;
    color:var(--faint); margin-bottom:11px; }
.opt-app .existing .chips{ display:flex; gap:6px; flex-wrap:wrap; }
.opt-app .existing .chipv{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; background:var(--card);
    border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 14px; color:var(--muted); }
.opt-app .existing .chipv b{ color:var(--ink); font-weight:600; }
.opt-app .btn-lg{ height:44px; padding:0 22px; font-size:14.5px; }
@media (max-width:720px){
    .opt-app .fcard2 .fb{ padding:20px; }
    .opt-app .fcard2 .ff{ padding:14px 20px; }
    .opt-app .inp3{ height:50px; font-size:16px; }
}

/* v2 confirm dialog */
.vmodal.cnf-modal{ width:min(420px,calc(100vw - 32px)); }
.vmodal .cnf-body{ padding:18px 20px; font-size:14px; color:var(--ink); line-height:1.5; }
.vmodal .cnf-foot{ display:flex; justify-content:flex-end; gap:8px; padding:12px 20px 16px;
    border-top:1px solid var(--line-soft); background:var(--field); }
.opt-app .btn-danger, .btn-danger{ background:#f46a6a !important; border-color:#f46a6a !important; color:#fff !important; }
.opt-app .btn-danger:hover, .btn-danger:hover{ background:#e05555 !important; border-color:#e05555 !important; }

/* ==================================================================
   SweetAlert2 v2 skin — dramatic redesign. Glass backdrop, gradient
   header stripe, animated icon halo, pill buttons with purple gradient.
   Nothing here shares a look with the legacy Bootstrap-tinged popup —
   this is meant to feel like a modern product dialog (Linear / Notion /
   Stripe), not a stock alert.
   ================================================================== */
@keyframes swalV2FadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes swalV2PopIn {
    0%   { opacity:0; transform:translateY(24px) scale(.90); }
    60%  { opacity:1; transform:translateY(-2px) scale(1.02); }
    100% { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes swalV2IconHalo {
    0%   { box-shadow:0 0 0 0 rgba(140,60,250,.35); }
    70%  { box-shadow:0 0 0 22px rgba(140,60,250,0); }
    100% { box-shadow:0 0 0 0 rgba(140,60,250,0); }
}
@keyframes swalV2IconPop {
    0%   { transform:scale(.4) rotate(-8deg); opacity:0; }
    60%  { transform:scale(1.08) rotate(2deg); opacity:1; }
    100% { transform:scale(1)    rotate(0);   opacity:1; }
}
@keyframes swalV2StripeShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

body .swal2-container{
    padding:20px !important;
    background:radial-gradient(1200px 800px at 30% 20%, rgba(140,60,250,.35), rgba(15,17,26,.72) 55%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
}

/* The popup is a card with a bright gradient stripe running along the
   top edge — this alone reads as "not the old alert" at a glance. */
body .swal2-popup{
    position:relative !important;
    padding:40px 36px 28px !important;
    border-radius:26px !important;
    background:linear-gradient(180deg,#FFFFFF 0%, #FBF9FF 100%) !important;
    border:1px solid rgba(140,60,250,0.08) !important;
    box-shadow:
        0 30px 80px rgba(20,17,45,0.28),
        0 12px 30px rgba(140,60,250,0.18),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
    color:#1A1A1F !important;
    width:min(460px, calc(100vw - 32px)) !important;
    overflow:hidden !important;
}
body .swal2-popup::before{
    content:'' !important;
    position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
    height:5px !important;
    background:linear-gradient(90deg,#8C3CFA 0%, #B98CFF 25%, #4FD4C8 50%, #B98CFF 75%, #8C3CFA 100%) !important;
    background-size:200% 100% !important;
    animation:swalV2StripeShift 6s linear infinite !important;
    border-radius:26px 26px 0 0 !important;
}
/* Soft radial glow underneath the icon, echoing the container backdrop. */
body .swal2-popup::after{
    content:'' !important;
    position:absolute !important;
    top:-20px !important; left:50% !important;
    width:220px !important; height:220px !important;
    transform:translateX(-50%) !important;
    background:radial-gradient(closest-side, rgba(140,60,250,0.10), transparent 70%) !important;
    pointer-events:none !important; z-index:0 !important;
}
body .swal2-popup > *{ position:relative !important; z-index:1 !important; }

body .swal2-container.swal2-backdrop-show{ animation:swalV2FadeIn .22s ease; }
body .swal2-popup.swal2-show{ animation:swalV2PopIn .42s cubic-bezier(.34,1.56,.64,1) !important; }

body .swal2-title{
    font-size:24px !important; font-weight:800 !important;
    color:#14112D !important; letter-spacing:-0.5px !important;
    padding:0 4px 10px !important; line-height:1.2 !important;
    margin:0 !important; text-align:center !important;
}
body .swal2-html-container,
body .swal2-content{
    font-size:14.5px !important; line-height:1.6 !important;
    color:#5A5C6B !important; margin:0 !important; padding:0 8px 22px !important;
    text-align:center !important; font-weight:500 !important;
}

/* Icon — circular badge with soft gradient fill + pulsing halo. */
body .swal2-icon{
    margin:8px auto 22px !important;
    width:76px !important; height:76px !important;
    border:0 !important; border-radius:50% !important;
    position:relative !important;
    box-shadow:none !important;
    animation:swalV2IconPop .5s cubic-bezier(.34,1.56,.64,1) both,
              swalV2IconHalo 2.4s ease-out .3s infinite !important;
}
body .swal2-icon .swal2-icon-content{
    font-size:40px !important; font-weight:800 !important; line-height:1 !important;
}
body .swal2-icon.swal2-warning{
    background:linear-gradient(135deg,#FFF7E0 0%, #FFE7A6 100%) !important;
    color:#B87700 !important;
    box-shadow:0 8px 22px rgba(184,119,0,.22) !important;
    animation:swalV2IconPop .5s cubic-bezier(.34,1.56,.64,1) both,
              swalV2IconHalo 2.4s ease-out .3s infinite !important;
}
body .swal2-icon.swal2-warning{
    animation:swalV2IconPop .5s cubic-bezier(.34,1.56,.64,1) both !important;
}
body .swal2-icon.swal2-warning::after{
    content:'' !important; position:absolute !important; inset:0 !important;
    border-radius:50% !important;
    animation:swalV2WarningHalo 2.4s ease-out .3s infinite !important;
}
@keyframes swalV2WarningHalo{
    0%   { box-shadow:0 0 0 0 rgba(184,119,0,.35); }
    70%  { box-shadow:0 0 0 22px rgba(184,119,0,0); }
    100% { box-shadow:0 0 0 0 rgba(184,119,0,0); }
}
body .swal2-icon.swal2-warning .swal2-icon-content{ color:#B87700 !important; }
body .swal2-icon.swal2-success{
    background:linear-gradient(135deg,#E7FBF8 0%, #B4EFE7 100%) !important;
    color:#0B8A82 !important;
    box-shadow:0 8px 22px rgba(11,138,130,.22) !important;
}
body .swal2-icon.swal2-success [class^='swal2-success-line'],
body .swal2-icon.swal2-success [class*=' swal2-success-line']{ background-color:#0B8A82 !important; height:5px !important; }
body .swal2-icon.swal2-success .swal2-success-ring{ display:none !important; }
body .swal2-icon.swal2-success .swal2-success-circular-line-left,
body .swal2-icon.swal2-success .swal2-success-circular-line-right,
body .swal2-icon.swal2-success .swal2-success-fix{ display:none !important; }
body .swal2-icon.swal2-error{
    background:linear-gradient(135deg,#FFE9E7 0%, #FBB9B3 100%) !important;
    color:#B02D28 !important;
    box-shadow:0 8px 22px rgba(176,45,40,.22) !important;
}
body .swal2-icon.swal2-error [class^='swal2-x-mark-line']{ background-color:#B02D28 !important; height:5px !important; }
body .swal2-icon.swal2-question,
body .swal2-icon.swal2-info{
    background:linear-gradient(135deg,#F5EBFF 0%, #DABFFB 100%) !important;
    color:#8C3CFA !important;
    box-shadow:0 8px 22px rgba(140,60,250,.28) !important;
}
body .swal2-icon.swal2-question .swal2-icon-content,
body .swal2-icon.swal2-info .swal2-icon-content{ color:#8C3CFA !important; }

body .swal2-actions{
    gap:12px !important; margin:18px 0 0 !important;
    display:flex !important; flex-wrap:wrap; justify-content:center;
    padding:0 !important;
}
/* --- Buttons: pill-shaped, gradient primary, outlined ghost cancel. --- */
body .swal2-popup .swal2-styled:not(.swal2-deny),
body .swal2-popup button.swal2-confirm,
body .swal2-popup button.swal2-cancel,
body .swal2-popup .swal2-confirm.btn,
body .swal2-popup .swal2-cancel.btn{
    display:inline-flex !important; align-items:center; justify-content:center;
    gap:8px !important;
    min-width:118px !important;
    height:46px !important; padding:0 26px !important;
    border-radius:999px !important;
    border:1.5px solid transparent !important;
    background:#FFFFFF !important;
    color:#1A1A1F !important;
    font-family:inherit !important;
    font-size:14.5px !important; font-weight:700 !important;
    letter-spacing:.1px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:none !important;
    text-shadow:none !important;
    transition:transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
    margin:0 !important;
    cursor:pointer !important;
    -webkit-appearance:none !important; appearance:none !important;
}
body .swal2-popup .swal2-styled:not(.swal2-deny):focus,
body .swal2-popup button.swal2-confirm:focus,
body .swal2-popup button.swal2-cancel:focus{
    outline:none !important;
    box-shadow:0 0 0 4px rgba(140,60,250,0.18) !important;
}
body .swal2-popup .swal2-styled:active,
body .swal2-popup button.swal2-confirm:active,
body .swal2-popup button.swal2-cancel:active{
    transform:translateY(1px) scale(.98);
}

/* Confirm button — gradient purple pill with soft glow. Beats .btn-success. */
body .swal2-popup .swal2-styled.swal2-confirm,
body .swal2-popup button.swal2-confirm,
body .swal2-popup .swal2-confirm.btn,
body .swal2-popup .swal2-confirm.btn-success{
    background:linear-gradient(135deg,#9B4EFF 0%, #7A2BE8 100%) !important;
    border-color:transparent !important;
    color:#FFFFFF !important;
    box-shadow:
        0 8px 20px rgba(140,60,250,0.38),
        inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
body .swal2-popup .swal2-styled.swal2-confirm:hover,
body .swal2-popup button.swal2-confirm:hover,
body .swal2-popup .swal2-confirm.btn:hover,
body .swal2-popup .swal2-confirm.btn-success:hover{
    background:linear-gradient(135deg,#A860FF 0%, #8639F0 100%) !important;
    transform:translateY(-1px);
    box-shadow:
        0 12px 26px rgba(140,60,250,0.48),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Cancel button — outlined ghost with subtle purple tint on hover. */
body .swal2-popup .swal2-styled.swal2-cancel,
body .swal2-popup button.swal2-cancel,
body .swal2-popup .swal2-cancel.btn,
body .swal2-popup .swal2-cancel.btn-danger{
    background:#FFFFFF !important;
    border-color:rgba(20,17,45,0.12) !important;
    color:#4B4E5F !important;
    box-shadow:0 2px 6px rgba(20,17,45,0.04) !important;
}
body .swal2-popup .swal2-styled.swal2-cancel:hover,
body .swal2-popup button.swal2-cancel:hover,
body .swal2-popup .swal2-cancel.btn:hover,
body .swal2-popup .swal2-cancel.btn-danger:hover{
    background:#F7F2FF !important;
    border-color:#C8A6FA !important;
    color:#14112D !important;
    transform:translateY(-1px);
}

/* Destructive confirm (Delete flows) — red gradient pill. */
.swal2-popup .swal2-styled.swal2-confirm.btn-danger,
.swal2-popup .swal2-styled.swal2-confirm.swal2-destructive{
    background:linear-gradient(135deg,#FF7A72 0%, #E64840 100%) !important;
    border-color:transparent !important;
    color:#FFFFFF !important;
    box-shadow:
        0 8px 20px rgba(230,72,64,0.36),
        inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.swal2-popup .swal2-styled.swal2-confirm.btn-danger:hover,
.swal2-popup .swal2-styled.swal2-confirm.swal2-destructive:hover{
    background:linear-gradient(135deg,#FF8B84 0%, #EA544C 100%) !important;
    transform:translateY(-1px);
    box-shadow:
        0 12px 26px rgba(230,72,64,0.44),
        inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* Deny (third "No" button) — ALWAYS hidden. Needs the `body` prefix here
   because earlier button-styling rules use `body .swal2-popup .swal2-deny`
   (higher specificity than a bare `.swal2-popup .swal2-deny`), which would
   otherwise flip display back to flex. This selector must match or beat
   that specificity to force the button out of the layout. */
body .swal2-popup .swal2-styled.swal2-deny,
body .swal2-popup button.swal2-deny,
body .swal2-popup .swal2-deny,
body .swal2-container .swal2-deny{
    display:none !important;
    visibility:hidden !important;
    width:0 !important; height:0 !important;
    margin:0 !important; padding:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file{
    border-radius:13px !important;
    border:1px solid rgba(0,0,0,0.1) !important;
    background:#FAFAF8 !important;
    color:#1A1A1F !important;
    font-size:14px !important;
    padding:12px 14px !important;
    box-shadow:none !important;
    outline:none !important;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus,
.swal2-popup .swal2-file:focus{
    border-color:#8C3CFA !important;
    background:#FFFFFF !important;
    box-shadow:0 0 0 3px rgba(140,60,250,0.18) !important;
}
.swal2-popup .swal2-close{
    color:#8A8A92 !important;
    font-size:32px !important;
    transition:color .15s ease, transform .1s ease;
}
.swal2-popup .swal2-close:hover{ color:#8C3CFA !important; }
.swal2-popup .swal2-timer-progress-bar{ background:#8C3CFA !important; }
.swal2-popup .swal2-loader{ border-color:#8C3CFA transparent #8C3CFA transparent !important; }

/* Success/error validation message inside SweetAlert2 */
.swal2-popup .swal2-validation-message{
    background:#FBE9E8 !important; color:#D3453F !important;
    border-radius:11px !important; margin:12px 0 0 !important;
    padding:8px 12px !important; font-size:12.5px !important;
}
.swal2-popup .swal2-validation-message::before{
    background:#D3453F !important; color:#fff !important;
}


/* Sync button (customer shop card) — white text + icon on green background */
.opt-app .sync-data,
.opt-app .sync-data:hover,
.opt-app .sync-data:focus{
    color:#fff !important;
}
.opt-app .sync-data .material-symbols-outlined,
.opt-app .sync-data svg{ color:#fff !important; fill:currentColor; }

/* ===== rule group edit page — mockup-styled overrides for legacy queryBuilder DOM ===== */

/* Source token bar (( ) AND OR + Add rule) — right-aligned pills above drag area */
.opt-app .RulesView #customQuerybuilder .conditions{
    display:flex !important; align-items:center; gap:9px; justify-content:flex-end; flex-wrap:wrap;
    padding:0 0 14px 0 !important; border:0 !important; background:none !important;
}
.opt-app .RulesView #customQuerybuilder .conditions > #parenthesis-left,
.opt-app .RulesView #customQuerybuilder .conditions > #parenthesis-right,
.opt-app .RulesView #customQuerybuilder .conditions > #condition-and,
.opt-app .RulesView #customQuerybuilder .conditions > #condition-or{
    display:inline-flex !important; align-items:center; justify-content:center;
    height:38px; padding:0 18px !important; min-width:auto !important;
    border-radius:var(--r-pill) !important; border:1px solid #BFE6DA !important;
    background:var(--teal-soft) !important; color:var(--teal-ink) !important;
    font-size:13.5px !important; font-weight:700 !important; cursor:pointer !important;
    margin:0 !important; line-height:1; user-select:none;
}
.opt-app .RulesView #customQuerybuilder .conditions > #parenthesis-left:hover,
.opt-app .RulesView #customQuerybuilder .conditions > #parenthesis-right:hover,
.opt-app .RulesView #customQuerybuilder .conditions > #condition-and:hover,
.opt-app .RulesView #customQuerybuilder .conditions > #condition-or:hover{
    background:#D3EFE5 !important;
}
.opt-app .RulesView #customQuerybuilder .conditions > #parenthesis-left,
.opt-app .RulesView #customQuerybuilder .conditions > #parenthesis-right{
    min-width:52px !important; font-size:16px !important;
}

/* Drop zone */
.opt-app .RulesView #customQuerybuilderDraggable{
    padding-top:8px;
}

/* Each row inside the drop zone */
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row{
    display:flex !important; align-items:center; gap:14px;
    padding:14px 0; border-top:1px solid var(--line-soft);
    background:none !important; border-radius:0 !important; margin:0 !important;
}
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row:first-child{
    border-top:0;
}

/* Parenthesis rows — big purple char on left, delete on right */
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row.left-parenthesis-container,
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row.right-parenthesis-container{
    justify-content:space-between;
}
.opt-app .RulesView .left-parenthesis-in,
.opt-app .RulesView .right-parenthesis-in{
    font-size:22px !important; font-weight:700 !important; color:var(--purple) !important;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    padding:6px 12px !important; background:none !important; border:0 !important;
    line-height:1;
}

/* AND/OR separator rows — small centered pill on left, delete on right */
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row.and-operator-container,
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row.or-operator-container{
    justify-content:space-between; padding:8px 0;
}
.opt-app .RulesView .and-operator-in,
.opt-app .RulesView .or-operator-in{
    display:inline-flex !important; align-items:center; justify-content:center;
    padding:4px 14px !important; border-radius:var(--r-pill) !important;
    background:var(--field) !important; color:var(--muted) !important;
    font-size:11.5px !important; font-weight:700 !important; letter-spacing:0.5px;
    border:1px solid var(--line) !important;
}

/* Regular rule row — the ones with variable + operator + value selects.
   Applied when row has variables-select-container inside */
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row:has(.variables-select-container){
    display:flex !important; align-items:center; gap:12px; flex-wrap:nowrap;
}
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row:has(.variables-select-container) > .variables-select-container{
    flex:1.2 1 0; min-width:0;
}
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row:has(.variables-select-container) > .operators-select-container,
.opt-app .RulesView #customQuerybuilderDraggable .query-build-row:has(.variables-select-container) > .value-select-container{
    flex:1 1 0; min-width:0;
}
.opt-app .RulesView .average-text-container.opacity-0,
.opt-app .RulesView .average-text-container:empty{ display:none !important; }

/* Rule sub-containers — each takes its grid cell with purple-tinted background */
.opt-app .RulesView .variables-select-container,
.opt-app .RulesView .operators-select-container,
.opt-app .RulesView .value-select-container,
.opt-app .RulesView .attribute-template-select-container,
.opt-app .RulesView .attribute-values-select-container{
    min-width:0;
}

/* Select2 widgets inside rule row — style the .select2-selection (the visible button) */
.opt-app .RulesView .variables-select-container .select2-container,
.opt-app .RulesView .operators-select-container .select2-container,
.opt-app .RulesView .value-select-container .select2-container,
.opt-app .RulesView .attribute-template-select-container .select2-container,
.opt-app .RulesView .attribute-values-select-container .select2-container{
    width:100% !important;
}
.opt-app .RulesView .variables-select-container .select2-container--default .select2-selection,
.opt-app .RulesView .operators-select-container .select2-container--default .select2-selection,
.opt-app .RulesView .value-select-container .select2-container--default .select2-selection,
.opt-app .RulesView .attribute-template-select-container .select2-container--default .select2-selection,
.opt-app .RulesView .attribute-values-select-container .select2-container--default .select2-selection{
    height:44px !important; min-height:44px !important;
    border-radius:var(--r-md) !important; border:1px solid var(--line) !important;
    background:var(--purple-soft) !important; display:flex !important; align-items:center;
    padding:0 14px !important;
}
.opt-app .RulesView .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:var(--purple) !important; line-height:44px !important; padding:0 !important;
    font-size:13.5px !important; font-weight:600;
}
/* Placeholder ("Choose", "Select…" etc.) must stay muted grey in RulesView —
   the parent .select2-selection__rendered rule above colors real selections
   purple, but the placeholder span inside it should look inactive. */
.opt-app .RulesView .select2-container--default .select2-selection--single .select2-selection__placeholder{
    color:var(--faint) !important; font-weight:400 !important;
}
/* When a disabled first option is currently the rendered value (Select2
   shows the option's text, not a proper placeholder span), v2-select-init.js
   toggles .is-placeholder on the container so we can style the rendered
   text as muted just like a real placeholder. */
.opt-app .RulesView .select2-container.is-placeholder .select2-selection__rendered,
.opt-app .select2-container.is-placeholder .select2-selection__rendered{
    color:var(--faint) !important; font-weight:400 !important;
}
.opt-app .RulesView .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:44px !important; right:10px !important; top:0 !important;
}
.opt-app .RulesView .select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color:var(--purple) transparent transparent transparent !important;
}
.opt-app .RulesView .select2-container--open.select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color:transparent transparent var(--purple) transparent !important;
}
.opt-app .RulesView .select2-container--default.select2-container--focus .select2-selection,
.opt-app .RulesView .select2-container--default.select2-container--open .select2-selection{
    background:var(--card) !important; border-color:var(--purple) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
}
/* Multi-select rendered items.
   NOTE: Higher-specificity `.value-select-container` rule above forces
   `height:44px !important` on ALL select2-selections. We need equal-or-higher
   specificity to release the height for multi-selects so multiple chips can
   stack vertically. Also re-instate the border (parent rule sets a very
   faint one).
   Native CSS `resize` doesn't work here — select2 attaches pointerdown
   handlers on the rendered <ul> child that swallow the event before the
   browser can drive the corner-drag. Custom resize logic in
   customQueryBuilder.js writes inline `height` with !important to override
   the `height:auto !important` below; `::after` renders the visual cue. */
.opt-app .RulesView .value-select-container .select2-container--default .select2-selection--multiple,
.opt-app .RulesView .attribute-template-select-container .select2-container--default .select2-selection--multiple,
.opt-app .RulesView .attribute-values-select-container .select2-container--default .select2-selection--multiple,
.opt-app .RulesView .select2-container--default .select2-selection--multiple{
    padding:4px 8px !important;
    min-height:44px !important;
    height:auto !important;
    max-height:800px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border:1px solid var(--line) !important;
    background:var(--purple-soft) !important;
    border-radius:var(--r-md) !important;
    display:flex !important; align-items:flex-start; flex-wrap:wrap;
    gap:5px;
    position:relative;
}
/* Custom resize handle in the bottom-right corner. Purely visual — the
   pointerdown is caught by the JS handler in customQueryBuilder.js which
   reads the pointer position to decide when to resize vs. open the dropdown. */
.opt-app .RulesView .value-select-container .select2-container--default .select2-selection--multiple::after,
.opt-app .RulesView .attribute-template-select-container .select2-container--default .select2-selection--multiple::after,
.opt-app .RulesView .attribute-values-select-container .select2-container--default .select2-selection--multiple::after{
    content:'';
    position:absolute;
    right:3px; bottom:3px;
    width:12px; height:12px;
    background:
        linear-gradient(135deg, transparent 40%, var(--purple, #8C3CFA) 40%, var(--purple, #8C3CFA) 55%, transparent 55%),
        linear-gradient(135deg, transparent 65%, var(--purple, #8C3CFA) 65%, var(--purple, #8C3CFA) 80%, transparent 80%);
    opacity:.55;
    pointer-events:none;
    z-index:2;
    border-radius:0 0 6px 0;
}
.opt-app .RulesView .value-select-container .select2-container--default.select2-container--focus .select2-selection--multiple,
.opt-app .RulesView .value-select-container .select2-container--default.select2-container--open .select2-selection--multiple{
    border-color:var(--purple) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
    /* Keep the same field background on focus — do NOT flash to white. */
}
/* X (remove) button — must be white on the solid-purple RulesView chip
   otherwise it's invisible against the pill background. */
.opt-app .RulesView .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color:#fff !important; opacity:.9; background:none !important;
    border:0 !important; padding:0 !important;
    font-size:16px !important; line-height:1 !important; font-weight:700 !important;
    margin-right:4px !important;
}
.opt-app .RulesView .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
    color:#fff !important; opacity:1; background:none !important;
}
/* Tighter, cleaner scrollbar in the chip area (WebKit only). */
.opt-app .RulesView .select2-container--default .select2-selection--multiple::-webkit-scrollbar{ width:8px; }
.opt-app .RulesView .select2-container--default .select2-selection--multiple::-webkit-scrollbar-thumb{
    background:var(--purple-line); border-radius:8px;
}
.opt-app .RulesView .select2-container--default .select2-selection--multiple .select2-selection__rendered{
    padding:0 !important; margin:0 !important;
    display:flex !important; flex-wrap:wrap; align-items:flex-start; gap:4px;
    width:100%; min-width:0;
}
.opt-app .RulesView .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background:var(--purple) !important; border:0 !important; color:#fff !important;
    border-radius:14px !important; padding:4px 10px !important;
    font-size:12px !important; line-height:1.3 !important;
    margin:0 !important;
    display:inline-flex !important; align-items:center; gap:5px;
    max-width:100%;
    min-width:0;
    /* Wrap long breadcrumb-style labels inside the chip instead of truncating
       with "…". Users need to read the full path (e.g. category tree). */
    overflow:visible; text-overflow:clip;
    white-space:normal; word-break:break-word; overflow-wrap:anywhere;
}
.opt-app .RulesView .select2-container--default .select2-search--inline{
    flex:1 1 auto; min-width:60px;
}
.opt-app .RulesView .select2-container--default .select2-search--inline .select2-search__field{
    margin:0 !important; height:26px !important;
}
/* Ensure dropdown floats above other rows */
/* ==============================================================
   Select2 v4 dropdown — canonical block (ONE source of truth).
   Select2 portals its dropdown into <body>, outside .opt-app, so
   selectors are intentionally unscoped/global. Do NOT duplicate
   these rules elsewhere in this file.
   ============================================================== */

/* Panel — extremely aggressive isolation so no page content bleeds through the dropdown.
   Select2 portals its dropdown into <body>. isolation:isolate creates a fresh stacking
   context and hardcoded #FFFFFF avoids any CSS-variable resolution failure. */
.select2-container.select2-container--open{
    z-index:100000 !important;
    isolation:isolate;
}
.select2-container--open .select2-dropdown,
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above{
    z-index:100000 !important;
    background:#FFFFFF !important;
    background-color:#FFFFFF !important;
    opacity:1 !important;
    border:1px solid var(--purple-line, #E2D2FC) !important;
    border-radius:var(--r-md, 13px) !important;
    box-shadow:0 18px 50px rgba(0,0,0,0.16) !important;
    overflow:hidden;
    min-width:220px;
    font-family:inherit;
    isolation:isolate;
    /* Paint containment — guarantees nothing from behind (page rows,
       previous field labels, sticky headers) can bleed inside the
       dropdown's rectangle regardless of stacking context tricks. */
    contain:layout paint style;
    background-clip:padding-box;
}
/* Sticky search bar at the top of the dropdown — options that scroll past
   it must be visually clipped, so make sure the search area is fully opaque
   and painted ABOVE the scrolling results within the dropdown's own
   stacking context. */
.select2-container--open .select2-search--dropdown{
    position:sticky !important; top:0 !important;
    z-index:2 !important;
    background:#FFFFFF !important;
}
/* Add breathing room between the closed select field and the dropdown */
.select2-container--open .select2-dropdown--below{ margin-top:6px !important; }
.select2-container--open .select2-dropdown--above{ margin-top:-6px !important; }
/* Kill any transparency on inner Select2 wrapper containers so nothing bleeds through.
   Note: NOT applied to .select2-results__option (individual rows) — those must stay
   transparent so hover / selected states can paint their own backgrounds cleanly. */
.select2-container--open .select2-results,
.select2-container--open .select2-results__options{
    background:#FFFFFF !important;
    background-color:#FFFFFF !important;
    opacity:1 !important;
}

/* Search box — respect Select2's `minimumResultsForSearch` (v2-select-init.js
   sets it to 8 for single-selects). When Select2 decides to hide it, it adds
   the `.select2-search--hide` class — we honor that so pagination selects
   (25/50/100) and other short lists don't get an unnecessary search box. */
.select2-container--open .select2-search--dropdown{
    display:block !important;
    padding:10px !important;
    background:#FFFFFF !important;
    background-color:#FFFFFF !important;
    border-bottom:1px solid var(--line, rgba(0,0,0,0.08));
}
.select2-container--open .select2-search--dropdown.select2-search--hide{
    display:none !important;
    padding:0 !important;
    border-bottom:0 !important;
}
.select2-container--open .select2-search--dropdown .select2-search__field{
    display:block !important; visibility:visible !important; opacity:1 !important;
    width:100% !important; height:38px !important; min-height:38px !important;
    padding:0 14px 0 38px !important; margin:0 !important;
    border:1px solid var(--purple-line, #E2D2FC) !important;
    border-radius:var(--r-md, 13px) !important;
    background:#FAFAF8 !important;
    background-color:#FAFAF8 !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C3CFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:12px center !important;
    color:#1A1A1F !important;
    font:inherit !important; font-size:13.5px !important;
    outline:none !important; box-sizing:border-box !important;
    box-shadow:none !important;
}
.select2-container--open .select2-search--dropdown .select2-search__field::placeholder{
    color:#B6B6BC !important; opacity:1 !important;
}
.select2-container--open .select2-search--dropdown .select2-search__field:focus{
    border-color:var(--purple, #8C3CFA) !important;
    background-color:#FFFFFF !important;
    box-shadow:0 0 0 3px var(--purple-soft, #F1E8FE) !important;
}

/* Results list */
.select2-container--open .select2-results{ max-height:none !important; }
.select2-container--open .select2-results__options{
    padding:6px !important; overflow-y:auto; max-height:280px !important;
}
/* Fallback values on every var() reference: the Select2 dropdown is
   portaled to <body>, which is OUTSIDE .opt-app where our CSS custom
   properties are defined — without fallbacks the colors resolve to
   `initial` (transparent bg, black text) and options render invisible
   when they're the current selection + keyboard focus.  */
.select2-container--open .select2-results__option{
    margin:0 0 3px 0 !important; padding:9px 12px !important;
    border-radius:8px !important;
    background:transparent !important;
    color:var(--ink, #1A1A1F) !important;
    font:inherit !important; font-size:13.5px !important; font-weight:500 !important;
    line-height:1.4 !important;
}
.select2-container--open .select2-results__option:last-child{ margin-bottom:0 !important; }
/* Hover / keyboard-highlighted — purple background + white text so the
   *transient* state is visually distinct from the *persistent* selected
   state. */
.select2-container--open .select2-results__option--highlighted,
.select2-container--open .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--open .select2-results__option:hover,
.select2-container--default .select2-results__option:hover{
    background:var(--purple, #8C3CFA) !important;
    color:#FFFFFF !important;
    font-weight:600 !important;
}
/* Currently-selected option — bold purple text on a soft purple tint. */
.select2-container--open .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[aria-selected="true"]{
    background:var(--purple-soft, #F1E8FE) !important;
    color:var(--purple, #8C3CFA) !important;
    font-weight:700 !important;
}
/* Both — current selection AND keyboard focus. Purple bg + white text. */
.select2-container--open .select2-results__option[aria-selected=true].select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted{
    background:var(--purple, #8C3CFA) !important;
    color:#FFFFFF !important;
    font-weight:700 !important;
}
/* Placeholder / disabled options — collapse to zero */
.select2-container--open .select2-results__option[aria-disabled=true],
.select2-container--open .select2-results__option--disabled,
.select2-container--open .select2-results__option[data-select2-tag="true"]:only-child,
.select2-container--open li.select2-results__option[role="option"][aria-disabled="true"],
.select2-container--default .select2-results__option[aria-disabled="true"]{
    display:none !important; height:0 !important; padding:0 !important; margin:0 !important;
    visibility:hidden !important; overflow:hidden !important;
}
/* "No results found" / empty message — keep visible */
.select2-container--open .select2-results__option.select2-results__message{
    display:block !important; height:auto !important; visibility:visible !important;
    padding:14px !important; margin:0 !important;
    color:var(--faint) !important; text-align:center;
    background:none !important; font-weight:400 !important;
}

/* ===== custom.js "updateCustomSelect" dropdown inside RulesView ===== */
.opt-app .RulesView .form-select-container{
    position:relative !important; width:100% !important; display:block !important;
    box-sizing:border-box;
}
.opt-app .RulesView .form-select-container .select-hidden{ display:none !important; }
.opt-app .RulesView .form-select-container .select-styled{
    display:block !important;
    width:100% !important; box-sizing:border-box !important;
    height:44px; padding:0 36px 0 14px; border-radius:var(--r-md) !important;
    border:1px solid var(--line); background:var(--purple-soft);
    color:var(--purple); font-size:13.5px; font-weight:600; cursor:pointer;
    position:relative;
    line-height:44px; /* vertically center text since we're no longer flex */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Override legacy style.css that limited .select-styled width to 200px inside the query builder */
.opt-app .RulesView #customQuerybuilderDraggable .select-styled,
.opt-app .RulesView .form-select-container .select-styled{
    max-width:none !important; word-wrap:normal !important;
}
/* Override legacy style.css .active state that made select-styled solid purple with white text */
.opt-app .RulesView #customQuerybuilderDraggable .select-styled.active{
    background:var(--card) !important; background-image:none !important;
    color:var(--purple) !important;
    border-radius:var(--r-md) !important;
    border:1px solid var(--purple) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
}
.opt-app .RulesView .form-select-container .select-styled::after{
    content:''; position:absolute; right:14px; top:50%; width:10px; height:10px;
    border-right:2px solid var(--purple); border-bottom:2px solid var(--purple);
    transform:translateY(-70%) rotate(45deg); transition:transform .16s ease;
}
.opt-app .RulesView .form-select-container .select-styled.active{
    background:var(--card); border-color:var(--purple);
    box-shadow:0 0 0 3px var(--purple-soft);
}
.opt-app .RulesView .form-select-container .select-styled.active::after{
    transform:translateY(-30%) rotate(-135deg);
}

/* Placeholder text for empty operator/value select-styled (before variable is chosen) */
.opt-app .RulesView .operators-select-container .form-select-container .select-styled:empty::before{
    content:'—'; color:var(--faint); font-weight:400;
}
.opt-app .RulesView .value-select-container .form-select-container .select-styled:empty::before{
    content:'—'; color:var(--faint); font-weight:400;
}
/* Empty containers (no select rendered yet) — show placeholder box */
.opt-app .RulesView .operators-select-container:empty,
.opt-app .RulesView .value-select-container:empty{
    height:44px; border-radius:var(--r-md); background:var(--purple-soft);
    border:1px solid var(--line);
    display:flex; align-items:center; padding:0 14px;
}
.opt-app .RulesView .operators-select-container:empty::before,
.opt-app .RulesView .value-select-container:empty::before{
    content:'—'; color:var(--faint); font-size:13.5px;
}
/* Value select-container raw inputs (before .form-select-container wrap) */
.opt-app .RulesView .value-select-container > .value.form-control,
.opt-app .RulesView .value-select-container > .value2.form-control{
    width:100% !important; height:44px !important; padding:0 14px !important;
    border-radius:var(--r-md) !important; border:1px solid var(--line) !important;
    background:var(--purple-soft) !important; color:var(--ink) !important;
    font:inherit !important; font-size:13.5px !important; outline:none !important;
}
.opt-app .RulesView .value-select-container > .value.form-control:focus,
.opt-app .RulesView .value-select-container > .value2.form-control:focus{
    background:var(--card) !important; border-color:var(--purple) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
}
.opt-app .RulesView .form-select-container .select-items{
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
    background:var(--card); border:1px solid var(--purple-line); border-radius:var(--r-md);
    box-shadow:var(--sh-pop);
    /* Larger visible area — 60vh caps to the viewport so it never overflows
       the screen; overscroll-behavior:contain stops the wheel from bleeding
       into the page scroll (which was giving the impression of two
       side-by-side scrollbars). */
    max-height:min(60vh, 480px);
    overflow-y:auto;
    overscroll-behavior:contain;
    /* NO top padding — the sticky search span must reach the exact top edge
       otherwise scrolled optgroup labels ("NUMERIC" etc.) peek above it. */
    padding:0 4px 4px 4px;
}
/* Legacy custom-select overlay: the search input is a <span> prepended
   inline-style'd to be sticky. Force it truly sticky-at-top, fully opaque,
   above optgroup labels that scroll behind it — the inline style creates a
   8px top margin gap which broke sticky coverage and let "NUMERIC" bleed
   above the search bar. */
.opt-app .RulesView .form-select-container .select-items > span[style*="sticky"]{
    position:sticky !important;
    top:0 !important;
    z-index:100 !important;
    background:#fff !important;
    margin:0 !important;
    padding:8px 6px !important;
    display:block !important;
    border-bottom:1px solid var(--line-soft);
}
.opt-app .RulesView .form-select-container .select-items .search-optgroup{
    width:100%; height:34px; padding:0 12px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field);
    font:inherit; font-size:13px; color:var(--ink); outline:none; box-sizing:border-box;
}
.opt-app .RulesView .form-select-container .select-items .search-optgroup:focus{
    border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft);
}
/* Each option div — uses rel="value" attribute */
.opt-app .RulesView .form-select-container .select-items > div[rel],
.opt-app .RulesView .form-select-container .select-items .optgroup > div[rel]{
    padding:8px 12px; border-radius:8px; color:var(--purple);
    font-size:13.5px; font-weight:500; cursor:pointer; background:transparent !important;
}
.opt-app .RulesView .form-select-container .select-items > div[rel]:hover,
.opt-app .RulesView .form-select-container .select-items .optgroup > div[rel]:hover{
    background:var(--purple) !important; color:#fff !important;
}
.opt-app .RulesView .form-select-container .select-items .selected-item{
    background:var(--purple-soft) !important; color:var(--purple) !important; font-weight:700;
}
/* Hide the placeholder option (rel="0" typically "Select Variable" / "Choose") */
.opt-app .RulesView .form-select-container .select-items > div[rel="0"]{
    display:none !important;
}
/* Optgroup label */
.opt-app .RulesView .form-select-container .select-items .optgroup-label{
    padding:8px 12px 4px; font-size:10.5px; font-weight:700; letter-spacing:0.8px;
    text-transform:uppercase; color:var(--faint); pointer-events:none;
}
.opt-app .RulesView .form-select-container .select-items .optgroup{ margin-top:4px; }
.opt-app .RulesView .form-select-container .select-items .optgroup:first-of-type{ margin-top:0; }
/* (Select2 empty-message, results max-height, options overflow — handled by the canonical Select2 block above) */
.opt-app .RulesView .variables-select-container > select:not(.select2-hidden-accessible):not(.select-hidden),
.opt-app .RulesView .operators-select-container > select:not(.select2-hidden-accessible):not(.select-hidden),
.opt-app .RulesView .value-select-container input:not(.select2-search__field),
.opt-app .RulesView .value-select-container select:not(.select2-hidden-accessible):not(.select-hidden):not([multiple]),
.opt-app .RulesView .attribute-template-select-container select:not(.select2-hidden-accessible):not(.select-hidden):not([multiple]),
.opt-app .RulesView .attribute-values-select-container select:not(.select2-hidden-accessible):not(.select-hidden):not([multiple]){
    width:100% !important; height:44px !important; padding:0 14px !important;
    border-radius:var(--r-md) !important; border:1px solid var(--line) !important;
    background:var(--purple-soft) !important; color:var(--purple) !important;
    font:inherit !important; font-size:13.5px !important; outline:none !important;
    appearance:none;
}
.opt-app .RulesView .value-select-container input:not(.select2-search__field){ color:var(--ink) !important; }
/* Neutralize the Select2 inline search field inside the RulesView value cell
   — it's just a text input that appears next to the chips, must NOT get
   the 44px height + purple pill styling meant for standalone inputs. */
.opt-app .RulesView .value-select-container .select2-search__field,
.opt-app .RulesView .attribute-values-select-container .select2-search__field{
    width:auto !important; min-width:60px;
    height:26px !important; padding:0 4px !important;
    border:0 !important; border-radius:0 !important;
    background:transparent !important;
    font:inherit !important; font-size:13px !important; color:var(--ink) !important;
    outline:none !important; box-shadow:none !important;
}
.opt-app .RulesView .variables-select-container select:not(.select2-hidden-accessible):not(.select-hidden):focus,
.opt-app .RulesView .operators-select-container select:not(.select2-hidden-accessible):not(.select-hidden):focus,
.opt-app .RulesView .value-select-container input:not(.select2-search__field):focus,
.opt-app .RulesView .value-select-container select:not(.select2-hidden-accessible):not(.select-hidden):focus{
    border-color:var(--purple) !important; background:var(--card) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
}

/* Force-hide any native <select multiple> inside the rules builder AND any
   other native multi-select that legacy Select2 wraps. Just display:none —
   nothing else prevents the browser from drawing the native listbox with
   its scroll arrows on top of the styled Select2 chips. Select2 keeps the
   native <select> around only for form serialization, which works fine
   with display:none. */
html body select[multiple].select2-hidden-accessible,
html body .opt-app select[multiple].select2-hidden-accessible,
html body .opt-app .RulesView select[multiple],
html body .opt-app #customQuerybuilder select[multiple],
html body .opt-app .query-build-row select[multiple],
html body .opt-app .value-select-container select[multiple],
html body .opt-app .attribute-values-select-container select[multiple],
html body .opt-app .select2-container + select[multiple],
html body .opt-app .select2-container ~ select[multiple]{
    display:none !important;
    position:absolute !important;
    width:0 !important; height:0 !important;
    max-width:0 !important; max-height:0 !important;
    padding:0 !important; margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    clip:rect(0 0 0 0) !important;
    -webkit-clip-path:inset(50%) !important;
    clip-path:inset(50%) !important;
}
/* Any <select> with size > 1 anywhere is treated as visually redundant
   inside a Select2 group — kill its browser-drawn listbox chrome. */
html body .opt-app .value-select-container select,
html body .opt-app .attribute-values-select-container select,
html body .opt-app .attribute-template-select-container select{
    background-image:none !important;
}
html body .opt-app .value-select-container select.select2-hidden-accessible,
html body .opt-app .attribute-values-select-container select.select2-hidden-accessible{
    display:none !important;
}
/* Also nuke any number-input spinner buttons inside value cells. Some
   operators keep a native <input type="number"> visible alongside the
   Select2 chip; Chrome draws its up/down spin arrows on the right and
   they look like a phantom "scroller" next to the chip. */
html body .opt-app .RulesView .value-select-container input[type="number"]::-webkit-inner-spin-button,
html body .opt-app .RulesView .value-select-container input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance:none !important; appearance:none !important; margin:0 !important;
}
html body .opt-app .RulesView .value-select-container input[type="number"]{
    -moz-appearance:textfield !important;
}

/* Empty-state message shown when the query builder has no rules yet.
   Hidden when #customQuerybuilderDraggable has any child. */
.opt-app .RulesView .rb-empty{
    text-align:center; padding:38px 20px; color:var(--faint);
    font-size:13.5px; font-weight:500;
}
.opt-app .RulesView .rblist:has(#customQuerybuilderDraggable > *) .rb-empty{
    display:none;
}

/* Delete pill (right of every row) — red-tinted. Covers both delete-condition-container (parens/AND/OR)
   and delete-select-container (regular rule rows). */
.opt-app .RulesView .delete-condition-container.optisleek-danger-btn,
.opt-app .RulesView .delete-select-container.optisleek-danger-btn{
    display:inline-flex !important; align-items:center; gap:7px;
    height:38px !important; padding:0 15px !important;
    border-radius:var(--r-pill) !important;
    border:1px solid var(--red-line) !important;
    background:var(--red-soft) !important; color:var(--red) !important;
    font:inherit !important; font-size:13px !important; font-weight:600 !important;
    cursor:pointer !important; white-space:nowrap; flex:0 0 auto;
    min-width:auto !important; width:auto !important;
}
.opt-app .RulesView .delete-condition-container.optisleek-danger-btn:hover,
.opt-app .RulesView .delete-select-container.optisleek-danger-btn:hover{
    background:#F8DAD8 !important;
}
.opt-app .RulesView .delete-condition-container .material-symbols-outlined,
.opt-app .RulesView .delete-select-container .material-symbols-outlined{
    font-size:16px !important; color:var(--red) !important;
}
.opt-app .RulesView .delete-condition-container .spacer,
.opt-app .RulesView .delete-select-container .spacer{ display:none !important; }

@media (max-width:900px){
    .opt-app .RulesView #customQuerybuilderDraggable .query-build-row:has(.variables-select-container){
        flex-wrap:wrap;
    }
    .opt-app .RulesView #customQuerybuilderDraggable .query-build-row:has(.variables-select-container) > .variables-select-container,
    .opt-app .RulesView #customQuerybuilderDraggable .query-build-row:has(.variables-select-container) > .operators-select-container,
    .opt-app .RulesView #customQuerybuilderDraggable .query-build-row:has(.variables-select-container) > .value-select-container{
        flex:1 1 100%;
    }
}

/* ===== rule group edit page (rules builder shell) ===== */
.opt-app .rbtop{ display:grid; grid-template-columns:1fr 320px; gap:16px; background:var(--card);
    border-radius:var(--r-card); box-shadow:var(--sh-1); padding:20px; margin-bottom:16px; }
.opt-app .rbtop .f > label{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px; }
.opt-app .rbtop .f .req{ color:var(--red); }
.opt-app .inp4, .opt-app .sel4{ width:100%; height:44px; padding:0 14px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field); font:inherit; font-size:14px; color:var(--ink); outline:none; }
.opt-app .inp4:focus, .opt-app .sel4:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .sel4{ appearance:none; padding-right:36px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center; }
.opt-app .rbcard{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1);
    margin-bottom:16px; position:relative; }
.opt-app .rbfoot{ display:flex; align-items:center; gap:11px; padding:14px 18px;
    border-top:1px solid var(--line-soft); background:var(--field); flex-wrap:wrap;
    border-radius:0 0 var(--r-card) var(--r-card); }
.opt-app .rbfoot .grow{ flex:1 1 auto; }
.opt-app .savevar{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; }
.opt-app .savevar .box{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line);
    background:var(--card); display:flex; align-items:center; justify-content:center; flex:0 0 18px; }
.opt-app .savevar .box svg{ width:11px; height:11px; color:#fff; opacity:0; }
.opt-app .savevar input:checked + .box{ background:var(--purple); border-color:var(--purple); }
.opt-app .savevar input:checked + .box svg{ opacity:1; }
@media (max-width:900px){
    .opt-app .rbtop{ grid-template-columns:1fr; }
}

/* Legacy Bootstrap grid fallbacks on mobile — force cols to stack in kept-legacy sections */
@media (max-width:900px){
    /* variables modal + shop cards inside customerView */
    .opt-app #variablesModal .modal-body [class*="col-md-"],
    .opt-app .shop-card [class*="col-xl-"],
    .opt-app .shop-card [class*="col-sm-"]{
        flex:0 0 100% !important; max-width:100% !important; width:100% !important;
    }
    .opt-app .shop-card textarea,
    .opt-app .shop-card input,
    .opt-app .shop-card select{ width:100% !important; max-width:100% !important; }
    /* Bootstrap .modal-lg / .modal-xl on mobile fill viewport comfortably */
    .modal-dialog.modal-lg, .modal-dialog.modal-xl{ max-width:calc(100vw - 24px); margin:12px auto; }
}
@media (max-width:520px){
    /* Create-shop modal (customerView) with .col-lg-4 also needs to stack on phones */
    .opt-app .bs-optisleek-modal-center .modal-body [class*="col-lg-"]{
        flex:0 0 100% !important; max-width:100% !important; width:100% !important;
    }
}

.opt-app .attrtext{ font-weight:500; color:var(--ink); }
.opt-app .qty{ font-variant-numeric:tabular-nums; font-weight:600; }
.opt-app .qty.zero{ color:#D3453F; }
.opt-app .oos{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; background:#FBE9E8;
  color:#D3453F; border-radius:var(--r-pill); padding:2px 8px; margin-left:7px; }
.opt-app .priceold{ color:var(--faint); text-decoration:line-through; font-size:12px; }
.opt-app .pricenew{ font-weight:600; color:var(--ink); }
.opt-app .offtag{ display:inline-flex; font-size:10.5px; font-weight:700; background:var(--teal-soft); color:var(--teal-ink);
  border-radius:var(--r-pill); padding:2px 7px; margin-left:6px; }
.opt-app tr.is-oos td{ background:rgba(211,69,63,0.035); }
.opt-app .acts .act.tealish:hover{ border-color:var(--teal); color:var(--teal); background:var(--teal-soft); }
.opt-app .acts .act.is-loading{ pointer-events:none; opacity:.6; }
.opt-app .acts .act.is-loading svg{ animation:spin-act .8s linear infinite; }
@keyframes spin-act{ to{ transform:rotate(360deg); } }

@media (max-width:900px){
    .opt-app .pdgrid{ grid-template-columns:1fr; }
    .opt-app .dl{ grid-template-columns:1fr; gap:0; }
    .opt-app .dl dt{ padding:10px 0 2px; border-top:1px solid var(--line-soft); }
    .opt-app .dl dd{ padding:0 0 10px; border-top:0; }
}

/* ===== v2 Variables Values modal (mockup: .vmodal) ===== */
.vscrim{ position:fixed; inset:0; background:rgba(20,18,26,0.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:1070; display:none; }
.vscrim.is-open{ display:block; }
.vmodal{ position:fixed; z-index:1071; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(760px, calc(100vw - 32px)); max-height:min(88vh, 900px); background:var(--card);
    border-radius:22px; box-shadow:var(--sh-pop); display:none; flex-direction:column; overflow:hidden; }
.vmodal.is-open{ display:flex; }
.vmodal .vhead{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line-soft); }
.vmodal .vhead h3{ font-size:16px; font-weight:600; margin:0; flex:1 1 auto; letter-spacing:-0.2px; color:var(--ink); }
.vmodal .vclose{ width:34px; height:34px; border-radius:11px; border:1px solid var(--line); background:var(--card);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); flex:0 0 34px; }
.vmodal .vclose:hover{ border-color:var(--purple-line); color:var(--purple); }
.vmodal .vclose svg{ width:16px; height:16px; }
.vmodal .vsub{ padding:12px 20px; background:var(--field); border-bottom:1px solid var(--line-soft);
    display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink); }
.vmodal .vsub .attrtext{ font-weight:600; }
.vmodal .vsub .grow{ flex:1 1 auto; }
.vmodal .vfilter{ display:flex; align-items:center; gap:9px; margin:12px 20px 2px; padding:0 13px; height:38px;
    background:var(--field); border:1px solid var(--line); border-radius:var(--r-md); }
.vmodal .vfilter:focus-within{ border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); background:var(--card); }
.vmodal .vfilter svg{ width:15px; height:15px; color:var(--faint); flex:0 0 15px; }
.vmodal .vfilter input{ border:0; background:none; outline:none; width:100%; font:inherit; font-size:13.5px; color:var(--ink); }
.vmodal .vbody{ overflow-y:auto; padding:2px 0 10px; }
.vmodal .vrow{ display:grid; grid-template-columns:minmax(0, 240px) minmax(0, 1fr); gap:20px; padding:10px 20px; align-items:start; }
.vmodal .vrow:hover{ background:var(--field); }
.vmodal .vlabel{ min-width:0; overflow:hidden; }
.vmodal .vlabel .t{ font-size:13px; font-weight:500; color:var(--ink); word-break:break-word; overflow-wrap:anywhere; }
.vmodal .vlabel .n{ font-size:10.5px; color:var(--faint); margin-top:2px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    word-break:break-all; overflow-wrap:anywhere; }
.vmodal .vval{ font-size:13.5px; min-width:0; font-variant-numeric:tabular-nums; color:var(--ink);
    word-break:break-word; overflow-wrap:anywhere; }
.vmodal .vval.zero{ color:var(--faint); }
.vmodal .vempty{ padding:26px 20px; text-align:center; color:var(--muted); font-size:13px; }

@media (max-width:620px){
    .vmodal{ left:0; right:0; bottom:0; top:auto; transform:none; width:100%; max-height:90vh;
        border-radius:22px 22px 0 0; }
    .vmodal .vrow{ grid-template-columns:1fr; gap:5px; }
}

/* ===== v2 Custom Fields modal (mockup: .cfsum/.cfrow/.cfgroup/.cfempty/.cftoggle) ===== */
.vmodal .cfsum{ display:flex; align-items:center; gap:12px; padding:13px 20px; background:var(--field);
    border-bottom:1px solid var(--line-soft); font-size:13px; flex-wrap:wrap; color:var(--ink); }
.vmodal .cfsum .grow{ flex:1 1 auto; }
.vmodal .cfsum b{ font-variant-numeric:tabular-nums; font-weight:700; }
.vmodal .cfbar{ height:6px; border-radius:var(--r-pill); background:var(--line-soft); width:120px; overflow:hidden; }
.vmodal .cfbar > i{ display:block; height:100%; background:var(--teal); border-radius:var(--r-pill); transition:width .18s ease; }
.vmodal .cfgroup{ padding:15px 20px 4px; }
.vmodal .cfgroup .gt{ font-size:10.5px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase;
    color:var(--faint); margin-bottom:9px; display:flex; align-items:center; gap:8px; }
.vmodal .cfgroup .gt .n{ font-weight:600; letter-spacing:0; text-transform:none; font-size:11px; color:var(--faint); }
.vmodal .cfrow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,200px); gap:14px; align-items:center;
    padding:8px 0; border-top:1px solid var(--line-soft); }
.vmodal .cfgroup .cfrow:first-of-type{ border-top:0; }
.vmodal .cfname{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--ink);
    word-break:break-all; overflow-wrap:anywhere; min-width:0; }
.vmodal .cfrow.empty .cfname{ color:var(--faint); }
.vmodal .cfval{ font-size:13.5px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums;
    color:var(--ink); word-break:break-word; overflow-wrap:anywhere; min-width:0; }
.vmodal .cfval.none{ color:var(--faint); font-weight:400; }
.vmodal .cfempty{ text-align:center; padding:40px 22px; }
.vmodal .cfempty .eic{ width:50px; height:50px; border-radius:16px; background:var(--purple-soft); color:var(--purple);
    display:flex; align-items:center; justify-content:center; margin:0 auto 13px; }
.vmodal .cfempty .eic svg{ width:23px; height:23px; }
.vmodal .cfempty h4{ font-size:15px; font-weight:600; margin:0 0 6px; color:var(--ink); }
.vmodal .cfempty p{ font-size:13px; color:var(--muted); margin:0 auto 16px; max-width:360px; line-height:1.5; }
.vmodal .cftoggle{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); cursor:pointer;
    position:relative; user-select:none; }
.vmodal .cftoggle input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.vmodal .cftoggle .box{ width:17px; height:17px; border-radius:5px; border:1.5px solid var(--line); background:var(--card);
    display:flex; align-items:center; justify-content:center; flex:0 0 17px; transition:background .12s ease,border-color .12s ease; }
.vmodal .cftoggle .box svg{ width:11px; height:11px; color:#fff; opacity:0; }
.vmodal .cftoggle input:checked + .box{ background:var(--purple); border-color:var(--purple); }
.vmodal .cftoggle input:checked + .box svg{ opacity:1; }
.vmodal .statebar2{ display:flex; align-items:center; gap:8px; padding:11px 20px;
    border-top:1px solid var(--line-soft); background:var(--field); font-size:11.5px;
    color:var(--faint); flex-wrap:wrap; }
.vmodal .statebar2 button{ border:1px dashed var(--line); background:none; border-radius:var(--r-pill);
    padding:4px 11px; font-size:11.5px; cursor:pointer; color:var(--muted); font:inherit; font-weight:500; }
.vmodal .statebar2 button:hover{ color:var(--ink); }
.vmodal .statebar2 button.on{ border-style:solid; border-color:var(--purple); color:var(--purple); font-weight:600; }
.vmodal .statebar2 button:disabled{ opacity:.4; cursor:not-allowed; }
.vmodal .statebar2 button:disabled:hover{ color:var(--muted); }

/* ===== AI first-run empty state ===== */
.opt-app .firstrun{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1);
    padding:56px 32px; text-align:center; }
.opt-app .firstrun .eic{ width:64px; height:64px; border-radius:20px; margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--purple-soft),var(--teal-soft)); color:var(--purple); }
.opt-app .firstrun .eic svg{ width:29px; height:29px; }
.opt-app .firstrun h2{ font-size:20px; font-weight:600; margin:0 0 8px; letter-spacing:-0.3px; }
.opt-app .firstrun p{ font-size:14px; color:var(--muted); margin:0 auto 22px; max-width:460px; line-height:1.6; }
.opt-app .firstrun .cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.opt-app .steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
    max-width:720px; margin:34px auto 0; text-align:left; }
.opt-app .step{ border:1px solid var(--line); border-radius:var(--r-md); padding:15px; }
.opt-app .step .n{ width:24px; height:24px; border-radius:8px; background:var(--purple-soft); color:var(--purple);
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-bottom:10px; }
.opt-app .step .t{ font-size:13px; font-weight:600; margin-bottom:4px; }
.opt-app .step .d{ font-size:12.5px; color:var(--muted); line-height:1.45; }
.opt-app .todo-note{ display:flex; gap:10px; align-items:flex-start; background:var(--amber-soft); color:var(--amber);
    border:1px solid var(--amber-line); border-radius:var(--r-md); padding:12px 15px; margin-bottom:16px; font-size:12.5px; }
.opt-app .todo-note svg{ width:16px; height:16px; flex:0 0 16px; margin-top:1px; }
@media (max-width:760px){ .opt-app .steps{ grid-template-columns:1fr; } }

.opt-app .statebar{ margin-top:20px; display:flex; align-items:center; gap:8px; font-size:12px;
    color:var(--faint); flex-wrap:wrap; }
.opt-app .statebar button{ border:1px dashed var(--line); background:none; border-radius:var(--r-pill);
    padding:5px 12px; font-size:12px; cursor:pointer; color:var(--muted); font:inherit; font-weight:500; }
.opt-app .statebar button:hover{ color:var(--ink); border-color:var(--purple-line); }
.opt-app .statebar button.is-on{ border-style:solid; border-color:var(--purple); color:var(--purple); font-weight:600; }

/* ===== AI analysis form (fcard3 / fa / inp6 / sel6 / ta6 / runbox) ===== */
.opt-app .fcard3{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); overflow:hidden; }
.opt-app .fcard3 .fb{ padding:26px 28px; }
.opt-app .fld3{ display:block; }
.opt-app .fld3 > label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.opt-app .fld3 .req{ color:var(--red); }
.opt-app .fld3 + .fld3{ margin-top:20px; }
.opt-app .fld3 .hint{ font-size:12px; color:var(--faint); margin-top:7px; }
.opt-app .fld3.err .inp6, .opt-app .fld3.err .sel6, .opt-app .fld3.err .ta6{ border-color:var(--red); background:var(--red-soft); }
.opt-app .inp6, .opt-app .sel6, .opt-app .ta6{ width:100%; height:50px; padding:0 16px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field); font:inherit; font-size:15px; color:var(--ink); outline:none; }
.opt-app .ta6{ height:auto; min-height:104px; padding:14px 16px; resize:vertical; line-height:1.55; }
.opt-app .inp6:focus, .opt-app .sel6:focus, .opt-app .ta6:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .sel6{ appearance:none; padding-right:40px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center; }
.opt-app .runbox{ background:var(--field); border:1px solid var(--line); border-radius:var(--r-md);
    padding:15px 17px; margin-top:22px; }
.opt-app .runbox .lbl{ font-size:10.5px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase;
    color:var(--faint); margin-bottom:9px; }
.opt-app .runsent{ font-size:14px; line-height:1.6; }
.opt-app .runsent .tok{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
    background:var(--card); border:1px solid var(--line); border-radius:7px; padding:2px 8px; }
.opt-app .runsent .muted{ color:var(--faint); }
.opt-app .runnote{ display:flex; gap:9px; align-items:flex-start; margin-top:12px; font-size:12.5px; color:var(--muted); }
.opt-app .runnote svg{ width:15px; height:15px; flex:0 0 15px; margin-top:2px; color:var(--faint); }
.opt-app .fcard3 .ff{ display:flex; align-items:center; gap:11px; padding:16px 28px;
    border-top:1px solid var(--line-soft); background:var(--field); }
.opt-app .fcard3 .ff .grow{ flex:1 1 auto; }
.opt-app .btn.busy .sp{ display:block; }
.opt-app .btn.busy .ic0{ display:none; }
.opt-app .btn .sp{ display:none; width:17px; height:17px; animation:spin-act .7s linear infinite; }
.opt-app .ai-resp{ font-size:14px; line-height:1.65; color:var(--ink); white-space:pre-wrap; word-wrap:break-word; }
@media (max-width:720px){
    .opt-app .fcard3 .fb{ padding:20px; } .opt-app .fcard3 .ff{ padding:14px 20px; }
    .opt-app .inp6, .opt-app .sel6{ height:46px; font-size:14.5px; }
}

/* ===== v2 Rule Groups modal (mockup: .rgitem/.rgic/.rgtxt/.rgstate/.rgempty) ===== */
.vmodal .rgitem{ display:flex; align-items:center; gap:13px; padding:13px 20px;
    border-top:1px solid var(--line-soft); }
.vmodal .rgitem:first-of-type{ border-top:0; }
.vmodal .rgic{ width:36px; height:36px; border-radius:11px; background:var(--purple-soft); color:var(--purple);
    display:flex; align-items:center; justify-content:center; flex:0 0 36px; }
.vmodal .rgic svg{ width:17px; height:17px; }
.vmodal .rgtxt{ min-width:0; flex:1 1 auto; }
.vmodal .rgname{ font-size:13.5px; font-weight:600; color:var(--ink);
    word-break:break-word; overflow-wrap:anywhere; }
.vmodal .rgvar{ font-size:11px; color:var(--faint); margin-top:2px; word-break:break-all;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.vmodal .rgwhy{ font-size:11.5px; color:var(--muted); margin-top:5px;
    display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vmodal .rgcond{ display:inline-flex; align-items:center; background:var(--field); border:1px solid var(--line);
    border-radius:6px; padding:1px 7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; }
.vmodal .rgstate{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
    background:var(--teal-soft); color:var(--teal-ink); border-radius:var(--r-pill); padding:3px 10px;
    flex:0 0 auto; white-space:nowrap; }
.vmodal .rgempty{ text-align:center; padding:44px 24px; }
.vmodal .rgempty .eic{ width:50px; height:50px; border-radius:16px; background:var(--field); color:var(--faint);
    display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.vmodal .rgempty .eic svg{ width:23px; height:23px; }
.vmodal .rgempty h4{ font-size:15px; font-weight:600; margin:0 0 6px; color:var(--ink); }
.vmodal .rgempty p{ font-size:13px; color:var(--muted); margin:0 auto; max-width:380px; line-height:1.55; }
@media (max-width:620px){
    .vmodal .cfrow{ grid-template-columns:1fr; gap:4px; }
    .vmodal .cfval{ text-align:left; }
}

/* Status row (sidebar Κατάσταση pane) — mockup .statusrow */
.opt-app .statusrow{ display:flex; align-items:center; gap:12px; }
.opt-app .status-title{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.2; }

/* .pb.f2 shorthand (mockup uses these combined on the same element) */
.opt-app .pane .pb.f2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:16px 18px 18px; }
.opt-app .pane .pb.f1{ display:grid; gap:14px; padding:16px 18px 18px; }
/* Grid items default to min-width:auto (content-sized), which blocks the
   ellipsis on long URLs/tokens inside .urlbox. Force them to shrink. */
.opt-app .pane .pb.f1 > *,
.opt-app .pane .pb.f2 > *{ min-width:0; }

/* miniact <a> variant (external-link button inside urlbox) */
.opt-app .urlbox a.miniact{ text-decoration:none; }
.opt-app .urlbox a.miniact:hover{ text-decoration:none; }

/* .num input helper (products limit) */
.opt-app .inp.num{ font-variant-numeric:tabular-nums; }
.opt-app .switch input:checked + .track::after{ transform:translateX(18px); }

/* button busy state (spinner) */
.opt-app .btn .sp{ display:none; width:16px; height:16px; animation:spinbtn .7s linear infinite; flex:0 0 16px; }
.opt-app .btn.busy .sp{ display:inline-block; }
.opt-app .btn.busy .ic0{ display:none; }
.opt-app .btn.busy{ pointer-events:none; opacity:0.85; }
@keyframes spinbtn{ to{ transform:rotate(360deg); } }

/* sticky save bar — fades to invisible (but stays in the DOM) while a
   Bootstrap modal or SweetAlert2 popup is open, so the transition is smooth
   in both directions. z-index deliberately kept low, so even if the fade
   didn't run the bar would still sit behind the modal backdrop. */
.opt-app .savebar{ position:sticky; bottom:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(10px); border-top:1px solid var(--line);
  border-radius:var(--r-card) var(--r-card) 0 0; padding:13px 18px; margin-top:6px; box-shadow:0 -6px 20px rgba(0,0,0,0.05);
  opacity:1; transition:opacity .18s ease; }
.opt-app .savebar .grow{ flex:1 1 auto; }
/* "There are unsaved changes" indicator — hidden per project convention:
   the Save button itself signals dirty state via its enabled/pressed look,
   and the floating white label sat on top of Bootstrap modal backdrops
   (savebar has its own sticky stacking context) which looked broken. */
.opt-app .savebar .dirty{ display:none !important; }
.opt-app .savebar.is-dirty .dirty{ display:none !important; }
/* Modal-open / swal-open: fade the bar out (still occupies layout so nothing
   jumps) and disable pointer events so it doesn't compete with the modal. */
body.modal-open .opt-app .savebar,
body.swal2-shown .opt-app .savebar{
    opacity:0 !important;
    pointer-events:none !important;
}
.opt-app .side{ position:sticky; top:calc(var(--top-h) + 16px); }

/* format badges next to page title */
.opt-app .badge-fmt{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:0.4px;
  background:var(--purple-soft); color:var(--purple); border-radius:8px; padding:3px 9px; vertical-align:middle; margin-left:8px; }
.opt-app .badge-fmt svg{ width:13px; height:13px; }
.opt-app .badge-xml{ background:var(--teal-soft); color:var(--teal-ink); }
.opt-app .badge-csv{ background:#FDF3DE; color:#C98A00; }

/* tag list */
.opt-app .taglist{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.opt-app .taghead{ display:grid; grid-template-columns:1fr 110px 40px; gap:10px; padding:10px 12px;
  background:var(--field); border-bottom:1px solid var(--line); font-size:11px; font-weight:700;
  letter-spacing:0.6px; text-transform:uppercase; color:var(--muted); }
.opt-app .tagrow{ display:grid; grid-template-columns:1fr 110px 40px; gap:10px; padding:9px 12px;
  border-bottom:1px solid var(--line-soft); align-items:center; }
.opt-app .tagrow:last-child{ border-bottom:0; }
.opt-app .tagrow input, .opt-app .tagrow select{ height:38px; padding:0 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); font:inherit; font-size:13.5px; outline:none; width:100%; color:var(--ink); }
.opt-app .tagrow input:focus, .opt-app .tagrow select:focus{ border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .tagrow input.depth{ text-align:center; font-variant-numeric:tabular-nums; }
.opt-app .tagrow input.bad{ border-color:#D3453F; background:#FBE9E8; }
.opt-app .tagrow .del{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--card);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); padding:0; }
.opt-app .tagrow .del svg{ width:15px; height:15px; }
.opt-app .tagrow .del:hover{ border-color:#F2C7C5; color:#D3453F; background:#FBE9E8; }
.opt-app .tagrow.lvl1 input:first-child{ margin-left:22px; width:calc(100% - 22px); }
.opt-app .tagrow.lvl2 input:first-child{ margin-left:44px; width:calc(100% - 44px); }
.opt-app .tagrow .namewarn{ display:none; grid-column:1 / -1; font-size:11.5px; color:#D3453F; padding:0 2px 4px 2px; }
.opt-app .tagrow.invalid .namewarn{ display:block; }
.opt-app .addtag{ display:flex; align-items:center; gap:8px; margin-top:12px; }

/* CSV specific tag list variant (has order buttons + column number) */
.opt-app .taghead.csv, .opt-app .tagrow.csv{ grid-template-columns:34px 1fr 76px 40px; }
.opt-app .ordbtns{ display:flex; flex-direction:column; gap:2px; }
.opt-app .ordbtns button{ width:34px; height:17px; border:1px solid var(--line); background:var(--card);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); padding:0; }
.opt-app .ordbtns button:first-child{ border-radius:8px 8px 0 0; }
.opt-app .ordbtns button:last-child{ border-radius:0 0 8px 8px; border-top:0; }
.opt-app .ordbtns button:hover:not(:disabled){ border-color:var(--purple-line); color:var(--purple); }
.opt-app .ordbtns button:disabled{ opacity:.35; cursor:default; }
.opt-app .ordbtns svg{ width:12px; height:12px; }
.opt-app .colno{ font-size:11.5px; color:var(--faint); text-align:center; font-variant-numeric:tabular-nums; }

/* dark preview pane */
.opt-app .prevpane{ background:#1E1E27; border-radius:var(--r-card); overflow:hidden; }
.opt-app .prevhead{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,0.08); }
.opt-app .prevhead .pt{ font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#8A8A99; }
.opt-app .prevhead .grow{ flex:1 1 auto; }
.opt-app .prevhead .miniact{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); color:#C9C9D2; }
.opt-app .prevhead .miniact:hover{ background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.2); }
.opt-app pre.code{ margin:0; padding:16px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  line-height:1.65; color:#C9C9D2; overflow:auto; max-height:520px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.16) transparent;
  overscroll-behavior:contain;
}
/* WebKit/Chromium scrollbar — slim, translucent, only visible on hover.
   Matches the dark preview pane instead of the OS default light bar. */
.opt-app pre.code::-webkit-scrollbar{ width:8px; height:8px; }
.opt-app pre.code::-webkit-scrollbar-track{ background:transparent; }
.opt-app pre.code::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.14);
    border-radius:8px;
    border:2px solid transparent;
    background-clip:padding-box;
    transition:background-color .15s ease;
}
.opt-app pre.code:hover::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.28);
    background-clip:padding-box;
}
.opt-app pre.code::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,0.42) !important;
    background-clip:padding-box;
}
.opt-app pre.code::-webkit-scrollbar-corner{ background:transparent; }
.opt-app pre.code .k, .opt-app pre.code .t{ color:#9B7BFF; }
.opt-app pre.code .s, .opt-app pre.code .v{ color:#5BE3B0; }
.opt-app pre.code .n, .opt-app pre.code .a{ color:#F0B860; }
.opt-app pre.code .p, .opt-app pre.code .d{ color:#6E6E7C; }
.opt-app .prevfoot{ padding:11px 16px; border-top:1px solid rgba(255,255,255,0.08); font-size:11.5px; color:#8A8A99; }
.opt-app .prevtabs{ display:flex; gap:3px; background:rgba(255,255,255,0.06); border-radius:9px; padding:3px; }
.opt-app .prevtabs button{ border:0; background:none; color:#8A8A99; font-size:11.5px; font-weight:600;
  padding:4px 11px; border-radius:7px; cursor:pointer; }
.opt-app .prevtabs button.on{ background:rgba(255,255,255,0.14); color:#fff; }
.opt-app .prevwrap{ overflow:auto; max-height:520px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.16) transparent;
  overscroll-behavior:contain;
}
.opt-app .prevwrap::-webkit-scrollbar{ width:8px; height:8px; }
.opt-app .prevwrap::-webkit-scrollbar-track{ background:transparent; }
.opt-app .prevwrap::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.14); border-radius:8px;
    border:2px solid transparent; background-clip:padding-box;
}
.opt-app .prevwrap:hover::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.28); background-clip:padding-box;
}
.opt-app .prevwrap::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,0.42) !important; background-clip:padding-box;
}
.opt-app .prevwrap::-webkit-scrollbar-corner{ background:transparent; }
.opt-app table.csvprev{ width:100%; border-collapse:collapse; font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.opt-app table.csvprev th{ text-align:left; padding:9px 12px; color:#9B7BFF; font-weight:600; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03); }
.opt-app table.csvprev td{ padding:8px 12px; color:#C9C9D2; border-bottom:1px solid rgba(255,255,255,0.06); white-space:nowrap; }

@media (max-width:1100px){
  .opt-app .edit{ grid-template-columns:1fr; }
  .opt-app .side{ position:static; }
}
@media (max-width:620px){
  .opt-app .f2{ grid-template-columns:1fr; }
  .opt-app .savebar .btn{ flex:1 1 auto; justify-content:center; }
}

/* ===== v2 export tag builder — matches target mockup ===== */
/* Override old .export-tags styles that push everything right */
.opt-app .export-tags{
  display:block !important; padding:0 !important; border:0 !important; background:transparent !important;
  flex-direction:unset !important; justify-content:unset !important; align-items:unset !important;
}
.opt-app .export-tags .export-tags-header{
  display:block !important; width:100% !important; justify-content:unset !important; padding:0 !important;
}
.opt-app .export-tags .tag-title{ width:auto !important; margin:0 !important; }
.opt-app .export-tags .tag-depth{ width:auto !important; margin:0 !important; }

/* Wrapper — clean white with subtle gray border */
.opt-app .v2-export-tags{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--card); display:block !important; }
.opt-app .v2-export-tags .export-tags-header-in{ padding-bottom:0 !important; border-bottom:0 !important; }

/* Header row: (handle) | ΟΝΟΜΑ ΠΕΔΙΟΥ | ΕΠΙΠΕΔΟ | ACTIONS */
.opt-app .v2-export-tags .export-tags-header-in{
  display:grid !important; grid-template-columns:24px 1fr 110px 84px; gap:10px;
  padding:14px 14px; background:var(--field); border-bottom:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--muted);
}
.opt-app #tagBuilderDraggable:empty{ padding:18px 14px; background:var(--card); }
.opt-app .v2-export-tags .export-tags-header-in .export-tag-name,
.opt-app .v2-export-tags .export-tags-header-in .export-tag-depth{ display:block; }
/* Explicitly place the two header labels in the correct grid columns —
   otherwise, without a spacer for the drag-handle column, they collapse
   into columns 1 and 2 and render on top of each other. */
.opt-app .v2-export-tags .export-tags-header-in .export-tag-name{ grid-column:2 / 3; }
/* DEPTH label centered above its centered input (input has text-align:center),
   otherwise the label sits left-aligned while the "0" sits centered → asymmetric. */
.opt-app .v2-export-tags .export-tags-header-in .export-tag-depth{ grid-column:3 / 4; text-align:center; }

/* Tag row — grid: handle | name | depth | actions.
   Extra 24px first column reserved for the drag handle icon. */
.opt-app .v2-export-tags .export-tags-rows{
  display:grid !important; grid-template-columns:24px 1fr 110px 84px !important; gap:10px !important;
  padding:10px 14px !important; align-items:center !important; width:100% !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; margin:0 !important;
  justify-content:unset !important;
}

/* Drag handle — visible grip icon at the start of every row.
   The sortable is configured with `handle: '.drag-handle'` so only this
   element initiates a drag; inputs/buttons keep working normally. */
.opt-app .v2-export-tags .drag-handle{
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  color:var(--faint); cursor:grab; border-radius:6px;
  transition:color .15s ease, background-color .15s ease;
  -webkit-user-select:none; user-select:none;
}
.opt-app .v2-export-tags .drag-handle:hover{
  color:var(--purple); background:var(--purple-soft);
}
.opt-app .v2-export-tags .drag-handle:active,
.opt-app .v2-export-tags .export-tags-rows.ui-sortable-helper .drag-handle{
  cursor:grabbing;
}
.opt-app .v2-export-tags .drag-handle svg{
  width:16px; height:16px; pointer-events:none;
}
.opt-app .v2-export-tags .export-tags-rows > .export-tags-rows-in{
  display:contents !important;
}
.opt-app .v2-export-tags .export-tags-rows input{
  width:100% !important; height:38px !important; min-height:38px !important; padding:0 12px !important;
  border-radius:10px !important; border:1px solid rgba(0,0,0,0.08) !important; background:#fff !important;
  font-family:inherit !important; font-size:13.5px !important; color:var(--ink) !important;
}
.opt-app .v2-export-tags .export-tags-rows input:focus{ border-color:var(--purple) !important; box-shadow:0 0 0 3px var(--purple-soft) !important; }
.opt-app .v2-export-tags .export-tags-rows.ui-sortable-helper{ box-shadow:var(--sh-pop); border-radius:var(--r-md); border:1px solid var(--line); }

/* Kill the inner grouping divs (JS creates 2 .export-tags-rows-in wrappers) */
.opt-app .v2-export-tags .export-tags-rows > .export-tags-rows-in{
  display:contents;
}

/* Hide tag-initId (invisible input) */
.opt-app .v2-export-tags .tag-initId{ display:none; }

/* Name input — first column.
   Overrides legacy style.css `.tag-title { width: 270px; margin-right: 10px }`
   which broke the v2 grid on nested rows (fixed width overflowed the grid
   cell so the row wrapped onto two lines). */
.opt-app .v2-export-tags .tag-title{
    display:block !important; min-width:0 !important;
    width:auto !important; max-width:none !important;
    margin:0 !important; padding:0 !important;
}
.opt-app .v2-export-tags .tag-depth{
    width:auto !important; margin:0 !important;
}
.opt-app .v2-export-tags .tag-title input{
  width:100%; height:38px; padding:0 12px; border-radius:10px; border:1px solid rgba(0,0,0,0.08);
  background:#fff; font:inherit; font-size:13.5px; outline:none; color:var(--ink);
}
.opt-app .v2-export-tags .tag-title input:focus{ border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); }

/* Depth input — second column */
.opt-app .v2-export-tags .tag-depth{ display:block; }
.opt-app .v2-export-tags .tag-depth .tag-depth-resp{ display:none; }
.opt-app .v2-export-tags .tag-depth input{
  width:100%; height:38px; padding:0 12px; border-radius:10px; border:1px solid rgba(0,0,0,0.08);
  background:#fff; font:inherit; font-size:13.5px; outline:none; color:var(--ink);
  text-align:center; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
/* Hide native number-input spinner arrows — otherwise on focus/hover the
   arrows steal ~16px on the right and shift the centered digit visibly
   to the left, making the column look asymmetric versus its header. */
.opt-app .v2-export-tags .tag-depth input::-webkit-outer-spin-button,
.opt-app .v2-export-tags .tag-depth input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.opt-app .v2-export-tags .tag-depth input:focus{ border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); }

/* Actions column — show edit + delete side by side */
.opt-app .v2-export-tags .tag-actions{ display:flex; align-items:center; justify-content:center; gap:6px; }
.opt-app .v2-export-tags .tag-actions label{ display:none !important; }
.opt-app .v2-export-tags .tag-actions .edit-tag,
.opt-app .v2-export-tags .tag-actions .optisleek-edit-button,
.opt-app .v2-export-tags .tag-actions .delete-tag,
.opt-app .v2-export-tags .tag-actions .optisleek-delete-button,
.opt-app .v2-export-tags .tag-actions .delete-tag.optisleek-delete-button{
  width:34px !important; height:34px !important; border-radius:9px !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  background:#ffffff !important; background-color:#ffffff !important; background-image:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:var(--muted) !important; cursor:pointer !important; padding:0 !important;
  box-shadow:none !important;
}
.opt-app .v2-export-tags .tag-actions .edit-tag:hover,
.opt-app .v2-export-tags .tag-actions .optisleek-edit-button:hover{
  border-color:var(--purple-line) !important; color:var(--purple) !important;
  background:var(--purple-soft) !important; background-color:var(--purple-soft) !important;
}
.opt-app .v2-export-tags .tag-actions .delete-tag:hover,
.opt-app .v2-export-tags .tag-actions .optisleek-delete-button:hover,
.opt-app .v2-export-tags .tag-actions .delete-tag.optisleek-delete-button:hover{
  border-color:#F2C7C5 !important; color:#D3453F !important;
  background:#FBE9E8 !important; background-color:#FBE9E8 !important;
}
/* Icon inside buttons — normalise to neutral colour by default */
.opt-app .v2-export-tags .tag-actions .edit-tag span,
.opt-app .v2-export-tags .tag-actions .edit-tag .material-symbols-outlined,
.opt-app .v2-export-tags .tag-actions .optisleek-edit-button span,
.opt-app .v2-export-tags .tag-actions .optisleek-edit-button .material-symbols-outlined,
.opt-app .v2-export-tags .tag-actions .optisleek-delete-button span,
.opt-app .v2-export-tags .tag-actions .optisleek-delete-button .material-symbols-outlined,
.opt-app .v2-export-tags .tag-actions .delete-tag span,
.opt-app .v2-export-tags .tag-actions .delete-tag .material-symbols-outlined{
  color:var(--muted) !important; font-size:18px !important;
}
.opt-app .v2-export-tags .tag-actions .edit-tag:hover span,
.opt-app .v2-export-tags .tag-actions .edit-tag:hover .material-symbols-outlined,
.opt-app .v2-export-tags .tag-actions .optisleek-edit-button:hover span,
.opt-app .v2-export-tags .tag-actions .optisleek-edit-button:hover .material-symbols-outlined{
  color:var(--purple) !important;
}
.opt-app .v2-export-tags .tag-actions .optisleek-delete-button:hover span,
.opt-app .v2-export-tags .tag-actions .optisleek-delete-button:hover .material-symbols-outlined,
.opt-app .v2-export-tags .tag-actions .delete-tag:hover span,
.opt-app .v2-export-tags .tag-actions .delete-tag:hover .material-symbols-outlined{
  color:#D3453F !important;
}

/* Nested rows — indent by DEPTH (not row order). customExportBuilder.js
   mirrors the .tag-depth input value onto a `data-depth="N"` attribute on
   the parent .export-tags-rows so this CSS reflects true nesting. Supports
   depths 0-6 which covers every realistic XML tag hierarchy. */
/* Depth-specific rules MUST use !important on width — the more generic
   `.export-tags-rows input { width:100% !important }` rule above would
   otherwise win and blow the inset input past the right edge of the row.
   Only the parent's padding/margin change per depth; the visual box style
   (radius, border, background, height) is inherited so nested inputs
   look identical to the depth-0 input, just indented. */
.opt-app .v2-export-tags .export-tags-rows[data-depth="0"] .tag-title input{ margin-left:0 !important; width:100% !important; }
.opt-app .v2-export-tags .export-tags-rows[data-depth="1"] .tag-title input{ margin-left:24px !important; width:calc(100% - 24px) !important; }
.opt-app .v2-export-tags .export-tags-rows[data-depth="2"] .tag-title input{ margin-left:48px !important; width:calc(100% - 48px) !important; }
.opt-app .v2-export-tags .export-tags-rows[data-depth="3"] .tag-title input{ margin-left:72px !important; width:calc(100% - 72px) !important; }
.opt-app .v2-export-tags .export-tags-rows[data-depth="4"] .tag-title input{ margin-left:96px !important; width:calc(100% - 96px) !important; }
.opt-app .v2-export-tags .export-tags-rows[data-depth="5"] .tag-title input{ margin-left:120px !important; width:calc(100% - 120px) !important; }
.opt-app .v2-export-tags .export-tags-rows[data-depth="6"] .tag-title input{ margin-left:144px !important; width:calc(100% - 144px) !important; }

/* Add-tag footer (outside .v2-export-tags but inside .addtag) */
.opt-app .addtag{ display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.opt-app .addtag .hint{ color:var(--muted); font-size:12px; }

/* preview pane inside pane pb */
.opt-app .export-preview pre.code{ margin:0; padding:16px; min-height:200px; }
.opt-app .export-preview pre#json-preview,
.opt-app .export-preview pre#xml-preview,
.opt-app .export-preview pre#excel-preview{
  color:#C9C9D2 !important; background:#1E1E27; margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.65;
  padding:16px; overflow:auto; max-height:520px; white-space:pre-wrap; word-break:break-word;
}

/* ================= V2 MODAL ================= */
.v2-modal .modal-dialog{ max-width:560px; margin:1.75rem auto; }
.v2-modal.v2-modal-sort .modal-dialog{ max-width:1100px; margin:1.75rem auto; }
.v2-modal.v2-modal-sort .modal-content{ max-height:calc(100vh - 3.5rem); display:flex; flex-direction:column; }
.v2-modal .modal-content{ border:0; border-radius:var(--r-card); box-shadow:var(--sh-pop); background:var(--card); font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
.v2-modal .modal-header{ border-bottom:0; padding:22px 24px 4px; align-items:flex-start; }
.v2-modal .modal-title{ font-size:20px; font-weight:600; color:#1A1A1F; letter-spacing:-0.3px; margin:0; }
/* Overrides style.css's global `.modal-header .btn-close` (custom red SVG image)
   and `.exportView .btn-close { width: unset !important }` — both need !important
   to win against those rules regardless of stylesheet load order. */
.v2-modal .btn-close,
.v2-modal .modal-header .btn-close{
  width:32px !important; height:32px !important; border-radius:50% !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  background-color:#fff !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:14px 14px !important;
  opacity:1 !important; margin:0 !important; padding:0 !important; box-shadow:none !important;
  position:static !important; right:auto !important; top:auto !important;
}
.v2-modal .btn-close:hover,
.v2-modal .modal-header .btn-close:hover{
  border-color:#E2D2FC !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C3CFA' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
}
.v2-modal .btn-close:focus,
.v2-modal .modal-header .btn-close:focus{ box-shadow:0 0 0 3px #F1E8FE !important; outline:none !important; }
.v2-modal .modal-body{ padding:14px 24px 24px; }

/* --- Custom-select dropdown menus inside v2 modals.
   Legacy style.css sets `.select-items { position:absolute; top:100%; left:0;
   max-height:400px; }`. Inside a scrollable modal, if the trigger sits near
   the bottom of the viewport the menu can drop past the modal edge and land
   in the bottom-left corner of the screen. Cap the menu height so it fits
   inside the visible portion of the modal, and constrain its width so it
   never spills past the field. --- */
.v2-modal .form-select-container{ position:relative !important; }
.v2-modal .form-select-container .select-items{
  max-height:min(360px, 50vh) !important;
  overflow-y:auto !important;
  width:100% !important; min-width:100% !important; left:0 !important; right:auto !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  border-radius:var(--r-md) !important;
  background:#FFFFFF !important;
  box-shadow:0 12px 40px rgba(0,0,0,0.12) !important;
  padding:10px !important;
  box-sizing:border-box;
  z-index:100 !important;
}
/* Auto-flip up: JS toggles .drop-up on .form-select-container when the
   menu doesn't fit below the trigger. Menu then opens above instead. */
.v2-modal .form-select-container.drop-up .select-items{
  top:auto !important; bottom:100% !important;
  margin-bottom:6px !important;
}
.v2-modal .form-select-container:not(.drop-up) .select-items{
  top:100% !important; margin-top:6px !important;
}
.v2-modal .form-select-container .select-items > div{
  padding:11px 14px !important; margin:0 !important;
  border-radius:10px !important; cursor:pointer;
  font-size:14px !important; line-height:1.4 !important; color:var(--ink) !important;
  width:auto !important;
}
.v2-modal .form-select-container .select-items > div:hover{
  background:var(--field) !important;
}
.v2-modal .form-select-container .select-items > div.selected-item{
  background:var(--purple-soft) !important; color:var(--purple) !important; font-weight:600;
}
.v2-modal .form-select-container .select-items .search-optgroup{
  width:100% !important; box-sizing:border-box;
  height:40px !important; padding:0 14px !important;
  border:1px solid rgba(0,0,0,0.08) !important; border-radius:10px !important;
  background:var(--field) !important; font:inherit; font-size:14px !important;
  outline:none;
  margin-bottom:8px !important;
}
.v2-modal .form-select-container .select-items .search-optgroup:focus{
  border-color:var(--purple) !important; box-shadow:0 0 0 3px var(--purple-soft) !important;
}
/* Allow the modal-body itself to grow with content instead of clipping */
.v2-modal .modal-content{ overflow:visible !important; }
.v2-modal .modal-padding{ padding:0; }
.v2-modal .form-group{ margin-bottom:14px; padding:0; }
.v2-modal .form-label{ display:block; font-size:12.5px; font-weight:600; color:#1A1A1F; margin-bottom:6px; }
.v2-modal .form-select,
.v2-modal select.form-select{ height:40px; border-radius:var(--r-md); border:1px solid rgba(0,0,0,0.08); background:#FAFAF8; padding:0 14px; font-size:13.5px; color:#1A1A1F; width:100%; box-shadow:none; }
.v2-modal .form-select:focus{ border-color:#8C3CFA; box-shadow:0 0 0 3px #F1E8FE; background:#FFFFFF; outline:none; }
.v2-modal .general-seperate{ height:1px; background:rgba(0,0,0,0.05); margin:8px 0 16px; }
.v2-modal .modal-buttons-wrapper{ padding:0; margin:0; justify-content:flex-end; }
.v2-modal .optisleek-primary-submit-form-btn.submitModalForm{
  background:#8C3CFA !important; background-color:#8C3CFA !important; color:#fff !important;
  border:0 !important; border-radius:var(--r-md) !important; height:42px !important; padding:0 22px !important;
  font-size:13.5px !important; font-weight:600 !important; display:inline-flex !important; align-items:center !important; gap:10px !important;
  width:auto !important; box-shadow:none !important;
}
.v2-modal .optisleek-primary-submit-form-btn.submitModalForm:hover{ background:#7A2BE8 !important; background-color:#7A2BE8 !important; }
.v2-modal .optisleek-primary-submit-form-btn.submitModalForm .material-symbols-outlined,
.v2-modal .optisleek-primary-submit-form-btn.submitModalForm .spacer{ display:none !important; }
/* Sort modal Submit (div.submit-sort) */
.v2-modal .optisleek-primary-submit-form-btn.submit-sort,
.v2-modal div.submit-sort{
  background:#8C3CFA !important; background-color:#8C3CFA !important; color:#fff !important;
  border:0 !important; border-radius:var(--r-md) !important; height:42px !important; padding:0 22px !important;
  font-size:13.5px !important; font-weight:600 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  width:auto !important; box-shadow:none !important; cursor:pointer !important; flex:0 0 auto !important;
}
.v2-modal .optisleek-primary-submit-form-btn.submit-sort:hover,
.v2-modal div.submit-sort:hover{ background:#7A2BE8 !important; background-color:#7A2BE8 !important; }
.v2-modal .submit-sort .material-symbols-outlined,
.v2-modal .submit-sort .spacer{ display:none !important; }
.v2-modal .submit-sort > span:not(.material-symbols-outlined):not(.spacer){ color:#fff !important; }

/* Clear sort (div.clear-sort) */
.v2-modal .optisleek-secondary-action-btn.clear-sort,
.v2-modal div.clear-sort{
  background:#fff !important; color:#1A1A1F !important; border:1px solid rgba(0,0,0,0.08) !important;
  border-radius:var(--r-md) !important; height:42px !important; padding:0 22px !important;
  font-size:13.5px !important; font-weight:600 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  cursor:pointer !important; flex:0 0 auto !important; width:auto !important;
}
.v2-modal .optisleek-secondary-action-btn.clear-sort:hover,
.v2-modal div.clear-sort:hover{ border-color:#E2D2FC !important; color:#8C3CFA !important; }
.v2-modal .clear-sort .material-symbols-outlined,
.v2-modal .clear-sort .spacer{ display:none !important; }

.v2-modal .modal-footer{ border-top:0; padding:14px 24px 22px; gap:10px; justify-content:flex-end; background:#fff; }
.v2-modal .row.modal-buttons-wrapper{ display:flex !important; gap:10px !important; margin:0 !important; padding:0 !important; justify-content:flex-end !important; }
.v2-modal .modal-buttons-wrapper .w-50{ width:auto !important; }

/* Export edit-tag modal — `.modal-content-in` blocks are built by
   customExportBuilder.js with bare <label> + <select class="form-select">
   pairs (Has Nodes / Retrieve Value From / Display List Data As / …).
   The JS inserts `.modal-data-rows` as a SIBLING of `.modal-body` (not
   inside it), so we must re-add the horizontal/vertical padding here — the
   generic `.v2-modal .modal-body { padding: 14px 24px 24px }` does not
   reach these rows otherwise. Wrap them into the same v2 form-row rhythm
   as the variables modal. */
/* Match variables popup (.vform-*) pattern:
   - Header: 18px 24px, border-bottom, 17px title (line-height 1.35)
   - Body:   20px 24px 22px padding, form fields with 16px vertical gap
   - Foot:   16px 24px, border-top, right-aligned action buttons
   - Fields: 44px inputs, 12.5px semibold labels (ink color), r-md radius
             purple focus glow. Identical to .vform-inp/sel/ta. */

/* -- Header (mirrors .vform-head) -- */
#exportModal.v2-modal .modal-content{
    border:0 !important;
    border-radius:22px !important;
    overflow:hidden !important;
}
#exportModal.v2-modal .modal-header{
    padding:18px 24px !important;
    border-bottom:1px solid var(--line-soft) !important;
    align-items:center !important;
}
#exportModal.v2-modal .modal-title{
    font-size:17px !important; font-weight:600 !important;
    letter-spacing:-0.2px; color:var(--ink) !important;
    margin:0 !important;
}
/* Round close button matching .vform-close (34x34, 11px radius) */
#exportModal.v2-modal .modal-header .btn-close{
    width:34px !important; height:34px !important;
    border-radius:11px !important;
    border:1px solid var(--line) !important;
    background-size:14px 14px !important;
}

/* -- Body (mirrors .vform-body layout) -- */
#exportModal.v2-modal .modal-data-rows{ padding:14px 24px 18px; }
#exportModal.v2-modal .modal-body{ padding:0 24px; }

#exportModal.v2-modal .modal-content-in{
    display:flex; flex-direction:column; gap:10px;
    padding:0;
}
#exportModal.v2-modal .modal-content-in > div{
    display:flex; flex-direction:column; gap:4px;
    margin:0 !important; padding:0 !important;
    min-width:0;
}
/* d-none / always-hidden must collapse fully — otherwise the flex `gap`
   above still leaves whitespace between the visible neighbours. */
#exportModal.v2-modal .modal-content-in > div.d-none,
#exportModal.v2-modal .modal-content-in > div.always-hidden,
#exportModal.v2-modal .modal-content-in > .d-none,
#exportModal.v2-modal .modal-content-in > .always-hidden{
    display:none !important; margin:0 !important; padding:0 !important; height:0 !important;
}

/* Labels — same as .vform-fv > label */
#exportModal.v2-modal .modal-content-in > div > label{
    display:flex; align-items:center; gap:4px;
    font-size:12.5px; font-weight:600; color:var(--ink);
    margin:0 0 2px 0;
    letter-spacing:0.1px;
}

/* Inputs / selects / textareas — same as .vform-inp/sel/ta (44px height) */
#exportModal.v2-modal .modal-content-in > div > input:not([type=hidden]),
#exportModal.v2-modal .modal-content-in > div > textarea,
#exportModal.v2-modal .modal-content-in > div > select{
    width:100%; min-height:44px; height:44px;
    padding:0 13px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field);
    font:inherit; font-size:13.5px; color:var(--ink); outline:none;
    box-shadow:none; box-sizing:border-box;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
#exportModal.v2-modal .modal-content-in > div > select{
    appearance:none; padding-right:36px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center;
    cursor:pointer;
}
#exportModal.v2-modal .modal-content-in > div > textarea{
    min-height:88px; height:auto; padding:11px 13px; line-height:1.5;
    resize:vertical;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12.5px;
}
#exportModal.v2-modal .modal-content-in > div > input:focus,
#exportModal.v2-modal .modal-content-in > div > textarea:focus,
#exportModal.v2-modal .modal-content-in > div > select:focus{
    border-color:var(--purple); background:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft);
}
#exportModal.v2-modal .modal-content-in > input[type=hidden]{ display:none; }

/* Rules block inside a tag config (Custom Condition / Advanced Custom
   Condition adds a purple-tinted panel with IF / Stored Value / New Value
   inputs). Legacy style.css already gives it a purple background + 20px
   padding — v2 polish: rounded corners, better label/input spacing,
   consistent 40px input height matching the rest of the modal, and a
   working (+) button so users can add multiple conditions. */
#exportModal.v2-modal .tag-variable-rules,
#exportModal.v2-modal .tag-variable-advanced-rules,
#exportModal.v2-modal .tag-attribute-variable-rules{
    background:var(--purple-soft) !important;
    border:1px solid var(--purple-line) !important;
    border-radius:var(--r-md) !important;
    /* Kill the legacy inner scroll (style.css: `max-height:400px; overflow:auto`)
       that created a second scrollbar next to the modal's own one. The modal
       body is already scrollable — Rules should just flow inside it. */
    max-height:none !important;
    overflow:visible !important;
    /* Padding is critical — the legacy .tag-variable-rules rule in style.css
       ships with 20px and that's what the user was seeing. Increase for
       proper breathing room and prevent any child from touching the edges. */
    padding:28px 30px !important;
    margin-top:10px !important;
    margin-bottom:16px !important;
    box-sizing:border-box !important;
}
/* Vertical breathing room between successive rule rows */
#exportModal.v2-modal .tag-variable-rules-row + .tag-variable-rules-row,
#exportModal.v2-modal .tag-variable-advanced-rules-row + .tag-variable-advanced-rules-row,
#exportModal.v2-modal .tag-attribute-variable-rules-row + .tag-attribute-variable-rules-row{
    margin-top:14px !important;
}
#exportModal.v2-modal .tag-variable-rules_header,
#exportModal.v2-modal .tag-variable-advanced-rules_header,
#exportModal.v2-modal .tag-attribute-variable-rules_header{
    margin-bottom:20px !important;
}
#exportModal.v2-modal .tag-variable-rules-title,
#exportModal.v2-modal .tag-variable-advanced-rules-title,
#exportModal.v2-modal .tag-attribute-variable-rules-title{
    font-size:13px !important; font-weight:700 !important; color:var(--purple) !important;
    letter-spacing:0.3px;
}
/* The JS renders the button as `<div>+</div>`. Font `+` glyphs have
   inconsistent optical centering across fonts, so instead of relying on
   the text, we hide it (font-size:0) and paint a perfectly-centered SVG
   via background-image. */
#exportModal.v2-modal .tag-variable-rules-add-new,
#exportModal.v2-modal .tag-variable-advanced-rules-add-new,
#exportModal.v2-modal .tag-attribute-variable-rules-add-new{
    width:28px !important; height:28px !important;
    border-radius:8px !important;
    background-color:var(--card) !important;
    color:transparent !important;      /* hide the text `+` */
    font-size:0 !important;            /* collapse it too */
    line-height:0 !important;
    border:1px solid var(--purple-line) !important;
    padding:0 !important; margin:0 !important;
    box-sizing:border-box !important;
    cursor:pointer !important;
    transition:background-color .15s ease, border-color .15s ease;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C3CFA' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:14px 14px !important;
    -webkit-user-select:none; user-select:none;
}
#exportModal.v2-modal .tag-variable-rules-add-new:hover,
#exportModal.v2-modal .tag-variable-advanced-rules-add-new:hover,
#exportModal.v2-modal .tag-attribute-variable-rules-add-new:hover{
    background-color:var(--purple) !important;
    border-color:var(--purple) !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") !important;
}
/* Simple Rules row (Custom Condition) — 3 fields:  IF | Stored | New | × */
#exportModal.v2-modal .tag-variable-rules-row,
#exportModal.v2-modal .tag-attribute-variable-rules-row{
    display:grid !important;
    grid-template-columns: 100px 1fr 1fr auto !important;
    gap:16px !important;
    align-items:end !important;
    margin-bottom:0 !important;
}
/* Advanced Rules row — 5 fields:  IF | Variable | Stored | New | OrVar | ×
   Needs a wider modal to breathe, so the modal is upsized further below. */
#exportModal.v2-modal .tag-variable-advanced-rules-row{
    display:grid !important;
    grid-template-columns: 78px minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) auto !important;
    gap:10px !important;
    align-items:end !important;
    margin-bottom:0 !important;
}
/* On narrow viewports both variants wrap into a 2-column grid. */
@media (max-width:900px){
    #exportModal.v2-modal .tag-variable-rules-row,
    #exportModal.v2-modal .tag-variable-advanced-rules-row,
    #exportModal.v2-modal .tag-attribute-variable-rules-row{
        grid-template-columns: 1fr 1fr !important;
    }
}
#exportModal.v2-modal .tag-variable-rules-row > *,
#exportModal.v2-modal .tag-variable-advanced-rules-row > *,
#exportModal.v2-modal .tag-attribute-variable-rules-row > *{
    display:flex; flex-direction:column; gap:14px;
    margin:0 !important;
    min-width:0;
}
#exportModal.v2-modal .tag-variable-rules-row label,
#exportModal.v2-modal .tag-variable-advanced-rules-row label,
#exportModal.v2-modal .tag-attribute-variable-rules-row label{
    display:block !important; font-size:11.5px !important; font-weight:600 !important;
    color:var(--muted) !important; margin:0 0 8px 0 !important; padding:0 !important;
    letter-spacing:0.2px;
}
#exportModal.v2-modal .tag-variable-rules-row .condition,
#exportModal.v2-modal .tag-variable-advanced-rules-row .condition,
#exportModal.v2-modal .tag-attribute-variable-rules-row .condition{
    width:auto !important;
}
#exportModal.v2-modal .tag-variable-rules-row .condition .form-select-container,
#exportModal.v2-modal .tag-variable-advanced-rules-row .condition .form-select-container,
#exportModal.v2-modal .tag-attribute-variable-rules-row .condition .form-select-container{
    width:100% !important;
}
#exportModal.v2-modal .tag-variable-rules-row input,
#exportModal.v2-modal .tag-variable-advanced-rules-row input,
#exportModal.v2-modal .tag-attribute-variable-rules-row input{
    width:100% !important; height:38px !important; line-height:38px !important;
    padding:0 12px !important;
    border-radius:8px !important;
    border:1px solid rgba(0,0,0,0.08) !important;
    background:var(--card) !important;
    font:inherit !important; font-size:13.5px !important; color:var(--ink) !important;
    outline:none !important;
    box-sizing:border-box;
}
#exportModal.v2-modal .tag-variable-rules-row input:focus,
#exportModal.v2-modal .tag-variable-advanced-rules-row input:focus,
#exportModal.v2-modal .tag-attribute-variable-rules-row input:focus{
    border-color:var(--purple) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
}
#exportModal.v2-modal .tag-variable-rules-row .stored-value,
#exportModal.v2-modal .tag-variable-advanced-rules-row .stored-value,
#exportModal.v2-modal .tag-attribute-variable-rules-row .stored-value{
    margin-left:0 !important; margin-right:0 !important;
}
/* Delete button for a rule row */
#exportModal.v2-modal .tag-variable-rules-row .delete-rule,
#exportModal.v2-modal .tag-variable-advanced-rules-row .delete-rule,
#exportModal.v2-modal .tag-attribute-variable-rules-row .delete-rule{
    align-self:end;
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:8px;
    background:var(--card); color:var(--muted);
    border:1px solid rgba(0,0,0,0.08); cursor:pointer;
}
#exportModal.v2-modal .tag-variable-rules-row .delete-rule:hover,
#exportModal.v2-modal .tag-variable-advanced-rules-row .delete-rule:hover,
#exportModal.v2-modal .tag-attribute-variable-rules-row .delete-rule:hover{
    background:#FBE9E8; color:#D3453F; border-color:#F2C7C5;
}
/* Add more breathing room between the section stacks in the modal */
/* CRITICAL: this selector's specificity (1,4,0) beats the generic
   `.modal-content-in > div { padding:0 !important }` at line 2958 which
   otherwise collapses the Rules block padding to zero (visible as content
   glued to the purple border). */
#exportModal.v2-modal .modal-content-in > .tag-variable-rules,
#exportModal.v2-modal .modal-content-in > .tag-variable-advanced-rules,
#exportModal.v2-modal .modal-content-in > .tag-attribute-variable-rules{
    padding:28px 30px !important;
    margin-top:10px !important;
    margin-bottom:16px !important;
}

/* Wider dialog for the export tag config — 5 rule columns need breathing
   room (IF | Variable | Stored | New | Or Variable | ×). Overrides the
   generic `.v2-modal .modal-dialog { max-width:560px }`. */
#exportModal.v2-modal .modal-dialog{
    max-width:min(900px, calc(100vw - 48px)) !important;
}
/* Clip horizontally so no legacy widget spills past the modal and adds a
   page-level scrollbar. Vertical scroll stays on Bootstrap's default. */
#exportModal.v2-modal.modal{
    overflow-x:hidden !important;
}
/* Bootstrap's `.modal-dialog-scrollable` caps .modal-content to viewport
   and makes .modal-body scroll — but our tag form is inside
   `.modal-data-rows` (a sibling of .modal-body, injected by the JS), so
   the default rule targets the wrong element. Apply the scroll behaviour
   to .modal-data-rows instead: header + rows(scroll) + footer(sticky). */
/* Bootstrap's `.modal` element itself has `overflow-y:auto` which spawns a
   SECOND scrollbar next to `.modal-data-rows`. Kill it: only the inner rows
   region needs to scroll. */
#exportModal.v2-modal.modal{
    overflow:hidden !important;
}
#exportModal.v2-modal.modal .modal-dialog.modal-dialog-scrollable{
    max-height:calc(100% - 3rem);
    height:calc(100% - 3rem);
    overflow:hidden !important;
}
#exportModal.v2-modal .modal-content{
    display:flex; flex-direction:column;
    max-height:100%;
    overflow:hidden !important;  /* wins vs generic v2-modal overflow:visible */
}
#exportModal.v2-modal .modal-header,
#exportModal.v2-modal .modal-footer{
    flex:0 0 auto;
}
#exportModal.v2-modal .modal-data-rows{
    overflow-y:auto;
    overflow-x:hidden;
    flex:1 1 auto;
    min-height:0;  /* required for flex child scroll inside flex column */
}
/* If for some reason .modal-data-rows isn't present yet (JS not run), make
   .modal-body take over the scroll slot so the modal never appears empty. */
#exportModal.v2-modal .modal-body{
    overflow-y:auto;
    overflow-x:hidden;
    flex:1 1 auto;
    min-height:0;
}
/* Footer — mirrors .vform-foot (16px 24px padding, top divider, buttons
   right-aligned with min-height 40px). */
#exportModal.v2-modal .modal-footer{
    border-top:1px solid var(--line-soft) !important;
    padding:16px 24px !important;
    gap:10px;
    justify-content:flex-end;
    background:var(--card);
    flex:0 0 auto;
}
#exportModal.v2-modal .modal-footer .btn{
    min-height:40px; padding:0 18px;
    border-radius:var(--r-md);
    font-size:13.5px; font-weight:600;
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--line);
    background:var(--card); color:var(--ink);
    cursor:pointer;
    transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
#exportModal.v2-modal .modal-footer .btn:hover{
    border-color:var(--purple-line);
    color:var(--purple);
    background:var(--purple-soft);
}
#exportModal.v2-modal .modal-footer .btn.btn-primary{
    background:var(--purple); color:#fff; border-color:var(--purple);
}
#exportModal.v2-modal .modal-footer .btn.btn-primary:hover{
    background:var(--purple-hi); border-color:var(--purple-hi); color:#fff;
}
#exportModal.v2-modal .modal-footer .btn svg{ width:16px; height:16px; }

/* sort modal specifics */
.v2-modal-sort .modal-content{ position:relative; }
.v2-modal-sort .modal-header{
  padding:0 !important;
  border-bottom:0 !important;
  min-height:0 !important;
  height:0 !important;
  overflow:visible !important;
  position:relative;
  z-index:5;
}
.v2-modal-sort .modal-header .btn-close{
  position:absolute !important;
  top:14px !important;
  right:16px !important;
  z-index:20 !important;
}
.v2-modal-sort .sort-filters{
  padding:24px 64px 18px 24px !important;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.05);
  position:relative;
  z-index:1;
}
.v2-modal-sort .sort-filters .row{
  margin:0 !important;
  display:flex !important;
  gap:18px !important;
  flex-wrap:wrap !important;
}
.v2-modal-sort .sort-filters .row > [class*="col-"]{
  flex:1 1 200px !important;
  padding:0 !important;
  min-width:0;
  max-width:none;
}
.v2-modal-sort .sort-filters .form-group{ margin-bottom:0 !important; }
.v2-modal-sort .sort-filters .form-label{
  display:block; font-size:12.5px; font-weight:600; color:#1A1A1F; margin-bottom:6px;
}
.v2-modal-sort .sort-filters .selected-options,
.v2-modal-sort .sort-filters .selected-products-template,
.v2-modal-sort .sort-filters .mb-3{ margin-bottom:0 !important; }
.v2-modal-sort .sorting-variables-modal-body{
  padding:16px 24px;
  flex:1 1 auto;
  overflow-y:auto;
  min-height:280px;
}
.v2-modal-sort .modal-body{ overflow-y:auto; }
.v2-modal-sort .modal-footer{ padding:14px 24px 18px !important; }

/* select2 inside v2 modal */
.v2-modal .select2-container--default .select2-selection--single{
  height:40px; border-radius:var(--r-md); border:1px solid rgba(0,0,0,0.08); background:#FAFAF8; display:flex; align-items:center; padding:0 14px;
}
.v2-modal .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:40px; padding:0; color:#1A1A1F; font-size:13.5px;
}
.v2-modal .select2-container--default .select2-selection--single .select2-selection__arrow{ height:38px; right:10px; }
.v2-modal .select2-container--default.select2-container--focus .select2-selection--single,
.v2-modal .select2-container--default.select2-container--open .select2-selection--single{
  border-color:#8C3CFA; box-shadow:0 0 0 3px #F1E8FE; background:#fff;
}

/* NOTE: Global Select2 dropdown styling has been consolidated into the canonical
   block earlier in this file (search for "Select2 v4 dropdown — canonical block").
   Do not add duplicate Select2 dropdown rules here. */

/* Sort products modal (fullscreen) — v2 tweaks */
.v2-modal.modal-fullscreen-active .modal-dialog{ max-width:100%; }
.v2-modal .sort-filters{ padding:6px 24px 12px; }
.v2-modal .sorting-variables-modal-body{ padding:14px 24px 4px; }

/* =====================================================================
   v2 Sort Products Modal — product grid tiles
   Overrides legacy style.css .sort-product* within v2 modal scope only,
   so other pages (products analysis etc.) keep their legacy layout.
   ===================================================================== */
.v2-modal-sort .all-category-products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(146px, 1fr)) !important;
  gap:22px 16px !important;
  align-items:start !important;
  justify-content:initial !important;
  background:transparent !important;
  padding:14px 4px 6px !important;
  overflow:visible !important;
}
.v2-modal-sort .sort-product{
  position:relative !important;
  width:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding-top:11px !important;
  object-fit:unset !important;
  min-width:0;
}
.v2-modal-sort .sort-product-link{
  display:block; color:inherit; text-decoration:none;
}
.v2-modal-sort .sort-product-link:hover{ text-decoration:none; color:inherit; }

.v2-modal-sort .sort-variable-img{
  position:relative;
  aspect-ratio:1 / 1;
  background:#ECEAE4;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.04);
}
.v2-modal-sort .sort-variable-img img,
.v2-modal-sort .sort-product img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block;
}
.v2-modal-sort .sort-variable-img img.lazy-img{ opacity:0; transition:opacity .2s ease; }
.v2-modal-sort .sort-variable-img img.lazy-img.loaded{ opacity:1; }
.v2-modal-sort .sort-variable-img .image-loader{
  position:absolute; inset:0;
  background:linear-gradient(135deg, #EFECE3 0%, #E4E0D2 55%, #EFECE3 100%);
  background-size:200% 200%;
  animation:v2sortShim 1.4s linear infinite;
}
@keyframes v2sortShim{
  0%{ background-position:0% 0%; }
  100%{ background-position:200% 0%; }
}
.v2-modal-sort .sort-variable-value{
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  padding:5px 10px !important;
  margin:0 !important;
  min-width:0 !important;
  text-align:left !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:0.1px !important;
  color:#fff !important;
  background:rgba(15, 167, 158, 0.92) !important;
  font-variant-numeric:tabular-nums;
  z-index:3;
}
.v2-modal-sort .sort-variable-value.neg{
  background:rgba(211, 69, 63, 0.92) !important;
}
.v2-modal-sort .sort-product-position{
  position:absolute !important;
  left:8px !important;
  top:0 !important;
  right:auto !important;
  z-index:4;
  width:38px !important;
  height:26px !important;
  padding:0;
  border:1px solid rgba(0,0,0,0.08) !important;
  background:#fff;
  border-radius:8px;
  text-align:center;
  font:inherit;
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:#1A1A1F;
  outline:none;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.v2-modal-sort .sort-product-position:focus{
  border-color:#8C3CFA !important;
  box-shadow:0 0 0 3px #F1E8FE;
}
.v2-modal-sort .sort-product[tagged="true"] .sort-product-position{
  border-color:#8C3CFA !important;
  color:#8C3CFA;
}
.v2-modal-sort .sort-position-pin{
  position:absolute;
  top:0;
  left:auto;
  right:8px;
  z-index:4;
  color:#8C3CFA;
  font-size:14px;
  background:#F1E8FE;
  border:1px solid #E2D2FC;
  border-radius:8px;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  line-height:1;
}
.v2-modal-sort .sort-position-pin:hover{
  background:#E2D2FC;
}
.v2-modal-sort .sort-product-title{
  font-size:11.5px !important;
  line-height:1.4 !important;
  color:#1A1A1F !important;
  text-align:left !important;
  padding:8px 0 0 !important;
  letter-spacing:0 !important;
  font-weight:500 !important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.v2-modal-sort .sort-product-code{
  font-size:11px !important;
  color:#B6B6BC !important;
  text-align:left !important;
  margin-top:3px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing:0 !important;
  font-weight:400 !important;
}

/* Footer background + separator (matches mockup .svfoot) */
.v2-modal-sort .modal-footer{
  background:var(--field, #FAFAF8) !important;
  border-top:1px solid rgba(0,0,0,0.05) !important;
  padding:16px 24px 20px !important;
}
.v2-modal-sort .modal-footer .general-seperate{ display:none !important; }

/* Footer count + moved note */
.v2-modal-sort .modal-footer .row.modal-buttons-wrapper{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  justify-content:flex-start !important;
}
/* Kill Bootstrap .row > * defaults (width:100%, padding) that force button-wrapping.
   Only strip padding from non-button children — buttons need their own 0 22px padding */
.v2-modal-sort .modal-footer .row.modal-buttons-wrapper > *{
  width:auto !important;
  max-width:none !important;
  margin-top:0 !important;
  flex-shrink:0;
}
.v2-modal-sort .modal-footer .row.modal-buttons-wrapper > span,
.v2-modal-sort .modal-footer .row.modal-buttons-wrapper > input{
  padding-left:0 !important;
  padding-right:0 !important;
}
.v2-modal-sort .sort-count-info{
  font-size:12.5px;
  color:var(--muted, #8A8A92);
  font-variant-numeric:tabular-nums;
}
.v2-modal-sort .sort-count-info:empty{ display:none; }
.v2-modal-sort .sort-moved-note{
  font-size:12.5px;
  color:#8C3CFA;
  display:none;
}
.v2-modal-sort.is-moved .sort-moved-note{ display:inline; }
.v2-modal-sort .sort-btns-grow{ flex:1 1 auto; }

/* Responsive: smaller tiles on mobile */
@media (max-width:620px){
  .v2-modal-sort .all-category-products{
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap:18px 12px !important;
  }
}

/* When Bootstrap opens a modal it sets body{overflow:hidden}. That collapses
   the scroll-container that position:sticky relies on, so the rail can shift
   or its nav scrolls. Force position:fixed while the modal is open — this
   isolates the rail from body's scroll state entirely. .main keeps its
   layout because .opt-app's flex row still reserves the rail's flex-basis. */
body.modal-open .opt-app .rail,
body.modal-open .opt-app > .rail{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  height:100vh !important;
  width:var(--rail-w) !important;
  z-index:1055 !important;
}
body.modal-open .opt-app .rail .nav{
  overflow-y:auto !important;
  overscroll-behavior:contain;
}
/* Keep .main visually aligned when rail is pulled out of flex flow */
body.modal-open .opt-app .main{
  padding-left:var(--rail-w) !important;
  box-sizing:border-box;
}

/* Same fix for SweetAlert2 popups (`body.swal2-shown`). SweetAlert changes
   body's overflow/scroll state, which collapses the sticky rail so it
   shrinks to just the rows currently in view (leaving a huge white gap
   below). Pin it to the viewport for the duration of the alert. */
body.swal2-shown .opt-app .rail,
body.swal2-shown .opt-app > .rail{
  position:fixed !important;
  top:0 !important; left:0 !important;
  height:100vh !important;
  width:var(--rail-w) !important;
  z-index:40 !important;
}
body.swal2-shown .opt-app .rail .nav{
  overflow-y:auto !important; overscroll-behavior:contain;
}
body.swal2-shown .opt-app .main{
  padding-left:var(--rail-w) !important; box-sizing:border-box;
}

/* =====================================================================
   v2 Landing Pages — mockup: optisleek_landing_pages_v2.html
   ===================================================================== */

/* Warning bar — subtle info banner (mockup: light off-white, muted ink) */
.opt-app .warnbar{ display:flex; align-items:flex-start; gap:11px;
  background:var(--field); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px 15px; margin-bottom:16px; font-size:13px; }
.opt-app .warnbar svg{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; color:var(--muted); }

/* Token cell (API token with copy/reveal mini-actions) */
.opt-app .tokcell{ display:flex; align-items:center; gap:8px; }
.opt-app .tok{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:var(--field); border:1px solid var(--line); border-radius:8px; padding:4px 9px;
  letter-spacing:0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:290px; color:var(--ink); }
.opt-app .tok.revealed{ background:var(--purple-soft); border-color:var(--purple-line); color:var(--purple); }
.opt-app .miniact{ width:28px; height:28px; border-radius:8px; border:1px solid var(--line);
  background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--muted); flex:0 0 28px; }
.opt-app .miniact svg{ width:14px; height:14px; }
.opt-app .miniact:hover{ border-color:var(--purple-line); color:var(--purple); }
.opt-app .miniact.done{ border-color:var(--teal); color:var(--teal); }

/* Title cell with title + subtitle */
.opt-app .titlecell .t{ font-weight:500; color:var(--ink); }
.opt-app .titlecell .s{ font-size:11.5px; color:var(--faint); margin-top:2px; }
.opt-app .tag-test{ display:inline-flex; align-items:center; font-size:11px; font-weight:500; letter-spacing:0.2px;
  background:transparent; color:var(--faint); border-radius:var(--r-pill); padding:2px 8px; margin-left:7px; font-style:italic; }

/* ID cell inside LP table — purple link-like */
.opt-app .tcard #lpTable td.idcell{ color:var(--purple); font-weight:600; }

/* Landing page editor — breakpoints grid (.bps > .bp) */
.opt-app .bps{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; }
.opt-app .bp{ border:1px solid var(--line); border-radius:var(--r-md); padding:12px; background:var(--field); text-align:center; }
.opt-app .bp .bic{ color:var(--faint); display:flex; justify-content:center; margin-bottom:7px; }
.opt-app .bp .bic svg{ width:17px !important; height:17px !important; }
.opt-app .bp .bl{ font-size:11.5px; font-weight:600; color:var(--ink); }
.opt-app .bp .br{ font-size:10.5px; color:var(--faint); margin-bottom:9px; }
.opt-app .bp input{ width:100%; height:36px; text-align:center; border-radius:9px;
  border:1px solid var(--line); background:var(--card); font:inherit; font-size:15px; font-weight:600;
  outline:none; font-variant-numeric:tabular-nums; padding:0 8px; color:var(--ink); }
.opt-app .bp input:focus{ border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); }
@media (max-width:1100px){ .opt-app .bps{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:620px){ .opt-app .bps{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* Landing pages row actions (edit / refresh / delete pill buttons on the right) */
.opt-app .lp-actions{ display:flex; gap:6px; justify-content:flex-end; }
.opt-app .lp-act{ width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--card); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); text-decoration:none; padding:0;
  transition:border-color .12s ease, color .12s ease, background .12s ease; }
.opt-app .lp-act svg{ width:15px; height:15px; }
.opt-app .lp-act:hover{ border-color:var(--purple-line); color:var(--purple); background:var(--purple-soft); text-decoration:none; }
.opt-app .lp-act.danger:hover{ border-color:#F2C7C5; color:#D3453F; background:#FBE9E8; }
.opt-app .lp-act.is-loading{ opacity:.6; pointer-events:none; }
.opt-app .lp-act.is-loading svg{ animation:v2rot .7s linear infinite; }
@keyframes v2rot{ to{ transform:rotate(360deg); } }

/* .tbl sort header buttons (used by lpTable) */
.opt-app .tbl thead th button{ display:flex; align-items:center; gap:6px; width:100%; padding:11px 16px;
  background:none; border:0; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit; text-align:left; }
.opt-app .tbl thead th button:hover{ color:var(--ink); }
.opt-app .tbl thead th .sort{ width:12px; height:12px; opacity:.4; }
.opt-app .tbl thead th.is-sorted{ color:var(--purple); }
.opt-app .tbl thead th.is-sorted .sort{ opacity:1; }
.opt-app .tbl thead th.plain{ padding:11px 16px; }
.opt-app .tbl td.date{ color:var(--muted); }

/* Header action buttons: keep legacy classes visually consistent with v2 .btn */
/* Primary/secondary CTAs στο pagehead → pill-shaped */
.opt-app .headacts .btn-primary,
.opt-app .pagehead .btn-primary{
    border-radius:var(--r-pill) !important;
    height:44px; padding:0 22px;
    font-size:14px; font-weight:600;
}
.opt-app .headacts .btn-primary svg,
.opt-app .pagehead .btn-primary svg{ width:16px; height:16px; }

.opt-app .headacts .optisleek-secondary-action-btn,
.opt-app .headacts .optisleek-primary-action-btn,
.opt-app .headacts .optisleek-back-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 15px;
  border-radius:var(--r-md); border:1px solid var(--line); background:var(--card);
  font-size:13.5px; font-weight:600; text-decoration:none; color:var(--ink);
  transition:border-color .14s ease, background .14s ease;
}
/* Back button: pill shape (matches mockup) — !important beats legacy .optisleek-back-btn from style.css */
.opt-app .headacts .optisleek-back-btn,
.opt-app .headacts a.optisleek-back-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  height:36px !important; padding:0 14px 0 12px !important; gap:8px !important;
  border-radius:var(--r-pill) !important; border:1px solid var(--line) !important;
  background:var(--card) !important; box-shadow:var(--sh-1);
  font-family:inherit !important; font-size:13.5px !important; font-weight:500 !important;
  color:var(--ink) !important; text-decoration:none !important;
  transition:border-color .14s ease, color .14s ease;
}
.opt-app .headacts .optisleek-back-btn svg{ width:14px !important; height:14px !important; color:var(--muted); }
.opt-app .headacts .optisleek-back-btn:hover{ border-color:var(--purple-line) !important; color:var(--purple) !important; text-decoration:none !important; }
.opt-app .headacts .optisleek-back-btn:hover svg{ color:var(--purple); }
.opt-app .headacts .optisleek-secondary-action-btn:hover{ border-color:var(--purple-line); color:var(--purple); text-decoration:none; }
.opt-app .headacts .optisleek-primary-action-btn{ background:var(--purple); border-color:var(--purple); color:#fff; }
.opt-app .headacts .optisleek-primary-action-btn:hover{ background:var(--purple-hi, #7A2BE8); border-color:var(--purple-hi, #7A2BE8); color:#fff; text-decoration:none; }
.opt-app .headacts .optisleek-primary-action-btn svg,
.opt-app .headacts .optisleek-secondary-action-btn svg{ width:16px; height:16px; }
.opt-app .headacts .optisleek-primary-action-btn .material-symbols-outlined,
.opt-app .headacts .optisleek-secondary-action-btn .material-symbols-outlined{ font-size:18px; }
.opt-app .headacts .spacer{ display:none; }

/* DataTable inside .tcard reset — heavy-specificity to beat #dataTable + bootstrap4 skin */
.opt-app .tcard .dataTables_wrapper{ padding:0; background:transparent; }
.opt-app .tcard #dataTable,
.opt-app .tcard table.dataTable{ border:0 !important; margin:0 !important; width:100% !important; background:transparent !important; }

/* HEADER — kill #dataTable th purple bg */
.opt-app .tcard #dataTable th,
.opt-app .tcard #dataTable thead th,
.opt-app .tcard table.dataTable thead th{
  background:var(--field) !important; color:var(--muted) !important;
  font-family:inherit !important; font-size:11px !important; font-weight:700 !important;
  letter-spacing:0.7px !important; text-transform:uppercase !important;
  line-height:1.2 !important; padding:12px 16px !important; border:0 !important;
  border-bottom:1px solid var(--line) !important; text-align:left !important;
}
.opt-app .tcard #dataTable thead th:before,
.opt-app .tcard #dataTable thead th:after,
.opt-app .tcard table.dataTable thead th:before,
.opt-app .tcard table.dataTable thead th:after{ color:var(--faint) !important; opacity:.5 !important; }

/* BODY cells */
.opt-app .tcard #dataTable td,
.opt-app .tcard #dataTable tbody td,
.opt-app .tcard table.dataTable tbody td{
  border:0 !important; border-bottom:1px solid var(--line-soft) !important;
  padding:12px 16px !important; color:var(--ink) !important; background:transparent !important;
  vertical-align:middle !important; font-size:13px !important;
}
.opt-app .tcard table.dataTable tbody tr:hover td{ background:var(--field) !important; }
.opt-app .tcard table.dataTable tbody tr:last-child td{ border-bottom:0 !important; }

/* FILTER (search) + LENGTH + INFO + PAGINATE */
.opt-app .tcard .dataTables_length,
.opt-app .tcard .dataTables_filter{ padding:14px 16px 8px; font-size:12.5px; color:var(--muted); }
.opt-app .tcard .dataTables_info,
.opt-app .tcard .dataTables_paginate{ padding:12px 16px; font-size:12.5px; color:var(--muted); }
.opt-app .tcard .dataTables_filter input{
  width:280px !important; height:38px !important; border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important; padding:0 14px !important; margin-left:8px !important;
  background:var(--field) !important; font:inherit !important; font-size:13.5px !important;
  color:var(--ink) !important; box-shadow:none !important;
}
.opt-app .tcard .dataTables_filter input:focus{ outline:none !important; border-color:var(--purple) !important;
  box-shadow:0 0 0 3px var(--purple-soft) !important; background:var(--card) !important; }

/* PAGINATION buttons */
.opt-app .tcard .dataTables_paginate .paginate_button{
  min-width:34px; height:34px; padding:0 10px !important; margin:0 2px !important;
  border-radius:var(--r-sm) !important; border:1px solid var(--line) !important;
  background:var(--card) !important; color:var(--ink) !important; font-size:13px !important;
  display:inline-flex; align-items:center; justify-content:center; line-height:1 !important;
}
.opt-app .tcard .dataTables_paginate .paginate_button:hover{
  border-color:var(--purple-line) !important; background:var(--card) !important; color:var(--purple) !important;
}
.opt-app .tcard .dataTables_paginate .paginate_button.current,
.opt-app .tcard .dataTables_paginate .paginate_button.current:hover{
  background:var(--purple) !important; border-color:var(--purple) !important; color:#fff !important; font-weight:600 !important;
}
.opt-app .tcard .dataTables_paginate .paginate_button.disabled,
.opt-app .tcard .dataTables_paginate .paginate_button.disabled:hover{
  color:var(--faint) !important; background:var(--card) !important; border-color:var(--line) !important;
}

/* Action buttons in .tcard: reskin the legacy circles */
.opt-app .tcard .optisleek-edit-button,
.opt-app .tcard .optisleek-view-button,
.opt-app .tcard .optisleek-reload-button,
.opt-app .tcard .optisleek-copy-button,
.opt-app .tcard .optisleek-delete-button{
  width:32px !important; height:32px !important; border-radius:var(--r-sm) !important;
  border:1px solid var(--line) !important; background:var(--card) !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  color:var(--muted) !important; padding:0 !important; margin:0 3px 0 0 !important;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.opt-app .tcard .optisleek-edit-button:hover,
.opt-app .tcard .optisleek-view-button:hover,
.opt-app .tcard .optisleek-reload-button:hover,
.opt-app .tcard .optisleek-copy-button:hover{
  border-color:var(--purple-line) !important; color:var(--purple) !important; background:var(--purple-soft) !important;
}
.opt-app .tcard .optisleek-delete-button:hover{
  border-color:#F2C7C5 !important; color:#D3453F !important; background:#FBE9E8 !important;
}
.opt-app .tcard .optisleek-edit-button span,
.opt-app .tcard .optisleek-view-button span,
.opt-app .tcard .optisleek-reload-button span,
.opt-app .tcard .optisleek-copy-button span,
.opt-app .tcard .optisleek-delete-button span{
  color:currentColor !important; font-size:15px !important; line-height:1 !important;
  background:transparent !important; background-image:none !important;
}
.opt-app .tcard .optisleek-edit-button svg,
.opt-app .tcard .optisleek-view-button svg,
.opt-app .tcard .optisleek-reload-button svg,
.opt-app .tcard .optisleek-copy-button svg,
.opt-app .tcard .optisleek-delete-button svg{ width:15px !important; height:15px !important; }

/* ===== cron jobs ===== */
.opt-app .jobcell .t{ font-weight:600; }
.opt-app .jobcell .m{ font-size:11.5px; color:var(--faint); margin-top:2px; }
.opt-app .sched .h{ font-size:13px; }
.opt-app .sched .cronx{ font-size:11px; color:var(--faint); margin-top:2px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.opt-app .switch2{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; position:relative; }
.opt-app .switch2 input{ position:absolute; opacity:0; pointer-events:none; }
.opt-app .switch2 .track{ width:38px; height:22px; border-radius:var(--r-pill); background:#DDDCD7; position:relative;
    transition:background .16s ease; flex:0 0 38px; }
.opt-app .switch2 .track::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
    border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:transform .16s ease; }
.opt-app .switch2 input:checked + .track{ background:var(--teal); }
.opt-app .switch2 input:checked + .track::after{ transform:translateX(16px); }
.opt-app .switch2 .lb{ font-size:12.5px; color:var(--muted); }
.opt-app .switch2.is-loading{ opacity:.55; pointer-events:none; }
.opt-app .shopchip2{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.opt-app .shopchip2 .dot{ width:22px; height:22px; border-radius:7px; background:var(--purple-soft); color:var(--purple);
    display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex:0 0 22px; }
.opt-app .nextrun{ font-size:13px; white-space:nowrap; }
.opt-app .nextrun small{ display:block; font-size:11px; color:var(--faint); }
.opt-app .dupflag{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
    background:var(--amber-soft); color:var(--amber); border-radius:var(--r-pill); padding:2px 8px;
    margin-left:7px; cursor:help; }
.opt-app .dupflag svg{ width:11px; height:11px; }
.opt-app .gapnote{ display:flex; gap:10px; align-items:flex-start; background:var(--purple-soft); color:#5B2AA6;
    border:1px solid var(--purple-line); border-radius:var(--r-md); padding:12px 15px; margin-bottom:16px; font-size:12.5px; }
.opt-app .gapnote svg{ width:16px; height:16px; flex:0 0 16px; margin-top:1px; }

/* ===== create cron modal (fc / inp7 / sel7 / schedrow / cronfields / prevbox2) ===== */
.opt-app .vmodal .fc > label{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px; }
.opt-app .vmodal .fc .req{ color:var(--red); }
.opt-app .vmodal .fc + .fc{ margin-top:17px; }
.opt-app .vmodal .fc .hint{ font-size:11.5px; color:var(--faint); margin-top:6px; }
.opt-app .vmodal .inp7, .opt-app .vmodal .sel7{ width:100%; height:46px; padding:0 14px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field); font:inherit; font-size:14.5px; color:var(--ink); outline:none; }
.opt-app .vmodal .inp7:focus, .opt-app .vmodal .sel7:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .vmodal .fc.err .inp7, .opt-app .vmodal .fc.err .sel7{ border-color:var(--red); background:var(--red-soft); }
.opt-app .vmodal .sel7{ appearance:none; padding-right:38px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 13px center; }
.opt-app .vmodal .schedrow{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.opt-app .vmodal .schedrow .seg{ display:flex; background:var(--field); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.opt-app .vmodal .schedrow .seg button{ border:0; background:none; padding:7px 14px; border-radius:var(--r-pill);
    font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; font:inherit; }
.opt-app .vmodal .schedrow .seg button.on{ background:var(--purple); color:#fff; }
.opt-app .vmodal .cronfields{ display:none; gap:9px; margin-top:11px; align-items:center; flex-wrap:wrap; }
.opt-app .vmodal .cronfields.show{ display:flex; }
.opt-app .vmodal .cronfields input{ width:78px; height:42px; text-align:center; border:1px solid var(--line);
    background:var(--field); border-radius:10px; font:inherit; font-size:15px; font-weight:600;
    font-variant-numeric:tabular-nums; outline:none; }
.opt-app .vmodal .cronfields input:focus{ border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .vmodal .cronfields .lb{ font-size:12.5px; color:var(--muted); }
.opt-app .vmodal .prevbox2{ background:var(--field); border:1px solid var(--line); border-radius:var(--r-md);
    padding:14px 16px; margin-top:20px; }
.opt-app .vmodal .prevbox2 .lbl{ font-size:10.5px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase;
    color:var(--faint); margin-bottom:9px; }
.opt-app .vmodal .prevrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13.5px; }
.opt-app .vmodal .dupwarn2{ display:none; gap:10px; align-items:flex-start; background:var(--amber-soft); color:var(--amber);
    border:1px solid var(--amber-line); border-radius:var(--r-md); padding:12px 15px; margin-top:15px; font-size:12.5px; }
.opt-app .vmodal .dupwarn2.show{ display:flex; }
.opt-app .vmodal .dupwarn2 svg{ width:16px; height:16px; flex:0 0 16px; margin-top:1px; }
.opt-app .vmodal .freqwarn{ display:none; gap:10px; align-items:flex-start; background:var(--red-soft); color:var(--red);
    border:1px solid var(--red-line); border-radius:var(--r-md); padding:12px 15px; margin-top:15px; font-size:12.5px; }
.opt-app .vmodal .freqwarn.show{ display:flex; }
.opt-app .vmodal .freqwarn svg{ width:16px; height:16px; flex:0 0 16px; margin-top:1px; }
.opt-app .customtag{ display:inline-flex; align-items:center; font-size:10px; font-weight:700; letter-spacing:0.3px;
    background:var(--field); color:var(--muted); border:1px solid var(--line); border-radius:var(--r-pill);
    padding:1px 7px; margin-left:7px; }

/* ===== domains ===== */
.opt-app .hostcell{ display:flex; align-items:center; gap:12px; }
.opt-app .hostmark{ width:34px; height:34px; border-radius:11px; background:var(--purple-soft); color:var(--purple);
    display:flex; align-items:center; justify-content:center; flex:0 0 34px; }
.opt-app .hostmark svg{ width:17px; height:17px; }
.opt-app .hostname{ font-weight:600; font-size:14px; }
.opt-app .hostsub{ font-size:11.5px; color:var(--faint); margin-top:2px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.opt-app .variants{ display:flex; gap:5px; flex-wrap:wrap; }
.opt-app .vchip{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; border-radius:7px;
    padding:2px 8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.opt-app .vchip.on{ background:var(--teal-soft); color:var(--teal-ink); }
.opt-app .vchip.off{ background:var(--field); color:var(--faint); border:1px dashed var(--line); }
.opt-app .cover{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
    border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap; }
.opt-app .cover.full{ background:var(--teal-soft); color:var(--teal-ink); }
.opt-app .cover.part{ background:var(--amber-soft); color:var(--amber); }
.opt-app .cover svg{ width:12px; height:12px; }
.opt-app .rawurl{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.opt-app .viewseg{ display:flex; background:var(--field); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.opt-app .viewseg button{ border:0; background:none; padding:6px 13px; border-radius:var(--r-pill); font-size:12.5px;
    font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; font:inherit; }
.opt-app .viewseg button.on{ background:var(--purple); color:#fff; }

/* ===== domain form ===== */
.opt-app .dcard{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); overflow:hidden; max-width:860px; }
.opt-app .dcard .db{ padding:30px 32px; }
.opt-app .fd > label{ display:block; font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:9px; }
.opt-app .fd .req{ color:var(--red); }
.opt-app .fhint3{ font-size:13px; color:var(--faint); margin-top:9px; }
.opt-app .fhint3.bad{ color:var(--red); }
.opt-app .dcard .df{ display:flex; align-items:center; gap:12px; padding:18px 32px;
    border-top:1px solid var(--line-soft); background:var(--field); }
.opt-app .dcard .df .grow{ flex:1 1 auto; }
.opt-app .inp8{ width:100%; height:56px; padding:0 18px; border-radius:16px; border:1px solid var(--line);
    background:var(--field); font:inherit; font-size:17px; color:var(--ink); outline:none;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.opt-app .inp8:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .fd.err .inp8{ border-color:var(--red); background:var(--red-soft); }

/* ===== customers ===== */
.opt-app .custname{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opt-app .custperson{ font-size:11.5px; color:var(--faint); margin-top:2px; }
.opt-app .clink{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink);
    max-width:100%; overflow:hidden; }
.opt-app .clink span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opt-app .clink svg{ width:13px; height:13px; flex:0 0 13px; color:var(--faint); }
.opt-app .clink:hover{ color:var(--purple); }
.opt-app .clink:hover svg{ color:var(--purple); }
.opt-app .clink.num2{ font-variant-numeric:tabular-nums; }

/* ===== users ===== */
.opt-app .rolebadge{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; border-radius:7px;
    padding:3px 9px; white-space:nowrap; }
.opt-app .r-owner{ background:var(--purple-soft); color:var(--purple); }
.opt-app .r-admin{ background:var(--teal-soft); color:var(--teal-ink); }
.opt-app .r-editor{ background:var(--field); color:var(--muted); border:1px solid var(--line); }
.opt-app .actdot{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
    background:none; border:0; font:inherit; color:var(--ink); padding:4px 8px; border-radius:var(--r-md); }
.opt-app .actdot i{ width:8px; height:8px; border-radius:50%; background:var(--teal); flex:0 0 8px;
    transition:background .16s ease; }
.opt-app .actdot.off{ color:var(--faint); }
.opt-app .actdot.off i{ background:var(--faint); }
.opt-app button.actdot{ cursor:pointer; }
.opt-app button.actdot:hover{ background:var(--field); }
.opt-app button.actdot:disabled{ cursor:not-allowed; opacity:.55; }
.opt-app button.actdot:disabled:hover{ background:none; }
.opt-app .actdot.is-loading{ opacity:.55; pointer-events:none; }

/* ===== create customer form ===== */
.opt-app .fgrid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.opt-app .fgrid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.opt-app .ff2{ min-width:0; }
.opt-app .ff2 > label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.opt-app .ff2 .req{ color:var(--red); }
.opt-app .inp9, .opt-app .sel9{ width:100%; height:48px; padding:0 15px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field); font:inherit; font-size:14.5px; color:var(--ink); outline:none; }
.opt-app .inp9:focus, .opt-app .sel9:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .sel9{ appearance:none; padding-right:38px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 13px center; }
.opt-app .ff2.err .inp9, .opt-app .ff2.err .sel9{ border-color:var(--red); background:var(--red-soft); }
.opt-app .errmsg{ font-size:12.5px; color:var(--red); margin-top:7px; display:none; }
.opt-app .ff2.err .errmsg{ display:block; }
.opt-app .fsec{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1);
    padding:24px 26px; margin-bottom:16px; }
.opt-app .fsec > .st{ font-size:10.5px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase;
    color:var(--faint); margin-bottom:16px; }
.opt-app .shoprow{ display:grid; grid-template-columns:1fr 1fr 1fr 40px; gap:14px; align-items:end;
    padding:14px 0; border-top:1px solid var(--line-soft); }
.opt-app .shoprow:first-child{ border-top:0; padding-top:0; }
.opt-app .shoprow .delcell{ display:flex; justify-content:flex-end; }
.opt-app .shoprow .delbtn{ width:40px; height:48px; border-radius:var(--r-md); border:1px solid var(--line);
    background:var(--card); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.opt-app .shoprow .delbtn:hover{ border-color:var(--red-line); color:var(--red); background:var(--red-soft); }
.opt-app .shoprow .delbtn svg{ width:16px; height:16px; }
.opt-app .addshop{ background:none; border:1px dashed var(--line); border-radius:var(--r-md); padding:10px 14px;
    font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.opt-app .addshop:hover{ border-style:solid; border-color:var(--purple-line); color:var(--purple); }
.opt-app .addshop svg{ width:15px; height:15px; }
@media (max-width:900px){
    .opt-app .fgrid3, .opt-app .fgrid2{ grid-template-columns:1fr; }
    .opt-app .shoprow{ grid-template-columns:1fr; gap:12px; }
    .opt-app .shoprow .delcell{ justify-content:flex-start; }
}
@media (max-width:720px){
    .opt-app .dcard .db{ padding:20px; } .opt-app .dcard .df{ padding:14px 20px; }
    .opt-app .inp8{ height:50px; font-size:16px; }
    .opt-app .dcard .df .btn{ flex:1 1 auto; justify-content:center; }
}

/* ===== cj cron modals: override generic .vmodal .vbody + more breathing room ===== */
.opt-app #cjModal .vbody{ padding:22px 26px 20px; }
.opt-app #cjModal .fc + .fc{ margin-top:22px; }
.opt-app #cjModal .prevbox2{ margin-top:22px; }
.opt-app #cjModal .freqwarn{ margin-top:16px; }
.opt-app #cjModal .dupwarn2{ margin-top:12px; }
.opt-app #cjModal .cronfields{ margin-top:14px; gap:12px; padding:4px 0 2px; }
.opt-app #cjModal .cronfields .lb{ font-size:12.5px; color:var(--muted); font-weight:500; }
.opt-app #cjModal .cronfields input{ height:44px; width:80px; }
.opt-app #cjModal #wSched .hint{ margin-top:12px; }
.opt-app #cjModal #wSched > label{ margin-bottom:4px; }

/* ===== settings page ===== */
.opt-app .settabs{ display:flex; gap:6px; overflow-x:auto; margin-bottom:14px;
    background:var(--card); border-radius:var(--r-pill); padding:5px; box-shadow:var(--sh-1);
    align-self:flex-start; max-width:100%; scrollbar-width:none; }
.opt-app .settabs::-webkit-scrollbar{ display:none; }
.opt-app .settabs button{ border:0; background:none; padding:9px 18px; border-radius:var(--r-pill);
    font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; font:inherit;
    transition:background .14s ease,color .14s ease; }
.opt-app .settabs button:hover{ color:var(--ink); background:var(--field); }
.opt-app .settabs button.is-on{ background:var(--purple); color:#fff; }
.opt-app .settpane{ display:none; }
.opt-app .settpane.is-on{ display:block; }
.opt-app .setcard{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1);
    padding:26px 28px; margin-bottom:16px; }
.opt-app .setgrp{ margin-bottom:18px; }
.opt-app .setgrp:last-child{ margin-bottom:0; }
.opt-app .setgrp > label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.opt-app .setgrp .hint{ font-size:12px; color:var(--faint); margin-top:6px; }
.opt-app .setgrp .ta6{ min-height:180px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.opt-app .setgrp.hidden-field{ display:none; }
.opt-app .setsave{ display:flex; align-items:center; justify-content:flex-end; gap:11px; margin-top:8px; }

.opt-app .swrow{ display:flex; align-items:center; gap:12px; padding:14px 0;
    border-top:1px solid var(--line-soft); }
.opt-app .swrow:first-child{ border-top:0; padding-top:0; }
.opt-app .swrow .swi{ display:inline-flex; align-items:center; cursor:pointer; position:relative;
    width:40px; height:24px; flex:0 0 40px; }
.opt-app .swrow .swi input{ position:absolute; opacity:0; pointer-events:none; }
.opt-app .swrow .swi .tk{ width:40px; height:24px; border-radius:14px; background:#DDDCD7; position:relative;
    transition:background .16s ease; }
.opt-app .swrow .swi .tk::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
    border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.15); transition:transform .16s ease; }
.opt-app .swrow .swi input:checked + .tk{ background:var(--teal); }
.opt-app .swrow .swi input:checked + .tk::after{ transform:translateX(16px); }
.opt-app .swrow .swlabel{ font-size:14px; color:var(--ink); flex:1 1 auto; }
.opt-app .swrow .swhint{ font-size:12px; color:var(--faint); display:block; margin-top:2px; }

.opt-app .setslides{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:12px; }
@media (max-width:900px){ .opt-app .setslides{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .opt-app .setslides{ grid-template-columns:1fr; } }

.opt-app .fileup{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.opt-app .fileup .filelabel{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px;
    border-radius:var(--r-md); border:1px dashed var(--line); background:var(--field); cursor:pointer;
    font-size:13.5px; font-weight:600; color:var(--muted); }
.opt-app .fileup .filelabel:hover{ border-style:solid; border-color:var(--purple-line); color:var(--purple); }
.opt-app .fileup .filelabel svg{ width:16px; height:16px; }
.opt-app .fileup input[type=file]{ position:absolute; opacity:0; width:0; height:0; overflow:hidden; }
.opt-app .fileup .filename{ font-size:13px; color:var(--muted); }

.opt-app .exptree{ margin-top:20px; }
.opt-app .exptree .exphead{ font-size:11px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase;
    color:var(--faint); margin:0 0 14px; }
.opt-app .expgroup{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:12px; }
.opt-app .expgroup .expgt{ font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.opt-app .expitem{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; color:var(--ink); }
.opt-app .expitem input{ width:16px; height:16px; accent-color:var(--purple); flex:0 0 16px; cursor:pointer; }
.opt-app .expitem label{ cursor:pointer; }
.opt-app .expitem-all{ padding-top:10px; margin-top:6px; border-top:1px dashed var(--line-soft);
    font-weight:600; color:var(--muted); }
.opt-app .expallwrap{ display:flex; align-items:center; gap:10px; padding:12px 16px;
    background:var(--purple-soft); border:1px solid var(--purple-line); border-radius:var(--r-md);
    font-size:13.5px; font-weight:600; color:var(--purple); margin:14px 0; }
.opt-app .expallwrap input{ width:16px; height:16px; accent-color:var(--purple); }

@media (max-width:900px){
    .opt-app .setcard{ padding:20px 18px; }
    .opt-app .settabs{ border-radius:var(--r-md); padding:4px; }
    .opt-app .settabs button{ padding:8px 14px; font-size:12.5px; }
    .opt-app .setsave{ flex-wrap:wrap; }
    .opt-app .setslides{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .opt-app .setgrp .ta6{ min-height:150px; }
}
@media (max-width:520px){
    .opt-app .setcard{ padding:16px 14px; }
    .opt-app .swrow{ flex-wrap:wrap; gap:10px; }
    .opt-app .setsave{ justify-content:stretch; }
    .opt-app .setsave .btn{ flex:1 1 auto; justify-content:center; }
    .opt-app .expgroup{ padding:12px 14px; }
    .opt-app .exptree .exphead{ margin-bottom:10px; }
    .opt-app .fileup{ flex-direction:column; align-items:stretch; }
    .opt-app .fileup .filelabel{ justify-content:center; }
}

/* ===== shops picker ===== */
.opt-app .shopstate{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1);
    padding:16px 20px; margin-bottom:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.opt-app .shopstate .st-ic{ width:36px; height:36px; border-radius:11px; background:var(--teal-soft);
    color:var(--teal-ink); display:flex; align-items:center; justify-content:center; flex:0 0 36px; }
.opt-app .shopstate .st-ic svg{ width:17px; height:17px; }
.opt-app .shopstate .st-msg{ flex:1 1 220px; font-size:13.5px; color:var(--muted); line-height:1.4; }
.opt-app .shopstate .st-msg b{ color:var(--ink); font-weight:600; }
.opt-app .shopstate .st-logout{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px;
    border-radius:var(--r-md); border:1px solid var(--red-line); background:var(--red-soft); color:var(--red);
    font-size:13.5px; font-weight:600; cursor:pointer; }
.opt-app .shopstate .st-logout:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.opt-app .shopstate .st-logout svg{ width:16px; height:16px; }

.opt-app .shopspick{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); position:relative; }
.opt-app .shopspick .shoprowcard:last-child.is-current{ border-radius:0 0 var(--r-card) var(--r-card); }
.opt-app .shopspick .spb{ padding:20px 22px; }
.opt-app .shopspick .spb .lbl{ font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.opt-app .shopspick .picksearch{ position:relative; }
.opt-app .shopspick .picksearch > svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--faint); }
.opt-app .shopspick .picksearch .psinp{ width:100%; height:46px; padding:0 44px 0 42px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field); font:inherit; font-size:14.5px; color:var(--ink); outline:none; }
.opt-app .shopspick .picksearch .psinp:focus{ border-color:var(--purple); background:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .shopspick .picksearch .psinp::placeholder{ color:var(--faint); }
.opt-app .shopspick .picksearch .psspin{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--faint); display:none; animation:spin-act .8s linear infinite; }
.opt-app .shopspick .picksearch.is-loading .psspin{ display:block; }
.opt-app .shopspick .picksearch .psmenu{ position:absolute; left:0; right:0; top:calc(100% + 4px);
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-pop);
    max-height:280px; overflow-y:auto; z-index:60; display:none; }
.opt-app .shopspick .picksearch.is-open .psmenu{ display:block; }
.opt-app .shopspick .picksearch .psmenu .psi{ padding:11px 16px; cursor:pointer;
    border-bottom:1px solid var(--line-soft); }
.opt-app .shopspick .picksearch .psmenu .psi:last-child{ border-bottom:0; }
.opt-app .shopspick .picksearch .psmenu .psi:hover{ background:var(--field); }
.opt-app .shopspick .picksearch .psmenu .psi .n{ font-size:14px; font-weight:600; color:var(--ink); }
.opt-app .shopspick .picksearch .psmenu .psi .m{ font-size:11.5px; color:var(--faint); margin-top:2px; }
.opt-app .shopspick .picksearch .psmenu .psi.none{ color:var(--faint); font-style:italic; cursor:default;
    text-align:center; padding:16px; }
.opt-app .shopspick .selectedcust{ display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:var(--purple-soft); border:1px solid var(--purple-line); border-radius:var(--r-md); margin-top:12px; }
.opt-app .shopspick .selectedcust .n{ font-size:13.5px; font-weight:600; color:var(--purple); flex:1 1 auto; }
.opt-app .shopspick .selectedcust .rst{ background:none; border:0; color:var(--purple); cursor:pointer;
    padding:4px; border-radius:50%; display:inline-flex; align-items:center; }
.opt-app .shopspick .selectedcust .rst:hover{ background:var(--purple); color:#fff; }
.opt-app .shopspick .selectedcust .rst svg{ width:14px; height:14px; }

.opt-app .shoprowcard{ display:flex; align-items:center; gap:14px; padding:16px 22px;
    border-top:1px solid var(--line-soft); }
.opt-app .shoprowcard .shopmark{ width:40px; height:40px; border-radius:12px; background:var(--purple-soft);
    color:var(--purple); display:flex; align-items:center; justify-content:center; font-size:14px;
    font-weight:700; flex:0 0 40px; }
.opt-app .shoprowcard .info{ flex:1 1 auto; min-width:0; }
.opt-app .shoprowcard .info .n{ font-size:14.5px; font-weight:600; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opt-app .shoprowcard .info .m{ font-size:11.5px; color:var(--faint); margin-top:2px; }
.opt-app .shoprowcard .go{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px;
    border-radius:var(--r-md); border:1px solid var(--line); background:var(--card); color:var(--ink);
    font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; }
.opt-app .shoprowcard .go:hover{ background:var(--purple); border-color:var(--purple); color:#fff; }
.opt-app .shoprowcard .go svg{ width:15px; height:15px; }
.opt-app .shoprowcard.is-current{ background:var(--teal-soft); }
.opt-app .shoprowcard.is-current .shopmark{ background:var(--teal); color:#fff; }

.opt-app .shopsempty{ padding:44px 22px; text-align:center; color:var(--faint); border-top:1px solid var(--line-soft); }
.opt-app .shopsempty .eic{ width:44px; height:44px; border-radius:13px; background:var(--field); color:var(--faint);
    display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.opt-app .shopsempty .eic svg{ width:20px; height:20px; }
.opt-app .shopsempty .msg{ font-size:13.5px; color:var(--muted); }

@media (max-width:720px){
    .opt-app .shopstate{ padding:14px 16px; gap:11px; }
    .opt-app .shopstate .st-logout{ width:100%; justify-content:center; }
    .opt-app .shopspick .spb{ padding:16px 18px; }
    .opt-app .shoprowcard{ padding:14px 18px; gap:12px; flex-wrap:wrap; }
    .opt-app .shoprowcard .info{ flex:1 1 60%; }
    .opt-app .shoprowcard .go{ flex:1 1 100%; justify-content:center; }
    .opt-app .shopspick .picksearch .psmenu{ max-height:260px; }
    .opt-app .shopspick .picksearch .psmenu .psi{ padding:10px 14px; }
    .opt-app .shopspick .picksearch .psmenu .psi .n,
    .opt-app .shopspick .picksearch .psmenu .psi .m{
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
}
@media (max-width:420px){
    .opt-app .shopstate .st-msg{ font-size:13px; flex:1 1 100%; }
    .opt-app .shoprowcard .shopmark{ width:36px; height:36px; flex-basis:36px; border-radius:10px; font-size:13px; }
}

/* ===== profile form ===== */
.opt-app .profwrap{ max-width:none; }
.opt-app .pcard{ background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); overflow:hidden; }
.opt-app .pcard .pb{ padding:28px 30px; }
.opt-app .prow{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:20px; align-items:start;
    padding:16px 0; border-top:1px solid var(--line-soft); }
.opt-app .prow:first-of-type{ border-top:0; padding-top:0; }
.opt-app .prow > label{ font-size:14px; font-weight:600; color:var(--muted); padding-top:14px; }
.opt-app .prow .req{ color:var(--red); }
.opt-app .pfield{ min-width:0; }
.opt-app .inpA, .opt-app .selA{ width:100%; height:48px; padding:0 15px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field); font:inherit; font-size:15px; color:var(--ink); outline:none; }
.opt-app .inpA:focus, .opt-app .selA:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .selA{ appearance:none; padding-right:38px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 13px center; }
.opt-app .prow.err .inpA, .opt-app .prow.err .selA{ border-color:var(--red); background:var(--red-soft); }
.opt-app .prow .pfhint{ font-size:12.5px; color:var(--faint); margin-top:8px; }
.opt-app .prow .pferr{ font-size:12.5px; color:var(--red); margin-top:7px; display:none; }
.opt-app .prow.err .pferr{ display:block; }
.opt-app .prow .plain{ font-size:14.5px; color:var(--ink); padding-top:14px; }
.opt-app .pchips{ display:flex; flex-wrap:wrap; gap:6px; }
.opt-app .pchip{ display:inline-flex; align-items:center; font-size:12px; padding:4px 10px;
    background:var(--field); border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted); }
.opt-app .pswitch{ display:inline-flex; align-items:center; gap:10px; padding-top:12px; cursor:pointer; }
.opt-app .pswitch input{ position:absolute; opacity:0; pointer-events:none; }
.opt-app .pswitch .sw{ width:42px; height:24px; border-radius:14px; background:var(--line); position:relative;
    transition:background .16s ease; flex:0 0 42px; }
.opt-app .pswitch .sw::after{ content:''; position:absolute; top:2px; left:2px; width:20px; height:20px;
    border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.15); transition:transform .16s ease; }
.opt-app .pswitch input:checked + .sw{ background:var(--teal); }
.opt-app .pswitch input:checked + .sw::after{ transform:translateX(18px); }
.opt-app .pswitch .lbl{ font-size:14px; color:var(--ink); }
.opt-app .pselMulti{ min-height:48px; padding:8px 12px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field); display:flex; flex-wrap:wrap; gap:6px;
    align-items:center; cursor:pointer; position:relative; }
.opt-app .pselMulti:focus-within{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.opt-app .pselMulti .ptag{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
    background:var(--purple-soft); color:var(--purple); border-radius:var(--r-pill); padding:3px 4px 3px 10px; }
.opt-app .pselMulti .ptag button{ background:none; border:0; color:inherit; padding:2px; cursor:pointer;
    display:inline-flex; align-items:center; border-radius:50%; }
.opt-app .pselMulti .ptag button:hover{ background:rgba(0,0,0,0.06); }
.opt-app .pselMulti .ptag svg{ width:11px; height:11px; }
.opt-app .pselMulti .pinput{ border:0; outline:0; background:none; flex:1 1 100px; min-width:100px;
    height:30px; font:inherit; font-size:14px; color:var(--ink); }
.opt-app .pselMenu{ position:absolute; left:0; top:calc(100% + 4px); width:100%; max-height:240px;
    overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--sh-2); z-index:20; display:none; }
.opt-app .pselMenu.is-open{ display:block; }
.opt-app .pselMenu .pi{ padding:10px 14px; font-size:14px; color:var(--ink); cursor:pointer; }
.opt-app .pselMenu .pi:hover{ background:var(--field); }
.opt-app .pselMenu .pi.is-sel{ background:var(--purple-soft); color:var(--purple); font-weight:600; }
.opt-app .pselMenu .pi.none{ color:var(--faint); cursor:default; font-style:italic; }
.opt-app .pactions{ display:flex; align-items:center; gap:11px; padding:16px 26px; margin-top:0;
    background:var(--card); border-top:1px solid var(--line-soft); }
.opt-app .pactions .grow{ flex:1 1 auto; }
@media (max-width:720px){
    .opt-app .prow{ grid-template-columns:1fr; gap:6px; padding:14px 0; }
    .opt-app .prow > label{ padding-top:0; }
    .opt-app .prow .plain{ padding-top:0; }
    .opt-app .pswitch{ padding-top:4px; }
    .opt-app .pcard .pb{ padding:20px; }
    .opt-app .pactions{ padding:14px 20px; flex-wrap:wrap; gap:8px; }
    .opt-app .pactions .btn{ flex:1 1 auto; justify-content:center; }
    .opt-app .pactions .grow{ display:none; }
    .opt-app .pselMulti .pinput{ flex:1 1 100%; min-width:0; }
}

/* ============================================================
   ReportView (reports listing v2)
   ============================================================ */

/* Export bar in the pagehead — legacy .datatableButtons + .datatable-button */
.opt-app .exportbar{ display:flex; gap:8px; flex-wrap:wrap; }
.opt-app .exportbar .datatableButtons{
    display:contents;
}
.opt-app .exportbar .datatable-button{
    display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px;
    border-radius:var(--r-md); border:1px solid var(--line); background:var(--card);
    font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap;
}
.opt-app .exportbar .datatable-button:hover{ border-color:var(--purple-line); color:var(--purple); }
.opt-app .exportbar .datatable-button img{
    width:16px; height:16px; opacity:.75; filter:none;
}
.opt-app .exportbar .datatable-button:hover img{ opacity:1; }
.opt-app .exportbar .datatable-button[disabled],
.opt-app .exportbar .datatable-button.is-disabled{
    opacity:.45; cursor:not-allowed;
}

/* Filter bar — reuses legacy .list-filters output from includes/filters.blade */
.opt-app .ReportView .repbar{ margin-bottom:16px; }
.opt-app .ReportView .default-list-filters-width{ width:100%; }
.opt-app .ReportView .list-filters{
    display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
    padding:18px 20px; background:var(--card); border-radius:var(--r-card);
    box-shadow:var(--sh-1); border:0;
    width:100%; box-sizing:border-box;
}
.opt-app .ReportView .list-filters.pb-0{ padding-bottom:18px; }
.opt-app .ReportView .list-filters-in{
    display:flex; flex:1 1 auto; gap:14px; flex-wrap:wrap; margin:0; padding:0;
}
.opt-app .ReportView .list-filter-item{
    flex:1 1 220px; min-width:180px; padding:0;
}
.opt-app .ReportView .list-filter-item.d-none{ display:none !important; }
.opt-app .ReportView .list-filter-item .form-label{
    display:block; font-size:12.5px; font-weight:600; color:var(--muted);
    margin:0 0 7px; padding:0; text-transform:none; letter-spacing:0;
}
/* When Bootstrap's default `.form-select` rule paints its own chevron on
   the (now hidden) Select2 native <select>, the chevron ghosts through under
   the Select2 trigger — two arrows on the same button. Kill background AND
   size ANY background-image on the hidden native to guarantee only Select2's
   ::after chevron renders. */
.opt-app .ReportView .list-filter-item .form-select.select2-hidden-accessible,
.opt-app .list-filter-item .form-select.select2-hidden-accessible,
.opt-app .form-select.select2-hidden-accessible{
    background-image:none !important;
    background:transparent !important;
}

/* Native styling for the report-filter fields. `:not(.select2-hidden-
   accessible)` is CRITICAL — without it these rules keep the (invisible)
   Select2 native <select> at 44px height with a chevron background, which
   overrode `.select2-hidden-accessible { height:1px !important }` because
   this rule has higher specificity. Result: a second chevron ghosting
   through under the Select2 trigger. */
.opt-app .ReportView .list-filter-item .form-control,
.opt-app .ReportView .list-filter-item .form-select:not(.select2-hidden-accessible){
    width:100% !important; height:44px !important; padding:0 14px !important;
    border-radius:var(--r-md) !important; border:1px solid var(--line) !important;
    background:var(--field) !important; color:var(--ink) !important;
    font:inherit !important; font-size:14px !important; outline:none !important;
    box-shadow:none !important;
}
.opt-app .ReportView .list-filter-item .form-select:not(.select2-hidden-accessible){
    appearance:none; padding-right:38px !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat:no-repeat !important; background-position:right 12px center !important;
}
.opt-app .ReportView .list-filter-item .form-control:focus,
.opt-app .ReportView .list-filter-item .form-select:focus{
    border-color:var(--purple) !important; background:var(--card) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
}
/* Error state on the filter item (missing required field) */
.opt-app .ReportView .list-filter-item.is-err .form-control,
.opt-app .ReportView .list-filter-item.is-err .form-select,
.opt-app .ReportView .list-filter-item.is-err .select2-container--default .select2-selection--single{
    border-color:var(--red) !important; background:var(--red-soft) !important;
}
.opt-app .ReportView .list-filter-item.is-err .form-label{ color:var(--red); }

/* select2 dropdown restyle inside ReportView filters */
.opt-app .ReportView .list-filter-item .select2-filter-div-container{ width:100%; min-width:0; }
.opt-app .ReportView .list-filter-item .select2-container,
.opt-app .ReportView .select2-filter-div-container > .select2-container.select2{ width:100% !important; }
/* Neutralize legacy .select2-filter-div-container purple background on the rendered value */
.opt-app .ReportView .select2-filter-div-container .select2-container--default .select2-selection--single,
.opt-app .ReportView .list-filter-item .select2-container--default .select2-selection--single{
    height:44px !important; border:1px solid var(--line) !important;
    border-radius:var(--r-md) !important; background:var(--field) !important;
    padding:0 !important; box-shadow:none !important;
    outline:none !important;
}
.opt-app .ReportView .select2-filter-div-container .select2-container--default .select2-selection--single .select2-selection__rendered,
.opt-app .ReportView .list-filter-item .select2-container--default .select2-selection--single .select2-selection__rendered{
    background:transparent !important; background-image:none !important;
    color:var(--ink) !important; font-family:inherit !important;
    line-height:44px !important; height:44px !important;
    padding:0 36px 0 14px !important; font-size:14px !important;
    border-radius:var(--r-md) !important;
}
/* ReportView-specific arrow sizing. The chevron itself is drawn by the
   general Select2 ::after rule near line 728 — do NOT also paint one on
   the .select2-selection__arrow background here, or we get two chevrons
   stacked on the same trigger button. */
.opt-app .ReportView .list-filter-item .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:44px !important; width:34px !important; right:0 !important; top:0 !important;
    background-image:none !important;
    min-height:0 !important;
}
.opt-app .ReportView .list-filter-item .select2-container--default.select2-container--focus .select2-selection--single,
.opt-app .ReportView .list-filter-item .select2-container--default.select2-container--open .select2-selection--single{
    border-color:var(--purple) !important; background:var(--card) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
}
.opt-app .ReportView .list-filter-item .select2-container--default .select2-selection--multiple{
    min-height:44px !important; border:1px solid var(--line) !important;
    border-radius:var(--r-md) !important; background:var(--field) !important;
    padding:4px 10px;
}

/* Submit button (from includes/filters .submit-filters) */
.opt-app .ReportView .submit-filters{
    padding:0; margin:0; flex:0 0 auto; align-self:flex-end;
}
.opt-app .ReportView .submit-filters button,
.opt-app .ReportView .submit-filters .btn{
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
    height:44px !important; padding:0 22px !important;
    background:var(--purple) !important; border:1px solid var(--purple) !important;
    color:#fff !important; border-radius:var(--r-md) !important;
    font-size:14.5px !important; font-weight:600 !important; cursor:pointer;
    box-shadow:none !important; letter-spacing:0;
}
.opt-app .ReportView .submit-filters button:hover,
.opt-app .ReportView .submit-filters .btn:hover{
    background:var(--purple-hi) !important; border-color:var(--purple-hi) !important;
}
.opt-app .ReportView .submit-filters .material-symbols-outlined{
    font-size:18px; margin:0;
}

/* Stale filters warning */
.opt-app .ReportView .stale2{
    display:none; align-items:center; gap:10px;
    background:#FFF6E5; color:#7A4A00;
    border:1px solid #F4D48A; border-radius:var(--r-md);
    padding:11px 15px; margin-bottom:14px; font-size:12.5px;
}
.opt-app .ReportView .stale2.show{ display:flex; }
.opt-app .ReportView .stale2 svg{ width:16px; height:16px; flex:0 0 16px; }

/* Idle / loading / empty state card */
.opt-app .ReportView .repstate{
    background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1);
    padding:52px 28px; text-align:center;
}
.opt-app .ReportView .repstate .eic{
    width:56px; height:56px; border-radius:18px;
    background:var(--field); color:var(--faint);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 15px;
}
.opt-app .ReportView .repstate.rep-idle .eic,
.opt-app .ReportView .repstate.rep-empty .eic{
    background:var(--purple-soft); color:var(--purple);
}
.opt-app .ReportView .repstate .eic svg{ width:25px; height:25px; }
.opt-app .ReportView .repstate h3{ font-size:16px; font-weight:600; margin:0 0 7px; }
.opt-app .ReportView .repstate p{
    font-size:13.5px; color:var(--muted);
    margin:0 auto; max-width:420px; line-height:1.55;
}
.opt-app .ReportView .rep-spin{
    width:26px; height:26px; border-radius:50%;
    border:3px solid var(--purple-line); border-top-color:var(--purple);
    animation:rep-spin .8s linear infinite; margin:0 auto 15px;
}
@keyframes rep-spin{ to{ transform:rotate(360deg); } }
.opt-app .ReportView .is-hidden{ display:none !important; }

/* Results card wrapping DataTable */
.opt-app .ReportView .tcard{
    background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1); overflow:hidden;
}
.opt-app .ReportView .tcard .tbar{
    display:flex; align-items:center; gap:10px;
    padding:16px 18px; border-bottom:1px solid var(--line-soft);
}
.opt-app .ReportView .tcard .tbar .count{
    font-size:13px; color:var(--muted); white-space:nowrap;
}

/* DataTables scaffolding — hide native controls, keep native buttons for export triggers */
.opt-app .ReportView .dataTables_wrapper{ padding:0; }
.opt-app .ReportView .dataTables_wrapper .dataTables_length,
.opt-app .ReportView .dataTables_wrapper .dataTables_filter,
.opt-app .ReportView .dataTables_wrapper .dt-buttons{
    display:none !important;
}
.opt-app .ReportView .dataTables_wrapper .dataTables_info{
    padding:12px 18px; font-size:12.5px; color:var(--muted);
}
.opt-app .ReportView .dataTables_wrapper .dataTables_paginate{
    padding:12px 18px; display:flex; justify-content:flex-end; gap:5px;
}
.opt-app .ReportView .dataTables_wrapper .paginate_button{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:34px; height:34px; padding:0 10px;
    border-radius:var(--r-sm); border:1px solid var(--line) !important;
    background:var(--card) !important; color:var(--ink) !important;
    font-size:13px; cursor:pointer; margin:0 !important;
}
.opt-app .ReportView .dataTables_wrapper .paginate_button:hover{
    border-color:var(--purple-line) !important; background:var(--card) !important;
}
.opt-app .ReportView .dataTables_wrapper .paginate_button.current,
.opt-app .ReportView .dataTables_wrapper .paginate_button.current:hover{
    background:var(--purple) !important; border-color:var(--purple) !important;
    color:#fff !important; font-weight:600;
}
.opt-app .ReportView .dataTables_wrapper .paginate_button.disabled{
    opacity:.45; cursor:not-allowed;
}

/* Table itself */
.opt-app .ReportView table.dataTable{
    width:100% !important; border-collapse:collapse; font-size:13.5px;
    margin:0 !important; border:0 !important;
}
.opt-app .ReportView table.dataTable thead th{
    text-align:left; font-size:11px; font-weight:700;
    letter-spacing:0.7px; text-transform:uppercase;
    color:var(--muted); background:var(--field);
    border-bottom:1px solid var(--line) !important; border-top:0 !important;
    padding:11px 16px !important; white-space:nowrap;
}
.opt-app .ReportView table.dataTable thead th.sorting,
.opt-app .ReportView table.dataTable thead th.sorting_asc,
.opt-app .ReportView table.dataTable thead th.sorting_desc{
    cursor:pointer; background-image:none !important;
}
.opt-app .ReportView table.dataTable thead th.sorting_asc,
.opt-app .ReportView table.dataTable thead th.sorting_desc{ color:var(--purple); }
.opt-app .ReportView table.dataTable tbody td{
    padding:11px 16px !important; border-top:1px solid var(--line-soft) !important;
    vertical-align:middle;
}
.opt-app .ReportView table.dataTable tbody tr:first-child td{ border-top:0 !important; }
.opt-app .ReportView table.dataTable tbody tr:hover td{ background:var(--field); }

/* Report table wrap horizontal scroll — contain the wide DataTable inside its card.
   The wide <th class="width-200/300"> cells make the table ~1300px; wrap it so scroll
   stays inside the card, not on the page. */
.opt-app .ReportView{ min-width:0; overflow-x:hidden; }
.opt-app .ReportView .tcard{ min-width:0; overflow-x:hidden; }
.opt-app .ReportView .tcard .dataTables_wrapper{ overflow-x:auto; max-width:100%; min-width:0; }
.opt-app .ReportView .tcard,
.opt-app .ReportView .repbar,
.opt-app .ReportView .list-filters{ max-width:100%; }
/* Ensure the surrounding v2 layout doesn't leak the wide table out */
.opt-app .content{ overflow-x:hidden; }

/* Hide legacy Bootstrap card-body wrappers if any leak through */
.opt-app .ReportView .card,
.opt-app .ReportView .card-body{
    background:transparent; border:0; box-shadow:none; padding:0;
}

/* Prevent page-level horizontal scrollbar under the v2 layout.
   IMPORTANT: overflow-x MUST NOT be set on .opt-app / .main / .content / .wrap — any
   non-visible overflow on an ancestor breaks `position: sticky` on the rail and topbar.
   Also do NOT set max-width on .wrap — its original `max-width:1320px` provides the
   intended centered layout with side gaps. `overflow-x:clip` on html/body is safe:
   it doesn't create a scroll container and doesn't break sticky.
   Wide content (DataTables etc.) contains its own scroll via `.tablewrap{overflow-x:auto}`. */
html, body.opt-app-body{ overflow-x:clip; }

/* Legacy custom .select-items dropdowns (list-filter-item, reports filters):
   Match Select2 look — bold purple text on hover, no background fill.
   custom.js:3060 hard-codes `background: white` INLINE which is fine now, just override
   the color/weight via !important since inline style specificity beats plain class rules. */
.opt-app .form-select-container .select-items div:hover,
.opt-app .list-filter-item .select-items div:hover{
    background:transparent !important;
    color:var(--purple) !important;
    font-weight:700 !important;
}
.opt-app .form-select-container .select-items div.selected-item,
.opt-app .list-filter-item .select-items div.selected-item{
    color:var(--purple) !important;
    font-weight:700;
}

/* ===== Variables form modal (v2 skin over Bootstrap modal) — used in variablesListing ===== */
.vform-modal .modal-dialog{ max-width:780px; }
.vform-modal .modal-content{ border:0; border-radius:22px; box-shadow:var(--sh-pop); overflow:hidden; background:var(--card); }
.vform-head{ display:flex; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid var(--line-soft); }
.vform-head .modal-title{ font-size:17px; font-weight:600; margin:0; flex:1 1 auto; letter-spacing:-0.2px; color:var(--ink); }
.vform-close{ width:34px; height:34px; border-radius:11px; border:1px solid var(--line); background:var(--card);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); flex:0 0 34px;
    padding:0; font-size:18px; line-height:1; }
.vform-close:hover{ border-color:var(--purple-line); color:var(--purple); }
.vform-close svg{ width:16px; height:16px; }
.vform-body{ overflow-y:auto; padding:20px 24px 22px; max-height:min(72vh, 780px);
    display:flex; flex-direction:column; gap:16px; }
/* wrappers around type-dependent grouped fields — also flex-column with same gap so inner .vform-fv siblings stay aligned */
.vform-body > .selected-products-template,
.vform-body > .select-table,
.vform-body > .variables-data-source{ display:flex; flex-direction:column; gap:16px; }
.vform-foot{ display:flex; align-items:center; gap:10px; padding:16px 24px; border-top:1px solid var(--line-soft);
    background:var(--field); flex-wrap:wrap; }
.vform-foot .grow{ flex:1 1 auto; }
.vform-foot .btn{ min-height:40px; }

.vform-g2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.vform-fv{ min-width:0; display:flex; flex-direction:column; }
.vform-fv > label{ display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600;
    line-height:1; min-height:18px; color:var(--muted); margin:0 0 7px; padding:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vform-fv .req{ color:var(--red); font-weight:600; line-height:1; }
.vform-fv .hint{ font-size:11.5px; color:var(--faint); margin-top:6px; }
.vform-inp, .vform-sel, .vform-ta{ width:100%; height:44px; padding:0 13px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field); font:inherit; font-size:14px; line-height:1.4;
    color:var(--ink); outline:none; box-sizing:border-box; margin:0; flex:0 0 auto; }
/* auto-push inputs to the bottom of their flex column so multi-line labels don't misalign inputs across the grid row */
.vform-fv > .vform-inp,
.vform-fv > .vform-sel,
.vform-fv > .vform-ta,
.vform-fv > .formula-calculator-wrapper,
.vform-fv > .vform-radios{ margin-top:auto; }
.vform-ta{ height:auto; min-height:82px; padding:10px 13px; resize:vertical; line-height:1.5; }
.vform-inp:focus, .vform-sel:focus, .vform-ta:focus{ border-color:var(--purple); background:var(--card); box-shadow:0 0 0 3px var(--purple-soft); }
.vform-inp:disabled, .vform-inp[readonly], .vform-sel:disabled, .vform-ta:disabled, .vform-ta[readonly]{ background:var(--canvas); color:var(--muted); cursor:not-allowed; }
.vform-sel{ appearance:none; padding-right:36px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center; }
select.vform-sel[multiple]{ appearance:auto; background-image:none; padding:8px 10px; height:auto; min-height:88px; }
.vform-fv.err .vform-inp, .vform-fv.err .vform-sel, .vform-fv.err .vform-ta{ border-color:var(--red); background:var(--red-soft); }
.vform-fv.err.parsley-error{ border-color:var(--red); }

.vform-radios{ display:flex; gap:8px; flex-wrap:wrap; }
.vform-radio{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--card);
    border-radius:var(--r-md); padding:9px 13px; cursor:pointer; font-size:13.5px; position:relative; }
.vform-radio input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.vform-radio .dot{ width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line); flex:0 0 17px;
    display:flex; align-items:center; justify-content:center; }
.vform-radio .dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--purple); opacity:0; }
.vform-radio input:checked ~ .dot{ border-color:var(--purple); }
.vform-radio input:checked ~ .dot::after{ opacity:1; }
.vform-radio:has(input:checked){ border-color:var(--purple-line); background:var(--purple-soft); }

/* keep Bootstrap d-none behaviour for type-dependent visibility (custom.js toggles it) */
.vform-body .type-dependent.d-none{ display:none !important; }

/* --- Custom pseudo-select inside .vform-modal ------------------------------
   Το updateCustomSelect() (custom.js) αντικαθιστά native <select> με
   .form-select-container > .select-styled + .select-items. Το legacy
   style.css στυλίζει το panel με 11px Manrope, μικρά paddings και μπλε
   κείμενο — δεν ταιριάζει με το vform design. Ξαναστυλίζουμε ό,τι φαίνεται
   ώστε το panel να μοιάζει με .vform-sel + purple accents. */
.vform-modal .form-select-container{
    position:relative !important;
    height:44px !important; line-height:normal !important;
    border-radius:var(--r-md) !important; border:1px solid var(--line) !important;
    background:var(--field) !important; background-image:none !important;
    font:inherit !important; font-size:14px !important; color:var(--ink) !important;
    padding:0 !important;
}
.vform-modal .form-select-container .select-styled{
    height:100%; padding:0 36px 0 13px !important; margin:0 !important;
    display:flex; align-items:center; cursor:pointer;
    color:var(--ink); font-size:14px; line-height:1.4;
    text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center;
}
.vform-modal .form-select-container:hover{ border-color:var(--purple-line); }
.vform-modal .form-select-container .select-styled.active,
.vform-modal .form-select-container:focus-within{
    border-color:var(--purple); background:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft);
}
.vform-modal .form-select-container .select-items{
    max-height:min(320px, 45vh) !important; overflow-y:auto !important;
    width:100% !important; min-width:100% !important; left:0 !important; right:auto !important;
    top:calc(100% + 6px) !important; margin:0 !important;
    border:1px solid var(--line) !important; border-radius:var(--r-md) !important;
    background:var(--card) !important; box-shadow:var(--sh-pop) !important;
    padding:8px !important; box-sizing:border-box;
    font:inherit !important; font-size:13.5px !important; line-height:1.4 !important;
    color:var(--ink) !important; z-index:100 !important;
}
.vform-modal .form-select-container.drop-up .select-items{
    top:auto !important; bottom:calc(100% + 6px) !important;
}
.vform-modal .form-select-container .select-items > div,
.vform-modal .form-select-container .select-items .optgroup > div{
    padding:9px 12px !important; margin:0 !important; width:auto !important;
    border-radius:8px !important; cursor:pointer;
    font-size:13.5px !important; color:var(--ink) !important;
}
.vform-modal .form-select-container .select-items > div:first-child{ margin-top:0 !important; }
.vform-modal .form-select-container .select-items > div:last-child{ margin-bottom:0 !important; }
.vform-modal .form-select-container .select-items > div:hover,
.vform-modal .form-select-container .select-items .optgroup > div:hover{
    background:var(--field) !important; color:var(--ink) !important;
}
.vform-modal .form-select-container .select-items > div.selected-item,
.vform-modal .form-select-container .select-items .optgroup > div.selected-item{
    background:var(--purple-soft) !important; color:var(--purple) !important; font-weight:600;
}
/* placeholder "Choose" (rel="0") — μουτεντ, όχι focusable-looking */
.vform-modal .form-select-container .select-items > div[rel="0"]{
    color:var(--faint) !important; font-style:italic;
}
.vform-modal .form-select-container .select-items > div[rel="0"]:hover{
    background:transparent !important; color:var(--faint) !important; cursor:default;
}
.vform-modal .form-select-container .select-items .optgroup-label{
    padding:8px 12px 4px !important; margin:0 !important;
    font-size:11px !important; font-weight:700; letter-spacing:0.4px;
    text-transform:uppercase; color:var(--faint);
}
/* search input inside the panel */
.vform-modal .form-select-container .select-items > span[style*="sticky"]{
    background:var(--card) !important;
    padding:4px 4px 8px !important; margin:0 0 4px !important;
    border-bottom:1px solid var(--line-soft);
}
.vform-modal .form-select-container .select-items .search-optgroup{
    width:100% !important; box-sizing:border-box;
    height:38px !important; padding:0 12px !important;
    border:1px solid var(--line) !important; border-radius:10px !important;
    background:var(--field) !important; font:inherit; font-size:13.5px !important;
    color:var(--ink) !important; outline:none;
}
.vform-modal .form-select-container .select-items .search-optgroup:focus{
    border-color:var(--purple) !important; background:var(--card) !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
}
/* κρύψε το native select όταν wrapper υπάρχει (ήδη κάνει .select-hidden αλλά ας το επιβεβαιώσουμε) */
.vform-modal .form-select-container > select.select-hidden{ display:none !important; }
/* το wrapper παίρνει τη θέση του native select στο flex layout */
.vform-modal .vform-fv > .form-select-container{ margin-top:auto; }

/* jquery-ui autocomplete popup — align with v2 palette when opened from this modal */
.vform-modal ~ .ui-autocomplete,
.ui-autocomplete{ z-index:2000 !important; border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--card); box-shadow:var(--sh-pop); padding:4px; font:inherit; font-size:13px; list-style:none; margin:0; }
.ui-autocomplete .ui-menu-item{ padding:7px 10px; border-radius:8px; cursor:pointer; }
.ui-autocomplete .ui-menu-item:hover, .ui-autocomplete .ui-menu-item .ui-state-active{ background:var(--purple-soft); color:var(--purple); }

@media (max-width:620px){
    .vform-g2{ grid-template-columns:1fr; }
    .vform-foot .btn{ flex:1 1 auto; justify-content:center; }
}

/* ===== Standalone "denied" pages =====================================
   Used by auth/access-denied, auth/limitation-denied, auth/domain-denied.
   These pages don't extend a layout and don't use .opt-app — they set
   body.page-denied so the styles below stay scoped to them only. */
body.page-denied{
    /* same tokens as .opt-app — the page has no .opt-app wrapper */
    --purple:#8C3CFA; --purple-hi:#7A2BE8; --purple-soft:#F1E8FE;
    --amber:#C98A00; --amber-soft:#FDF3DE; --red:#D3453F;
    --canvas:#F4F3EF; --card:#FFFFFF; --ink:#1A1A1F; --muted:#8A8A92; --line:rgba(0,0,0,0.08);
    margin:0; min-height:100vh; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center; padding:24px;
    background:var(--canvas); color:var(--ink); text-align:center;
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    font-size:14px; line-height:1.5;
}
body.page-denied .container{
    width:100%; max-width:480px; box-sizing:border-box;
    background:var(--card); border-radius:20px;
    padding:40px 36px 32px;
    box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 18px 50px rgba(0,0,0,0.08);
}
body.page-denied h1{
    margin:0 0 10px; font-size:21px; font-weight:700; line-height:1.3;
    letter-spacing:-0.2px; color:var(--ink);
}
body.page-denied p{ margin:0 0 6px; font-size:14px; color:var(--muted); }
body.page-denied #countdown{ margin-top:18px; font-size:12.5px; }
body.page-denied #logoutForm{ display:none; }

/* Limitation page extras: icon, eyebrow, actions */
body.page-denied .denied-ic{
    width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--amber-soft); color:var(--amber);
}
body.page-denied .denied-ic svg{
    width:30px; height:30px; fill:none; stroke:currentColor;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
body.page-denied .denied-ic circle{ fill:currentColor; }
body.page-denied .denied-eyebrow{
    display:inline-block; margin-bottom:12px; padding:4px 11px; border-radius:999px;
    background:var(--amber-soft); color:var(--amber);
    font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
}
body.page-denied .denied-acts{
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:26px;
}
body.page-denied .denied-btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:42px; padding:0 20px; border-radius:13px; box-sizing:border-box;
    background:var(--purple); color:#fff; border:1px solid var(--purple);
    font:inherit; font-size:14px; font-weight:600; text-decoration:none;
    transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.page-denied .denied-btn:hover{ background:var(--purple-hi); border-color:var(--purple-hi); }
body.page-denied .denied-btn-ghost{ background:var(--card); color:var(--ink); border-color:var(--line); }
body.page-denied .denied-btn-ghost:hover{ background:var(--purple-soft); border-color:var(--purple-soft); color:var(--purple); }
@media (max-width:520px){
    body.page-denied .container{ padding:32px 22px 26px; }
    body.page-denied .denied-btn{ flex:1 1 100%; }
}

/* ===== Global chat widget (components/global-chat.blade.php) ===== */
#chat-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #8b3cfa;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    z-index: 9999;
    transition: transform 0.2s ease;
}
#chat-toggle-btn:active { transform: scale(0.9); }
@keyframes btnShake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    40%  { transform: translateX(4px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}
@keyframes btnRotateRight {
    0%   { transform: rotate(0deg)  scale(1); }
    40%  { transform: rotate(18deg) scale(1.05); }
    70%  { transform: rotate(-6deg) scale(1.02); }
    100% { transform: rotate(0deg)  scale(1); }
}
#chat-toggle-btn.rotate { animation: btnRotateRight 0.4s ease; }
#chat-toggle-btn.shake  { animation: btnShake       0.35s ease; }

#chat-window {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 400px;
    height: 500px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    /* z-index must beat the sticky page chrome (breadcrumbs / topbar sit
       around 100 in v2). Kept just under #chat-toggle-btn so the launcher
       remains on top when both are visible. */
    z-index: 9998;
    transition: all 0.3s ease;
    overflow: hidden; /* clip the body under the rounded header */
}
#chat-window.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
#chat-header {
    background: #8b3cfa;
    color: white;
    padding: 12px 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* vertical-center title + close button */
    font-size: 14px;
    line-height: 1;
    min-height: 44px;
    box-sizing: border-box;
    flex-shrink: 0;      /* never let the header get squeezed by the body */
}
#chat-body { flex: 1; overflow: hidden; position: relative; min-height: 0; }
#chat-close { font-size: 15px; cursor: pointer; line-height: 1; user-select: none; }

.chat-scroll-bottom-btn {
    position: absolute;
    right: 43%;
    bottom: 78px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 30;
}
.chat-scroll-bottom-btn.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.chat-scroll-bottom-btn:hover { background: #fff; }
.chat-scroll-bottom-btn svg { width: 30px; height: 30px; fill: #000; }

@media screen and (max-width: 400px) {
    #chat-window { width: 100%; right: 0px; }
}
@media screen and (max-width: 1920px) and (max-height: 500px) and (orientation: landscape) {
    #chat-window {
        width: calc(100vw - 12px);
        height: calc(80dvh - 12px);
        right: 6px;
        bottom: 6px;
        border-radius: 12px;
        z-index: 100000000;
    }
    #chat-header { padding: 8px 10px; font-size: 13px; }
    #chat-toggle-btn { width: 52px; height: 52px; bottom: 12px; right: 12px; }
}

/* ===== General Analytics Charts page (v2) =========================
   Scoped under .opt-app .ChartsView to keep classes narrow. Wraps
   Chart.js canvas elements — the actual chart drawing stays with
   the existing customCharts.js pipeline. */
.opt-app .ChartsView .datebar{
    display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
    padding:18px 20px; background:var(--card); border-radius:var(--r-card);
    box-shadow:var(--sh-1); margin-bottom:18px;
}
.opt-app .ChartsView .datebar .fd3{ min-width:140px; }
.opt-app .ChartsView .datebar .fd3 > label{
    display:block; font-size:12.5px; font-weight:600; color:var(--muted);
}
.opt-app .ChartsView .inpG{
    width:100%; height:44px; padding:0 14px;
    border-radius:var(--r-md); border:1px solid var(--line);
    background:var(--field); font:inherit; font-size:14px; color:var(--ink); outline:none;
    box-sizing:border-box;
}
.opt-app .ChartsView .inpG:focus{
    border-color:var(--purple); background:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft);
}
.opt-app .ChartsView .datebar .grow{ flex:1 1 auto; }
.opt-app .ChartsView .datebar .rangelbl{ font-size:12.5px; color:var(--muted); }
.opt-app .ChartsView .fd3.err .inpG{ border-color:var(--red); background:var(--red-soft); }
.opt-app .ChartsView .dateerr{ font-size:12.5px; color:var(--red); margin-top:6px; display:none; }
.opt-app .ChartsView .fd3.err .dateerr{ display:block; }

/* ============================================================
   Charts v2 — bold unified design across general / categories /
   products / rules-groups performance pages.
   Language: white card + colored top stripe + header (icon + title +
   badge). Bigger section titles with purple accent bar. Softer hover
   lift for interactivity.
   ============================================================ */
.opt-app .ChartsView .secttl{
    display:flex; align-items:center; gap:12px;
    font-size:15px; font-weight:700; color:var(--ink);
    margin:32px 0 16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line-soft);
    letter-spacing:-0.15px;
    text-transform:none;
    position:relative;
}
.opt-app .ChartsView .secttl::before{
    content:''; display:inline-block;
    width:4px; height:22px;
    background:var(--purple);
    border-radius:4px; flex:0 0 4px;
}
.opt-app .ChartsView .secttl:first-child{ margin-top:8px; }

.opt-app .ChartsView .chgrid{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
    align-items:start;  /* CRITICAL: prevent cells from stretching to tallest sibling */
    margin-bottom:20px;
}
.opt-app .ChartsView .chgrid.one{ grid-template-columns:1fr; }

/* Card: white surface + 3px colored top stripe based on --chart-accent.
   Border + subtle shadow. Hover: lift + shadow-pop. */
.opt-app .ChartsView .chcard{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    box-shadow:var(--sh-1);
    padding:22px 22px 20px;
    min-width:0; overflow:hidden;
    display:flex; flex-direction:column; gap:14px;
    transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.opt-app .ChartsView .chcard::before{
    content:''; position:absolute;
    left:0; right:0; top:0; height:3px;
    background:var(--chart-accent, var(--purple));
    opacity:0.85;
}
.opt-app .ChartsView .chcard:hover{
    box-shadow:var(--sh-pop);
    border-color:var(--chart-accent-soft, var(--purple-line));
}
.opt-app .ChartsView .chcard.wide{ grid-column:1 / -1; }

/* Chart card header (auto-injected by v2-chart-headers.js) */
.opt-app .ChartsView .chhead{
    display:flex; align-items:center; gap:12px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line-soft);
    min-width:0;
}
.opt-app .ChartsView .chico{
    width:38px; height:38px;
    border-radius:11px;
    background:var(--chart-accent-soft, var(--purple-soft));
    color:var(--chart-accent, var(--purple));
    display:flex; align-items:center; justify-content:center;
    flex:0 0 38px;
}
.opt-app .ChartsView .chico svg{ width:19px; height:19px; }
.opt-app .ChartsView .chmeta{ flex:1 1 auto; min-width:0; }
.opt-app .ChartsView .chname{
    font-size:14px; font-weight:600; color:var(--ink);
    line-height:1.2; letter-spacing:-0.1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opt-app .ChartsView .chdesc{
    font-size:11.5px; color:var(--muted); margin-top:3px;
    letter-spacing:0.1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opt-app .ChartsView .chbadge{
    padding:6px 12px;
    border-radius:var(--r-pill);
    background:var(--chart-accent-soft, var(--purple-soft));
    color:var(--chart-accent, var(--purple));
    font-size:12px; font-weight:700;
    font-variant-numeric:tabular-nums;
    flex:0 0 auto;
    white-space:nowrap;
    max-width:40%; overflow:hidden; text-overflow:ellipsis;
}
/* Chart-accent CSS variables per metric category — mirror the KPI palette
   so the same coloring is used for chart top-stripe + icon + badge. */
.opt-app .ChartsView .chcard.c-views { --chart-accent:#F0972B; --chart-accent-soft:#FDF3DE; }
.opt-app .ChartsView .chcard.c-purch { --chart-accent:#4AA3E8; --chart-accent-soft:#E4F2FB; }
.opt-app .ChartsView .chcard.c-turn  { --chart-accent:#1CB8A8; --chart-accent-soft:#E3F5EE; }
.opt-app .ChartsView .chcard.c-ctr   { --chart-accent:var(--purple); --chart-accent-soft:var(--purple-soft); }
.opt-app .ChartsView .chcard.c-cart  { --chart-accent:#8A93B5; --chart-accent-soft:#EEF0F5; }
.opt-app .ChartsView .chcard.c-fav   { --chart-accent:#E0575F; --chart-accent-soft:#FBE9E8; }
.opt-app .ChartsView .chcard.c-top   { --chart-accent:var(--purple); --chart-accent-soft:var(--purple-soft); }
.opt-app .ChartsView .chcard.c-eng   { --chart-accent:#9E9E9E; --chart-accent-soft:#EFEFEF; }
.opt-app .ChartsView .chcard.c-lst   { --chart-accent:#C8C459; --chart-accent-soft:#F7F6E4; }

/* Legacy .chttl / .chsum — kept in DOM but hidden when a .chhead is
   present, since Chart.js's internal title lives inside canvas. */
.opt-app .ChartsView .chcard:has(.chhead) .chttl,
.opt-app .ChartsView .chcard:has(.chhead) .chsum{ display:none; }
.opt-app .ChartsView .chttl{
    font-size:13.5px; font-weight:600; text-align:center; margin-bottom:0;
}
.opt-app .ChartsView .chsum{
    font-size:12px; color:var(--muted); text-align:center; margin-bottom:0;
    font-variant-numeric:tabular-nums;
}

@media (max-width:620px){
    .opt-app .ChartsView .chhead{ gap:10px; padding-bottom:12px; }
    .opt-app .ChartsView .chico{ width:34px; height:34px; border-radius:10px; flex-basis:34px; }
    .opt-app .ChartsView .chico svg{ width:17px; height:17px; }
    .opt-app .ChartsView .chname{ font-size:13px; }
    .opt-app .ChartsView .chdesc{ font-size:11px; }
    .opt-app .ChartsView .chbadge{ padding:4px 9px; font-size:11px; }
    .opt-app .ChartsView .secttl{ font-size:14px; margin:24px 0 12px; }
    .opt-app .ChartsView .chcard{ padding:18px; gap:12px; }
}
/* ChartJS canvas — MUST be inside .chwrap with explicit height.
   customCharts.js initializes Chart.js with maintainAspectRatio:false, so the canvas
   fills its parent's height. Without .chwrap the canvas grows to fill the viewport.
   The absolute-positioned canvas locks to wrapper dimensions exactly. */
.opt-app .ChartsView .chwrap{
    position:relative; width:100%; height:360px;
}
.opt-app .ChartsView .chcard.wide .chwrap{ height:440px; }
.opt-app .ChartsView .chcard.tall .chwrap{ height:480px; }
.opt-app .ChartsView .chwrap canvas{
    position:absolute !important; top:0 !important; left:0 !important;
    width:100% !important; height:100% !important;
    display:block; max-width:100% !important;
}
/* Override legacy style.css lines 3199-3224 that capped Top Products / Top Categories
   wrappers at max-width:900px (why they wouldn't stretch full width in the v2 grid) */
.opt-app .ChartsView .eshopTopProductsChartsContainer,
.opt-app .ChartsView .eshopTopCategoriesChartsContainer,
.opt-app .ChartsView .eshopTopProductsChartsWrapper,
.opt-app .ChartsView .eshopTopCategoriesChartsWrapper{
    display:block !important; max-width:none !important; min-width:0 !important;
    width:100% !important; overflow:visible !important; padding-bottom:0 !important;
}
.opt-app .ChartsView .zeronote{ text-align:center; font-size:12px; color:var(--faint); padding:22px 0; }
.opt-app .ChartsView .zeronote{ text-align:center; font-size:12px; color:var(--faint); padding:22px 0; }

/* KPI row (colored cards) */
.opt-app .ChartsView .kpirow{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:16px;
}
/* Landing pages per-token KPIs: variable count → auto-fit so 2 items fill the row */
.opt-app .ChartsView .lpProductsData .kpirow{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
/* v2 style — white card, muted label, big ink value, subtle colored
   accent bar on the left for identification. Matches the .mcard pattern
   on the homepage instead of the old saturated color-block cards. */
.opt-app .ChartsView .kpi2{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    padding:18px 20px 18px 22px;
    box-shadow:var(--sh-1);
    min-width:0;
    display:flex; flex-direction:column; gap:6px;
    overflow:hidden;
    transition:box-shadow .15s ease, transform .15s ease;
}
.opt-app .ChartsView .kpi2::before{
    content:'';
    position:absolute; left:0; top:0; bottom:0;
    width:4px;
    background:var(--kpi-accent, var(--purple));
}
.opt-app .ChartsView .kpi2:hover{
    box-shadow:var(--sh-pop);
    transform:translateY(-1px);
}
.opt-app .ChartsView .kpi2 .v{
    font-size:24px; font-weight:700; letter-spacing:-0.5px;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    line-height:1.15;
    word-break:break-word; overflow-wrap:anywhere;
    text-align:left;
}
.opt-app .ChartsView .kpi2 .k{
    font-size:12px; color:var(--muted);
    font-weight:600;
    letter-spacing:0.2px;
    line-height:1.35;
    text-align:left;
    margin:0; padding:0; border:0;
    text-transform:none;
}
/* Colored accent per KPI category — subtle 4px left bar, keeps the color
   coding people rely on while ditching the saturated backgrounds. */
.opt-app .ChartsView .k-views{ --kpi-accent:#F0972B; }
.opt-app .ChartsView .k-purch{ --kpi-accent:#4AA3E8; }
.opt-app .ChartsView .k-turn { --kpi-accent:#1CB8A8; }
.opt-app .ChartsView .k-ctr  { --kpi-accent:var(--purple); }
.opt-app .ChartsView .k-fav  { --kpi-accent:#E0575F; }
.opt-app .ChartsView .k-cart { --kpi-accent:#8A93B5; }
.opt-app .ChartsView .k-eng  { --kpi-accent:#9E9E9E; }
.opt-app .ChartsView .k-lst  { --kpi-accent:#C8C459; }

/* ==================================================================
   Landing Pages block — Top 3 highlighted cards + sortable/searchable
   table. Replaces the old kpi2-flat grid that would have exploded to
   4×N cards with many LPs.
   ================================================================== */
.opt-app .ChartsView .lp-block{ margin-top:12px; display:flex; flex-direction:column; gap:18px; }

/* --- Top 3 cards --- */
.opt-app .ChartsView .lp-top3{
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;
}
.opt-app .ChartsView .lp-topcard{
    position:relative; padding:18px 20px; border-radius:var(--r-card);
    background:var(--card); border:1px solid var(--line);
    box-shadow:var(--sh-1); overflow:hidden;
    min-width:0;
    display:flex; flex-direction:column; gap:14px;
}
.opt-app .ChartsView .lp-topcard::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:var(--purple);
}
.opt-app .ChartsView .lp-topcard.rank-1::before{ background:#E0B23A; }
.opt-app .ChartsView .lp-topcard.rank-2::before{ background:#A6ABB8; }
.opt-app .ChartsView .lp-topcard.rank-3::before{ background:#B67C55; }
.opt-app .ChartsView .lp-topcard-head{
    display:flex; align-items:center; gap:8px; min-width:0;
}
.opt-app .ChartsView .lp-rank{
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    min-width:30px; height:22px; padding:0 8px;
    border-radius:999px; background:var(--field); border:1px solid var(--line);
    font-size:11px; font-weight:700; color:var(--muted);
    font-variant-numeric:tabular-nums; letter-spacing:0.2px;
}
.opt-app .ChartsView .lp-topcard.rank-1 .lp-rank{ background:#FBEECB; border-color:#F0DC94; color:#8A6A00; }
.opt-app .ChartsView .lp-topcard.rank-2 .lp-rank{ background:#EEF0F4; border-color:#D6DAE1; color:#4A505C; }
.opt-app .ChartsView .lp-topcard.rank-3 .lp-rank{ background:#F5E4D5; border-color:#E4C6A9; color:#7A4C24; }
.opt-app .ChartsView .lp-topcard-title{
    font-size:14px; font-weight:600; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto;
}
.opt-app .ChartsView .lp-topcard-hero-val{
    font-size:26px; font-weight:700; color:var(--ink);
    letter-spacing:-0.4px; font-variant-numeric:tabular-nums;
    line-height:1.1;
}
.opt-app .ChartsView .lp-topcard-hero-lbl{
    font-size:11.5px; color:var(--muted); margin-top:4px;
    font-weight:500; letter-spacing:0.2px;
}
.opt-app .ChartsView .lp-topcard-meta{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
    padding-top:12px; border-top:1px solid var(--line-soft);
    font-size:11.5px; color:var(--muted);
}
.opt-app .ChartsView .lp-topcard-meta > div{ display:flex; flex-direction:column; gap:2px; }
.opt-app .ChartsView .lp-topcard-meta b{ color:var(--ink); font-size:13.5px; font-weight:600; }

/* --- Table with all landing pages --- */
.opt-app .ChartsView .lp-table-card{
    background:var(--card); border-radius:var(--r-card);
    box-shadow:var(--sh-1); overflow:hidden;
}
.opt-app .ChartsView .lp-table-bar{
    display:flex; align-items:center; gap:12px; padding:14px 18px;
    border-bottom:1px solid var(--line-soft);
}
.opt-app .ChartsView .lp-search{
    display:flex; align-items:center; gap:8px; flex:1 1 300px; max-width:360px;
    padding:0 12px; height:38px;
    border-radius:var(--r-md); border:1px solid var(--line); background:var(--field);
    transition:border-color .15s, background-color .15s, box-shadow .15s;
}
.opt-app .ChartsView .lp-search:focus-within{
    border-color:var(--purple); background:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft);
}
.opt-app .ChartsView .lp-search svg{ width:16px; height:16px; color:var(--faint); flex:0 0 16px; }
.opt-app .ChartsView .lp-search input{
    border:0; background:none; outline:none; flex:1 1 auto; min-width:0;
    font:inherit; font-size:13.5px; color:var(--ink);
}
.opt-app .ChartsView .lp-count{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.opt-app .ChartsView .lp-count b{ color:var(--ink); font-weight:600; }

.opt-app .ChartsView .lp-table-wrap{ overflow-x:auto; }
.opt-app .ChartsView .lp-table{
    width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px;
}
.opt-app .ChartsView .lp-table thead th{
    text-align:left; padding:12px 16px; font-size:11px; font-weight:700;
    letter-spacing:0.6px; text-transform:uppercase; color:var(--muted);
    background:var(--field); border-bottom:1px solid var(--line);
    white-space:nowrap;
}
.opt-app .ChartsView .lp-table thead th.num{ text-align:right; }
.opt-app .ChartsView .lp-table thead th button{
    background:none; border:0; padding:0; color:inherit; font:inherit;
    display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    letter-spacing:inherit; text-transform:inherit;
}
.opt-app .ChartsView .lp-table thead th button svg{ width:12px; height:12px; color:var(--faint); }
.opt-app .ChartsView .lp-table thead th.is-sorted{ color:var(--purple); }
.opt-app .ChartsView .lp-table thead th.is-sorted button svg{ color:var(--purple); }
.opt-app .ChartsView .lp-table thead th.th-sort:hover{ color:var(--ink); }
.opt-app .ChartsView .lp-table thead th.th-sort:hover button svg{ color:var(--ink); }
.opt-app .ChartsView .lp-table tbody td{
    padding:12px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink);
}
.opt-app .ChartsView .lp-table tbody tr:last-child td{ border-bottom:0; }
.opt-app .ChartsView .lp-table tbody tr:hover{ background:var(--field); }
.opt-app .ChartsView .lp-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.opt-app .ChartsView .lp-table td.num.strong{ font-weight:700; color:var(--purple); }
.opt-app .ChartsView .lp-table .lp-title-cell{
    font-weight:500; max-width:320px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.opt-app .ChartsView .lp-empty{
    padding:32px 20px; text-align:center; color:var(--muted); font-size:13.5px;
}

@media (max-width:900px){
    .opt-app .ChartsView .lp-top3{ grid-template-columns:1fr; }
    .opt-app .ChartsView .lp-table-bar{ flex-wrap:wrap; }
    .opt-app .ChartsView .lp-search{ max-width:none; }
}

/* Products page — per-product KPI card grid. Uses auto-fit so:
     1 card  → fills whole row
     2 cards → 50% each
     3+ cards → wrap into 3+ columns based on available width (min 280px per card).
   The controller injects one card per matching product into each #products-*-row. */
.opt-app .ChartsView .pgrid{
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px; margin-bottom:16px;
}
.opt-app .ChartsView .pgrid:empty{ display:none; margin:0; }
@media (max-width:1000px){ .opt-app .ChartsView .pgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){  .opt-app .ChartsView .pgrid{ grid-template-columns:1fr; } }

/* Products page — hidden source grid (the JS harvests .pcard values from
   here into the visible aggregated table below). Kept in DOM so the
   server's `response.script[]` evals still work. */
.opt-app .ChartsView .prod-hidden-source{
    position:absolute !important;
    width:1px !important; height:1px !important;
    padding:0 !important; margin:-1px !important;
    overflow:hidden !important; clip:rect(0,0,0,0) !important;
    white-space:nowrap !important; border:0 !important;
    pointer-events:none !important;
}

/* Aggregated products table — one row per product, columns for every
   metric. Search + sort + pagination. Replaces the older 6×N grid of
   .pcard boxes which was unusable when the user had many products. */
.opt-app .ChartsView .prod-table-wrap{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    box-shadow:var(--sh-1);
    margin-top:18px;
    overflow:hidden;
    min-width:0;
}
.opt-app .ChartsView .prod-table-toolbar{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:14px 18px;
    border-bottom:1px solid var(--line-soft);
}
.opt-app .ChartsView .prod-search-wrap{
    flex:1 1 320px; min-width:220px;
    display:flex; align-items:center; gap:8px;
    padding:0 12px; height:40px;
    border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--field);
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.opt-app .ChartsView .prod-search-wrap:focus-within{
    border-color:var(--purple); background:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft);
}
.opt-app .ChartsView .prod-search-wrap svg{ width:16px; height:16px; color:var(--muted); flex:0 0 16px; }
.opt-app .ChartsView .prod-search{
    flex:1 1 auto; min-width:0;
    border:0; background:none; outline:none;
    font:inherit; font-size:13.5px; color:var(--ink);
}
.opt-app .ChartsView .prod-search::placeholder{ color:var(--faint); }
.opt-app .ChartsView .prod-total-badge{
    padding:5px 11px;
    border-radius:var(--r-pill);
    background:var(--purple-soft); color:var(--purple);
    font-size:12px; font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.opt-app .ChartsView .prod-table-scroll{ overflow-x:auto; }
.opt-app .ChartsView .prod-table{
    width:100%; border-collapse:collapse;
    font-size:13px; color:var(--ink);
    min-width:720px;
}
.opt-app .ChartsView .prod-table thead th{
    text-align:left; font-size:11px; font-weight:700;
    letter-spacing:0.7px; text-transform:uppercase;
    color:var(--muted); background:var(--field);
    border-bottom:1px solid var(--line);
    padding:11px 14px; white-space:nowrap;
    cursor:pointer; user-select:none;
    transition:color .12s ease, background-color .12s ease;
}
.opt-app .ChartsView .prod-table thead th:hover{ color:var(--ink); background:var(--purple-soft); }
.opt-app .ChartsView .prod-table thead th.is-sorted{ color:var(--purple); }
.opt-app .ChartsView .prod-table thead th.prod-th-right{ text-align:right; }
.opt-app .ChartsView .prod-table tbody td{
    padding:12px 14px; border-top:1px solid var(--line-soft);
    vertical-align:middle;
}
.opt-app .ChartsView .prod-table tbody tr:hover td{ background:rgba(140,60,250,0.03); }
.opt-app .ChartsView .prod-table .prod-td-right{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.opt-app .ChartsView .prod-table .prod-td-left{ min-width:220px; }
.opt-app .ChartsView .prod-table .prod-title{
    font-weight:600; color:var(--ink); font-size:13px;
    line-height:1.35; word-break:break-word;
}
.opt-app .ChartsView .prod-table .prod-sub{
    font-size:11px; color:var(--muted); margin-top:2px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    word-break:break-all;
}
.opt-app .ChartsView .prod-table .prod-empty{
    text-align:center; color:var(--muted); padding:40px 20px; font-size:13.5px;
}

.opt-app .ChartsView .prod-pager{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:12px 18px;
    border-top:1px solid var(--line-soft);
    background:var(--field);
    font-size:12.5px; color:var(--muted);
}
.opt-app .ChartsView .prod-pager-info{ flex:1 1 auto; font-variant-numeric:tabular-nums; }
.opt-app .ChartsView .prod-pager-pages{ display:inline-flex; gap:4px; flex-wrap:wrap; }
.opt-app .ChartsView .prod-page{
    min-width:32px; height:32px; padding:0 10px;
    border:1px solid var(--line); background:var(--card);
    border-radius:8px; font:inherit; font-size:12.5px; color:var(--muted);
    cursor:pointer; font-variant-numeric:tabular-nums;
    transition:border-color .12s ease, color .12s ease, background-color .12s ease;
}
.opt-app .ChartsView .prod-page:hover:not(:disabled){ border-color:var(--purple-line); color:var(--purple); }
.opt-app .ChartsView .prod-page:disabled{ opacity:.4; cursor:not-allowed; }
.opt-app .ChartsView .prod-page.is-on{
    background:var(--purple); color:#fff; border-color:var(--purple); font-weight:700;
}
.opt-app .ChartsView .prod-perpage{
    display:inline-flex; align-items:center; gap:8px;
}
.opt-app .ChartsView .prod-perpage-sel{
    height:32px; padding:0 26px 0 12px;
    border-radius:8px; border:1px solid var(--line); background:var(--card);
    font:inherit; font-size:12.5px; color:var(--ink); outline:none;
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 8px center;
    cursor:pointer;
}
.opt-app .ChartsView .prod-perpage-sel:focus{ border-color:var(--purple); }

/* Per-product KPI cards — same v2 white-card language as .kpi2 above,
   with the accent color moved to a 4px left bar. */
.opt-app .ChartsView .pcard{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    padding:16px 18px 16px 20px;
    box-shadow:var(--sh-1);
    min-width:0;
    overflow:hidden;
    transition:box-shadow .15s ease, transform .15s ease;
}
.opt-app .ChartsView .pcard::before{
    content:'';
    position:absolute; left:0; top:0; bottom:0;
    width:4px;
    background:var(--kpi-accent, var(--purple));
}
.opt-app .ChartsView .pcard:hover{
    box-shadow:var(--sh-pop);
    transform:translateY(-1px);
}
.opt-app .ChartsView .pcard .v{
    font-size:22px; font-weight:700; letter-spacing:-0.4px;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    line-height:1.15;
    word-break:break-word;
    text-align:left;
}
.opt-app .ChartsView .pcard .v span{ color:var(--ink); }
.opt-app .ChartsView .pcard .m{
    font-size:12px; color:var(--muted);
    font-weight:600;
    margin-top:6px; padding:0; border:0;
    text-align:left;
}
.opt-app .ChartsView .pcard .meta{
    font-size:11px; color:var(--faint);
    margin-top:4px; line-height:1.5;
    word-break:break-word;
    text-align:left;
}

/* Products search input — grow to fill the whole gap between the date
   fields and the Attributes-templates dropdown. Users often paste long
   comma-separated ID lists, so the cap-width of 360px was too tight.
   Legacy `style.css:3226` also forces `.productSearch #search{width:230px}`
   which stops the INNER input from growing even when the container does,
   so we override it here to 100%. */
.opt-app .ChartsView .productSearch{ flex:1 1 auto; max-width:none; min-width:280px; }
.opt-app .ChartsView .productSearch #search{ width:100% !important; }

/* Select-type filter items (e.g. Attributes templates) — the blade sets
   inline `min-width:240px` which stops them growing into the space next
   to the Submit button. Let them flex-grow like .productSearch so no
   dead space is left when the parent flex row has extra room. */
.opt-app .ChartsView .datebar .list-filter-item.fd3:has(> select){
    flex:1 1 240px !important;
    min-width:240px !important;
    max-width:380px;
}

/* Error state on a Charts filter item — when Submit is pressed with the
   required search box empty, the JS marks the wrapper with `.is-err` and
   these rules paint the input red + label red. Mirrors the existing
   ReportView error styling for visual consistency. Also covers Select2
   wrappers used by the .select2-search dropdowns (Rules, Categories,
   Attributes). Higher-specificity chain via `html body` needed to beat
   the v2 canonical Select2 skin further up in the file. */
.opt-app .ChartsView .datebar .list-filter-item.is-err .inpG,
.opt-app .ChartsView .datebar .list-filter-item.is-err input[type="text"],
.opt-app .ChartsView .datebar .list-filter-item.is-err input[type="search"],
.opt-app .ChartsView .datebar .list-filter-item.is-err select,
html body .opt-app .ChartsView .datebar .list-filter-item.is-err .select2-container .select2-selection,
html body .opt-app .ChartsView .datebar .list-filter-item.is-err .select2-container--default .select2-selection,
html body .opt-app .ChartsView .datebar .list-filter-item.is-err .select2-container--default .select2-selection--single,
html body .opt-app .ChartsView .datebar .list-filter-item.is-err .select2-container--default .select2-selection--multiple{
    border-color:#D3453F !important;
    background:#FBE9E8 !important;
    background-color:#FBE9E8 !important;
}
.opt-app .ChartsView .datebar .list-filter-item.is-err > label{ color:#D3453F !important; }
.opt-app .ChartsView .datebar .list-filter-item.is-err .inpG:focus,
.opt-app .ChartsView .datebar .list-filter-item.is-err input:focus,
.opt-app .ChartsView .datebar .list-filter-item.is-err select:focus,
html body .opt-app .ChartsView .datebar .list-filter-item.is-err .select2-container--focus .select2-selection,
html body .opt-app .ChartsView .datebar .list-filter-item.is-err .select2-container--open .select2-selection{
    border-color:#D3453F !important;
    box-shadow:0 0 0 3px rgba(211,69,63,0.18) !important;
}
/* Also color the placeholder text and dropdown arrow red so the whole
   field visually reads "invalid" not "focused". */
html body .opt-app .ChartsView .datebar .list-filter-item.is-err .select2-selection__placeholder,
html body .opt-app .ChartsView .datebar .list-filter-item.is-err .select2-selection__rendered{
    color:#D3453F !important;
}
html body .opt-app .ChartsView .datebar .list-filter-item.is-err .select2-selection__arrow::after{
    filter:hue-rotate(180deg) saturate(2) brightness(0.9);
}

/* Per-metric accent color (left bar) — categories match .kpi2 above. */
.opt-app .ChartsView .pcard.k-views{ --kpi-accent:#F0972B; }
.opt-app .ChartsView .pcard.k-cart { --kpi-accent:#8A93B5; }
.opt-app .ChartsView .pcard.k-fav  { --kpi-accent:#E0575F; }
.opt-app .ChartsView .pcard.k-purch{ --kpi-accent:#4AA3E8; }
.opt-app .ChartsView .pcard.k-turn { --kpi-accent:#1CB8A8; }
.opt-app .ChartsView .pcard.k-eng  { --kpi-accent:#9E9E9E; }
.opt-app .ChartsView .pcard.k-lst  { --kpi-accent:#C8C459; }
.opt-app .ChartsView .pcard.k-ctr  { --kpi-accent:var(--purple); }

/* Chart legend (used by some Chart.js variants — small color chip + label list) */
.opt-app .ChartsView .legend{
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px;
}
.opt-app .ChartsView .legit{
    display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted);
}
.opt-app .ChartsView .legit i{
    width:10px; height:3px; border-radius:2px; flex:0 0 10px;
}

/* 3-col KPI row variant (Categories: views / cart / favorites in one row, then purch / turn / ctr) */
.opt-app .ChartsView .kpirow3{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px;
}
@media (max-width:1000px){ .opt-app .ChartsView .kpirow3{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .opt-app .ChartsView .kpirow3{ grid-template-columns:1fr; } }

/* Rules Groups Performance page:
   - .kpirow3b = 3-col grid for 6 KPIs (views/cart/purch + product-eng/products-eng/variations)
   - .kpipair  = 2-col centered pair for turnover + CTR, capped at 66% desktop width
   - Extra color classes for the metrics unique to this page */
.opt-app .ChartsView .kpirow3b{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px;
}
.opt-app .ChartsView .kpipair{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px;
    max-width:66%; margin-left:auto; margin-right:auto;
}
@media (max-width:1000px){
    .opt-app .ChartsView .kpirow3b{ grid-template-columns:1fr 1fr; }
    .opt-app .ChartsView .kpipair{ max-width:none; }
}
@media (max-width:620px){
    .opt-app .ChartsView .kpirow3b,
    .opt-app .ChartsView .kpipair{ grid-template-columns:1fr; }
}
.opt-app .ChartsView .kpi2.k-eng2{ --kpi-accent:#E0575F; }
.opt-app .ChartsView .kpi2.k-lst2{ --kpi-accent:#1CB8A8; }
.opt-app .ChartsView .kpi2.k-var { --kpi-accent:#C8C459; }
.opt-app .ChartsView .kpi2.k-rgt { --kpi-accent:#9E9E9E; }

/* v2 select styling for datebar (categories, template, rule filters). Uses arrow SVG bg. */
.opt-app .ChartsView .selH{
    width:100%; height:44px; padding:0 36px 0 14px;
    border-radius:var(--r-md); border:1px solid var(--line);
    background:var(--field); font:inherit; font-size:14px; color:var(--ink); outline:none;
    appearance:none; box-sizing:border-box;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center;
}
.opt-app .ChartsView .selH:focus{
    border-color:var(--purple); background-color:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft);
}

/* Empty "pick first" state — shown when a category/product/rule is required but not selected */
.opt-app .ChartsView .pickfirst{
    background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1);
    padding:56px 28px; text-align:center;
}
.opt-app .ChartsView .pickfirst .eic{
    width:56px; height:56px; border-radius:18px;
    background:var(--purple-soft); color:var(--purple);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 15px;
}
.opt-app .ChartsView .pickfirst .eic svg{ width:25px; height:25px; }
.opt-app .ChartsView .pickfirst h3{ font-size:16px; font-weight:600; margin:0 0 7px; color:var(--ink); }
.opt-app .ChartsView .pickfirst p{ font-size:13.5px; color:var(--muted); margin:0 auto; max-width:400px; line-height:1.55; }

/* Landing pages per-token table wrap */
.opt-app .ChartsView .lpwrap{
    margin-top:16px; overflow-x:auto;
    border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--card);
}
.opt-app .ChartsView .lpwrap table{ width:100%; border-collapse:collapse; min-width:430px; font-size:13px; }
.opt-app .ChartsView .lpwrap th{
    text-align:left; padding:10px 14px; background:var(--field);
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
    color:var(--muted); border-bottom:1px solid var(--line);
}
.opt-app .ChartsView .lpwrap td{
    padding:10px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle;
}
.opt-app .ChartsView .lpwrap tr:last-child td{ border-bottom:0; }

@media (max-width:1000px){
    .opt-app .ChartsView .chgrid{ grid-template-columns:1fr; }
    .opt-app .ChartsView .kpirow{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
    .opt-app .ChartsView .kpirow{ grid-template-columns:1fr; }
    .opt-app .ChartsView .datebar{ padding:14px; }
}

/* ============================================================
   Sorting Categories — toggle, checkbox, bulk bar
   Scoped via :has(.slider) so it only styles the slider-markup
   variant (templateCreation) and leaves the global .switch + .track
   toggle (line ~1029) intact for landing pages, customer view etc.
   ============================================================ */
.opt-app .switch:has(> .slider){
    position:relative; display:inline-block; width:38px; height:22px; vertical-align:middle;
}
.opt-app .switch > .slider ~ input,
.opt-app .switch:has(> .slider) input{ opacity:0; width:0; height:0; }
.opt-app .switch .slider{
    position:absolute; inset:0; background:#D8D8DC; border-radius:999px; cursor:pointer;
    transition:background-color .18s ease;
}
.opt-app .switch .slider::before{
    content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
    background:#fff; border-radius:50%; transition:transform .18s ease;
    box-shadow:0 1px 3px rgba(0,0,0,0.18);
}
.opt-app .switch input:checked + .slider{ background:#7B4EF6; }
.opt-app .switch input:checked + .slider::before{ transform:translateX(16px); }
.opt-app .switch input:focus-visible + .slider{ outline:2px solid #7B4EF6; outline-offset:2px; }

.opt-app .chk{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; cursor:pointer; margin:0; vertical-align:middle;
}
.opt-app .chk input{
    position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.opt-app .chk span{
    display:block; width:16px; height:16px; border:1.5px solid var(--line);
    border-radius:4px; background:var(--card); transition:background-color .12s ease, border-color .12s ease;
    position:relative;
}
.opt-app .chk input:checked + span{ background:#7B4EF6; border-color:#7B4EF6; }
.opt-app .chk input:checked + span::after{
    content:''; position:absolute; left:4px; top:1px; width:5px; height:9px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}


.opt-app .bulkbar{
    display:flex; align-items:center; gap:10px; padding:6px 12px;
    background:#F3EEFE; border:1px solid #E1D5FA; border-radius:var(--r-pill);
    margin-left:8px;
}
.opt-app .bulkbar.is-hidden{ display:none; }
.opt-app .bulkbar-count{ font-size:12.5px; color:#5A3EBE; font-weight:600; }
.opt-app .bulkbar .btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px; font-size:12.5px; font-weight:600; border-radius:var(--r-pill);
    border:1px solid transparent; cursor:pointer;
}
.opt-app .bulkbar .btn svg{ width:14px; height:14px; }
.opt-app .bulkbar .bulk-on{ background:#7B4EF6; color:#fff; }
.opt-app .bulkbar .bulk-on:hover{ background:#6A3CE0; }
.opt-app .bulkbar .bulk-off{ background:#fff; color:#5A3EBE; border-color:#D6C6F7; }
.opt-app .bulkbar .bulk-off:hover{ background:#F8F4FF; }

/* ============================================================
   Help / Info side drawer
   ============================================================ */
.opt-app .info,
.opt-app svg.info{
    cursor:pointer; transition:color .15s ease, transform .15s ease;
    color:var(--muted);
}
.opt-app .info:hover,
.opt-app svg.info:hover{ color:var(--ink); transform:translateY(-1px); }

.help-scrim{
    position:fixed; inset:0; background:rgba(15,15,20,0.42);
    -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
    opacity:0; visibility:hidden;
    transition:opacity .32s cubic-bezier(.22,.61,.36,1),
               visibility .32s cubic-bezier(.22,.61,.36,1),
               backdrop-filter .32s ease,
               -webkit-backdrop-filter .32s ease;
    z-index:70;
}
.help-scrim.is-open{
    opacity:1; visibility:visible;
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}

.help-drawer{
    position:fixed; top:0; right:0; height:100vh; width:min(440px, 92vw);
    background:var(--card);
    /* Layered shadow — soft outer + slightly darker near edge = depth */
    box-shadow:-24px 0 60px -8px rgba(0,0,0,0.12),
               -4px 0 12px -2px rgba(0,0,0,0.06);
    border-left:1px solid var(--line);
    /* Slide-in easing: iOS-style cubic-bezier + slightly longer for smoothness */
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.22,.61,.36,1),
               box-shadow .38s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
    z-index:80; display:flex; flex-direction:column;
    font-family:inherit;
}
.help-drawer.is-open{
    transform:translateX(0);
}
/* Content fade-in — kicks in slightly after the drawer slide so the eye
   catches the motion first and the copy fades up smoothly. */
.help-drawer .help-drawer-head,
.help-drawer .help-drawer-body{
    opacity:0; transform:translateY(6px);
    transition:opacity .32s cubic-bezier(.22,.61,.36,1) .08s,
               transform .32s cubic-bezier(.22,.61,.36,1) .08s;
}
.help-drawer.is-open .help-drawer-head,
.help-drawer.is-open .help-drawer-body{
    opacity:1; transform:translateY(0);
}
.help-drawer .help-drawer-body{
    transition-delay:.14s;
}
@media (prefers-reduced-motion:reduce){
    .help-scrim, .help-drawer,
    .help-drawer .help-drawer-head, .help-drawer .help-drawer-body{
        transition-duration:.001s !important;
    }
}

.help-drawer-head{
    padding:20px 24px 14px; border-bottom:1px solid var(--line-soft);
    position:relative; flex:0 0 auto;
}
.help-drawer-eyebrow{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px;
    color:var(--muted); margin-bottom:4px;
    display:flex; align-items:center; gap:8px;
}
.help-drawer-editbtn{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; padding:0;
    background:transparent; border:0; border-radius:var(--r-sm);
    color:var(--muted); cursor:pointer;
}
.help-drawer-editbtn svg{ width:14px; height:14px; }
.help-drawer-editbtn:hover{ color:var(--ink); background:var(--field); }
.help-drawer-title{
    font-size:18px; font-weight:700; color:var(--ink); margin:0; padding-right:32px;
    line-height:1.35;
}
.help-drawer-close{
    position:absolute; top:16px; right:16px; width:32px; height:32px;
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
    color:var(--muted); cursor:pointer;
}
.help-drawer-close svg{ width:16px; height:16px; }
.help-drawer-close:hover{ color:var(--ink); background:var(--field); }

.help-drawer-body{
    flex:1 1 auto; overflow:auto; padding:20px 24px; font-size:14px; color:var(--ink);
    line-height:1.6;
}
.help-drawer-body p{ margin:0 0 12px; }
.help-drawer-body p:last-child{ margin-bottom:0; }

.help-drawer-loading{ padding:32px 0; text-align:center; color:var(--muted); }
.help-drawer-loading svg{ width:22px; height:22px; }
.help-drawer-loading .spin{ animation:helpSpin 0.9s linear infinite; }
@keyframes helpSpin { to { transform:rotate(360deg); } }

.help-drawer-empty{ color:var(--muted); font-style:italic; }
.help-drawer-empty p{ margin-bottom:14px; }

.help-drawer-error p{ color:#b03030; }

/* Inline editor inside the drawer (super admin) */
.help-drawer-edit[data-help-state="edit"]{
    display:flex; flex-direction:column; gap:6px;
}
.help-drawer-locale-note{
    font-size:11px; font-weight:700; letter-spacing:0.8px;
    text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.help-drawer-lbl{
    font-size:11.5px; color:var(--muted); font-weight:500; margin-top:6px;
}
.help-drawer-titlein,
.help-drawer-textarea{
    display:block; width:100%; box-sizing:border-box;
    padding:8px 10px; font-size:14px; color:var(--ink); font-family:inherit;
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
    line-height:1.55;
}
.help-drawer-titlein:focus,
.help-drawer-textarea:focus{ outline:none; border-color:var(--ink); }
.help-drawer-textarea{ min-height:180px; resize:vertical; }
.help-drawer-actions{
    display:flex; gap:8px; justify-content:flex-end; margin-top:12px;
    padding-top:12px; border-top:1px solid var(--line-soft);
}
.help-drawer-cancel,
.help-drawer-save{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
    border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card);
    color:var(--ink);
}
.help-drawer-save{ background:var(--ink); color:#fff; border-color:var(--ink); }
.help-drawer-save svg{ width:14px; height:14px; }
.help-drawer-save.is-loading{ opacity:0.6; pointer-events:none; }
.help-drawer-cancel:hover{ background:var(--field); }

/* No overflow lock on body — the scrim blocks pointer events and prevents layout shift from disappearing scrollbar. */

/* ============================================================
   Help Settings tab (dictionary editor) — single-column with a
   language-pill toolbar at the top. Each entry has all its locale
   textareas rendered but only one is visible at a time (via [hidden]
   attribute toggled by the picker). Scales to N languages without
   consuming horizontal space.
   ============================================================ */
.opt-app .help-settings{
    padding:24px 26px;
}
/* Toolbar: intro on the left, language pill picker on the right. Sticky
   so the picker stays reachable while scrolling long lists of entries. */
.opt-app .help-settings .help-toolbar{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    padding:0 0 18px; margin-bottom:22px;
    border-bottom:1px solid var(--line-soft);
    position:sticky; top:0; background:var(--card); z-index:5;
}
.opt-app .help-settings .help-toolbar-hint{
    flex:1 1 260px; min-width:0;
    font-size:12.5px; color:var(--muted); line-height:1.55;
}
/* Language picker — rounded pill segment, ONE active */
.opt-app .help-settings .help-lang-picker{
    display:inline-flex; align-items:center; gap:2px;
    padding:3px; border-radius:var(--r-pill);
    background:var(--field); border:1px solid var(--line);
    flex:0 0 auto; max-width:100%; overflow-x:auto;
    scrollbar-width:none;
}
.opt-app .help-settings .help-lang-picker::-webkit-scrollbar{ display:none; }
.opt-app .help-settings .help-lang-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:0 14px; height:30px; min-width:44px;
    border:0; background:transparent;
    color:var(--muted); font:inherit; font-size:12px; font-weight:700;
    letter-spacing:1px; text-transform:uppercase;
    border-radius:var(--r-pill); cursor:pointer;
    transition:background-color .15s ease, color .15s ease;
    flex:0 0 auto;
}
.opt-app .help-settings .help-lang-btn:hover{ color:var(--ink); }
.opt-app .help-settings .help-lang-btn.is-on{
    background:var(--purple); color:#fff;
    box-shadow:0 1px 3px rgba(140,60,250,0.32);
}

.opt-app .help-settings .help-group{
    margin-bottom:28px;
}
.opt-app .help-settings .help-group:last-child{ margin-bottom:0; }
.opt-app .help-settings .help-group-title{
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
    color:var(--faint); margin:0 0 14px;
}
.opt-app .help-settings .help-entry{
    padding:18px 0; border-top:1px solid var(--line-soft);
}
.opt-app .help-settings .help-group .help-entry:first-of-type{ border-top:0; padding-top:0; }
.opt-app .help-settings .help-entry-head{
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
    flex-wrap:wrap;
}
.opt-app .help-settings .help-label{
    font-size:14px; font-weight:600; color:var(--ink);
    min-width:0; word-break:break-word;
}
.opt-app .help-settings .help-key{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:10.5px; color:var(--faint); margin-left:auto;
    white-space:nowrap;
}

/* Slot that holds all locale textareas — only the one matching the active
   language is visible. The rest keep [hidden] so their values still submit. */
.opt-app .help-settings .help-locale-slot{
    display:block; min-width:0;
}
.opt-app .help-settings .help-textarea{
    display:block; width:100%; box-sizing:border-box;
    padding:11px 13px; font-size:13.5px; color:var(--ink);
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
    font-family:inherit; line-height:1.6;
    resize:vertical; min-height:96px; max-height:260px;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.opt-app .help-settings .help-textarea:focus{
    outline:none; border-color:var(--purple); background:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft);
}
.opt-app .help-settings .help-textarea::placeholder{ color:var(--faint); }
.opt-app .help-settings .help-textarea[hidden]{ display:none !important; }

/* =====================================================================
   Imports listing — detail modal (imp-*)
   ===================================================================== */
/* Override the unscoped `.vmodal .vbody{ padding:2px 0 10px }` above so the
   imports modal gets proper breathing room like the rest of the v2 modals. */
#impModal.vmodal .vbody{ padding:22px 26px 8px !important; }
#impModal.vmodal .vhead{ padding:20px 26px 14px; border-bottom:1px solid var(--line-soft); }
#impModal.vmodal .vfoot{ padding:16px 26px; }

.opt-app .imp-dl{
    margin:0; padding:0;
    display:grid;
    grid-template-columns:130px 1fr;
    row-gap:2px; column-gap:22px;
    align-items:start;
}
.opt-app .imp-dl > dt{
    padding:16px 0;
    color:var(--muted); font-size:11.5px; font-weight:700;
    letter-spacing:0.7px; text-transform:uppercase;
    border-top:1px solid var(--line-soft);
    min-width:0;
    align-self:start;
}
.opt-app .imp-dl > dd{
    padding:16px 0;
    margin:0;
    color:var(--ink); font-size:13.5px; font-weight:500;
    border-top:1px solid var(--line-soft);
    min-width:0;
    word-break:break-word;
}
/* First row: no top border so the list starts flush with the modal body. */
.opt-app .imp-dl > dt:first-of-type,
.opt-app .imp-dl > dd:first-of-type{ border-top:0; padding-top:2px; }
.opt-app .imp-dl > dt:last-of-type,
.opt-app .imp-dl > dd:last-of-type{ padding-bottom:2px; }

.opt-app .imp-val{
    display:inline-block;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    font-weight:600;
}
.opt-app .imp-empty{ color:var(--faint); }

/* Fields row — each column name shown as a compact chip so the reader
   can scan a wide list at a glance instead of a numbered dump. */
.opt-app .imp-chips{
    display:flex; flex-wrap:wrap; gap:6px;
    max-height:260px; overflow-y:auto;
    padding:2px 2px 2px 0;
}
.opt-app .imp-chip{
    display:inline-flex; align-items:center;
    padding:5px 11px;
    border-radius:var(--r-pill);
    background:var(--purple-soft); color:var(--purple);
    border:1px solid var(--purple-line);
    font-size:12px; font-weight:600;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    letter-spacing:0;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:620px){
    #impModal.vmodal .vbody{ padding:16px 18px 6px !important; }
    #impModal.vmodal .vhead{ padding:16px 18px 12px; }
    #impModal.vmodal .vfoot{ padding:12px 18px; }
    .opt-app .imp-dl{ grid-template-columns:1fr; }
    .opt-app .imp-dl > dt{ padding:12px 0 2px; border-top:1px solid var(--line-soft); }
    .opt-app .imp-dl > dd{ padding:0 0 12px; border-top:0; }
    .opt-app .imp-dl > dt:first-of-type{ border-top:0; padding-top:0; }
}

/* =====================================================================
   Customer view — Shop card (Sync tab)
   ===================================================================== */
/* The shop card wraps around each eshop the customer owns. Layout uses
   legacy Bootstrap row/col-xl-5/col-xl-7 so we style children explicitly
   without touching the grid.

   Fixes requested by the user:
   - Round Sync button (pill, purple) with proper spacing
   - Round Delete button (icon, red hover)
   - Consistent spacing between Sync + Delete + Active switch
   - Avatar circle sized right so the label/inputs above it breathe */

/* --- Shop card container --- */
.opt-app .shop-card{
    /* inline styles cover border/radius/bg/shadow/padding. No hover shadow/lift:
       the card is a form, not a clickable tile. */
    transition:none;
}

/* Force side-by-side layout at medium viewports and up (768px+). Bootstrap's
   `col-xl-*` only becomes horizontal at 1200px+, which meant the eshop card
   stacked vertically on standard laptop screens — the user's shop details
   ended up scrolled below the fold. This override brings both columns onto
   the same row at md/lg viewports. */
@media (min-width:768px){
    .opt-app .shop-card > .row > .col-xl-5{
        flex:0 0 auto; width:41.6666666667%; max-width:41.6666666667%;
    }
    .opt-app .shop-card > .row > .col-xl-7{
        flex:0 0 auto; width:58.3333333333%; max-width:58.3333333333%;
    }
}

/* --- Shop avatar (rounded store icon at top) --- */
.opt-app .shop-card .avatar-sm{
    width:52px; height:52px;
    display:flex; align-items:center; justify-content:center;
    margin:4px auto 12px;
}
.opt-app .shop-card .avatar-sm .avatar-title{
    width:52px !important; height:52px !important;
    background:var(--purple-soft) !important;
    color:var(--purple) !important;
    border-radius:50% !important;
    display:flex; align-items:center; justify-content:center;
    font-size:22px !important;
}
.opt-app .shop-card .avatar-sm .avatar-title i{ font-size:22px; }

/* --- Shop name input --- */
.opt-app .shop-card h5{ margin:0 0 12px; }
.opt-app .shop-card h5 input.form-control{
    text-align:center;
    font-size:15px; font-weight:600;
    height:42px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field);
    padding:0 14px; color:var(--ink);
    outline:none; box-shadow:none;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.opt-app .shop-card h5 input.form-control:focus{
    border-color:var(--purple); background:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft);
}
.opt-app .shop-card h5 span{ font-size:15px; font-weight:600; color:var(--ink); }

/* --- Action row (Sync + Delete side-by-side) --- */
.opt-app .shop-card .d-flex.justify-content-between{
    gap:10px !important;
    justify-content:center !important;
    margin-bottom:14px !important;
}

/* --- Sync button — round pill, purple filled --- */
.opt-app .shop-card .sync-data{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    gap:8px !important;
    height:40px !important; min-height:40px !important; padding:0 20px !important;
    border-radius:var(--r-pill) !important;
    background:var(--purple) !important; background-color:var(--purple) !important;
    border:1px solid var(--purple) !important;
    color:#fff !important;
    font-size:13px !important; font-weight:600 !important;
    text-decoration:none !important;
    cursor:pointer !important;
    box-shadow:none !important;
    transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
    letter-spacing:0 !important;
    white-space:nowrap;
    box-sizing:border-box;
}
.opt-app .shop-card .sync-data:hover{
    background:var(--purple-hi) !important; background-color:var(--purple-hi) !important;
    border-color:var(--purple-hi) !important;
    color:#fff !important;
    transform:translateY(-1px);
}
.opt-app .shop-card .sync-data .material-symbols-outlined{
    color:#fff !important; font-size:17px !important;
    line-height:1 !important; margin:0 !important; padding:0 !important;
}
.opt-app .shop-card .sync-data.w-100{ width:100% !important; }

/* --- Delete eshop button — round icon --- */
.opt-app .shop-card .delete-eshop,
.opt-app .shop-card .optisleek-delete-button.delete-eshop{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:40px !important; height:40px !important; min-height:40px !important;
    padding:0 !important;
    border-radius:50% !important;
    background:var(--card) !important; background-color:var(--card) !important;
    border:1px solid var(--line) !important;
    color:var(--muted) !important;
    cursor:pointer !important;
    text-decoration:none !important;
    box-shadow:none !important;
    transition:background-color .15s ease, border-color .15s ease, color .15s ease;
    flex:0 0 40px;
    box-sizing:border-box;
}
.opt-app .shop-card .delete-eshop:hover,
.opt-app .shop-card .optisleek-delete-button.delete-eshop:hover{
    background:#FBE9E8 !important; background-color:#FBE9E8 !important;
    border-color:#F2C7C5 !important;
    color:#D3453F !important;
}
.opt-app .shop-card .delete-eshop .material-symbols-outlined{
    color:currentColor !important; font-size:18px !important;
    line-height:1 !important; margin:0 !important; padding:0 !important;
}

/* --- Active toggle switch (Bootstrap form-switch).
       Rely on Bootstrap's default knob SVG + `background-position` transition
       (unchecked = left, checked = right). Only override colors and border
       radius; do NOT touch background-image so the knob renders correctly. */
.opt-app .shop-card .form-check.form-switch{
    display:flex !important; align-items:center; justify-content:center;
    gap:10px; padding:0; margin:0 auto 8px;
    min-height:26px;
}
.opt-app .shop-card .form-check.form-switch .form-check-input{
    width:42px !important; height:22px !important;
    margin:0 !important;
    border:1px solid var(--line) !important;
    background-color:#DDDCD7 !important;
    border-radius:22px !important;
    cursor:pointer; flex:0 0 42px;
    box-shadow:none !important;
    /* Bootstrap 5's knob (a dark circle) as a white one so it contrasts on
       both light idle bg and purple checked bg. */
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-position:left center !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
    transition:background-position .15s ease, background-color .15s ease, border-color .15s ease !important;
}
.opt-app .shop-card .form-check.form-switch .form-check-input:checked{
    background-color:var(--purple) !important;
    border-color:var(--purple) !important;
    background-position:right center !important;
}
.opt-app .shop-card .form-check.form-switch .form-check-input:focus{
    outline:none !important;
    box-shadow:0 0 0 3px var(--purple-soft) !important;
    border-color:var(--purple-line) !important;
}
.opt-app .shop-card .form-check.form-switch .form-check-label{
    font-size:12.5px !important; font-weight:600 !important; color:var(--ink) !important;
    margin:0 !important; padding:0 !important; cursor:pointer;
}

/* --- Shop metadata (right column) --- */
.opt-app .shop-card .col-xl-7 .p-4{
    padding:4px 8px !important;
}
.opt-app .shop-card .col-xl-7 p.text-muted{
    color:var(--muted) !important; font-size:11.5px !important;
    text-transform:uppercase; letter-spacing:0.6px; font-weight:700;
    margin:0 0 4px !important;
}
.opt-app .shop-card .col-xl-7 h5{
    font-size:15px !important; font-weight:600; color:var(--ink); margin:0 0 14px;
}
.opt-app .shop-card .col-xl-7 .card-title-desc input.form-control,
.opt-app .shop-card .col-xl-7 .card-title-desc select.form-select{
    width:100%; height:42px; border-radius:var(--r-md);
    border:1px solid var(--line); background:var(--field);
    padding:0 14px; font-size:13.5px; color:var(--ink);
    outline:none; box-shadow:none; margin-bottom:8px;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.opt-app .shop-card .col-xl-7 .card-title-desc input.form-control:focus,
.opt-app .shop-card .col-xl-7 .card-title-desc select.form-select:focus{
    border-color:var(--purple); background:var(--card);
    box-shadow:0 0 0 3px var(--purple-soft);
}
.opt-app .shop-card .col-xl-7 .card-title-desc > span{
    font-size:13.5px; color:var(--ink); display:block;
}

/* --- Mobile: stack shop-card columns --- */
@media (max-width:900px){
    .opt-app .shop-card .d-flex.justify-content-between{
        flex-direction:row; flex-wrap:wrap;
    }
    .opt-app .shop-card .col-xl-7 .p-4{ padding:16px 4px 0 !important; }
}

/* =====================================================================
   Chart info button + popup (chart-info-popup.js).
   Adds a small circular "?" button to every chart card that opens a
   modal explaining the chart and showing quick stats.
   ===================================================================== */
.chart-info-btn{
    width:30px; height:30px;
    border-radius:50%;
    border:1px solid var(--purple-line, #D3CDF6);
    background:var(--purple-soft, #EFECFE);
    color:var(--purple, #6C5CE7);
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer;
    padding:0; margin-left:auto;
    flex:0 0 30px;
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.chart-info-btn:hover,
.chart-info-btn:focus-visible{
    background:var(--purple, #6C5CE7);
    color:#fff;
    border-color:var(--purple, #6C5CE7);
    transform:scale(1.08);
    box-shadow:0 4px 12px rgba(108, 92, 231, 0.28);
    outline:none;
}
.chart-info-btn svg{ width:16px; height:16px; }

.opt-app .chartcard .ch-head{ align-items:center; }
.opt-app .chartcard .ch-head > *:first-child{ flex:1 1 auto; min-width:0; }
.opt-app .ChartsView .chhead .chart-info-btn{ margin-left:12px; flex:0 0 28px; }
.chart-info-btn.chart-info-btn--pinned{
    position:absolute;
    top:14px; right:14px;
    z-index:2;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(4px);
}
.chart-info-btn.chart-info-btn--pinned:hover,
.chart-info-btn.chart-info-btn--pinned:focus-visible{
    background:var(--purple, #6C5CE7);
    color:#fff;
}

/* Popup + scrim */
.chart-info-scrim{
    position:fixed; inset:0;
    background:rgba(15,17,24,0.45);
    backdrop-filter:blur(2px);
    opacity:0; visibility:hidden;
    transition:opacity .18s ease, visibility 0s linear .18s;
    z-index:10040;
}
.chart-info-scrim.is-open{
    opacity:1; visibility:visible;
    transition:opacity .18s ease;
}
.chart-info-popup{
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%, -46%) scale(0.98);
    width:min(520px, calc(100vw - 32px));
    max-height:min(80vh, 640px);
    background:var(--card, #fff);
    border-radius:16px;
    box-shadow:0 24px 64px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.08);
    display:flex; flex-direction:column;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.2), visibility 0s linear .22s;
    z-index:10050;
    overflow:hidden;
    font-family:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.chart-info-popup.is-open{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translate(-50%, -50%) scale(1);
    transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.chart-info-popup .cip-head{
    display:flex; align-items:center; gap:12px;
    padding:18px 20px 14px;
    border-bottom:1px solid var(--line-soft, #F1F2F6);
}
.chart-info-popup .cip-title-wrap{
    display:flex; align-items:center; gap:12px;
    flex:1 1 auto; min-width:0;
}
.chart-info-popup .cip-ico{
    width:36px; height:36px;
    border-radius:10px;
    background:var(--purple-soft, #EFECFE);
    color:var(--purple, #6C5CE7);
    display:flex; align-items:center; justify-content:center;
    flex:0 0 36px;
}
.chart-info-popup .cip-ico svg{ width:18px; height:18px; }
.chart-info-popup .cip-title{
    font-size:16px; font-weight:600; letter-spacing:-0.2px;
    color:var(--ink, #1F1F2C); margin:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chart-info-popup .cip-close{
    width:32px; height:32px;
    border-radius:8px;
    border:none; background:transparent;
    color:var(--muted, #6B7280);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
    flex:0 0 32px;
}
.chart-info-popup .cip-close:hover{
    background:var(--line-soft, #F1F2F6);
    color:var(--ink, #1F1F2C);
}
.chart-info-popup .cip-close svg{ width:18px; height:18px; }
.chart-info-popup .cip-body{
    padding:16px 20px 20px;
    overflow-y:auto;
}
/* Insight (AI response) */
.chart-info-popup .cip-insight{
    color:var(--ink-soft, #3F4054);
    font-size:14px; line-height:1.6;
}
.chart-info-popup .cip-insight p{ margin:0 0 10px; }
.chart-info-popup .cip-insight p:last-child{ margin-bottom:0; }
.chart-info-popup .cip-insight ul,
.chart-info-popup .cip-insight ol{
    margin:8px 0 12px; padding:0 0 0 20px;
}
.chart-info-popup .cip-insight li{ margin:0 0 6px; }
.chart-info-popup .cip-insight li:last-child{ margin-bottom:0; }
.chart-info-popup .cip-insight strong,
.chart-info-popup .cip-insight b{ color:var(--ink, #1F1F2C); font-weight:600; }
.chart-info-popup .cip-footnote{
    margin-top:14px; padding-top:12px;
    border-top:1px dashed var(--line-soft, #F1F2F6);
    font-size:11.5px; color:var(--faint, #9CA0B0);
    font-style:italic;
}

/* Loading state */
.chart-info-popup .cip-loading{
    display:flex; flex-direction:column; align-items:center;
    padding:24px 12px 16px;
    text-align:center;
}
.chart-info-popup .cip-spinner{
    width:36px; height:36px;
    border:3px solid var(--line-soft, #F1F2F6);
    border-top-color:var(--purple, #6C5CE7);
    border-radius:50%;
    animation:cipSpin 0.8s linear infinite;
    margin-bottom:14px;
}
@keyframes cipSpin{ to { transform:rotate(360deg); } }
.chart-info-popup .cip-loading-text{
    font-size:14px; font-weight:600; color:var(--ink, #1F1F2C);
    margin-bottom:4px;
}
.chart-info-popup .cip-loading-sub{
    font-size:12px; color:var(--muted, #6B7280);
}

/* Error state */
.chart-info-popup .cip-error{
    padding:16px;
    background:#FBE9E8;
    border:1px solid #F3C6C4;
    border-radius:10px;
    color:#8A2A2A;
}
.chart-info-popup .cip-error-title{
    font-size:13.5px; font-weight:600; margin-bottom:4px;
}
.chart-info-popup .cip-error-msg{
    font-size:12.5px; opacity:0.9;
}

@media (max-width:520px){
    .chart-info-popup .cip-head{ padding:14px 16px 12px; }
    .chart-info-popup .cip-body{ padding:14px 16px 18px; }
    .chart-info-popup .cip-title{ font-size:15px; }
}



/* ==================================================================
   Required-field error state (.emptyInput)
   checkRequiredFields() (custom.js) and the other validators flag empty
   fields with .emptyInput. style.css paints it with a bare
   `.emptyInput{ border…!important }` (specificity 0,1,0), which loses to
   every v2 skin that also sets its border with !important — the Select2
   trigger, the variables-modal pseudo-select, the export tag rows — so in
   v2 the flagged field never turned red. Each rule below outranks the skin
   it targets; keep the block at the end of the file so ties also win.
   ================================================================== */
.opt-app input.emptyInput,
.opt-app select.emptyInput,
.opt-app textarea.emptyInput,
.opt-app .v2-export-tags .export-tags-rows input.emptyInput,
#exportModal.v2-modal .tag-variable-rules-row input.emptyInput,
#exportModal.v2-modal .tag-variable-advanced-rules-row input.emptyInput,
#exportModal.v2-modal .tag-attribute-variable-rules-row input.emptyInput,
.opt-app .RulesView .value-select-container > input.form-control.emptyInput{
    border-color:var(--red) !important;
    background-color:var(--red-soft) !important;
}

/* Select2 — the flag lands on the hidden native <select>, on the
   .select2-selection itself, or (export builder) on the .select2 container. */
.opt-app select.emptyInput + .select2-container--default .select2-selection,
.opt-app .RulesView select.emptyInput + .select2-container--default .select2-selection,
.opt-app .select2-container--default .select2-selection.emptyInput,
.opt-app .select2-container--default.emptyInput .select2-selection{
    border-color:var(--red) !important;
    background:var(--red-soft) !important;
}
.opt-app .select2-container.emptyInput{ border:0 !important; }

/* Legacy pseudo-select (updateCustomSelect / initFormsSelects) — the flag is
   on .form-select-container. In the variables modal that box carries the
   border; in the rules builder the inner .select-styled does. */
.vform-modal .form-select-container.emptyInput{
    border-color:var(--red) !important;
    background:var(--red-soft) !important;
}
.opt-app .RulesView .form-select-container.emptyInput{ border:0 !important; }
.opt-app .RulesView .form-select-container.emptyInput .select-styled{
    border-color:var(--red); background:var(--red-soft); color:var(--red);
}

/* Hidden <select> driven by a pill picker (landing pages / exports "List by") */
.opt-app .picker:has(~ select.emptyInput) .pick{
    border-color:var(--red); background:var(--red-soft); color:var(--red);
}

/* Pages with their own validator that marks the field wrapper with .err
   (AI view .fld3, customer creation .ff2, user view .prow): their rules only
   style the native control, not the Select2 trigger / custom multi-picker
   the user actually sees. */
.opt-app .fld3.err .select2-container--default .select2-selection,
.opt-app .ff2.err .select2-container--default .select2-selection,
.opt-app .prow.err .pselMulti{
    border-color:var(--red) !important;
    background:var(--red-soft) !important;
}