.pieces-heading { display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px;flex-wrap:wrap; }
.pieces-heading h2 { font-size:22px;margin-bottom:5px; }.pieces-heading .btn { flex:0 0 auto; }
.piece-template-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:18px; }
.piece-template { background:#132235;border:1px solid #334155;border-radius:10px;padding:16px;text-align:left;color:#e2e8f0;cursor:pointer; }
.piece-template[aria-pressed="true"] { border-color:#38bdf8;background:#12334a; }.piece-template strong { display:block;font-size:14px;margin-bottom:7px; }.piece-template span { display:block;font-size:11px;color:#a8bacf;line-height:1.5; }
.piece-editor-grid { display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:18px;align-items:start; }
.piece-editor-grid > * { min-width:0; }.piece-editor-grid .card-title { margin-bottom:12px; }
#piece-form .form-group { margin-bottom:14px; }#piece-form input,#piece-form textarea,#piece-form select { margin-top:5px; }#piece-form textarea { resize:vertical;line-height:1.5; }
.piece-image-row { display:flex;gap:6px;margin-top:7px;align-items:center; }.piece-image-row input { min-width:0;margin:0 !important; }.piece-image-row .btn { flex:0 0 auto; }
.piece-appearance { padding-top:12px;margin-bottom:16px;border-top:1px solid #334155; }.piece-appearance summary { cursor:pointer;font-size:12px;font-weight:700;margin-bottom:14px; }.piece-color-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.piece-color-grid input { height:38px;padding:3px; }.piece-color-grid output { display:block;color:#94a3b8;font:11px monospace;margin-top:4px; }
.piece-action-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0; }.piece-action-grid .piece-take { grid-column:1 / -1;font-size:14px;padding:14px; }
#piece-preview-wrap { width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;border:1px solid #334155;border-radius:8px;background:repeating-conic-gradient(#101c2b 0% 25%,#162334 0% 50%) 0 / 32px 32px; }
#piece-preview-frame { position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:top left;pointer-events:none;color-scheme:light;background:transparent; }
.piece-preview-header { display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px; }.piece-badge { font-size:10px;border:1px solid #475569;border-radius:20px;padding:5px 10px;color:#cbd5e1; }.piece-badge.on { border-color:#4ade80;color:#4ade80; }
#piece-preview-status,#piece-editor-status { min-height:18px;color:#fbbf24;line-height:1.5;margin:8px 0; }.piece-library-toolbar { display:flex;gap:8px;margin:12px 0; }.piece-library-toolbar input { flex:1;min-width:0; }.piece-library-toolbar select { flex:0 1 180px; }
.piece-library-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:540px;overflow:auto; }.piece-library-row { background:#101d30;border:1px solid #334155;border-radius:9px;padding:13px;overflow-wrap:anywhere; }.piece-library-row.selected { border-color:#38bdf8; }.piece-library-row strong { font-size:13px; }.piece-library-row p { margin:7px 0; }.piece-library-actions { display:flex;gap:6px;flex-wrap:wrap; }.piece-library-actions .btn { flex:0 0 auto; }
.piece-library-footer { display:flex;gap:8px;flex-wrap:wrap;margin-top:14px; }.piece-library-footer .btn { flex:0 0 auto; }.piece-rundown-edit { display:flex;gap:8px;flex-wrap:wrap;margin:10px 0; }
@media(max-width:1100px) { .piece-template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.piece-editor-grid { grid-template-columns:minmax(290px,340px) minmax(0,1fr); }.piece-library-list { grid-template-columns:1fr; } }
@media(max-width:800px) { .piece-editor-grid { grid-template-columns:minmax(0,1fr); }.piece-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.piece-library-toolbar { flex-wrap:wrap; }.piece-library-toolbar select { flex:1; } }
.piece-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.composer-tools{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.composer-tools .btn{flex:0 0 auto}
.composer-layers{max-height:220px;overflow:auto;display:grid;gap:4px}.composer-layer{border:1px solid #334155;border-radius:5px}.composer-layer.selected{border-color:#38bdf8}.composer-layer button{width:100%;text-align:left}
.composer-properties{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.composer-properties label{min-width:0}.composer-properties input,.composer-properties select,.composer-properties textarea{width:100%}.composer-properties input[type=checkbox]{width:auto;margin-left:10px}#piece-composer-panel h3{font-size:13px;margin-top:18px}