/* ===== CreatiPages browser tools + guides ===== */
.tf{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem}
.tf-f{display:grid;gap:.3rem;font-size:.8rem;font-weight:700;color:var(--muted)}.tf-f.w{grid-column:1/-1}
.tf-f input,.tf-f select,.tf-f textarea{width:100%;border-radius:.65rem;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-weight:400;font-size:.92rem;padding:.6rem .8rem}
.tf-f input[type=color]{height:2.6rem;padding:.2rem}
.tf-up{display:grid;place-items:center;gap:.4rem;border:1.5px dashed rgb(var(--gold-rgb)/.5);border-radius:1rem;padding:1.4rem;text-align:center;color:var(--muted);font-size:.85rem;cursor:pointer}
.tout{background:#fff;color:#111;border-radius:1rem;padding:1rem;overflow-x:auto}.tout svg{max-width:100%;height:auto;display:block;margin:auto}
.tout-h{text-align:center;font-weight:800;margin-bottom:.5rem}
.ws-list{display:flex;flex-wrap:wrap;gap:.4rem .9rem;justify-content:center;margin-top:.8rem;font-weight:700}
.su-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}.su-grid figcaption{text-align:center;font-size:.8rem;color:#666}
.ma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.9rem 1.2rem;font-size:1.1rem}.ma-i{color:#999;font-size:.75rem;margin-inline-end:.35rem}
.cp-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.cp-sw{min-height:8rem;border-radius:.9rem;border:0;display:flex;flex-direction:column;justify-content:flex-end;padding:.6rem;cursor:pointer;font:inherit;text-align:start}.cp-sw small{opacity:.85;font-size:.68rem}
@media(max-width:560px){.cp-row{grid-template-columns:repeat(2,1fr)}}
.ac-wave{width:100%;height:auto;background:var(--bg);border:1px solid var(--line);border-radius:.8rem;cursor:crosshair}
.cl-prog{height:.4rem;border-radius:1rem;background:var(--sec);overflow:hidden}.cl-prog i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.cl-list h5{margin:.9rem 0 .3rem;color:var(--gold)}.cl-i{display:flex;gap:.6rem;align-items:center;padding:.45rem .2rem;border-bottom:1px solid var(--line);cursor:pointer}.cl-i input{width:1.1rem;height:1.1rem;accent-color:var(--gold)}.cl-i input:checked+span{text-decoration:line-through;color:var(--muted)}
.mg-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem}.mg-k div{border:1px solid var(--line);border-radius:.8rem;padding:.8rem;display:grid;gap:.2rem}.mg-k span{font-size:.75rem;color:var(--muted)}.mg-k b{font-size:1.25rem;color:var(--gold);font-variant-numeric:tabular-nums}
.tscroll{overflow-x:auto;margin-top:.8rem}.mg-t{width:100%;border-collapse:collapse;font-size:.85rem;font-variant-numeric:tabular-nums}.mg-t th,.mg-t td{padding:.45rem .6rem;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap}.mg-t th{color:var(--muted)}
.gate{margin-top:1.5rem;border:1px solid rgb(var(--gold-rgb)/.45);border-radius:1rem;padding:1.6rem;text-align:center;display:grid;gap:.6rem;justify-items:center}.gate img{border-radius:50%}.gate h4{font-weight:800;font-size:1.15rem}.gate p{color:var(--muted);font-size:.9rem}
.tguide{margin-top:1.75rem;border-top:1px solid var(--line);padding-top:1.25rem;display:grid;gap:1rem}
.tg-how{border:1px solid var(--line);border-radius:1rem;padding:.9rem 1.1rem}.tg-how summary{cursor:pointer;font-weight:800;color:var(--gold)}
.tg-how h5{margin:1rem 0 .3rem;font-size:.9rem}.tg-how p,.tg-how li{color:var(--muted);font-size:.9rem;line-height:1.8}.tg-how ol,.tg-how ul{padding-inline-start:1.3rem}
.tg-uh{font-weight:800;font-size:1.05rem}
.tg-uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.7rem}
.tg-u{border:1px solid var(--line);border-radius:1rem;padding:1rem;display:grid;gap:.35rem;background:rgb(var(--gold-rgb)/.04)}
.tg-u span{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--bg);font-weight:800;font-size:.85rem}
.tg-u b{font-size:.95rem}.tg-u p{color:var(--muted);font-size:.85rem;line-height:1.7}
.tg-page{font-weight:800;text-decoration:none;justify-self:start}
.bc-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.8rem}.bc-o svg{border:1px solid #ddd;border-radius:.4rem;box-shadow:0 6px 20px rgb(0 0 0/.15)}
.tt-clock{font-size:clamp(2.2rem,7vw,3.4rem);font-weight:800;text-align:center;font-variant-numeric:tabular-nums;color:var(--gold);direction:ltr}
.tt-sum{display:grid;gap:.4rem}.tt-sum div{position:relative;display:flex;justify-content:space-between;padding:.45rem .7rem;border:1px solid var(--line);border-radius:.6rem;overflow:hidden}.tt-sum i{position:absolute;inset-block:0;inset-inline-start:0;background:rgb(var(--gold-rgb)/.12);z-index:0}.tt-sum span,.tt-sum b{position:relative;z-index:1}
.hb-t{border-collapse:collapse;font-size:.8rem}.hb-t th{font-weight:600;color:var(--muted);padding:.2rem .3rem;text-align:center;line-height:1.2}.hb-t td{padding:.2rem;text-align:center}.hb-n{text-align:start!important;font-weight:700;white-space:nowrap;padding-inline-end:.6rem!important}
.hb-c{width:1.6rem;height:1.6rem;border-radius:.4rem;border:1px solid var(--line);background:var(--bg);cursor:pointer}.hb-c.on{background:var(--gold);border-color:var(--gold)}.hb-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem}
.chip-b{border:1px solid var(--line);background:none;color:var(--fg);border-radius:2rem;padding:.35rem .8rem;font:inherit;font-size:.8rem;cursor:pointer}.chip-b.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}.tk-f{display:flex;gap:.3rem;align-items:center}
.tk-l{display:grid;gap:.4rem}.tk-i{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-inline-start:4px solid var(--line);border-radius:.6rem;padding:.55rem .7rem}.tk-i.p1{border-inline-start-color:#e05d5d}.tk-i.p2{border-inline-start-color:var(--gold)}.tk-i.p3{border-inline-start-color:#6fa8dc}
.tk-i span{flex:1}.tk-i em{font-style:normal;font-size:.72rem;color:var(--muted)}.tk-i small{font-size:.75rem;color:var(--muted)}.tk-i small.late{color:#e05d5d;font-weight:700}.tk-i button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem}.tk-i.dn span{text-decoration:line-through;color:var(--muted)}.tk-i input{accent-color:var(--gold);width:1.1rem;height:1.1rem}
.fc-card{min-height:12rem;border-radius:1.2rem;border:1px solid rgb(var(--gold-rgb)/.45);background:linear-gradient(160deg,rgb(var(--gold-rgb)/.08),transparent);display:grid;place-items:center;align-content:center;gap:.4rem;text-align:center;padding:1.5rem;cursor:pointer;user-select:none}
.fc-card b{font-size:clamp(1.3rem,4vw,2rem)}.fc-card small{color:var(--muted)}.fc-card.back{background:rgb(var(--gold-rgb)/.16)}.fc-nav{justify-content:center}
.qz-o{display:grid;gap:.8rem}.qz-q{border:1px solid var(--line);border-radius:.8rem;padding:.8rem 1rem}.qz-q legend{font-weight:800;padding:0 .3rem}.qz-q label{display:block;padding:.3rem 0;cursor:pointer}.qz-q.ok{border-color:#3fa66b}.qz-q.no{border-color:#d05555}.qz-q .right{color:#3fa66b;font-weight:700}
.sl-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem}.sl-g div{border:1px solid var(--line);border-radius:.9rem;padding:.9rem;display:grid;gap:.2rem;text-align:center}.sl-g b{font-size:1.6rem;color:var(--gold);direction:ltr}.sl-g span{font-size:.78rem;color:var(--muted)}.sl-g .best{border-color:var(--gold);background:rgb(var(--gold-rgb)/.08)}
.br-stage{position:relative;height:17rem;display:grid;place-items:center}.br-c{position:absolute;width:15rem;height:15rem;border-radius:50%;background:radial-gradient(circle,rgb(var(--gold-rgb)/.55),rgb(var(--gold-rgb)/.12) 70%);box-shadow:0 0 60px rgb(var(--gold-rgb)/.35)}
.br-l{position:relative;display:grid;text-align:center}.br-l b{font-size:1.4rem}.br-l span{font-size:2.2rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.br-c{transition:none!important}}
.sn-add{width:2.4rem;height:2.4rem;border-radius:.7rem;border:0;font-size:1.3rem;font-weight:800;color:#5a4a1a;cursor:pointer}
.sn-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.8rem}.sn{position:relative;min-height:9rem;border-radius:.4rem .4rem 1.2rem .4rem;padding:1.6rem .8rem .5rem;color:#222;box-shadow:0 8px 18px rgb(0 0 0/.18);display:grid;grid-template-rows:1fr auto}
.sn-t{outline:none;white-space:pre-wrap;font-size:.92rem;min-height:5rem}.sn small{color:#6b5d33;font-size:.7rem}.sn-x{position:absolute;top:.2rem;inset-inline-end:.4rem;background:none;border:0;font-size:1.2rem;cursor:pointer;color:#6b5d33}
.bg-t input.bg-in{width:100%;min-width:6rem;background:transparent;border:1px solid var(--line);border-radius:.4rem;color:var(--fg);font:inherit;padding:.3rem .45rem}.bg-t input.s{min-width:3.6rem;width:4.2rem}.bg-df.neg{color:#e05d5d;font-weight:700}
.ab-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.8rem}

/* CreatiPages AI Writing tools — scoped internal modal extension */
.aiw{display:grid;gap:1rem;padding:.25rem 0 1rem;color:var(--fg)}
.aiw-intro{color:var(--muted);font-size:.9rem}
.aiw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.aiw-field{display:grid;gap:.35rem;min-width:0}
.aiw-field.full{grid-column:1/-1}
.aiw-field label{font-size:.82rem;font-weight:700}
.aiw-field input,.aiw-field textarea,.aiw-field select{width:100%;min-width:0;border:1px solid var(--line);border-radius:.7rem;background:var(--card);color:var(--fg);padding:.75rem;font:inherit}
.aiw-field textarea{min-height:145px;resize:vertical}
.aiw-help{font-size:.75rem;color:var(--muted)}
.aiw-actions{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.aiw-status{border:1px solid rgb(var(--gold-rgb)/.35);background:rgb(var(--gold-rgb)/.07);padding:.8rem 1rem;border-radius:.7rem;font-size:.86rem}
.aiw-related{display:flex;flex-wrap:wrap;gap:.45rem}
.aiw-related span{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:.35rem .65rem;color:var(--muted)}
.aiw details{border:1px solid var(--line);border-radius:.7rem;padding:.7rem .85rem}
.aiw summary{cursor:pointer;font-weight:700;font-size:.85rem}
.aiw-output{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line);border-radius:.7rem;padding:1rem;min-height:4rem;background:var(--card)}
@media(max-width:640px){.aiw-grid{grid-template-columns:1fr}.aiw-field.full{grid-column:auto}.aiw-actions>*{flex:1 1 100%}}


.lc{width:100%;height:auto;background:#fff;border-radius:.6rem}.lg{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:center;font-size:.78rem;color:#555;margin-top:.4rem}.lg i{display:inline-block;width:.9rem;height:.25rem;border-radius:1rem;margin-inline-end:.35rem;vertical-align:middle}
.neg{color:#e05d5d!important}.cf-t td,.cf-t th{padding:.3rem .35rem}.cf-t .bg-in.s{width:5.4rem}.cf-net td{font-weight:700;font-size:.8rem}
.pm-w{display:grid;grid-template-columns:minmax(10rem,14rem) 1fr;gap:1rem}@media(max-width:700px){.pm-w{grid-template-columns:1fr}}
.pm-l{display:grid;gap:.5rem;align-content:start}.pm-l input{border:1px solid var(--line);border-radius:.6rem;background:var(--bg);color:var(--fg);padding:.5rem .7rem;font:inherit}
.pm-i{display:grid;text-align:start;gap:.1rem;width:100%;border:1px solid var(--line);border-radius:.6rem;background:none;color:var(--fg);padding:.5rem .7rem;cursor:pointer;font:inherit}.pm-i.on{border-color:var(--gold);background:rgb(var(--gold-rgb)/.08)}.pm-i small{color:var(--muted);font-size:.7rem}.pm-e{display:grid;gap:.7rem}.pm-e h5{margin:.3rem 0 0}
.pg-l{display:grid;gap:.8rem}.pg-g{border:1px solid var(--line);border-radius:.9rem;padding:.9rem;display:grid;gap:.4rem}.pg-h{display:flex;gap:.6rem;align-items:center}.pg-h b{flex:1}.pg-h span{color:var(--gold);font-weight:800}.pg-g small{color:var(--muted)}.pg-g small.late{color:#e05d5d}
.kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}@media(max-width:700px){.kb{grid-template-columns:1fr}}.kb-c{background:rgb(var(--gold-rgb)/.04);border:1px solid var(--line);border-radius:.9rem;padding:.6rem;display:grid;gap:.5rem;align-content:start;min-height:8rem}.kb-c h5{margin:0;font-size:.85rem}.kb-c h5 small{color:var(--muted)}
.kb-i{background:var(--card);border:1px solid var(--line);border-radius:.6rem;padding:.5rem .6rem;display:grid;gap:.3rem}.kb-i p{margin:0;font-size:.88rem}.kb-a{display:flex;gap:.2rem;align-items:center}.kb-a button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.95rem;padding:.1rem .3rem}.kb-a .st{flex:1}.kb-a .st .on{color:var(--gold)}
.sv-o{font-size:.95rem}.ml-t .bg-in{min-width:9rem}
.wo-timer{display:grid;justify-items:center;gap:.3rem;border:1px solid rgb(var(--gold-rgb)/.45);border-radius:1rem;padding:1.2rem;text-align:center}.wo-timer b{font-size:1.3rem}.wo-timer b.rest{color:#3fa66b}.wo-timer span{font-size:3rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}.wo-timer small{color:var(--muted)}
/* Drive & Memory */
.dv-top{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.dv-top input,.dv-top select,.dv-in{flex:1;min-width:10rem;border:1px solid var(--line);border-radius:.7rem;background:var(--bg);color:var(--fg);padding:.6rem .8rem;font:inherit}
.dv-up{cursor:pointer}.dv-quota{display:grid;gap:.35rem}.dv-quota div:first-child{font-size:.85rem;color:var(--muted)}
.dv-list{display:grid;gap:.45rem}.dv-f{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:.8rem;padding:.6rem .75rem;background:rgb(var(--gold-rgb)/.03)}
.dv-x{display:grid;place-items:center;min-width:2.7rem;height:2.7rem;border-radius:.6rem;background:rgb(var(--gold-rgb)/.14);color:var(--gold);font-weight:800;font-size:.7rem}
.dv-n{flex:1;min-width:10rem;display:grid}.dv-n b{word-break:break-word}.dv-n small{color:var(--muted);font-size:.75rem}
.dv-a{display:flex;gap:.35rem;flex-wrap:wrap}.dv-a .btn{min-height:2.2rem;padding:.35rem .8rem;font-size:.78rem}
.dv-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.25rem}.dv-tags i{font-style:normal;font-size:.72rem;border:1px solid var(--line);border-radius:2rem;padding:.08rem .55rem;color:var(--muted)}.dv-tags i button{background:none;border:0;color:#e05d5d;cursor:pointer}
.dv-ed{width:100%;margin-top:.4rem}.dv-empty{text-align:center;display:grid;gap:.6rem;justify-items:center;padding:1rem 0}
.dv-team{display:grid;gap:.5rem;border:1px solid rgb(var(--gold-rgb)/.35);border-radius:.9rem;padding:.8rem 1rem}.dv-team input,.dv-team select{border:1px solid var(--line);border-radius:.6rem;background:var(--bg);color:var(--fg);padding:.5rem .7rem;font:inherit}
.dv-rules{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.mm-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.6rem}.mm-i{border:1px solid var(--line);border-radius:.8rem;padding:.7rem .8rem;display:grid;gap:.25rem;background:rgb(var(--gold-rgb)/.03)}
.mm-i.off{opacity:.55}.mm-i p{margin:0;font-size:.85rem;color:var(--muted);white-space:pre-wrap}.mm-i small{color:var(--muted)}.mm-i label{font-size:.75rem;flex:1}
.src{font-style:normal;border:1px solid var(--line);border-radius:.4rem;padding:0 .4rem;font-size:.75rem}
.ce-sw{display:flex;gap:.5rem;align-items:center;border:1px solid rgb(var(--gold-rgb)/.4);border-radius:.8rem;padding:.7rem .9rem}.ce-sw input{width:1.2rem;height:1.2rem;accent-color:var(--gold)}
.kg-w{overflow:auto;border:1px solid var(--line);border-radius:.9rem;background:var(--bg)}.kg{width:100%;min-width:560px;height:auto;display:block}.kg line{stroke:rgb(var(--gold-rgb)/.25);stroke-width:1}.kg text{font-size:10px;fill:var(--fg);paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.ws [hidden]{display:none!important}
.mp-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.7rem}.mp-c{position:relative;border:1px solid var(--line);border-radius:.9rem;padding:.8rem;display:grid;gap:.5rem}.mp-c small{color:var(--muted);font-size:.72rem}.mp-c .hb-x{position:absolute;top:.4rem;inset-inline-end:.5rem}
.mp-c select,.mp-c input,.mp-c textarea{width:100%;border:1px solid var(--line);border-radius:.6rem;background:var(--bg);color:var(--fg);padding:.45rem .6rem;font:inherit}
.cw-log{display:grid;gap:.5rem}.cw-me,.cw-ai{padding:.6rem .8rem;border-radius:.9rem;white-space:pre-wrap;max-width:90%}.cw-me{justify-self:end;background:rgb(var(--gold-rgb)/.18)}.cw-ai{justify-self:start;border:1px solid var(--line);background:var(--card)}
.wg-f{width:100%;height:30rem;border:1px solid var(--line);border-radius:.9rem;background:#fff}
.cb-code{display:block;font-size:.7rem;background:var(--bg);border:1px dashed var(--line);border-radius:.4rem;padding:.3rem .5rem;margin-top:.3rem;word-break:break-all;color:var(--muted)}
.bd-k small{font-size:.72rem}.bd-k .pos{color:#3fa66b}.bd-k .neg{color:#e05d5d}
.db-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem}.db-w{border:1px solid var(--line);border-radius:1rem;padding:.8rem;display:grid;gap:.45rem;align-content:start;background:rgb(var(--gold-rgb)/.03)}
.db-h{display:flex;justify-content:space-between;align-items:center}.db-h button{background:none;border:0;color:var(--muted);cursor:pointer}.db-big{font-size:1.6rem;color:var(--gold)}.db-in{width:100%;border:1px solid var(--line);border-radius:.6rem;background:var(--bg);color:var(--fg);padding:.4rem .6rem;font:inherit}
.row-l{display:flex;justify-content:space-between}.row-l button{background:none;border:0;color:var(--muted);cursor:pointer}
.br-w{overflow:auto;border:1px solid var(--line);border-radius:.9rem;padding:.5rem;background:var(--bg);text-align:center}.br-w canvas{max-width:100%;height:auto;touch-action:none;border-radius:.4rem}
.au-ab{display:grid;gap:.6rem}.au-ab>div{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;border:1px solid var(--line);border-radius:.8rem;padding:.6rem}.au-ab audio{flex:1;min-width:14rem}
.pc-t{font-variant-numeric:tabular-nums;font-weight:800;color:var(--gold);direction:ltr}.pc-m{flex:1;min-width:8rem;height:.6rem;border-radius:1rem;background:var(--sec);overflow:hidden}.pc-m i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fa66b,#ffbf00,#e05d5d)}
.sr-v{width:100%;border-radius:.9rem;background:#000}.ic-g{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.ic-g div{display:grid;justify-items:center;gap:.3rem}.ic-g canvas{max-width:128px;height:auto}.ic-g small{color:var(--muted);font-size:.7rem}
.ws textarea[readonly]{width:100%}
.lg-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.6rem}.lg-c{border:2px solid var(--line);border-radius:.8rem;background:#fff;padding:.3rem;cursor:pointer}.lg-c.on{border-color:var(--gold);box-shadow:0 0 0 3px rgb(var(--gold-rgb)/.3)}.lg-c svg{width:100%;height:auto;display:block}
.sb-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.6rem}.sb-p{border:1px solid var(--line);border-radius:.8rem;padding:.6rem;display:grid;gap:.35rem}.sb-p textarea{width:100%;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--fg);font:inherit;padding:.4rem}.sb-p small{color:var(--muted)}.sb-p i{color:#3fa66b;font-style:normal}
.mc-c{border:1px solid var(--line);border-radius:.8rem;padding:.6rem .8rem;margin-bottom:.5rem}.mc-c small{color:var(--muted)}.mc-c table{margin-top:.4rem;font-size:.82rem}
.dt-v{border-radius:1rem;padding:1rem;display:grid;gap:.2rem;text-align:center}.dt-v b{font-size:1.2rem}.dt-v small{opacity:.8}.dt-ok{background:rgb(63 166 107/.15);border:1px solid #3fa66b}.dt-ed{background:rgb(var(--gold-rgb)/.15);border:1px solid var(--gold)}.dt-ai{background:rgb(224 93 93/.15);border:1px solid #e05d5d}
.sr-w{position:relative;display:grid}.sr-w canvas{grid-area:1/1;width:100%;height:auto}.sr-k{cursor:crosshair;touch-action:none}
.rt-w{border:1px solid var(--line);border-radius:.9rem;background:var(--bg);overflow:hidden;direction:ltr}.rt-w canvas{width:100%;height:140px;display:block;cursor:pointer}.rt-i{font-size:.82rem;color:var(--muted);direction:auto}
.rt-h ol{margin:.3rem 0 .8rem;padding-inline-start:1.2rem;color:var(--muted);line-height:1.8}

/* ===== CreatiPages Studio skin — one premium design language for every tool ===== */
.ws{gap:1.1rem}
.ws .tf,.tf{gap:.95rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.tf-f{gap:.42rem;font-size:.78rem;font-weight:800;letter-spacing:.01em;color:var(--muted);align-content:start}
.ws input:not([type]),.ws input[type=text],.ws input[type=number],.ws input[type=url],.ws input[type=email],.ws input[type=password],.ws input[type=search],.ws input[type=date],.ws input[type=time],.ws input[type=datetime-local],.ws input[type=month],.ws input[type=tel],.ws textarea,.ws select,.tf-f input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),.tf-f select,.tf-f textarea{border-radius:.8rem;border:1px solid var(--line);background:var(--card);color:var(--fg);padding:.7rem .85rem;font:inherit;font-weight:400;font-size:.93rem;transition:border-color .15s,box-shadow .15s;min-width:0}
.ws input:focus,.ws textarea:focus,.ws select:focus{outline:0;border-color:rgb(var(--gold-rgb)/.7);box-shadow:0 0 0 3px rgb(var(--gold-rgb)/.15)}
.ws select,.tf-f select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-inline-end:2.3rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e8b13c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}
[dir=rtl] .ws select,[dir=rtl] .tf-f select,html[dir=rtl] .ws select{background-position:left .9rem center}
.ws input[type=range],.tf-f input[type=range]{-webkit-appearance:none;appearance:none;height:.38rem;border-radius:1rem;background:var(--sec,rgb(127 127 127/.2));padding:0;border:0;cursor:pointer;margin:.55rem 0}
.ws input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgb(var(--gold-rgb)/.22)}
.ws input[type=range]::-moz-range-thumb{width:1.05rem;height:1.05rem;border-radius:50%;background:var(--gold);border:0}
.ws input[type=checkbox],.ws input[type=radio]{accent-color:var(--gold);width:1.05rem;height:1.05rem}
.ws input[type=color],.tf-f input[type=color]{-webkit-appearance:none;appearance:none;width:100%;height:2.6rem;padding:.25rem;border-radius:.8rem;border:1px solid var(--line);background:var(--card);cursor:pointer}
.ws input[type=color]::-webkit-color-swatch-wrapper{padding:0}.ws input[type=color]::-webkit-color-swatch{border:0;border-radius:.55rem}
.ws textarea{line-height:1.65}
/* buttons */
.ws .btn,.ws .acts .btn{min-height:2.8rem;padding:.6rem 1.25rem;border-radius:.85rem;font-size:.88rem;transition:transform .12s,filter .15s,background .15s,border-color .15s}
.ws .btn:active{transform:translateY(1px)}
.ws .btn-gold{box-shadow:0 12px 30px -18px rgb(var(--gold-rgb)/.95)}
.ws .btn-line{border-color:rgb(var(--gold-rgb)/.4)}
.ws .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.ws .acts{gap:.6rem;align-items:center}
/* status line */
.ws .msg:not(:empty){padding:.62rem .9rem;border-radius:.8rem;background:rgb(var(--gold-rgb)/.06);border:1px solid rgb(var(--gold-rgb)/.22);color:var(--fg);font-size:.84rem;line-height:1.6}
.ws .msg.err:not(:empty){background:#c0392b18;border-color:#c0392b77;color:var(--fg)}
/* upload dropzones */
.tf-up,.dm-doc-upload{position:relative;display:grid;place-items:center;gap:.5rem;text-align:center;padding:2.1rem 1rem 1.8rem;border-radius:1.1rem;border:1.5px dashed rgb(var(--gold-rgb)/.45);background:radial-gradient(30rem 12rem at 50% 0,rgb(var(--gold-rgb)/.1),transparent 70%),var(--bg);color:var(--muted);font-size:.82rem;cursor:pointer;transition:border-color .2s,background-color .2s}
.tf-up::before,.dm-doc-upload::before{content:"";width:3.4rem;height:3.4rem;border-radius:1rem;background:rgb(var(--gold-rgb)/.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23e8b13c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center/1.6rem no-repeat;box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb)/.3)}
.tf-up>span,.dm-doc-upload>span{font-weight:800;color:var(--fg);font-size:.98rem}
.tf-up:hover,.tf-up.over,.dm-doc-upload:hover,.dm-doc-upload.over{border-color:var(--gold);background-color:rgb(var(--gold-rgb)/.06)}
.tf-up>input[type=file],.dm-doc-upload>input[type=file],.tf-mini>input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.tf-up:has(input:disabled),.tf-mini:has(input:disabled){opacity:.5;cursor:not-allowed}
.tf-up:has(input:disabled)>input{cursor:not-allowed}
.tf-pick{display:inline-flex;align-items:center;gap:.4rem;max-width:100%;padding:.32rem .8rem;border-radius:2rem;background:rgb(var(--gold-rgb)/.14);color:var(--fg);font-weight:700;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.tf-pick:empty{display:none}
.tf-mini{position:relative;display:flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:.45rem .7rem;border-radius:.8rem;border:1px dashed rgb(var(--gold-rgb)/.45);background:var(--card);color:var(--fg);font-weight:700;font-size:.84rem;cursor:pointer;transition:border-color .15s,background-color .15s;min-width:0}
.tf-mini:hover,.tf-mini.over{border-color:var(--gold);background-color:rgb(var(--gold-rgb)/.06)}
.tf-mini i{width:1.9rem;height:1.9rem;border-radius:.55rem;flex:none;background:rgb(var(--gold-rgb)/.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e8b13c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center/1rem no-repeat}
.tf-mini b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;unicode-bidi:plaintext}
.tf-mini b.on{color:var(--gold)}
/* results & media */
.ws canvas,.ws video{max-width:100%;border-radius:.85rem;box-shadow:0 0 0 1px rgb(var(--gold-rgb)/.22),0 20px 50px -30px #000}
.ws img[src^="blob:"],.ws img[src^="data:"]{max-width:100%;border-radius:.75rem}
.ws audio{width:100%;border-radius:2rem}
.ws table{border-collapse:collapse;width:100%;font-size:.86rem}
.ws th,.ws td{border:1px solid var(--line);padding:.45rem .6rem;text-align:start}
.ws th{background:rgb(var(--gold-rgb)/.08)}
.ws details{border:1px solid var(--line);border-radius:.85rem;padding:.75rem .95rem;background:var(--bg)}
.ws summary{cursor:pointer;font-weight:800;font-size:.85rem}
/* document tools (PDF, OCR, converters) */
.dm-doc-tool{display:grid;gap:1rem;color:var(--fg)}
.dm-doc-main{display:grid;gap:1rem}
.dm-doc-intro h3{margin:0 0 .25rem;font-size:1.05rem}.dm-doc-intro p{margin:0;color:var(--muted);font-size:.86rem}
.dm-doc-fields{display:grid;gap:.95rem}
.dm-doc-fields>label:not(.dm-doc-upload),.dm-doc-two>label{display:grid;gap:.42rem;font-size:.78rem;font-weight:800;color:var(--muted)}
.dm-doc-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.95rem}
.dm-doc-tool input:not([type=file]),.dm-doc-tool select,.dm-doc-tool textarea{width:100%;border-radius:.8rem;border:1px solid var(--line);background:var(--card);color:var(--fg);padding:.7rem .85rem;font:inherit;font-weight:400;font-size:.93rem}
.dm-doc-tool input:focus,.dm-doc-tool textarea:focus,.dm-doc-tool select:focus{outline:0;border-color:rgb(var(--gold-rgb)/.7);box-shadow:0 0 0 3px rgb(var(--gold-rgb)/.15)}
.dm-doc-upload small{color:var(--muted);font-size:.8rem;font-weight:600}
.dm-doc-action{width:100%;min-height:3.2rem;border:0;border-radius:.9rem;background:var(--gold);color:var(--on-gold,#0b0906);font:inherit;font-weight:800;font-size:.96rem;cursor:pointer;box-shadow:0 14px 34px -18px rgb(var(--gold-rgb)/.95)}
.dm-doc-action:hover{filter:brightness(1.08)}
.dm-doc-status{padding:.62rem .9rem;border-radius:.8rem;background:rgb(var(--gold-rgb)/.06);border:1px solid rgb(var(--gold-rgb)/.22);font-size:.84rem}
.dm-doc-result{display:grid;gap:.7rem;padding:1rem;border-radius:1rem;border:1px solid var(--line);background:var(--bg)}
.dm-doc-result h4{margin:0;font-size:.95rem}
.dm-doc-result textarea{min-height:14rem;line-height:1.7}
.dm-doc-buttons{display:flex;flex-wrap:wrap;gap:.55rem}
.dm-doc-buttons button{min-height:2.6rem;padding:.5rem 1.1rem;border-radius:.8rem;border:1px solid rgb(var(--gold-rgb)/.45);background:transparent;color:var(--fg);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.dm-doc-buttons button:hover{background:rgb(var(--gold-rgb)/.1)}
.dm-doc-help{border:1px solid var(--line);border-radius:.85rem;padding:.75rem .95rem;font-size:.82rem;color:var(--muted)}
.dm-doc-help summary{cursor:pointer;font-weight:800;color:var(--fg)}
.dm-doc-tool [hidden],.tf-up [hidden],.tf-mini [hidden]{display:none!important}

/* ===== Image studio: two-column canvas stage + before/after compare ===== */
.ws.ims{display:grid;grid-template-columns:minmax(0,23rem) minmax(0,1fr);gap:1.25rem;align-items:start}
@container (max-width:780px){.ws.ims{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.ws.ims{grid-template-columns:minmax(0,1fr)}}
.ims-ctl{display:grid;gap:1rem;align-content:start;min-width:0;padding:1rem;border:1px solid var(--line);border-radius:1.05rem;background:var(--bg)}
.ims-ctl .tf{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
.ims-ctl .acts .btn{flex:1 1 auto}
.ims-stage{display:grid;gap:.8rem;min-width:0;padding:.75rem;border:1px solid var(--line);border-radius:1.05rem;background:var(--bg)}
@media (min-width:821px){.ims-stage{position:sticky;top:5.2rem}}
.ims-stage:fullscreen{background:var(--bg);padding:1rem;overflow:auto}
.ims-bar{display:flex;align-items:center;gap:.35rem;padding:0 .2rem}
.ims-bar b{font-size:.84rem}.ims-bar .sp{flex:1}
.ims-ib{width:2.15rem;height:2.15rem;border-radius:.6rem;border:0;background:transparent;color:var(--fg);display:grid;place-items:center;cursor:pointer}
.ims-ib:hover{background:rgb(var(--gold-rgb)/.13);color:var(--gold)}
.ims-stage .br-w{position:relative;min-height:22rem;display:grid;place-items:center;padding:.8rem;border-radius:.85rem;border:0;background:repeating-conic-gradient(rgb(127 127 127/.12) 0 25%,transparent 0 50%) 50%/18px 18px,var(--card);overflow:auto}
.ims-stage .br-w canvas{max-height:70vh;width:auto;max-width:100%;box-shadow:0 18px 44px -24px #000;border-radius:.5rem}
.ims-stage .br-w.sr-w canvas{max-height:none;width:100%}
.ims-stage .br-w.z1{place-items:start;max-height:75vh}
.ims-stage .br-w.z1 canvas{max-width:none;max-height:none;width:auto}
.ims-stage:fullscreen .br-w{max-height:none;min-height:80vh}
.ims-stage:fullscreen .br-w canvas{max-height:85vh}
.ims-empty{display:none;grid-area:1/1;place-items:center;gap:.4rem;text-align:center;color:var(--muted);font-size:.84rem;padding:2rem 1rem}
.ims-empty svg{color:var(--gold);opacity:.85}.ims-empty b{color:var(--fg);font-size:.95rem}
.ims-stage .br-w:not(.has)>.ims-empty{display:grid}
.ims-stage .br-w:not(.has)>canvas{display:none}
.ims-view{position:relative;min-height:22rem;display:grid;place-items:center;padding:.8rem;border-radius:.85rem;background:repeating-conic-gradient(rgb(127 127 127/.12) 0 25%,transparent 0 50%) 50%/18px 18px,var(--card);overflow:hidden}
.ims-view>img{max-width:100%;max-height:68vh;border-radius:.5rem;box-shadow:0 18px 44px -24px #000}
.ims-view .ims-empty{display:grid}
.ims-busy{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.7rem;background:rgb(0 0 0/.55);backdrop-filter:blur(3px);color:#fff;font-weight:700;font-size:.9rem;z-index:3}
.ims-busy i{width:2.4rem;height:2.4rem;border-radius:50%;border:3px solid var(--gold);border-inline-end-color:transparent;animation:imsr .8s linear infinite}
@keyframes imsr{to{transform:rotate(360deg)}}
.ims-hist{display:flex;gap:.45rem;overflow:auto;padding-bottom:.2rem}
.ims-hist button{flex:none;width:4.2rem;height:4.2rem;border-radius:.6rem;border:2px solid var(--line);padding:0;overflow:hidden;cursor:pointer;background:var(--card)}
.ims-hist button.on{border-color:var(--gold)}
.ims-hist img{width:100%;height:100%;object-fit:cover;display:block}
.cmp{position:relative;display:inline-block;max-width:100%;line-height:0;border-radius:.6rem;overflow:hidden;cursor:ew-resize;touch-action:none;user-select:none;box-shadow:0 18px 44px -24px #000}
.cmp img{display:block;max-width:100%;max-height:68vh;pointer-events:none;-webkit-user-drag:none}
.cmp .cmp-b{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;max-height:none;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp-h{position:absolute;top:0;bottom:0;left:var(--x);width:0;outline:0}
.cmp-h::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 8px rgb(0 0 0/.6)}
.cmp-h i{position:absolute;top:50%;left:0;width:2.5rem;height:2.5rem;transform:translate(-50%,-50%);border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/1.2rem no-repeat;box-shadow:0 4px 14px rgb(0 0 0/.45)}
.cmp-h:focus-visible i{box-shadow:0 0 0 3px var(--gold)}
.cmp-l{position:absolute;top:.6rem;padding:.2rem .6rem;border-radius:2rem;background:rgb(0 0 0/.6);color:#fff;font:700 .72rem/1.4 Cairo,system-ui,sans-serif;pointer-events:none}
.cmp-lb{left:.6rem}.cmp-la{right:.6rem}
/* image format converter */
.if-acc{margin:-.35rem 0 0;text-align:center;font-size:.74rem;color:var(--muted)}
.if-seg{display:flex;flex-wrap:wrap;gap:.35rem}
.if-seg button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:2rem;padding:.42rem .95rem;font:inherit;font-size:.84rem;font-weight:800;cursor:pointer;transition:.15s}
.if-seg button:hover{border-color:rgb(var(--gold-rgb)/.6)}
.if-seg button.on{background:var(--gold);color:var(--on-gold,#0b0906);border-color:var(--gold)}
.tf-f output{color:var(--fg)}
.if-grid{display:grid;gap:.55rem;min-height:22rem;align-content:start;padding:.6rem;border-radius:.85rem;background:var(--card);max-height:72vh;overflow:auto}
.if-grid>.ims-empty{min-height:20rem}
.if-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.55rem;border-radius:.8rem;border:1px solid var(--line);background:var(--bg)}
.if-th{position:relative;width:4.4rem;height:4.4rem;border-radius:.6rem;overflow:hidden;background:repeating-conic-gradient(rgb(127 127 127/.18) 0 25%,transparent 0 50%) 50%/12px 12px}
.if-th img{width:100%;height:100%;object-fit:cover;display:block}
.if-sp{position:absolute;inset:0;margin:auto;width:1.6rem;height:1.6rem;border-radius:50%;border:3px solid var(--gold);border-inline-end-color:transparent;animation:imsr .8s linear infinite;background:rgb(0 0 0/.35)}
.if-i{display:grid;gap:.2rem;min-width:0}
.if-i b{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext;text-align:start}
.if-i small{color:var(--muted);font-size:.76rem;direction:ltr;text-align:start;unicode-bidi:isolate}
[dir=rtl] .if-i small{text-align:right}
.if-tag{display:inline-block;padding:0 .4rem;border-radius:.35rem;background:var(--sec,rgb(127 127 127/.15));font-weight:800;color:var(--fg);font-size:.7rem}
.if-tag.on{background:rgb(var(--gold-rgb)/.18);color:var(--gold)}
.if-i em{font-style:normal;font-weight:800}.if-i em.up{color:#4fbf7a}.if-i em.dn{color:#e0705a}
.if-err{color:#e0705a!important}
.ws .if-dl{min-height:2.3rem;padding:.35rem .9rem;font-size:.8rem}
@media(max-width:480px){.if-c{grid-template-columns:auto minmax(0,1fr)}.if-dl{grid-column:1/-1}}
/* ===== Workbench studio (form → result tools) ===== */
.ws.wb{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:1.25rem;align-items:start}
@container (max-width:780px){.ws.wb{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.ws.wb{grid-template-columns:minmax(0,1fr)}}
.wb-ctl{display:grid;gap:1rem;align-content:start;min-width:0;padding:1rem;border:1px solid var(--line);border-radius:1.05rem;background:var(--bg)}
.wb-ctl .tf{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
.wb-ctl .acts .btn{flex:1 1 auto}
.wb-stage{display:grid;gap:.75rem;min-width:0;padding:.75rem;border:1px solid var(--line);border-radius:1.05rem;background:var(--bg)}
@media (min-width:821px){.wb-stage{position:sticky;top:5.2rem;max-height:calc(100vh - 6.5rem);grid-template-rows:auto minmax(0,1fr)}}
.wb-stage:fullscreen{max-height:none;padding:1rem;overflow:auto}
.wb-view{display:grid;gap:.9rem;align-content:start;min-height:22rem;padding:.9rem;border-radius:.85rem;background:var(--card);overflow:auto;min-width:0}
.wb-view>.wb-empty{display:none}
.wb-view:not(.has)>.wb-empty{display:grid;min-height:20rem}
.wb-view canvas,.wb-view iframe,.wb-view video{max-width:100%}
.wb-view iframe{width:100%;min-height:60vh;border:0;border-radius:.7rem;background:#fff}
/* document tools: result opens beside the controls */
.dm-doc-main{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@container (min-width:781px){.dm-doc-main:has(.dm-doc-result:not([hidden])){grid-template-columns:minmax(0,24rem) minmax(0,1fr);align-items:start}
 .dm-doc-main:has(.dm-doc-result:not([hidden]))>.dm-doc-intro{grid-column:1/-1}
 .dm-doc-main:has(.dm-doc-result:not([hidden]))>.dm-doc-result{grid-column:2;grid-row:2/span 4}}
#toolApp,.dm-tool-host{container-type:inline-size}
/* single-panel tools (form → download/play) and full workspace apps */
.ws.solo{max-width:52rem;margin-inline:auto;padding:1.2rem;border:1px solid var(--line);border-radius:1.1rem;background:var(--bg);box-shadow:0 24px 60px -40px rgb(var(--gold-rgb)/.5)}
.ws.appw{padding:1.1rem;border:1px solid var(--line);border-radius:1.1rem;background:linear-gradient(180deg,rgb(var(--gold-rgb)/.06),transparent 7rem),var(--bg)}
#mbody{container-type:inline-size}
/* ===== Recipe studio (330) ===== */
.rc-hint{font-weight:500;font-size:.74rem;color:var(--muted)}
.rc-view{min-height:24rem;padding:.9rem;border-radius:.85rem;background:var(--card);overflow:auto;max-height:78vh}
.rc-view>.ims-empty{min-height:22rem}
.rc-load{display:grid;place-items:center;align-content:center;gap:.6rem;min-height:22rem;text-align:center}
.rc-load i{width:2.6rem;height:2.6rem;border-radius:50%;border:3px solid var(--gold);border-inline-end-color:transparent;animation:imsr .8s linear infinite}
.rc-load small{color:var(--muted)}
.rc-card header{padding:.2rem .2rem 1rem;border-bottom:1px solid var(--line)}
.rc-card h3{margin:0 0 .3rem;font-size:1.35rem;line-height:1.35;color:var(--gold)}
.rc-card header p{margin:0 0 .8rem;color:var(--muted);font-size:.9rem}
.rc-meta{display:flex;flex-wrap:wrap;gap:.45rem}
.rc-meta>span{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .75rem;border-radius:2rem;background:var(--bg);border:1px solid var(--line);font-size:.8rem;font-weight:700}
.rc-meta svg{color:var(--gold)}
.rc-serv button{width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid rgb(var(--gold-rgb)/.5);background:transparent;color:var(--fg);font:inherit;font-weight:800;cursor:pointer;line-height:1}
.rc-serv button:hover{background:var(--gold);color:var(--on-gold,#0b0906)}
.rc-serv b{min-width:1.4rem;text-align:center;font-size:.95rem}.rc-serv em{font-style:normal;color:var(--muted);font-weight:600}
.rc-tabs{display:flex;gap:.25rem;margin:1rem 0 .8rem;background:var(--sec,rgb(127 127 127/.12));padding:.22rem;border-radius:.7rem}
.rc-tabs button{flex:1;border:0;background:none;color:var(--muted);font:inherit;font-size:.84rem;font-weight:800;padding:.5rem;border-radius:.5rem;cursor:pointer}
.rc-tabs button.on{background:var(--bg);color:var(--gold);box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb)/.45)}
.rc-pane h4{margin:.8rem 0 .4rem;font-size:.86rem;color:var(--gold)}
.rc-ing{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.rc-ing label{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem .6rem;border-radius:.6rem;cursor:pointer;line-height:1.6}
.rc-ing label:hover{background:var(--bg)}
.rc-ing input{margin-top:.3rem;accent-color:var(--gold);width:1.05rem;height:1.05rem;flex:none}
.rc-ing input:checked+span{opacity:.45;text-decoration:line-through}
.rc-ing b{color:var(--gold)}.rc-ing small{color:var(--muted)}.rc-est{font-weight:800}
.rc-steps{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.rc-steps li{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;padding:.75rem;border-radius:.8rem;background:var(--bg);border:1px solid var(--line)}
.rc-steps .n{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--on-gold,#0b0906);font-weight:800;font-size:.85rem}
.rc-steps p{margin:0;line-height:1.75;font-size:.93rem}
.rc-tm{display:inline-flex;align-items:center;gap:.35rem;border:1px solid rgb(var(--gold-rgb)/.5);background:transparent;color:var(--fg);border-radius:2rem;padding:.3rem .7rem;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-tm.run{background:var(--gold);color:var(--on-gold,#0b0906)}
.rc-tips{margin-top:1rem;padding:.8rem 1rem;border-radius:.8rem;background:rgb(var(--gold-rgb)/.07);border:1px solid rgb(var(--gold-rgb)/.3)}
.rc-tips ul{margin:.3rem 0 0;padding-inline-start:1.2rem}
.ims-bar .btn{min-height:2.2rem!important;padding:.3rem .8rem!important;font-size:.8rem!important}
/* live progress ring + bug report */
.dm-prog{position:fixed;inset-inline-start:50%;bottom:1.2rem;transform:translate(-50%,140%);z-index:9999;display:flex;align-items:center;gap:.7rem;padding:.55rem 1.1rem .55rem .6rem;border-radius:3rem;background:rgb(12 13 16/.94);color:#fff;box-shadow:0 18px 40px -16px #000,0 0 0 1px rgb(var(--gold-rgb,232 177 60)/.45);backdrop-filter:blur(6px);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;font-family:Cairo,system-ui,sans-serif}
[dir=rtl] .dm-prog,html[dir=rtl] .dm-prog{transform:translate(50%,140%)}
.dm-prog.on{transform:translate(-50%,0)}[dir=rtl] .dm-prog.on,html[dir=rtl] .dm-prog.on{transform:translate(50%,0)}
.dm-prog svg{transform:rotate(-90deg);flex:none}.dm-prog circle{fill:none;stroke-width:4}.dm-prog .bg{stroke:rgb(255 255 255/.15)}.dm-prog .fg{stroke:#e8b13c;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .3s}
.dm-prog b{position:absolute;width:44px;text-align:center;font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums;inset-inline-start:.6rem}
.dm-prog span{font-size:.84rem;font-weight:700}
.dm-bug{display:block;margin:.9rem auto 0;border:1px dashed rgb(var(--gold-rgb)/.5);background:transparent;color:var(--muted);border-radius:2rem;padding:.45rem 1.1rem;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.dm-bug:hover{color:var(--gold);border-color:var(--gold)}
.dm-bugm{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;background:rgb(0 0 0/.6);backdrop-filter:blur(3px);padding:1rem}
.dm-bugb{width:min(32rem,100%);display:grid;gap:.8rem;padding:1.3rem;border-radius:1.1rem;background:var(--card,#141519);border:1px solid rgb(var(--gold-rgb)/.4);color:var(--fg,#f1e9d8)}
.dm-bugb h3{margin:0;color:var(--gold)}.dm-bugb p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.7}.dm-bugmsg{color:#e0705a!important}
.dm-bugb textarea{width:100%;border-radius:.8rem;border:1px solid var(--line);background:var(--bg);color:var(--fg);padding:.7rem;font:inherit}
.dm-bugb>div{display:flex;gap:.5rem;flex-wrap:wrap}
/* ===== Voice studio + My Voice ===== */
.vs-grid{display:flex;flex-wrap:wrap;gap:.35rem}
.vs-grid button{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:2rem;padding:.42rem .85rem;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:.15s}
.vs-grid button i{font-style:normal;color:var(--gold);font-weight:800}
.vs-grid button:hover{border-color:rgb(var(--gold-rgb)/.6)}
.vs-grid button.on{background:var(--gold);color:var(--on-gold,#0b0906);border-color:var(--gold)}.vs-grid button.on i{color:inherit}
.vs-grid .vs-me{border-color:rgb(var(--gold-rgb)/.6)}
.vs-view{display:grid;gap:.7rem;align-content:start;min-height:22rem;padding:.9rem;border-radius:.85rem;background:var(--card);max-height:72vh;overflow:auto}
.vs-view>.ims-empty{min-height:20rem}
.vs-item{display:grid;gap:.55rem;padding:.8rem;border-radius:.85rem;background:var(--bg);border:1px solid var(--line)}
.vs-h{display:grid;gap:.15rem}.vs-h small{color:var(--muted);font-size:.78rem}
.vs-item audio{width:100%}.vs-item .btn{justify-self:start}
.mv-add,.mv-ok{display:grid;gap:.7rem;padding:.9rem;border-radius:.9rem;border:1px dashed rgb(var(--gold-rgb)/.5);background:rgb(var(--gold-rgb)/.05)}
.mv-add p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.7}
.mv-ok{grid-template-columns:auto 1fr auto auto;align-items:center;border-style:solid}
.mv-ok>span{font-size:1.5rem}.mv-ok small{display:block;color:var(--muted)}
.dm-prog{visibility:hidden;opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .25s,visibility .25s}.dm-prog.on{visibility:visible;opacity:1}
/* progress = SARA reactor: face in a golden halo with star streaks, plus the live percentage */
.dm-prog{flex-direction:column;gap:.35rem;padding:.9rem 1.4rem .8rem;border-radius:1.4rem;background:rgb(10 11 14/.95)}
.dm-prog svg,.dm-prog>b{display:none}
.dmr{position:relative;width:7.2rem;height:7.2rem}
.dmr canvas{position:absolute;inset:-22%;width:144%;height:144%;-webkit-mask:radial-gradient(circle,transparent 17%,#000 30%,#000 40%,transparent 69%);mask:radial-gradient(circle,transparent 17%,#000 30%,#000 40%,transparent 69%)}
.dmr .ring{position:absolute;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--w)),#000 calc(100% - var(--w) + 1px));mask:radial-gradient(farthest-side,transparent calc(100% - var(--w)),#000 calc(100% - var(--w) + 1px))}
.dmr .ra{inset:0;--w:4px;background:conic-gradient(from 0deg,transparent 0 50%,#ff8a00 68%,#e8b13c 90%,#fff 100%);animation:dmrS 1.1s linear infinite;filter:drop-shadow(0 0 8px #e8b13c)}
.dmr .rb{inset:7%;--w:2.5px;background:conic-gradient(from 180deg,transparent 0 55%,#e8b13c 94%,#fff 100%);animation:dmrR 1.7s linear infinite;filter:drop-shadow(0 0 5px #e8b13c)}
.dmr .rc{inset:14%;--w:2px;background:repeating-conic-gradient(rgb(232 177 60/.55) 0 3deg,transparent 3deg 11deg);animation:dmrS 8s linear infinite}
.dmr .orb{position:absolute;inset:0;animation:dmrS 2.2s linear infinite;z-index:4}
.dmr .orb i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px #e8b13c,0 0 24px 6px rgb(255 138 0/.5)}
.dmr .orb.o2{inset:7%;animation-duration:3.3s;animation-direction:reverse}.dmr .orb.o2 i{width:5px;height:5px;margin-left:-2.5px}
.dmr .face{position:absolute;inset:27%;width:46%;height:46%;object-fit:contain;z-index:5;animation:dmrI 2.4s cubic-bezier(.6,0,.2,1) infinite}
.dmr .flash{position:absolute;inset:22%;border-radius:50%;z-index:3;opacity:0;background:radial-gradient(circle,rgb(255 210 80/.75),rgb(255 138 0/.25) 45%,transparent 70%);animation:dmrF 2.4s cubic-bezier(.6,0,.2,1) infinite}
.dmr-t{display:grid;justify-items:center;gap:.1rem}
.dmr-t b{font:800 1.5rem/1 Comfortaa,Cairo,sans-serif;color:#fff;direction:ltr;text-shadow:0 0 16px rgb(232 177 60/.6)}
.dmr-t span{font-size:.8rem;font-weight:700;color:#e8b13c}
@keyframes dmrS{to{transform:rotate(360deg)}}@keyframes dmrR{to{transform:rotate(-360deg)}}
@keyframes dmrI{0%{transform:scale(.55);opacity:.15;filter:blur(3px) brightness(.6)}38%{transform:scale(1.14);opacity:1;filter:blur(0) brightness(1.5) drop-shadow(0 0 20px #ffbf00)}55%,86%{transform:scale(1);opacity:1;filter:brightness(1.05) drop-shadow(0 0 12px rgb(255 191 0/.75))}100%{transform:scale(.55);opacity:.15;filter:blur(3px) brightness(.6)}}
@keyframes dmrF{0%,30%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.25)}60%,100%{opacity:0;transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){.dmr *{animation-duration:12s!important}}
.dm-prog .dmr-t b{position:static;width:auto;inset:auto}
.dm-prog .dmr-t span{white-space:nowrap}
.dm-prog{align-items:center;min-width:12rem}