/* service_api_integration_development.html — extracted internal + inline styles */

/* ---- API Integration page: bespoke, developer-flavored components ---- */
.api-console { background: #0f1620; border-radius: 1rem; overflow: hidden;
    box-shadow: 0 2rem 4rem rgba(15, 22, 32, .35);
    font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; }
.api-console__bar { display: flex; align-items: center; gap: .45rem; padding: .9rem 1.1rem; background: #161f2b; }
.api-console__bar i { width: .72rem; height: .72rem; border-radius: 50%; display: inline-block; }
.api-console__bar .d1 { background: #ff5f57; } .api-console__bar .d2 { background: #febc2e; }
.api-console__bar .d3 { background: #28c840; }
.api-console__bar span.t { margin-left: .6rem; color: #8698ab; font-size: .78rem; }
.api-console__body { padding: 1.35rem 1.5rem; font-size: .84rem; line-height: 1.75; color: #cad6e4;
    white-space: pre; overflow-x: auto; }
.api-console .k { color: #7fe0b8; } .api-console .s { color: #f4b860; }
.api-console .n { color: #6cb7ff; } .api-console .c { color: #5b6b7d; }
.api-console .m { color: #c792ea; } .api-console .ok { color: #28c840; }

.api-chip { display: inline-block; padding: .5rem .95rem; margin: .28rem; border: 1px solid rgba(30, 34, 40, .12);
    border-radius: 2rem; background: #fff; font-size: .86rem; font-weight: 500; color: #3b4552;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.api-chip:hover { transform: translateY(-3px); border-color: rgba(69, 196, 160, .8);
    box-shadow: 0 .6rem 1.2rem rgba(30, 34, 40, .1); }

.api-recipe { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; height: 100%;
    border: 1px solid rgba(30, 34, 40, .1); border-radius: .85rem; background: #fff; }
.api-recipe .when { flex: 1; } .api-recipe .then { flex: 1; }
.api-recipe .lbl { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }

.api-timeline__item { position: relative; padding-left: 3.6rem; padding-bottom: 2.2rem; }
.api-timeline__item::before { content: ''; position: absolute; left: 1.15rem; top: 2.6rem; bottom: -.4rem;
    width: 2px; background: rgba(30, 34, 40, .12); }
.api-timeline__item:last-child { padding-bottom: 0; }
.api-timeline__item:last-child::before { display: none; }

.api-contact-aside { background: #0f1620; }
.api-contact-aside .api-comment { font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
    color: #7fe0b8; font-size: .85rem; }
.api-contact-aside .api-muted { color: #9fb0c3; }
.api-contact-aside .api-list { color: #cad6e4; }

/* ---- generated classes for extracted inline styles ---- */
.gen-1 { top: 12%; left: 3%; }
.gen-2 { z-index: 2; }
.gen-3 { left:0; top:0; }
.gen-4 { height: 130px; }