/* Pixtov v12 — tidy toolbars, Find a tool, cleaner editor look. MIT, (c) 2026 Pixtov by Lieby */
#editor .toolbar{gap:2px;padding:0 6px;box-sizing:border-box;align-items:center;scrollbar-width:thin}
#editor .toolbar .tool{min-width:62px;border-radius:10px;margin:5px 1px;height:auto;align-self:stretch;transition:background .12s,color .12s}
#editor .toolbar .tool:hover{background:rgba(91,76,240,.07)}
#editor .toolbar .tool span{font-size:12px;line-height:1.15;white-space:nowrap}
#editor .toolbar .tool-sep{width:1px;background:#e3e5ef;margin:12px 4px;flex:0 0 1px;align-self:stretch}
.v12-chip{position:relative}
.v12-caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;margin-top:2px}
.v12-chip .v12-caret{position:absolute;top:8px;inset-inline-end:8px}
#editor .toolbar .tool.v12-pin{min-width:52px}
#editor .toolbar .tool.v12-pin.danger:hover{background:rgba(220,40,60,.08)}
/* font name chip + size box */
#editor .toolbar .v12-font{flex-direction:row;gap:6px;min-width:120px;max-width:170px;padding:0 10px;margin:12px 3px;border:1px solid #d9dcea;background:#fff;border-radius:10px;align-self:center;height:40px}
#editor .toolbar .v12-font .v12-fname{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
#editor .toolbar .v12-font .v12-caret{position:static}
.v12-size{display:flex;align-items:center;border:1px solid #d9dcea;border-radius:10px;height:40px;margin:0 3px;flex-shrink:0;background:#fff;overflow:hidden;align-self:center}
.v12-size .v12-sb{font-size:20px;line-height:1;width:32px;height:38px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;padding:0}
.v12-size .v12-sb:hover{background:rgba(91,76,240,.08)}
.v12-size .v12-sb svg{width:16px;height:16px;margin:0}
.v12-size input{width:44px;height:38px;border:0;border-inline:1px solid #e6e8f2;text-align:center;font-size:15px;font-weight:600;background:transparent;color:inherit;padding:0;outline:none;-moz-appearance:textfield}
.v12-size input:focus{background:rgba(91,76,240,.06)}
/* pop-up menus */
.v12-pop{display:none;position:fixed;z-index:60;width:380px;max-width:calc(100vw - 16px);max-height:min(60vh,460px);overflow:auto;background:#fff;color:#1d2033;border:1px solid #e3e5ef;border-radius:16px;box-shadow:0 18px 50px rgba(20,22,50,.22),0 2px 8px rgba(20,22,50,.08);padding:8px 10px 12px;box-sizing:border-box}
.v12-pop.v12-open{display:block;animation:v12in .14s ease-out}
@keyframes v12in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.v12-pop-h{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 6px;font-size:14px}
.v12-pop-x{border:0;background:transparent;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:inherit}
.v12-pop-x:hover{background:#f1f2f8}.v12-pop-x svg{width:18px;height:18px}
.v12-pop-find{width:calc(100% - 4px);font:inherit;font-size:14px;color:#6b708a;background:#f7f8fc;cursor:pointer;display:flex;align-items:center;gap:8px;border:1px solid #d9dcea;border-radius:10px;padding:0 10px;margin:0 2px 8px;height:38px}
.v12-pop-find svg{width:18px;height:18px;opacity:.6;flex-shrink:0}
.v12-pop-find input{border:0;outline:none;flex:1;font-size:15px;background:transparent;color:inherit;min-width:0}
.v12-pop-g{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
#editor .toolbar .v12-pop .tool{min-width:0;width:auto;margin:0;padding:10px 4px 8px;height:auto;flex-direction:column;border-radius:10px}
#editor .toolbar .v12-pop .tool span{white-space:normal;text-align:center;font-size:12px}
@media (max-width:699px){.v12-pop{width:auto;border-radius:16px 16px 12px 12px;max-height:55vh}.v12-pop-g{grid-template-columns:repeat(4,1fr)}
 #editor .toolbar .v12-font{min-width:96px;max-width:120px}#editor .toolbar .v12-font .v12-fname{max-width:84px;font-size:14px}.v12-size input{width:38px}.v12-size .v12-sb{width:28px}}
/* top bar: Find a tool */
.v12-findbtn{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;margin:0 6px;border:1px solid #d9dcea;border-radius:10px;background:#f7f8fc;color:#6b708a;font:inherit;font-size:14px;cursor:pointer;flex-shrink:0;min-width:0}
.v12-findbtn:hover{border-color:#b9bde0;color:#1d2033}
.v12-findbtn svg{width:18px;height:18px}
.v12-findbtn kbd{font:11px/1 inherit;border:1px solid #d9dcea;border-radius:5px;padding:2px 5px;background:#fff;color:#8a8fa8}
@media (max-width:1000px){.v12-findbtn span,.v12-findbtn kbd{display:none}.v12-findbtn{width:38px;padding:0;justify-content:center;border-color:transparent;background:transparent;margin:0 2px}}
@media (max-width:699px){.v12-findbtn{display:none !important}}
/* finder dialog */
.v12-finder{display:none;position:fixed;inset:0;z-index:2000;background:rgba(18,20,40,.35);align-items:flex-start;justify-content:center;padding-top:9vh;box-sizing:border-box}
.v12-finder.v12-open{display:flex}
.v12-f-box{width:min(600px,94vw);background:#fff;color:#1d2033;border-radius:16px;box-shadow:0 30px 80px rgba(10,12,40,.35);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
.v12-f-in{display:flex;align-items:center;gap:10px;padding:0 14px;height:58px;border-bottom:1px solid #eceef5}
.v12-f-in svg{width:22px;height:22px;opacity:.55;flex-shrink:0}
.v12-f-in input{flex:1;border:0;outline:none;font-size:18px;background:transparent;color:inherit;min-width:0}
.v12-f-x{border:0;background:transparent;cursor:pointer;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:inherit}
.v12-f-x:hover{background:#f1f2f8}
.v12-f-list{overflow:auto;padding:6px}
.v12-f-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;padding:9px 10px;border-radius:10px;cursor:pointer;color:inherit;font:inherit;text-align:start}
.v12-f-item.sel{background:#f0eeff}
.v12-f-ic{width:30px;height:30px;border-radius:8px;background:#f3f4fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.v12-f-ic svg{width:18px;height:18px;margin:0}.v12-emo{font-size:16px}
.v12-f-item.how .v12-f-ic{background:#fff6dd}
.v12-f-l{flex:1;font-size:15px}
.v12-f-s{font-size:12px;color:#8a8fa8;white-space:nowrap;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.v12-f-none{padding:22px;text-align:center;color:#8a8fa8}
.v12-f-foot{padding:8px 14px;font-size:12px;color:#9a9eb5;border-top:1px solid #eceef5}
@media (max-width:699px){.v12-finder{padding-top:0;align-items:stretch}.v12-f-box{width:100vw;max-height:none;height:100%;border-radius:0}}
/* empty side panel (desktop) */
.v12-empty{display:none}
@media (min-width:1100px) and (min-height:560px){
 .ld-win #editor::after{content:none !important;display:none !important}
 .ld-win #editor .v12-empty{display:flex;flex-direction:column;position:absolute;top:52px;bottom:68px;right:0;width:var(--ldw);box-sizing:border-box;padding:22px 24px;background:#f7f8fc;border-left:1px solid #e3e5ef;z-index:1;gap:10px;overflow:auto}
 .ld-win[dir=rtl] #editor .v12-empty{right:auto;left:0;border-left:0;border-right:1px solid #e3e5ef}
 .ld-win #editor .v12-empty:not(.v12-on){visibility:hidden}
}
.v12-e-find{display:flex;align-items:center;gap:10px;height:46px;border:1px solid #d9dcea;border-radius:12px;background:#fff;padding:0 14px;font:inherit;font-size:15px;color:#6b708a;cursor:pointer}
.v12-e-find:hover{border-color:#b9bde0}.v12-e-find svg{width:20px;height:20px}
.v12-e-h{font-weight:700;font-size:14px;margin-top:8px;color:#1d2033}
.v12-e-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v12-e-g button{display:flex;align-items:center;gap:10px;height:52px;border:1px solid #e3e5ef;border-radius:12px;background:#fff;padding:0 12px;font:inherit;font-size:14px;font-weight:600;color:#1d2033;cursor:pointer}
.v12-e-g button:hover{border-color:#5b4cf0;color:#5b4cf0}.v12-e-g svg{width:22px;height:22px;color:#5b4cf0}
.v12-e-p{color:#6b708a;font-size:14px;line-height:1.55;margin:10px 0 0}
.v12-e-tip{color:#9a9eb5;font-size:12px;margin:0}
/* dark mode */
body.dark .v12-pop,body.dark .v12-f-box{background:#1f2333;color:#eef0f8;border-color:#2d3247}
body.dark .v12-f-item.sel{background:#2d2a52}body.dark .v12-f-ic{background:#2a2f44}
body.dark .v12-findbtn,body.dark .v12-pop-find,body.dark .v12-size,body.dark #editor .toolbar .v12-font,body.dark .v12-e-find,body.dark .v12-e-g button{background:#262b3e;border-color:#3a4060;color:#eef0f8}
body.dark .ld-win #editor .v12-empty,body.dark #editor .v12-empty{background:#1a1e2c;border-color:#2d3247}
body.dark .v12-e-h{color:#eef0f8}

#editor .toolbar .tool.v12-hid{display:none !important}
#editor .toolbar .tool.v12-font{height:40px !important;max-height:40px;min-height:0;margin-top:0;margin-bottom:0;flex-direction:row !important}
#editor .toolbar .v12-chip{border:0 !important;box-shadow:none !important}
#editor .toolbar .v12-chip span{font-weight:inherit !important}
.v12-e-s{display:none;color:#6b708a;font-size:15px;line-height:1.55;margin:18px 0 0;text-align:center}
.v12-empty.v12-sel .v12-e-h,.v12-empty.v12-sel .v12-e-g,.v12-empty.v12-sel .v12-e-p{display:none}
.v12-empty.v12-sel .v12-e-s{display:block}