:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", sans-serif; color: #17212b; background: #f4f7f9; }
* { box-sizing: border-box; }
body { margin: 0; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, #1a5e67 0, #102f3a 42%, #091d25 100%); }
.login-screen[hidden] { display: none; }.login-card { width: min(420px, 100%); display: grid; gap: 15px; padding: 34px; border-radius: 14px; background: white; box-shadow: 0 24px 70px #0005; }.login-card h1 { color: #14343e; }.login-card label { display: grid; gap: 7px; color: #52636b; font-size: 13px; font-weight: 650; }.login-error { min-height: 18px; margin: 0; color: #ad3030; font-size: 13px; }
header { padding: 26px max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; justify-content: space-between; color: white; background: #102f3a; border-bottom: 4px solid #19b5a5; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 26px; letter-spacing: -.4px; }
h2 { font-size: 18px; }
.eyebrow { color: #7fe1d6; font: 700 11px/1.2 monospace; letter-spacing: 1.8px; margin-bottom: 7px; }
main { max-width: 1240px; margin: 28px auto 60px; padding: 0 24px; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.stat { padding: 17px; background: white; border: 1px solid #dce5e8; border-radius: 10px; }
.stat strong { display: block; font-size: 25px; color: #0c7069; }.stat span { font-size: 12px; color: #6c7b82; }
nav { display: flex; gap: 5px; border-bottom: 1px solid #cdd9dc; margin-bottom: 18px; }
button { border: 1px solid #bdcdd1; border-radius: 7px; padding: 9px 14px; background: #fff; color: #27404a; cursor: pointer; font-weight: 650; }
button:hover { border-color: #19a998; color: #08786d; }.primary { background: #0c8176; border-color: #0c8176; color: white; }.primary:hover { background: #076a62; color: white; }
.tab { border-radius: 7px 7px 0 0; border-bottom: 0; background: transparent; }.tab.active { background: white; color: #08786d; transform: translateY(1px); }
.panel { display: none; }.panel.active { display: block; }.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-bottom: 18px; }
.card { background: white; border: 1px solid #d9e3e6; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgb(20 52 61 / 4%); }
.hint { color: #718087; font-size: 13px; }.title-row, .action-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.title-row h2 { margin-bottom: 0; }
textarea, input, select { width: 100%; border: 1px solid #c5d2d6; border-radius: 6px; padding: 9px 10px; font: inherit; color: #17212b; background: white; }.card > textarea { margin-bottom: 12px; font-family: ui-monospace, monospace; font-size: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.form-grid label { display: grid; gap: 5px; color: #52636b; font-size: 12px; font-weight: 650; }.wide { grid-column: 1 / -1; }
pre { white-space: pre-wrap; word-break: break-all; background: #f1f6f6; border-radius: 7px; padding: 13px; color: #31545c; min-height: 75px; font-size: 12px; }
.table-card { overflow-x: auto; }table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }th, td { padding: 10px; text-align: left; border-bottom: 1px solid #e6edef; }th { color: #65777e; font-size: 11px; text-transform: uppercase; }.badge { display: inline-block; border-radius: 99px; padding: 3px 8px; background: #e6f5f2; color: #08776d; }.badge.used { background: #eef0f1; color: #68767a; }.badge.locked { background: #fff3d8; color: #916300; }
#toast { position: fixed; right: 22px; bottom: 22px; max-width: 420px; padding: 12px 16px; border-radius: 8px; background: #163842; color: white; box-shadow: 0 7px 25px #102f3a44; opacity: 0; pointer-events: none; transition: opacity .2s; }#toast.show { opacity: 1; }#toast.error { background: #a73535; }
.api-docs { display: none; }.api-docs.active { display: grid; gap: 12px; }.docs-hero { display: flex; justify-content: space-between; align-items: center; }.docs-hero h2 { font-size: 24px; margin-bottom: 7px; }.button-link { display: inline-block; border-radius: 7px; padding: 9px 14px; color: white; background: #0c8176; text-decoration: none; font-weight: 650; white-space: nowrap; }.docs-section-title { margin: 15px 0 0; }.endpoint { padding: 16px 20px; }.endpoint h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 650 15px/1.4 ui-monospace, monospace; }.endpoint p { margin-bottom: 0; color: #52636b; }.endpoint pre { min-height: auto; margin-bottom: 0; }.method { min-width: 47px; padding: 4px 7px; border-radius: 5px; color: white; text-align: center; font: 750 11px/1.2 ui-sans-serif, sans-serif; }.method.get { background: #1677a7; }.method.post { background: #0c8176; }.flow-card li { margin: 8px 0; }code { padding: 2px 5px; border-radius: 4px; background: #edf3f4; color: #185864; }
@media (max-width: 800px) { header { align-items: stretch; flex-direction: column; gap: 18px; }.stats { grid-template-columns: repeat(2, 1fr); }.split { grid-template-columns: 1fr; }.form-grid { grid-template-columns: 1fr; }.wide { grid-column: auto; } main { padding: 0 12px; } }