/* ========================================
   Versta Theme v1.0 — BerezSoft CMS
   ======================================== */

:root {
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    --max-width: 1200px;
    --max-width-article: 720px;
    --radius: 8px;
    --radius-sm: 6px;
    --radius-full: 999px;
    --transition: 0.2s ease;
}

/* === LIGHT THEME === */
.theme-light {
    --color-bg: #f9f8f6;
    --color-surface: #ffffff;
    --color-text: #1e1e1e;
    --color-text-muted: #6b6b6b;
    --color-text-light: #999999;
    --color-accent: #4a6fa1;
    --color-accent-hover: #c77d4b;
    --color-border: #e8e5df;
    --color-header-bg: rgba(249,248,246,0.92);
    --color-progress: #4a6fa1;
    --color-quote-bg: rgba(74,111,161,0.06);
    --color-quote-border: #4a6fa1;
    --color-code-bg: #f0ede7;
    --color-table-border: #e8e5df;
    --color-table-header: #f5f3ef;
    --color-tag-bg: #f0ede7;
    --color-tag-text: #5a5a5a;
    --color-overlay: rgba(0,0,0,0.5);
    --color-card-shadow: rgba(0,0,0,0.06);
}

/* === DARK THEME === */
.theme-dark {
    --color-bg: #1b1b23;
    --color-surface: #25252f;
    --color-text: #e0dcd0;
    --color-text-muted: #8a8678;
    --color-text-light: #6b6860;
    --color-accent: #7b9cc2;
    --color-accent-hover: #d4956b;
    --color-border: #33333d;
    --color-header-bg: rgba(27,27,35,0.92);
    --color-progress: #7b9cc2;
    --color-quote-bg: rgba(123,156,194,0.08);
    --color-quote-border: #7b9cc2;
    --color-code-bg: #2e2e38;
    --color-table-border: #33333d;
    --color-table-header: #2a2a34;
    --color-tag-bg: #2e2e38;
    --color-tag-text: #999590;
    --color-overlay: rgba(0,0,0,0.7);
    --color-card-shadow: rgba(0,0,0,0.2);
}

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

body{
    font-family:var(--font-main);
    background:var(--color-bg);
    color:var(--color-text);
    line-height:1.6;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    -webkit-font-smoothing:antialiased;
    transition:background 0.3s ease,color 0.3s ease
}
a{color:inherit}img{max-width:100%;display:block}

/* === ICONS === */
.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0}
.icon-sm{width:14px;height:14px}

/* === PROGRESS BAR === */
.reading-progress{position:fixed;top:0;left:0;height:3px;background:var(--color-progress);z-index:1001;transition:width 0.1s linear}

/* === HEADER === */
.header{position:sticky;top:0;z-index:100;background:var(--color-header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);transition:background 0.3s ease,border-color 0.3s ease}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
.header-logo{font-size:1.35rem;font-weight:600;letter-spacing:-0.3px;color:var(--color-text);flex-shrink:0;text-decoration:none}
.header-logo span{color:var(--color-accent);transition:color 0.3s ease}
.header-logo-img{height:28px;width:auto;margin-right:8px}
.header-nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.header-nav a{padding:8px 16px;border-radius:var(--radius-sm);font-size:0.9rem;color:var(--color-text-muted);text-decoration:none;transition:color var(--transition),background var(--transition)}
.header-nav a:hover,.header-nav a.active{color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,transparent)}
.header-actions{display:flex;gap:8px;align-items:center;margin-left:16px}
.theme-toggle{background:none;border:1px solid var(--color-border);color:var(--color-text-muted);cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all var(--transition)}
.theme-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}
.header-burger{display:none;background:none;border:none;color:var(--color-text);cursor:pointer;font-size:1.5rem;padding:4px 8px}
.header-user-icon{padding:4px;color:var(--color-text-muted);text-decoration:none;transition:color var(--transition)}
.header-user-icon:hover{color:var(--color-accent)}
.header-login-link{font-size:0.85rem;color:var(--color-text-muted);text-decoration:none}

/* === MAIN === */
.main{flex:1;width:100%;margin:0 auto;padding:48px 24px 80px}
.main-wide{max-width:var(--max-width)}
.main-narrow{max-width:var(--max-width-article)}

/* === POSTS GRID === */
.posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px}
.post-card{background:var(--color-surface);border-radius:var(--radius);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),background 0.3s ease;border:1px solid var(--color-border)}
.post-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px var(--color-card-shadow)}
.post-card-image{aspect-ratio:16/10;overflow:hidden;background:var(--color-border)}
.post-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.post-card:hover .post-card-image img{transform:scale(1.03)}
.post-card-body{padding:20px 24px 24px}
.post-card-meta{display:flex;gap:12px;font-size:0.8rem;color:var(--color-text-muted);margin-bottom:8px}
.post-card-category{color:var(--color-accent);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;font-size:0.75rem;text-decoration:none}
.post-card-category:hover{color:var(--color-accent-hover)}
.post-card-title{font-size:1.2rem;font-weight:600;line-height:1.3;margin-bottom:8px;color:var(--color-text)}
.post-card-excerpt{font-size:0.9rem;color:var(--color-text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.tag{font-size:0.78rem;padding:3px 10px;border-radius:var(--radius-full);background:var(--color-tag-bg);color:var(--color-tag-text);text-decoration:none;transition:background var(--transition),color var(--transition)}
.tag:hover{background:var(--color-accent);color:#fff}

/* === PAGINATION === */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:56px;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:var(--radius-sm);font-size:0.9rem;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);text-decoration:none;transition:all var(--transition)}
.pagination a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.pagination .current{background:var(--color-accent);color:#fff;border-color:var(--color-accent);font-weight:500}

/* === ARTICLE === */
.article-header{margin-bottom:32px}
.article-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:0.88rem}
.article-category{color:var(--color-accent);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;font-size:0.78rem;text-decoration:none}
.article-category:hover{color:var(--color-accent-hover)}
.article-date,.article-reading-time{color:var(--color-text-muted)}
.article-meta-sep{color:var(--color-border)}
.article-title{font-size:2.5rem;font-weight:700;line-height:1.15;letter-spacing:-0.5px;margin-bottom:32px}
.article-cover{width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;margin-bottom:40px;background:var(--color-border)}
.article-cover img{width:100%;height:100%;object-fit:cover}
.article-content{font-size:1.1rem;line-height:1.75}
.article-content p{margin-bottom:1.5em}
.article-content h2{font-size:1.6rem;font-weight:600;margin:2.5em 0 0.8em;letter-spacing:-0.3px}
.article-content h3{font-size:1.25rem;font-weight:600;margin:2em 0 0.6em}
.article-content ul,.article-content ol{margin:1em 0 1.5em 1.5em}
.article-content li{margin-bottom:0.5em}
.article-content li::marker{color:var(--color-accent)}
.article-content blockquote{margin:2em 0;padding:20px 28px;background:var(--color-quote-bg);border-left:3px solid var(--color-quote-border);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--color-text-muted);font-size:1.05rem}
.article-content code{background:var(--color-code-bg);padding:2px 6px;border-radius:4px;font-size:0.9em;font-family:var(--font-mono)}
.article-content pre{background:var(--color-code-bg);padding:20px 24px;border-radius:var(--radius);overflow-x:auto;margin:1.5em 0;font-size:0.9rem;line-height:1.6}
.article-content pre code{background:none;padding:0}
.article-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:0.95rem}
.article-content th,.article-content td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--color-table-border)}
.article-content th{background:var(--color-table-header);font-weight:600;font-size:0.85rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px}
.article-content a{color:var(--color-accent);text-decoration:none;border-bottom:1px dotted var(--color-accent);transition:color var(--transition),border-color var(--transition)}
.article-content a:hover{color:var(--color-accent-hover);border-bottom-style:solid}
.article-content img{max-width:100%;border-radius:var(--radius-sm);margin:1.5em 0}
.article-tags{margin-top:48px;padding-top:28px;border-top:1px solid var(--color-border);display:flex;gap:8px;flex-wrap:wrap}
.article-back{display:inline-flex;align-items:center;gap:6px;margin-top:40px;font-size:0.9rem;color:var(--color-text-muted);text-decoration:none;transition:color var(--transition)}
.article-back:hover{color:var(--color-accent)}

/* === PAGE === */
.page-content{font-size:1.05rem;line-height:1.75}
.page-content h1{font-size:2rem;font-weight:700;margin-bottom:24px}
.page-content h2{font-size:1.5rem;font-weight:600;margin:2em 0 0.8em}
.page-content p{margin-bottom:1.2em}
.page-content img{max-width:100%;border-radius:var(--radius);margin:1.5em 0}
.page-content a{color:var(--color-accent);text-decoration:none;border-bottom:1px dotted var(--color-accent)}
.page-content a:hover{color:var(--color-accent-hover)}

/* === GALLERY === */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}
.gallery-grid a{aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);display:block}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}
.gallery-grid a:hover img{transform:scale(1.03)}
.gallery-shortcode{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2em 0}
.gallery-shortcode a{aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);display:block}
.gallery-shortcode img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}
.gallery-shortcode a:hover img{transform:scale(1.03)}
.gallery-caption{text-align:center;font-size:0.85rem;color:var(--color-text-light);margin-top:-1em;margin-bottom:2em}
.album-card{background:var(--color-surface);border-radius:var(--radius);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),background 0.3s ease;border:1px solid var(--color-border);text-decoration:none;color:inherit;display:block}
.album-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px var(--color-card-shadow)}
.album-cover{aspect-ratio:4/3;overflow:hidden;background:var(--color-border)}
.album-cover img{width:100%;height:100%;object-fit:cover}
.album-body{padding:16px 20px 20px}
.album-title{font-size:1.1rem;font-weight:600;margin-bottom:4px}
.album-meta{font-size:0.85rem;color:var(--color-text-muted)}
.albums-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* === AUTH === */
.auth-wrapper{display:flex;justify-content:center;align-items:center;min-height:60vh}
.auth-card{background:var(--color-surface);border-radius:12px;padding:40px 32px;box-shadow:0 4px 24px var(--color-card-shadow);width:100%;max-width:420px;border:1px solid var(--color-border)}
.auth-title{font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:4px}
.auth-subtitle{text-align:center;color:var(--color-text-muted);font-size:0.9rem;margin-bottom:24px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-btn{width:100%;justify-content:center;padding:12px;font-size:1rem;margin-top:8px}
.auth-link{text-align:center;margin-top:16px;font-size:0.9rem;color:var(--color-text-muted)}
.auth-link a{color:var(--color-accent);text-decoration:none}
.auth-link a:hover{color:var(--color-accent-hover)}

/* === FORMS === */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:0.88rem;font-weight:500;color:var(--color-text)}
.form-input,.form-select,.form-textarea{padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-family:var(--font-main);font-size:0.95rem;transition:border-color var(--transition)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-accent)}
.form-textarea{resize:vertical;min-height:80px}
.form-hint{font-size:0.8rem;color:var(--color-text-light)}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font-size:0.9rem;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all var(--transition);font-family:var(--font-main)}
.btn-primary{background:var(--color-accent);color:#fff}
.btn-primary:hover{background:var(--color-accent-hover)}
.btn-outline{border-color:var(--color-border);color:var(--color-text);background:transparent}
.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn-sm{padding:6px 14px;font-size:0.82rem}

/* === ALERTS === */
.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:0.9rem;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.alert-error{background:rgba(200,60,60,0.08);color:#c83c3c;border:1px solid rgba(200,60,60,0.2)}
.alert-success{background:rgba(60,180,100,0.08);color:#3cb464;border:1px solid rgba(60,180,100,0.2)}

/* === PROFILE === */
.profile-wrapper{max-width:600px;margin:0 auto}
.profile-title{font-size:1.5rem;font-weight:600;margin-bottom:24px}
.profile-card{background:var(--color-surface);border-radius:12px;padding:32px;box-shadow:0 2px 12px var(--color-card-shadow);text-align:center;border:1px solid var(--color-border)}
.profile-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.profile-avatar a {
    display: block;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
}
.profile-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    transition: opacity var(--transition);
}
.profile-avatar a:hover img {
    opacity: 0.85;
}
.profile-avatar img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.profile-avatar-placeholder{width:96px;height:96px;border-radius:50%;background:var(--color-border);display:flex;align-items:center;justify-content:center;margin:0 auto;color:var(--color-text-muted)}
.profile-login{font-size:1.2rem;font-weight:600;margin-bottom:4px}
.profile-bio{color:var(--color-text-muted);font-size:0.9rem;margin-bottom:20px}
.profile-details{width:100%;text-align:left;margin-top:20px}
.profile-details td{padding:8px 0;border-bottom:1px solid var(--color-border);font-size:0.9rem}
.profile-details td:first-child{color:var(--color-text-muted);width:40%}
.profile-actions{margin-top:24px;text-align:center;display:flex;gap:10px;justify-content:center}
.badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-full);font-size:0.78rem;font-weight:500}
.badge-ok{background:rgba(60,180,100,0.12);color:#3cb464}

/* === 404 === */
.notfound-wrapper{text-align:center;padding:80px 24px}
.notfound-code{font-size:6rem;font-weight:700;color:var(--color-accent);line-height:1;margin-bottom:16px}
.notfound-text{color:var(--color-text-muted);font-size:1.1rem;margin-bottom:32px}

/* === LIGHTBOX === */
.lightbox-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.92);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s}
.lightbox-overlay.active{opacity:1;visibility:visible}
.lightbox-overlay img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:4px}
.lightbox-close{position:absolute;top:20px;right:24px;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;z-index:10;line-height:1;padding:8px}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.12);border:none;color:#fff;font-size:28px;cursor:pointer;padding:12px 16px;border-radius:6px;z-index:10;transition:background 0.2s}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,0.25)}
.lightbox-prev{left:16px}.lightbox-next{right:16px}
.lightbox-caption{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#ccc;font-size:14px;text-align:center}

/* === UTILITIES === */
.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px}
.section-title{font-size:1.5rem;font-weight:600;letter-spacing:-0.3px}
.section-link{font-size:0.9rem;color:var(--color-accent);text-decoration:none}
.section-link:hover{color:var(--color-accent-hover)}
.text-center{text-align:center}
.mt-12{margin-top:12px}.mt-24{margin-top:24px}.mt-48{margin-top:48px}
.mb-24{margin-bottom:24px}

/* === FOOTER === */
.footer{text-align:center;padding:32px 24px;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:0.85rem;transition:border-color 0.3s ease}
.footer a{color:var(--color-accent);text-decoration:none;transition:color var(--transition)}
.footer a:hover{color:var(--color-accent-hover)}

/* === HEADER AVATAR === */
.header-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text-muted);
    transition: opacity var(--transition);
    flex-shrink: 0;
}
.header-avatar:hover {
    opacity: 0.8;
}
.header-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === RESPONSIVE === */
@media(max-width:1024px){.gallery-grid{grid-template-columns:repeat(3,1fr)}.albums-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
    .posts-grid{grid-template-columns:1fr;gap:24px}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-shortcode{grid-template-columns:repeat(2,1fr)}
    .albums-grid{grid-template-columns:1fr}
    .header-inner{padding:0 16px;height:56px;gap:16px}
    .header-logo{font-size:1.2rem}
    .header-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-header-bg);backdrop-filter:blur(12px);flex-direction:column;padding:12px 16px;border-bottom:1px solid var(--color-border);gap:4px}
    .header-nav.open{display:flex}
    .header-nav a{padding:12px 16px;font-size:1rem}
    .header-burger{display:block;margin-left:auto}
    .header-actions{margin-left:0}
    .main{padding:32px 16px 64px}
    .article-title{font-size:1.75rem}
    .article-content{font-size:1rem}
    .article-content h2{font-size:1.35rem}
    .auth-card{padding:28px 20px}
}
@media(max-width:480px){
    .post-card-body{padding:16px}
    .post-card-title{font-size:1.05rem}
    .article-title{font-size:1.5rem}
    .gallery-grid{grid-template-columns:repeat(2,1fr);gap:6px}
    .notfound-code{font-size:4rem}
}

/* === HEADER ACTION LINKS (Написать, Админка) === */
.header-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-accent);
    text-decoration: none;
    border: 1px solid var(--color-accent);
    transition: all var(--transition);
    margin-left: 8px;
}
.header-action-link:hover {
    background: var(--color-accent);
    color: #fff;
}
.header-action-link .icon {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .header-action-text {
        display: inline;
    }
    .header-action-link {
        margin-left: 0;
        justify-content: flex-start;
    }
}