/* Charts widget builder: site fonts, surfaces, controls and one theme accent. */
#widgets-app{--ac:var(--gg);--tx:var(--text);--dm:var(--soft);--ln:var(--line);--pn:var(--bg1);--onac:var(--ink);font:inherit;min-width:0}
#widgets-app *{box-sizing:border-box}
#widgets-app button,#widgets-app input,#widgets-app select{font:inherit;color:inherit}
#widgets-app button{cursor:pointer}
#widgets-app .gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
#widgets-app .card{min-width:0;border-bottom:1px solid var(--line);padding-bottom:32px}
#widgets-app .pv{display:flex;align-items:center;justify-content:center;min-height:270px;padding:24px;background:var(--bg1);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
#widgets-app iframe{border:0;max-width:100%;display:block;background:transparent}
#widgets-app .duo{display:flex;gap:16px;max-width:100%}#widgets-app .duo iframe:nth-child(2){display:none}
#widgets-app .stack{display:flex;flex-direction:column;gap:18px;width:100%;align-items:center}
#widgets-app .info{padding-top:22px}#widgets-app .ih{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
#widgets-app h3{font-size:24px;font-weight:500;margin:0}#widgets-app .info p{color:var(--soft);margin:12px 0 20px;max-width:40ch}
#widgets-app .chip,#widgets-app small{font-size:13px;color:var(--dim)}
#widgets-app .bld{margin-top:80px;border-top:1px solid var(--line);padding-top:48px;scroll-margin-top:110px}
#widgets-app .bh h2{font-size:36px;font-weight:500;letter-spacing:-.03em;margin:0 0 24px}
#widgets-app .bgrid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:48px;margin-top:32px}
#widgets-app .form,#widgets-app .right{min-width:0}
#widgets-app .grp{border:0;border-bottom:1px solid var(--line);padding:0 0 24px;margin:0 0 28px;min-width:0}
#widgets-app legend{font-size:20px;margin-bottom:20px;font-weight:500}
#widgets-app .fld{margin:0 0 20px}#widgets-app .lbl{display:block;font-size:14px;color:var(--soft);margin-bottom:9px}
#widgets-app .inp{width:100%;min-width:0;min-height:44px;border:1px solid var(--line2);background:var(--bg1);border-radius:8px;padding:10px 12px;font-size:15px}
#widgets-app select option{background:var(--pop);color:var(--text)}
#widgets-app .seg{display:flex;flex-wrap:wrap;gap:8px}
#widgets-app .seg button{border:1px solid transparent;background:none;color:var(--soft);padding:10px 12px;border-radius:8px;min-height:44px;font-size:14px}
#widgets-app .seg button:hover{color:var(--text);background:var(--bg1)}
#widgets-app .seg button[aria-pressed=true],#widgets-app .seg button[aria-selected=true]{border-color:var(--line3);color:var(--text);background:var(--pop)}
#widgets-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--line2);border-radius:8px;background:var(--bg1);font-size:14px;font-weight:500}
#widgets-app .btn.pri{background:var(--gg);color:var(--ink);border-color:var(--gg)}
#widgets-app .btn:hover{filter:brightness(1.08)}
#widgets-app .hint,#widgets-app .note{font-size:13px;color:var(--dim);line-height:1.5;margin:9px 0 0}
#widgets-app .checks{display:flex;flex-wrap:wrap;gap:12px 20px}
#widgets-app .ck,#widgets-app .sw{display:flex;align-items:center;gap:10px;font-size:14px;min-height:36px}
#widgets-app input[type=checkbox]{accent-color:var(--gg);width:18px;height:18px}
#widgets-app .tk{display:none}#widgets-app .wh{display:flex;gap:12px;align-items:center;margin:16px 0}
#widgets-app .acc{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#widgets-app .acc button{min-height:32px;border:1px solid var(--line2);border-radius:50%;background:var(--c,var(--bg1));color:var(--text);width:32px}
#widgets-app .acc .auto{width:auto;border-radius:8px;padding:0 10px;font-size:13px}
#widgets-app .acc [aria-pressed=true]{outline:2px solid var(--text);outline-offset:3px}
#widgets-app .pickc{width:32px;height:32px;padding:0;border:0;background:none}
#widgets-app .pick{position:relative}#widgets-app .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
#widgets-app .cp{display:flex;gap:8px;align-items:center;border:1px solid var(--line2);border-radius:8px;padding:6px 8px;font-size:13px}
#widgets-app .cp b{font-weight:500}#widgets-app .x{border:0;background:none;color:var(--soft);font-size:20px}
#widgets-app .lg{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;font-size:10px;background:var(--pop);border-radius:50%;color:var(--soft)}
#widgets-app .drop{position:absolute;top:100%;left:0;right:0;background:var(--pop);border:1px solid var(--line2);border-radius:10px;z-index:5;max-height:320px;overflow:auto;padding:6px}
#widgets-app .opt{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:6px;background:none;text-align:left;padding:10px;font-size:14px}
#widgets-app .opt.on,#widgets-app .opt:hover{background:var(--bg1)}#widgets-app .opt span{display:flex;flex-direction:column}#widgets-app .opt i{margin-left:auto;color:var(--dim);font-style:normal;font-size:11px}
#widgets-app .sh{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}#widgets-app h4{font-size:18px;font-weight:500;margin:0}#widgets-app h4 small{display:block;margin-top:4px}
#widgets-app .stage{border:1px solid var(--line2);border-radius:12px;overflow:auto;padding:24px;background:var(--bg1)}#widgets-app .stage.phone{max-width:390px;margin-inline:auto}
#widgets-app .slot{display:flex;justify-content:center;min-width:0}#widgets-app .code{margin-top:28px}#widgets-app .ch{display:flex;align-items:center;justify-content:space-between;gap:10px}
#widgets-app pre{font:13px/1.7 var(--disp);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:var(--bg1);border:1px solid var(--line2);border-radius:10px}
#widgets-app code{font:inherit}#widgets-app :focus-visible{outline:2px solid var(--gg);outline-offset:3px}
@media(max-width:950px){#widgets-app .bgrid{grid-template-columns:300px minmax(0,1fr);gap:24px}}
@media(max-width:720px){#widgets-app .gal,#widgets-app .bgrid{grid-template-columns:1fr}#widgets-app .gal{gap:28px}#widgets-app .bld{margin-top:48px}#widgets-app .pv{padding:16px;min-height:230px}#widgets-app .stage{padding:12px}#widgets-app .ih{flex-wrap:wrap;gap:8px}#widgets-app .bh h2{font-size:28px}#widgets-app .sh,#widgets-app .ch{align-items:flex-start;flex-wrap:wrap}}

/* Existing site button treatment; native color input overlays a real 44px hit target. */
#widgets-app .acc button{width:44px;height:44px;min-height:44px}
#widgets-app .acc .auto{width:auto}
#widgets-app .custom-color{position:relative;min-height:44px;cursor:pointer;font-size:13px;padding:8px 12px}
#widgets-app .custom-color .pickc{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
#widgets-app .custom-color:focus-within{outline:2px solid var(--gg);outline-offset:3px}

/* Keep technical dimensions and embed code readable inside the RTL page. */
#widgets-app .chip,#widgets-app .wh,#widgets-app pre,#widgets-app code{direction:ltr;unicode-bidi:isolate}
#widgets-app a.pt-more{display:inline-block;margin-top:6px;color:var(--gg);text-decoration:none}#widgets-app a.pt-more:hover{text-decoration:underline}