/* ============================================================
   СТРАНИЦА ФАЙЛА
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:'Inter',-apple-system,sans-serif; background:#f8fafc; color:#0f172a; overflow:hidden; display:flex; flex-direction:column; }

.header { display:flex; justify-content:space-between; align-items:center; padding:18px 32px 14px 32px; border-bottom:2px solid #e2e8f0; background:#ffffff; flex-shrink:0; flex-wrap:wrap; gap:12px; }
.logo { font-size:26px; font-weight:800; display:flex; align-items:center; gap:8px; cursor:pointer; }
.logo span { color:var(--primary); background:#eef2ff; padding:2px 12px; border-radius:40px; font-size:16px; }
.header-categories { display:flex; flex-wrap:wrap; gap:8px 16px; }
.header-categories a { color:#475569; text-decoration:none; font-weight:600; font-size:14px; padding:6px 14px; border-radius:40px; transition:background 0.15s, color 0.15s; background:transparent; }
.header-categories a:hover { background:#f1f4f9; color:#0f172a; }
.header-categories a.active { background:var(--primary); color:#ffffff; }

.app { display:flex; flex:1; overflow:hidden; }
.sidebar { width:320px; background:#ffffff; border-right:2px solid #e2e8f0; padding:28px 20px; overflow-y:auto; flex-shrink:0; height:100%; }
.sidebar-title { font-size:18px; font-weight:700; margin-bottom:18px; color:#0f172a; display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:2px solid #eef2ff; }
.sidebar .back-link { display:inline-block; font-size:13px; color:var(--primary); text-decoration:none; font-weight:600; margin-bottom:12px; cursor:pointer; background:#eef2ff; padding:6px 14px; border-radius:40px; transition:background 0.15s; }
.sidebar .back-link:hover { background:#dbe2ed; }
.sidebar ul { list-style:none; padding:0; margin:0; }
.sidebar li { padding:12px 16px; border-radius:12px; cursor:pointer; transition:background 0.15s, color 0.15s; font-size:15px; font-weight:600; color:#1e293b; margin-bottom:4px; background:transparent; border:1px solid transparent; }
.sidebar li:hover { background:#f1f4f9; border-color:#e2e8f0; }
.sidebar li.active { background:var(--primary); color:#ffffff; border-color:var(--primary); }
.sidebar .file-item { font-weight:500; font-size:14px; padding-left:20px; color:#475569; cursor:pointer; border:1px solid transparent; }
.sidebar .file-item:hover { background:#f8fafc; color:#0f172a; border-color:#e2e8f0; }
.sidebar .file-item.active { background:#eef2ff; color:var(--primary); border-color:var(--primary); font-weight:600; }

.main-content { flex:1; padding:40px 48px 40px 40px; overflow-y:auto; background:#f8fafc; }
.file-detail { max-width:900px; margin:0 auto; }
.file-title { font-size:36px; font-weight:800; letter-spacing:-0.02em; line-height:1.2; margin-bottom:8px; }
.file-sub { font-size:18px; color:#475569; margin-bottom:24px; }
.file-description { font-size:16px; line-height:1.7; color:#1e293b; margin-bottom:32px; }
.file-description strong { color:#0f172a; }
.download-section { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; padding-top:24px; border-top:2px solid #eef2ff; }
.download-btn { display:inline-flex; align-items:center; gap:12px; background:var(--primary); color:white; font-weight:700; font-size:18px; padding:16px 36px; border-radius:60px; text-decoration:none; transition:background 0.15s, transform 0.1s; }
.download-btn:hover { background:#2563eb; transform:scale(1.02); }
.download-btn svg { width:22px; height:22px; fill:currentColor; }
.download-note { font-size:14px; color:#64748b; }
.download-note a { color:var(--primary); text-decoration:none; font-weight:500; }
.main-content .tip-box { background:#fefce8; border-left:4px solid #eab308; padding:20px 24px; border-radius:16px; font-size:16px; color:#1e293b; font-weight:500; margin-top:32px; }
.main-content .tip-box strong { color:#0f172a; }

.footer { border-top:2px solid #e2e8f0; padding:16px 32px; background:#ffffff; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#94a3b8; flex-shrink:0; flex-wrap:wrap; gap:12px; }
.footer .socials { display:flex; gap:18px; align-items:center; }
.footer .socials a { color:#1e293b; text-decoration:none; transition:color 0.2s, transform 0.2s; display:flex; align-items:center; justify-content:center; }
.footer .socials a:hover { color:var(--primary); transform:scale(1.1); }
.footer .socials svg { width:20px; height:20px; fill:currentColor; }

@media (max-width:1024px) { .sidebar { width:280px; padding:20px 16px; } .main-content { padding:32px 28px; } .file-title { font-size:30px; } }
@media (max-width:768px) { .header { flex-direction:column; align-items:stretch; padding:16px; } .header-categories { gap:6px 12px; justify-content:center; } .app { flex-direction:column; overflow:visible; height:auto; } .sidebar { width:100%; border-right:none; border-bottom:2px solid #e2e8f0; height:auto; max-height:300px; overflow-y:auto; } .main-content { padding:24px 20px; overflow:visible; } .file-title { font-size:28px; } .footer { flex-direction:column; align-items:flex-start; padding:16px; } }
@media (max-width:480px) { .file-title { font-size:24px; } .download-section { flex-direction:column; align-items:flex-start; } .download-btn { width:100%; justify-content:center; } }

.fade-in { animation:fadeIn 0.25s ease forwards; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ===== МОБИЛЬНОЕ МЕНЮ (ФАЙЛ) ===== */
.hamburger { display: none; }
.mobile-menu { display: none; }
.mobile-overlay { display: none; }
.mobile-header { display: none; }

.menu-back {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1e3a8a;
    border-bottom: 1px solid #eef2ff;
    margin-bottom: 12px;
    cursor: pointer;
}
.menu-back:active { background: #f1f4f9; }
.menu-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px 12px;
    border-bottom: 1px solid #f1f4f9;
    margin-bottom: 8px;
}
.mobile-menu a.active {
    background: #eef2ff;
    color: var(--primary);
    font-weight: 700;
}

@media (max-width: 768px) {
    body { padding: 0; }
    
    .header {
        display: none !important;
    }
    
    .mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        border-bottom: 1px solid #e9edf2;
        background: white;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 9990;
    }
    
    .hamburger {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        padding: 6px 2px;
        background: transparent;
        border: none;
        flex-shrink: 0;
        z-index: 10001;
        order: 1;
    }
    .hamburger span {
        display: block;
        width: 24px;
        height: 3px;
        background: #0f172a;
        border-radius: 3px;
        transition: all 0.3s ease;
    }
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 5px);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -5px);
    }
    
    .mobile-logo {
        font-size: 18px;
        font-weight: 800;
        color: #0f172a;
        text-decoration: none;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        order: 2;
        text-align: right;
    }
    .mobile-logo span {
        color: var(--primary);
        background: #eef2ff;
        padding: 2px 8px;
        border-radius: 40px;
        font-size: 11px;
        font-weight: 700;
    }
    
    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 9999;
    }
    .mobile-overlay.active { display: block; }
    
    .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100%;
        background: white;
        padding: 60px 0 30px;
        box-shadow: 4px 0 20px rgba(0,0,0,0.1);
        z-index: 10000;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }
    .mobile-menu.active {
        left: 0;
        display: block;
    }
    .mobile-menu .close-btn {
        position: absolute;
        top: 12px;
        right: 16px;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
        color: #0f172a;
        padding: 4px 8px;
    }
    .mobile-menu a {
        display: block;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
        transition: background 0.15s;
        border-bottom: 1px solid #f8fafc;
    }
    .mobile-menu a:active { background: #f1f4f9; }
    
    .sidebar { display: none !important; }
    
    .app { flex-direction: column; height: auto; overflow: visible; }
    .main-content {
        padding: 20px 16px 30px !important;
        flex: 1;
        overflow: visible;
        height: auto;
    }
    
    .file-detail {
        max-width: 100% !important;
        padding: 0 !important;
    }
    .file-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    .file-sub {
        font-size: 16px !important;
        margin-bottom: 16px !important;
    }
    .file-description {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
    }
    .download-section {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding-top: 20px !important;
    }
    .download-btn {
        width: 100% !important;
        justify-content: center !important;
        font-size: 16px !important;
        padding: 14px 24px !important;
    }
    .download-note {
        font-size: 13px !important;
        text-align: center !important;
    }
    .tip-box {
        font-size: 14px !important;
        padding: 16px 18px !important;
        margin-top: 24px !important;
    }
    
    .footer {
        margin-top: 32px !important;
        padding: 16px 16px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        font-size: 12px !important;
    }
    .footer .socials { gap: 16px; }
    .footer .socials svg { width: 20px; height: 20px; }
    .footer .socials .label { font-size: 12px; }
}

@media (max-width: 400px) {
    .main-content { padding: 16px 12px 24px !important; }
    .file-title { font-size: 20px !important; }
    .file-description { font-size: 14px !important; }
    .mobile-menu { width: 260px; }
    .mobile-logo { font-size: 16px; }
    .mobile-logo span { font-size: 10px; padding: 1px 6px; }
    .hamburger span { width: 22px; height: 2.5px; }
    .download-btn { font-size: 14px !important; padding: 12px 20px !important; }
}