.q-showcase{border:1px solid var(--qborder-md);border-radius:var(--qradius-lg);overflow:hidden;background:var(--qbg-card);box-shadow:var(--qshadow-sm)}.q-showcase__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 20px 12px;border-bottom:1px solid var(--qborder);background:var(--qbg-sub)}.q-showcase__meta{flex:1;min-width:0}.q-showcase__title{font-size:.875rem;font-weight:700;color:var(--qtext-1);margin:0 0 2px;letter-spacing:-.02em}.q-showcase__desc{font-size:.75rem;color:var(--qtext-3);margin:0;line-height:1.4}.q-showcase__actions{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}.q-showcase__tab-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;font-size:.72rem;font-weight:600;border:1px solid var(--qborder-md);border-radius:var(--qradius-sm);background:var(--qbg-card);color:var(--qtext-3);cursor:pointer;transition:all var(--qt-fast);white-space:nowrap}.q-showcase__tab-btn:hover{border-color:var(--qaccent);color:var(--qaccent)}.q-showcase__tab-btn--active{background:var(--qaccent);border-color:var(--qaccent);color:#fff}.q-showcase__tab-btn:focus-visible{outline:2px solid var(--qaccent);outline-offset:2px}.q-showcase__copy-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;font-size:.72rem;font-weight:700;border:1.5px solid var(--qaccent);border-radius:var(--qradius-sm);background:var(--qaccent);color:#fff;cursor:pointer;transition:all var(--qt-fast);white-space:nowrap;letter-spacing:.01em}.q-showcase__copy-btn:hover,.q-showcase__copy-btn--copied{background:var(--qgreen);border-color:var(--qgreen);color:#fff}.q-showcase__copy-btn:focus-visible{outline:2px solid var(--qaccent);outline-offset:2px}.q-showcase__copy-btn--full{border-color:var(--qaccent-light);background:var(--qaccent-light);color:#fff}.q-showcase__copy-btn--full:hover{background:var(--qaccent);border-color:var(--qaccent);color:#fff}.q-showcase__preview{padding:24px;background:var(--qbg);min-height:60px;position:relative}.q-showcase__code{display:none;position:relative}.q-showcase__code--visible{display:block}.q-showcase__code-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--qbg-sub);border-bottom:1px solid var(--qborder)}.q-showcase__code-lang{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--qtext-4)}.q-showcase__code pre{margin:0;padding:20px 24px;background:var(--qbg-code);color:#e2d9f3;font-family:var(--qfont-mono);font-size:.78rem;line-height:1.65;overflow-x:auto;max-height:520px;-moz-tab-size:2;tab-size:2;white-space:pre}.q-showcase__code code{font-family:inherit;color:inherit}.q-showcase__props{display:none;padding:0;overflow-x:auto}.q-showcase__props--visible{display:block}.q-props-table{width:100%;border-collapse:collapse;font-size:.78rem}.q-props-table th{background:var(--qbg-sub);color:var(--qtext-3);font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;text-align:left;border-bottom:1px solid var(--qborder)}.q-props-table td{padding:9px 16px;border-bottom:1px solid var(--qborder);color:var(--qtext-2);vertical-align:top}.q-props-table tr:last-child td{border-bottom:none}.q-props-table tr:hover td{background:var(--qbg-hover)}.q-props-table .q-prop-name{color:var(--qaccent);font-family:var(--qfont-mono);font-weight:600}.q-props-table .q-prop-type{color:var(--qamber);font-family:var(--qfont-mono);font-size:.72rem}.q-props-table .q-prop-default{color:var(--qtext-4);font-family:var(--qfont-mono);font-size:.72rem}.q-props-table .q-prop-required{display:inline-block;background:var(--qred-bg);color:var(--qred);border:1px solid var(--qred-border);border-radius:4px;font-size:.62rem;font-weight:700;padding:1px 5px;letter-spacing:.04em}.q-section-header{margin-bottom:8px}.q-section-header__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}.q-section-header h2{font-size:1.5rem;font-weight:800;color:var(--qtext-1);letter-spacing:-.04em;margin:0}.q-section-header p{font-size:.875rem;color:var(--qtext-3);margin:0}.q-section-copy-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;font-size:.8rem;font-weight:700;border:2px solid var(--qaccent);border-radius:var(--qradius-md);background:var(--qbg-card);color:var(--qaccent);cursor:pointer;transition:all var(--qt-fast);white-space:nowrap;letter-spacing:.01em;flex-shrink:0}.q-section-copy-btn:hover{background:var(--qaccent);color:#fff;box-shadow:0 4px 14px var(--qaccent-glow)}.q-section-copy-btn--copied{border-color:var(--qgreen);color:var(--qgreen);background:var(--qgreen-bg)}.q-section-copy-btn--copied:hover{background:var(--qgreen);color:#fff;box-shadow:0 4px 14px #05966940}.q-section-copy-btn:focus-visible{outline:2px solid var(--qaccent);outline-offset:2px}.q-copy-toast{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;align-items:center;gap:8px;padding:10px 18px;background:var(--qbg-sidebar);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:var(--qradius-md);box-shadow:var(--qshadow-lg);font-size:.8125rem;font-weight:600;animation:qToastIn .18s ease;pointer-events:none}.q-copy-toast .bi-check-circle-fill{color:var(--qgreen);font-size:1rem}@keyframes qToastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.q-section-divider{height:1px;background:var(--qborder);margin:32px 0}@media (max-width: 600px){.q-showcase__header{flex-direction:column}.q-showcase__actions{width:100%;justify-content:flex-start}.q-showcase__preview{padding:16px}.q-section-header__row{flex-direction:column;align-items:flex-start}}