/* Shared by the Beat Library and the Egyptian Beat Generator: filters, fact chips, blueprint drawer */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px 60px; position: relative; z-index: 1; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter { border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: #fff; border-radius: 999px; padding: 8px 14px; cursor: pointer; font: inherit; }
.filter .ar { font-family: 'Cairo', sans-serif; opacity: .8; margin-left: 4px; }
.filter.active { background: linear-gradient(120deg, var(--c1), var(--c2)); border-color: transparent; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.facts span { background: rgba(255, 255, 255, .08); border-radius: 8px; padding: 3px 8px; font-size: .75rem; color: #fff; }
.qc { font-weight: 700; color: #fff; }
.progress { color: var(--muted); font-size: .85rem; }
.ar { font-family: 'Cairo', sans-serif; }

/* Blueprint drawer */
.drawer { position: fixed; inset: 0; z-index: 50; background: rgba(5, 4, 10, .7); display: flex; justify-content: flex-end; }
.drawer-panel { width: min(860px, 100%); height: 100%; overflow-y: auto; background: #120f1b; border-left: 1px solid rgba(255, 255, 255, .1); padding: 0 0 40px; }
.bp-head { padding: 24px; background: linear-gradient(140deg, var(--a), var(--b)); position: sticky; top: 0; z-index: 2; }
.bp-head h2 { font: 800 1.8rem 'Syne', sans-serif; margin: 0; }
.bp-head p { margin: 4px 0 0; opacity: .9; }
.bp-head .x { position: absolute; right: 16px; top: 16px; border: 0; background: rgba(0, 0, 0, .35); color: #fff; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 1.1rem; }
.bp-head .chips { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.bp-body { padding: 8px 24px; }
.bp-sec { border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 14px 0; }
.bp-sec h4 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--a); }
.bp-sec p, .bp-sec li { color: #d6d0e6; font-size: .92rem; line-height: 1.55; margin: 0 0 4px; }
.bp-sec ul { margin: 0; padding-left: 18px; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; font-size: .9rem; }
.kv b { color: var(--muted); font-weight: 500; }
.grid16 { font: 13px/1.6 ui-monospace, Consolas, monospace; background: rgba(0, 0, 0, .35); padding: 10px 12px; border-radius: 10px; overflow-x: auto; white-space: pre; color: #e8e3f5; }
.grid16 .hit { color: var(--a); font-weight: 700; }
.qc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.weak { background: rgba(255, 107, 107, .08); border-left: 3px solid #ff6b6b; padding: 8px 12px; border-radius: 8px; margin-top: 6px; }
.variations { display: grid; gap: 10px; }
.var { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 12px; }
.var p { margin: 4px 0 8px; }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; } .bp-body { padding: 8px 16px; } }