.api-tabs{background:var(--brand-surface);border:1px solid var(--brand-border);border-radius:var(--radius-lg);margin:var(--space-lg) 0;overflow:hidden}.api-tabs__header{background:var(--brand-background);border-bottom:1px solid var(--brand-border);display:flex;padding:0}.api-tabs__button{background:none;border:none;border-bottom:3px solid transparent;color:var(--brand-text-secondary);cursor:pointer;flex:1;font-size:1rem;font-weight:600;min-width:120px;padding:var(--space-lg) var(--space-xl);position:relative;transition:all var(--transition-base)}.api-tabs__button:hover{background:var(--brand-surface);color:var(--brand-text-primary)}.api-tabs__button.active{background:var(--brand-surface);border-bottom-color:var(--brand-primary);color:var(--brand-primary)}.api-tabs__button:first-child{border-top-left-radius:var(--radius-lg)}.api-tabs__button:last-child{border-top-right-radius:var(--radius-lg)}.api-tabs__content{display:none;padding:var(--space-xl)}.api-tabs__content.active{display:block}.api-tabs__icon{font-size:1.1em;margin-right:var(--space-sm)}.graphql-endpoint{background:var(--brand-background);border:1px solid var(--brand-border);border-radius:var(--radius-md);margin:var(--space-md) 0;padding:var(--space-lg)}.graphql-endpoint__url{background:var(--brand-surface);border:1px solid var(--brand-border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.9rem;padding:var(--space-sm) var(--space-md);word-break:break-all}.graphql-query{background:var(--brand-background);border:1px solid var(--brand-border);border-radius:var(--radius-md);margin:var(--space-md) 0;overflow:hidden}.graphql-query__header{background:var(--brand-surface);border-bottom:1px solid var(--brand-border);font-weight:600;padding:var(--space-md) var(--space-lg)}.graphql-query__content,.graphql-variables{padding:var(--space-lg)}.graphql-variables{background:var(--brand-surface);border:1px solid var(--brand-border);border-radius:var(--radius-md);margin:var(--space-md) 0}.graphql-variables__title{color:var(--brand-primary);font-size:1.1rem;font-weight:600;margin-bottom:var(--space-md)}@media (max-width:768px){.api-tabs__header{flex-direction:column}.api-tabs__button{border-bottom:none;border-left:3px solid transparent;flex:none;text-align:left}.api-tabs__button.active{border-bottom-color:transparent;border-left-color:var(--brand-primary)}.api-tabs__content{padding:var(--space-lg)}}@media (max-width:480px){.api-tabs__button{font-size:.9rem;padding:var(--space-md) var(--space-lg)}.api-tabs__content{padding:var(--space-md)}}