
  .pnum-tool .pnum-container { max-width: 900px; }
  .pnum-panel { margin-top:8px; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; padding:22px; border:1px solid var(--border); border-radius:14px; background:var(--card); }
  .pnum-title { margin:0 0 4px; font-size:1.05rem; font-weight:600; }
  .pnum-sub { margin:0 0 16px; color:var(--muted); font-size:.88rem; line-height:1.45; }
  .pnum-label { display:block; margin:0 0 6px; font-size:.82rem; font-weight:600; color:var(--text); }
  .pnum-field { margin-bottom:16px; }
  .pnum-row { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
  .pnum-row .pnum-field { margin-bottom:0; }
  .pnum-row + .pnum-row, .pnum-row + .pnum-field { margin-top:16px; }
  .pnum-panel input[type=number], .pnum-panel select { width:100%; min-height:42px; box-sizing:border-box; padding:9px 12px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:10px; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
  .pnum-panel select { cursor:pointer; }
  .pnum-panel select option { background:var(--card); color:var(--text); }
  .pnum-panel input[type=number]:focus, .pnum-panel select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }  .pnum-pos { display:grid; grid-template-columns:repeat(3, 44px); grid-template-rows:repeat(2, 34px); gap:6px; padding:8px; width:max-content; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb, var(--bg) 55%, var(--card)); }
  .pnum-pos input { position:absolute; opacity:0; pointer-events:none; }
  .pnum-pos label { margin:0; display:grid; place-items:center; height:100%; border:1px solid var(--border); border-radius:7px; background:var(--card); cursor:pointer; transition:border-color .15s ease, background .15s ease; }
  .pnum-pos label::after { content:""; width:12px; height:4px; border-radius:2px; background:var(--muted); opacity:.55; }
  .pnum-pos label:hover { border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
  .pnum-pos input:checked + label { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--card)); }
  .pnum-pos input:checked + label::after { background:var(--accent); opacity:1; }
  .pnum-pos input:focus-visible + label { outline:2px solid var(--accent); outline-offset:2px; }
  .pnum-hint { margin:6px 0 16px;color:var(--muted); font-size:.78rem; line-height:1.4; }
  .pnum-preview { display:flex; flex-direction:column; align-items:center; gap:8px; }
  .pnum-preview canvas { display:block; max-width:100%; height:auto; border:1px solid var(--border); border-radius:6px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06); }
  .pnum-preview-cap { color:var(--muted); font-size:.78rem; text-align:center; }
  .pnum-actions { grid-column:1 / -1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:4px; }
  .pnum-status { margin-left:auto; color:var(--muted); font-size:.9rem; }
  .pnum-status.ok { color:var(--ok); }
  .pnum-status.error { color:var(--error); }
  @media (max-width: 760px) {
    .pnum-panel { grid-template-columns:1fr; padding:16px; }
    .pnum-preview { order:-1; }
    .pnum-preview canvas { max-height:320px; width:auto; }
    .pnum-row { grid-template-columns:1fr 1fr; }
    .pnum-status { width:100%; margin-left:0; }
  }
