/* CreatiPages standalone tool pages */
:root{--bg:hsl(240 6% 4%);--fg:hsl(60 9% 96%);--card:hsl(240 6% 7%);--gold:hsl(45 100% 50%);--gold-rgb:255 191 0;--muted:hsl(240 5% 68%);--line:hsl(45 24% 19%);--sec:hsl(240 5% 12%);--on-gold:#0b0906;color-scheme:dark}
html[data-theme="light"]{--bg:hsl(45 36% 97%);--fg:hsl(240 10% 12%);--card:#fff;--gold:hsl(38 96% 38%);--gold-rgb:198 124 5;--muted:hsl(240 6% 38%);--line:hsl(42 30% 82%);--sec:hsl(45 30% 93%);--on-gold:#fff;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--fg);font-family:Cairo,Comfortaa,system-ui,sans-serif;line-height:1.7}
html[lang=en] body{font-family:Comfortaa,Cairo,system-ui,sans-serif}
a{color:var(--gold)}img{max-width:100%}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgb(10 10 12/.88);backdrop-filter:blur(8px);z-index:20}
html[data-theme="light"] .top{background:rgb(255 255 255/.9)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.2rem}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--fg);text-decoration:none;font-family:Comfortaa,sans-serif;font-weight:700;font-size:1.2rem;direction:ltr}
.logo img{width:2.6rem;height:2.6rem;border-radius:50%}.logo em{color:var(--gold);font-style:normal}
.nav{display:flex;gap:1rem;align-items:center;font-size:.88rem}.nav a{color:var(--fg);text-decoration:none}.nav a:hover{color:var(--gold)}
.nav .lng{border:1px solid var(--line);border-radius:.6rem;padding:.25rem .7rem}
@media(max-width:640px){.nav .hide-s{display:none}}
.crumb{font-size:.8rem;color:var(--muted);margin:1.4rem 0 .4rem}.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--gold)}
h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.25;margin:.2rem 0 .5rem}
.lead{color:var(--muted);max-width:46rem;font-size:1.02rem;margin:0}
.badges{display:flex;gap:.4rem;flex-wrap:wrap;margin:.8rem 0 0}.badges span{font-size:.72rem;font-weight:700;border:1px solid var(--line);border-radius:2rem;padding:.15rem .7rem}.badges .g{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.app{margin-top:1.5rem;background:var(--card);border:1px solid rgb(var(--gold-rgb)/.3);border-radius:1.25rem;padding:clamp(1rem,2.5vw,1.75rem)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.6rem 1.3rem;border-radius:.75rem;font-weight:700;font-size:.88rem;border:0;cursor:pointer;font-family:inherit;text-decoration:none}
.btn-gold{background:var(--gold);color:var(--bg)}.btn-gold:hover{filter:brightness(1.1)}.btn-line{background:transparent;color:var(--fg);border:1px solid rgb(var(--gold-rgb)/.35)}.btn-line:hover{background:rgb(var(--gold-rgb)/.1)}
.ws{display:grid;gap:.9rem}.ws textarea,.ws select{width:100%;border-radius:.75rem;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;padding:.8rem 1rem}
.ws textarea{min-height:9rem;resize:vertical}.ws textarea.code{font-family:ui-monospace,Consolas,monospace;direction:ltr;text-align:left;font-size:.85rem}
.ws .acts,.acts{display:flex;flex-wrap:wrap;gap:.6rem}.ws .msg{font-size:.85rem;color:var(--muted)}.ws .msg.err{color:hsl(0 72% 65%)}
.dm-ad{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;width:min(100%,var(--aw));height:var(--ah);margin-inline:auto;border:1px dashed rgb(var(--gold-rgb)/.35);border-radius:.75rem;background:rgb(var(--gold-rgb)/.04);color:var(--muted);font-size:.75rem}
.dm-ad small{font-size:.68rem;opacity:.7;direction:ltr;unicode-bidi:isolate}
.dm-adw{container-type:inline-size;display:grid;gap:1rem}
.dm-ad-mid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"m m" "r l";align-items:start}
.dm-ad-mid>.dm-tool-host{grid-area:m;min-width:0}.dm-ad-mid>.dm-ad-right{grid-area:r}.dm-ad-mid>.dm-ad-left{grid-area:l}
@container (max-width:639px){.dm-ad-mid{grid-template-columns:minmax(0,1fr);grid-template-areas:"m" "r" "l"}}
@container (min-width:1000px){.dm-ad-mid{grid-template-columns:300px minmax(0,1fr) 300px;grid-template-areas:"r m l"}}
.content{display:grid;gap:1.5rem;margin:2.25rem 0}
.content h2{font-size:1.35rem;margin:0}.content h3{font-size:1rem;margin:1.1rem 0 .3rem}
.content p,.content li{color:var(--muted);line-height:1.9}.content ol,.content ul{padding-inline-start:1.4rem}
.box{background:var(--card);border:1px solid var(--line);border-radius:1.1rem;padding:1.25rem 1.5rem}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.7rem}
.rel a{display:block;border:1px solid var(--line);border-radius:.9rem;padding:.9rem;text-decoration:none;color:var(--fg)}.rel a:hover{border-color:var(--gold)}
.rel b{display:block}.rel small{color:var(--muted)}
.tl-g{margin-top:2rem}.tl-g h2{font-size:1.15rem;color:var(--gold)}
footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 0;color:var(--muted);font-size:.82rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between}footer a{color:var(--muted)}
.aff-row{display:grid;gap:.8rem}.aff-h{font-size:.85rem!important;color:var(--muted);font-weight:600}
.aff-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,300px));gap:1rem;justify-content:center}
.aff{position:relative;display:block;width:300px;height:250px;border-radius:.75rem;overflow:hidden;border:1px solid var(--line)}.aff img{width:300px;height:250px;object-fit:cover;display:block}
.aff span{position:absolute;top:.35rem;inset-inline-start:.35rem;background:rgb(0 0 0/.6);color:#fff;font-size:.62rem;padding:.05rem .4rem;border-radius:.3rem}
@media(max-width:340px){.aff-g{grid-template-columns:1fr}.aff,.aff img,.aff-ph{width:100%!important}}

/* ===== Branded backdrop (obsidian & gold, like the homepage hero) ===== */
body{position:relative;min-height:100vh;background:
  radial-gradient(60rem 30rem at 85% -8rem,rgb(var(--gold-rgb)/.16),transparent 60%),
  radial-gradient(40rem 26rem at 0% 40rem,rgb(var(--gold-rgb)/.08),transparent 65%),
  linear-gradient(180deg,hsl(240 7% 6%),var(--bg) 40rem);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgb(var(--gold-rgb)/.055) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--gold-rgb)/.055) 1px,transparent 1px);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 80%)}
html[data-theme="light"] body{background:
  radial-gradient(60rem 30rem at 85% -8rem,rgb(var(--gold-rgb)/.14),transparent 60%),
  radial-gradient(40rem 26rem at 0% 40rem,rgb(var(--gold-rgb)/.07),transparent 65%),
  linear-gradient(180deg,hsl(43 45% 95%),var(--bg) 40rem);background-attachment:fixed}
.top{border-bottom:1px solid rgb(var(--gold-rgb)/.22);box-shadow:0 1px 0 rgb(var(--gold-rgb)/.08)}
.ph{position:relative;padding:.4rem 0 1.2rem;isolation:isolate}
.ph::after{content:"";position:absolute;inset-inline-end:0;top:50%;translate:0 -50%;width:12rem;height:12rem;z-index:-1;opacity:.07;
  background:url(../brand/logo-face.webp) center/contain no-repeat;filter:grayscale(.2)}
html[data-theme="light"] .ph::after{opacity:.09}
@media(max-width:640px){.ph::after{width:7.5rem;height:7.5rem;top:50%}}
.ph h1{background:linear-gradient(180deg,var(--fg) 55%,rgb(var(--gold-rgb)/.85));-webkit-background-clip:text;background-clip:text;color:transparent}
.app{background:linear-gradient(180deg,rgb(var(--gold-rgb)/.06),transparent 9rem),var(--card);border-color:rgb(var(--gold-rgb)/.38);box-shadow:0 30px 80px -40px rgb(var(--gold-rgb)/.35)}
.box,.tg-u,.rel a{background:rgb(255 255 255/.015);backdrop-filter:blur(2px)}
html[data-theme="light"] .box,html[data-theme="light"] .tg-u,html[data-theme="light"] .rel a{background:rgb(255 255 255/.7)}
.content h2{position:relative;padding-inline-start:.9rem}.content h2::before{content:"";position:absolute;inset-inline-start:0;top:.25em;bottom:.25em;width:4px;border-radius:2px;background:var(--gold)}
.aff-h::before{display:none}

/* CreatiPages skin */
/* ===== CreatiPages skin over the shared engine (DigiMonkey tokens → CreatiPages palette) ===== */
:root{--bg:#120B24;--fg:#F4F0FF;--card:#1E1440;--gold:#FF6FB5;--gold-rgb:255 111 181;--muted:#B4A6D6;--line:#33255C;--sec:#24174A;
  --glass:18 11 36;--tint:30 20 64;--shine:255 255 255;--chat-a:#24174A;--on-gold:#fff;
  --cp-rainbow:linear-gradient(100deg,#FF8A00,#FF2D9B 32%,#8B2FF7 58%,#2F6BFF 80%,#22D3EE);color-scheme:dark}
html[data-theme="light"]{--bg:#FBF9FF;--fg:#1A1130;--card:#FFFFFF;--gold:#C2187B;--gold-rgb:194 24 123;--muted:#6B5F8A;--line:#E8E1F5;--sec:#F4EEFF;
  --glass:255 255 255;--tint:255 255 255;--shine:26 17 48;--chat-a:#F4EEFF;--on-gold:#fff;color-scheme:light}
body{font-family:"Comfortaa","IBM Plex Sans Arabic",system-ui,sans-serif}
html[dir="rtl"] body,html[lang="ar"] body{font-family:"IBM Plex Sans Arabic","Comfortaa",system-ui,sans-serif}
html[dir="rtl"] :is(h1,h2,h3,h4,.btn,button.btn,.badge,.logo span){font-family:"Baloo Bhaijaan 2","IBM Plex Sans Arabic",sans-serif}
.btn-gold,.btn.gold,a.btn-gold,button.btn-gold{background:var(--cp-rainbow)!important;color:#fff!important;border:0!important;box-shadow:0 8px 22px -10px rgb(255 45 155/.7)}
.btn-gold:hover{filter:brightness(1.06)}
.badge{background:var(--cp-rainbow);color:#fff;box-shadow:0 0 16px rgb(255 45 155/.35)}
::selection{background:#FF2D9B;color:#fff}
.logo em,.brand em{background:var(--cp-rainbow);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.logo img{border-radius:50%;background:#fff}
.top{background:color-mix(in srgb,var(--bg) 88%,transparent)!important}
.dm-ad{border-color:rgb(var(--gold-rgb)/.35)}
.cbar.launch,.launch{background:var(--cp-rainbow)!important;color:#fff!important}
.cbar.launch .badge{background:rgba(255,255,255,.22);color:#fff;box-shadow:none}