.ptg-app{margin-bottom:2rem;}
.ptg-bar{display:flex;flex-wrap:wrap;gap:0.75rem 1rem;align-items:flex-end;padding:1rem;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:12px;}
.ptg-field{display:flex;flex-direction:column;gap:0.35rem;}
.ptg-field label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted,#64748b);}
.ptg-field input{width:5rem;padding:0.5rem 0.75rem;font-size:1rem;color:var(--text-main,#334155);background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:8px;-moz-appearance:textfield;}
.ptg-field input::-webkit-outer-spin-button,.ptg-field input::-webkit-inner-spin-button{appearance:none;margin:0;}
.ptg-toggles{display:flex;flex-wrap:wrap;gap:0.75rem 1.25rem;align-items:center;}
.ptg-toggle{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.9375rem;color:var(--text-main,#334155);cursor:pointer;}
.ptg-toggle input{width:1.125rem;height:1.125rem;accent-color:var(--primary,#2563eb);}
.ptg-actions{display:flex;gap:0.5rem;margin-left:auto;}
.ptg-btn{padding:0.6rem 1.25rem;font-size:0.9375rem;font-weight:500;border-radius:10px;cursor:pointer;transition:background 0.2s,color 0.2s,border-color 0.2s;border:1px solid transparent;}
.ptg-btn-primary{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.ptg-btn-primary:hover{background:var(--primary-dark,#1d4ed8);border-color:var(--primary-dark,#1d4ed8);}
.ptg-btn-secondary{background:var(--surface,#fff);color:var(--text-main,#334155);border-color:var(--border,#e2e8f0);}
.ptg-btn-secondary:hover{background:var(--surface-muted,#f1f5f9);border-color:var(--text-muted,#cbd5e1);}
.ptg-canvas{margin-top:1rem;padding:1rem;background:var(--surface-muted,#f1f5f9);border:1px solid var(--border,#e2e8f0);border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ptg-output{min-height:4rem;text-align:center;}
.ptg-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:0.25rem;margin:0.2rem 0;white-space:nowrap;}
.ptg-cell{display:inline-flex;align-items:center;justify-content:center;min-width:2.25em;height:2.25em;padding:0.2rem 0.35rem;font-size:clamp(0.75rem,2.5vw,0.9375rem);font-weight:500;color:var(--text-main,#334155);background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:6px;transition:transform 0.15s,background 0.15s,border-color 0.15s;}
.ptg-cell:hover{transform:scale(1.08);background:var(--surface-muted,#f1f5f9);}
.ptg-cell.ptg-hl-fib{background:#fef08a;border-color:#eab308;}
.ptg-cell.ptg-hl-tri{background:#86efac;color:#14532d;border-color:#22c55e;}
.ptg-cell.ptg-hl-hockey{background:#fecaca;color:#991b1b;border-color:#ef4444;}
.ptg-row.ptg-hl-powers2{background:rgba(59,130,246,0.12);border-radius:6px;}
.ptg-sum{margin-left:0.5rem;font-size:0.875rem;font-style:italic;color:var(--text-muted,#64748b);}
.ptg-patterns{margin-top:1rem;padding:0.75rem 0;}
.ptg-patterns-label{display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted,#64748b);margin-bottom:0.5rem;}
.ptg-chips{display:flex;flex-wrap:wrap;gap:0.5rem;}
.ptg-chip{padding:0.4rem 0.85rem;font-size:0.8125rem;font-weight:500;color:var(--text-main,#334155);background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:999px;cursor:pointer;transition:background 0.2s,color 0.2s,border-color 0.2s;}
.ptg-chip:hover{background:var(--surface-muted,#f1f5f9);border-color:var(--text-muted,#cbd5e1);}
.ptg-chip-clear{color:var(--text-muted,#64748b);}
.ptg-chip-clear:hover{color:var(--text-main,#334155);}
.ptg-meta{margin-top:1rem;padding:0.75rem 1rem;font-size:0.875rem;color:var(--text-muted,#64748b);background:var(--surface-muted,#f8fafc);border:1px solid var(--border,#e2e8f0);border-radius:10px;}
.ptg-meta strong{color:var(--text-main,#334155);}
.ptg-error{padding:1rem;font-size:0.9375rem;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;}
@media (max-width: 479px){.ptg-bar{flex-direction:column;align-items:stretch;}.ptg-field input{width:100%;max-width:6rem;}.ptg-actions{margin-left:0;}.ptg-cell{min-width:2em;height:2em;font-size:0.75rem;}}
@media (min-width: 480px){.ptg-actions{margin-left:auto;}}
@media (min-width: 640px){.ptg-row{gap:0.35rem;}.ptg-cell{min-width:2.5em;height:2.5em;}}
