/* ===== Scoped styles so nothing leaks outside .pbs ===== */
.pbs,*{box-sizing:border-box}
.pbs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--background);color:var(--text);line-height:1.6}
.pbs .container{max-width:100%;margin:0 auto;}
.pbs .main{padding:0}
.pbs .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:start}
@media (max-width:1024px){.pbs .grid{grid-template-columns:1fr;gap:24px}}
.pbs .card{background:var(--gradient-surface);border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:var(--shadow);transition:all .3s ease;position:relative;overflow:hidden}
.pbs .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);opacity:0;transition:opacity .3s ease}
.pbs .card:hover::before{opacity:1}
.pbs .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-light)}
.pbs .card-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.pbs .card-icon{width:48px;height:48px;background:var(--gradient-primary);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}
.pbs .card-title{font-size:24px;font-weight:700;margin-bottom:4px}
.pbs .card-subtitle{font-size:14px;color:var(--text-muted);font-weight:500}
.pbs label{display:block;margin-bottom:8px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.pbs .form-group{margin-bottom:24px}
.pbs .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pbs .form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width:768px){.pbs .form-row,.pbs .form-row-3{grid-template-columns:1fr}}
.pbs input,.pbs select,.pbs textarea{width:100%;padding:16px;background:var(--surface-hover);border:2px solid var(--border);border-radius:12px;color:var(--text);font-size:15px;font-weight:500;transition:all .2s ease;outline:none}
.pbs input:focus,.pbs select:focus,.pbs textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(59,130,246,.1);transform:translateY(-1px)}
.pbs input::placeholder{color:var(--text-muted)}
.pbs select{cursor:pointer;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 16px center;background-repeat:no-repeat;background-size:16px;padding-right:48px;appearance:none}
.pbs .checkbox-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;padding:24px;background:var(--surface-hover);border-radius:16px;border:1px solid var(--border);margin-top:16px}
.pbs .checkbox-item{display:flex;align-items:center;gap:12px}
.pbs .checkbox-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary);cursor:pointer}
.pbs .checkbox-item label{margin:0;cursor:pointer;font-weight:500;font-size:14px}
.pbs .btn-group{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.pbs .btn{padding:16px 30px;border:2px solid var(--border);border-radius:12px;background:var(--surface-hover);color:var(--text);cursor:pointer;font-weight:600;font-size:14px;transition:all .2s ease;display:inline-flex;align-items:center;gap:8px;text-decoration:none;position:relative;overflow:hidden}
.pbs .btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}
.pbs .btn:hover::before{left:100%}
.pbs .btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.2)}
.pbs .btn.primary{background:var(--gradient-primary);border-color:transparent;color:#fff;box-shadow:0 8px 25px rgba(59,130,246,.3)}
.pbs .btn.primary:hover{box-shadow:0 12px 35px rgba(59,130,246,.4)}
.pbs .btn.success{background:var(--secondary);border-color:transparent;color:#fff;box-shadow:0 8px 25px rgba(34,197,94,.3)}
.pbs .btn.success:hover{box-shadow:0 12px 35px rgba(34,197,94,.4)}
.pbs .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.pbs .preview-container{min-height:400px;background:linear-gradient(135deg,var(--surface) 0%,var(--surface-hover) 100%);border:2px dashed var(--border);border-radius:20px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:all .3s ease}
.pbs .preview-container:hover{border-color:var(--primary);background:linear-gradient(135deg,var(--surface) 0%,rgba(59,130,246,.05) 100%)}
.pbs .preview-placeholder{text-align:center;color:var(--text-muted)}
.pbs .preview-placeholder i{font-size:64px;margin-bottom:16px;opacity:.5}
.pbs .preview-placeholder h3{font-size:20px;font-weight:600;margin-bottom:8px}
.pbs .preview-placeholder p{font-size:14px;font-weight:500}
.pbs #barcode{max-width:100%;height:auto;filter:drop-shadow(0 8px 25px rgba(0,0,0,.2));animation:pbsSlideIn .5s ease}
.pbs .message{padding:16px 20px;border-radius:12px;margin-top:16px;font-weight:500;display:none;align-items:center;gap:12px;animation:pbsSlideIn .3s ease}
.pbs .message.show{display:flex}
.pbs .message.success{background:var(--secondary-light);border:1px solid var(--secondary);color:var(--secondary)}
.pbs .message.error{background:rgba(239,68,68,.1);border:1px solid var(--error);color:var(--error)}
.pbs .message.warning{background:rgba(245,158,11,.1);border:1px solid var(--warning);color:var(--warning)}
.pbs .message.info{background:var(--primary-light);border:1px solid var(--primary);color:var(--primary)}
.pbs .pro-tip{background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.2);border-radius:16px;padding:20px;margin-top:24px}
.pbs .pro-tip-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pbs .pro-tip-icon{width:32px;height:32px;background:rgba(59,130,246,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--primary)}
.pbs .pro-tip h4{font-size:16px;font-weight:600}
.pbs .pro-tip p{font-size:14px;color:var(--text-muted);line-height:1.5}

/* Animations */
@keyframes pbsSlideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pbsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}
.pbs .loading{position:relative}
.pbs .loading::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--primary);border-top:2px solid transparent;border-radius:50%;animation:pbsSpin 1s linear infinite}
@keyframes pbsSpin{to{transform:rotate(360deg)}}

/* Color tokens (default DARK). Change to light by setting data-theme="light" on .pbs */
.pbs{
  --primary:hsl(220,91%,58%);
  --primary-dark:hsl(220,91%,48%);
  --primary-light:hsl(220,91%,95%);
  --secondary:hsl(142,76%,36%);
  --secondary-light:hsl(142,76%,95%);
  --background:hsl(220,13%,9%);
  --surface:hsl(220,13%,12%);
  --surface-hover:hsl(220,13%,16%);
  --text:hsl(220,9%,95%);
  --text-muted:hsl(220,9%,65%);
  --border:hsl(220,13%,20%);
  --border-light:hsl(220,13%,25%);
  --success:hsl(142,76%,56%);
  --warning:hsl(38,92%,50%);
  --error:hsl(0,84%,60%);
  --shadow:0 25px 50px -12px rgba(0,0,0,.25);
  --shadow-lg:0 35px 60px -12px rgba(0,0,0,.4);
  --gradient-primary:linear-gradient(135deg,hsl(220,91%,58%) 0%,hsl(262,83%,58%) 100%);
  --gradient-surface:linear-gradient(135deg,hsl(220,13%,12%) 0%,hsl(220,13%,14%) 100%);
}
.pbs[data-theme="light"]{
  --background:hsl(220deg 13% 97% / 0%);
  --surface:#fff;
  --surface-hover:hsl(220,13%,95%);
  --text:hsl(220,13%,9%);
  --text-muted:hsl(220,9%,35%);
  --border:hsl(220,13%,85%);
  --border-light:hsl(220,13%,75%);
  --shadow:0 25px 50px -12px rgba(0,0,0,.1);
  --shadow-lg:0 35px 60px -12px rgba(0,0,0,.15);
  --gradient-surface:linear-gradient(135deg,#fff 0%,hsl(220,13%,98%) 100%);
}

@media (max-width:768px){
  .pbs .container{padding:16px}
  .pbs .card{padding:24px}
  .pbs .card-title{font-size:20px}
  .pbs .btn-group{flex-direction:column}
  .pbs .btn{width:100%;justify-content:center}
}

/* Auto-detect UI */
.pbs .detected-wrap{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pbs .detected-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-hover);font-size:12px;font-weight:600;color:var(--text-muted)}
.pbs .detected-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pbsPulse 2s infinite}
.pbs .detected-note{font-size:12px;color:var(--text-muted)}