.pkg-root{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem;}
.pkg-templates{display:flex;flex-direction:column;gap:0.5rem;}
.pkg-templates-label{font-size:0.75rem;font-weight:600;color:var(--text-muted,#6b7280);text-transform:uppercase;letter-spacing:0.04em;}
.pkg-chips{display:flex;flex-wrap:wrap;gap:0.5rem;}
.pkg-chip{display:inline-flex;align-items:center;padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;color:var(--text-muted,#6b7280);background:var(--surface-muted,rgba(0,0,0,.05));border:1px solid var(--border,rgba(0,0,0,.1));border-radius:999px;cursor:pointer;transition:color .15s ease,background .15s ease,border-color .15s ease;-webkit-tap-highlight-color:transparent;}
.pkg-chip:hover{color:var(--text-main,#111);background:var(--surface-muted,rgba(0,0,0,.08));border-color:var(--border,rgba(0,0,0,.15));}
.pkg-chip:focus-visible{outline:2px solid var(--primary,#2563eb);outline-offset:2px;}
.pkg-chip.is-selected{color:#fff;background:var(--primary,#2563eb);border-color:var(--primary,#2563eb);}
.pkg-layout{display:flex;flex-direction:column;gap:1.25rem;}
.pkg-builder{background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.pkg-accordion{display:flex;flex-direction:column;}
.pkg-block{border-bottom:1px solid var(--border,rgba(0,0,0,.06));}
.pkg-block:last-child{border-bottom:none;}
.pkg-block-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.25rem;font-size:0.9375rem;font-weight:600;color:var(--text-main,#111);background:transparent;border:none;cursor:pointer;text-align:left;transition:background .15s ease;-webkit-tap-highlight-color:transparent;}
.pkg-block-head:hover{background:var(--surface-muted,rgba(0,0,0,.03));}
.pkg-block-head:focus-visible{outline:2px solid var(--primary,#2563eb);outline-offset:-2px;}
.pkg-block-icon{display:inline-block;width:1.25rem;height:1.25rem;background:currentColor;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");mask-size:contain;mask-repeat:no-repeat;mask-position:center;opacity:.6;transition:transform .2s ease;}
.pkg-block-head[aria-expanded="true"] .pkg-block-icon{transform:rotate(180deg);}
.pkg-block-body{padding:0 1.25rem 1.25rem;}
.pkg-block-body[hidden]{display:none;}
.pkg-field{margin-bottom:1rem;}
.pkg-field:last-child{margin-bottom:0;}
.pkg-label{display:block;margin-bottom:0.375rem;font-size:0.8125rem;font-weight:500;color:var(--text-muted,#6b7280);}
.pkg-input,.pkg-select,.pkg-textarea{width:100%;padding:0.625rem 0.875rem;font-size:0.9375rem;color:var(--text-main,#111);background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none;}
.pkg-input::placeholder,.pkg-textarea::placeholder{color:var(--text-muted,#9ca3af);}
.pkg-input:focus,.pkg-select:focus,.pkg-textarea:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.pkg-textarea{min-height:4rem;resize:vertical;}
.pkg-select{cursor:pointer;}
.pkg-tags{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.5rem;}
.pkg-tag{display:inline-flex;align-items:center;gap:0.25rem;padding:0.25rem 0.5rem;font-size:0.8125rem;color:var(--text-muted,#6b7280);background:var(--surface-muted,rgba(0,0,0,.06));border-radius:6px;}
.pkg-tag-remove{display:inline-flex;padding:0;margin-left:0.125rem;font-size:1rem;line-height:1;color:var(--text-muted,#9ca3af);background:none;border:none;cursor:pointer;border-radius:2px;}
.pkg-tag-remove:hover{color:#dc2626;}
.pkg-script-list{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem;}
.pkg-script-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;}
.pkg-script-name{flex:0 0 5rem;min-width:5rem;padding:0.5rem 0.75rem;font-size:0.8125rem;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:6px;background:var(--surface,#fff);color:var(--text-main,#111);}
.pkg-script-cmd{flex:1;min-width:0;padding:0.5rem 0.75rem;font-size:0.8125rem;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:6px;background:var(--surface,#fff);color:var(--text-main,#111);}
.pkg-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;font-size:1.25rem;line-height:1;color:#fff;background:#dc2626;border:none;border-radius:6px;cursor:pointer;transition:background .15s ease;}
.pkg-remove:hover{background:#b91c1c;}
.pkg-add-btn{padding:0.5rem 1rem;font-size:0.875rem;font-weight:600;color:var(--primary,#2563eb);background:transparent;border:1px solid var(--primary,#2563eb);border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease;}
.pkg-add-btn:hover{color:#fff;background:var(--primary,#2563eb);}
.pkg-dep-add{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-bottom:0.75rem;}
.pkg-dep-add .pkg-input{flex:1;min-width:8rem;}
.pkg-version-in{flex:0 0 6rem;}
.pkg-dep-list{display:flex;flex-direction:column;gap:0.375rem;}
.pkg-dep-item{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.5rem 0.75rem;font-size:0.8125rem;background:var(--surface-muted,rgba(0,0,0,.04));border:1px solid var(--border,rgba(0,0,0,.08));border-radius:8px;}
.pkg-dep-item span:first-child{font-weight:500;color:var(--text-main,#111);}
.pkg-dep-item span:last-child{color:var(--text-muted,#6b7280);}
.pkg-output{display:flex;flex-direction:column;min-height:280px;background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.pkg-output-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.75rem 1rem;border-bottom:1px solid var(--border,rgba(0,0,0,.06));background:var(--surface-muted,rgba(0,0,0,.02));}
.pkg-output-label{font-size:0.75rem;font-weight:600;color:var(--text-muted,#6b7280);text-transform:uppercase;letter-spacing:0.04em;}
.pkg-actions{display:flex;flex-wrap:wrap;gap:0.5rem;}
.pkg-btn{padding:0.5rem 1rem;font-size:0.875rem;font-weight:600;border-radius:8px;cursor:pointer;transition:background .2s ease,transform .05s ease;-webkit-tap-highlight-color:transparent;border:1px solid transparent;}
.pkg-btn-primary{color:#fff;background:var(--primary,#2563eb);border-color:var(--primary,#2563eb);}
.pkg-btn-primary:hover{background:var(--primary-dark,#1d4ed8);border-color:var(--primary-dark,#1d4ed8);}
.pkg-btn-secondary{color:var(--text-main,#111);background:var(--surface,#fff);border-color:var(--border,rgba(0,0,0,.12));}
.pkg-btn-secondary:hover{background:var(--surface-muted,rgba(0,0,0,.05));}
.pkg-btn:active{transform:scale(0.98);}
.pkg-editor{flex:1;min-height:220px;width:100%;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:0.8125rem;line-height:1.55;border:none;resize:vertical;background:var(--surface,#fff);color:var(--text-main,#111);-webkit-appearance:none;appearance:none;}
.pkg-editor::placeholder{color:var(--text-muted,#9ca3af);}
.pkg-editor:focus{outline:none;}
@media (min-width:768px){.pkg-layout{flex-direction:row;align-items:stretch;gap:1.5rem;}
.pkg-builder{flex:0 0 340px;max-width:340px;}
.pkg-output{flex:1;min-width:0;min-height:360px;}
.pkg-editor{min-height:320px;}
.pkg-output-bar{padding:1rem 1.25rem;}
.pkg-editor{padding:1.25rem;font-size:0.875rem;min-height:340px;}
}
@media (min-width:1024px){.pkg-builder{flex:0 0 380px;max-width:380px;}
.pkg-block-head,.pkg-block-body{padding-left:1.5rem;padding-right:1.5rem;}
.pkg-block-body{padding-bottom:1.5rem;}
}