:root {
     --navy: #1B3A5C;
     --blue: #2563A8;
     --teal: #1A7A8C;
     --green: #1A7A4A;
     --orange: #B85C00;
     --red: #A02020;
     --grey: #F5F7FA;
     --dgrey: #4A5568;
     --white: #FFFFFF;
     --black: #111827;
     --border: #D0D5DD;
     --code-bg: #0F172A;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     font-size: 15px;
     line-height: 1.7;
     color: var(--black);
     background: #F0F4F8;
 }

 .layout {
     display: flex;
     min-height: 100vh;
 }

 /* Sidebar */
 .sidebar {
     width: 270px;
     min-width: 270px;
     background: var(--navy);
     color: #CBD5E0;
     position: sticky;
     top: 0;
     height: 100vh;
     overflow-y: auto;
     padding: 0 0 40px;
 }

 .sidebar-logo {
     background: #0F2440;
     padding: 22px 20px 18px;
     border-bottom: 3px solid var(--teal);
 }

 .sidebar-logo h1 {
     color: #fff;
     font-size: 1.2rem;
     font-weight: 700;
     letter-spacing: .5px;
 }

 .sidebar-logo p {
     color: #90A4BF;
     font-size: .75rem;
     margin-top: 3px;
 }

 .sidebar nav {
     padding: 14px 0;
 }

 .sidebar nav a {
     display: block;
     padding: 7px 22px;
     color: #A8BCCF;
     text-decoration: none;
     font-size: .82rem;
     transition: all .15s;
     border-left: 3px solid transparent;
 }

 .sidebar nav a:hover,
 .sidebar nav a.active {
     color: #fff;
     background: rgba(255, 255, 255, .07);
     border-left-color: var(--teal);
 }

 .sidebar nav .section-label {
     padding: 14px 22px 5px;
     font-size: .68rem;
     font-weight: 700;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     color: #4A6785;
 }

 /* Main */
 .main {
     flex: 1;
     min-width: 0;
     padding: 0 0 80px;
 }

 /* Hero */
 .hero {
     background: linear-gradient(135deg, var(--navy) 0%, #254E7A 100%);
     color: #fff;
     padding: 48px 56px 44px;
     border-bottom: 4px solid var(--teal);
     position: relative;
     overflow: hidden;
 }

 .hero::after {
     content: '';
     position: absolute;
     right: -40px;
     top: -40px;
     width: 280px;
     height: 280px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .04);
 }

 .hero h1 {
     font-size: 2.1rem;
     font-weight: 800;
     letter-spacing: -.5px;
 }

 .hero .subtitle {
     color: #90B8D8;
     margin-top: 8px;
     font-size: 1rem;
 }

 .hero .meta {
     display: flex;
     gap: 24px;
     margin-top: 20px;
     flex-wrap: wrap;
 }

 .hero .badge {
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .2);
     border-radius: 20px;
     padding: 4px 14px;
     font-size: .78rem;
     color: #CBD5E0;
 }

 .hero-btns {
     display: flex;
     gap: 12px;
     margin-top: 24px;
     flex-wrap: wrap;
 }

 .btn-home {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .25);
     color: #fff;
     text-decoration: none;
     padding: 8px 18px;
     border-radius: 7px;
     font-size: .85rem;
     font-weight: 600;
     transition: background .15s;
 }

 .btn-home:hover {
     background: rgba(255, 255, 255, .22);
 }

 .btn-docs {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: rgba(26, 122, 140, .35);
     border: 1px solid rgba(26, 122, 140, .6);
     color: #fff;
     text-decoration: none;
     padding: 8px 18px;
     border-radius: 7px;
     font-size: .85rem;
     font-weight: 600;
     transition: background .15s;
 }

 .btn-docs:hover {
     background: rgba(26, 122, 140, .55);
 }

 /* Sections */
 .section {
     padding: 44px 56px 12px;
     max-width: 920px;
 }

 .section+.section {
     padding-top: 10px;
 }

 h2 {
     font-size: 1.35rem;
     font-weight: 700;
     color: var(--navy);
     padding-bottom: 10px;
     border-bottom: 2px solid var(--teal);
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 h2 .num {
     background: var(--teal);
     color: #fff;
     font-size: .75rem;
     font-weight: 700;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 h3 {
     font-size: 1rem;
     font-weight: 700;
     color: var(--navy);
     margin: 28px 0 10px;
 }

 h4 {
     font-size: .9rem;
     font-weight: 700;
     color: var(--dgrey);
     margin: 18px 0 8px;
 }

 p {
     margin-bottom: 12px;
     color: #2D3748;
 }

 ul,
 ol {
     margin: 8px 0 16px 22px;
     color: #2D3748;
     line-height: 1.9;
 }

 li {
     margin-bottom: 4px;
 }

 /* Code */
 pre {
     background: var(--code-bg);
     color: #E2E8F0;
     border-radius: 8px;
     padding: 16px 20px;
     font-size: .82rem;
     line-height: 1.6;
     overflow-x: auto;
     margin: 10px 0 16px;
     border-left: 3px solid var(--teal);
 }

 code {
     font-family: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
 }

 p code,
 li code,
 td code {
     background: #EDF2F7;
     color: #1A7A8C;
     padding: 1px 6px;
     border-radius: 4px;
     font-size: .83em;
 }

 .cmd-c {
     color: #7DD3FC;
 }

 .arg {
     color: #86EFAC;
 }

 .out {
     color: #CBD5E0;
 }

 .comment {
     color: #64748B;
 }

 /* Callouts */
 .callout {
     border-radius: 8px;
     padding: 14px 18px;
     margin: 14px 0;
     font-size: .88rem;
     display: flex;
     gap: 12px;
     align-items: flex-start;
 }

 .callout .icon {
     flex-shrink: 0;
     font-size: 1rem;
     margin-top: 1px;
 }

 .callout.tip {
     background: #EBF8F5;
     border-left: 4px solid var(--teal);
 }

 .callout.warn {
     background: #FFF7ED;
     border-left: 4px solid var(--orange);
 }

 .callout.info {
     background: #EFF6FF;
     border-left: 4px solid var(--blue);
 }

 .callout p {
     margin: 0;
     color: inherit;
 }

 /* Steps */
 .steps {
     counter-reset: step;
     list-style: none;
     margin: 10px 0 20px 0;
 }

 .steps li {
     counter-increment: step;
     display: flex;
     gap: 14px;
     margin-bottom: 14px;
     align-items: flex-start;
 }

 .steps li::before {
     content: counter(step);
     background: var(--blue);
     color: #fff;
     font-size: .75rem;
     font-weight: 700;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-top: 2px;
 }

 .steps li>div {
     flex: 1;
 }

 /* Feature grid */
 .feature-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 12px;
     margin: 16px 0 24px;
 }

 .feature-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 16px 18px;
     border-top: 3px solid var(--blue);
 }

 .feature-card .icon {
     font-size: 1.3rem;
     margin-bottom: 8px;
 }

 .feature-card h4 {
     font-size: .88rem;
     font-weight: 700;
     color: var(--navy);
     margin: 0 0 6px;
 }

 .feature-card p {
     font-size: .8rem;
     color: var(--dgrey);
     margin: 0;
 }

 /* Dashboard panels */
 .panel-list {
     display: flex;
     flex-direction: column;
     gap: 0;
     margin: 16px 0 24px;
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
 }

 .panel-item {
     display: flex;
     align-items: stretch;
     border-bottom: 1px solid var(--border);
     background: #fff;
 }

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

 .panel-item:nth-child(even) {
     background: var(--grey);
 }

 .panel-icon {
     background: var(--navy);
     color: #fff;
     font-size: 1rem;
     min-width: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .panel-body {
     padding: 13px 18px;
     flex: 1;
 }

 .panel-body strong {
     color: var(--navy);
     display: block;
     margin-bottom: 3px;
     font-size: .9rem;
 }

 .panel-body p {
     margin: 0;
     font-size: .84rem;
     color: var(--dgrey);
 }

 /* Tables */
 .tbl-wrap {
     overflow-x: auto;
     margin: 12px 0 20px;
     border-radius: 8px;
     border: 1px solid var(--border);
 }

 table {
     width: 100%;
     border-collapse: collapse;
     font-size: .85rem;
 }

 thead tr {
     background: var(--navy);
     color: #fff;
 }

 thead th {
     padding: 10px 14px;
     text-align: left;
     font-weight: 600;
     font-size: .8rem;
 }

 tbody tr:nth-child(even) {
     background: var(--grey);
 }

 tbody tr:hover {
     background: #E8EFF7;
 }

 td {
     padding: 9px 14px;
     border-bottom: 1px solid var(--border);
     vertical-align: top;
 }

 /* URL display */
 .url-box {
     background: var(--code-bg);
     border-radius: 8px;
     border-left: 3px solid var(--teal);
     padding: 14px 20px;
     margin: 12px 0 16px;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .url-box .lock {
     color: var(--teal);
     font-size: 1rem;
     flex-shrink: 0;
 }

 .url-box code {
     color: #7DD3FC;
     font-size: .9rem;
 }

 /* Footer */
 .footer {
     background: var(--navy);
     color: #4A6785;
     text-align: center;
     padding: 18px;
     font-size: .78rem;
     margin-top: 40px;
 }

 .footer span {
     color: var(--teal);
 }

 @media (max-width: 768px) {
     .sidebar {
         display: none;
     }

     .hero,
     .section {
         padding-left: 20px;
         padding-right: 20px;
     }
 }