:root{--pl-h:780px;--g:#208875;--gd:#16705f;--ink:#203045;--mut:#657182;--line:#d6e3de;--bg:#f5f8f7;--err:#e53935;--warn:#fb8c00;--ok:#2e9e6a}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
.pl-app{display:flex;flex-direction:column;height:var(--pl-h);min-height:480px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.pl-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;flex:0 0 auto;-webkit-overflow-scrolling:touch}
.pl-bgroup{display:flex;gap:6px;flex:0 0 auto}
.pl-views{padding-left:10px;border-left:1px solid var(--line)}
.pl-actions{padding-left:10px;border-left:1px solid var(--line)}
.pl-btn{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;line-height:1}
.pl-btn:hover:not(:disabled){border-color:var(--g)}
.pl-btn:disabled{opacity:.4;cursor:default}
.pl-btn.tog.on{background:#e8f6f1;border-color:var(--g);color:var(--gd)}
.pl-btn.primary,.primary{background:var(--g);border-color:var(--g);color:#fff}
.pl-btn.primary:hover{background:var(--gd)}
.pl-chip{margin-left:auto;flex:0 0 auto;min-height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:600}
.pl-chip.ok{color:var(--ok);border-color:#bfe3d2;background:#effaf4}.pl-chip.warn{color:#b26a00;border-color:#ffd9a0;background:#fff6e5}.pl-chip.err{color:var(--err);border-color:#f5b7b5;background:#fdecea}
.pl-main{display:flex;flex:1 1 auto;min-height:0}
.pl-side{width:320px;flex:0 0 320px;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);min-height:0}
.pl-tabs{display:flex;flex:0 0 auto;border-bottom:1px solid var(--line)}
.pl-tab{flex:1 1 0;min-height:42px;padding:6px 4px;border:0;border-bottom:3px solid transparent;background:none;cursor:pointer;font-size:13px;color:var(--mut)}
.pl-tab.on{color:var(--ink);border-bottom-color:var(--g);font-weight:700}
.pl-badge{display:inline-block;min-width:18px;padding:1px 5px;border-radius:9px;background:var(--warn);color:#fff;font-size:11px;line-height:16px}.pl-badge.err{background:var(--err)}
.pl-panel{display:none;flex:1 1 auto;overflow-y:auto;padding:12px;min-height:0}.pl-panel.on{display:block}
.pl-panel h3{margin:14px 0 8px;font-size:14px}.pl-panel h3:first-child{margin-top:0}
.pl-search{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:10px}
.pl-grp{border-bottom:1px solid #edf1f0;padding:4px 0}.pl-grp summary{cursor:pointer;font-weight:700;padding:8px 2px}
.pl-lrow{display:flex;align-items:center;gap:6px;padding:5px 2px}
.pl-lname{flex:1 1 auto;min-width:0;font-size:13px}
.pl-sz,.pl-sz-fixed{flex:0 0 84px;font-size:12px;color:var(--mut)}
.pl-sz{height:30px;border:1px solid var(--line);border-radius:6px;background:#fff}
.pl-add{flex:0 0 34px;height:34px;border:1px solid var(--g);border-radius:8px;background:#fff;color:var(--g);font-size:20px;line-height:1;cursor:pointer}
.pl-add:hover{background:var(--g);color:#fff}
.pl-form{display:flex;flex-direction:column;gap:10px}
.pl-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut)}
.pl-form input,.pl-form select{height:36px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.pl-notch{display:flex;flex-direction:column;gap:10px}
.pl-wide{min-height:40px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}
.pl-addrow{display:flex;flex-wrap:wrap;gap:6px}
.pl-addrow button,.pl-orow button{min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.pl-orow{display:flex;gap:6px;align-items:center;padding:4px 0}.pl-orow span{flex:1 1 auto}
.pl-muted{color:var(--mut);font-size:12px;line-height:1.5;margin:8px 0 0}
.pl-ok{color:var(--ok);font-weight:600;line-height:1.5}
.pl-sum{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pl-pill{padding:3px 9px;border-radius:12px;font-size:12px;font-weight:700}.pl-pill.err{background:#fdecea;color:var(--err)}.pl-pill.warn{background:#fff3e0;color:#b26a00}.pl-pill.info{background:#e8f1fb;color:#2f5f93}
.pl-issue{display:block;width:100%;margin:0 0 6px;padding:9px 10px;border:1px solid var(--line);border-left-width:4px;border-radius:8px;background:#fff;text-align:left;font-size:13px;line-height:1.45;cursor:pointer}
.pl-issue.error{border-left-color:var(--err)}.pl-issue.warn{border-left-color:var(--warn)}.pl-issue.info{border-left-color:#5b9bd5}
.pl-issue b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut)}
.pl-legend{margin-top:12px;font-size:12px;color:var(--mut)}.pl-legend ul{padding-left:18px;line-height:1.6}
.pl-stage{position:relative;flex:1 1 auto;min-width:0;background:#eef3f2;touch-action:none}
#canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default;user-select:none;-webkit-user-select:none}
.pl-it{cursor:grab}.pl-it.sel{cursor:grabbing}.pl-op{cursor:ew-resize}.pl-rot{cursor:alias}
.pl-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.pl-zoom .pl-btn{width:38px;height:38px;padding:0;font-size:18px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.pl-insp{position:absolute;left:10px;right:60px;bottom:10px;display:none;gap:8px;flex-direction:column;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.97);box-shadow:0 2px 12px rgba(0,0,0,.15);max-width:560px}
.pl-insp.on{display:flex}
.pl-irow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pl-irow input[type=text]{flex:1 1 200px;height:34px;padding:0 8px;border:1px solid var(--line);border-radius:8px}
.pl-irow label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mut)}
.pl-irow input[type=number]{width:68px;height:34px;padding:0 6px;border:1px solid var(--line);border-radius:8px}
.pl-irow select{height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 4px}
.pl-ibtns button{min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.pl-ibtns button.danger{color:var(--err);border-color:#f0c5c3}
.pl-ibtns button.primary{background:var(--g);border-color:var(--g);color:#fff}
.pl-toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);max-width:80%;padding:10px 14px;border-radius:10px;background:#203045;color:#fff;font-size:13px;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .2s}
.pl-toast.on{opacity:1}
.pl-modal{position:fixed;inset:0;z-index:50;background:rgba(20,30,40,.45);display:flex;align-items:center;justify-content:center;padding:14px}
.pl-modal[hidden]{display:none}
.pl-dlg{width:100%;max-width:520px;max-height:90%;overflow:auto;padding:18px;border-radius:14px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.pl-dlg h3{margin:0 0 12px;font-size:18px}
.pl-dlg .pl-x{float:right;border:0;background:none;font-size:22px;cursor:pointer;color:var(--mut)}
.pl-dlg input[type=text],.pl-dlg input[type=number],.pl-dlg select{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:8px;margin:4px 0 10px}
.pl-dlg button.primary{min-height:40px;padding:0 16px;border-radius:8px;border:1px solid var(--g);cursor:pointer}
.pl-slot{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #edf1f0}.pl-slot span{flex:1 1 auto}
.pl-slot button{min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.pl-reco{padding:12px;border-radius:10px;background:#effaf4;border:1px solid #bfe3d2;line-height:1.55;margin:8px 0}
.pl-reco ul{margin:6px 0;padding-left:18px}
.pl-prod{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #edf1f0;text-decoration:none;color:inherit}
.pl-prod img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:#eef3f2;flex:0 0 64px}
.pl-prod b{display:block;font-size:13px;line-height:1.35}.pl-prod span{color:var(--g);font-weight:700}
@media(max-width:760px){
  .pl-main{flex-direction:column-reverse}
  .pl-side{width:100%;flex:0 0 38%;border-right:0;border-top:1px solid var(--line)}
  .pl-stage{flex:1 1 62%}
  .pl-views{display:none}
  .pl-chip{order:-1;margin-left:0}
  .pl-bar{gap:8px}
  .pl-btn{min-height:40px}
  .pl-insp{left:6px;right:56px;bottom:6px;padding:8px}
  .pl-irow input[type=number]{width:60px}
}