/* ManziNetworks Free Tools: shared styles for /tools/ and every tool page.
   Uses the same colour and spacing tokens as site.css. */

/* ---------- Page hero ---------- */
.tl-hero{position:relative;isolation:isolate;padding-block:var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.tl-hero::before{content:"";position:absolute;top:-6rem;right:-10vw;width:min(60vw,52rem);height:32rem;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 50% 50% at 60% 45%,rgba(75,59,255,.42),rgba(75,59,255,0) 100%),radial-gradient(ellipse 30% 25% at 30% 80%,rgba(255,107,26,.14),rgba(255,107,26,0) 100%)}
.tl-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);max-width:16ch}
.tl-hero .lede{font-size:clamp(1.02rem,1.4vw,1.2rem)}
.tl-crumb{font-size:.9rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.tl-crumb a{color:var(--muted);text-decoration:none}
.tl-crumb a:hover{color:var(--text)}
.tl-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s1)}
.tl-badge{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.85rem;color:var(--muted)}
.tl-badge::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--amber)}

/* ---------- Hub: filter + groups + cards ---------- */
.tl-filter{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.tl-filter button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.45rem 1rem;font:600 .92rem var(--body);cursor:pointer}
.tl-filter button:hover{color:var(--text)}
.tl-filter button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.tl-group{padding-block:var(--s4) 0}
.tl-group > h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.4rem}
.tl-group > p{color:var(--muted);margin-bottom:var(--s3);max-width:44rem}
.tl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.tl-related .tl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tl-card{position:relative;height:100%;background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:var(--s3);display:flex;flex-direction:column;gap:.7rem;min-width:0;transition:border-color .15s,transform .15s}
.tl-card:hover{border-color:var(--amber);transform:translateY(-2px)}
.tl-icon{width:2.75rem;height:2.75rem;border-radius:12px;background:var(--ground);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--amber)}
.tl-icon svg{width:1.4rem;height:1.4rem}
.tl-card h3{font-family:var(--display);font-weight:800;font-stretch:108%;font-size:1.3rem;line-height:1.15;letter-spacing:-.01em}
.tl-card h3 a{text-decoration:none}
.tl-card h3 a::after{content:"";position:absolute;inset:0;border-radius:16px}
.tl-card p{color:var(--muted);font-size:.95rem}
.tl-go{margin-top:auto;font-weight:600;font-size:.95rem;text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:.3em}
.tl-tag{position:absolute;top:var(--s3);right:var(--s3);font-size:.75rem;font-weight:600;border-radius:999px;padding:.1rem .55rem;background:var(--amber);color:var(--on-amber)}
.tl-tag.pop{background:var(--violet);color:#fff}

/* ---------- Tool layout ---------- */
.tl-tool{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s4);align-items:start}
.tl-panel{background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.tl-panel h2{font-family:var(--body);font-weight:600;font-stretch:100%;letter-spacing:0;font-size:1.15rem;line-height:1.3}
.tl-form{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.tl-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.tl-hint{font-size:.82rem;color:var(--muted)}
.field label .req{color:var(--amber)}
.field label .opt{color:var(--muted);font-weight:400;opacity:.8}
.tl-presets{display:flex;flex-wrap:wrap;gap:.4rem}
.tl-presets button{background:var(--ground);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:.4rem .85rem;font:500 .88rem var(--body);cursor:pointer}
.tl-presets button:hover{border-color:var(--muted)}
.tl-presets button[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
.tl-check{display:flex;align-items:center;gap:.6rem;font-size:.95rem;cursor:pointer}
.tl-check input{width:auto;accent-color:var(--amber)}
.tl-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.tl-ghost{display:inline-flex;align-items:center;gap:.45rem;background:none;border:1px solid var(--line);color:var(--text);border-radius:999px;padding:.75rem 1.2rem;font:600 .95rem var(--body);cursor:pointer;text-decoration:none}
.tl-ghost:hover{border-color:var(--muted)}
.tl-ghost[disabled]{opacity:.45;cursor:not-allowed}

/* Output box */
.tl-output{background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:var(--s2) var(--s3);font:.95rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;min-height:5.5rem;color:var(--text)}
.tl-output .k{color:var(--amber)}
.tl-output .v{color:#B9B4FF}
.tl-output.empty{color:var(--muted);font-family:var(--body)}
.tl-kv{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.45rem var(--s2);margin:0;font-size:.92rem}
.tl-kv dt{color:var(--muted)}
.tl-kv dd{margin:0;overflow-wrap:anywhere}
.tl-warn{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--text);background:rgba(255,194,26,.08);border:1px solid rgba(255,194,26,.35);border-radius:10px;padding:.6rem .8rem}
.tl-warn::before{content:"!";flex:none;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--amber);color:var(--on-amber);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;margin-top:.1rem}

/* Recent list */
.tl-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-recent li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.6rem 0;border-top:1px solid var(--line);font-size:.88rem}
.tl-recent span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.tl-recent b{color:var(--text);font-weight:600}
.tl-mini{background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.25rem .7rem;font:500 .82rem var(--body);cursor:pointer}
.tl-mini:hover{color:var(--text);border-color:var(--muted)}

/* ---------- Explainer + related + CTA ---------- */
.tl-notes{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s4);padding-block:var(--s5) 0}
.tl-notes h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.tl-notes ul,.tl-notes ol{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.7rem;color:var(--muted)}
.tl-notes strong{color:var(--text)}
.tl-table{width:100%;border-collapse:collapse;font-size:.92rem}
.tl-table th,.tl-table td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.tl-table th{color:var(--muted);font-weight:500}
.tl-table code{color:var(--amber);font-size:.88rem}
.tl-scroll{overflow-x:auto}
.tl-faq{display:flex;flex-direction:column}
.tl-faq details{border-top:1px solid var(--line);padding-block:var(--s2)}
.tl-faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.tl-faq summary::-webkit-details-marker{display:none}
.tl-faq summary::after{content:"+";color:var(--amber);font-size:1.3rem;line-height:1}
.tl-faq details[open] summary::after{content:"–"}
.tl-faq p{color:var(--muted);margin-top:.6rem}
.tl-related{padding-block:var(--s5) 0}
.tl-related h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:var(--s3)}
.tl-cta{margin-top:var(--s5);background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:var(--s4);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);
  background-image:radial-gradient(22rem 12rem at 100% 0%,rgba(75,59,255,.35),transparent 70%)}
.tl-cta h2{font-size:clamp(1.6rem,3.2vw,2.4rem);max-width:22ch}
.tl-cta p{color:var(--muted);margin-top:.5rem;max-width:36rem}

.tl-toast{position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--text);color:var(--ground);padding:.6rem 1.1rem;border-radius:999px;font-weight:600;font-size:.95rem;z-index:50}

@media (max-width:1100px){.tl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .tl-tool,.tl-notes{grid-template-columns:minmax(0,1fr)}
  .tl-grid,.tl-related .tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .tl-grid,.tl-related .tl-grid{grid-template-columns:minmax(0,1fr)}
  .tl-row{grid-template-columns:minmax(0,1fr)}
  .tl-kv{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .tl-kv dd{margin-bottom:.5rem}
  .tl-cta{padding:var(--s3)}
}
@media (prefers-reduced-motion:reduce){.tl-card{transition:none}.tl-card:hover{transform:none}}

/* Hub search + wide download card */
.tl-find{position:relative;max-width:34rem;margin-bottom:var(--s2)}
.tl-find svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.15rem;height:1.15rem;color:var(--muted);pointer-events:none}
.tl-find input{padding:.85rem 1rem .85rem 2.8rem;border-radius:999px;background:var(--raised);font-size:1rem}
.tl-none{padding-top:var(--s4);color:var(--muted);display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tl-body{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.tl-tag.dl{background:#0F9D8A;color:#fff}
.tl-grid li.wide{grid-column:1/-1}
.tl-grid li.wide .tl-card{flex-direction:row;align-items:center;gap:var(--s3);background-image:radial-gradient(20rem 10rem at 100% 50%,rgba(15,157,138,.18),transparent 70%)}
.tl-grid li.wide .tl-body{flex:1}
.tl-grid li.wide .tl-body p{max-width:46rem}
.tl-grid li.wide .tl-go{margin-top:0;margin-right:7rem;white-space:nowrap}
@media (max-width:700px){
  .tl-grid li.wide .tl-card{flex-direction:column;align-items:flex-start;gap:.7rem}
  .tl-grid li.wide .tl-go{margin:0}
}
.tl-notes-body{display:flex;flex-direction:column;gap:var(--s3);min-width:0;color:var(--muted)}
.tl-notes-body > ul,.tl-notes-body > ol{margin:0}
.tl-seg button{flex:0 1 auto}
.tl-fields{display:flex;flex-direction:column;gap:var(--s2)}
.tl-color{height:3rem;padding:.3rem;cursor:pointer}
.tl-sticky{position:sticky;top:6.5rem}
.qr-stage{position:relative;background:repeating-conic-gradient(#e9e8f2 0 25%,#ffffff 0 50%) 0 0/18px 18px;border-radius:12px;padding:var(--s3);display:flex;align-items:center;justify-content:center;min-height:16rem}
.qr-stage canvas{width:100%;max-width:20rem;height:auto;display:block;border-radius:6px}
.qr-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5E5A80;text-align:center;padding:1rem}
@media (max-width:900px){.tl-sticky{position:static}}

/* Inline URL form + loading */
.tl-inline{flex-direction:row;align-items:flex-end;gap:var(--s2);flex-wrap:wrap}
.tl-inline .btn{padding-block:.8rem}
.tl-loading{display:flex;align-items:center;gap:.7rem;color:var(--muted);margin-top:var(--s3)}
.tl-loading span{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--line);border-top-color:var(--amber);animation:tlspin .8s linear infinite}
@keyframes tlspin{to{transform:rotate(360deg)}}
/* Checklist */
.tl-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-checks li{display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.1rem .6rem;padding:.6rem 0;border-top:1px solid var(--line);font-size:.93rem}
.tl-checks li::before{content:"✓";grid-row:span 2;width:1.3rem;height:1.3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;background:#1F7A4D;color:#fff;margin-top:.1rem}
.tl-checks li.warn::before{content:"!";background:var(--amber);color:var(--on-amber)}
.tl-checks li.bad::before{content:"✕";background:#B3261E}
.tl-checks b{font-weight:600}
.tl-checks span{grid-column:2;color:var(--muted);font-size:.88rem}
/* Score */
.lp-score{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2)}
.lp-score div{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.lp-score b{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:2.4rem;line-height:1}
.lp-score b.good{color:#4ADE80}.lp-score b.mid{color:var(--amber)}.lp-score b.poor{color:#FF8A80}
.lp-score .tl-hint{overflow-wrap:anywhere}
/* Mockups */
.lp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
.lp-mock{margin:0;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.lp-mock figcaption{font-weight:600}
.lp-img{background:#d9d7e6 center/cover no-repeat;aspect-ratio:1.91/1}
.lp-img.none{background:repeating-linear-gradient(45deg,#e6e4f0 0 10px,#d9d7e6 10px 20px)}
.lp-img.none::after{content:"No image";display:flex;height:100%;align-items:center;justify-content:center;color:#5E5A80;font:600 .85rem var(--body)}
.wa-chat{background:#0B141A;border-radius:12px;padding:1rem;font-family:Helvetica,Arial,sans-serif}
.wa-bubble{background:#005C4B;color:#E9EDEF;border-radius:8px;padding:4px;max-width:20rem;margin-left:auto;font-size:.85rem}
.wa-card{background:#025144;border-radius:6px;overflow:hidden}
.wa-text{padding:.5rem .6rem;display:flex;flex-direction:column;gap:.15rem}
.wa-text b{font-weight:600;color:#E9EDEF}
.wa-text span{color:#C3D2CE;font-size:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wa-text small{color:#9DB3AD;font-size:.75rem}
.wa-link{display:block;color:#53BDEB;padding:.4rem .4rem 0;overflow-wrap:anywhere;font-size:.82rem}
.wa-time{display:block;text-align:right;font-size:.7rem;color:#9DB3AD;padding:0 .4rem .15rem}
.fb-post{background:#fff;color:#050505;border:1px solid #ddd;border-radius:10px;overflow:hidden;font-family:Helvetica,Arial,sans-serif}
.fb-meta{background:#F0F2F5;padding:.6rem .8rem;display:flex;flex-direction:column;gap:.15rem}
.fb-meta small{color:#65676B;font-size:.75rem}
.fb-meta b{font-size:1rem;line-height:1.25}
.fb-meta span{color:#65676B;font-size:.85rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.x-post{display:flex;flex-direction:column;gap:.35rem;font-family:Helvetica,Arial,sans-serif;background:#000;padding:1rem;border-radius:12px}
.x-img{border-radius:16px;border:1px solid #2F3336;position:relative;overflow:hidden}
.x-title{position:absolute;left:.6rem;bottom:.6rem;max-width:calc(100% - 1.2rem);background:rgba(0,0,0,.77);color:#fff;font-size:.8rem;padding:.1rem .4rem;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-from{color:#71767B;font-size:.8rem}
.li-post{background:#fff;color:#000;border:1px solid #ddd;border-radius:10px;overflow:hidden;font-family:Helvetica,Arial,sans-serif}
.li-meta{padding:.6rem .8rem;display:flex;flex-direction:column;gap:.15rem;background:#EEF3F8}
.li-meta b{font-size:.92rem;line-height:1.3}
.li-meta small{color:#666;font-size:.75rem}
@media (max-width:700px){.lp-grid{grid-template-columns:minmax(0,1fr)}.tl-inline{flex-direction:column;align-items:stretch}}
/* URL expander */
.ux-final{gap:.6rem}
.ux-domain{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(1.8rem,4.5vw,3rem);line-height:1.05;color:var(--amber);overflow-wrap:anywhere}
.ux-full{font:.9rem/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--text);overflow-wrap:anywhere}
.ux-title{color:var(--muted)}
.ux-final .tl-actions{margin-top:.6rem}
.ux-hops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.ux-hops li{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:0 0 1.1rem 1.8rem;min-width:0}
.ux-hops li::before{content:"";position:absolute;left:.3rem;top:.35rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--muted)}
.ux-hops li:not(:last-child)::after{content:"";position:absolute;left:.62rem;top:1.2rem;bottom:.1rem;width:2px;background:var(--line)}
.ux-hops li.go::before{background:var(--amber)}
.ux-hops li.ok::before{background:#4ADE80}
.ux-hops li.bad::before{background:#FF8A80}
.ux-code{font-weight:600;font-size:.9rem}
.ux-url{font:.84rem/1.45 ui-monospace,Menlo,Consolas,monospace;color:var(--muted);overflow-wrap:anywhere}
.ux-hops small{color:var(--muted);font-size:.8rem}
/* Calculators */
.tl-big{display:flex;flex-direction:column;gap:.2rem;border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
.tl-big span{color:var(--muted);font-size:.92rem}
.tl-big output{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;color:var(--amber);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tl-big small{color:var(--muted);font-size:.9rem}
.tl-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.tl-stat{background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tl-stat span{color:var(--muted);font-size:.82rem}
.tl-stat b{font-family:var(--display);font-weight:800;font-stretch:108%;font-size:1.35rem;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tl-stat small{color:var(--muted);font-size:.78rem}
.tl-in{position:relative}
.tl-in .pre{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.tl-in.has-pre input{padding-left:2rem}
.tl-in .suf{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:.9rem}
.tl-in.has-suf input{padding-right:3.2rem}
.tl-words{font-size:.8rem;color:var(--amber);min-height:1em}
.tl-verdict{border-radius:12px;padding:.8rem 1rem;font-weight:600}
.tl-verdict.good{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.4);color:#86EFAC}
.tl-verdict.bad{background:rgba(255,138,128,.1);border:1px solid rgba(255,138,128,.4);color:#FFB4AB}
.tl-verdict.mid{background:rgba(255,194,26,.08);border:1px solid rgba(255,194,26,.35);color:var(--amber)}
.tl-bars{display:flex;flex-direction:column;gap:.7rem}
.tl-bar{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;gap:.75rem;align-items:center;font-size:.9rem}
.tl-bar i{display:block;height:.6rem;border-radius:4px;background:var(--line);overflow:hidden}
.tl-bar i b{display:block;height:100%;border-radius:4px}
.tl-bar em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;min-width:5.5rem}
.tl-split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.tl-split .field input{text-align:right}
@media (max-width:600px){.tl-stats{grid-template-columns:minmax(0,1fr)}.tl-bar{grid-template-columns:5.5rem minmax(0,1fr) auto}.tl-split{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cp-more summary{cursor:pointer;font-weight:600;color:var(--text)}
.cp-more summary::marker{color:var(--amber)}
.gs-inv th{color:var(--muted);font-weight:500}
.gs-inv td{text-align:right;font-variant-numeric:tabular-nums}
.gs-inv tr.tot th,.gs-inv tr.tot td{color:var(--text);font-weight:700;border-bottom:0;border-top:2px solid var(--line)}
.mp-sheet{width:100%;min-width:34rem;border-collapse:collapse;font:.85rem Arial,sans-serif;background:#fff;color:#14122E;border-radius:8px;overflow:hidden}
.mp-sheet th{background:#0B0A1E;color:#fff;font-weight:600;padding:.5rem .6rem;text-align:left}
.mp-sheet td{padding:.45rem .6rem;border-bottom:1px solid #E1DEEF;font-variant-numeric:tabular-nums}
.mp-sheet tbody td{color:#1F2BD8;background:#FFF8DC}
.mp-sheet tbody td:nth-child(n+6){color:#14122E;background:#fff}
.mp-sheet tfoot td{font-weight:600;text-align:right}
.mp-sheet tfoot td:first-child{text-align:right}
.mp-sheet tr.tot td:nth-child(2){background:#FFC21A}
/* Drop zone */
.tl-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;border:2px dashed var(--line);border-radius:16px;padding:var(--s4) var(--s3);cursor:pointer;background:var(--raised);transition:border-color .15s,background .15s}
.tl-drop:hover,.tl-drop.on{border-color:var(--amber);background:#1B1846}
.tl-drop input{position:absolute;width:1px;height:1px;opacity:0}
.tl-drop b{font-size:1.1rem}
.tl-drop span{color:var(--muted);font-size:.9rem;max-width:36rem}
.tl-drop::before{content:"";width:3rem;height:3rem;border-radius:50%;background:var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC21A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M6 10l6-6 6 6M4 20h16'/%3E%3C/svg%3E") center/1.4rem no-repeat;border:1px solid var(--line)}
.ac-list{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)}
.ac-card{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s3);align-items:start}
.ac-thumb{background:repeating-conic-gradient(#2C2860 0 25%,#151338 0 50%) 0 0/16px 16px;border-radius:10px;display:flex;align-items:center;justify-content:center;min-height:8rem;overflow:hidden}
.ac-thumb img,.ac-thumb video{max-width:100%;max-height:22rem;display:block}
.ac-info{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.ac-info h2{overflow-wrap:anywhere}
@media (max-width:700px){.ac-card{grid-template-columns:minmax(0,1fr)}}
/* Video ad preview */
.vp-tool{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.vp-drop{padding:var(--s3) var(--s2)}
.vp-drop::before{width:2.4rem;height:2.4rem}
.vp-places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.vp-places button{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;text-align:left;background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem;color:var(--text);cursor:pointer;font:inherit}
.vp-places button span{font-size:.8rem;color:var(--muted)}
.vp-places button b{font-weight:600;font-size:.92rem}
.vp-places button[aria-pressed="true"]{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.vp-stage-wrap{position:sticky;top:6.5rem}
.vp-stage{display:flex;justify-content:center;align-items:center;background:radial-gradient(30rem 18rem at 50% 30%,rgba(75,59,255,.25),transparent 70%),var(--ground);border-radius:12px;padding:var(--s3);min-height:22rem}
.vp-device{position:relative;overflow:hidden;background:#000;container-type:inline-size}
.vp-device.wide{width:100%;aspect-ratio:16/9;border-radius:6px}
.vp-device.wide.p-ctv{border:10px solid #05040E;border-radius:14px;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(75,59,255,.9)}
.vp-device.tall{width:min(100%,19rem);aspect-ratio:9/16;border-radius:26px;border:6px solid #05040E;box-shadow:0 0 0 1px var(--line)}
.vp-media,.vp-safe,.vp-ui{position:absolute;inset:0}
.vp-media video,.vp-media img{width:100%;height:100%;object-fit:cover;display:block}
.z-block{position:absolute;background:repeating-linear-gradient(-45deg,rgba(255,80,80,.35) 0 6px,rgba(255,80,80,.18) 6px 12px);outline:1px dashed rgba(255,120,120,.9)}
.z-tv{position:absolute;border:2px dashed;display:flex;align-items:flex-start;justify-content:flex-end}
.z-tv span{font:600 clamp(.5rem,1.6cqi,.75rem) var(--body);padding:.1rem .35rem;color:#0B0A1E}
.z-action{inset:3.5%;border-color:#4ADE80}.z-action span{background:#4ADE80}
.z-title{inset:5%;border-color:var(--amber)}.z-title span{background:var(--amber);margin-top:1.6em}
.vp-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;font-size:.88rem;color:var(--muted)}
.vp-legend li{display:flex;gap:.6rem;align-items:center}
.vp-legend i{flex:none;width:1.1rem;height:.8rem;border-radius:2px}
.l-cov{background:repeating-linear-gradient(-45deg,rgba(255,80,80,.7) 0 3px,rgba(255,80,80,.35) 3px 6px)}
.l-act{border:2px dashed #4ADE80}.l-tit{border:2px dashed var(--amber)}
/* fake app UI */
.vp-ui{color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:clamp(.55rem,3.6cqi,.85rem);pointer-events:none}
.wide .vp-ui{font-size:clamp(.5rem,1.9cqi,.95rem)}
.vp-ui svg{width:1.9em;height:1.9em}
.u-top{position:absolute;top:4%;left:5%;font-size:1.25em}
.u-side{position:absolute;right:4%;bottom:22%;display:flex;flex-direction:column;gap:1.3em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.u-bottom{position:absolute;left:5%;right:18%;bottom:4%;display:flex;flex-direction:column;gap:.6em;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.u-bottom p{margin:0;line-height:1.3}
.u-who{display:flex;align-items:center;gap:.5em}
.u-who i{width:2.2em;height:2.2em;border-radius:50%;background:linear-gradient(135deg,#FFC21A,#FF6B1A);border:2px solid #fff}
.u-who span{opacity:.85;font-size:.9em}
.u-who-top{position:absolute;top:5%;left:5%}
.u-cta{background:rgba(255,255,255,.2);backdrop-filter:blur(4px);border-radius:.5em;padding:.6em .8em;font-weight:700;display:flex;justify-content:space-between}
.u-cta-yt{background:#fff;color:#000;justify-content:center;border-radius:2em}
.u-prog{position:absolute;top:2%;left:4%;right:4%;height:3px;background:rgba(255,255,255,.35);border-radius:2px}
.u-prog i{display:block;width:40%;height:100%;background:#fff;border-radius:2px}
.u-story-cta{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);background:#fff;color:#000;border-radius:2em;padding:.6em 1.4em;font-weight:700;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.u-yt-top{position:absolute;top:0;left:0;right:0;padding:2% 3%;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.u-yt-bl{position:absolute;left:2.5%;bottom:8%;display:flex;flex-direction:column;gap:.3em;align-items:flex-start}
.u-badge{background:#FFC21A;color:#000;font-weight:700;padding:.1em .45em;border-radius:3px}
.u-site{background:rgba(0,0,0,.6);padding:.15em .5em;border-radius:3px}
.u-yt-cta{position:absolute;left:2.5%;bottom:21%;background:#3EA6FF;color:#0B0A1E;font-weight:700;padding:.45em 1em;border-radius:2em}
.u-yt-skip{position:absolute;right:0;bottom:9%;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.4);border-right:0;padding:.55em 1.2em;font-weight:600}
.u-yt-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.3)}
.u-yt-bar i{display:block;width:33%;height:100%;background:#FFC21A}
.u-ctv-ad{position:absolute;top:6%;right:6%;background:rgba(0,0,0,.6);padding:.3em .7em;border-radius:4px;font-weight:600}
.u-ctv-qr{position:absolute;right:6%;bottom:7%;display:flex;flex-direction:column;align-items:center;gap:.3em;background:#fff;color:#000;padding:.5em;border-radius:6px;font-weight:700;font-size:.85em}
.u-ctv-qr span{width:5.5em;height:5.5em;background:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/1.1em 1.1em}
@media (max-width:900px){.vp-tool{grid-template-columns:minmax(0,1fr)}.vp-stage-wrap{position:static}}
/* Resizer */
.rz-sizes{display:flex;flex-direction:column;gap:var(--s2)}
.rz-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.rz-group legend{font-size:.85rem;color:var(--muted);margin-bottom:.4rem;grid-column:1/-1}
.rz-opt{display:flex;gap:.5rem;align-items:flex-start;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;cursor:pointer;font-size:.82rem;color:var(--muted)}
.rz-opt input{width:auto;margin-top:.2rem;accent-color:var(--amber)}
.rz-opt b{display:block;color:var(--text);font-size:.88rem}
.rz-opt:has(input:checked){border-color:var(--amber)}
.rz-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
.rz-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:var(--s2)}
.rz-item{margin:0;display:flex;flex-direction:column;gap:.5rem;background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:.6rem;min-width:0}
.rz-img{display:flex;align-items:center;justify-content:center;height:9rem;background:repeating-conic-gradient(#2C2860 0 25%,#151338 0 50%) 0 0/14px 14px;border-radius:8px;overflow:hidden}
.rz-img img{max-width:100%;max-height:100%;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.rz-item figcaption{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem}
.rz-item figcaption span{color:var(--muted)}
.rz-item em{font-style:normal;font-size:.78rem;color:var(--amber)}
.rz-item .tl-mini{align-self:flex-start;text-decoration:none;margin-top:.2rem}
@media (max-width:600px){.rz-group{grid-template-columns:minmax(0,1fr)}}
/* Copy counter */
.cc-meter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:center;font-size:.8rem;color:var(--muted)}
.cc-meter i{display:block;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.cc-meter b{display:block;height:100%;background:#4ADE80;border-radius:2px}
.cc-meter.near b{background:var(--amber)}.cc-meter.warn b{background:var(--orange)}
.cc-meter.over b{background:#FF8A80}.cc-meter.over span{color:#FF8A80;font-weight:600}
.cc-meter.warn span{color:var(--orange)}
.pv-g,.pv-m,.pv-l,.pv-y,.pv-x{background:#fff;color:#202124;border-radius:12px;padding:1rem;font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.pv-g-top{display:flex;gap:.6rem;align-items:center}
.pv-g-top b{display:block;font-size:.85rem}
.pv-g-top small{color:#4D5156;font-size:.8rem;overflow-wrap:anywhere}
.pv-g-fav{width:1.8rem;height:1.8rem;border-radius:50%;background:#E8EAED;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.pv-g a{color:#1A0DAB;font-size:1.2rem;line-height:1.3}
.pv-g p{color:#4D5156;line-height:1.5;margin:0}
.pv-m-head{display:flex;gap:.6rem;align-items:center}
.pv-m-head i{width:2.4rem;height:2.4rem;border-radius:50%;background:linear-gradient(135deg,#FFC21A,#FF6B1A)}
.pv-m-head b{display:block;font-size:.92rem}.pv-m-head small{color:#65676B;font-size:.78rem}
.pv-m p,.pv-l p,.pv-x p{margin:0;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.pv-m p span,.pv-l p span{color:#65676B;font-weight:600}
.pv-img{aspect-ratio:1/1;border-radius:6px;background:linear-gradient(135deg,#4B3BFF,#0B0A1E 60%,#FF6B1A);position:relative}
.pv-169{aspect-ratio:16/9}
.pv-x .pv-img span{position:absolute;left:.6rem;bottom:.6rem;background:rgba(0,0,0,.7);color:#fff;font-size:.78rem;padding:.1rem .4rem;border-radius:4px;max-width:calc(100% - 1.2rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-m-bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;background:#F0F2F5;margin:-.5rem -1rem -1rem;padding:.7rem 1rem;border-radius:0 0 12px 12px}
.pv-m-bar div{display:flex;flex-direction:column;min-width:0}
.pv-m-bar small{color:#65676B;font-size:.72rem}.pv-m-bar b{font-size:.95rem}.pv-m-bar span{color:#65676B;font-size:.82rem}
.pv-m-bar em,.pv-l-bar em,.pv-y > em{font-style:normal;background:#E4E6EB;border-radius:6px;padding:.45rem .8rem;font-weight:600;font-size:.85rem;white-space:nowrap}
.pv-l-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .6rem;align-items:center}
.pv-l-bar b{font-size:.92rem}.pv-l-bar small{color:#666;font-size:.78rem;grid-column:1}.pv-l-bar em{grid-row:1/3;grid-column:2;border:1px solid #0A66C2;color:#0A66C2;background:none;border-radius:2em}
.pv-y-row{display:flex;gap:.6rem}
.pv-y-row i{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:linear-gradient(135deg,#FFC21A,#FF6B1A)}
.pv-y-row b{display:block;font-size:.95rem;line-height:1.3}
.pv-y-row p{margin:.2rem 0;color:#606060;font-size:.84rem;line-height:1.35}
.pv-y-row small{color:#606060;font-size:.8rem}
.pv-y > em{background:#065FD4;color:#fff;text-align:center;border-radius:2em}
.pv-x{background:#000;color:#E7E9EA}
.pv-x .pv-m-head small{color:#71767B}
.vg-xml{white-space:pre;overflow:auto;max-height:28rem;font-size:.78rem;line-height:1.5}
/* Google search preview */
.gp-serp{background:#fff;border-radius:12px;padding:1.2rem;font-family:Arial,Helvetica,sans-serif}
.gp-serp.m .gp-res{max-width:330px;margin-inline:auto}
.gp-serp.d .gp-res{max-width:600px}
.gp-site{display:flex;gap:.7rem;align-items:center;margin-bottom:.35rem}
.gp-fav{flex:none;width:28px;height:28px;border-radius:50%;background:#F1F3F4;border:1px solid #DADCE0;display:flex;align-items:center;justify-content:center;color:#202124;font-size:12px;font-weight:700}
.gp-site b{display:block;color:#202124;font-size:14px;font-weight:400;line-height:20px}
.gp-site small{display:block;color:#4D5156;font-size:12px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:270px}
.gp-t{display:block;color:#1A0DAB;font-size:20px;line-height:26px;margin-bottom:4px;cursor:pointer}
.gp-serp.m .gp-t{font-size:20px;line-height:26px}
.gp-d{color:#4D5156;font-size:14px;line-height:22px;margin:0}
/* Email signature */
.es-mail{background:#fff;color:#333;border-radius:12px;padding:1rem 1.2rem 1.4rem;overflow-x:auto}
.es-mail-head{display:flex;gap:.35rem;margin-bottom:.9rem}
.es-mail-head span{width:.6rem;height:.6rem;border-radius:50%;background:#E1DEEF}
.es-mail-body{font:13px/1.5 Arial,sans-serif;color:#333;margin:0 0 .8rem}
.es-how ol{margin:.8rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.5rem;color:var(--muted);font-size:.9rem}
.es-how strong{color:var(--text)}
/* Reset the site's global table styles inside tools */
.tl-table{min-width:0}
.gs-inv{min-width:0}
.tl-table td:first-child{font-weight:inherit}
.es-mail table{width:auto;min-width:0;border-collapse:separate}
.es-mail th,.es-mail td{padding:0;border:0;font-weight:inherit;text-align:inherit}
.vp-stage{flex-direction:column}
.vp-device.wide{align-self:stretch;width:auto}
@media (max-width:900px){.vp-stage{min-height:0;padding:var(--s2)}}