/* Trade Nivo premium ads: home page slider, live preview and ad detail page */
.tnad-slider{position:relative;margin:0 auto}
.tnad-track{position:relative;overflow:hidden;border-radius:16px}
.tnad-slides{display:flex;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tnad-slides>*{flex:0 0 100%;min-width:0}
.tnad-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:#15a34a;color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.tnad-slider{container-type:inline-size}
.tnad-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#0d2344;box-shadow:0 6px 18px rgba(2,10,24,.3);cursor:pointer;z-index:3;display:grid;place-items:center;font-size:15px}
.tnad-arrow.prev{left:-18px}.tnad-arrow.next{right:-18px}
.tnad-dots{display:flex;gap:7px;justify-content:center;margin-top:12px}
.tnad-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#c9d5e6;padding:0;cursor:pointer}
.tnad-dots button.on{background:#087df0;width:22px;border-radius:5px}
.tnad-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.tnad-head h2{margin:0;font-size:22px;color:#14233e}
.tnad-head a{font-size:14px;font-weight:800;color:#087df0;text-decoration:none}
.tnad-slider .tnb-wrap{padding:0}
@media(max-width:820px){.tnad-arrow.prev{left:6px}.tnad-arrow.next{right:6px}.tnad-arrow{top:auto;bottom:-6px;transform:none;width:34px;height:34px}}

/* ---------- Ad banner: fixed 1200x280 design, every size in cqw so it scales like a picture ---------- */
.tnb-wrap{container:tnb/inline-size;width:100%;min-width:0;max-width:100%}
.tnb{--side:#0b1f3f;--side2:#0e2a55;--bg:#f3f7fd;--ink:#0b1b36;--hl:#1570ef;--muted:#3d4a60;--box:#ffffff;--boxline:#e3eaf4;--btn:#1570ef;--btnink:#fff;--badge:#16a34a;--stripe:#1570ef;--tag:#f5a524;
  position:relative;display:grid;grid-template-columns:21cqw minmax(0,1fr) 27cqw;aspect-ratio:1200/280;overflow:hidden;border-radius:1.1cqw;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;box-shadow:0 .8cqw 2.4cqw rgba(8,28,58,.12);text-align:left}
.tnb.tnb-t1{background:radial-gradient(rgba(21,112,239,.10) .12cqw,transparent .16cqw) 0 0/1.2cqw 1.2cqw,linear-gradient(110deg,#f7faff,#eef4fc)}
.tnb-hit{position:absolute;inset:0;z-index:1}
.tnb-side{position:relative;background:linear-gradient(160deg,var(--side2),var(--side));color:#fff;padding:1.7cqw 3.4cqw 1.4cqw 1.9cqw;clip-path:polygon(0 0,100% 0,84% 100%,0 100%);display:flex;flex-direction:column;gap:.55cqw}
.tnb-side:after{content:"";position:absolute;top:0;bottom:0;right:0;width:1.4cqw;background:var(--stripe);clip-path:polygon(60% 0,100% 0,0 100%,-40% 100%)}
.tnb-logo{height:4.6cqw;display:flex;align-items:center}
.tnb-logo img{max-height:4.6cqw;max-width:14cqw;object-fit:contain}
.tnb-logo span{width:4.6cqw;height:4.6cqw;border-radius:50%;background:#fff;color:var(--side);display:grid;place-items:center;font-weight:900;font-size:2.2cqw}
.tnb-co{font-size:1.35cqw;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.tnb-tick{color:#3b9cff;font-size:.85em}
.tnb-member{font-size:1.05cqw;color:#dbe6f5;padding-bottom:.7cqw;border-bottom:1px solid rgba(255,255,255,.18)}
.tnb-member i{color:#f5a524}
.tnb-hl{list-style:none;margin:.3cqw 0 0;padding:0;display:grid;gap:.65cqw;font-size:1.05cqw;font-weight:600}
.tnb-hl li{display:flex;gap:.8cqw;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnb-hl i{width:1.6cqw;text-align:center;font-size:1.3cqw;color:#fff}
.tnb-main{position:relative;padding:1.1cqw 1cqw 1.1cqw 2cqw;display:flex;flex-direction:column;justify-content:center;gap:.5cqw;min-width:0}
.tnb-inline-co{display:none;align-items:center;gap:.7cqw;font-size:1.2cqw;font-weight:800}
.tnb-logo-sm img{height:2.4cqw;max-width:8cqw;object-fit:contain;border-radius:.4cqw;background:#fff}
.tnb-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:.5cqw;background:var(--badge);color:#fff;font-size:1.05cqw;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:.45cqw 1cqw;border-radius:.6cqw}
.tnb-title{margin:0;font-size:2.7cqw;line-height:1.04;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.tnb-title span,.tnb-title em{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnb-title em{font-style:normal;color:var(--hl)}
.tnb-title em:empty{display:none}
.tnb-desc{margin:0;font-size:1.12cqw;line-height:1.32;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:52cqw}
.tnb-facts{display:flex;gap:.55cqw}
.tnb-facts>div{display:flex;gap:.55cqw;align-items:center;background:var(--box);border:1px solid var(--boxline);border-radius:.7cqw;padding:.5cqw .7cqw;min-width:0;flex:0 1 auto}
.tnb-facts>div[hidden]{display:none}
.tnb-facts i{font-size:1.6cqw;color:var(--hl)}
.tnb-facts span{display:flex;flex-direction:column;min-width:0}
.tnb-facts small{font-size:.85cqw;color:var(--muted);white-space:nowrap}
.tnb-facts b{font-size:1.08cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.4cqw}
.tnb-flag{width:1.6cqw;height:auto;border-radius:.15cqw}
.tnb-flag[hidden]{display:none}
.tnb-btns{position:relative;z-index:2;display:flex;gap:.8cqw;margin-top:.2cqw}
.tnb-btns a,.tnb-btns button{display:inline-flex;align-items:center;gap:.6cqw;border-radius:.7cqw;font:inherit;font-weight:800;font-size:1.2cqw;padding:.6cqw 1.3cqw;cursor:pointer;text-decoration:none;white-space:nowrap}
.tnb-contact{background:var(--btn);color:var(--btnink)!important;border:0;box-shadow:0 .5cqw 1.2cqw rgba(21,112,239,.25);padding:.6cqw 2cqw!important}
.tnb-save,.tnb-share{background:var(--box);color:var(--ink);border:1px solid var(--boxline)}
.tnb-save.on{color:var(--hl);border-color:var(--hl)}
.tnb-pics{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-width:0;grid-template-rows:1fr 1fr;gap:.5cqw;padding-left:1.1cqw;background:var(--stripe);clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
.tnb-pics img{width:100%;height:100%;object-fit:cover;display:block;min-height:0;min-width:0}
.tnb-pics img:first-child{grid-row:1/3;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.tnb-pics[data-n="1"]{grid-template-columns:minmax(0,1fr)}.tnb-pics[data-n="1"] img{grid-row:1/3}
.tnb-pics[data-n="2"] img:nth-child(2){grid-row:1/3}
.tnb-pics[data-n="0"]{background:linear-gradient(135deg,#d7e3f4,#eef3fa)}
.tnb-tag{position:absolute;top:0;right:0;z-index:2;background:linear-gradient(135deg,#f7b733,var(--tag));color:#1b1300;font-weight:900;font-size:1.3cqw;padding:.6cqw 1.7cqw;border-radius:0 0 0 1.1cqw;display:flex;gap:.5cqw;align-items:center;pointer-events:none}
/* Own ad (link / HTML code) */
.tnb-media,.tnb-media-cap{display:none}
.tnb-mode-media{display:block;background:#0d2344}
.tnb-mode-media>.tnb-side,.tnb-mode-media>.tnb-main,.tnb-mode-media>.tnb-pics{display:none}
.tnb-mode-media .tnb-media{display:block;position:absolute;inset:0}
.tnb-media-el{width:100%;height:100%;border:0;display:block;object-fit:cover;background:#0d2344}
.tnb-media-empty{display:grid;place-items:center;height:100%;color:#9fb3cf;font-size:1.6cqw;font-weight:700}
.tnb-mode-media .tnb-media-cap{display:block;position:absolute;left:1cqw;bottom:1cqw;z-index:2;background:rgba(3,12,28,.72);color:#fff;font-size:1.05cqw;padding:.45cqw .9cqw;border-radius:.5cqw;pointer-events:none}
/* Templates */
.tnb-t2{--bg:linear-gradient(115deg,#081733,#0f2a52 55%,#0a1c3b);--ink:#fff;--hl:#f5b12e;--muted:#c3d1e6;--box:rgba(255,255,255,.07);--boxline:rgba(255,255,255,.16);--btn:linear-gradient(135deg,#f7b733,#f08a14);--btnink:#1b1300;--side:#050f24;--side2:#0a1f45;--stripe:#f5a524}
.tnb-t2 .tnb-save,.tnb-t2 .tnb-share{color:#fff}
.tnb-t3{--bg:linear-gradient(120deg,#e6f2ff,#ffffff 60%);--stripe:#1d9bf0;grid-template-columns:minmax(0,1fr) 34cqw}
.tnb-t3 .tnb-side{display:none}.tnb-t3 .tnb-main{padding-left:3cqw}.tnb-t3 .tnb-inline-co{display:flex}
.tnb-t4{--bg:#0b1a33;--ink:#fff;--hl:#ff9f1c;--muted:#c3d1e6;--box:rgba(255,255,255,.07);--boxline:rgba(255,255,255,.15);--btn:#ff8a00;--btnink:#fff;--stripe:#ff8a00;--badge:#ff8a00;grid-template-columns:minmax(0,1fr) 40cqw}
.tnb-t4 .tnb-side{display:none}.tnb-t4 .tnb-main{padding-left:3cqw}.tnb-t4 .tnb-inline-co{display:flex}
.tnb-t3 .tnb-desc,.tnb-t4 .tnb-desc{-webkit-line-clamp:1}
.tnb-t4 .tnb-save,.tnb-t4 .tnb-share{color:#fff}
.tnb-t4 .tnb-pics{clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}
.tnb-t5{--bg:linear-gradient(115deg,#f3fbf6,#ffffff);--side:#0b3d26;--side2:#11603b;--hl:#16a34a;--btn:#16a34a;--stripe:#22c55e;--badge:#0f8a3e;--boxline:#d8eee0}
/* Photo templates (Steel Blue, Gold, Red Line, Ocean): dark banner, member's first photo as a scene behind the text */
.tnb-scene,.tnb-deco{display:none}
.tnb-t6,.tnb-t7,.tnb-t9,.tnb-t10{--bg:linear-gradient(100deg,#050f22 0%,#081a36 55%,#0a1d3a 100%);--ink:#fff;--muted:#c9d6e8;--box:rgba(5,16,36,.74);--boxline:rgba(255,255,255,.18);--side:#040b18;--side2:#0a1830;--btnink:#fff}
.tnb-t6{--hl:#3d95ff;--btn:#1f7bff;--stripe:#1f7bff}
.tnb-t7{--hl:#ffbd2e;--btn:linear-gradient(135deg,#ffc83d,#f29f00);--btnink:#1b1300;--stripe:#f5a800;--side:#0b0a08;--side2:#1a1712;--bg:linear-gradient(100deg,#0b0a08 0%,#15130f 55%,#1a160e 100%)}
.tnb-t9{--hl:#ff4336;--btn:#e8261c;--stripe:#e8261c;--side:#0d0708;--side2:#1c1012;--bg:linear-gradient(100deg,#0d0708 0%,#170c0e 55%,#1b0f11 100%)}
.tnb-t10{--hl:#2fd6ff;--btn:#13c3ef;--btnink:#032433;--stripe:#13b9e9;--side:#03101d;--side2:#062039;--bg:linear-gradient(100deg,#03101d 0%,#062039 55%,#07284a 100%)}
:is(.tnb-t6,.tnb-t7,.tnb-t9,.tnb-t10) .tnb-save,:is(.tnb-t6,.tnb-t7,.tnb-t9,.tnb-t10) .tnb-share{color:#fff}
:is(.tnb-t6,.tnb-t7,.tnb-t9,.tnb-t10):not(.tnb-mode-media) .tnb-scene{display:block;position:absolute;top:0;bottom:0;left:30cqw;right:24cqw;background:center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 30%,#000 60%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 30%,#000 60%,#000 88%,transparent 100%)}
:is(.tnb-t6,.tnb-t7,.tnb-t9,.tnb-t10) .tnb-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,12,26,.55),rgba(5,12,26,.1) 70%)}
:is(.tnb-t6,.tnb-t7,.tnb-t9,.tnb-t10) .tnb-title,:is(.tnb-t6,.tnb-t7,.tnb-t9,.tnb-t10) .tnb-desc{text-shadow:0 .15cqw .6cqw rgba(0,0,0,.55)}
/* Eco Green: light banner, dotted world map and a recycle mark */
.tnb-t8{--bg:linear-gradient(115deg,#f3fbf5,#ffffff 65%);--side:#094a20;--side2:#128a3b;--hl:#16a34a;--btn:#16a34a;--stripe:#38c95f;--badge:#15943f;--boxline:#d4ecdc}
.tnb-t8:not(.tnb-mode-media) .tnb-deco{display:block;position:absolute;top:4%;bottom:4%;left:34cqw;right:26cqw;pointer-events:none}
.tnb-t8 .tnb-deco:before{content:"";position:absolute;inset:0;background:#7cc796;opacity:.45;-webkit-mask:url(../images/world-dots.svg) center/100% 100% no-repeat;mask:url(../images/world-dots.svg) center/100% 100% no-repeat}
.tnb-t8 .tnb-deco i{position:absolute;right:6cqw;top:50%;transform:translateY(-50%);font-size:12cqw;background:linear-gradient(135deg,#1fb456,#0b6b2c);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
/* Phones: stacked layout (not for the small template thumbnails) */
@container tnb (max-width:620px){
  .tnb:not(.tnb-fixed):not(.tnb-mode-media){display:flex;flex-direction:column;aspect-ratio:auto;border-radius:14px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-side{display:none}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-pics{order:-1;height:150px;clip-path:none;padding:0;gap:4px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-pics img:first-child{clip-path:none}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-main{padding:14px 14px 16px;gap:9px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-inline-co{display:flex;font-size:13px;gap:6px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-logo-sm img{height:22px;max-width:70px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-badge{font-size:11px;padding:4px 9px;border-radius:6px;gap:5px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-title{font-size:22px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-title span,.tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-title em{white-space:normal}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-desc{font-size:13px;max-width:none}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-facts>div{padding:7px 9px;border-radius:8px;gap:7px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-facts i{font-size:17px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-facts small{font-size:10.5px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-facts b{font-size:12.5px;gap:4px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-flag{width:16px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-btns{flex-wrap:wrap;gap:6px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-btns a,.tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-btns button{font-size:13px;padding:9px 12px!important;border-radius:8px;gap:6px}
  .tnb:not(.tnb-fixed):not(.tnb-mode-media) .tnb-tag{font-size:11px;padding:5px 10px;border-radius:0 0 0 10px}
  .tnb.tnb-mode-media:not(.tnb-fixed){border-radius:12px}
  .tnb:not(.tnb-fixed) .tnb-scene,.tnb:not(.tnb-fixed) .tnb-deco{display:none!important}
  /* own ad with a phone version: 4:3 box, phone creative instead of the web one */
  .tnb.tnb-mode-media.tnb-has-m:not(.tnb-fixed){aspect-ratio:4/3}
  .tnb.tnb-has-m:not(.tnb-fixed) .tnb-media-el:not(.tnb-media-m){display:none}
  .tnb.tnb-has-m:not(.tnb-fixed) .tnb-media-el.tnb-media-m{display:block}
  .tnb.tnb-mode-media:not(.tnb-fixed) .tnb-media-cap{font-size:11px;padding:4px 8px;border-radius:6px;left:8px;bottom:8px}
  .tnb.tnb-mode-media:not(.tnb-fixed) .tnb-tag{font-size:11px;padding:5px 10px;border-radius:0 0 0 10px}
}
.tnb-media-el.tnb-media-m{display:none}
/* Website promotion (admin): the banner only - no advertiser line and no "Premium Ad" tag */
.tnb-site .tnb-media-cap,.tnb-site .tnb-tag{display:none!important}

/* ---------- Ad builder (create / edit page) ---------- */
.ab-prev-tabs{display:inline-flex;gap:4px;background:#eef3fa;border-radius:10px;padding:4px;margin-bottom:12px}
.ab-prev-tabs button{border:0;background:transparent;border-radius:8px;padding:7px 13px;font:inherit;font-size:13px;font-weight:800;color:#56627a;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.ab-prev-tabs button.on{background:#fff;color:#087df0;box-shadow:0 2px 6px rgba(9,30,66,.1)}
.ab-prev-body[data-show="web"] .ab-prev-mob,.ab-prev-body[data-show="mobile"] .ab-prev-web{display:none}
.ab-prev-body[data-show="both"] .ab-prev-mob{margin-top:18px}
.ab-prev-mob .ab-prev-head{text-align:center}
.ab-phone{width:300px;max-width:100%;margin:0 auto;background:#0b1424;border-radius:34px;padding:10px 9px 14px;box-shadow:0 14px 34px rgba(4,18,36,.25);box-sizing:border-box}
.ab-phone-bar{height:18px;display:flex;justify-content:center;align-items:center}
.ab-phone-bar span{width:70px;height:6px;border-radius:4px;background:#26324a}
.ab-phone-screen{background:#f4f6fa;border-radius:24px;padding:12px 10px 16px;min-height:360px;box-sizing:border-box}
.ab-phone-title{font-size:15px;font-weight:900;color:#14233e;margin:2px 2px 8px}
.ab{font-family:Inter,Arial,sans-serif;color:#0f1d33}
.ab-grid{display:grid;grid-template-columns:minmax(300px,410px) minmax(0,1fr);gap:16px;align-items:start}
.ab-sec{background:#fff;border:1px solid #e6ecf3;border-radius:12px;padding:14px 16px;margin-bottom:14px}
.ab-sec h3{margin:0 0 10px;font-size:15px}
.ab-sec h3 small{font-weight:500;color:#6d7890;font-size:12px}
.ab label{display:block;font-size:12.5px;font-weight:800;color:#1f2d45;margin-bottom:9px}
.ab label>input:not([type=radio]):not([type=checkbox]),.ab label>select,.ab label>textarea,.ab label>.ab-pair,.ab label>.ab-logo,.ab label>.tncs{margin-top:5px}
.ab label>small.ab-count{display:block}
.ab-full{grid-column:1/-1}
.ab label em{color:#dc2626;font-style:normal}
.ab label small{font-weight:500;color:#6d7890}
.ab input:not([type=radio]):not([type=checkbox]):not([type=file]),.ab select,.ab textarea{width:100%;box-sizing:border-box;border:1px solid #d9e2ee;border-radius:8px;padding:9px 10px;font:inherit;font-size:13.5px;font-weight:400;background:#fff;color:#0f1d33}
.ab textarea{resize:vertical}
.ab-count{text-align:right}
.ab-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ab-2>input{margin-bottom:0}
.ab-2>label{margin-bottom:9px}
.ab-pair{display:flex;gap:6px}.ab-pair input{flex:1 1 55%}.ab-pair select{flex:1 1 45%}
.ab-types{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ab-type{position:relative;display:flex!important;flex-direction:row;gap:10px;min-width:0;align-items:center;border:1px solid #d9e2ee;border-radius:10px;padding:12px!important;cursor:pointer;background:#f8fafc;margin:0!important}
.ab-type input{accent-color:#087df0}
.ab-type i{font-size:18px;color:#087df0}
.ab-type b{display:block;font-size:14px}.ab-type small{display:block}
.ab-type:has(input:checked){border-color:#087df0;background:#f0f7ff;box-shadow:0 0 0 1px #087df0 inset}
.ab-chk{display:flex!important;align-items:center;gap:7px;font-weight:600!important;margin:0!important}
.ab-chk input{width:auto;margin:0}
.ab-logo{display:flex!important;align-items:center;gap:8px}
.ab-logo-box{width:46px;height:46px;border-radius:8px;border:1px solid #e6ecf3;display:grid;place-items:center;overflow:hidden;background:#f8fafc;color:#94a3b8;flex:0 0 46px}
.ab-logo-box img{width:100%;height:100%;object-fit:contain}
.ab-logo input{font-size:12px;min-width:0;flex:1}
.ab-prev-head{margin-bottom:10px;font-size:14px}.ab-prev-head span{color:#6d7890;font-size:12.5px}
.ab-modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ab-mode{display:flex!important;flex-direction:row;align-items:center;gap:7px;border:1px solid #d9e2ee;border-radius:999px;padding:8px 13px!important;cursor:pointer;margin:0!important;font-weight:700!important}
.ab-mode input{accent-color:#087df0;margin:0}
.ab-mode i{color:#087df0}
.ab-mode:has(input:checked){border-color:#087df0;background:#f0f7ff;color:#0b5ed7}
.ab [data-panel]{display:none}
.ab[data-mode="template"] [data-panel="template"],.ab[data-mode="picture"] [data-panel="picture"],.ab[data-mode="link"] [data-panel="link"],.ab[data-mode="html"] [data-panel="html"]{display:block}
.ab-file{display:block;border:1px dashed #b7c6da;border-radius:9px;padding:10px;background:#f8fafc;margin-top:5px}.ab-file input{width:100%;margin:0;font-size:13px}
.ab-cur{color:#16a34a}
.ab-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ab-tpl-name{display:block;padding-top:4px}
.ab-tpl{border:2px solid transparent;border-radius:10px;padding:4px;background:#f3f6fa;cursor:pointer;text-align:center;font:inherit;font-size:12px;font-weight:800;color:#334155;position:relative}
.ab-tpl .tnb{box-shadow:none;pointer-events:none}
.ab-tpl .tnb-btns{visibility:hidden}
.ab-tpl.on{border-color:#087df0;background:#eaf3ff;color:#087df0}
.ab-tpl.on:after{content:"\2713";position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#087df0;color:#fff;display:grid;place-items:center;font-size:12px}
.ab-hint{display:block;color:#6d7890;font-size:12px;line-height:1.45}
#abMediaState.ok{color:#16a34a}#abMediaState.bad{color:#dc2626}
#abHtml{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.ab-bottom{align-items:start}
.ab-imgs{display:flex;gap:8px;flex-wrap:wrap}
.ab-img{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:#eef3fa}
.ab-img img{width:100%;height:100%;object-fit:cover}
.ab-img label{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;display:grid!important;place-items:center;cursor:pointer;font-size:13px;margin:0!important;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.ab-img input{display:none}
.ab-img.off{opacity:.3}
.ab-add{width:72px;height:72px;border:1px dashed #b7c6da;border-radius:8px;display:grid!important;place-items:center;text-align:center;font-size:11px!important;cursor:pointer;margin:0!important}
.ab-add i{display:block;font-size:18px;color:#087df0}
.ab-add input{display:none}
.ab-tip{margin-top:10px;background:#fff8e6;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#7a5200}
.ab-tip i{color:#f59e0b;margin-right:4px}
.ab-pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin-bottom:12px}
.ab-pkg{position:relative;display:flex!important;flex-direction:row!important;gap:6px;align-items:center;justify-content:center;border:1px solid #d9e2ee;border-radius:9px;padding:10px 8px!important;cursor:pointer;margin:0!important;font-weight:700!important;text-align:center}
.ab-pkg input{accent-color:#087df0;margin:0}
.ab-pkg:has(input:checked){border-color:#087df0;background:#f0f7ff;color:#0b5ed7}
.ab-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ab-btn{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:11px 18px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;text-decoration:none;border:1px solid #bcd9fb;background:#fff;color:#087df0}
.ab-btn.primary{background:#087df0;border-color:#087df0;color:#fff}
.ab-btn.danger{border-color:#fecaca;color:#dc2626}
.ab [data-when]{display:none}.ab[data-type="buy"] [data-when="buy"],.ab[data-type="sell"] [data-when="sell"]{display:inline}
@media(max-width:1180px){.ab-grid{grid-template-columns:1fr}}
@media(max-width:640px){.ab-2,.ab-3,.ab-types{grid-template-columns:1fr}}