:root {
    --color-primary: #000055;
    --color-primary-hover: #333388;
    --color-accent: #ff9900;
    --color-accent-hover: #ffaa33;
    --color-bg: #fafaff;
    --color-card-bg: #ffffff;
    --color-text: #000055;
    --color-text-muted: #7777bb;
    --color-border: #e2e8f0;
    --ok: #00bb44;
    --danger: #ff2222;
    --radius: 10px;
}

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

body{
    font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:16px;line-height:1.6;color:var(--color-text);
    background:var(--color-bg);min-height:100vh;display:flex;
}

.help-header{
    background:var(--color-primary);
    color:#fff;padding:20px 32px;text-align:center;
    border-radius:10px;margin-bottom:20px;
}
.help-header h1{font-size:1.5rem;font-weight:700;margin-bottom:4px}
.help-header p{font-size:.875rem;opacity:.85}

.help-nav{
    width:260px;min-height:100vh;background:#fcfcff;
    border-right:1px solid var(--color-border);padding:1.5rem 1rem;
    position:sticky;top:0;flex-shrink:0;
}
.help-nav .brand{
    font-weight:700;font-size:1.05rem;color:var(--color-primary);
    margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem;
}
.help-nav .section-label{
    font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;
    color:var(--color-text-muted);margin:1rem 0 .25rem;padding:0 .75rem;font-weight:600;
}
.help-nav a{
    display:block;padding:.45rem .75rem;border-radius:.5rem;
    color:var(--color-text-muted);text-decoration:none;font-size:.85rem;
    margin-bottom:.1rem;transition:background .15s;
}
.help-nav a:hover,.help-nav a.active{background:#eef2ff;color:var(--color-primary);font-weight:500}
.help-nav .admin-only{display:none}

.help-main{
    flex:1;max-width:860px;padding:2rem 2.5rem;overflow-x:hidden;
}
.help-main h2{
    font-size:1.25rem;font-weight:700;color:var(--color-primary);
    border-bottom:2px solid var(--color-accent);padding-bottom:.5rem;margin-bottom:1rem;
}
.help-main h3{font-size:1rem;font-weight:600;margin:1.25rem 0 .5rem;color:var(--color-primary)}
.help-main p,.help-main li{
    font-size:.875rem;line-height:1.65;color:var(--color-text-muted);margin-bottom:.5rem;
}
.help-main ul,.help-main ol{padding-left:1.25rem}
.help-main .step{
    background:#f0f4ff;border-left:3px solid var(--color-primary);
    padding:.75rem 1rem;margin:.75rem 0;border-radius:0 .5rem .5rem 0;font-size:.875rem;
}
.help-main .card{
    background:var(--color-card-bg);border:1px solid var(--color-border);
    border-radius:.75rem;padding:1.5rem;margin-bottom:1.5rem;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.help-main .card.admin{
    border-left:4px solid #991b1b;
}
.help-main .card.danger{
    border-left:4px solid #991b1b;background:#fff5f5;
}
.badge{display:inline-block;padding:.1rem .45rem;border-radius:9999px;font-size:.65rem;font-weight:600}
.badge-user{background:#dbeafe;color:#1e40af}
.badge-admin{background:#fee2e2;color:#991b1b}
.price{font-weight:700;color:var(--color-primary)}
code{background:#f1f5f9;padding:.1rem .35rem;border-radius:.25rem;font-size:.8rem;font-family:monospace}
.admin-section{display:none}

.help-lang-select{
    width:100%;padding:.45rem .75rem;border:1px solid var(--color-border);
    border-radius:.5rem;background:var(--color-card-bg);color:var(--color-text);
    font-family:Jost,sans-serif;font-size:.85rem;cursor:pointer;
    margin:0 .75rem 1rem;width:calc(100% - 1.5rem);
}
.help-lang-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(0,0,85,.1)}

@media(max-width:768px){
    body{display:block}
    .help-nav{width:100%;min-height:auto;position:static;border-right:none;border-bottom:1px solid var(--color-border);padding:1rem}
    .help-main{padding:1rem}
}