.canvas-preview-wrapper{position:relative;width:100%;background:var(--bs-gray-200);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:1rem;min-height:200px}.canvas-preview-wrapper canvas{max-width:100%;max-height:500px;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.12);object-fit:contain}.phi-tabs{gap:.25rem;flex-wrap:wrap;border-bottom:2px solid var(--bs-gray-200);padding-bottom:0}.phi-tabs .nav-link{font-size:.82rem;font-weight:600;padding:.45rem .85rem;border-radius:6px 6px 0 0;color:var(--bs-gray-600);background:0 0;border:1px solid transparent;border-bottom:none;transition:.2s}.phi-tabs .nav-link:hover{color:var(--bs-dark);background:var(--bs-gray-100)}.phi-tabs .nav-link.active{color:#fff;background:var(--bs-primary);border-color:var(--bs-primary)}.phi-tabs .nav-link i{font-size:.85rem}.form-control-color{width:42px;min-width:42px;padding:.25rem;border-radius:var(--bs-border-radius) 0 0 var(--bs-border-radius);cursor:pointer}.code-snippet{background:#1e1e2e;color:#cdd6f4;border-radius:8px;padding:1rem;font-size:.78rem;font-family:'Fira Code','Courier New',monospace;white-space:pre-wrap;word-break:break-all;max-height:180px;overflow-y:auto;margin:0;scrollbar-width:thin;scrollbar-color:#585b70 #1e1e2e}.code-snippet::-webkit-scrollbar{width:6px}.code-snippet::-webkit-scrollbar-track{background:#1e1e2e}.code-snippet::-webkit-scrollbar-thumb{background:#585b70;border-radius:3px}.phi-preset{font-size:.78rem;padding:.3rem .65rem;border-radius:20px;transition:.15s}.phi-preset:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.1)}.phi-preset.active{background:var(--bs-primary);color:#fff;border-color:var(--bs-primary)}.swatch-box{width:40px;height:40px;border-radius:6px;border:2px solid var(--bs-gray-300);cursor:pointer;transition:transform .15s}.swatch-box:hover{transform:scale(1.1)}#batch-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}#batch-preview-grid .batch-item{background:var(--bs-gray-100);border-radius:8px;overflow:hidden;text-align:center;border:1px solid var(--bs-gray-200);transition:box-shadow .2s}#batch-preview-grid .batch-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}#batch-preview-grid .batch-item canvas{max-width:100%;display:block}#batch-preview-grid .batch-item .batch-label{font-size:.72rem;padding:.35rem;color:var(--bs-gray-600);font-weight:600}.phi-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:#1e1e2e;color:#fff;padding:.65rem 1.5rem;border-radius:30px;font-size:.85rem;font-weight:600;z-index:9999;opacity:0;pointer-events:none;transition:.3s cubic-bezier(.4, 0, .2, 1);box-shadow:0 8px 24px rgba(0,0,0,.25)}.phi-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media (max-width:991.98px){.phi-tabs .nav-link{font-size:.75rem;padding:.35rem .6rem}.canvas-preview-wrapper canvas{max-height:350px}}@media (max-width:575.98px){.phi-tabs{gap:.15rem}.phi-tabs .nav-link{font-size:.7rem;padding:.3rem .45rem}.phi-tabs .nav-link i{display:none}}