/* Scoped tool styles (imageeditor.css); every rule is limited to .tools-page so it never touches the site chrome. */
.tools-page{--bg:#0D0D1C; --topbar:#121229; --panel:#17172F; --panel2:#101024;
    --stage:#07070F; --line:#2A2A4C; --text:#E8E8F6; --muted:#9AA0BC;
    --accent:#6C6BD8; --accent2:#9C9BE8; --hover:#23234A;}
.tools-page *{margin:0; padding:0; box-sizing:border-box;}
.tools-page--editor{height:calc(100vh - var(--header-h)); min-height:560px; overflow:hidden;}
.tools-page{font-family:var(--body); background:var(--bg); color:var(--text); font-size:13px;}
.tools-page .pp-app{height:100%; display:flex; flex-direction:column;}
.tools-page .pp-topbar{display:flex; align-items:center; gap:10px;
    background:var(--topbar); border-bottom:1px solid var(--line);
    padding:0 12px; height:46px; flex:0 0 auto; z-index:40;}
.tools-page .pp-logo{font-weight:700; text-decoration:none; font-size:17px; flex:0 0 auto;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.tools-page .pp-spacer{flex:1;}
.tools-page .pp-link{color:var(--muted); text-decoration:none; padding:7px 9px; border-radius:6px;}
.tools-page .pp-link:hover{background:var(--hover); color:#fff;}
.tools-page .pp-theme{background:var(--hover); border:1px solid var(--line); color:var(--text); width:32px;height:32px; border-radius:8px; cursor:pointer; font-size:15px;}
.tools-page .pp-optionsbar{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); overflow:hidden; flex:1;}
.tools-page .pp-tool-name{color:#fff; font-weight:600; flex:0 0 auto;}
.tools-page .pp-sep{width:1px; height:20px; background:var(--line); flex:0 0 auto;}
.tools-page .pp-opt{display:none; align-items:center; gap:9px;}
.tools-page .pp-opt.show{display:flex;}
.tools-page .pp-opt input[type="range"]{width:110px; accent-color:var(--accent); cursor:pointer;}
.tools-page .pp-opt input[type="color"]{width:28px; height:25px; border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer; padding:1px;}
.tools-page .pp-opt input[type="text"]{background:var(--bg); border:1px solid var(--line); color:var(--text); padding:6px 9px; border-radius:6px; outline:none; min-width:150px; font-family:inherit;}
.tools-page .pp-opt select{background:var(--bg); border:1px solid var(--line); color:var(--text); padding:6px 8px; border-radius:6px; font-family:inherit; cursor:pointer;}
.tools-page .pp-opt input:focus,.tools-page .pp-opt select:focus{border-color:var(--accent);}
.tools-page .pp-num{color:var(--accent); font-weight:600; min-width:34px;}
.tools-page .pp-hint{color:var(--muted); font-style:italic;}
.tools-page .pp-swatch{width:22px;height:22px;border-radius:6px;border:1px solid var(--line); display:inline-block;background:#ff3b30;vertical-align:middle;}
.tools-page .pp-body{flex:1; display:flex; min-height:0;}
.tools-page .pp-rail{width:52px; flex:0 0 52px; background:var(--topbar); border-right:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; padding:8px 0; gap:5px; overflow-y:auto;}
.tools-page .pp-rail-group{display:flex; flex-direction:column; gap:5px; align-items:center;}
.tools-page .pp-rail-divider{width:30px; height:1px; background:var(--line); margin:5px 0;}
.tools-page .pp-tool,.tools-page .pp-act{width:38px; height:38px; border:1px solid transparent; background:none; color:var(--text);
    border-radius:9px; cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center;
    transition:background .15s,border-color .15s;}
.tools-page .pp-tool:hover,.tools-page .pp-act:hover{background:var(--hover);}
.tools-page .pp-tool.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.tools-page .pp-act{font-size:16px; color:var(--muted);}
.tools-page .pp-act:hover{color:#fff;}
.tools-page .pp-stage{flex:1; position:relative; overflow:hidden; min-width:0;
    background:radial-gradient(circle at 50% 38%, #16163A 0%, var(--stage) 70%);}
.tools-page #canvasWrap{position:absolute; top:0; left:0; transform-origin:0 0; line-height:0;
    background:repeating-conic-gradient(#33334D 0% 25%, #25253B 0% 50%) 0 0 / 24px 24px;
    box-shadow:0 10px 40px rgba(0,0,0,.5);}
.tools-page .pp-app:not(.has-doc) #canvasWrap{display:none;}
.tools-page #canvas{display:block;}
.tools-page .pp-stage.t-move #canvas{cursor:move;}
.tools-page .pp-stage.t-hand{cursor:grab;}
.tools-page .pp-stage.t-hand.panning{cursor:grabbing;}
.tools-page .pp-stage.t-crop #canvas,.tools-page .pp-stage.t-brush #canvas,.tools-page .pp-stage.t-shape #canvas{cursor:crosshair;}
.tools-page .pp-stage.t-eraser #canvas{cursor:cell;}
.tools-page .pp-stage.t-eyedropper #canvas{cursor:copy;}
.tools-page .pp-stage.t-text #canvas{cursor:text;}
.tools-page .pp-stage.t-zoom #canvas{cursor:zoom-in;}
.tools-page #cropBox{position:absolute; display:none; border:1.5px dashed #fff;
    box-shadow:0 0 0 9999px rgba(10,12,18,.55); pointer-events:none; z-index:6;}
.tools-page #selBox{position:absolute; display:none; border:1.5px solid var(--accent);
    box-shadow:0 0 0 1px rgba(255,255,255,.4) inset; pointer-events:none; z-index:5;}
.tools-page .pp-handle{position:absolute; width:12px; height:12px; background:#fff; border:1.5px solid var(--accent);
    border-radius:2px; pointer-events:auto;}
.tools-page .pp-handle[data-handle="nw"]{left:-7px; top:-7px; cursor:nwse-resize;}
.tools-page .pp-handle[data-handle="ne"]{right:-7px; top:-7px; cursor:nesw-resize;}
.tools-page .pp-handle[data-handle="sw"]{left:-7px; bottom:-7px; cursor:nesw-resize;}
.tools-page .pp-handle[data-handle="se"]{right:-7px; bottom:-7px; cursor:nwse-resize;}
.tools-page .plabel{color:var(--muted); font-size:12px; font-weight:600;}
.tools-page .pp-sel{width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
    padding:8px; border-radius:8px; outline:none; font-family:inherit; margin-bottom:8px; cursor:pointer;}
.tools-page .pp-sel:focus{border-color:var(--accent);}
.tools-page #propText{width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
    padding:9px; border-radius:8px; outline:none; font-family:inherit; resize:vertical; min-height:46px; margin-bottom:8px;}
.tools-page #propText:focus{border-color:var(--accent);}
.tools-page .pp-field-row{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.tools-page .pp-field-row .pp-input{flex:1;}
.tools-page .pp-layer .lock{font-size:12px; opacity:.7;}
.tools-page .pp-layer .lock:hover{opacity:1;}
.tools-page .pp-layer .lgrp{font-size:10px; opacity:.85;}
.tools-page .pp-layer .grip{cursor:grab; opacity:.5; font-size:12px; line-height:1;}
.tools-page .pp-layer .grip:hover{opacity:1;}
.tools-page .pp-layer .grip:active{cursor:grabbing;}
.tools-page .pp-ruler-top{position:absolute; top:0; left:0; height:20px; z-index:11; pointer-events:none;}
.tools-page .pp-ruler-left{position:absolute; top:0; left:0; width:20px; z-index:11; pointer-events:none;}
.tools-page .pp-ruler-corner{position:absolute; top:0; left:0; width:20px; height:20px; background:var(--panel);
    border-right:1px solid var(--line); border-bottom:1px solid var(--line); z-index:12; pointer-events:none;}
.tools-page .pp-app:not(.has-doc) .pp-ruler-top,.tools-page .pp-app:not(.has-doc) .pp-ruler-left,.tools-page .pp-app:not(.has-doc) .pp-ruler-corner,.tools-page .pp-app.no-rulers .pp-ruler-top,.tools-page .pp-app.no-rulers .pp-ruler-left,.tools-page .pp-app.no-rulers .pp-ruler-corner{display:none;}
.tools-page .pp-empty{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; text-align:center; color:var(--muted); cursor:pointer; z-index:8;}
.tools-page .pp-empty.dragover{background:rgba(108,107,216,.14);}
.tools-page .pp-empty .dz-icon{font-size:64px; margin-bottom:14px;}
.tools-page .pp-empty strong{color:#fff;}
.tools-page .pp-empty .dz-sub{font-size:12px; margin-top:6px;}
.tools-page .pp-app.has-doc .pp-empty{display:none;}
.tools-page .pp-zoombar{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:4px;
    background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:5px; z-index:9;
    box-shadow:0 8px 24px rgba(0,0,0,.4);}
.tools-page .pp-zoombar .pp-btn{min-width:36px;}
.tools-page #zoomLevel{min-width:58px;}
.tools-page .pp-panels{width:300px; flex:0 0 300px; background:var(--panel2); border-left:1px solid var(--line);
    display:flex; flex-direction:column; overflow-y:auto;}
.tools-page .pp-panel{border-bottom:1px solid var(--line);}
.tools-page .pp-panel.grow-panel{display:flex; flex-direction:column; min-height:200px;}
.tools-page .pp-panel-head{background:var(--topbar); padding:8px 12px; font-weight:600; font-size:12px;
    text-transform:uppercase; letter-spacing:.5px; color:#C9C9E6; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;}
.tools-page .pp-panel-head::before{content:"▾"; color:var(--muted); font-size:9px; flex:0 0 auto;}
.tools-page .pp-panel.collapsed .pp-panel-head::before{content:"▸";}
.tools-page .pp-panel.collapsed .pp-panel-body{display:none;}
.tools-page .pp-panel.collapsed.grow-panel{flex:0 0 auto; min-height:0;}
.tools-page .pp-info{color:var(--accent); font-weight:600; text-transform:none; letter-spacing:0; margin-left:auto;}
.tools-page .pp-head-actions{display:flex; gap:3px; margin-left:auto;}
.tools-page .pp-layer{user-select:none;}
.tools-page .pp-layer.dragging{opacity:.45;}
.tools-page .pp-layer.drop-target{border-color:var(--accent) !important; box-shadow:inset 0 0 0 1px var(--accent);}
.tools-page .pp-mini{background:var(--hover); border:1px solid var(--line); color:var(--text); width:24px; height:24px;
    border-radius:6px; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center;}
.tools-page .pp-mini:hover{background:var(--accent); border-color:var(--accent); color:#fff;}
.tools-page .pp-panel-body{padding:13px; overflow-y:auto;}
.tools-page .grow-panel .pp-panel-body{flex:1;}
.tools-page .pp-layers{display:flex; flex-direction:column; gap:3px;}
.tools-page .pp-layer{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:7px;
    cursor:pointer; color:var(--muted); border:1px solid transparent; background:var(--panel);}
.tools-page .pp-layer:hover{background:var(--hover); color:var(--text);}
.tools-page .pp-layer.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.tools-page .pp-layer .eye{font-size:13px; opacity:.85;}
.tools-page .pp-layer .lname{flex:1; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tools-page .pp-layer .ltype{font-size:14px;}
.tools-page .ctrl{margin-bottom:11px;}
.tools-page .ctrl-top{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:5px;}
.tools-page .ctrl-top span:last-child{color:var(--accent); font-weight:600;}
.tools-page .ctrl input[type="range"]{width:100%; accent-color:var(--accent); cursor:pointer;}
.tools-page .pp-row{display:flex; gap:7px; margin-bottom:8px;}
.tools-page .pp-row.three>*{flex:1;}
.tools-page .pp-row.tight{align-items:center;}
.tools-page .pp-row>.pp-btn{flex:1;}
.tools-page .pp-row .grow{flex:1;}
.tools-page .pp-btn{background:var(--hover); border:1px solid var(--line); color:var(--text); padding:9px 10px;
    border-radius:8px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600;
    transition:background .15s,border-color .15s,filter .15s; white-space:nowrap;}
.tools-page .pp-btn:hover:not(:disabled){background:var(--accent); border-color:var(--accent); color:#fff;}
.tools-page .pp-btn:disabled{opacity:.4; cursor:not-allowed;}
.tools-page .pp-btn.wide{width:100%; margin-top:4px;}
.tools-page .pp-btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.tools-page .pp-btn.primary:hover:not(:disabled){filter:brightness(1.12);}
.tools-page .pp-color{width:38px; height:38px; border:1px solid var(--line); border-radius:8px; background:none; cursor:pointer; padding:2px; flex:0 0 auto;}
.tools-page .pp-input{width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); padding:9px; border-radius:8px; outline:none; font-family:inherit;}
.tools-page .pp-input:focus{border-color:var(--accent);}
.tools-page .pp-x{color:var(--muted); font-weight:700;}
.tools-page .pp-check{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:10px;}
.tools-page .pp-note{font-size:11.5px; color:var(--muted); line-height:1.45; margin-top:8px;}
.tools-page .pp-panels::-webkit-scrollbar,.tools-page .pp-panel-body::-webkit-scrollbar,.tools-page .pp-rail::-webkit-scrollbar{width:8px;}
.tools-page .pp-panels::-webkit-scrollbar-thumb,.tools-page .pp-panel-body::-webkit-scrollbar-thumb,.tools-page .pp-rail::-webkit-scrollbar-thumb{background:#34345E; border-radius:6px;}
.tools-page .pp-align{display:inline-flex; gap:2px;}
.tools-page .pp-ibtn{background:var(--bg); border:1px solid var(--line); color:var(--text); width:28px; height:26px;
    border-radius:6px; cursor:pointer; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0;}
.tools-page .pp-ibtn:hover{background:var(--hover);}
.tools-page .pp-ibtn.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.tools-page .pp-ibtn svg{display:block;}
.tools-page .pp-align-elem{margin-top:6px;}
.tools-page .pp-align-elem .plabel{display:block; margin-bottom:6px;}
.tools-page .pp-align-grid{display:flex; gap:5px; flex-wrap:wrap;}
.tools-page .dz-actions{display:flex; gap:10px; margin-top:16px;}
.tools-page #textEditor{position:absolute; display:none; z-index:10;
    min-width:10px; min-height:1em; padding:0; margin:0;
    background:rgba(108,107,216,.14); border:1px dashed var(--accent);
    outline:none; white-space:pre; overflow:visible;
    font-family:var(--body);}
.tools-page .pp-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,.55); z-index:200;}
.tools-page .pp-modal-card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:24px; width:320px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.tools-page .pp-modal-card h3{margin-bottom:16px; font-size:18px;}
.tools-page .pp-field{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.tools-page .pp-field label{width:110px; color:var(--muted); font-size:13px;}
.tools-page .pp-field input[type="number"],.tools-page .pp-field select{flex:1; background:var(--bg); border:1px solid var(--line); color:var(--text);
    padding:9px; border-radius:8px; outline:none; font-family:inherit;}
.tools-page .pp-field input[type="number"]:focus,.tools-page .pp-field select:focus{border-color:var(--accent);}
.tools-page .pp-field input[type="color"]{width:34px; height:34px; border:1px solid var(--line); border-radius:8px; background:none; cursor:pointer; padding:2px;}
.tools-page .pp-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.tools-page .pp-app.light{--bg:#EFEFF9; --topbar:#ffffff; --panel:#ffffff; --panel2:#F7F7FC;
    --stage:#D2D2E6; --line:#E4E4F0; --text:#0D0D1C; --muted:#4A4A6E; --hover:#EDEDFB;}
@media(max-width:820px){.tools-page .pp-panels{width:230px; flex-basis:230px;}
.tools-page .pp-link{display:none;}
}
/* Phones: the side-by-side rail | stage | panels layout left the canvas about
   130px wide. Stack it instead: options bar, a swipeable tool row, the canvas,
   then the panels in a scrolling drawer underneath. */
@media(max-width:640px){
.tools-page--editor{height:calc(100dvh - var(--header-h)); min-height:560px;}
.tools-page .pp-topbar{flex-wrap:wrap; height:auto; padding:6px 10px; row-gap:4px;}
.tools-page .pp-logo{font-size:15px;}
.tools-page .pp-optionsbar{order:3; flex:1 0 100%; overflow-x:auto; overflow-y:hidden; white-space:nowrap; padding-bottom:4px; scrollbar-width:none;}
.tools-page .pp-optionsbar::-webkit-scrollbar{display:none;}
.tools-page .pp-body{flex-direction:column;}
.tools-page .pp-rail{width:auto; flex:0 0 auto; flex-direction:row; padding:6px 8px; overflow-x:auto; overflow-y:hidden;
    border-right:none; border-bottom:1px solid var(--line); scrollbar-width:none;}
.tools-page .pp-rail::-webkit-scrollbar{display:none;}
.tools-page .pp-rail-group{flex-direction:row;}
.tools-page .pp-rail-divider{width:1px; height:26px; margin:0 5px;}
.tools-page .pp-tool,.tools-page .pp-act{flex:0 0 auto; width:40px; height:40px;}
.tools-page .pp-stage{flex:1 1 auto; min-height:260px;}
.tools-page .pp-panels{width:auto; flex:0 0 38%; border-left:none; border-top:1px solid var(--line);}
.tools-page .pp-panel.grow-panel{min-height:0;}
.tools-page .pp-empty .dz-icon{font-size:48px;}
}