:root{
  --ppc-primary:#750F89FF; --ppc-accent:#81d742; --ppc-bg:#0b0b12; --ppc-card:#11131a;
  --ppc-ink:#ffffff; --ppc-ink-dim:#a7adbb; --ppc-panel:#0d0f15; --ppc-ring: rgba(129,215,66,0.55); --ppc-danger:#f4c152;
}
.ppc-wrap{ width:100%; } .ppc-root{ font-family: ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial; color: var(--ppc-ink); background: var(--ppc-bg); border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.ppc-header{ display:flex; gap:12px; align-items:flex-end; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; }
.ppc-title{ font-size: 24px; font-weight: 700; letter-spacing:-.02em; } .ppc-sub{ color: var(--ppc-ink-dim); font-size: 12px; opacity:.9;}
.ppc-row{ display:grid; grid-template-columns: 1fr; gap:24px; } @media (min-width: 1024px){ .ppc-row{ grid-template-columns: 2fr 1fr; gap:24px; } }
.ppc-card{ background: var(--ppc-card); border-radius: 16px; padding:16px; }
.ppc-tabs{ display:flex; gap:8px; flex-wrap:wrap; background:#0e1016; border-radius: 12px; padding:6px; }
.ppc-tab{ padding:10px 12px; border-radius:10px; text-align:center; color:var(--ppc-ink-dim); cursor:pointer; user-select:none; } .ppc-tab.active{ background: var(--ppc-primary); color:#fff; }
.ppc-grid-3{ display:grid; grid-template-columns: 1fr; gap:12px; } @media (min-width: 640px){ .ppc-grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ppc-grid-2{ display:grid; grid-template-columns: 1fr; gap:12px; } @media (min-width: 640px){ .ppc-grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ppc-input, .ppc-select{ width:100%; background:#0b0e16; color:#fff; border:none; border-radius:12px; padding:10px 12px; outline: none; box-shadow: 0 0 0 0 transparent; }
.ppc-input:focus, .ppc-select:focus{ box-shadow: 0 0 0 2px var(--ppc-ring); } .ppc-label{ font-size:11px; text-transform: uppercase; letter-spacing:.06em; color: var(--ppc-ink-dim); margin-bottom:6px; display:block; }
.ppc-switch{ display:flex; align-items:center; gap:10px; } .ppc-switch input[type="checkbox"]{ width: 36px; height: 22px; appearance:none; background:#2a2f42; border-radius:20px; position:relative; outline:none; cursor:pointer; }
.ppc-switch input[type="checkbox"]::after{ content:''; width:16px; height:16px; background:#fff; border-radius:50%; position:absolute; top:3px; left:4px; transition: all .2s ease; }
.ppc-switch input[type="checkbox"]:checked{ background: var(--ppc-accent); } .ppc-switch input[type="checkbox"]:checked::after{ left:16px; }
.ppc-metric{ background: var(--ppc-panel); text-align:center; border-radius:12px; padding:14px; } .ppc-metric .k{ color: var(--ppc-ink-dim); font-size:11px; text-transform:uppercase; letter-spacing:.06em;} .ppc-metric .v{ font-size:20px; font-weight:700; margin-top:4px; color:#fff; }

/* Can visuals */
.ppc-can-viz{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:10px; }
.ppc-can-card{ background:#0b0e16; border-radius:12px; padding:10px; text-align:center; transition:transform .2s ease, box-shadow .2s ease; }
.ppc-can-card.pulse{ animation: ppcPulse .6s ease; }
@keyframes ppcPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.25); } 100%{ box-shadow:0 0 0 10px rgba(255,255,255,0); } }
.ppc-can-bucket{ width:44px; height:58px; margin:0 auto 6px; border-radius:6px 6px 10px 10px; position:relative; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.35); }
.ppc-can-bucket::before{ content:''; position:absolute; top:0; left:0; right:0; height:14px; background:rgba(0,0,0,.25); }
.ppc-can-fill{ position:absolute; left:0; right:0; bottom:0; height:65%; background: var(--ppc-accent); transition: background .2s ease; }
.ppc-can-label{ font-size:11px; color: var(--ppc-ink-dim); }
.ppc-can-count{ font-size:18px; font-weight:700; color:#fff; }
.ppc-can-empty{ filter: grayscale(1) brightness(.8); opacity:.75; }

/* Color wheel */
.ppc-wheel-card{ background: var(--ppc-card); border-radius: 16px; padding: 16px; }
.ppc-wheel{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.ppc-wheel-wrap{ position:relative; width:280px; height:280px; }
.ppc-wheel canvas{ max-width: 280px; width:280px; height:280px; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ppc-wheel-legend{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:8px; min-width:260px; flex:1; }
.ppc-wheel-item{ display:flex; gap:8px; align-items:center; background:#0b0e16; border-radius:10px; padding:8px; cursor:pointer; }
.ppc-wheel-swatch{ width:16px; height:16px; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.ppc-wheel-family{ position:absolute; font-size:11px; color:#fff; opacity:.8; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; text-shadow:0 1px 1px rgba(0,0,0,.35); }

/* General */
.ppc-btn{ background:var(--ppc-primary); color:#fff; border:none; border-radius:10px; padding:8px 12px; cursor:pointer; }
.ppc-btn.ppc-ghost{ background:transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); color:#fff; }

/* Print */
.ppc-print-summary{ background:#fff; color:#111; border-radius:0; padding:0; box-shadow:none; }
.ppc-print-table{ width:100%; border-collapse: collapse; margin-top:10px; }
.ppc-print-table th, .ppc-print-table td{ border:1px solid #ddd; padding:8px; font-size:12px; color:#111; }
.ppc-print-muted{ color:#666; font-size:12px; }


/* === PPC v1.6.9 user mods (mod-a) === */
/* Remove text around the color wheel */
.ppc-wheel-family{ display:none !important; }
/* Add a bit more breathing room between cards */
.ppc-card{ margin-bottom: 16px; }
.ppc-row{ gap: 32px !important; }