@font-face {
    font-family: "Millik";
    font-style: normal;
    font-weight: 500;
    src: url("../font/Millik.df4df2a.ttf") format("truetype");
    font-display: swap;
}


@font-face {
    font-family: "TT Norms Pro";
    font-style: normal;
    font-weight: 400;
    src: url("../font/64612b25dea363a679a5fd28_TTNormsPro-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "TT Norms Pro";
    font-style: normal;
    font-weight: 700;
    src: url("../font/64612b24dea363a679a5fc65_TTNormsPro-Bold.ttf") format("truetype");
    font-display: swap;
}

body {
    font-family: "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


.guide-steps {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 1.5rem 0;
}

.guide-steps li {
  margin-bottom: 0.85rem;
  line-height: 1.6;
}

.guide-steps li strong {
  color: #111827;
}

.guide-note {
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid #3b82f6;
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 0 0.375rem 0.375rem 0;
  line-height: 1.6;
}

.brand-logo-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    overflow: visible;
}

.logo {
    font-family: "Millik", sans-serif !important;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.6rem;
    color: #ffffff;
    display: inline-block;
    position: relative;
    z-index: 2;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

html:not(.dark) .logo {
    color: #09090b !important;
}


.lightning-brand-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    overflow: visible;
}

.logo {
    font-family: "Millik", sans-serif !important;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.6rem;
    color: #ffffff;
    display: inline-block;
    position: relative;
    z-index: 2;
    transition: color 0.12s ease, text-shadow 0.12s ease;
}

html:not(.dark) .logo {
    color: #09090b !important;
}


.lightning-canvas {
    position: absolute;
    top: -30px;
    left: -35px;
    width: calc(100% + 70px);
    height: calc(100% + 60px);
    pointer-events: none;
    z-index: 5;
}

html:not(.dark) .brand-logo-container:hover .logo {
    animation: text-voltage-pulse-light 0.42s ease-out forwards;
}

.further-reading {
    position: relative;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(24, 24, 27, 0.9) 0%, rgba(9, 9, 11, 0.95) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.further-reading:hover {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 10px 35px -5px rgba(16, 185, 129, 0.15);
}
.further-reading-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
    pointer-events: none;
}
.further-reading-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.further-reading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 0.75rem;
    flex-shrink: 0;
}
.further-reading-text {
    flex: 1;
}
.further-reading-label {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #10b981;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.further-reading-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
}
.further-reading-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: rgba(27, 27, 31, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 0.75rem;
    color: #e4e4e7;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.further-reading-button:hover {
    background: rgba(39, 39, 42, 0.9);
    border-color: #10b981;
    color: #ffffff;
    transform: translateX(4px);
}
.further-reading-button strong {
    color: #10b981;
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}
.further-reading-button:hover strong {
    transform: translateX(4px);
}
.version-badge {
    background-color: #141416;
    color: #10b981;
    padding: 10px 18px;
    font-family: ui-monospace, monospace;
    border-left: 4px solid #10b981;
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
    margin: 1.5rem 0;
}

.social1-share__button {
    display: flex;
    margin-bottom: 8px;
}

.social1-share__button:last-child {
    margin-bottom: 0;
}

.social1-share__button img {
    width: 28px;
    height: 28px;
    display: block;
}

/* ====================================================
   AUTOMATIC LIGHT THEME (actions when there is no .dark class)
   ==================================================== */
html:not(.dark) {
    color-scheme: light;
}


html:not(.dark) body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}


html:not(.dark) [class*="bg-[#121214]"],
html:not(.dark) [class*="bg-[#09090b]"],
html:not(.dark) [class*="bg-zinc-950"],
html:not(.dark) [class*="bg-zinc-900"] {
    background-color: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}


html:not(.dark) [class*="border-zinc-800"],
html:not(.dark) [class*="border-[#27272a]"],
html:not(.dark) [class*="border-zinc-900"] {
    border-color: #e2e8f0 !important;
}

/* Авто-перефарбування світлого тексту на темний */
html:not(.dark) [class*="text-zinc-100"],
html:not(.dark) [class*="text-white"] {
    color: #0f172a !important;
}

html:not(.dark) [class*="text-zinc-300"],
html:not(.dark) [class*="text-zinc-400"] {
    color: #475569 !important;
}

html:not(.dark) [class*="text-zinc-500"] {
    color: #64748b !important;
}

html:not(.dark) pre,
html:not(.dark) code {
    background-color: #f8fafc !important;
}


/* ====================================================
   ТЕМНА ТЕМА (html.dark)
   ==================================================== */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #09090b !important;
    color: #f4f4f5 !important;
}

/* Повертаємо темний фон для карток з класами dark:bg-... */
html.dark [class*="dark:bg-zinc-900"] {
    background-color: rgba(24, 24, 27, 0.6) !important;
}

html.dark [class*="dark:bg-zinc-950"] {
    background-color: #09090b !important;
}

html.dark [class*="dark:border-zinc-800"] {
    border-color: #27272a !important;
}

/* Кольори тексту для темної теми */
html.dark [class*="dark:text-white"] {
    color: #ffffff !important;
}

html.dark [class*="dark:text-zinc-100"] {
    color: #f4f4f5 !important;
}

html.dark [class*="dark:text-zinc-200"] {
    color: #e4e4e7 !important;
}

html.dark [class*="dark:text-zinc-300"] {
    color: #d4d4d8 !important;
}

html.dark [class*="dark:text-zinc-400"] {
    color: #a1a1aa !important;
}



/* PyDev Systems — product GIF dimensions */


.hub-guide-link {
    margin: 32px 0;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease-in-out;
}

.hub-guide-link a{
    text-decoration:underline;
}

.hub-guide-link a:hover{
    text-decoration:none;
}

.hub-guide-link:hover {
    border-color: #e2e8f0;
    border-left-color: #2563eb;
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -3px rgba(59, 130, 246, 0.1);
}

.hub-guide-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.hub-guide-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #eff6ff;
    border-radius: 8px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.hub-guide-link h3 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
}

.hub-guide-link p {
    margin: 0 0 14px 0 !important;
    color: #475569 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.hub-guide-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #2563eb !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.hub-guide-cta:hover {
    color: #1d4ed8 !important;
}

.hub-guide-cta .arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.hub-guide-cta:hover .arrow {
    transform: translateX(4px);
}

.blog-api-callout {
    margin: 32px 0;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #6366f1; /* Технічний індиго колір */
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease-in-out;
}

.blog-api-callout:hover {
    border-color: #e2e8f0;
    border-left-color: #4f46e5;
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -3px rgba(99, 102, 241, 0.12);
}

.blog-api-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.blog-api-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #e0e7ff;
    border-radius: 8px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.blog-api-callout h3 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
}

.blog-api-callout p {
    margin: 0 0 14px 0 !important;
    color: #475569 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.blog-api-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #4f46e5 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.blog-api-cta:hover {
    color: #4338ca !important;
}

.blog-api-cta .arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.blog-api-cta:hover .arrow {
    transform: translateX(4px);
}


img[src*="p2p-trade-bot-binance/"][src$=".gif"] {
    display: block !important;
    width: 769px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 20px auto !important;
    border-radius: 12px;
}

.alert, .alert h4 {
    color: #c09853;
}
.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 18px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}



.alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 1rem;
}


.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}


.alert-dismissible {
  padding-right: 3.5rem;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}


.p2p-callout {
    background: #f8fafc;
    border-left: 4px solid #f0b90b;
    padding: 18px 22px;
    margin: 25px 0;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.7;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.p2p-callout a {
    color: #2547d0!important;
    font-weight: 700;
    text-decoration: none;
}

.p2p-callout a:hover {
    text-decoration: underline;
}

/* Shop Tables */

figure.table table.table-striped {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

figure.table table.table-striped thead th {
    background: #111827;
    color: #fff;
    padding: 16px;
}

figure.table table.table-striped tbody td {
    padding: 14px;
    border-top: 1px solid #e5e7eb;
}

figure.table table.table-striped tbody tr:hover {
    background: #f9fafb;
}



figure.table table.table-striped td:nth-child(2) {
    background: #fff8e6;
}


hr {
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.2;
    height: 0;
    margin: 28px 0; 
}


p2p-media-section {
    padding: 60px 20px;
    background: #ffffff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.p2p-media-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Відступ між двома блоками відео */
}

/* Базова структура блоку */
.p2p-video-block {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

/* Шаховий порядок: міняємо місцями текст і відео для другого блоку */
.p2p-video-block.block-reverse .p2p-text-content {
    order: 2;
}
.p2p-video-block.block-reverse .p2p-video-content {
    order: 1;
}

/* Стилізація бейджів */
.p2p-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-demo {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.badge-promo {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* Типографіка */
.p2p-text-content h2 {
    font-size: 30px;
    color: #111827;
    margin: 0 0 16px 0;
    font-weight: 700;
    line-height: 1.3;
}

.p2p-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 24px;
}

/* Списки переваг */
.p2p-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.p2p-features li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.feat-icon {
    background: #f3f4f6;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
    flex-shrink: 0;
}

.p2p-features strong {
    display: block;
    font-size: 15px;
    color: #111827;
    margin-bottom: 2px;
}

.p2p-features p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Відео плеєр */
.p2p-video-content {
    position: relative;
    width: 100%;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #000;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Адаптація під мобільні пристрої */
@media (max-width: 968px) {
    .p2p-media-container {
        gap: 60px;
    }
    .p2p-video-block {
        grid-template-columns: 1fr;
        gap: 24px;
    }
 
    .p2p-video-block.block-reverse .p2p-text-content {
        order: 1;
    }
    .p2p-video-block.block-reverse .p2p-video-content {
        order: 2;
    }
    .p2p-text-content h2 {
        font-size: 24px;
    }
}


/* PyDev Systems — emerald technical note */
.prose .border-l-2.border-emerald-500.pl-5 {
    padding-left: 24px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

/* PyDev Systems — section separation */
.prose section + section {
    margin-top: 12px !important;
}


/* PyDev Systems — article section spacing */
.prose h2, .prose h3 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}







.mpesa-faq-item summary{
    font-size:17px;
    font-weight:600;
    padding:18px 20px;
    cursor:pointer;
}

.mpesa-faq-answer{
    padding:0 20px 18px;
    line-height:1.8;
}

/*mpesa*/


.roadmap-box{
    background:#0f172a;
    border:1px solid #334155;
    border-radius:12px;
    overflow:hidden;
    margin:40px 0;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
}

.roadmap-header{
    background:#1e293b;
    color:#fff;
    padding:16px 22px;
    font-size:20px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-bottom:1px solid #334155;
}

.roadmap-item{
    color:#e2e8f0;
    padding:14px 22px;
    border-bottom:1px solid #1e293b;
    transition:.2s;
}

.roadmap-item:last-child{
    border-bottom:none;
}

.roadmap-item:hover{
    background:#162033;
}

.roadmap-item::before{
    content:"✓";
    color:#22c55e;
    font-weight:bold;
    margin-right:12px;
}

.architecture-flow{
    max-width:760px;
    margin:35px auto;
}

.architecture-node{
    position:relative;
    background:#0f172a;
    border:1px solid #334155;
    border-radius:12px;
    padding:18px 22px 18px 72px;
    color:#f8fafc;
    box-shadow:0 8px 24px rgba(15,23,42,.12);
}

.architecture-node strong{
    display:block;
    font-size:18px;
    margin-bottom:4px;
}

.architecture-node small{
    color:#94a3b8;
    font-size:14px;
}

.architecture-number{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:9px;
    background:#1e293b;
    color:#22c55e;
    font-weight:800;
}

.architecture-arrow{
    text-align:center;
    color:#22c55e;
    font-size:26px;
    line-height:1;
    padding:8px 0;
}

.architecture-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin:28px 0 40px;
}

.architecture-card{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:22px;
}


h3{
    margin:0 0 10px;
    color:#0f172a;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-top: .25rem;
}



.architecture-card h3{
    margin:0 0 10px;
    font-size:18px;
    color:#0f172a;
}

.architecture-card p{
    margin:0;
}

.flow-code{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    background:#0f172a;
    border:1px solid #334155;
    border-radius:12px;
    padding:22px;
    margin:25px 0;
    color:#e2e8f0;
}

.flow-code strong{
    color:#22c55e;
    font-size:22px;
}

.lifecycle-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow-x:auto;
    gap:8px;
    background:#0f172a;
    border:1px solid #334155;
    border-radius:12px;
    padding:24px;
    margin:30px 0;
}

.lifecycle-step{
    min-width:110px;
    text-align:center;
    color:#e2e8f0;
}

.lifecycle-step span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin:0 auto 10px;
    border-radius:10px;
    background:#1e293b;
    color:#22c55e;
    font-weight:800;
}

.lifecycle-step strong{
    display:block;
    font-size:13px;
}

.lifecycle-line{
    min-width:35px;
    height:2px;
    background:#334155;
}

@media(max-width:700px){
    .architecture-grid{
        grid-template-columns:1fr;
    }

    .flow-code{
        flex-direction:column;
    }

    .flow-code strong{
        transform:rotate(90deg);
    }

    .lifecycle-box{
        justify-content:flex-start;
    }
}

.daraja-overview{
    background:#0f172a;
    border:1px solid #334155;
    border-radius:14px;
    overflow:hidden;
    margin:30px 0 40px;
    box-shadow:0 12px 30px rgba(15,23,42,.16);
}

.daraja-overview-header{
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px 24px;
    background:#1e293b;
    border-bottom:1px solid #334155;
    color:#f8fafc;
}

.daraja-overview-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:11px;
    background:#0f172a;
    font-size:22px;
}

.daraja-overview-header strong,
.daraja-overview-header small{
    display:block;
}

.daraja-overview-header strong{
    font-size:19px;
    margin-bottom:4px;
}

.daraja-overview-header small{
    color:#94a3b8;
}

.daraja-overview-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    background:#334155;
}

.daraja-overview-step{
    background:#0f172a;
    color:#e2e8f0;
    padding:22px;
}

.daraja-overview-step span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin-bottom:14px;
    border-radius:9px;
    background:#1e293b;
    color:#22c55e;
    font-weight:800;
}

.daraja-overview-step strong,
.daraja-overview-step small{
    display:block;
}

.daraja-overview-step strong{
    margin-bottom:5px;
}

.daraja-overview-step small{
    color:#94a3b8;
}

.status-comparison{
    display:flex;
    align-items:stretch;
    gap:18px;
    margin:30px 0;
}

.status-comparison-card{
    flex:1;
    border-radius:12px;
    padding:24px;
    border:1px solid #e2e8f0;
}

.status-pending{
    background:#fff7ed;
    border-color:#fed7aa;
}

.status-success{
    background:#f0fdf4;
    border-color:#bbf7d0;
}

.status-label{
    display:inline-block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
}

.status-pending .status-label{
    color:#c2410c;
}

.status-success .status-label{
    color:#15803d;
}

.status-comparison-card h3{
    margin:0 0 10px;
}

.status-code{
    margin-top:18px;
    padding:10px 12px;
    border-radius:8px;
    background:rgba(255,255,255,.72);
    font-family:monospace;
    font-weight:700;
}

.status-comparison-arrow{
    align-self:center;
    color:#22c55e;
    font-size:30px;
    font-weight:800;
}

.article-insight{
    margin:28px 0;
    padding:20px 24px;
    border-left:5px solid #22c55e;
    border-radius:0 10px 10px 0;
    background:#f8fafc;
    color:#334155;
}

.auth-flow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin:30px 0;
}

.auth-flow-item{
    flex:1;
    text-align:center;
    background:#0f172a;
    border:1px solid #334155;
    color:#e2e8f0;
    border-radius:12px;
    padding:22px 16px;
}

.auth-flow-item strong,
.auth-flow-item small{
    display:block;
}

.auth-flow-item small{
    margin-top:5px;
    color:#94a3b8;
}

.auth-flow-icon{
    font-size:26px;
    margin-bottom:12px;
}

.auth-flow-arrow{
    color:#22c55e;
    font-size:26px;
    font-weight:800;
}

.technical-note{
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:12px;
    padding:22px 24px;
    margin:28px 0;
}

.technical-note-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    color:#1d4ed8;
    font-weight:800;
}

.request-field-grid,
.value-grid,
.failure-reasons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin:28px 0 36px;
}

.request-field-card,
.value-card,
.failure-reason{
    position:relative;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:22px;
}

.request-field-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin-bottom:12px;
    border-radius:9px;
    background:#0f172a;
    color:#22c55e;
    font-weight:800;
}

.reference-map{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:30px 0;
}

.reference-map-node{
    flex:1;
    text-align:center;
    border:1px solid #cbd5e1;
    border-radius:12px;
    padding:20px 14px;
    background:#f8fafc;
}

.reference-map-node small,
.reference-map-node strong{
    display:block;
}

.reference-map-node small{
    color:#64748b;
    margin-bottom:6px;
    font-size:11px;
    letter-spacing:.06em;
}

.reference-highlight{
    background:#0f172a;
    border-color:#334155;
    color:#f8fafc;
}

.reference-map-line{
    min-width:80px;
    height:2px;
    background:#22c55e;
    position:relative;
}

.reference-map-line span{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:#fff;
    padding:0 8px;
    white-space:nowrap;
    color:#64748b;
    font-size:11px;
}

.security-stack{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin:28px 0;
}

.security-layer{
    background:#0f172a;
    border:1px solid #334155;
    border-radius:12px;
    color:#e2e8f0;
    padding:20px;
}

.security-layer span,
.security-layer strong,
.security-layer small{
    display:block;
}

.security-layer span{
    color:#22c55e;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:10px;
}

.security-layer small{
    margin-top:5px;
    color:#94a3b8;
}

.warning-box{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:22px;
    margin:28px 0;
    border:1px solid #fecaca;
    border-radius:12px;
    background:#fef2f2;
}

.warning-box-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    height:38px;
    border-radius:50%;
    background:#dc2626;
    color:#fff;
    font-weight:900;
}

.warning-box p{
    margin:7px 0 0;
}

.submission-flow,
.daraja-final-flow{
    display:flex;
    align-items:center;
    overflow-x:auto;
    gap:8px;
    margin:30px 0;
    padding:22px;
    background:#0f172a;
    border:1px solid #334155;
    border-radius:12px;
}

.submission-stage,
.daraja-final-stage{
    min-width:120px;
    text-align:center;
    color:#e2e8f0;
}

.submission-stage span,
.daraja-final-stage span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    margin:0 auto 9px;
    border-radius:9px;
    background:#1e293b;
    color:#22c55e;
    font-weight:800;
}

.submission-connector{
    min-width:34px;
    height:2px;
    background:#334155;
}

.state-banner{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 22px;
    margin:25px 0;
    border-radius:12px;
}

.state-banner-pending{
    background:#fff7ed;
    border:1px solid #fed7aa;
}

.state-banner-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#f97316;
    box-shadow:0 0 0 6px rgba(249,115,22,.12);
}

.state-banner small,
.state-banner strong{
    display:block;
}

.state-banner small{
    color:#9a3412;
    margin-bottom:3px;
}

.callback-types,
.environment-comparison{
    display:flex;
    align-items:stretch;
    gap:18px;
    margin:30px 0;
}

.callback-type-card,
.environment-card{
    flex:1;
    border:1px solid #bbf7d0;
    border-radius:12px;
    background:#f0fdf4;
    padding:24px;
}

.callback-timeout{
    border-color:#fed7aa;
    background:#fff7ed;
}

.callback-type-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-bottom:14px;
    border-radius:11px;
    background:#16a34a;
    color:#fff;
    font-weight:900;
}

.callback-timeout .callback-type-icon{
    background:#f97316;
}

.callback-pipeline{
    max-width:720px;
    margin:30px auto;
}

.callback-pipeline-item{
    position:relative;
    background:#0f172a;
    border:1px solid #334155;
    border-radius:12px;
    color:#e2e8f0;
    padding:18px 20px 18px 68px;
}

.callback-pipeline-item span{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:9px;
    background:#1e293b;
    color:#22c55e;
    font-weight:800;
}

.callback-pipeline-item strong,
.callback-pipeline-item small{
    display:block;
}

.callback-pipeline-item small{
    margin-top:4px;
    color:#94a3b8;
}

.callback-pipeline-arrow{
    text-align:center;
    padding:7px;
    color:#22c55e;
    font-size:24px;
}

.idempotency-box{
    display:flex;
    align-items:stretch;
    gap:24px;
    margin:30px 0;
    padding:24px;
    border-radius:12px;
    background:#0f172a;
    border:1px solid #334155;
}

.idempotency-column{
    flex:1;
    text-align:center;
}

.idempotency-label{
    display:inline-block;
    margin-bottom:16px;
    color:#94a3b8;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
}

.idempotency-event,
.idempotency-result{
    padding:12px;
    border-radius:9px;
    background:#1e293b;
    color:#e2e8f0;
}

.idempotency-result{
    background:#14532d;
    color:#dcfce7;
}

.idempotency-safe{
    background:#164e63;
    color:#cffafe;
}

.idempotency-arrow{
    padding:8px 0;
    color:#22c55e;
}

.idempotency-divider{
    width:1px;
    background:#334155;
}

.verification-checklist{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin:28px 0;
}

.verification-check{
    display:flex;
    gap:12px;
    align-items:flex-start;
    border:1px solid #d1fae5;
    background:#f0fdf4;
    border-radius:11px;
    padding:17px;
}

.verification-check > span{
    color:#16a34a;
    font-weight:900;
}

.verification-check strong,
.verification-check small{
    display:block;
}

.verification-check small{
    margin-top:3px;
    color:#64748b;
}

.state-transition{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:30px 0;
}

.state-transition-node{
    border-radius:10px;
    padding:14px 18px;
    font-family:monospace;
    font-weight:800;
}

.state-transition-pending{
    background:#fff7ed;
    color:#c2410c;
}

.state-transition-processing{
    background:#eff6ff;
    color:#1d4ed8;
}

.state-transition-success{
    background:#f0fdf4;
    color:#15803d;
}

.state-transition-arrow{
    color:#22c55e;
    font-size:24px;
}

.failure-reason span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    margin-bottom:12px;
    border-radius:8px;
    background:#fee2e2;
    color:#b91c1c;
    font-weight:800;
}

.failure-reason strong,
.failure-reason small{
    display:block;
}

.failure-reason small{
    margin-top:5px;
    color:#64748b;
}

.error-analysis{
    margin:28px 0;
    overflow:hidden;
    border:1px solid #fecaca;
    border-radius:12px;
}

.error-analysis-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#7f1d1d;
    color:#fff;
    padding:16px 20px;
}

.error-analysis-header span{
    font-family:monospace;
}

.error-analysis-body{
    background:#fff;
}

.error-analysis-item{
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px 20px;
    border-bottom:1px solid #fee2e2;
}

.error-analysis-item:last-child{
    border-bottom:none;
}

.error-analysis-item span{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    height:30px;
    border-radius:8px;
    background:#fef2f2;
    color:#b91c1c;
    font-weight:800;
}

.error-analysis-item p{
    margin:0;
}

.retry-matrix{
    overflow:hidden;
    margin:30px 0;
    border:1px solid #e2e8f0;
    border-radius:12px;
}

.retry-matrix-row{
    display:grid;
    grid-template-columns:1.2fr .8fr 1.6fr;
    gap:1px;
    background:#e2e8f0;
    border-bottom:1px solid #e2e8f0;
}

.retry-matrix-row:last-child{
    border-bottom:none;
}

.retry-matrix-row > div{
    background:#fff;
    padding:15px 17px;
}

.retry-matrix-header > div{
    background:#0f172a;
    color:#fff;
    font-weight:800;
}

.retry-safe,
.retry-blocked,
.retry-review,
.retry-danger{
    display:inline-block;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:800;
}

.retry-safe{
    background:#dcfce7;
    color:#166534;
}

.retry-blocked,
.retry-danger{
    background:#fee2e2;
    color:#991b1b;
}

.retry-review{
    background:#fef3c7;
    color:#92400e;
}

.environment-card ul{
    margin-bottom:0;
}

.environment-sandbox{
    background:#eff6ff;
    border-color:#bfdbfe;
}

.environment-production{
    background:#f0fdf4;
    border-color:#bbf7d0;
}

.environment-badge{
    display:inline-block;
    margin-bottom:12px;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.environment-sandbox .environment-badge{
    background:#dbeafe;
    color:#1d4ed8;
}

.environment-production .environment-badge{
    background:#dcfce7;
    color:#15803d;
}

.environment-versus{
    align-self:center;
    font-weight:900;
    color:#64748b;
}

.value-card span{
    display:block;
    font-size:24px;
    margin-bottom:12px;
}

.value-card strong{
    display:block;
    margin-bottom:7px;
}

.value-card p{
    margin:0;
}

.daraja-final-arrow{
    color:#22c55e;
    font-size:22px;
    font-weight:900;
}


/*two*/

.daraja-final-success{
    padding:12px;
    border-radius:10px;
    background:#14532d;
}

@media(max-width:760px){
    .daraja-overview-grid,
    .request-field-grid,
    .security-stack,
    .verification-checklist,
    .value-grid,
    .failure-reasons{
        grid-template-columns:1fr;
    }

    .status-comparison,
    .auth-flow,
    .callback-types,
    .environment-comparison,
    .reference-map,
    .state-transition,
    .idempotency-box{
        flex-direction:column;
    }

    .status-comparison-arrow,
    .auth-flow-arrow,
    .state-transition-arrow{
        transform:rotate(90deg);
    }

    .reference-map-line{
        width:2px;
        min-width:2px;
        height:55px;
    }

    .idempotency-divider{
        width:100%;
        height:1px;
    }

    .retry-matrix-row{
        grid-template-columns:1fr;
    }

    .retry-matrix-row > div{
        border-bottom:1px solid #e2e8f0;
    }

    .retry-matrix-header{
        display:none;
    }

    .environment-versus{
        align-self:center;
    }
}




.automation-question{
    display:flex;
    align-items:center;
    gap:16px;
    margin:28px 0;
    padding:21px 24px;
    border:1px solid #bfdbfe;
    border-radius:12px;
    background:#eff6ff;
}

.automation-question-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    height:42px;
    border-radius:11px;
    background:#2563eb;
    color:#fff;
    font-size:23px;
    font-weight:900;
}

.automation-question small,
.automation-question strong{
    display:block;
}

.automation-question small{
    margin-bottom:4px;
    color:#1d4ed8;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
}

.automation-comparison{
    display:flex;
    align-items:stretch;
    gap:18px;
    margin:32px 0;
}

.automation-comparison-card{
    flex:1;
    overflow:hidden;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.browser-card{
    border-color:#fed7aa;
    background:#fff7ed;
}

.api-card{
    border-color:#bbf7d0;
    background:#f0fdf4;
}

.automation-card-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:19px 21px;
    border-bottom:1px solid rgba(148,163,184,.28);
}

.automation-card-icon{
    font-size:25px;
}

.automation-card-header small,
.automation-card-header strong{
    display:block;
}

.automation-card-header small{
    margin-bottom:3px;
    color:#64748b;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
}

.automation-flow-mini{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    padding:21px;
    font-size:12px;
    font-weight:700;
}

.automation-flow-mini span{
    padding:7px 9px;
    border-radius:7px;
    background:rgba(255,255,255,.72);
}

.automation-flow-mini b{
    color:#22c55e;
}

.automation-comparison-card > p{
    margin:0;
    padding:0 21px 21px;
}

.automation-versus{
    align-self:center;
    color:#64748b;
    font-weight:900;
}

.browser-attraction-grid,
.screen-message-grid,
.official-api-benefits{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin:27px 0 35px;
}

.browser-attraction-card{
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#f8fafc;
    padding:20px;
}

.browser-attraction-card > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    margin-bottom:11px;
    border-radius:8px;
    background:#0f172a;
    color:#22c55e;
    font-weight:800;
}

.browser-attraction-card strong{
    display:block;
    margin-bottom:7px;
}

.browser-attraction-card p{
    margin:0;
}

.ui-break-flow,
.session-risk-flow{
    display:flex;
    align-items:center;
    gap:12px;
    margin:30px 0;
}

.business-state-flow{
    display:flex;
    align-items:center;
    gap:12px;
    margin:30px 0;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:auto;
    padding:22px;
    border:1px solid #334155;
    border-radius:12px;
    background:#0f172a;
}

.ui-break-stage,
.session-risk-node{
    flex:1;
    border-radius:11px;
    padding:20px;
}

.ui-break-stage span,
.session-risk-node span{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.ui-break-stage strong,
.ui-break-stage small,
.session-risk-node strong,
.session-risk-node small{
    display:block;
}

.ui-break-stage small,
.session-risk-node small{
    margin-top:5px;
}

.ui-break-working,
.session-risk-active{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
}

.ui-break-change,
.session-risk-expired{
    border:1px solid #fde68a;
    background:#fffbeb;
}

.ui-break-failed,
.session-risk-danger{
    border:1px solid #fecaca;
    background:#fef2f2;
}

.ui-break-arrow,
.session-risk-arrow,
.business-state-arrow{
    color:#22c55e;
    font-size:23px;
    font-weight:900;
}

.timing-problem{
    margin:28px 0;
    padding:23px;
    border:1px solid #334155;
    border-radius:12px;
    background:#0f172a;
}

.timing-lane + .timing-lane{
    margin-top:21px;
}

.timing-lane > small{
    display:block;
    margin-bottom:8px;
    color:#94a3b8;
    font-weight:800;
    letter-spacing:.08em;
}

.timing-track{
    display:flex;
    overflow:hidden;
    height:42px;
    border-radius:8px;
}

.timing-track span{
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid rgba(255,255,255,.25);
    background:#166534;
    color:#fff;
    font-size:11px;
    font-weight:800;
    text-align:center;
}

.timing-track-unstable span:nth-child(1){
    background:#9a3412;
}

.timing-track-unstable span:nth-child(2){
    background:#a16207;
}

.timing-track-unstable span:nth-child(3){
    background:#7c2d12;
}

.timing-track-unstable span:nth-child(4){
    background:#7f1d1d;
}

.screen-message{
    display:flex;
    align-items:center;
    gap:10px;
    padding:17px;
    border-radius:10px;
    font-weight:700;
}

.screen-message span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:29px;
    height:29px;
    border-radius:50%;
    color:#fff;
    font-weight:900;
}

.screen-message-success{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
}

.screen-message-success span{
    background:#16a34a;
}

.screen-message-processing{
    border:1px solid #fde68a;
    background:#fffbeb;
}

.screen-message-processing span{
    background:#ca8a04;
}

.screen-message-error{
    border:1px solid #fecaca;
    background:#fef2f2;
}

.screen-message-error span{
    background:#dc2626;
}

.uncertain-payment-box{
    overflow:hidden;
    margin:28px 0;
    border:1px solid #fdba74;
    border-radius:12px;
}

.uncertain-payment-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:15px 20px;
    background:#9a3412;
    color:#fff;
}

.uncertain-payment-body{
    padding:20px;
    background:#fff7ed;
}

.uncertain-payment-body p{
    margin-top:0;
}

.uncertain-payment-state{
    display:inline-block;
    padding:9px 12px;
    border-radius:8px;
    background:#431407;
    color:#ffedd5;
    font-family:monospace;
    font-weight:800;
}

.data-comparison{
    display:flex;
    align-items:center;
    gap:18px;
    margin:30px 0;
}

.data-comparison-column{
    flex:1;
}

.data-comparison-label{
    display:block;
    margin-bottom:8px;
    color:#64748b;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.data-output{
    min-height:145px;
    border:1px solid #fed7aa;
    border-radius:12px;
    background:#fff7ed;
    padding:21px;
}

.data-output-icon{
    display:block;
    margin-bottom:12px;
    font-size:25px;
}

.data-output strong,
.data-output small{
    display:block;
}

.data-output small{
    margin-top:8px;
    color:#64748b;
}

.data-comparison-column pre{
    min-height:145px;
    box-sizing:border-box;
    margin:0;
}

.data-comparison-arrow{
    color:#22c55e;
    font-size:27px;
    font-weight:900;
}

.callback-vs-screen{
    display:flex;
    align-items:stretch;
    gap:25px;
    margin:30px 0;
    padding:24px;
    border:1px solid #334155;
    border-radius:13px;
    background:#0f172a;
}

.callback-vs-screen-side{
    flex:1;
    text-align:center;
}

.callback-vs-label{
    display:inline-block;
    margin-bottom:15px;
    color:#94a3b8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.callback-vs-node{
    padding:11px;
    border-radius:8px;
    background:#1e293b;
    color:#e2e8f0;
}

.callback-vs-arrow{
    padding:7px 0;
    color:#22c55e;
}

.callback-vs-result{
    padding:12px;
    border-radius:8px;
    font-weight:800;
}

.callback-vs-unknown{
    background:#7f1d1d;
    color:#fee2e2;
}

.callback-vs-confirmed{
    background:#14532d;
    color:#dcfce7;
}

.callback-vs-divider{
    width:1px;
    background:#334155;
}

.resource-comparison,
.recovery-comparison,
.credential-comparison,
.scaling-visual{
    display:flex;
    align-items:stretch;
    gap:18px;
    margin:30px 0;
}

.resource-card,
.recovery-card,
.credential-card,
.scaling-column{
    flex:1;
    border:1px solid #fed7aa;
    border-radius:12px;
    background:#fff7ed;
    padding:22px;
}

.resource-api-card,
.recovery-api,
.credential-card-api,
.scaling-api{
    border-color:#bbf7d0;
    background:#f0fdf4;
}

.resource-icon{
    display:block;
    margin-bottom:10px;
    font-size:27px;
}

.resource-card > strong{
    display:block;
    margin-bottom:18px;
}

.resource-meter{
    margin-top:13px;
}

.resource-meter small{
    display:block;
    margin-bottom:5px;
}

.resource-meter > div{
    overflow:hidden;
    height:9px;
    border-radius:999px;
    background:rgba(148,163,184,.25);
}

.resource-meter > div span{
    display:block;
    height:100%;
    border-radius:999px;
    background:#ea580c;
}

.resource-api-card .resource-meter > div span{
    background:#16a34a;
}

.scaling-title{
    display:block;
    margin-bottom:15px;
    color:#64748b;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.browser-window{
    margin-top:9px;
    padding:11px;
    border:1px solid #fdba74;
    border-radius:7px;
    background:#fff;
    box-shadow:0 4px 10px rgba(124,45,18,.08);
}

.scaling-warning,
.scaling-success{
    margin-top:17px;
    padding:11px;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
}

.scaling-warning{
    background:#ffedd5;
    color:#9a3412;
}

.scaling-success{
    background:#dcfce7;
    color:#166534;
}

.api-queue > div{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:9px;
    padding:11px;
    border-radius:7px;
    background:#fff;
}

.api-queue span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:27px;
    height:27px;
    border-radius:7px;
    background:#0f172a;
    color:#22c55e;
    font-size:11px;
    font-weight:900;
}

.recovery-badge{
    display:inline-block;
    margin-bottom:11px;
    padding:5px 9px;
    border-radius:999px;
    background:#ffedd5;
    color:#9a3412;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.recovery-api .recovery-badge{
    background:#dcfce7;
    color:#166534;
}

.recovery-result{
    margin-top:17px;
    padding:11px;
    border-radius:8px;
    text-align:center;
    font-weight:800;
}

.recovery-result-danger{
    background:#fee2e2;
    color:#991b1b;
}

.recovery-result-safe{
    background:#dcfce7;
    color:#166534;
}

.credential-card-title{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:13px;
    font-weight:800;
}

.logging-value-box,
.right-tool-box,
.section-final-banner{
    display:flex;
    align-items:center;
    gap:16px;
    margin:28px 0;
    padding:21px 23px;
    border:1px solid #bfdbfe;
    border-radius:12px;
    background:#eff6ff;
}

.logging-value-icon,
.right-tool-icon,
.section-final-banner-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    height:42px;
    border-radius:11px;
    background:#2563eb;
    color:#fff;
    font-size:22px;
}

.logging-value-box p{
    margin:6px 0 0;
}

.business-state-flow{
    display:flex;
    align-items:center;
    gap:26px;
    overflow-x:auto;
    padding:22px;
    border:1px solid #334155;
    border-radius:14px;
    background:#0f172a;
}

.business-state-node{
    position:relative;
    flex:0 0 170px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:14px 18px;
    border-radius:10px;

    background:linear-gradient(180deg,#23324a 0%,#1b283d 100%);
    border:1px solid #334155;

    color:#f8fafc;
    font-size:15px;
    font-weight:700;
    letter-spacing:.03em;
    white-space:nowrap;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 6px 16px rgba(0,0,0,.25);

    transition:.2s;
}

.business-state-node.success{
    background:linear-gradient(180deg,#15803d 0%,#166534 100%);
    border-color:#22c55e;
    color:#fff;
}

.business-state-node:not(:last-child)::after{
    content:"➜";
    position:absolute;
    top:50%;
    right:-22px;
    transform:translateY(-50%);

    color:#22c55e;
    font-size:20px;
    font-weight:700;
    text-shadow:0 0 10px rgba(34,197,94,.45);
}


.business-state-success{
    background:#14532d;
    color:#dcfce7;
}

.api-browser-table{
    overflow:hidden;
    margin:30px 0;
    border:1px solid #e2e8f0;
    border-radius:12px;
}

.api-browser-row{
    display:grid;
    grid-template-columns:1fr 1.2fr 1.2fr;
    gap:1px;
    border-bottom:1px solid #e2e8f0;
    background:#e2e8f0;
}

.api-browser-row:last-child{
    border-bottom:none;
}

.api-browser-row > div{
    padding:14px 16px;
    background:#fff;
}

.api-browser-row > div:first-child{
    font-weight:700;
}

.api-browser-header > div{
    background:#0f172a;
    color:#fff;
    font-weight:800;
}

.browser-question,
.api-question{
    margin:20px 0;
    padding:18px 22px;
    border-left:5px solid #f97316;
    border-radius:0 10px 10px 0;
    background:#fff7ed;
    font-size:17px;
    font-weight:700;
}

.api-question{
    border-left-color:#22c55e;
    background:#f0fdf4;
}

.right-tool-box small,
.right-tool-box strong,
.section-final-banner small,
.section-final-banner strong{
    display:block;
}

.right-tool-box small,
.section-final-banner small{
    margin-bottom:4px;
    color:#1d4ed8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.official-api-benefit{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:17px;
    border:1px solid #d1fae5;
    border-radius:10px;
    background:#f0fdf4;
}

.official-api-benefit > span{
    color:#16a34a;
    font-size:18px;
    font-weight:900;
}

.official-api-benefit strong,
.official-api-benefit small{
    display:block;
}

.official-api-benefit small{
    margin-top:4px;
    color:#64748b;
}

.section-final-banner{
    border-color:#334155;
    background:#0f172a;
    color:#e2e8f0;
}

.section-final-banner-icon{
    background:#14532d;
}

.section-final-banner small{
    color:#22c55e;
}

@media(max-width:760px){
    .automation-comparison,
    .ui-break-flow,
    .data-comparison,
    .callback-vs-screen,
    .session-risk-flow,
    .resource-comparison,
    .scaling-visual,
    .recovery-comparison,
    .credential-comparison{
        flex-direction:column;
    }

    .automation-versus,
    .data-comparison-arrow,
    .ui-break-arrow,
    .session-risk-arrow{
        transform:rotate(90deg);
        align-self:center;
    }

    .browser-attraction-grid,
    .screen-message-grid,
    .official-api-benefits{
        grid-template-columns:1fr;
    }

    .callback-vs-divider{
        width:100%;
        height:1px;
    }

    .api-browser-row{
        grid-template-columns:1fr;
    }

    .api-browser-header{
        display:none;
    }

    .api-browser-row > div{
        border-bottom:1px solid #e2e8f0;
    }
}

/*end*/


.production-hero{
    margin:32px 0 42px;
    overflow:hidden;
    border:1px solid #334155;
    border-radius:15px;
    background:#0f172a;
    box-shadow:0 14px 34px rgba(15,23,42,.17);
}



.production-hero-header{
    display:flex;
    align-items:center;
    gap:15px;
    padding:22px 25px;
    border-bottom:1px solid #334155;
    background:#1e293b;
    color:#f8fafc;
}

.production-hero-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 46px;
    height:46px;
    border-radius:12px;
    background:#0f172a;
    color:#22c55e;
    font-size:23px;
}

.production-hero-header small,
.production-hero-header strong{
    display:block;
}

.production-hero-header small{
    margin-bottom:4px;
    color:#22c55e;
    font-size:11px;
    font-weight:900;
    letter-spacing:.09em;
}

.production-hero-header strong{
    font-size:20px;
}

.production-hero-header p{
    margin:5px 0 0;
    color:#94a3b8;
}

.production-hero-flow{
    display:flex;
    align-items:center;
    gap:9px;
    overflow-x:auto;
    padding:24px;
}

.production-hero-step{
    min-width:135px;
    text-align:center;
    color:#e2e8f0;
}

.production-hero-step span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin:0 auto 10px;
    border-radius:10px;
    background:#1e293b;
    color:#22c55e;
    font-weight:900;
}

.production-hero-step strong,
.production-hero-step small{
    display:block;
}

.production-hero-step small{
    margin-top:5px;
    color:#94a3b8;
    font-size:12px;
}

.production-hero-arrow{
    color:#22c55e;
    font-size:22px;
    font-weight:900;
}

.production-hero-success{
    padding:13px;
    border-radius:11px;
    background:#14532d;
}

.queue-comparison{
    display:flex;
    align-items:stretch;
    gap:18px;
    margin:30px 0;
}

.queue-comparison-card{
    flex:1;
    padding:23px;
    border-radius:12px;
}

.queue-direct{
    border:1px solid #fed7aa;
    background:#fff7ed;
}

.queue-worker{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
}

.queue-comparison-label{
    display:block;
    margin-bottom:15px;
    color:#64748b;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.queue-flow-node{
    padding:11px;
    border-radius:8px;
    background:rgba(255,255,255,.8);
    text-align:center;
    font-weight:700;
}

.queue-flow-node + .queue-flow-node{
    margin-top:9px;
}

.queue-flow-arrow{
    padding:7px 0;
    text-align:center;
    color:#22c55e;
}

.queue-comparison-result{
    margin-top:16px;
    padding:11px;
    border-radius:8px;
    text-align:center;
    font-weight:800;
}

.queue-result-danger{
    background:#fee2e2;
    color:#991b1b;
}

.queue-result-safe{
    background:#dcfce7;
    color:#166534;
}

.queue-comparison-versus{
    align-self:center;
    color:#64748b;
    font-weight:900;
}

.production-queue{
    display:flex;
    align-items:center;
    gap:18px;
    margin:30px 0;
    padding:25px;
    border:1px solid #334155;
    border-radius:14px;
    background:#0f172a;
}

.production-queue-source,
.production-queue-center,
.production-queue-workers{
    flex:1;
}

.production-queue small{
    display:block;
    margin-bottom:12px;
    color:#94a3b8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.production-order,
.queue-slot,
.worker-card{
    margin-top:9px;
    padding:11px 12px;
    border-radius:8px;
    background:#1e293b;
    color:#e2e8f0;
}

.production-order span{
    display:inline-block;
    margin-right:7px;
    padding:3px 6px;
    border-radius:5px;
    background:#14532d;
    color:#dcfce7;
    font-size:10px;
    font-weight:900;
}

.production-order small{
    margin:4px 0 0;
    color:#94a3b8;
    letter-spacing:0;
}

.queue-slot{
    display:flex;
    align-items:center;
    gap:9px;
}

.queue-slot span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:27px;
    height:27px;
    border-radius:7px;
    background:#0f172a;
    color:#22c55e;
    font-size:11px;
    font-weight:900;
}

.production-queue-arrow{
    color:#22c55e;
    font-size:25px;
}

.worker-card{
    display:flex;
    align-items:center;
    gap:9px;
}

.worker-status{
    width:10px;
    height:10px;
    border-radius:50%;
}

.worker-active{
    background:#22c55e;
    box-shadow:0 0 0 5px rgba(34,197,94,.12);
}

.worker-idle{
    background:#64748b;
}

.worker-checklist,
.protection-layers,
.recovery-state-grid,
.log-level-grid,
.verification-summary,
.sensitive-data-grid,
.production-questions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px;
    margin:28px 0 36px;
}

.worker-check{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#f8fafc;
}

.worker-check > span{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 33px;
    height:33px;
    border-radius:8px;
    background:#0f172a;
    color:#22c55e;
    font-weight:900;
}

.worker-check strong,
.worker-check small{
    display:block;
}

.worker-check small{
    margin-top:4px;
    color:#64748b;
}

.state-machine{
    margin:30px 0;
    padding:26px;
    border:1px solid #334155;
    border-radius:14px;
    background:#0f172a;
}

.state-machine-row,
.state-machine-results{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
}

.state-machine-node{
    min-width:130px;
    padding:13px;
    border-radius:9px;
    text-align:center;
    font-family:monospace;
    font-weight:800;
}

.state-machine-node small{
    display:block;
    margin-bottom:4px;
    opacity:.7;
}

.state-neutral{
    background:#1e293b;
    color:#e2e8f0;
}

.state-queued{
    background:#1e3a8a;
    color:#dbeafe;
}

.state-processing{
    background:#164e63;
    color:#cffafe;
}

.state-pending{
    background:#9a3412;
    color:#ffedd5;
}

.state-success{
    background:#14532d;
    color:#dcfce7;
}

.state-failed{
    background:#7f1d1d;
    color:#fee2e2;
}

.state-review{
    background:#713f12;
    color:#fef3c7;
}

.state-machine-arrow,
.state-machine-down{
    color:#22c55e;
    font-size:22px;
    font-weight:900;
}

.state-machine-down{
    padding:11px;
    text-align:center;
}

.transition-rules{
    display:flex;
    gap:18px;
    margin:28px 0;
}

.transition-rule{
    display:flex;
    flex:1;
    gap:13px;
    padding:20px;
    border-radius:11px;
}

.transition-valid{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
}

.transition-invalid{
    border:1px solid #fecaca;
    background:#fef2f2;
}

.transition-rule-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    height:36px;
    border-radius:50%;
    color:#fff;
    font-weight:900;
}

.transition-valid .transition-rule-icon{
    background:#16a34a;
}

.transition-invalid .transition-rule-icon{
    background:#dc2626;
}

.transition-rule small,
.transition-rule strong{
    display:block;
}

.transition-rule small{
    margin-bottom:5px;
    color:#64748b;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.transition-rule p{
    margin:6px 0 0;
}

.storage-record{
    margin:30px 0;
    overflow:hidden;
    border:1px solid #334155;
    border-radius:13px;
}

.storage-record-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:17px 21px;
    background:#0f172a;
    color:#fff;
}

.storage-record-header span{
    color:#94a3b8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.storage-record-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    background:#e2e8f0;
}

.storage-record-grid > div{
    padding:17px;
    background:#fff;
}

.storage-record-grid small,
.storage-record-grid strong{
    display:block;
}

.storage-record-grid small{
    margin-bottom:5px;
    color:#64748b;
}

.storage-state{
    color:#c2410c;
}

.duplicate-race{
    display:flex;
    align-items:center;
    gap:18px;
    margin:30px 0 18px;
}

.duplicate-worker{
    flex:1;
    padding:21px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#f8fafc;
    text-align:center;
}

.duplicate-worker > small{
    display:block;
    margin-bottom:13px;
    color:#64748b;
    font-weight:900;
    letter-spacing:.08em;
}

.duplicate-worker > div:not(.duplicate-worker-arrow){
    padding:10px;
    border-radius:7px;
    background:#fff;
}

.duplicate-worker-arrow{
    padding:7px;
    color:#22c55e;
}

.duplicate-lock{
    flex:1;
    padding:22px;
    border:1px solid #334155;
    border-radius:12px;
    background:#0f172a;
    color:#fff;
    text-align:center;
}

.duplicate-lock span{
    display:block;
    margin-bottom:9px;
    font-size:27px;
}

.duplicate-lock strong,
.duplicate-lock small{
    display:block;
}

.duplicate-lock small{
    margin-top:5px;
    color:#94a3b8;
}

.duplicate-result{
    display:flex;
    align-items:center;
    gap:15px;
    margin:18px 0 34px;
}

.duplicate-result-card{
    flex:1;
    padding:18px;
    border-radius:11px;
}

.duplicate-result-success{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
}

.duplicate-result-blocked{
    border:1px solid #fecaca;
    background:#fef2f2;
}

.duplicate-result-card span,
.duplicate-result-card strong,
.duplicate-result-card small{
    display:block;
}

.duplicate-result-card span{
    margin-bottom:5px;
    color:#64748b;
    font-size:10px;
    font-weight:900;
}

.duplicate-result-card small{
    margin-top:4px;
}

.duplicate-result-arrow{
    color:#94a3b8;
}

.protection-layer{
    padding:20px;
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#f8fafc;
}

.protection-layer > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:33px;
    height:33px;
    margin-bottom:11px;
    border-radius:8px;
    background:#0f172a;
    color:#22c55e;
    font-weight:900;
}

.protection-layer strong{
    display:block;
}

.protection-layer p{
    margin:6px 0 0;
}

.callback-idempotency{
    display:flex;
    align-items:stretch;
    gap:23px;
    margin:30px 0;
    padding:24px;
    border:1px solid #334155;
    border-radius:13px;
    background:#0f172a;
}

.callback-idempotency-column{
    flex:1;
    text-align:center;
}

.callback-idempotency-title{
    display:inline-block;
    margin-bottom:14px;
    color:#94a3b8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.callback-event,
.callback-result{
    padding:11px;
    border-radius:8px;
    background:#1e293b;
    color:#e2e8f0;
}

.callback-event-arrow{
    padding:7px;
    color:#22c55e;
}

.callback-result-success{
    background:#14532d;
    color:#dcfce7;
}

.callback-result-ignored{
    background:#164e63;
    color:#cffafe;
}

.callback-idempotency-divider{
    width:1px;
    background:#334155;
}

.production-retry-table{
    margin:30px 0;
    overflow:hidden;
    border:1px solid #e2e8f0;
    border-radius:12px;
}

.production-retry-row{
    display:grid;
    grid-template-columns:1.2fr .7fr 1.5fr;
    gap:1px;
    border-bottom:1px solid #e2e8f0;
    background:#e2e8f0;
}

.production-retry-row:last-child{
    border-bottom:none;
}

.production-retry-row > div{
    padding:15px 17px;
    background:#fff;
}

.production-retry-header > div{
    background:#0f172a;
    color:#fff;
    font-weight:800;
}

.retry-status{
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
}

.retry-allowed{
    background:#dcfce7;
    color:#166534;
}

.retry-review{
    background:#fef3c7;
    color:#92400e;
}

.retry-blocked{
    background:#fee2e2;
    color:#991b1b;
}

.restart-recovery{
    display:flex;
    align-items:center;
    gap:10px;
    overflow-x:auto;
    margin:30px 0;
    padding:23px;
    border:1px solid #334155;
    border-radius:13px;
    background:#0f172a;
}

.restart-recovery-step{
    min-width:145px;
    color:#e2e8f0;
    text-align:center;
}

.restart-recovery-step span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:37px;
    height:37px;
    margin:0 auto 9px;
    border-radius:9px;
    background:#1e293b;
    color:#22c55e;
    font-weight:900;
}

.restart-recovery-step strong,
.restart-recovery-step small{
    display:block;
}

.restart-recovery-step small{
    margin-top:4px;
    color:#94a3b8;
}

.restart-recovery-arrow{
    color:#22c55e;
    font-size:22px;
}

.restart-recovery-safe{
    padding:12px;
    border-radius:10px;
    background:#14532d;
}

.recovery-state-card{
    padding:20px;
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#f8fafc;
}

.recovery-state-name{
    display:inline-block;
    margin-bottom:11px;
    padding:5px 8px;
    border-radius:7px;
    background:#0f172a;
    color:#22c55e;
    font-family:monospace;
    font-size:11px;
    font-weight:900;
}

.recovery-state-card strong{
    display:block;
}

.recovery-state-card p{
    margin:6px 0 0;
}

.correlation-flow{
    display:flex;
    align-items:center;
    gap:11px;
    overflow-x:auto;
    margin:30px 0;
}

.correlation-node{
    min-width:150px;
    padding:18px;
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#f8fafc;
    text-align:center;
}

.correlation-primary{
    border-color:#334155;
    background:#0f172a;
    color:#fff;
}

.correlation-node small,
.correlation-node strong{
    display:block;
}

.correlation-node small{
    margin-bottom:5px;
    color:#64748b;
    font-size:10px;
    font-weight:900;
}

.correlation-primary small{
    color:#22c55e;
}

.correlation-arrow{
    color:#22c55e;
    font-size:22px;
}

.log-level-card{
    padding:18px;
    border-radius:11px;
}

.log-level-card > span{
    display:inline-block;
    margin-bottom:9px;
    padding:4px 7px;
    border-radius:6px;
    font-size:10px;
    font-weight:900;
}

.log-level-card strong,
.log-level-card small{
    display:block;
}

.log-level-card small{
    margin-top:4px;
}

.log-info{
    border:1px solid #bfdbfe;
    background:#eff6ff;
}

.log-info > span{
    background:#dbeafe;
    color:#1d4ed8;
}

.log-warning{
    border:1px solid #fde68a;
    background:#fffbeb;
}

.log-warning > span{
    background:#fef3c7;
    color:#92400e;
}

.log-error{
    border:1px solid #fecaca;
    background:#fef2f2;
}

.log-error > span{
    background:#fee2e2;
    color:#991b1b;
}

.log-review{
    border:1px solid #fdba74;
    background:#fff7ed;
}

.log-review > span{
    background:#ffedd5;
    color:#9a3412;
}

.example-section-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin:34px 0 14px;
}

.example-section-title > span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:39px;
    height:39px;
    border-radius:10px;
    background:#0f172a;
    color:#22c55e;
    font-weight:900;
}

.example-section-title small,
.example-section-title strong{
    display:block;
}

.example-section-title small{
    margin-bottom:3px;
    color:#64748b;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.json-explanation,
.security-reminder,
.log-reading-guide,
.recovery-highlight{
    display:flex;
    align-items:center;
    gap:14px;
    margin:20px 0 28px;
    padding:19px 21px;
    border:1px solid #bfdbfe;
    border-radius:11px;
    background:#eff6ff;
}

.json-explanation-icon,
.security-reminder-icon,
.log-reading-guide-icon,
.recovery-highlight-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 39px;
    height:39px;
    border-radius:10px;
    background:#2563eb;
    color:#fff;
    font-size:20px;
}

.json-explanation p,
.security-reminder p,
.log-reading-guide p{
    margin:5px 0 0;
}

.record-status-banner{
    display:flex;
    align-items:center;
    gap:13px;
    margin:20px 0 30px;
    padding:18px 21px;
    border:1px solid #bfdbfe;
    border-radius:11px;
    background:#eff6ff;
}

.record-status-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#2563eb;
    box-shadow:0 0 0 6px rgba(37,99,235,.12);
}

.record-status-banner small,
.record-status-banner strong{
    display:block;
}

.record-status-banner p{
    margin:4px 0 0;
}

.response-meaning{
    margin:20px 0 30px;
    padding:21px 23px;
    border-radius:11px;
}

.response-meaning > span{
    display:inline-block;
    margin-bottom:9px;
    padding:5px 8px;
    border-radius:7px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.07em;
}

.response-meaning strong{
    display:block;
}

.response-meaning p{
    margin:6px 0 0;
}

.response-pending{
    border:1px solid #fed7aa;
    background:#fff7ed;
}

.response-pending > span{
    background:#ffedd5;
    color:#9a3412;
}

.response-success{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
}

.response-success > span{
    background:#dcfce7;
    color:#166534;
}

.response-failed{
    border:1px solid #fecaca;
    background:#fef2f2;
}

.response-failed > span{
    background:#fee2e2;
    color:#991b1b;
}

.verification-summary > div{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px;
    border:1px solid #d1fae5;
    border-radius:10px;
    background:#f0fdf4;
}

.verification-summary span{
    color:#16a34a;
    font-weight:900;
}

.failure-investigation{
    margin:28px 0;
    overflow:hidden;
    border:1px solid #fecaca;
    border-radius:12px;
}

.failure-investigation-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    background:#7f1d1d;
    color:#fff;
}

.failure-investigation-header span{
    font-family:monospace;
}

.failure-investigation-step{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 19px;
    border-bottom:1px solid #fee2e2;
}

.failure-investigation-step:last-child{
    border-bottom:none;
}

.failure-investigation-step span{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    height:30px;
    border-radius:7px;
    background:#fef2f2;
    color:#b91c1c;
    font-weight:900;
}

.failure-investigation-step p{
    margin:0;
}

.unknown-state-warning{
    display:flex;
    gap:15px;
    align-items:flex-start;
    margin:25px 0 32px;
    padding:21px;
    border:1px solid #fdba74;
    border-radius:11px;
    background:#fff7ed;
}

.unknown-state-warning-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 39px;
    height:39px;
    border-radius:50%;
    background:#ea580c;
    color:#fff;
    font-weight:900;
}

.unknown-state-warning small,
.unknown-state-warning strong{
    display:block;
}

.unknown-state-warning small{
    margin-bottom:4px;
    color:#9a3412;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.unknown-state-warning p{
    margin:6px 0 0;
}

.recovery-highlight{
    border-color:#bbf7d0;
    background:#f0fdf4;
}

.recovery-highlight-icon{
    background:#16a34a;
}

.recovery-highlight small,
.recovery-highlight strong{
    display:block;
}

.recovery-highlight small{
    color:#166534;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.monitoring-dashboard{
    margin:30px 0;
    overflow:hidden;
    border:1px solid #334155;
    border-radius:14px;
    background:#0f172a;
    color:#e2e8f0;
}

.monitoring-dashboard-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 23px;
    border-bottom:1px solid #334155;
    background:#1e293b;
}

.monitoring-dashboard-header small,
.monitoring-dashboard-header strong{
    display:block;
}

.monitoring-dashboard-header small{
    margin-bottom:3px;
    color:#94a3b8;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.monitoring-live{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:900;
}

.monitoring-live i{
    display:block;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 5px rgba(34,197,94,.12);
}

.monitoring-metrics{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:1px;
    background:#334155;
}

.monitoring-metric{
    padding:19px;
    background:#0f172a;
    text-align:center;
}

.monitoring-metric span,
.monitoring-metric small{
    display:block;
}

.monitoring-metric span{
    color:#22c55e;
    font-size:24px;
    font-weight:900;
}

.monitoring-metric small{
    margin-top:4px;
    color:#94a3b8;
}

.monitoring-review-metric span{
    color:#f59e0b;
}

.monitoring-events{
    padding:17px 21px 21px;
}

.monitoring-event{
    display:grid;
    grid-template-columns:auto 1fr 1.5fr auto;
    align-items:center;
    gap:11px;
    padding:13px 0;
    border-bottom:1px solid #1e293b;
}

.monitoring-event:last-child{
    border-bottom:none;
}

.monitoring-event small{
    color:#94a3b8;
}

.monitoring-event time{
    color:#64748b;
    font-size:12px;
}

.event-status{
    width:10px;
    height:10px;
    border-radius:50%;
}

.event-success{
    background:#22c55e;
}

.event-pending{
    background:#3b82f6;
}

.event-warning{
    background:#f59e0b;
}

.event-error{
    background:#ef4444;
}

.sensitive-data-card{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px;
    border:1px solid #fecaca;
    border-radius:10px;
    background:#fef2f2;
}

.sensitive-data-card span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#dc2626;
    color:#fff;
    font-weight:900;
}

.script-path{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:27px 0;
    padding:21px;
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#f8fafc;
}

.script-path span{
    padding:9px 12px;
    border-radius:7px;
    background:#fff;
    font-weight:700;
}

.script-path b{
    color:#22c55e;
}

.production-questions > div{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:17px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    background:#f8fafc;
}

.production-questions span{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 29px;
    height:29px;
    border-radius:50%;
    background:#0f172a;
    color:#22c55e;
    font-weight:900;
}

.production-questions p{
    margin:2px 0 0;
}

.production-final-statement{
    display:flex;
    align-items:center;
    gap:16px;
    margin:32px 0;
    padding:23px 25px;
    border:1px solid #334155;
    border-radius:13px;
    background:#0f172a;
    color:#e2e8f0;
}

.production-final-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 45px;
    height:45px;
    border-radius:12px;
    background:#14532d;
    font-size:22px;
}

.production-final-statement small,
.production-final-statement strong{
    display:block;
}

.production-final-statement small{
    margin-bottom:5px;
    color:#22c55e;
    font-size:10px;
    font-weight:900;
    letter-spacing:.09em;
}

@media(max-width:800px){
    .queue-comparison,
    .production-queue,
    .transition-rules,
    .duplicate-race,
    .duplicate-result,
    .callback-idempotency{
        flex-direction:column;
    }

    .queue-comparison-versus,
    .production-queue-arrow,
    .duplicate-result-arrow{
        transform:rotate(90deg);
        align-self:center;
    }

    .worker-checklist,
    .protection-layers,
    .recovery-state-grid,
    .log-level-grid,
    .verification-summary,
    .sensitive-data-grid,
    .production-questions{
        grid-template-columns:1fr;
    }

    .state-machine-row,
    .state-machine-results{
        flex-direction:column;
    }

    .state-machine-arrow{
        transform:rotate(90deg);
    }

    .storage-record-grid{
        grid-template-columns:1fr;
    }

    .callback-idempotency-divider{
        width:100%;
        height:1px;
    }

    .production-retry-row{
        grid-template-columns:1fr;
    }

    .production-retry-header{
        display:none;
    }

    .production-retry-row > div{
        border-bottom:1px solid #e2e8f0;
    }

    .monitoring-metrics{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .monitoring-event{
        grid-template-columns:auto 1fr;
    }

    .monitoring-event small,
    .monitoring-event time{
        grid-column:2;
    }

    .script-path{
        flex-direction:column;
    }

    .script-path b{
        transform:rotate(90deg);
    }
}


.faq-intro{
    display:flex;
    align-items:center;
    gap:16px;
    margin:28px 0 32px;
    padding:22px 24px;
    border:1px solid #334155;
    border-radius:13px;
    background:#0f172a;
    color:#e2e8f0;
}

.faq-intro-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    height:44px;
    border-radius:12px;
    background:#14532d;
    color:#fff;
    font-size:23px;
    font-weight:900;
}

.faq-intro small,
.faq-intro strong{
    display:block;
}

.faq-intro small{
    margin-bottom:4px;
    color:#22c55e;
    font-size:10px;
    font-weight:900;
    letter-spacing:.09em;
}

.faq-intro strong{
    font-size:19px;
}

.faq-intro p{
    margin:5px 0 0;
    color:#94a3b8;
}

.faq-list{
    margin:30px 0;
}

.faq-item{
    overflow:hidden;
    margin-bottom:14px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
    transition:.2s ease;
}

.faq-item[open]{
    border-color:#bbf7d0;
    box-shadow:0 8px 24px rgba(15,23,42,.07);
}

.faq-item summary{
    display:flex;
    align-items:center;
    gap:13px;
    padding:18px 20px;
    cursor:pointer;
    list-style:none;
    background:#f8fafc;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item[open] summary{
    border-bottom:1px solid #dcfce7;
    background:#f0fdf4;
}

.faq-number{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 35px;
    height:35px;
    border-radius:9px;
    background:#0f172a;
    color:#22c55e;
    font-size:12px;
    font-weight:900;
}

.faq-question{
    flex:1;
    color:#0f172a;
    font-size:16px;
    font-weight:800;
}

section#content-section .faq-toggle{
    position:relative;
    flex:0 0 28px;
    height:28px;
    border-radius:50%;
    background:#e2e8f0;
}

section#content-section .faq-toggle::before,
section#content-section .faq-toggle::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    height:2px;
    background:#334155;
    transform:translate(-50%,-50%);
}

section#content-section .faq-toggle::after{
    transform:translate(-50%,-50%) rotate(90deg);
    transition:.2s ease;
}

section#content-section .faq-item[open] .faq-toggle{
    background:#dcfce7;
}

section#content-section .faq-item[open] .faq-toggle::after{
    transform:translate(-50%,-50%) rotate(0);
}

.faq-answer{
    padding:22px 24px 25px;
}

.faq-answer > p:first-child{
    margin-top:0;
}

.faq-answer > p:last-child{
    margin-bottom:0;
}

.faq-flow,
.faq-error-path{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
    margin:22px 0 4px;
    padding:18px;
    border:1px solid #334155;
    border-radius:11px;
    background:#0f172a;
}

.faq-flow span,
.faq-error-path span{
    padding:8px 10px;
    border-radius:7px;
    background:#1e293b;
    color:#e2e8f0;
    font-size:12px;
    font-weight:700;
}

.faq-flow b,
.faq-error-path b{
    color:#22c55e;
}

.faq-status-line{
    display:flex;
    align-items:center;
    gap:15px;
    margin:22px 0 4px;
}

.faq-status{
    flex:1;
    padding:18px;
    border-radius:10px;
}

.faq-status small,
.faq-status strong{
    display:block;
}

.faq-status small{
    margin-bottom:5px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.faq-status-pending{
    border:1px solid #fed7aa;
    background:#fff7ed;
}

.faq-status-pending small{
    color:#c2410c;
}

.faq-status-success{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
}

.faq-status-success small{
    color:#15803d;
}

.faq-status-arrow{
    color:#22c55e;
    font-size:24px;
    font-weight:900;
}

.faq-benefits,
.faq-protection-layers,
.faq-data-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:22px 0 4px;
}

.faq-benefits > div,
.faq-data-grid > div{
    display:flex;
    align-items:center;
    gap:9px;
    padding:14px;
    border:1px solid #d1fae5;
    border-radius:9px;
    background:#f0fdf4;
}

.faq-benefits span,
.faq-data-grid span{
    color:#16a34a;
    font-weight:900;
}

.faq-quote{
    margin:22px 0 2px;
    padding:18px 21px;
    border-left:5px solid #22c55e;
    border-radius:0 9px 9px 0;
    background:#f8fafc;
    color:#334155;
    font-weight:700;
}

.faq-comparison{
    display:flex;
    gap:16px;
    margin:22px 0 4px;
}

.faq-comparison-card{
    flex:1;
    padding:20px;
    border-radius:11px;
}

.faq-browser{
    border:1px solid #fed7aa;
    background:#fff7ed;
}

.faq-api{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
}

.faq-comparison-card small,
.faq-comparison-card strong{
    display:block;
}

.faq-comparison-card small{
    margin-bottom:5px;
    color:#64748b;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.faq-comparison-card ul{
    margin-bottom:0;
}

.faq-protection-layers > div{
    padding:15px;
    border:1px solid #e2e8f0;
    border-radius:9px;
    background:#f8fafc;
}

.faq-protection-layers span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:31px;
    height:31px;
    margin-bottom:9px;
    border-radius:8px;
    background:#0f172a;
    color:#22c55e;
    font-size:11px;
    font-weight:900;
}

.faq-protection-layers strong{
    display:block;
}

.faq-duplicate-flow{
    display:flex;
    gap:16px;
    margin:22px 0 4px;
}

.faq-duplicate-flow > div{
    flex:1;
    padding:18px;
    border:1px solid #334155;
    border-radius:10px;
    background:#0f172a;
    color:#e2e8f0;
}

.faq-duplicate-flow small,
.faq-duplicate-flow strong,
.faq-duplicate-flow span{
    display:block;
}

.faq-duplicate-flow small{
    margin-bottom:6px;
    color:#94a3b8;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.faq-duplicate-flow span{
    margin-top:12px;
    padding:8px;
    border-radius:7px;
    text-align:center;
    font-weight:800;
}

.faq-result-success{
    background:#14532d;
    color:#dcfce7;
}

.faq-result-safe{
    background:#164e63;
    color:#cffafe;
}

.faq-warning{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin:22px 0 4px;
    padding:19px;
    border:1px solid #fdba74;
    border-radius:10px;
    background:#fff7ed;
}

.faq-warning-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    height:38px;
    border-radius:50%;
    background:#ea580c;
    color:#fff;
    font-weight:900;
}

.faq-warning small,
.faq-warning strong{
    display:block;
}

.faq-warning small{
    margin-bottom:4px;
    color:#9a3412;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.faq-warning p{
    margin:5px 0 0;
}

.faq-recovery-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:22px 0;
}

.faq-recovery-grid > div{
    padding:16px;
    border:1px solid #e2e8f0;
    border-radius:9px;
    background:#f8fafc;
}

.faq-recovery-grid span,
.faq-recovery-grid strong{
    display:block;
}

.faq-recovery-grid span{
    display:inline-block;
    margin-bottom:8px;
    padding:5px 7px;
    border-radius:6px;
    background:#0f172a;
    color:#22c55e;
    font-family:monospace;
    font-size:10px;
    font-weight:900;
}

.faq-safety-note{
    display:flex;
    align-items:center;
    gap:14px;
    margin:22px 0 4px;
    padding:19px;
    border:1px solid #bfdbfe;
    border-radius:10px;
    background:#eff6ff;
}

.faq-safety-note > span{
    font-size:25px;
}

.faq-safety-note p{
    margin:5px 0 0;
}

.faq-environment{
    display:flex;
    gap:16px;
    margin:22px 0 4px;
}

.faq-environment-card{
    flex:1;
    padding:20px;
    border-radius:11px;
}

.faq-environment-card > span{
    display:inline-block;
    margin-bottom:8px;
    padding:5px 8px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.faq-environment-card strong{
    display:block;
}

.faq-environment-card ul{
    margin-bottom:0;
}

.faq-environment-sandbox{
    border:1px solid #bfdbfe;
    background:#eff6ff;
}

.faq-environment-sandbox > span{
    background:#dbeafe;
    color:#1d4ed8;
}

.faq-environment-production{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
}

.faq-environment-production > span{
    background:#dcfce7;
    color:#15803d;
}

.faq-country-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:22px 0 4px;
}

.faq-country-grid > div{
    padding:17px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    background:#f8fafc;
    text-align:center;
}

.faq-country-grid span,
.faq-country-grid strong,
.faq-country-grid small{
    display:block;
}

.faq-country-grid span{
    margin-bottom:8px;
    font-size:25px;
}

.faq-country-grid small{
    margin-top:4px;
    color:#64748b;
}

.faq-final{
    display:flex;
    align-items:center;
    gap:16px;
    margin:34px 0;
    padding:23px 25px;
    border:1px solid #334155;
    border-radius:13px;
    background:#0f172a;
    color:#e2e8f0;
}

.faq-final-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 45px;
    height:45px;
    border-radius:12px;
    background:#14532d;
    color:#fff;
    font-size:22px;
}

.faq-final small,
.faq-final strong{
    display:block;
}

.faq-final small{
    margin-bottom:5px;
    color:#22c55e;
    font-size:10px;
    font-weight:900;
    letter-spacing:.09em;
}

@media(max-width:760px){
    .faq-status-line,
    .faq-comparison,
    .faq-duplicate-flow,
    .faq-environment{
        flex-direction:column;
    }

    .faq-status-arrow{
        align-self:center;
        transform:rotate(90deg);
    }

    .faq-benefits,
    .faq-protection-layers,
    .faq-data-grid,
    .faq-recovery-grid{
        grid-template-columns:1fr;
    }

    .faq-country-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

.further-reading{
    position:relative;
    overflow:hidden;
    margin:45px 0;
    border:1px solid #334155;
    border-radius:16px;
    background:#0f172a;
    color:#e2e8f0;
    box-shadow:0 18px 45px rgba(15,23,42,.2);
}

.further-reading-glow{
    position:absolute;
    top:-120px;
    right:0;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(34,197,94,.18) 0%,
        rgba(34,197,94,.06) 42%,
        transparent 72%
    );
    pointer-events:none;
}

.further-reading-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:34px;
}

.further-reading-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 52px;
    height:52px;
    border-radius:14px;
    background:#14532d;
    color:#dcfce7;
    font-size:25px;
    font-weight:900;
    box-shadow:0 0 0 8px rgba(34,197,94,.08);
}

.further-reading-text{
    flex:1;
}

.further-reading-label{
    display:inline-block;
    margin-bottom:10px;
    color:#22c55e;
    font-size:11px;
    font-weight:900;
    letter-spacing:.11em;
}

.further-reading h2{
    margin:0 0 16px;
    color:#f8fafc;
    font-size:29px;
    line-height:1.25;
}

.further-reading p{
    max-width:850px;
    margin:0 0 14px;
    color:#cbd5e1;
    line-height:1.75;
}

.further-reading p strong{
    color:#f8fafc;
}

.further-reading-features{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:25px 0 28px;
}

.further-reading-features > div{
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px 14px;
    border:1px solid #334155;
    border-radius:9px;
    background:#111c31;
    color:#cbd5e1;
}

.further-reading-features span{
    color:#22c55e;
    font-weight:900;
}

.further-reading-button{
    font-size:clamp(13px, 1.2vw + 10px, 16px);
}

.further-reading-button{
    display: flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:15px 18px;
    border:1px solid #22c55e;
    border-radius:10px;
    background:#16a34a;
    color:#fff;
    text-decoration:none;
    font-weight:800;
    box-shadow:0 10px 24px rgba(22,163,74,.2);
    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.further-reading-button:hover{
    background:#15803d;
    color:#fff;
    text-decoration:none;
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(22,163,74,.28);
}

.further-reading-button strong{
    font-size:21px;
    transition:transform .2s ease;
}

.further-reading-button:hover strong{
    transform:translateX(4px);
}

.further-reading-footer{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    border-top:1px solid #334155;
    background:#334155;
}

.further-reading-footer > div{
    padding:18px 22px;
    background:#111c31;
}

.further-reading-footer small,
.further-reading-footer strong{
    display:block;
}

.further-reading-footer small{
    margin-bottom:5px;
    color:#64748b;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.further-reading-footer strong{
    color:#e2e8f0;
}

@media(max-width:760px){
    .further-reading-content{
        flex-direction:column;
        padding:25px;
    }

    .further-reading h2{
        font-size:24px;
    }

    .further-reading-features{
        grid-template-columns:1fr;
    }

    .further-reading-button{
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .further-reading-footer{
        grid-template-columns:1fr;
    }
}

@media(max-width:420px){

    .further-reading-content{
        padding:22px 18px;
    }

    .further-reading-text{
        width:100%;
        min-width:0;
    }

    .further-reading-button{
        display:flex;
        width:100%;
        min-width:0;
        gap:10px;
        padding:14px 15px;
        font-size:15px;
        line-height:1.35;
        text-align:left;
        white-space:normal;
    }

    .further-reading-button span{
        flex:1;
        min-width:0;
        overflow-wrap:anywhere;
    }

    .further-reading-button strong{
        flex:0 0 auto;
        font-size:20px;
    }
}



html.dark table {
    border-color: #27272a !important;
    background-color: #09090b !important;
}

html.dark table thead tr {
    background-color: #18181b !important;
    color: #f4f4f5 !important;
    border-bottom: 1px solid #27272a !important;
}

html.dark table thead th {
    color: #f4f4f5 !important;
}

html.dark table tbody {
    color: #d4d4d8 !important;
}

html.dark table tbody tr {
    background-color: transparent !important;
    border-color: #27272a !important;
}

html.dark table tbody tr:nth-child(even) {
    background-color: rgba(24, 24, 27, 0.45) !important; /* легка «зебра» */
}

html.dark table tbody td {
    color: #d4d4d8 !important;
    border-color: #27272a !important;
}

html.dark table tbody td strong {
    color: #ffffff !important;
}


/* =========================================================
   Binance API Documentation
   Colorful Developer Documentation Theme
   Scoped to .api-doc
   ========================================================= */

.api-doc {
    --api-bg: #f5f7fb;
    --api-card: #ffffff;
    --api-card-hover: #f8faff;
    --api-border: #e3e8f0;

    --api-text: #172033;
    --api-heading: #111827;
    --api-muted: #687386;

    --api-yellow: #f0b90b;
    --api-yellow-soft: #fff8dc;

    --api-blue: #2563eb;
    --api-blue-soft: #eff6ff;

    --api-green: #16a34a;
    --api-green-soft: #ecfdf3;

    --api-orange: #ea580c;
    --api-orange-soft: #fff7ed;

    --api-purple: #7c3aed;
    --api-purple-soft: #f5f3ff;

    --api-red: #dc2626;
    --api-red-soft: #fef2f2;

    --api-code: #111827;
    --api-code-header: #1f2937;

    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 0 60px;

    color: var(--api-text);
    font-size: 16px;
    line-height: 1.7;
}

/* =========================================================
   DARK THEME VARIABLES (Scoped to html.dark)
   ========================================================= */

html.dark .api-doc {
    --api-bg: #09090b;
    --api-card: #121215;
    --api-card-hover: #18181b;
    --api-border: #27272a;

    --api-text: #d4d4d8;
    --api-heading: #f4f4f5;
    --api-muted: #a1a1aa;

    --api-yellow: #f0b90b;
    --api-yellow-soft: rgba(240, 185, 11, 0.12);

    --api-blue: #3b82f6;
    --api-blue-soft: rgba(59, 130, 246, 0.12);

    --api-green: #10b981;
    --api-green-soft: rgba(16, 185, 129, 0.12);

    --api-orange: #f97316;
    --api-orange-soft: rgba(249, 115, 22, 0.12);

    --api-purple: #8b5cf6;
    --api-purple-soft: rgba(139, 92, 246, 0.12);

    --api-red: #ef4444;
    --api-red-soft: rgba(239, 68, 68, 0.12);

    --api-code: #0d1117;
    --api-code-header: #161b22;
}

.api-doc *,
.api-doc *::before,
.api-doc *::after {
    box-sizing: border-box;
}


/* =========================================================
   HERO
   ========================================================= */

.api-doc .api-hero {
    position: relative;

    padding: 42px 44px;
    margin-bottom: 22px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(240, 185, 11, 0.20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3f7ff 100%
        );

    border: 1px solid #dfe5ef;
    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(31, 41, 55, 0.06);

    overflow: hidden;
}

html.dark .api-doc .api-hero {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(240, 185, 11, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #13151b 0%,
            #0e1117 100%
        );

    border-color: #262c36;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.api-doc .api-hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #f0b90b 0%,
            #f0b90b 35%,
            #2563eb 70%,
            #7c3aed 100%
        );
}

.api-doc .api-hero::after {
    content: "";

    position: absolute;

    right: -80px;
    bottom: -100px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.06);
}

html.dark .api-doc .api-hero::after {
    background: rgba(37, 99, 235, 0.04);
}

.api-doc .api-breadcrumb {
    position: relative;
    z-index: 2;

    margin-bottom: 20px;

    color: #718096;

    font-size: 13px;
    font-weight: 500;
}

html.dark .api-doc .api-breadcrumb {
    color: #94a3b8;
}

.api-doc .api-breadcrumb span {
    margin: 0 8px;
    color: #b0b8c5;
}

html.dark .api-doc .api-breadcrumb span {
    color: #475569;
}

.api-doc .api-badge {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    min-height: 28px;

    padding: 5px 11px;
    margin-bottom: 15px;

    border: 1px solid rgba(240, 185, 11, 0.35);
    border-radius: 6px;

    background: var(--api-yellow-soft);

    color: #a87800;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;
}

html.dark .api-doc .api-badge {
    color: #fcd34d;
    border-color: rgba(240, 185, 11, 0.4);
}

.api-doc .api-hero h1 {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: var(--api-heading);

    font-size: 38px;
    line-height: 1.2;
    font-weight: 750;
}

.api-doc .api-lead {
    position: relative;
    z-index: 2;

    max-width: 800px;

    margin: 0;

    color: #5f6b7a;

    font-size: 17px;
    line-height: 1.75;
}

html.dark .api-doc .api-lead {
    color: #9ca3af;
}


/* =========================================================
   ENDPOINT
   ========================================================= */

.api-doc .api-endpoint-card {
    padding: 20px 22px;
    margin-bottom: 14px;

    background: #111827;

    border: 1px solid #263246;
    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(17, 24, 39, 0.08);
}

html.dark .api-doc .api-endpoint-card {
    background: #0d1117;
    border-color: #21262d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.api-doc .api-endpoint-label {
    margin-bottom: 9px;

    color: #9ca3af;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.api-doc .api-endpoint {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}

.api-doc .api-endpoint code {
    overflow-x: auto;

    color: #10b981;

    font-family:
        "JetBrains Mono",
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 15px;

    white-space: nowrap;
}

.api-doc .api-method {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 52px;
    height: 29px;

    padding: 0 10px;

    border-radius: 5px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.05em;
}

.api-doc .api-method.get {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #15803d;
}

html.dark .api-doc .api-method.get {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.api-doc .api-method.post {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
}

html.dark .api-doc .api-method.post {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.api-doc .api-method.put,
.api-doc .api-method.patch {
    background: #fef3c7;
    border: 1px solid #fde047;
    color: #b45309;
}

html.dark .api-doc .api-method.put,
html.dark .api-doc .api-method.patch {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.api-doc .api-method.delete {
    background: #ffe4e6;
    border: 1px solid #fda4af;
    color: #be123c;
}

html.dark .api-doc .api-method.delete {
    background: rgba(225, 29, 72, 0.18);
    border-color: rgba(225, 29, 72, 0.4);
    color: #fb7185;
}


/* =========================================================
   INFO CARDS
   ========================================================= */

.api-doc .api-info-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-bottom: 42px;
}

.api-doc .api-info-card {
    position: relative;

    min-height: 82px;

    padding: 16px 18px;

    background: var(--api-card);

    border: 1px solid var(--api-border);
    border-radius: 10px;

    box-shadow:
        0 4px 15px rgba(31, 41, 55, 0.04);
}

html.dark .api-doc .api-info-card {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.api-doc .api-info-card:nth-child(1) {
    border-top: 3px solid var(--api-purple);
}

.api-doc .api-info-card:nth-child(2) {
    border-top: 3px solid var(--api-blue);
}

.api-doc .api-info-card:nth-child(3) {
    border-top: 3px solid var(--api-green);
}

.api-doc .api-info-card:nth-child(4) {
    border-top: 3px solid var(--api-yellow);
}

.api-doc .api-info-label {
    display: block;

    margin-bottom: 5px;

    color: #8993a3;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

html.dark .api-doc .api-info-label {
    color: #71717a;
}

.api-doc .api-info-card strong {
    color: var(--api-heading);

    font-size: 14px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.api-doc .api-section {
    margin: 0 0 42px;
}

.api-doc .api-section h2 {
    margin: 0 0 15px;

    color: var(--api-heading);

    font-size: 25px;
    line-height: 1.3;
    font-weight: 750;
}

.api-doc .api-section h3 {
    margin: 28px 0 10px;

    color: var(--api-heading);

    font-size: 18px;
}

.api-doc .api-section p {
    margin: 0 0 15px;

    color: #596577;
}

html.dark .api-doc .api-section p {
    color: #a1a1aa;
}

.api-doc .api-section-heading {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 20px;
}

.api-doc .api-section-heading h2 {
    margin-bottom: 3px;
}

.api-doc .api-section-heading p {
    margin: 0;

    color: #8791a1;

    font-size: 13px;
}

html.dark .api-doc .api-section-heading p {
    color: #71717a;
}

.api-doc .api-section-number {
    display: inline-flex;

    flex: 0 0 34px;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-top: 2px;

    border-radius: 8px;

    background: var(--api-blue-soft);

    border: 1px solid #bfdbfe;

    color: var(--api-blue);

    font-size: 12px;
    font-weight: 800;
}

html.dark .api-doc .api-section-number {
    border-color: rgba(59, 130, 246, 0.4);
}


/* =========================================================
   TABLE
   ========================================================= */

.api-doc .api-table-wrapper {
    width: 100%;

    overflow-x: auto;

    background: var(--api-card);

    border: 1px solid var(--api-border);
    border-radius: 12px;

    box-shadow:
        0 5px 20px rgba(31, 41, 55, 0.04);
}

html.dark .api-doc .api-table-wrapper {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
}

.api-doc .api-table {
    width: 100%;

    margin: 0;

    border-collapse: collapse;

    background: transparent;
}

.api-doc .api-table th {
    padding: 14px 16px;

    background: #eef3fa;

    border-bottom: 1px solid #dce3ed;

    color: #536073;

    font-size: 11px;
    font-weight: 800;

    text-align: left;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}

html.dark .api-doc .api-table th {
    background: #18181b;
    border-bottom-color: #27272a;
    color: #a1a1aa;
}

.api-doc .api-table td {
    padding: 15px 16px;

    border-bottom: 1px solid #edf0f4;

    color: #566274;

    font-size: 14px;

    vertical-align: top;
}

html.dark .api-doc .api-table td {
    border-bottom-color: #1e1e24;
    color: #d4d4d8;
}

.api-doc .api-table tr:last-child td {
    border-bottom: 0;
}

.api-doc .api-table tbody tr {
    transition:
        background 0.15s ease;
}

.api-doc .api-table tbody tr:hover {
    background: #f8fbff;
}

html.dark .api-doc .api-table tbody tr:hover {
    background: #18181b;
}

.api-doc .api-table code {
    color: #172033;

    font-family:
        "JetBrains Mono",
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 13px;
}

html.dark .api-doc .api-table code {
    color: #f4f4f5;
}

.api-doc .type-badge {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 4px;

    background: var(--api-blue-soft);

    border: 1px solid #bfdbfe;

    color: var(--api-blue);

    font-family: "JetBrains Mono", monospace;

    font-size: 10px;
    font-weight: 700;
}

html.dark .api-doc .type-badge {
    border-color: rgba(59, 130, 246, 0.35);
}

.api-doc .required-badge,
.api-doc .optional-badge {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 4px;

    font-size: 10px;
    font-weight: 800;
}

.api-doc .required-badge {
    background: var(--api-yellow-soft);

    border: 1px solid #fde68a;

    color: #a16207;
}

html.dark .api-doc .required-badge {
    border-color: rgba(240, 185, 11, 0.4);
    color: #fcd34d;
}

.api-doc .optional-badge {
    background: #f1f5f9;

    border: 1px solid #dbe2ea;

    color: #64748b;
}

html.dark .api-doc .optional-badge {
    background: #27272a;
    border-color: #3f3f46;
    color: #a1a1aa;
}


/* =========================================================
   CODE
   ========================================================= */

.api-doc .api-code-card {
    overflow: hidden;

    margin: 18px 0;

    background: var(--api-code);

    border: 1px solid #273449;
    border-radius: 12px;

    box-shadow:
        0 8px 24px rgba(17, 24, 39, 0.10);
}

html.dark .api-doc .api-code-card {
    border-color: #21262d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.api-doc .api-code-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 10px 15px;

    background: var(--api-code-header);

    border-bottom: 1px solid #303b4d;

    color: #cbd5e1;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.05em;
}

html.dark .api-doc .api-code-header {
    border-bottom-color: #30363d;
}

.api-doc .api-code-lang {
    color: #60a5fa;

    font-size: 10px;
}

.api-doc .api-code-card pre {
    margin: 0;

    padding: 20px;

    overflow-x: auto;

    background: transparent;

    border: 0;
}

.api-doc .api-code-card code {
    color: #e5e7eb;

    font-family:
        "JetBrains Mono",
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 13px;

    line-height: 1.75;

    white-space: pre;
}


/* =========================================================
   RESPONSE STATUS
   ========================================================= */

.api-doc .api-status {
    display: inline-flex;

    align-items: center;

    padding: 3px 8px;

    border-radius: 5px;

    font-size: 10px;
    font-weight: 800;
}

.api-doc .api-status.success {
    background: #dcfce7;

    border: 1px solid #86efac;

    color: #15803d;
}

html.dark .api-doc .api-status.success {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}


/* =========================================================
   CALLOUTS
   ========================================================= */

.api-doc .api-callout {
    display: flex;

    gap: 14px;

    padding: 18px 20px;

    margin: 22px 0 38px;

    border-radius: 11px;
}

.api-doc .api-callout-icon {
    display: flex;

    flex: 0 0 28px;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 900;
}

.api-doc .api-callout strong {
    display: block;

    margin-bottom: 3px;

    color: var(--api-heading);

    font-size: 14px;
}

.api-doc .api-callout p {
    margin: 0;

    color: #596577;

    font-size: 13px;
}

html.dark .api-doc .api-callout p {
    color: #a1a1aa;
}

/* INFO */

.api-doc .api-callout-info {
    background: var(--api-blue-soft);

    border: 1px solid #bfdbfe;
}

html.dark .api-doc .api-callout-info {
    border-color: rgba(59, 130, 246, 0.35);
}

.api-doc .api-callout-info .api-callout-icon {
    background: #dbeafe;

    color: var(--api-blue);
}

html.dark .api-doc .api-callout-info .api-callout-icon {
    background: rgba(59, 130, 246, 0.25);
}

/* WARNING */

.api-doc .api-callout-warning {
    background: var(--api-orange-soft);

    border: 1px solid #fed7aa;
}

html.dark .api-doc .api-callout-warning {
    border-color: rgba(249, 115, 22, 0.35);
}

.api-doc .api-callout-warning .api-callout-icon {
    background: #ffedd5;

    color: var(--api-orange);
}

html.dark .api-doc .api-callout-warning .api-callout-icon {
    background: rgba(249, 115, 22, 0.25);
}

/* TIP */

.api-doc .api-callout-tip {
    background: var(--api-green-soft);

    border: 1px solid #bbf7d0;
}

html.dark .api-doc .api-callout-tip {
    border-color: rgba(16, 185, 129, 0.35);
}

.api-doc .api-callout-tip .api-callout-icon {
    background: #dcfce7;

    color: var(--api-green);
}

html.dark .api-doc .api-callout-tip .api-callout-icon {
    background: rgba(16, 185, 129, 0.25);
}


/* =========================================================
   FLOW
   ========================================================= */

.api-doc .api-flow {
    display: flex;

    align-items: stretch;

    gap: 8px;

    padding: 18px;

    background: linear-gradient(
        135deg,
        #f8fbff,
        #f5f3ff
    );

    border: 1px solid #dce4ef;
    border-radius: 12px;
}

html.dark .api-doc .api-flow {
    background: linear-gradient(
        135deg,
        #12141a,
        #14111d
    );
    border-color: #27272a;
}

.api-doc .api-flow-step {
    flex: 1;

    min-width: 0;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #dfe5ee;

    border-radius: 9px;

    box-shadow:
        0 3px 10px rgba(31, 41, 55, 0.04);
}

html.dark .api-doc .api-flow-step {
    background: var(--api-card);
    border-color: var(--api-border);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.api-doc .api-flow-step:nth-child(1) {
    border-top: 3px solid var(--api-blue);
}

.api-doc .api-flow-step:nth-child(3) {
    border-top: 3px solid var(--api-purple);
}

.api-doc .api-flow-step:nth-child(5) {
    border-top: 3px solid var(--api-yellow);
}

.api-doc .api-flow-step:nth-child(7) {
    border-top: 3px solid var(--api-green);
}

.api-doc .api-flow-step span {
    display: block;

    margin-bottom: 8px;

    color: var(--api-blue);

    font-family: "JetBrains Mono", monospace;

    font-size: 11px;
    font-weight: 800;
}

.api-doc .api-flow-step strong {
    display: block;

    margin-bottom: 4px;

    color: var(--api-heading);

    font-size: 14px;
}

.api-doc .api-flow-step small {
    display: block;

    color: #7b8797;

    font-size: 11px;

    line-height: 1.5;
}

html.dark .api-doc .api-flow-step small {
    color: #a1a1aa;
}

.api-doc .api-flow-line {
    align-self: center;

    width: 22px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #93c5fd,
            #c4b5fd
        );
}

html.dark .api-doc .api-flow-line {
    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );
}


/* =========================================================
   FEATURE CARDS
   ========================================================= */

.api-doc .api-feature-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
}

.api-doc .api-feature-card {
    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--api-border);

    border-radius: 11px;

    box-shadow:
        0 4px 15px rgba(31, 41, 55, 0.04);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

html.dark .api-doc .api-feature-card {
    background: var(--api-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.api-doc .api-feature-card:nth-child(1) {
    border-top: 3px solid var(--api-blue);
}

.api-doc .api-feature-card:nth-child(2) {
    border-top: 3px solid var(--api-purple);
}

.api-doc .api-feature-card:nth-child(3) {
    border-top: 3px solid var(--api-green);
}

.api-doc .api-feature-card:hover {
    transform: translateY(-3px);

    border-color: #cbd5e1;

    box-shadow:
        0 10px 25px rgba(31, 41, 55, 0.08);
}

html.dark .api-doc .api-feature-card:hover {
    border-color: #3f3f46;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.api-doc .api-feature-card strong {
    display: block;

    margin-bottom: 7px;

    color: var(--api-heading);

    font-size: 15px;
}

.api-doc .api-feature-card p {
    margin: 0;

    color: #6b7788;

    font-size: 13px;

    line-height: 1.6;
}

html.dark .api-doc .api-feature-card p {
    color: #a1a1aa;
}


/* =========================================================
   RELATED ENDPOINTS
   ========================================================= */

.api-doc .api-related-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
}

.api-doc .api-related-card {
    position: relative;

    display: block;

    min-height: 150px;

    padding: 19px;

    background: #ffffff;

    border: 1px solid var(--api-border);

    border-radius: 11px;

    text-decoration: none !important;

    box-shadow:
        0 4px 15px rgba(31, 41, 55, 0.04);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

html.dark .api-doc .api-related-card {
    background: var(--api-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.api-doc .api-related-card:nth-child(1) {
    border-top: 3px solid var(--api-blue);
}

.api-doc .api-related-card:nth-child(2) {
    border-top: 3px solid var(--api-orange);
}

.api-doc .api-related-card:nth-child(3) {
    border-top: 3px solid var(--api-purple);
}

.api-doc .api-related-card:hover {
    transform: translateY(-3px);

    border-color: #cbd5e1;

    box-shadow:
        0 10px 25px rgba(31, 41, 55, 0.08);
}

html.dark .api-doc .api-related-card:hover {
    border-color: #3f3f46;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.api-doc .api-related-card > span:first-child {
    display: block;

    margin-bottom: 10px;

    color: var(--api-blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.08em;
}

.api-doc .api-related-card strong {
    display: block;

    margin-bottom: 5px;

    color: var(--api-heading);

    font-size: 15px;
}

.api-doc .api-related-card small {
    display: block;

    max-width: 85%;

    color: #7a8696;

    font-size: 12px;

    line-height: 1.5;
}

html.dark .api-doc .api-related-card small {
    color: #a1a1aa;
}

.api-doc .api-arrow {
    position: absolute;

    right: 17px;
    bottom: 15px;

    color: var(--api-blue);

    font-size: 17px;
}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.api-doc .api-bottom-nav {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding-top: 24px;

    margin-top: 50px;

    border-top: 1px solid var(--api-border);
}

.api-doc .api-bottom-nav a {
    display: inline-flex;

    align-items: center;

    min-height: 42px;

    padding: 9px 14px;

    border: 1px solid #dbe2ea;

    border-radius: 8px;

    background: #ffffff;

    color: #566274;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

html.dark .api-doc .api-bottom-nav a {
    background: var(--api-card);
    border-color: var(--api-border);
    color: #d4d4d8;
}

.api-doc .api-bottom-nav a:hover {
    background: var(--api-blue-soft);

    border-color: #93c5fd;

    color: var(--api-blue);
}

html.dark .api-doc .api-bottom-nav a:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    color: #60a5fa;
}

.api-doc .api-nav-next {
    margin-left: auto;
}


/* =========================================================
   INLINE CODE
   ========================================================= */

.api-doc p code,
.api-doc li code,
.api-doc td code {
    padding: 2px 5px;

    border-radius: 4px;

    background: #eef2f7;

    color: #334155;

    font-family:
        "JetBrains Mono",
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.9em;
}

html.dark .api-doc p code,
html.dark .api-doc li code,
html.dark .api-doc td code {
    background: #1e1e24;
    color: #e4e4e7;
    border: 1px solid #2e2e38;
}


/* =========================================================
   LINKS
   ========================================================= */

.api-doc a {
    color: var(--api-blue);
}

.api-doc a:hover {
    color: #1d4ed8;
}

html.dark .api-doc a:hover {
    color: #93c5fd;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .api-doc {
        padding: 10px 0 40px;
    }

    .api-doc .api-hero {
        padding: 32px 28px;
    }

    .api-doc .api-hero h1 {
        font-size: 32px;
    }

    .api-doc .api-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .api-doc .api-feature-grid,
    .api-doc .api-related-grid {
        grid-template-columns: 1fr;
    }

    .api-doc .api-flow {
        flex-direction: column;
    }

    .api-doc .api-flow-line {
        width: 2px;
        height: 15px;

        margin: 0 auto;

        background:
            linear-gradient(
                180deg,
                #93c5fd,
                #c4b5fd
            );
    }

    html.dark .api-doc .api-flow-line {
        background:
            linear-gradient(
                180deg,
                #3b82f6,
                #8b5cf6
            );
    }
}


@media (max-width: 600px) {

    .api-doc {
        font-size: 15px;
    }

    .api-doc .api-hero {
        padding: 27px 20px;

        border-radius: 13px;
    }

    .api-doc .api-hero h1 {
        font-size: 27px;
    }

    .api-doc .api-lead {
        font-size: 15px;
    }

    .api-doc .api-endpoint {
        align-items: flex-start;

        flex-direction: column;
    }

    .api-doc .api-endpoint code {
        max-width: 100%;

        font-size: 12px;
    }

    .api-doc .api-info-grid {
        grid-template-columns: 1fr 1fr;

        gap: 8px;

        margin-bottom: 32px;
    }

    .api-doc .api-info-card {
        min-height: 72px;

        padding: 13px;
    }

    .api-doc .api-section {
        margin-bottom: 34px;
    }

    .api-doc .api-section h2 {
        font-size: 22px;
    }

    .api-doc .api-table th,
    .api-doc .api-table td {
        padding: 11px 12px;

        font-size: 12px;
    }

    .api-doc .api-code-card pre {
        padding: 15px;
    }

    .api-doc .api-code-card code {
        font-size: 11px;
    }

    .api-doc .api-callout {
        padding: 14px;
    }

    .api-doc .api-bottom-nav {
        flex-direction: column;
    }

    .api-doc .api-nav-next {
        margin-left: 0;
    }
}

/* =========================================================
   BOTTOM DUAL NAV CARDS (.api-nav-wrapper)
   ========================================================= */

.api-nav-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--api-border);
}

.api-nav-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
    background: var(--api-card);
    border: 1px solid var(--api-border);
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html.dark .api-nav-card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.api-nav-card:hover {
    border-color: #3b82f6;
    background: var(--api-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 12px -2px rgba(59, 130, 246, 0.15);
}

.api-nav-card.next {
    text-align: right;
    align-items: flex-end;
}

.api-nav-card.prev {
    text-align: left;
    align-items: flex-start;
}

.api-nav-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

html.dark .api-nav-label {
    color: #94a3b8;
}

.api-nav-card:hover .api-nav-label {
    color: var(--api-blue);
}

.api-nav-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--api-heading);
    line-height: 1.3;
}

@media (max-width: 640px) {
    .api-nav-wrapper {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   RELATED GRID UL/LI CARDS
   ========================================================= */

.api-related-grid ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.api-related-grid ul li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
}

.api-related-grid ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 16px 20px !important;
    background: var(--api-card) !important;
    border: 1px solid var(--api-border) !important;
    border-radius: 12px !important;
    color: var(--api-heading) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

html.dark .api-related-grid ul li a {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.api-related-grid ul li a:hover {
    border-color: #3b82f6 !important;
    background: var(--api-card-hover) !important;
    color: #3b82f6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.15) !important;
}

/* Автоматична стрілка для кожної картки */
.api-related-grid ul li a::after {
    content: '→' !important;
    font-size: 1.1rem !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    margin-left: 12px !important;
}

html.dark .api-related-grid ul li a::after {
    color: #64748b !important;
}

.api-related-grid ul li a:hover::after {
    color: #3b82f6 !important;
    transform: translateX(4px) !important;
}

.api-doc-page .api-section h2 {
    margin: 0 0 15px;
    color: var(--api-heading, #0f172a);
    font-size: 25px;
    line-height: 1.3;
    font-weight: 750;
}