/* ============ DocGen AI · Cabinet v2 ============ */
:root {
    --emerald: #059669;
    --emerald-deep: #047857;
    --emerald-darker: #064e3b;
    --emerald-darkest: #022c22;
    --emerald-light: #10b981;
    --emerald-bright: #34d399;
    --emerald-pale: #ecfdf5;
    --emerald-mist: #f0fdf4;
    --ink: #0b1410;
    --ink-2: #1a2520;
    --moss-1: #f8faf8;
    --moss-2: #eef2ef;
    --moss-3: #dee5e0;
    --gray-3: #e7e9e6;
    --gray-4: #b8bdb8;
    --gray-5: #6b7570;
    --gray-6: #3c4540;
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--moss-1);
    letter-spacing: -0.012em;
    text-rendering: optimizeLegibility;
}
.mono { font-family: 'JetBrains Mono', monospace; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* ============ LAYOUT ============ */
.shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}
@media (max-width: 1024px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
}

/* ============ SIDEBAR ============ */
.sidebar {
    background: var(--ink);
    color: rgba(255,255,255,0.85);
    padding: 24px 18px;
    display: flex; flex-direction: column;
    position: sticky; top: 0;
    height: 100vh;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.sb-logo {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 6px;
    margin-bottom: 28px;
}
.logo-mark {
    width: 38px; height: 38px; background: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
    filter: drop-shadow(0 4px 10px rgba(5,150,105,0.35));
}
.logo-mark img, .logo-mark svg { width: 100%; height: 100%; display: block; }
.sb-logo:hover .logo-mark { transform: scale(1.06) rotate(-2deg); }
.logo-text { font-weight: 700; font-size: 15.5px; letter-spacing: -0.02em; color: white; }
.logo-text .dot { color: var(--emerald-bright); }

.sb-label {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: rgba(255,255,255,0.35);
    padding: 0 8px;
    margin: 16px 0 8px;
}
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px; font-weight: 500;
    color: rgba(255,255,255,0.7);
    transition: all .15s;
    text-align: left;
    width: 100%;
}
.sb-item:hover { background: rgba(255,255,255,0.05); color: white; }
.sb-item.active {
    background: rgba(52,211,153,0.12);
    color: var(--emerald-bright);
    box-shadow: inset 0 0 0 1px rgba(52,211,153,0.18);
}
.sb-item .ico {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sb-item .badge {
    margin-left: auto;
    padding: 2px 7px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    color: rgba(255,255,255,0.6);
}
.sb-item.active .badge { background: rgba(52,211,153,0.2); color: var(--emerald-bright); }
.sb-item .badge.new { background: rgba(52,211,153,0.18); color: var(--emerald-bright); font-family: 'JetBrains Mono', monospace; }

.sb-plan {
    margin-top: auto;
    margin-bottom: 12px;
    background: linear-gradient(140deg, rgba(52,211,153,0.10), rgba(5,150,105,0.05));
    border: 1px solid rgba(52,211,153,0.15);
    border-radius: 14px;
    padding: 16px;
    position: relative;
    overflow: hidden;
}
.sb-plan::before {
    content: '';
    position: absolute; top: -50%; right: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(52,211,153,0.18), transparent 50%);
    pointer-events: none;
}
.sb-plan-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
    position: relative;
}
.sb-plan-head .em-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--emerald-bright);
    box-shadow: 0 0 0 3px rgba(52,211,153,0.2), 0 0 10px var(--emerald-bright);
}
.sb-plan-head .name {
    font-size: 13px; font-weight: 700;
    color: white;
    letter-spacing: -0.01em;
}
.sb-plan-head .counter-pill {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    position: relative;
}
.sb-plan-prog {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
    position: relative;
}
.sb-plan-prog .bar {
    height: 100%;
    width: 24%;
    background: linear-gradient(90deg, var(--emerald-bright), var(--emerald-light));
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(52,211,153,0.5);
}
.sb-plan-counter {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
    position: relative;
}
.sb-plan-counter b { color: white; font-weight: 700; }
.sb-plan-agent-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.sb-plan-agent-row .lbl {
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.01em;
}
.sb-plan-agent-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}
.sb-plan-prog .bar.bar-agent {
    background: linear-gradient(90deg, #a78bfa, #8b5cf6);
    box-shadow: 0 0 12px rgba(139,92,246,0.45);
}
.sb-plan-cta {
    width: 100%;
    padding: 9px 12px;
    background: white;
    color: var(--ink);
    border-radius: 9px;
    font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all .15s;
    position: relative;
}
.sb-plan-cta:hover { background: var(--emerald-bright); }

.sb-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: 10px;
    transition: all .15s;
    border: 1px solid rgba(255,255,255,0.06);
}
.sb-user:hover { background: rgba(255,255,255,0.04); }
.sb-user .ava {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--emerald-bright), var(--emerald-deep));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.sb-user .info { flex: 1; min-width: 0; }
.sb-user .name { font-size: 13px; font-weight: 600; color: white; letter-spacing: -0.005em; }
.sb-user .email { font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user .more {
    width: 28px; height: 28px;
    border-radius: 8px;
    color: rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.sb-user .more:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }

/* ============ MAIN ============ */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
    border-bottom: 1px solid var(--moss-2);
    padding: 16px 36px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(248,250,248,0.85);
}
.topbar-left { min-width: 0; }
.crumb { font-size: 11.5px; color: var(--gray-5); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
.crumb-root { color: var(--gray-5); }
.crumb .sep { color: var(--gray-4); }
.topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }

.topbar-right { display: flex; align-items: center; gap: 8px; }
.icon-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: white;
    border: 1px solid var(--moss-3);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--gray-6);
    transition: all .15s;
    position: relative;
}
.icon-btn:hover { background: var(--moss-2); color: var(--ink); }
.icon-btn .dot {
    position: absolute; top: 8px; right: 8px;
    width: 7px; height: 7px;
    background: var(--emerald);
    border-radius: 50%;
    border: 2px solid white;
}

.switch {
    width: 38px; height: 22px;
    background: var(--moss-3);
    border-radius: 999px;
    position: relative;
    transition: all .15s;
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
}
.switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: white;
    border-radius: 50%;
    transition: all .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.switch.on { background: var(--emerald); }
.switch.on::after { transform: translateX(16px); }

/* ============ CONTENT ============ */
.content {
    flex: 1;
    min-height: 0;
    padding: 28px 36px 48px;
    overflow: auto;
}
@media (max-width: 768px) { .content { padding: 20px 18px 40px; } }

.pane { display: none; animation: paneIn .3s ease-out; }
.pane.active { display: block; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============ Common cards ============ */
.card {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 18px;
    overflow: hidden;
}
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--moss-2);
}
.card-head-l { display: flex; align-items: center; gap: 12px; }
.card-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.card-head p { font-size: 12.5px; color: var(--gray-5); margin-top: 2px; }
.card-head .ico-wrap {
    width: 36px; height: 36px;
    background: var(--emerald-pale);
    color: var(--emerald-deep);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.card-head .ico-wrap.docs-ico { background: #dbeafe; color: #1d4ed8; }
.card-body { padding: 22px; }

.link-btn {
    color: var(--emerald);
    font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color .15s;
}
.link-btn:hover { color: var(--emerald-deep); }

.inline-link {
    color: var(--emerald);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    cursor: pointer;
    font-family: inherit;
}
.inline-link:hover { color: var(--emerald-deep); }

/* Mini tabs */
.mini-tabs {
    display: flex; gap: 2px;
    padding: 3px;
    background: var(--moss-2);
    border-radius: 9px;
}
.mini-tab {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 12.5px; font-weight: 600;
    color: var(--gray-5);
    transition: all .15s;
    cursor: pointer;
}
.mini-tab.active {
    background: white;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Form inputs */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 700px) { .row-2 { grid-template-columns: 1fr; } }
.field-block { display: block; }
.field-block label {
    display: block;
    font-size: 12.5px; font-weight: 600;
    color: var(--gray-6);
    margin-bottom: 6px;
}
.prompt-label {
    display: block;
    font-size: 12.5px; font-weight: 600;
    color: var(--gray-6);
    margin-bottom: 6px;
}
.text-input, .select-input {
    width: 100%;
    padding: 11px 14px;
    background: var(--moss-1);
    border: 1px solid var(--moss-2);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ink);
    transition: all .15s;
}
.text-input:focus, .select-input:focus {
    outline: none;
    background: white;
    border-color: var(--emerald);
    box-shadow: 0 0 0 4px rgba(5,150,105,0.10);
}
.select-input {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7570' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 36px;
}

/* ════════════════════════════════════════ */
/* PANE: CREATE                              */
/* ════════════════════════════════════════ */

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}
@media (max-width: 1100px) { .stats-row { grid-template-columns: 1fr 1fr; } }
.stat-card {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.stat-card.hero {
    background: linear-gradient(140deg, var(--emerald-darker) 0%, var(--ink) 60%);
    color: white;
    border-color: transparent;
}
.stat-card.hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 60% at 100% 0%, rgba(52,211,153,0.30), transparent 60%);
}
.stat-card.hero > * { position: relative; }
.stat-card .label {
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gray-5);
    margin-bottom: 8px;
}
.stat-card.hero .label { color: rgba(255,255,255,0.55); }
.stat-card .num {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.stat-card.hero .num { color: white; }
.stat-card .num .unit { font-size: 14px; color: var(--gray-4); font-weight: 500; margin-left: 4px; }
.stat-card.hero .num .unit { color: rgba(255,255,255,0.5); }
.stat-card .sub {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--gray-5);
}
.stat-card.hero .sub { color: rgba(255,255,255,0.6); }
.stat-card .stat-icon {
    position: absolute;
    top: 16px; right: 16px;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--moss-2);
    color: var(--gray-6);
    display: flex; align-items: center; justify-content: center;
}

.hero-card-inner { display: flex; align-items: center; gap: 20px; }
.hero-card-text { flex: 1; }
.hero-card-text .greeting {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
}
.hero-card-text h2 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.hero-card-text h2 .em { color: var(--emerald-bright); }
.hero-card-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 16px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    font-size: 12.5px;
    color: white;
    transition: all .15s;
}
.hero-card-cta:hover { background: rgba(255,255,255,0.14); }

/* Templates */
.templates { margin-bottom: 22px; }
.suggest-label {
    font-size: 11.5px; font-weight: 600;
    color: var(--gray-5);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.templates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { .templates-grid { grid-template-columns: 1fr; } }
.template-card {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 14px;
    padding: 16px;
    display: flex; align-items: center; gap: 14px;
    transition: all .15s;
    text-align: left;
    width: 100%;
}
.template-card:hover { border-color: var(--emerald); background: var(--emerald-mist); }
.template-card .ico {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--moss-2);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}
.template-card:hover .ico { background: var(--emerald); color: white; }
.template-card .txt { flex: 1; min-width: 0; }
.template-card .txt b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.template-card .txt span { font-size: 11.5px; color: var(--gray-5); }
.template-card .arrow { color: var(--gray-4); transition: all .15s; flex-shrink: 0; }
.template-card:hover .arrow { color: var(--emerald); transform: translateX(3px); }

/* Work grid */
.work-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 22px;
    align-items: flex-start;
}
@media (max-width: 1280px) { .work-grid { grid-template-columns: 1fr; } }

/* Format segmented */
.format-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 4px;
    background: var(--moss-2);
    border-radius: 10px;
}
.format-opt {
    padding: 7px 0;
    text-align: center;
    border-radius: 7px;
    font-size: 13px; font-weight: 600;
    color: var(--gray-6);
    transition: all .15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer;
}
.format-opt:hover { color: var(--ink); }
.format-opt.active {
    background: white;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.format-opt .badge {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    background: var(--moss-3);
    padding: 1px 5px;
    border-radius: 3px;
}
.format-opt.active .badge { background: var(--emerald-pale); color: var(--emerald-deep); }

/* Prompt */
.prompt-wrap {
    position: relative;
    background: var(--moss-1);
    border: 1px solid var(--moss-2);
    border-radius: 14px;
    padding: 14px;
    transition: all .15s;
    margin-bottom: 16px;
}
.prompt-wrap:focus-within {
    background: white;
    border-color: var(--emerald);
    box-shadow: 0 0 0 4px rgba(5,150,105,0.10);
}
.prompt-textarea {
    width: 100%;
    min-height: 100px;
    border: none;
    background: transparent;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    resize: none;
}
.prompt-textarea:focus { outline: none; }
.prompt-textarea::placeholder { color: var(--gray-4); }
.prompt-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--moss-2);
    margin-top: 8px;
}
.prompt-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    color: var(--gray-6);
    transition: all .15s;
}
.tool-btn:hover { border-color: var(--gray-4); color: var(--ink); }
.tool-btn svg { width: 12px; height: 12px; }
.tool-btn.on { background: var(--emerald-pale); border-color: rgba(5,150,105,0.25); color: var(--emerald-deep); }
.char-count { font-size: 11.5px; color: var(--gray-4); }

.suggest-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.suggest {
    padding: 7px 12px;
    background: var(--moss-1);
    border: 1px solid var(--moss-2);
    border-radius: 999px;
    font-size: 12.5px; color: var(--gray-6); font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .15s;
}
.suggest:hover { background: white; border-color: var(--emerald); color: var(--emerald-deep); }
.suggest svg { color: var(--gray-4); width: 12px; height: 12px; }
.suggest:hover svg { color: var(--emerald); }

.gen-btn {
    width: 100%;
    padding: 16px;
    background: var(--emerald);
    color: white;
    border-radius: 14px;
    font-size: 15px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    transition: all .2s;
    box-shadow: 0 8px 22px -8px rgba(5,150,105,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
    letter-spacing: -0.005em;
}
.gen-btn:hover { background: var(--emerald-deep); transform: translateY(-1px); box-shadow: 0 12px 32px -10px rgba(5,150,105,0.65); }
.gen-btn .kbd {
    margin-left: 6px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 5px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
}

/* Docs list compact */
.docs-list { padding: 8px; max-height: 460px; overflow-y: auto; }
.doc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: all .15s;
    cursor: pointer;
}
.doc-item:hover { background: var(--moss-1); }
.doc-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; font-weight: 700;
    flex-shrink: 0;
}
.doc-icon.docx { background: #dbeafe; color: #1d4ed8; }
.doc-icon.xlsx { background: var(--emerald-pale); color: var(--emerald-deep); }
.doc-icon.pdf { background: #fee2e2; color: #b91c1c; }
.doc-info { flex: 1; min-width: 0; }
.doc-info .title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-info .meta {
    font-size: 11.5px; color: var(--gray-5);
    margin-top: 3px;
    display: inline-flex; align-items: center; gap: 6px;
}
.doc-info .meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-4); display: inline-block; }
.doc-actions {
    display: flex; gap: 2px;
    opacity: 0;
    transition: opacity .15s;
}
.doc-item:hover .doc-actions { opacity: 1; }
.doc-actions button {
    width: 28px; height: 28px;
    border-radius: 7px;
    color: var(--gray-5);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.doc-actions button:hover { background: white; color: var(--ink); }

.tip-card {
    background: linear-gradient(140deg, rgba(52,211,153,0.08), rgba(5,150,105,0.04));
    border: 1px dashed var(--emerald);
    border-radius: 14px;
    padding: 16px;
    display: flex; gap: 12px;
}
.tip-card .ico {
    width: 32px; height: 32px;
    background: var(--emerald);
    color: white;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tip-card b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.tip-card p { font-size: 12.5px; line-height: 1.5; color: var(--gray-6); margin-top: 3px; }

/* ════════════════════════════════════════ */
/* PANE: DOCUMENTS                           */
/* ════════════════════════════════════════ */
.filters-bar {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.search-wrap {
    flex: 1; min-width: 240px;
    position: relative;
}
.search-wrap input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 12px;
    font-size: 14px;
    color: var(--ink);
    transition: all .15s;
}
.search-wrap input:focus {
    outline: none;
    border-color: var(--emerald);
    box-shadow: 0 0 0 4px rgba(5,150,105,0.10);
}
.search-wrap svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--gray-4); width: 16px; height: 16px;
}
.filter-tabs {
    display: inline-flex;
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}
.filter-tab {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px; font-weight: 600;
    color: var(--gray-5);
    transition: all .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.filter-tab:hover { color: var(--ink); }
.filter-tab.active {
    background: var(--ink);
    color: white;
}
.filter-tab .ct {
    padding: 1px 6px;
    background: var(--moss-2);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    color: var(--gray-6);
}
.filter-tab.active .ct { background: rgba(255,255,255,0.18); color: white; }
.view-toggle {
    display: inline-flex; gap: 2px;
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 10px;
    padding: 4px;
}
.view-btn {
    width: 32px; height: 32px;
    border-radius: 7px;
    color: var(--gray-5);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.view-btn:hover { color: var(--ink); }
.view-btn.active { background: var(--moss-2); color: var(--ink); }

.docs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 1100px) { .docs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .docs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .docs-grid { grid-template-columns: 1fr; } }
.doc-card {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}
.doc-card:hover {
    border-color: var(--emerald);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -14px rgba(5,150,105,0.15);
}
.doc-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 14px;
}
.doc-menu {
    width: 28px; height: 28px;
    border-radius: 7px;
    color: var(--gray-4);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s;
    opacity: 0;
}
.doc-card:hover .doc-menu { opacity: 1; }
.doc-menu:hover { background: var(--moss-1); color: var(--ink); }
.doc-card h4 {
    font-size: 14px; font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin-bottom: 6px;
    /* clamp 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.doc-card .meta { font-size: 11.5px; color: var(--gray-5); margin-bottom: 12px; }
.doc-card .size-row {
    display: flex; justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--moss-2);
    font-size: 11.5px;
    color: var(--gray-5);
}

.docs-foot-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 0;
    border-top: 1px solid var(--moss-2);
    font-size: 13px; color: var(--gray-5);
}
.page-btns { display: flex; gap: 6px; }
.page-btn {
    min-width: 32px; height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: white;
    border: 1px solid var(--moss-2);
    color: var(--gray-6);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s;
    font-size: 13px; font-weight: 600;
}
.page-btn:hover { border-color: var(--gray-4); color: var(--ink); }
.page-btn.active {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}

/* ════════════════════════════════════════ */
/* PANE: AGENT                               */
/* ════════════════════════════════════════ */
.agent-banner {
    background: linear-gradient(140deg, var(--emerald-darker) 0%, var(--ink) 60%);
    color: white;
    border-radius: 18px;
    padding: 22px 26px;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    gap: 16px;
    flex-wrap: wrap;
}
.agent-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 60% at 100% 50%, rgba(52,211,153,0.25), transparent 60%);
}
.agent-banner > * { position: relative; }
.agent-banner-l { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 280px; }
.agent-banner-ico {
    width: 48px; height: 48px;
    background: rgba(52,211,153,0.15);
    color: var(--emerald-bright);
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.agent-banner h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 3px; }
.agent-banner p { font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.agent-stats {
    display: flex; gap: 16px;
}
.agent-stats > div {
    text-align: right;
}
.agent-stats b {
    font-size: 22px; font-weight: 700; color: white;
    letter-spacing: -0.02em;
    display: block;
    line-height: 1;
}
.agent-stats span {
    font-size: 11.5px;
    color: rgba(255,255,255,0.55);
    margin-top: 3px;
    display: block;
}

.agent-workspace {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    min-height: 620px;
}
@media (max-width: 1100px) { .agent-workspace { grid-template-columns: 1fr; } }

.agent-viewer {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 16px;
    display: flex; flex-direction: column;
    overflow: hidden;
    min-height: 600px;
}
.agent-viewer-head {
    padding: 12px 16px;
    background: var(--moss-1);
    border-bottom: 1px solid var(--moss-2);
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.file-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: white;
    border: 1px solid var(--moss-3);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px; color: var(--gray-6);
}
.file-pill::before {
    content: ''; width: 14px; height: 14px;
    background: var(--emerald-pale);
    border-radius: 3px;
    border: 1px solid var(--emerald);
}
.page-info { font-size: 11.5px; color: var(--gray-5); }
.zoom-controls {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 8px;
    padding: 3px;
}
.zoom-controls button {
    width: 24px; height: 24px;
    border-radius: 5px;
    color: var(--gray-6);
    font-size: 13px; font-weight: 600;
}
.zoom-controls button:hover { background: var(--moss-2); }
.zoom-controls span { font-size: 11.5px; color: var(--gray-6); padding: 0 6px; font-family: 'JetBrains Mono', monospace; }
.btn-secondary {
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--emerald-pale);
    color: var(--emerald-deep);
    font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .12s;
}
.btn-secondary:hover { background: var(--emerald); color: white; }
.icon-mini {
    width: 28px; height: 28px;
    border-radius: 7px;
    color: var(--gray-5);
    display: inline-flex; align-items: center; justify-content: center;
}
.icon-mini:hover { background: var(--moss-2); color: var(--ink); }

.agent-doc-paper {
    flex: 1;
    overflow-y: auto;
    background: #e8eef0;
    padding: 20px;
}
.paper-page {
    background: white;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 56px;
    box-shadow: 0 6px 24px -6px rgba(0,0,0,0.10);
    border-radius: 4px;
    min-height: 700px;
}
.paper-h { font-size: 12px; font-weight: 700; margin: 14px 0 6px; padding-left: 10px; border-left: 3px solid var(--emerald); }
.paper-p { font-size: 11.5px; line-height: 1.7; color: #333; margin-bottom: 8px; }
.paper-diff-add {
    background: rgba(52,211,153,0.12);
    border-left: 3px solid var(--emerald);
    padding: 8px 12px; margin: 8px 0;
    border-radius: 0 8px 8px 0;
    font-size: 11.5px; line-height: 1.7;
    color: #166534;
    position: relative;
    animation: diffSlide .5s ease-out;
}
@keyframes diffSlide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.paper-diff-add .diff-tag {
    display: inline-block;
    padding: 1px 6px;
    background: var(--emerald);
    color: white;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.05em;
    margin-right: 8px;
}

.agent-chat-panel {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 16px;
    display: flex; flex-direction: column;
    min-height: 600px;
    overflow: hidden;
}
.agent-chat-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--moss-2);
    display: flex; align-items: center; gap: 12px;
}
.agent-chat-ico {
    width: 36px; height: 36px;
    background: var(--emerald-pale);
    color: var(--emerald-deep);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.agent-chat-head .title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.agent-chat-head .sub { font-size: 11.5px; color: var(--gray-5); margin-top: 1px; }
.apply-btn {
    margin-left: auto;
    padding: 6px 12px;
    background: var(--emerald-pale);
    color: var(--emerald-deep);
    border: 1px solid rgba(5,150,105,0.25);
    border-radius: 8px;
    font-size: 12px; font-weight: 600;
    transition: all .12s;
}
.apply-btn:hover { background: var(--emerald); color: white; }

.agent-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--moss-1);
}
.bub {
    padding: 10px 14px; border-radius: 14px;
    font-size: 13px; line-height: 1.5;
    max-width: 92%;
}
.bub.user {
    background: var(--emerald); color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.bub.bot {
    background: white; border: 1px solid var(--moss-3);
    color: var(--ink-2);
    border-bottom-left-radius: 4px;
}
.bot-status {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--emerald-deep); font-weight: 600;
    font-size: 11.5px; margin-bottom: 4px;
}
.typing-bub {
    align-self: flex-start;
    display: inline-flex; gap: 3px; align-items: center;
    padding: 10px 14px;
    background: white;
    border: 1px solid var(--moss-3);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}
.typing-bub span { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); animation: bounce 1.4s infinite; }
.typing-bub span:nth-child(2) { animation-delay: .15s; }
.typing-bub span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

.agent-quick {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 12px 16px 8px;
    border-top: 1px solid var(--moss-2);
}
.agent-quick button {
    padding: 6px 12px;
    border: 1px solid var(--moss-2);
    background: var(--moss-1);
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    color: var(--gray-6);
    transition: all .12s;
}
.agent-quick button:hover { border-color: var(--emerald); color: var(--emerald-deep); background: var(--emerald-pale); }

.agent-input {
    padding: 12px 16px 16px;
    display: flex; gap: 8px;
    align-items: flex-end;
}
.agent-input textarea {
    flex: 1;
    padding: 11px 14px;
    background: var(--moss-1);
    border: 1px solid var(--moss-2);
    border-radius: 12px;
    font-size: 13.5px;
    color: var(--ink);
    resize: none;
    transition: all .15s;
    line-height: 1.45;
}
.agent-input textarea:focus {
    outline: none; background: white;
    border-color: var(--emerald);
    box-shadow: 0 0 0 4px rgba(5,150,105,0.10);
}
.send-btn {
    width: 44px; height: 44px;
    background: var(--emerald);
    color: white;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
    box-shadow: 0 6px 16px -6px rgba(5,150,105,0.5);
    flex-shrink: 0;
}
.send-btn:hover { background: var(--emerald-deep); }

/* ════════════════════════════════════════ */
/* PANE: TEMPLATES                           */
/* ════════════════════════════════════════ */
.tpl-intro {
    margin-bottom: 18px;
    padding: 16px 20px;
    background: var(--emerald-mist);
    border: 1px solid var(--emerald-pale);
    border-radius: 14px;
}
.tpl-intro p { font-size: 14px; color: var(--gray-6); line-height: 1.55; margin: 0; }

/* Toolbar */
.tpl-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.tpl-search-wrap {
    flex: 1 1 320px;
    min-width: 240px;
    position: relative;
}
.tpl-search-wrap svg {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--gray-4);
    pointer-events: none;
}
.tpl-search-wrap input {
    width: 100%;
    padding: 11px 14px 11px 42px;
    border: 1px solid var(--moss-3);
    border-radius: 12px;
    background: white;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: all .12s;
}
.tpl-search-wrap input:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(5,150,105,0.08); }
.tpl-filter {
    padding: 11px 32px 11px 14px;
    border: 1px solid var(--moss-3);
    border-radius: 12px;
    background: white;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7570' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    transition: all .12s;
}
.tpl-filter:hover { border-color: var(--gray-4); }
.tpl-filter:focus { border-color: var(--emerald); }
.tpl-count {
    font-size: 12.5px; color: var(--gray-5);
    margin-left: auto;
    padding: 0 4px;
    white-space: nowrap;
}

/* Empty state */
.tpl-empty {
    text-align: center;
    padding: 60px 24px;
    background: white;
    border: 1px dashed var(--moss-3);
    border-radius: 16px;
}
.tpl-empty-ico {
    width: 64px; height: 64px;
    background: var(--moss-1);
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--gray-5);
    margin-bottom: 16px;
}
.tpl-empty h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.tpl-empty p { font-size: 13.5px; color: var(--gray-5); margin-bottom: 16px; }

/* Card extras */
.tpl-card { position: relative; overflow: hidden; }

/* ─────────────────────────────────────────────────────────────
   Lock state — изящный полупрозрачный overlay с замочком
   ───────────────────────────────────────────────────────────── */
.tpl-card.tpl-locked {
    cursor: pointer;
    border-color: var(--moss-3);
}
.tpl-card.tpl-locked:hover { border-color: var(--gray-4); transform: translateY(-2px); }

/* Контент за overlay приглушаем */
.tpl-card.tpl-locked .tpl-icon,
.tpl-card.tpl-locked h4,
.tpl-card.tpl-locked p,
.tpl-card.tpl-locked .tpl-meta {
    filter: grayscale(0.55) blur(0.4px);
    opacity: 0.55;
    transition: opacity .25s, filter .25s;
}
.tpl-card.tpl-locked:hover .tpl-icon,
.tpl-card.tpl-locked:hover h4,
.tpl-card.tpl-locked:hover p,
.tpl-card.tpl-locked:hover .tpl-meta {
    opacity: 0.7;
    filter: grayscale(0.4);
}

.tpl-lock-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(160deg,
        rgba(255,255,255,0.55) 0%,
        rgba(248,250,248,0.78) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    transition: all .2s;
    pointer-events: none;
}
.tpl-card.tpl-locked:hover .tpl-lock-overlay {
    background: linear-gradient(160deg,
        rgba(11,20,16,0.04) 0%,
        rgba(11,20,16,0.10) 100%);
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
}

.tpl-lock-circle {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--moss-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    box-shadow: 0 8px 22px -8px rgba(11,20,16,0.18);
    transition: all .25s;
}
.tpl-lock-circle svg { width: 22px; height: 22px; }
.tpl-card.tpl-locked:hover .tpl-lock-circle {
    transform: scale(1.05) rotate(-4deg);
    box-shadow: 0 12px 28px -8px rgba(11,20,16,0.28);
}

.tpl-lock-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px 6px 14px;
    background: var(--ink);
    color: white;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px -6px rgba(11,20,16,0.45);
    transition: all .25s;
}
.tpl-lock-arrow {
    font-size: 14px;
    transition: transform .2s;
}
.tpl-card.tpl-locked:hover .tpl-lock-arrow { transform: translateX(3px); }

/* Цветовое кодирование тарифа на замке */
.tpl-lock-overlay.lock-pro .tpl-lock-circle { color: #1d4ed8; border-color: #c7d2fe; }
.tpl-lock-overlay.lock-pro .tpl-lock-pill {
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    box-shadow: 0 8px 20px -6px rgba(79,70,229,0.45);
}
.tpl-lock-overlay.lock-expert .tpl-lock-circle { color: #b45309; border-color: #fde68a; }
.tpl-lock-overlay.lock-expert .tpl-lock-pill {
    background: linear-gradient(135deg, #b45309, #d97706);
    box-shadow: 0 8px 20px -6px rgba(180,83,9,0.45);
}

.tpl-section { margin-bottom: 36px; }
.tpl-section-title {
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 14px;
    display: inline-flex; align-items: center; gap: 8px;
}
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) { .tpl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tpl-grid { grid-template-columns: 1fr; } }

.tpl-card {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 16px;
    padding: 22px;
    cursor: pointer;
    transition: all .2s;
}
.tpl-card:hover {
    border-color: var(--emerald);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -14px rgba(5,150,105,0.18);
}
.tpl-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; font-weight: 700;
    margin-bottom: 14px;
}
.tpl-icon.docx { background: #dbeafe; color: #1d4ed8; }
.tpl-icon.xlsx { background: var(--emerald-pale); color: var(--emerald-deep); }
.tpl-icon.pdf { background: #fee2e2; color: #b91c1c; }
.tpl-card h4 { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.tpl-card p { font-size: 13px; line-height: 1.55; color: var(--gray-6); margin-bottom: 14px; }
.tpl-meta {
    display: flex; justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--moss-2);
    font-size: 11.5px; color: var(--gray-5);
    font-family: 'JetBrains Mono', monospace;
}

/* ════════════════════════════════════════ */
/* PANE: SUBSCRIPTION                        */
/* ════════════════════════════════════════ */
.sub-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
    margin-bottom: 28px;
}
@media (max-width: 1024px) { .sub-grid { grid-template-columns: 1fr; } }

.sub-current {
    background: linear-gradient(140deg, var(--emerald-darker) 0%, var(--ink) 70%);
    color: white;
    border-radius: 20px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}
.sub-current::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 40% 60% at 100% 50%, rgba(52,211,153,0.25), transparent 60%);
}
.sub-current > * { position: relative; }
.sub-current-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}
.sub-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(52,211,153,0.18);
    color: var(--emerald-bright);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 12px;
}
.sub-current h2 {
    font-size: 32px; font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 8px;
}
.sub-current p { font-size: 13.5px; color: rgba(255,255,255,0.6); }
.sub-current p b { color: white; font-weight: 600; }
.sub-price { text-align: right; }
.sub-price .num {
    font-size: 36px; font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}
.sub-price .per { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 4px; }

.sub-usage-block {
    display: flex; flex-direction: column; gap: 16px;
    margin-bottom: 28px;
    padding: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}
.usage-row { display: flex; flex-direction: column; gap: 8px; }
.usage-info { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.usage-label { color: rgba(255,255,255,0.7); font-weight: 500; }
.usage-counter { color: rgba(255,255,255,0.55); font-family: 'JetBrains Mono', monospace; }
.usage-counter b { color: white; font-weight: 700; }
.usage-bar {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.usage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--emerald-bright), var(--emerald-light));
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(52,211,153,0.5);
}

.sub-actions {
    display: flex; gap: 10px;
    flex-wrap: wrap;
}
.btn-emerald {
    padding: 12px 22px;
    background: var(--emerald);
    color: white;
    border-radius: 12px;
    font-size: 13.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .15s;
    text-decoration: none;
    box-shadow: 0 6px 18px -4px rgba(5,150,105,0.5);
}
.btn-emerald:hover { background: var(--emerald-deep); transform: translateY(-1px); }
.btn-text {
    padding: 12px 18px;
    color: rgba(255,255,255,0.65);
    font-size: 13.5px; font-weight: 600;
    transition: color .15s;
}
.btn-text:hover { color: white; }

.sub-side {
    display: flex; flex-direction: column; gap: 14px;
}
.sub-card-mini {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 16px;
    padding: 20px;
}
.sub-card-mini h4 {
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gray-5);
    margin-bottom: 14px;
}
.card-payment {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.card-brand {
    padding: 4px 10px;
    background: linear-gradient(135deg, #1a1f71, #061538);
    color: white;
    border-radius: 5px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.04em;
    font-style: italic;
}
.card-number { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; }
.next-bill { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.next-bill b { color: var(--emerald); }
.bill-sub { font-size: 12px; color: var(--gray-5); }

.sub-section { margin-top: 32px; }
.sub-section-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.sub-section-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }

.bills-list {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 16px;
    overflow: hidden;
}
.bill-row {
    display: grid;
    grid-template-columns: 1fr 110px 90px 40px;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--moss-2);
    transition: background .12s;
}
.bill-row:last-child { border-bottom: none; }
.bill-row:hover { background: var(--moss-1); }
.bill-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.bill-meta { font-size: 11.5px; color: var(--gray-5); margin-top: 2px; }
.status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
}
.status::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
}
.status.paid { background: var(--emerald-pale); color: var(--emerald-deep); }
.status.paid::before { background: var(--emerald); }
.bill-amount { font-weight: 700; font-size: 14px; text-align: right; font-family: 'JetBrains Mono', monospace; }
.bill-action {
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--gray-5);
    display: inline-flex; align-items: center; justify-content: center;
}
.bill-action:hover { background: var(--moss-2); color: var(--ink); }

@media (max-width: 600px) {
    .bill-row { grid-template-columns: 1fr 80px; }
    .bill-status, .bill-action { display: none; }
}

/* ════════════════════════════════════════ */
/* PANE: GOST                                */
/* ════════════════════════════════════════ */
.gost-intro {
    margin-bottom: 22px;
    padding: 16px 20px;
    background: var(--emerald-mist);
    border: 1px solid var(--emerald-pale);
    border-radius: 14px;
}
.gost-intro p { font-size: 14px; color: var(--gray-6); line-height: 1.55; margin: 0; }

.gost-card-block {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 18px;
    overflow: hidden;
}
.gost-card-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--moss-2);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--moss-1);
    flex-wrap: wrap;
    gap: 12px;
}
.gost-card-tabs {
    display: inline-flex; gap: 2px;
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 10px;
    padding: 3px;
}
.gost-tab {
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px; font-weight: 600;
    color: var(--gray-5);
    display: inline-flex; align-items: center; gap: 7px;
    transition: all .15s;
}
.gost-tab:hover { color: var(--ink); }
.gost-tab.active {
    background: var(--emerald);
    color: white;
    box-shadow: 0 2px 8px -2px rgba(5,150,105,0.4);
}
.gost-enable-row {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: var(--gray-6);
    font-weight: 500;
}
.gost-pane { padding: 24px; display: none; }
.gost-pane.active { display: block; animation: paneIn .25s ease-out; }

.gost-sub-card {
    background: var(--moss-1);
    border: 1px solid var(--moss-2);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}
.gost-sub-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gray-6);
    margin-bottom: 16px;
}
.gost-sub-ico {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    flex-shrink: 0;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.margins-row {
    display: flex; gap: 24px; align-items: center;
}
.margins-fields { flex: 1; }
.margin-visual { width: 140px; flex-shrink: 0; }
.margin-page {
    position: relative;
    width: 100%; aspect-ratio: 210/297;
    background: white;
    border: 1.5px solid var(--moss-3);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}
.margin-inner {
    position: absolute;
    top: 11%; bottom: 11%; left: 22%; right: 11%;
    border: 1.5px dashed var(--emerald-bright);
    border-radius: 3px;
    background: repeating-linear-gradient(0deg, transparent, transparent 6px, var(--emerald-mist) 6px, var(--emerald-mist) 7px);
}
.margin-label {
    position: absolute;
    font-size: 9px; font-weight: 700;
    color: var(--emerald-deep);
    font-family: 'JetBrains Mono', monospace;
}
.margin-label.top { top: 2px; left: 50%; transform: translateX(-50%); }
.margin-label.bottom { bottom: 2px; left: 50%; transform: translateX(-50%); }
.margin-label.left { left: 2px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.margin-label.right { right: 2px; top: 50%; transform: translateY(-50%) rotate(90deg); }

.empty-pane-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-5);
}
.empty-pane-state h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; letter-spacing: -0.015em; }
.empty-pane-state p { font-size: 13.5px; max-width: 360px; margin: 0 auto; line-height: 1.55; }

.gost-foot {
    padding: 16px 22px;
    border-top: 1px solid var(--moss-2);
    display: flex; justify-content: flex-end; gap: 10px;
    background: var(--moss-1);
}
.gost-foot .btn-text {
    color: var(--gray-5);
    padding: 11px 18px;
}
.gost-foot .btn-text:hover { color: var(--ink); }
.gost-foot .btn-emerald { padding: 11px 22px; }

/* ════════════════════════════════════════ */
/* PANE: HELP                                */
/* ════════════════════════════════════════ */
.help-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 22px;
    align-items: flex-start;
}
@media (max-width: 1024px) { .help-grid { grid-template-columns: 1fr; } }

.help-main { }
.help-section-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; }

.help-faq {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 10px;
    transition: border-color .15s;
}
.help-faq[open] { border-color: var(--emerald); }
.help-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 15px; font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary .plus {
    width: 26px; height: 26px;
    background: var(--moss-2);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: all .2s;
    flex-shrink: 0;
    margin-left: 16px;
}
.help-faq[open] summary .plus { background: var(--emerald); color: white; transform: rotate(45deg); }
.help-faq p { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--gray-6); }
.help-faq p a, .help-faq p b { color: var(--ink); }
.help-faq p a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }

.help-side { display: flex; flex-direction: column; gap: 14px; }
.help-contact {
    background: linear-gradient(140deg, var(--emerald-darker) 0%, var(--ink) 70%);
    color: white;
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
}
.help-contact::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 60% at 100% 0%, rgba(52,211,153,0.25), transparent 60%);
}
.help-contact > * { position: relative; }
.help-contact h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.015em; }
.help-contact p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; margin-bottom: 16px; }
.help-contact-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    background: var(--emerald);
    color: white;
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    margin-bottom: 8px;
}
.help-contact-btn:hover { background: var(--emerald-deep); }
.help-contact-btn.ghost {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}
.help-contact-btn.ghost:hover { background: rgba(255,255,255,0.14); }

.help-card-resource {
    background: white;
    border: 1px solid var(--moss-2);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    transition: all .15s;
}
.help-card-resource:hover { border-color: var(--emerald); }
.help-card-ico {
    width: 36px; height: 36px;
    background: var(--emerald-pale);
    color: var(--emerald-deep);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.help-card-resource h4 { font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 4px; }
.help-card-resource p { font-size: 12.5px; color: var(--gray-5); line-height: 1.5; margin-bottom: 10px; }

/* ============ TOOL CHIPS (active state for ГОСТ / template / attach) ============ */
.tool-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    background: var(--emerald-pale);
    border: 1px solid rgba(5,150,105,0.25);
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    color: var(--emerald-deep);
    cursor: default;
    user-select: none;
}
.tool-chip svg { width: 12px; height: 12px; }
.tool-chip .chip-x {
    width: 16px; height: 16px;
    border: none; background: transparent;
    color: var(--emerald-deep);
    border-radius: 50%;
    cursor: pointer;
    margin-left: 2px;
    font-size: 13px; line-height: 1;
    transition: background .12s;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.tool-chip .chip-x:hover { background: rgba(5,150,105,0.18); }

/* List view variant for documents */
.docs-grid.view-list {
    display: flex; flex-direction: column; gap: 8px;
}
.doc-card-list {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px !important;
    cursor: default;
}
.doc-card-actions {
    display: flex; gap: 4px;
    opacity: 0; transition: opacity .15s;
}
.doc-card:hover .doc-card-actions { opacity: 1; }
.doc-card-list .doc-card-actions { opacity: 1; }
.doc-act, .doc-menu {
    width: 30px; height: 30px;
    border-radius: 8px;
    color: var(--gray-5);
    background: transparent;
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .12s;
}
.doc-act:hover, .doc-menu:hover { background: var(--moss-1); color: var(--ink); }
.doc-act-del:hover { background: #fef2f2 !important; color: #dc2626 !important; }
.doc-act-sign:hover, .doc-menu.doc-act-sign:hover { background: var(--emerald-pale) !important; color: var(--emerald-deep) !important; }

/* ============ SIGN PLACEMENT EDITOR ============ */
.sign-ov {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(11,20,16,0.62);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.sign-ov.show { display: flex; }
.sign-modal {
    background: var(--moss-1); border-radius: 18px;
    width: min(1120px, 96vw); height: min(90vh, 920px);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
}
.sign-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 22px; border-bottom: 1px solid var(--moss-3); background: white;
}
.sign-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.sign-x {
    border: none; background: transparent; font-size: 24px; line-height: 1;
    cursor: pointer; color: var(--gray-5); width: 34px; height: 34px; border-radius: 9px;
}
.sign-x:hover { background: var(--moss-2); color: var(--ink); }
.sign-body { flex: 1; display: flex; min-height: 0; }
.sign-palette {
    width: 210px; flex-shrink: 0; border-right: 1px solid var(--moss-3);
    background: white; padding: 16px; overflow-y: auto;
}
.sign-pal-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-5); margin-bottom: 12px; }
.sign-pal-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px;
    border: 1px solid var(--moss-3); border-radius: 11px; cursor: pointer;
    margin-bottom: 8px; background: var(--moss-1); transition: all .12s;
}
.sign-pal-item:hover { background: var(--emerald-pale); border-color: var(--emerald-bright); }
.sign-pal-item.disabled { opacity: 0.5; cursor: not-allowed; }
.sign-pal-item.disabled span::after { content: ' · не загружен'; color: var(--gray-4); font-weight: 400; font-size: 11px; }
.sign-tip {
    padding: 10px 22px; background: var(--emerald-pale);
    border-bottom: 1px solid var(--moss-3);
    font-size: 12.5px; color: var(--emerald-deep); font-weight: 500;
}
.sign-pal-item img { width: 46px; height: 38px; object-fit: contain; flex-shrink: 0; }
.sign-pal-item span { font-size: 13px; font-weight: 600; }
.sign-pal-hint { font-size: 11.5px; color: var(--gray-5); line-height: 1.5; margin-top: 12px; }
.sign-pages {
    flex: 1; overflow: auto; padding: 30px 24px;
    display: flex; flex-direction: column; align-items: center; gap: 26px;
    background: #e9eee8;
}
.sign-page {
    position: relative; background: white; flex-shrink: 0;
    box-shadow: 0 8px 26px -8px rgba(0,0,0,0.28);
}
.sign-page img { display: block; width: 100%; height: 100%; }
/* Word-предпросмотр (docx-preview) внутри редактора */
.sign-docx-holder { width: 100%; display: flex; justify-content: center; }
.sign-docx-holder .docx-wrapper { background: transparent !important; padding: 0 !important; gap: 22px; }
.sign-docx-holder section.docx { margin: 0 auto 22px !important; box-shadow: 0 8px 26px -8px rgba(0,0,0,0.28) !important; }
.sign-page-label { position: absolute; top: -19px; left: 0; font-size: 11px; color: var(--gray-5); z-index: 1; }
.sign-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.sign-layer .sign-el { pointer-events: auto; }
.sign-el { position: absolute; border: 1.5px dashed transparent; cursor: move; box-sizing: border-box; }
.sign-el:hover { border-color: var(--emerald-bright); }
.sign-el.sel { border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald); }
.sign-el img { width: 100%; height: auto; object-fit: contain; pointer-events: none; display: block; user-select: none; -webkit-user-drag: none; }
.sign-el-handle {
    position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
    background: var(--emerald); border: 2px solid white; border-radius: 50%;
    cursor: nwse-resize; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.sign-el-del {
    position: absolute; right: -9px; top: -9px; width: 18px; height: 18px;
    background: #dc2626; color: white; border: none; border-radius: 50%;
    cursor: pointer; font-size: 12px; line-height: 1; display: flex;
    align-items: center; justify-content: center; padding: 0;
}
.sign-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px solid var(--moss-3); background: white;
}
.sign-foot .btn-text {
    border: none; background: transparent; color: var(--gray-6);
    font-size: 14px; font-weight: 500; cursor: pointer; padding: 11px 18px; border-radius: 999px;
}
.sign-foot .btn-text:hover { background: var(--moss-2); }

/* ============ BRAND TAB ============ */
.brand-note {
    font-size: 13px; color: var(--gray-6); line-height: 1.55;
    background: var(--moss-1); border: 1px solid var(--moss-3);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 18px;
}
.brand-row { display: flex; gap: 18px; align-items: flex-start; }
@media (max-width: 640px) { .brand-row { flex-direction: column; } }
.brand-preview {
    flex-shrink: 0;
    width: 150px; min-height: 110px;
    border: 1px dashed var(--moss-3);
    border-radius: 12px;
    background: var(--moss-1);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; padding: 8px;
}
.brand-preview.round { border-radius: 50%; width: 130px; height: 130px; }
.brand-preview img { max-width: 100%; max-height: 120px; object-fit: contain; }
.brand-empty { font-size: 12px; color: var(--gray-4); }
.brand-controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.brand-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.brand-btn {
    padding: 8px 14px; border-radius: 9px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--moss-3); background: white; color: var(--ink);
    transition: all .12s;
}
.brand-btn:hover { background: var(--moss-2); }
.brand-btn.primary { background: var(--emerald); color: white; border-color: var(--emerald); }
.brand-btn.primary:hover { background: var(--emerald-deep); }
.brand-btn.danger { color: #c0392b; }
.brand-btn.danger:hover { background: #fef2f2; border-color: #fecaca; }
.brand-method-tabs { display: inline-flex; gap: 4px; background: var(--moss-2); padding: 3px; border-radius: 10px; margin-bottom: 14px; }
.brand-method {
    padding: 6px 14px; border-radius: 7px; border: none; background: transparent;
    font-size: 13px; font-weight: 600; color: var(--gray-6); cursor: pointer; transition: all .12s;
}
.brand-method.active { background: white; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.brand-canvas {
    width: 100%; max-width: 380px; height: 150px;
    border: 1px solid var(--moss-3); border-radius: 10px;
    background: white; touch-action: none; cursor: crosshair; display: block; margin-bottom: 8px;
}
.brand-hint { font-size: 12px; color: var(--gray-5); line-height: 1.45; }
.brand-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--moss-2); font-size: 13.5px; color: var(--ink);
}
.brand-toggle-row:last-child { border-bottom: none; }
.brand-save-row { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Лок-оверлей */
.brand-lock {
    text-align: center; padding: 48px 28px;
    background: linear-gradient(180deg, var(--emerald-pale), white);
    border: 1px solid var(--moss-3); border-radius: 16px;
}
.brand-lock-ico {
    width: 60px; height: 60px; margin: 0 auto 18px;
    border-radius: 18px;
    background: white; border: 1px solid var(--moss-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--emerald); box-shadow: 0 6px 18px -6px rgba(5,150,105,0.3);
}
.brand-lock h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
.brand-lock p { font-size: 14px; color: var(--gray-6); line-height: 1.55; max-width: 440px; margin: 0 auto 22px; }
.brand-lock-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 999px;
    background: var(--emerald); color: white;
    font-weight: 600; font-size: 14px; text-decoration: none;
    box-shadow: 0 8px 22px -6px rgba(5,150,105,0.5); transition: all .15s;
}
.brand-lock-btn:hover { background: var(--emerald-deep); transform: translateY(-1px); }

/* ============ GOST LIVE PREVIEW ============ */
.gost-preview-card {
    margin-top: 22px;
    padding: 18px 20px 20px;
    background: linear-gradient(180deg, #f7fbf8, #ffffff);
    border: 1px solid var(--moss-3);
    border-radius: 14px;
}
.gost-preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}
.gost-preview-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.gost-preview-hint {
    font-size: 11px;
    color: var(--gray-5);
}
.gost-preview-stage {
    display: flex;
    justify-content: center;
    padding: 22px;
    background: #e9eee8;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.02) 25%, transparent 25%);
    background-size: 12px 12px;
    border-radius: 12px;
    min-height: 260px;
}
/* Бумажный лист (DOCX / PDF) */
.gp-paper {
    position: relative;
    background: white;
    box-shadow: 0 12px 30px -10px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.08);
    overflow: hidden;
    flex-shrink: 0;
}
.gp-paper-inner {
    position: absolute;
    overflow: hidden;
}
.gp-h1, .gp-h2, .gp-h3 {
    font-weight: 700;
    line-height: 1.2;
}
.gp-h1 { margin: 0 0 6px; }
.gp-h2 { margin: 8px 0 4px; }
.gp-h3 { margin: 6px 0 3px; font-weight: 600; }
.gp-p { margin: 0 0 4px; }
.gp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 7px;
}
.gp-table th, .gp-table td {
    padding: 2px 3px;
    border: 1px solid #cfd5d2;
}
.gp-table th { color: white; font-weight: 700; }
.gp-page-num {
    position: absolute;
    font-size: 7px;
    color: #888;
    font-family: Times, serif;
}
.gp-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.gp-watermark span {
    transform: rotate(-30deg);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 3px;
    opacity: 0.32;
    white-space: nowrap;
}
.gp-footer-text {
    position: absolute;
    left: 8px;
    bottom: 6px;
    font-size: 7px;
    color: #888;
}
/* XLSX лист */
.gp-sheet {
    background: white;
    border: 1px solid #d6d9d6;
    box-shadow: 0 12px 30px -10px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.08);
    overflow: hidden;
    max-width: 100%;
}
.gp-sheet table {
    width: 100%;
    border-collapse: collapse;
}
.gp-sheet th, .gp-sheet td {
    padding: 5px 8px;
    border: 1px solid #e5e7e5;
    white-space: nowrap;
}
.gp-sheet th { font-weight: 700; text-align: center; }
.gp-sheet td.zebra { background: #f5f7f5; }
.gp-sheet td.numeric { font-variant-numeric: tabular-nums; }
.gp-sheet td.neg { color: #c00; }
.gp-chart {
    padding: 10px 12px 12px;
    background: #fbfcfb;
    border-top: 1px solid #e5e7e5;
}
.gp-chart-title {
    font-size: 10px; font-weight: 700; color: #0b1410;
    margin-bottom: 6px;
}
.gp-chart-bars {
    display: flex; align-items: flex-end; gap: 4px;
    height: 60px;
}
.gp-chart-bar {
    flex: 1; border-radius: 2px 2px 0 0;
    transition: height .25s ease;
}
.gp-chart-legend {
    display: flex; gap: 8px; margin-top: 6px;
    font-size: 8px; color: #525252;
    flex-wrap: wrap;
}
.gp-chart-legend i {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 1px; margin-right: 3px; vertical-align: middle;
}

/* ============ STREAMING DOCUMENT PREVIEW ============ */
.dg-doc {
    padding: 26px 30px;
    background: #fbfcfb;
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--ink-2);
    word-break: break-word;
}
.dg-doc > *:first-child { margin-top: 0; }
.dg-doc > *:last-child { margin-bottom: 0; }
.dg-doc h1, .dg-doc h2, .dg-doc h3, .dg-doc h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.32;
}
.dg-doc h1 { font-size: 20px; margin: 20px 0 10px; }
.dg-doc h2 {
    font-size: 16.5px;
    margin: 22px 0 9px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--moss-3);
}
.dg-doc h3 { font-size: 14.5px; margin: 17px 0 7px; }
.dg-doc h4 { font-size: 13px; margin: 14px 0 5px; color: var(--gray-6); }
.dg-doc p { margin: 0 0 10px; }
.dg-doc strong { font-weight: 700; color: var(--ink); }
.dg-doc em { font-style: italic; }
.dg-doc code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--moss-2);
    color: var(--emerald-deep);
    padding: 1px 6px;
    border-radius: 5px;
}
.dg-doc ul, .dg-doc ol { margin: 0 0 11px; padding-left: 22px; }
.dg-doc li { margin-bottom: 4px; }
.dg-doc li::marker { color: var(--emerald); }
.dg-doc ol li::marker { font-weight: 600; }
.dg-doc hr {
    border: none;
    border-top: 1px solid var(--moss-3);
    margin: 16px 0;
}
.dg-doc .dg-table-wrap { overflow-x: auto; margin: 4px 0 13px; }
.dg-doc .dg-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
}
.dg-doc .dg-table th,
.dg-doc .dg-table td {
    border: 1px solid var(--moss-3);
    padding: 7px 11px;
    text-align: left;
    vertical-align: top;
}
.dg-doc .dg-table th {
    background: var(--moss-2);
    font-weight: 600;
    color: var(--ink);
}
.dg-doc .dg-table tr:nth-child(even) td { background: rgba(11,20,16,0.018); }

/* ============================================================
   ===========  Mobile shell (Фаза 2: кабинет)  ===============
   Базовое `.sidebar { display: flex }` (~стр. 49) перебивало
   `display:none` из @media (1024) выше по файлу — по порядку
   каскада выигрывало последнее. Этот блок — в конце файла,
   поэтому надёжно скрывает сайдбар на мобиле и выводит его
   как выезжающий drawer по кнопке-бургеру в шапке.
   ============================================================ */
.cab-burger {
    display: none;
    background: none; border: 0;
    padding: 8px; margin: -8px 8px -8px -4px;
    color: var(--ink); border-radius: 10px;
    transition: background .15s;
    cursor: pointer;
}
.cab-burger:hover { background: var(--moss-2); }
.cab-burger svg { display: block; width: 24px; height: 24px; }

.cab-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(11,20,16,0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 199;
}
.cab-backdrop.show { display: block; }

@media (max-width: 1024px) {
    .sidebar { display: none; }
    .topbar .cab-burger { display: inline-flex; align-items: center; justify-content: center; }
    .shell.nav-open .sidebar {
        display: flex;
        position: fixed; top: 0; left: 0; bottom: 0;
        width: min(86vw, 320px);
        z-index: 200;
        overflow-y: auto;
        box-shadow: 0 24px 60px -10px rgba(0,0,0,0.55);
        animation: cab-drawer-in .22s cubic-bezier(.22,.61,.36,1);
    }
}

@keyframes cab-drawer-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* ============================================================
   ===========  Подсветка правок ИИ-агента  ===================
   После применения патча параграфы превью получают классы
   agent-replaced / agent-added / agent-deleted. Раньше эти
   классы существовали только в JS — CSS их игнорировал. Теперь
   правки реально подсвечиваются цветом + лёгкая пульсация при
   первом появлении, чтобы взгляд автоматически зацепился.
   ============================================================ */
.agent-replaced,
.agent-added,
.agent-deleted {
    border-left: 3px solid;
    padding-left: 10px;
    margin-left: -13px;
    border-radius: 2px;
    transition: background-color .4s ease;
    /* отступ при scrollIntoView — чтобы топбар не закрывал подсветку */
    scroll-margin-top: 100px;
    scroll-margin-bottom: 80px;
    animation: agent-edit-pulse 2s ease-out 1;
}
.agent-replaced {
    background-color: rgba(245, 196, 95, 0.20);
    border-left-color: #f5c45f;
}
.agent-added {
    background-color: rgba(74, 222, 128, 0.20);
    border-left-color: #4ade80;
}
.agent-deleted {
    background-color: rgba(248, 113, 113, 0.15);
    border-left-color: #f87171;
    text-decoration: line-through;
    text-decoration-color: rgba(220, 38, 38, 0.5);
    opacity: 0.7;
}
/* Маркер УДАЛЕНИЯ — вставляется JS на место удалённого блока с фрагментом
   стёртого текста, чтобы пользователь видел ЧТО и ГДЕ удалено (сам блок-то
   уже исчез из документа, подсвечивать нечего). */
.agent-deletion-mark {
    display: block;
    margin: 10px 0;
    padding: 8px 14px;
    background-color: rgba(248, 113, 113, 0.10);
    border-left: 3px solid #f87171;
    border-radius: 4px;
    font-size: 13px;
    color: #b91c1c;
    font-style: italic;
    line-height: 1.45;
    scroll-margin-top: 100px;
    scroll-margin-bottom: 80px;
    animation: agent-edit-pulse 2s ease-out 1;
}
.agent-deletion-mark::before {
    content: '✕ ';
    font-style: normal;
    font-weight: 700;
    margin-right: 4px;
    opacity: 0.7;
}
@keyframes agent-edit-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 196, 95, 0.55); }
    25%  { box-shadow: 0 0 0 6px rgba(245, 196, 95, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(245, 196, 95, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .agent-replaced, .agent-added, .agent-deleted { animation: none; }
}

/* ============================================================
   ============  Уточняющий вопрос агента  ====================
   Когда команда «удали Иванов» неоднозначна (Иванов в 3 местах),
   агент стримит вопрос с кнопками-вариантами. Лимит за этот
   запрос НЕ списывается дополнительно — это часть одного диалога.
   ============================================================ */
.clarify-question {
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 10px;
    color: #1e293b;
}
.clarify-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.clarify-option {
    text-align: left;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    color: #166534;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
    white-space: normal;
    word-break: break-word;
}
.clarify-option:hover:not(:disabled) {
    background: #dcfce7;
    border-color: #4ade80;
}
.clarify-option:active:not(:disabled) {
    transform: translateY(1px);
}
.clarify-option:disabled {
    opacity: 0.55;
    cursor: default;
}
.clarify-option.chosen {
    background: #16a34a;
    border-color: #15803d;
    color: #fff;
    opacity: 1;
}
.clarify-option.chosen::before {
    content: '✓ ';
    font-weight: 700;
}

/* ============================================================
   ===========  Mobile polish per-tab (Фаза 2)  ===============
   ============================================================ */
@media (max-width: 640px) {
    /* «Создать»: статы 2x2 на 375px давали обрезку чисел и кривые переносы
       (5992 /6000, документов / в архиве). Стопкой — читается чисто. */
    .stats-row { grid-template-columns: 1fr; gap: 10px; }
    .stat-card { padding: 18px; }
    .stat-card.hero { padding: 22px; }
    .stat-card .num { font-size: 28px; }
    .stat-card .num .unit { font-size: 13px; }

    /* ГОСТ: 4 таба формата (Word/Excel/PDF/Брендинг) вылазили.
       Скрываем иконки и слегка ужимаем — все 4 текста влезают в одну строку. */
    .gost-card-head { padding: 12px; gap: 10px; }
    .gost-card-tabs { display: flex; max-width: 100%; }
    .gost-tab { padding: 7px 11px; font-size: 12.5px; gap: 0; }
    .gost-tab svg { display: none; }
    .gost-pane { padding: 18px; }

    /* ─── Топбар: уменьшаем размеры так, чтобы «Кабинет / Создать документ»
       умещалось в одну строку без переноса. На 320px тоже норм. */
    .topbar { padding: 12px 14px; gap: 10px; }
    .topbar .crumb {
        font-size: 9.5px; letter-spacing: 0.06em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 100%;
    }
    .topbar h1 { font-size: 17px; line-height: 1.18; }
    .topbar .icon-btn { width: 32px; height: 32px; }

    /* ─── Вкладка «Создать»: полиш формы. На мобилке заголовок и
       переключатель «С нуля / По шаблону» наезжали — переносим mini-tabs
       на свою строку и растягиваем по ширине. */
    .form-card, .create-form { padding: 16px; }
    .form-label, label.form-label { font-size: 13px; }
    textarea.form-input, .form-textarea {
        min-height: 140px; font-size: 14.5px; line-height: 1.5;
    }
    .btn-generate, .generate-btn, button[type="submit"].btn-emerald {
        width: 100%; padding: 14px 18px; font-size: 15px;
        border-radius: 12px;
    }

    /* card-head: на мобилке столбиком, mini-tabs снизу на всю ширину */
    .card-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .card-head-l { gap: 12px; }
    .mini-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 4px;
    }
    .mini-tabs .mini-tab {
        text-align: center;
        white-space: nowrap;
    }

    /* Кнопка «Сгенерировать»: на мобилке без слова «документ», без kbd-чипа */
    .gen-btn .gen-btn-doc { display: none; }
    .gen-btn .kbd { display: none; }

    /* ─── ИИ-агент: главный фикс. На десктопе превью+чат рядом, на ≤1100px
       стек стопкой (превью + чат по 70vh каждый). На мобилке (≤640px) это
       всё равно неудобно: пользователь должен скроллить вниз чтобы дойти
       до чата. Делаем табы «Документ ↔ Чат» — каждый занимает полную
       высоту, переключение одним тапом.
       JS добавляет класс .mobile-tabs-active на .agent-ws + атрибут
       data-active="chat|preview". Default — preview. */
    .agent-ws.mobile-tabs-active {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 0;
        height: auto !important;
        min-height: calc(100dvh - 180px);
    }
    .agent-ws.mobile-tabs-active .ag-mobile-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        background: var(--moss-2);
        padding: 4px;
        border-radius: 12px;
        margin-bottom: 10px;
        position: sticky; top: 0; z-index: 5;
    }
    .agent-ws.mobile-tabs-active .ag-mobile-tab {
        padding: 10px 12px;
        font-size: 13px; font-weight: 600;
        border-radius: 9px;
        background: transparent;
        color: var(--gray-6);
        border: 0;
        cursor: pointer;
        transition: background .15s, color .15s;
        font-family: inherit;
    }
    .agent-ws.mobile-tabs-active .ag-mobile-tab.active {
        background: white;
        color: var(--ink);
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .agent-ws.mobile-tabs-active[data-active="chat"] .agent-ws-viewer { display: none; }
    .agent-ws.mobile-tabs-active[data-active="preview"] .agent-ws-chat { display: none; }
    /* На мобилке split-разделитель не нужен */
    .agent-ws.mobile-tabs-active .agent-ws-split { display: none; }
    /* Активная панель — на всю высоту экрана минус топбар */
    .agent-ws.mobile-tabs-active .agent-ws-viewer,
    .agent-ws.mobile-tabs-active .agent-ws-chat {
        height: calc(100dvh - 200px) !important;
        min-height: 420px;
    }

    /* Превью документа на мобилке: text-reflow по ширине экрана,
       как Google Docs / Word на телефоне. transform: scale() обрезал
       страницу справа независимо от scroll, поэтому ОТКЛЮЧАЕМ его и
       форсируем width:100% на странице A4. Метафора «лист бумаги»
       теряется, но документ читаем и можно прокручивать без обрезов. */
    .agent-docx-host {
        padding: 8px !important;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .agent-docx-host .docx-wrapper {
        transform: none !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .agent-docx-host > .docx-wrapper > section.docx,
    .agent-docx-host section.docx {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 18px 14px !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    /* Внутренний текст — позволяем переносить длинные слова */
    .agent-docx-host p,
    .agent-docx-host li,
    .agent-docx-host h1,
    .agent-docx-host h2,
    .agent-docx-host h3,
    .agent-docx-host h4 {
        max-width: 100% !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    /* Длинные таблицы — горизонтальный скролл внутри ячейки */
    .agent-docx-host table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    /* Зум-контролы не имеют смысла в reflow-режиме — скрываем целиком */
    .agent-doc-toolbar .adt-zoom { display: none !important; }

    /* ─── Верхняя плашка ИИ-агента: на мобилке центрируем содержимое,
       чтобы текст не зажимался иконкой и не наезжал на счётчик. */
    .agent-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 20px 18px;
        gap: 14px;
        text-align: left;
    }
    .agent-banner-l {
        min-width: 0;
        align-items: flex-start;
        gap: 12px;
    }
    .agent-banner-ico { width: 42px; height: 42px; }
    .agent-banner h3 { font-size: 16.5px; line-height: 1.25; }
    .agent-banner p { font-size: 13px; }
    .agent-stats {
        margin: 0;
        justify-content: flex-start;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .agent-stats > div { text-align: left; }
    .agent-stats b { font-size: 22px; }
    .agent-stats span { font-size: 11px; }

    /* ─── Нижняя «не загружен» — той же ширины что верхняя плашка */
    .agent-empty {
        padding: 16px 0;
        min-height: 0;
    }
    .agent-empty h2 { font-size: 18px; }
    .agent-empty p { font-size: 13.5px; margin-bottom: 18px; }

    /* ─── Быстрые кнопки чата — в одну строку с горизонтальным скроллом.
       Жмём font и padding так, чтобы 3 кнопки умещались на 375px. */
    .agent-ws-quick {
        padding: 8px 10px; gap: 5px;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .agent-ws-quick::-webkit-scrollbar { display: none; }
    .agent-ws-quick button {
        font-size: 11px; padding: 5px 10px;
        flex-shrink: 0;
        white-space: nowrap;
        letter-spacing: -0.01em;
    }
    .agent-ws-input { padding: 10px; }
    .agent-ws-input textarea { font-size: 14.5px; padding: 11px 12px; }

    /* Тулбар над превью — компактнее */
    .agent-ws-toolbar { padding: 9px 12px; gap: 6px; flex-wrap: wrap; }
    .agent-file-pill { font-size: 11px; padding: 4px 8px; }
    .agent-file-meta { font-size: 10.5px; }
    .agent-tb-btn { padding: 4px 9px; font-size: 11px; }
    .agent-doc-toolbar { padding: 6px 10px; }
    .adt-zoom { gap: 2px; }
    .adt-btn { padding: 4px 7px; font-size: 11px; }
    .adt-btn-wide { padding: 4px 8px; }
    .adt-zoom-val { font-size: 11px; min-width: 36px; }
}

/* На очень узких экранах (≤380px) — ещё ужать crumb */
@media (max-width: 380px) {
    .topbar .crumb { font-size: 9px; gap: 4px; }
    .topbar h1 { font-size: 16px; }
    .topbar { padding: 10px 12px; }
}

/* ============================================================
   Планшетный/гибридный режим (640–1024px): сайдбар уже скрыт
   (бургер), но макет ещё не «телефонный». Тут расширяем
   карточку «не загружен» на всю ширину контейнера + полируем. */
@media (max-width: 1024px) {
    .agent-empty {
        padding: 24px 0;
        align-items: flex-start;
        justify-content: stretch;
    }
    .agent-empty-card {
        max-width: 100%;
        width: 100%;
        padding: 40px 28px;
        text-align: center;
    }
    .agent-empty-ico {
        width: 60px; height: 60px;
        margin: 0 auto 18px;
        border-radius: 16px;
    }
    .agent-empty h2 {
        font-size: 19px;
        margin-bottom: 10px;
    }
    .agent-empty p {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 22px;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Кнопка «Загрузить документ» — сделать заметнее и удобнее для тача */
    #agentUploadBtn {
        padding: 13px 22px !important;
        font-size: 14.5px !important;
        border-radius: 12px !important;
        gap: 10px !important;
        box-shadow:
            0 8px 20px -8px rgba(5,150,105,0.55),
            inset 0 1px 0 rgba(255,255,255,0.18) !important;
    }
    .agent-empty-hint {
        font-size: 12.5px;
        margin-top: 16px;
        color: var(--gray-4);
    }
}

/* На мобильных drawer'е в сайдбаре кабинета зелёный блок с тарифом
   и шкалами лимитов занимает много места, а вся та же информация
   доступна в карточке Stats и на вкладке «Подписка». Скрываем его,
   чтобы пунктам меню хватало места. На десктопе блок остаётся.
   Поскольку именно у .sb-plan на десктопе стоит margin-top:auto
   (выталкивающий блок пользователя к низу), на мобильных тот же
   эффект переносим на .sb-user — иначе он прилипает сразу под
   «Помощь», и драуэр выглядит обрезанным. */
@media (max-width: 1024px) {
    /* На мобильных drawer'ах: тарифный блок занимает ~140px и просто
       дублирует Stats-карточку. Скрываем, чтобы пунктам меню хватило
       места на коротких экранах (Safari/Chrome с панелями съедают
       30–35% высоты). */
    .sidebar .sb-plan { display: none !important; }
    /* Само содержимое сайдбара ужимаем — это серьёзно помогает на
       экранах ~500-600 px (iPhone SE 1-го поколения с открытым URL-
       баром и небольшие Android'ы). */
    .sidebar { padding: 18px 14px; }
    .sidebar .sb-logo { margin-bottom: 16px; }
    .sidebar .sb-label { margin-top: 14px; margin-bottom: 6px; }
    .sidebar .sb-item { padding-top: 8px; padding-bottom: 8px; }
    /* Блок пользователя — прижимается к низу с воздухом, но margin
       не настолько большой, чтобы выталкивать меню за viewport. */
    .sidebar .sb-user { margin-top: auto; margin-bottom: 18px; }
}

/* Дополнительная защита: на ОЧЕНЬ коротких экранах включаем скролл
   внутри сайдбара — если пунктов меню в будущем добавится, чтобы
   пользователь хотя бы мог достать их пальцем. */
@media (max-width: 1024px) and (max-height: 540px) {
    .sidebar { overflow-y: auto; }
    .sidebar .sb-user { margin-bottom: 8px; }
}