:root {
    --classic-accent: #b95116;
    --classic-accent-dark: #95400f;
    --classic-header-top: #e9833d;
    --classic-header-bottom: #cf5712;
    --classic-tint: #f8eee5;
    --classic-selected: #efdfd0;
    --classic-border: #dac8b8;
    --classic-text: #62462f;
}

html, body {
    background: #f5f5f5;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    color: #303030;
}

a { color: var(--classic-accent); }
a:hover { color: var(--classic-accent-dark); }

.page-wrap {
    width: 820px;
    max-width: 100%;
    box-shadow: none;
    border-color: #dedede;
}

.top-header {
    height: 46px;
    gap: 15px;
    padding: 0 12px;
    background: linear-gradient(var(--classic-header-top), var(--classic-header-bottom));
    border-color: var(--classic-accent-dark);
    border-radius: 0 0 5px 5px;
    box-shadow: inset 0 1px 0 #ffffff38;
}

.brand-logo { flex-shrink: 0; }
.brand-box { color: #d95708; }
.top-nav-links { gap: 11px; margin-left: auto; }
.top-nav-links a { font-size: 11px; font-weight: normal; }

.header-dodster-badge { white-space: nowrap; }

.main-layout { gap: 12px; padding-top: 10px; }
.left-sidebar { width: 144px; }
.side-nav a { min-height: 24px; padding: 4px 7px; border-radius: 0; color: var(--classic-accent); }
.side-nav a:hover, .side-nav a.active {
    background: var(--classic-tint);
    color: var(--classic-accent-dark);
    font-weight: normal;
}
.side-nav a.active { box-shadow: inset 2px 0 var(--classic-accent); }
.nav-counter { background: var(--classic-accent); border-radius: 2px; }
.content-area { min-width: 0; }

.vk-section-bar {
    color: var(--classic-text);
    background: var(--classic-tint);
    border-color: var(--classic-border);
    border-radius: 0;
    min-height: 29px;
}
.vk-box-cream { background: #f7f7f7; border-color: #e3e3e3; border-radius: 0; }
.vk-subbar { background: #f1f1f1; border-color: #dedede; color: var(--classic-text); }
.vk-btn {
    background: linear-gradient(var(--classic-header-top), var(--classic-header-bottom));
    border-color: var(--classic-accent-dark);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 #ffffff38;
}
.vk-btn:hover { background: var(--classic-accent); border-color: var(--classic-accent-dark); }
.vk-btn-secondary { border-radius: 2px; }
.vk-input, .vk-textarea { border-color: #c4c9ce; border-radius: 0; }
.vk-input:focus, .vk-textarea:focus { border-color: var(--classic-accent); }
.wall-post { border-radius: 0; box-shadow: none; border-color: #e5e7e9; }
.wall-post-author, .vr-toast-title, .photo-upload-label, .like-btn,
.comment-sublink, .vr-feedback-author, .profile-badge-right { color: var(--classic-accent); }
.like-btn.liked { color: var(--classic-accent-dark); }
.wall-post-footer { border-color: #e9edf1; }
.ovk-verify, .vk-section-bar .ovk-verify { fill: var(--classic-accent); }
.vr-toast { border-color: var(--classic-border); border-left-color: var(--classic-accent); }
.vr-toast-avatar { background: #f1f1f1; border-color: #ddd; }

.classic-feed-caption { color: #88929c; font-weight: normal; font-size: 10px; }
.classic-tabs {
    display: flex;
    gap: 3px;
    padding: 0 5px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--classic-border);
}
.classic-tabs a {
    display: block;
    padding: 6px 11px;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--classic-border);
    border-radius: 4px 4px 0 0;
}
.classic-tabs a:hover { text-decoration: none; background: var(--classic-tint); }
.classic-tabs a.selected {
    color: var(--classic-text);
    background: white;
    border-color: var(--classic-border);
    border-bottom-color: white;
    font-weight: bold;
}
.classic-back-top {
    position: fixed;
    right: max(12px, calc((100vw - 820px) / 2 - 90px));
    bottom: 18px;
    padding: 8px 10px;
    font: 11px Tahoma, sans-serif;
    color: var(--classic-accent);
    background: #f5f7f9;
    border: 1px solid #d4dbe2;
    cursor: pointer;
    z-index: 90;
}
.classic-back-top[hidden] { display: none; }
:focus-visible { outline: 2px solid var(--classic-accent); outline-offset: 2px; }

@media (max-width: 768px) {
    .page-wrap { width: 100%; }
    .top-header { height: auto; min-height: 46px; padding: 9px 10px; flex-wrap: wrap; gap: 9px; }
    .brand-logo { margin-right: auto; }
    .top-nav-links { width: 100%; justify-content: space-between; gap: 7px; flex-wrap: wrap; }
    .top-nav-links .header-dodster-badge { flex-basis: 100%; justify-content: center; }
    .main-layout { gap: 10px; }
    .left-sidebar { width: 100%; }
    .classic-tabs { gap: 0; padding: 0; flex-wrap: wrap; }
    .classic-tabs a { padding: 6px 8px; }
    .classic-back-top { right: 10px; bottom: 10px; padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .vr-toast { animation: none; transition: none; }
}