@font-face{font-family:"Studio Noto";src:url("fonts/noto-sans-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:"Studio Noto";src:url("fonts/noto-sans-bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
.image-studio{--studio-ink:#f1f5f9;--studio-soft:#cbd5e1;--studio-panel:#172334;--studio-accent:#075985;background:#0b1422;color:var(--studio-ink);border:1px solid #475569;border-radius:1rem;max-width:100%;min-width:0;font-family:Tajawal,"Studio Noto",sans-serif;font-size:.95rem;line-height:1.5;isolation:isolate}.image-studio *{box-sizing:border-box}.image-studio [hidden]{display:none!important}.image-studio :is(button,input,select,textarea){font:inherit}.image-studio :is(button,input,select,textarea):focus-visible,.image-studio summary:focus-visible,.image-studio canvas:focus-visible{outline:3px solid #67e8f9;outline-offset:3px}.image-studio button{cursor:pointer}.studio-intro{padding:1rem 1.15rem}.studio-intro strong{font-size:1.25rem}.studio-intro p{margin:.5rem 0 0;color:var(--studio-soft)}.studio-message{padding:.8rem 1rem;margin:0;border-radius:1rem 1rem 0 0;background:#164e63;color:#ecfeff;font-size:.95rem;line-height:1.5}.studio-message:empty{display:none}.studio-message[data-error=true]{background:#450a0a;color:#fecaca}.studio-menu-host{position:relative;z-index:5}.pp-menu-bar{display:flex;gap:.25rem;align-items:center;overflow-x:auto;padding:.5rem;background:#172334;border-block:1px solid #475569}.pp-menu-item{flex-shrink:0;color:#f8fafc;background:transparent;border:1px solid transparent;border-radius:.4rem;padding:.6rem .7rem;min-height:2.75rem}.pp-menu-item[aria-expanded=true]{border-color:#67e8f9;background:#075985}.pp-zoom-display{margin-inline-start:auto;padding:.5rem;flex-shrink:0;font-variant-numeric:tabular-nums}.pp-dropdown{display:none;position:absolute;inset:100% .5rem auto .5rem;max-width:28rem;max-height:24rem;overflow:auto;background:#0f172a;border:1px solid #64748b;border-radius:.65rem;padding:.5rem;box-shadow:0 1rem 3rem #02061799}.pp-dropdown-item{display:block;width:100%;padding:.7rem;text-align:start;border:0;border-radius:.4rem;color:#f8fafc;background:transparent;min-height:2.75rem}.pp-dropdown-item:hover{background:#164e63}.studio-extra-controls,.studio-layer-actions{display:flex;gap:.5rem;flex-wrap:wrap;padding:.6rem}.studio-extra-controls button,.studio-button,.studio-dialog button{font:inherit;background:#164e63;color:#ecfeff;padding:.6rem .75rem;border:1px solid #67e8f9;border-radius:.45rem;cursor:pointer;min-height:2.75rem}.studio-extra-controls button{flex:1 1 10rem}.studio-button:disabled,.studio-extra-controls button:disabled{background:#334155;color:#e2e8f0;border-color:#64748b;cursor:not-allowed}.studio-upload{margin:.6rem;display:grid;gap:.4rem;padding:1rem;border:2px dashed #64748b;border-radius:.8rem;color:#f8fafc;min-width:0}.studio-upload small{color:var(--studio-soft)}.studio-upload input{max-width:100%;color:var(--studio-soft);min-width:0}.studio-upload input::file-selector-button{background:#075985;color:#fff;border:1px solid #67e8f9;border-radius:.4rem;padding:.6rem;margin-inline-end:.6rem;font:inherit}.pp-main{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 17rem;gap:.75rem;align-items:start;min-width:0;padding:.75rem}.studio-tools-panel,.pp-panel{background:var(--studio-panel);border:1px solid #475569;border-radius:.65rem;min-width:0}.image-studio summary{cursor:pointer;padding:.75rem;font-weight:700;color:#f8fafc}.pp-left-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:.4rem;gap:.35rem;max-height:44rem;overflow:auto}.pp-tool{display:grid;gap:.25rem;justify-items:center;align-content:center;padding:.45rem .2rem;background:#0f172a;color:#e2e8f0;border:1px solid #475569;border-radius:.45rem;min-width:0;min-height:4.5rem}.pp-tool svg{width:1.3rem;height:1.3rem}.pp-tool span{font-size:.8rem;line-height:1.3;overflow-wrap:anywhere;text-align:center}.pp-tool[aria-pressed=true]{background:#075985;color:#fff;border-color:#67e8f9}.pp-canvas-area{position:relative;min-width:0;border:1px solid #475569;border-radius:.65rem;background:#020617;padding:.75rem}.pp-canvas-area #canvas-wrapper{display:block;overflow:auto;height:31rem;min-width:0;position:relative;padding:1.5rem;direction:ltr}#pp-upload-area{display:grid;place-items:center;min-height:27rem;text-align:center;color:#cbd5e1}#studio-surface{position:relative;display:block;margin:auto;flex-shrink:0}#image-editor #pp-canvas{scroll-margin-top:6rem;max-width:none;max-height:none;width:100%;height:100%;display:block;transform:none;background:repeating-conic-gradient(#334155 0% 25%,#475569 0% 50%) 0 0/16px 16px;touch-action:none;user-select:none}.studio-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.studio-tool-help,.studio-hint{margin:.6rem 0;color:#cbd5e1;font-size:.9rem;line-height:1.6}.pp-right-panels{display:grid;gap:.65rem;min-width:0}.pp-panel-header{border-bottom:1px solid #475569}.pp-panel-content{display:grid;gap:.5rem;padding:.75rem;min-width:0}.pp-tool-settings{display:none}.pp-tool-settings.active{display:grid;gap:.5rem}.pp-setting-row{display:grid;grid-template-columns:minmax(0,1fr) 4rem;gap:.35rem}.pp-setting-row label{grid-column:1/-1}.image-studio input[type=range]{min-width:0;max-width:100%;width:100%;accent-color:#67e8f9}.image-studio input[type=number],.image-studio select,.image-studio textarea{background:#0b1422;color:#f8fafc;border:1px solid #64748b;border-radius:.4rem;min-width:0;max-width:100%;padding:.55rem}.image-studio input[type=color]{width:100%;height:2.75rem;border:1px solid #64748b;border-radius:.4rem;background:#0b1422}.studio-colors{display:grid;grid-template-columns:1fr 3rem;align-items:center;gap:.5rem;padding-bottom:.65rem;border-bottom:1px solid #475569}.studio-colors button{grid-column:1/-1}.studio-check{display:flex;gap:.6rem;align-items:flex-start}.studio-check input{margin-top:.3rem;width:1.1rem;height:1.1rem;flex-shrink:0;accent-color:#67e8f9}#brush-preview{margin:auto;max-width:100%;background:#f8fafc;border-radius:.4rem}.pp-layer{display:flex;gap:.3rem;align-items:center;padding:.45rem;background:#0f172a;color:#f1f5f9;border:1px solid #475569;border-radius:.5rem;margin-bottom:.4rem;min-width:0}.pp-layer.active{background:#075985;color:#fff;border-color:#67e8f9}.pp-layer button,.pp-history-item button{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:.3rem;min-height:2.75rem}.studio-layer-name{flex:1;text-align:start;overflow-wrap:anywhere;min-width:0}.pp-layer canvas{width:1.5rem;max-height:1.5rem;object-fit:contain}.pp-layers-list{max-height:19rem;overflow:auto}.studio-layer-actions{padding:.25rem 0}.studio-layer-actions button{flex:1 1 5rem}.pp-history-list{max-height:14rem;overflow:auto}.pp-history-item{display:flex;justify-content:space-between;gap:.3rem;color:#e2e8f0;border-bottom:1px solid #475569}.pp-history-item.active{background:#075985;color:#fff;border-radius:.35rem}.pp-history-item button:first-child{flex:1;text-align:start}.pp-panel-content dl,.pp-panel-content dd{margin:0}.pp-panel-content>div:has(dt){padding:.5rem;background:#0f172a;border-radius:.35rem}.pp-panel-content dt{font-size:.85rem;color:#cbd5e1}.pp-panel-content dd{font-weight:700;overflow-wrap:anywhere}.pp-status-bar{display:flex;gap:1rem;flex-wrap:wrap;padding:.75rem 1rem;border-block-start:1px solid #475569;color:#e2e8f0;font-size:.9rem;overflow-wrap:anywhere}.pp-status-bar bdi{flex:1}.studio-guidance{border-top:1px solid #475569}.studio-guidance p{margin:.5rem 1rem 1rem;color:#cbd5e1}.pp-ruler-top,.pp-ruler-left{position:absolute;z-index:2;background:#334155;overflow:hidden;font-size:10px;color:#f8fafc}.pp-ruler-top{height:1rem;inset:0 0 auto 0}.pp-ruler-left{width:1rem;inset:1rem auto 0 0}.pp-ruler-top span,.pp-ruler-left span{position:absolute}.studio-dialog{width:min(28rem,calc(100vw - 2rem));border:1px solid #64748b;border-radius:.75rem;background:#0f172a;color:#f8fafc;padding:1.25rem;font:inherit;max-height:90vh;overflow:auto}.studio-dialog::backdrop{background:#020617bf}.studio-dialog h2{font-size:1.2rem;color:#f8fafc}.studio-dialog label{display:grid;gap:.5rem;margin:1rem 0}.studio-dialog input,.studio-dialog select,.studio-dialog textarea{background:#020617;color:#f8fafc;border:1px solid #64748b;border-radius:.4rem;padding:.6rem;font:inherit;min-width:0}.studio-dialog textarea{min-height:7rem;resize:vertical}.studio-dialog form>div{display:flex;gap:.6rem;justify-content:flex-end}.studio-dialog p{color:#fecaca}#brush-options>label{display:flex;gap:.5rem;margin:.65rem 0;font-size:.9rem}#studio-tolerance{width:4rem}
@media(max-width:1200px){.pp-main{grid-template-columns:7rem minmax(0,1fr) 15rem}}@media(max-width:950px){.pp-main{grid-template-columns:1fr}.pp-left-toolbar{grid-template-columns:repeat(4,minmax(0,1fr));max-height:none}.pp-tool{min-height:4rem}.pp-right-panels{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.pp-canvas-area #canvas-wrapper{height:23rem}#pp-upload-area{min-height:19rem}.studio-tools-panel{width:100%}}@media(max-width:580px){.pp-main{padding:.5rem;gap:.5rem}.pp-right-panels{grid-template-columns:1fr}.pp-left-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}.pp-canvas-area #canvas-wrapper{height:19rem}#pp-upload-area{min-height:15rem}.studio-intro{padding:.85rem}.studio-upload{padding:.75rem}.pp-menu-item{padding:.6rem}.studio-extra-controls button{flex-basis:9rem}.studio-tool-help{font-size:.875rem}}@media(prefers-reduced-motion:reduce){.image-studio *{scroll-behavior:auto!important}}

.image-studio .studio-button,.image-studio .studio-extra-controls button,.image-studio .pp-dropdown-item{overflow-wrap:anywhere}

#image-editor label{color:#f1f5f9}#image-editor .studio-upload{display:grid}