@import url('/css/design-tokens.css');

html, body { background: var(--page-bg) !important; color: var(--text) !important; font-family: var(--font-body) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading) !important; }
button, select { font-family: var(--font-button) !important; }
.blog-page .blog-hero {
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: clamp(56px, 8vw, 96px) 24px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary), var(--secondary));
    color: var(--white) !important;
    text-align: left;
}
.blog-page .blog-hero h1 {
    max-width: 900px;
    margin: 0 0 16px;
    color: var(--white) !important;
    font-size: clamp(2.2rem, 4.2vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}
.blog-page .blog-hero p {
    max-width: 700px;
    margin: 0;
    color: color-mix(in srgb, var(--white) 88%, transparent) !important;
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.7;
}
.blog-page .page-progress-container { top: 70px; }
.blog-page .page-progress-percentage { top: 80px; }
.blog-page .scroll-to-top { z-index: var(--z-fixed); }
@media (max-width: 768px) {
    .blog-page .blog-hero { padding: 48px 20px; }
    .blog-page .page-progress-container { top: 60px; }
    .blog-page .page-progress-percentage { top: 68px; }
    .blog-page .scroll-to-top { right: 20px; bottom: 20px; width: 50px; height: 50px; }
}
.blog-page :focus-visible { outline-color: var(--orange-light); }
.blog-admin-page {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 42%),
        var(--page-bg) !important;
    color: var(--text) !important;
}
.blog-admin-page .admin-toolbar {
    position: fixed;
    z-index: var(--z-fixed);
    top: 18px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.blog-admin-page .blog-controls { gap: 10px; }
.blog-admin-page .blog-controls .theme-btn,
.blog-admin-page .blog-controls .language-btn {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.blog-admin-page .blog-controls .theme-btn:hover,
.blog-admin-page .blog-controls .language-btn:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}
.blog-admin-page .blog-controls svg,
.blog-admin-page .blog-controls .theme-option svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.blog-admin-page .blog-controls .language-dropdown,
.blog-admin-page .blog-controls .theme-dropdown {
    top: calc(100% + 8px);
    min-width: 170px;
    padding: 6px;
    border-radius: var(--border-radius);
}
.blog-admin-page .blog-controls .language-option,
.blog-admin-page .blog-controls .theme-option {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--border-radius-sm);
}
.blog-admin-page .blog-controls .language-option.active,
.blog-admin-page .blog-controls .theme-option.active {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
}
.blog-admin-page .box {
    width: min(460px, calc(100% - 32px));
    padding: clamp(24px, 6vw, 42px);
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-lg);
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-xl);
    backdrop-filter: none;
}
.blog-admin-page .box .brand {
    margin-bottom: 32px;
    color: var(--dark) !important;
}
.blog-admin-page .box h1 { color: var(--dark) !important; }
.blog-admin-page .box .sub,
.blog-admin-page .box label { color: var(--text-muted) !important; }
.blog-admin-page .box input,
.blog-admin-page .main .field input,
.blog-admin-page .main .field textarea,
.blog-admin-page .main .field select {
    min-height: 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--control-bg);
    color: var(--control-text);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.blog-admin-page .main .field textarea { min-height: 130px; }
.blog-admin-page .box input:focus,
.blog-admin-page .main .field input:focus,
.blog-admin-page .main .field textarea:focus,
.blog-admin-page .main .field select:focus {
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.blog-admin-page .box button,
.blog-admin-page .btn {
    min-height: 42px;
    border-radius: var(--border-radius-sm);
    background: var(--primary);
    color: var(--white);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.blog-admin-page .box button:hover,
.blog-admin-page .btn:hover {
    background: var(--primary-dark);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.blog-admin-page .sidebar {
    position: sticky;
    top: 0;
    min-height: 100vh;
    border-right: 1px solid var(--border-color);
    background: var(--surface) !important;
}
.blog-admin-page .main {
    min-width: 0;
    padding: clamp(24px, 4vw, 48px);
}
.blog-admin-page .top {
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.blog-admin-page .top h1,
.blog-admin-page .main h1 { color: var(--dark) !important; }
.blog-admin-page .stats { flex-wrap: wrap; }
.blog-admin-page .stat {
    flex: 1 1 150px;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}
.blog-admin-page .table-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}
.blog-admin-page table { min-width: 680px; }
.blog-admin-page th { background: var(--surface-raised); }
.blog-admin-page .nav { min-height: 42px; }
.blog-admin-page .main .field label { color: var(--text-muted); }
.blog-admin-page .main .field small { display: block; margin-top: 8px; color: var(--text-muted); line-height: 1.6; }
.blog-admin-page .main .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-admin-page .main .upload { border-color: var(--border-color); background: var(--surface-raised) !important; }
.blog-admin-page .main .check { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: var(--border-color); }
.blog-admin-page .actions { flex-wrap: wrap; }
.blog-admin-page .actions button[data-republish] { color: var(--primary); border-color: var(--primary-light); }
.blog-admin-page .actions button[data-republish]:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.blog-admin-page :focus-visible { outline: 3px solid var(--orange-light); outline-offset: 3px; }
header, .sidebar, .box, .stat, .table-wrap, .field input, .field textarea, .field select,
.card, .recent, .upload, .check { background-color: var(--surface) !important; color: var(--text) !important; border-color: var(--border-color) !important; }
.brand, h1, h2, h3, .main h1, .body h2, .content h2, .content h3, .side h2 { color: var(--dark) !important; }
small, .sub, .meta, .label, .excerpt { color: var(--text-muted) !important; }
input, textarea, select, button { color-scheme: inherit; }
.nav { color: var(--text-muted) !important; }
.nav:hover, .nav.active { background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important; color: var(--primary) !important; }
.content blockquote, .content pre, .translation-notice, .workflow-hint { background: var(--surface-raised); color: var(--text-muted); border-color: var(--border-color); }
.content blockquote { border-left: 4px solid var(--primary-light); }
.content pre { overflow: auto; }
.tag { color: var(--primary-light) !important; }
.category-filter button { background: var(--surface); color: var(--text); border-color: var(--border-color); }
.category-filter button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination button { background: var(--surface); color: var(--text); border-color: var(--border-color); }
.editor-category-option, .editor-create-row { background: var(--surface-raised); color: var(--text); border-color: var(--border-color); }
.workflow-hint { display: block; margin-top: 8px; line-height: 1.5; }
.blog-controls { display: inline-flex; align-items: center; gap: 8px; }
.blog-controls .theme-selector, .blog-controls .language-selector { position: relative; display: inline-flex; align-items: center; }
.blog-controls .theme-btn, .blog-controls .language-btn { min-height: 36px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--surface); color: var(--text); font: 600 12px var(--font-button, Montserrat, sans-serif); cursor: pointer; }
.blog-controls .theme-dropdown, .blog-controls .language-dropdown { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 6px); right: 0; display: none; min-width: 140px; padding: 5px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-md); }
.blog-controls .theme-dropdown.visible, .blog-controls .language-dropdown.visible { display: grid; }
.blog-controls .theme-option, .blog-controls .language-option { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--text); text-align: left; text-decoration: none; font: 500 12px var(--font-body, Montserrat, sans-serif); cursor: pointer; }
.blog-controls .theme-option:hover, .blog-controls .language-option:hover, .blog-controls .theme-option.active, .blog-controls .language-option.active { background: var(--gray-light); color: var(--primary); }
.blog-controls :focus-visible { outline: 3px solid var(--orange-light); outline-offset: 2px; }
.translation-notice { margin-top: 8px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.translation-action { display: inline-flex; align-items: center; min-height: 36px; margin: 0 10px 10px 0; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); color: var(--primary); font: 600 12px var(--font-button, Montserrat, sans-serif); text-decoration: none; }
.blog-translation-link { display: inline-flex; margin: 0 0 18px 12px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 12px; }
.editor-category-list { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-category-option { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--surface-raised); color: var(--text); }
.editor-category-option input { width: auto; }
.editor-create-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--surface-raised); }
.editor-create-row .field { flex: 1 1 150px; margin: 0; }
.editor-create-row p { flex: 0 0 100%; margin: 0; color: var(--text-muted); }
.editor-create-row button { min-height: 38px; padding: 8px 12px; border: 1px solid var(--primary); border-radius: var(--border-radius-sm); background: var(--primary); color: var(--white); font: 600 12px var(--font-button); }
@media (max-width: 700px) {
    header .bar { flex-wrap: wrap; }
    header .bar .blog-controls { width: 100%; justify-content: flex-end; margin-top: 8px; }
    .sidebar .blog-controls, .box .blog-controls { margin: 0 0 18px auto; }
}
@media (max-width: 720px) {
    .blog-admin-page .admin-toolbar { top: 12px; right: 12px; }
    .blog-admin-page .blog-controls { gap: 6px; }
    .blog-admin-page .blog-controls .theme-btn,
    .blog-admin-page .blog-controls .language-btn { min-width: 42px; min-height: 42px; padding: 8px; }
    .blog-admin-page .box { margin: 74px 0 24px; }
    .blog-admin-page .sidebar {
        position: relative;
        min-height: 0;
        padding: 14px;
        gap: 6px;
    }
    .blog-admin-page .sidebar .brand { flex-basis: 100%; margin: 0 0 8px; }
    .blog-admin-page .sidebar .nav { flex: 1 1 auto; text-align: center; }
    .blog-admin-page .sidebar .logout { flex: 1 1 auto; margin: 0; text-align: center; }
    .blog-admin-page .main { padding: 22px 16px; }
    .blog-admin-page .top { align-items: flex-start; }
    .blog-admin-page .top h1 { margin: 0; font-size: clamp(21px, 6vw, 25px); }
    .blog-admin-page .main .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .blog-admin-page .stats { gap: 10px; }
    .blog-admin-page .stat { flex-basis: calc(50% - 5px); padding: 15px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }