:root{
    --navy:#0b1522;
    --navy-2:#101f36;
    --blue:#3454d1;
    --blue-dark:#28409e;
    --blue-light:#eef2fd;
    --border:#e3e8f0;
    --text:#1e293b;
    --text-muted:#64748b;
    --bg:#f4f7fb;
    --radius:.6rem;
    --radius-lg:.9rem;
    --shadow:0 1px 2px rgba(15,23,42,.06),0 10px 24px -10px rgba(15,23,42,.12);
}

*{box-sizing:border-box;}

html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- Top bar ---------- */

.topbar{
    position:fixed;
    top:0;left:0;right:0;
    height:56px;
    background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:0 1rem;
    z-index:40;
}

.topbar .brand{
    display:flex;
    align-items:center;
    gap:.6rem;
    color:#fff;
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:.2px;
}

.topbar .brand-mark{
    width:30px;height:30px;
    border-radius:8px;
    background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    font-size:16px;
}

.topbar .brand small{
    display:block;
    font-weight:400;
    font-size:.68rem;
    color:#9fb0d0;
    letter-spacing:.3px;
}

.topbar-spacer{flex:1;}

.topbar-link{
    color:#cdd7ee;
    font-size:.85rem;
    padding:.4rem .7rem;
    border-radius:999px;
}

.topbar-link:hover{
    color:#fff;
    text-decoration:none;
    background:rgba(255,255,255,.08);
}

.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:1.3rem;
    cursor:pointer;
    padding:.25rem .4rem;
}

/* ---------- Layout ---------- */

.shell{
    display:flex;
    padding-top:56px;
    min-height:100vh;
}

.sidebar{
    position:fixed;
    top:56px;bottom:0;left:0;
    width:270px;
    background:#fff;
    border-right:1px solid var(--border);
    overflow-y:auto;
    padding:1.25rem 0 3rem;
    z-index:30;
}

.sidebar-group{
    margin-bottom:1.4rem;
}

.sidebar-group-title{
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-muted);
    padding:0 1.25rem;
    margin-bottom:.4rem;
}

.sidebar a.nav-link{
    display:flex;
    align-items:center;
    gap:.55rem;
    padding:.45rem 1.25rem;
    font-size:.9rem;
    color:var(--text);
    border-left:3px solid transparent;
}

.sidebar a.nav-link:hover{
    background:var(--blue-light);
    text-decoration:none;
}

.sidebar a.nav-link.active{
    background:var(--blue-light);
    border-left-color:var(--blue);
    color:var(--blue-dark);
    font-weight:600;
}

.sidebar a.nav-link.disabled{
    color:#b7c0cf;
    cursor:default;
    pointer-events:none;
}

.sidebar .badge-soon{
    margin-left:auto;
    font-size:.62rem;
    background:#f0f2f6;
    color:#94a0b3;
    padding:.1rem .4rem;
    border-radius:999px;
    font-weight:600;
}

.content{
    margin-left:270px;
    flex:1;
    padding:2.5rem 3rem 6rem;
    max-width:920px;
}

.content .eyebrow{
    color:var(--blue);
    font-weight:700;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:.5rem;
}

.content h1{
    font-size:2rem;
    margin:0 0 .5rem;
    color:var(--navy);
}

.content .lead{
    font-size:1.05rem;
    color:var(--text-muted);
    margin-bottom:2rem;
    line-height:1.6;
}

.content h2{
    font-size:1.3rem;
    margin:2.4rem 0 1rem;
    color:var(--navy);
    padding-top:.4rem;
    border-top:1px solid var(--border);
}

.content h2:first-of-type{border-top:none;padding-top:0;}

.content h3{
    font-size:1.05rem;
    margin:1.6rem 0 .6rem;
    color:var(--navy);
}

.content p,.content li{
    line-height:1.75;
    font-size:.96rem;
}

.content ul,.content ol{padding-left:1.3rem;}

.card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1.25rem 1.4rem;
    box-shadow:var(--shadow);
    margin:1.25rem 0;
}

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
    margin:1.5rem 0;
}

.mini-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1rem 1.1rem;
}

.mini-card .mini-icon{
    width:34px;height:34px;
    border-radius:8px;
    background:var(--blue-light);
    color:var(--blue-dark);
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;
    margin-bottom:.6rem;
}

.mini-card h4{
    margin:0 0 .3rem;
    font-size:.92rem;
    color:var(--navy);
}

.mini-card p{
    margin:0;
    font-size:.84rem;
    color:var(--text-muted);
    line-height:1.55;
}

.callout{
    display:flex;
    gap:.75rem;
    background:var(--blue-light);
    border:1px solid #dbe4fa;
    border-radius:var(--radius);
    padding:.9rem 1.1rem;
    margin:1.5rem 0;
    font-size:.9rem;
}

.screenshot{
    margin:1.75rem 0;
    padding:0;
}

.screenshot .frame{
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    overflow:hidden;
    background:#fff;
}

.screenshot img{
    display:block;
    width:100%;
    height:auto;
}

.screenshot figcaption{
    margin-top:.6rem;
    font-size:.84rem;
    color:var(--text-muted);
    text-align:center;
}

.callout .icon{font-size:1.1rem;line-height:1.4;}

.callout.tip{background:#eefaf1;border-color:#d3f0dc;}
.callout.warn{background:#fff8ec;border-color:#f5e3bd;}

.steps{
    counter-reset:step;
    list-style:none;
    padding-left:0;
    margin:1.5rem 0;
}

.steps li{
    counter-increment:step;
    position:relative;
    padding:.15rem 0 1.2rem 2.6rem;
    border-left:2px solid var(--border);
    margin-left:1rem;
}

.steps li:last-child{border-left-color:transparent;padding-bottom:0;}

.steps li::before{
    content:counter(step);
    position:absolute;
    left:-1.05rem;top:-.1rem;
    width:2.1rem;height:2.1rem;
    background:var(--blue);
    color:#fff;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.85rem;
    font-weight:700;
}

.steps li strong{display:block;color:var(--navy);margin-bottom:.15rem;font-size:.95rem;}

table.simple{
    width:100%;
    border-collapse:collapse;
    margin:1.25rem 0;
    font-size:.88rem;
}

table.simple th{
    text-align:left;
    background:#f8fafc;
    color:var(--navy);
    padding:.55rem .75rem;
    border-bottom:2px solid var(--border);
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.03em;
}

table.simple td{
    padding:.6rem .75rem;
    border-bottom:1px solid var(--border);
    vertical-align:top;
}

.tag{
    display:inline-block;
    font-size:.72rem;
    font-weight:600;
    padding:.15rem .55rem;
    border-radius:999px;
    background:var(--blue-light);
    color:var(--blue-dark);
}

.tag.green{background:#e7f8ed;color:#1a7f43;}
.tag.amber{background:#fdf3df;color:#946200;}

.page-nav{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    margin-top:3rem;
    padding-top:1.5rem;
    border-top:1px solid var(--border);
}

.page-nav a{
    flex:1;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:.9rem 1.1rem;
    color:var(--text);
    font-size:.85rem;
}

.page-nav a:hover{border-color:var(--blue);text-decoration:none;background:var(--blue-light);}

.page-nav .dir{display:block;color:var(--text-muted);font-size:.72rem;margin-bottom:.2rem;}
.page-nav .next{text-align:right;}

.sidebar-backdrop{
    display:none;
    position:fixed;inset:0;
    background:rgba(15,23,42,.4);
    z-index:20;
}

@media (max-width:900px){
    .menu-toggle{display:block;}
    .sidebar{
        transform:translateX(-100%);
        transition:transform .2s ease;
        box-shadow:var(--shadow);
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar-backdrop.show{display:block;}
    .content{margin-left:0;padding:2rem 1.25rem 5rem;}
}