/* Anna News Demo API pages — intentionally isolated from editorial and live-score styles. */
.api-page { --api-panel: #07172d; --api-panel-2: #091d38; --api-line: rgba(124,157,205,.2); --api-muted: #9eacc1; padding-bottom: 90px; }
.api-page button, .api-page input, .api-page select, .api-page textarea { font: inherit; }
.api-hero { position: relative; overflow: hidden; margin: 8px 0 28px; padding: clamp(28px,5vw,64px); border: 1px solid var(--api-line); background: radial-gradient(circle at 85% 15%, rgba(118,50,255,.24), transparent 34%), radial-gradient(circle at 10% 95%, rgba(28,135,255,.17), transparent 35%), linear-gradient(135deg,#07172d,#030c1b); }
.api-hero::after { content: "</>"; position: absolute; right: clamp(20px,7vw,100px); top: 50%; color: rgba(154,187,255,.08); font: 800 clamp(5rem,14vw,13rem)/1 Manrope, sans-serif; transform: translateY(-50%); }
.api-hero > * { position: relative; z-index: 1; }
.api-kicker, .api-badge { display: inline-flex; align-items: center; width: fit-content; min-height: 28px; padding: 5px 10px; border: 1px solid rgba(98,171,255,.35); border-radius: 999px; background: rgba(38,104,191,.14); color: #9fd0ff; font-size: .66rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.api-hero h1 { max-width: 800px; margin: 14px 0 12px; font: 800 clamp(2.65rem,6vw,5.8rem)/.95 Manrope,Inter,sans-serif; letter-spacing: -.065em; text-wrap: balance; }
.api-hero p { max-width: 760px; margin: 0; color: #b7c4d8; font-size: clamp(.92rem,1.5vw,1.12rem); line-height: 1.65; }
.api-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.api-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border: 1px solid rgba(101,170,255,.38); border-radius: 7px; background: #0a203d; color: #e9f2ff; font-size: .73rem; font-weight: 800; cursor: pointer; text-decoration: none; transition: transform .18s,border-color .18s,background .18s; }
.api-button:hover { border-color: #61a7ff; background: #0d2a51; transform: translateY(-1px); }
.api-button:focus-visible, .api-tab:focus-visible, .api-category-link:focus-visible, .api-drawer-close:focus-visible { outline: 3px solid rgba(97,167,255,.45); outline-offset: 2px; }
.api-button.primary { border-color: transparent; background: linear-gradient(110deg,#fa185d,#832cff); color: #fff; box-shadow: 0 10px 30px rgba(227,19,96,.2); }
.api-button.danger { border-color: rgba(255,88,116,.45); background: rgba(159,22,55,.2); color: #ffb7c4; }
.api-button[disabled] { opacity: .48; cursor: not-allowed; transform: none; }
.api-notice { margin: 18px 0 0; padding: 13px 15px; border-left: 3px solid #61a7ff; background: rgba(6,23,46,.88); color: #a9bad1; font-size: .72rem; line-height: 1.55; }
.api-directory-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 26px; align-items: start; }
.api-sidebar { position: sticky; top: 88px; padding: 18px; border: 1px solid var(--api-line); background: #061326; }
.api-sidebar h2 { margin: 0 0 12px; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.api-category-list { display: grid; gap: 4px; }
.api-category-link { display: flex; align-items: center; min-height: 38px; padding: 8px 10px; border: 1px solid transparent; color: #a9b8cd; font-size: .71rem; font-weight: 700; }
.api-category-link:hover, .api-category-link.active { border-color: rgba(97,167,255,.25); background: rgba(35,84,145,.17); color: #fff; }
.api-category-sub { margin: 7px 0 10px 14px; padding-left: 12px; border-left: 1px solid #263e61; }
.api-category-sub a { display: block; padding: 5px 0; color: #8295b1; font-size: .65rem; }
.api-mobile-categories { display: none; margin-bottom: 16px; }
.api-drawer-backdrop { position: fixed; z-index: 2200; inset: 0; background: rgba(1,5,14,.8); backdrop-filter: blur(4px); }
.api-drawer { position: fixed; z-index: 2201; top: 0; bottom: 0; left: 0; width: min(86vw,340px); padding: 22px; overflow-y: auto; border-right: 1px solid var(--api-line); background: #061326; box-shadow: 22px 0 60px rgba(0,0,0,.5); }
.api-drawer[hidden], .api-drawer-backdrop[hidden] { display: none; }
.api-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.api-drawer-close { width: 38px; height: 38px; border: 1px solid var(--api-line); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.api-section-heading { margin-bottom: 18px; }
.api-section-heading h2 { margin: 0; font: 750 clamp(1.55rem,3vw,2.3rem)/1.1 Manrope,sans-serif; letter-spacing: -.035em; }
.api-section-heading p { max-width: 750px; margin: 9px 0 0; color: var(--api-muted); font-size: .79rem; line-height: 1.6; }
.api-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.api-card { min-width: 0; display: flex; flex-direction: column; min-height: 240px; padding: 20px; border: 1px solid var(--api-line); background: linear-gradient(145deg,#081930,#061225); transition: transform .18s,border-color .18s; }
.api-card:hover { transform: translateY(-3px); border-color: rgba(97,167,255,.52); }
.api-card.live { border-top: 3px solid #f21b61; background: radial-gradient(circle at 100% 0,rgba(117,45,255,.16),transparent 42%),#07172d; }
.api-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(112,176,255,.25); border-radius: 10px; background: #0a2548; color: #82bdff; font-size: 1.15rem; font-weight: 900; }
.api-card h3 { margin: 16px 0 8px; font: 750 1.04rem/1.2 Manrope,sans-serif; }
.api-card p { flex: 1; margin: 0 0 15px; color: var(--api-muted); font-size: .72rem; line-height: 1.55; }
.api-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.api-labels span { padding: 4px 7px; border: 1px solid #243c61; border-radius: 999px; color: #9fb2ce; font-size: .56rem; font-weight: 700; }
.api-card-link { color: #8ec5ff; font-size: .7rem; font-weight: 800; }
.api-info-blocks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 42px; }
.api-info-block { padding: 22px; border: 1px solid var(--api-line); background: #061326; }
.api-info-block h2, .api-info-block h3 { margin: 0 0 9px; font: 750 1.1rem/1.2 Manrope,sans-serif; }
.api-info-block p { margin: 0; color: var(--api-muted); font-size: .75rem; line-height: 1.66; }
.api-tabs-shell { border: 1px solid var(--api-line); background: #041020; }
.api-tabs { position: sticky; z-index: 20; top: 66px; display: flex; gap: 2px; padding: 8px; overflow-x: auto; border-bottom: 1px solid var(--api-line); background: rgba(4,16,32,.95); backdrop-filter: blur(12px); scrollbar-width: thin; }
.api-tab { flex: 0 0 auto; min-height: 38px; padding: 8px 13px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #94a6c0; font-size: .67rem; font-weight: 800; cursor: pointer; }
.api-tab:hover, .api-tab[aria-selected="true"] { border-color: #294970; background: #0b213f; color: #fff; }
.api-tab-panel { padding: clamp(20px,4vw,42px); }
.api-tab-panel[hidden] { display: none; }
.api-tab-panel h2 { margin: 0 0 15px; font: 750 clamp(1.55rem,3vw,2.25rem)/1.1 Manrope,sans-serif; letter-spacing: -.035em; }
.api-tab-panel h3 { margin: 28px 0 9px; font: 750 1.08rem/1.2 Manrope,sans-serif; }
.api-tab-panel p, .api-tab-panel li { color: #adbbce; font-size: .78rem; line-height: 1.72; }
.api-tab-panel a { color: #91c8ff; text-decoration: underline; text-underline-offset: 3px; }
.api-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 22px 0; padding: 0; list-style: none; counter-reset: steps; }
.api-steps li { min-height: 125px; padding: 18px; border: 1px solid var(--api-line); background: #07172d; counter-increment: steps; }
.api-steps li::before { content: counter(steps); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; background: linear-gradient(135deg,#f21b61,#7135f4); color: #fff; font-size: .67rem; font-weight: 900; }
.api-key-card { max-width: 880px; padding: 22px; border: 1px solid var(--api-line); background: #07172d; }
.api-key-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin: 15px 0; }
.api-key-value { min-width: 0; padding: 13px; overflow: hidden; border: 1px solid #294564; border-radius: 5px; background: #020a16; color: #c5d8ef; font: 600 .75rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow: ellipsis; white-space: nowrap; }
.api-key-value.revealed { color: #a9ffd7; }
.api-key-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.api-status { min-height: 23px; margin: 10px 0 0; color: #9fb0c7; font-size: .7rem; }
.api-status.error { color: #ff99ac; }
.api-status.success { color: #8ce5bd; }
.api-code-tabs { display: flex; gap: 5px; margin-top: 18px; }
.api-code-tab { padding: 7px 11px; border: 1px solid #294564; border-radius: 5px 5px 0 0; background: #07172d; color: #9bacc3; font-size: .64rem; font-weight: 800; cursor: pointer; }
.api-code-tab.active { border-color: #527daf; background: #0b2649; color: #fff; }
.api-code { position: relative; margin: 0; padding: 20px; overflow-x: auto; border: 1px solid #294564; background: #020a16; color: #cce1f9; font: .72rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre; }
.api-tester { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.api-workbench { padding: 20px; border: 1px solid var(--api-line); background: #07172d; }
.api-workbench label { display: grid; gap: 7px; margin-bottom: 13px; color: #dce9f8; font-size: .7rem; font-weight: 750; }
.api-workbench input, .api-workbench select, .api-workbench textarea, .api-modal input, .api-modal select { width: 100%; padding: 11px 12px; border: 1px solid #294564; border-radius: 5px; outline: none; background: #030d1d; color: #edf5ff; }
.api-workbench input:focus, .api-workbench select:focus, .api-workbench textarea:focus, .api-modal input:focus, .api-modal select:focus { border-color: #61a7ff; box-shadow: 0 0 0 3px rgba(97,167,255,.12); }
.api-response { min-height: 360px; margin: 0; padding: 18px; overflow: auto; border: 1px solid #294564; background: #020a16; color: #bfe0ff; font: .69rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; }
.api-doc-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .72rem; }
.api-doc-table th, .api-doc-table td { padding: 11px; border: 1px solid var(--api-line); color: #adbbce; text-align: left; vertical-align: top; }
.api-doc-table th { background: #0a1f3b; color: #fff; }
.api-faq details { border-bottom: 1px solid var(--api-line); }
.api-faq summary { padding: 16px 0; color: #fff; font-size: .8rem; font-weight: 800; cursor: pointer; }
.api-faq p { margin-top: 0; }
.api-modal-backdrop { position: fixed; z-index: 3100; inset: 0; display: grid; place-items: center; padding: 18px; overflow-y: auto; background: rgba(0,4,13,.84); backdrop-filter: blur(7px); }
.api-modal-backdrop[hidden] { display: none; }
.api-modal { width: min(680px,100%); max-height: calc(100vh - 36px); overflow-y: auto; border: 1px solid #31527d; background: #061326; box-shadow: 0 28px 100px rgba(0,0,0,.62); }
.api-modal-head { display: flex; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--api-line); }
.api-modal-head h2 { margin: 0; font: 750 1.35rem/1.2 Manrope,sans-serif; }
.api-modal-close { width: 36px; height: 36px; border: 1px solid #294564; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.api-modal form { padding: 22px; }
.api-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.api-modal label { display: grid; gap: 6px; color: #d9e6f7; font-size: .68rem; font-weight: 750; }
.api-phone-fields { display: grid; grid-template-columns: 100px 1fr; gap: 8px; }
.api-consent { display: grid!important; grid-template-columns: auto 1fr; align-items: start; gap: 9px!important; margin: 17px 0; color: #a9b9ce!important; line-height: 1.5; }
.api-consent input { width: 17px; height: 17px; margin-top: 2px; }
.api-honeypot { position: absolute!important; left: -10000px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; }
.api-privacy-copy { margin: 0 0 14px; color: #91a3ba; font-size: .68rem; line-height: 1.55; }
body.api-overlay-open { overflow: hidden; }
@media (max-width: 980px) {
  .api-directory-layout { grid-template-columns: 1fr; }
  .api-sidebar { display: none; }
  .api-mobile-categories { display: inline-flex; }
  .api-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .api-tester { grid-template-columns: 1fr; }
  .api-tabs { top: 0; }
}
@media (max-width: 700px) {
  .api-page { padding-bottom: 60px; }
  .api-hero { padding: 27px 20px; }
  .api-hero h1 { font-size: clamp(2.25rem,12vw,3.5rem); }
  .api-card-grid, .api-info-blocks, .api-steps, .api-form-grid { grid-template-columns: 1fr; }
  .api-card { min-height: 0; }
  .api-key-row { grid-template-columns: 1fr; }
  .api-tabs-shell { margin-inline: -14px; }
  .api-tab-panel { padding: 22px 16px; }
  .api-modal-backdrop { place-items: start center; }
  .api-phone-fields { grid-template-columns: 86px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .api-card, .api-button { transition: none; } }