:root {    --rvn-primary: #123456;    --rvn-accent: #ee0044;    --rvn-bg: #f8fafc;    --rvn-card-bg: #ffffff;    --rvn-text-main: #1e293b;    --rvn-text-muted: #64748b;    --rvn-border: #e2e8f0;    --rvn-radius: 16px;    --rvn-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}
.image-actions { position: absolute; bottom: 15px; right: 15px; display: flex; gap: 8px; z-index: 5; }.btn-action-img, .btn-delete-img {    background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px); color: #fff !important; padding: 8px 16px;    border-radius: 10px; font-size: 13px; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px; transition: 0.3s;}.btn-action-img:hover { background: var(--rvn-primary); transform: translateY(-2px);}.btn-delete-img:hover { background: var(--rvn-accent); transform: translateY(-2px);}.btn-change-avatar {    position: absolute!important; bottom: -6px; right: -6px; background: var(--rvn-primary); color: white;    width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 3px solid white; cursor: pointer; z-index: 11; transition: .3s;}.btn-change-avatar:hover { background: var(--rvn-accent); }.btn-change-avatar svg { transition: .3s; }.btn-change-avatar:hover svg { transform:scale(1.1); }.btn-delete-avatar {    position: absolute !important;    top: -10px;    right: -10px;    background: var(--rvn-accent);    color: white;    width: 26px;    height: 26px;    border-radius: 50%;    display: inline-flex;    align-items: center;    justify-content: center;    line-height: 1;     padding: 0;    margin: 0;    box-sizing: border-box;    border: 2px solid white;    cursor: pointer;    z-index: 11;    font-size: 14px;    transition: .3s;}.btn-action svg,  .btn-popup-primary svg {  width: 24px; height: 24px; }.btn-delete-avatar:hover {    transform: rotate(90deg);    background: #000; }.form-footer-sticky {    background: var(--rvn-card-bg); padding: 20px; border-radius: var(--rvn-radius); box-shadow: var(--rvn-shadow);    position: sticky; bottom: 10px; z-index: 90; margin-top: 40px;}.form-footer-sticky button.btn-main-submit { display: flex; align-items: center; gap: 10px;font-size: 0.875rem; }.btn-main-submit, .btn-primary, .btn-popup-primary, .btn-primary-crop { background: var(--rvn-primary); color: white; border: none; padding: 14px 28px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.3s; }.btn-secondary, .btn-popup-secondary, .btn-secondary-crop { background: #e2e8f0; color: #475569; border: none; padding: 14px 28px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.3s; }.btn-secondary:hover, .btn-popup-secondary:hover, .btn-secondary-crop:hover { background: #cbd5e1; color: #1e293b; transform: translateY(-2px); }.btn-main-submit:hover, .btn-primary:hover, .btn-popup-primary:hover, .btn-primary-crop:hover { background: var(--rvn-accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }.popup-error .btn-popup-primary, .popup-warning .btn-popup-primary { background: var(--rvn-accent); transition: .3s; }.btn-preview { background: #0084ff; color: white; border: none; padding: 0 15px; border-radius: 8px; font-size: 13px; font-weight: 500; opacity: 0; visibility: hidden; transform: translateX(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; gap:2px;}.btn-preview.show { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }.btn-preview:hover { background: #0073e6; }.btn-main-submit:disabled, #rvn-popup-confirm:disabled { background: #cbd5e1 !important; color: #94a3b8 !important; transform: none !important; cursor: not-allowed !important; box-shadow: none !important; opacity: 0.8; }.btn-animation { display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer; user-select: none; position: relative; overflow: hidden; vertical-align: middle; isolation: isolate; z-index: 1; text-decoration: none;}.btn-animation:active { transform: scale(0.92) !important; filter: brightness(0.85); box-shadow: inset 0 3px 5px rgba(0,0,0,0.1); }.btn-animation::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; z-index: 10; pointer-events: none; }.btn-animation.light-btn::after { background: rgba(0, 0, 0, 0.1); }.btn-animation:focus:not(:active)::after { animation: ripple 0.4s ease-out; }@keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(20); opacity: 0; } }@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }.spin { animation: spin 1s linear infinite; display: inline-block; }@media (max-width:450px){.btn-action-img span {display: none;}}
.rvn-popup-overlay {position: fixed; top: 0; left: 0;    display: flex; align-items: center; justify-content: center;    width: 100%; height: 100%;     background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(10px);     z-index: 999998; opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none;transform: scale(0.8);}.rvn-popup-overlay.active { opacity: 1; visibility: visible; pointer-events: all; transform: scale(1); }.rvn-popup-content {    background: white; padding: 40px; border-radius: 30px;    width: 90%; max-width: 36rem; text-align: center;    box-shadow: 0 25px 50px rgba(0,0,0,0.2);    transform: scale(0.8); opacity: 0;    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}.rvn-popup-overlay.active .rvn-popup-content { transform: scale(1); opacity: 1; }.rvn-popup-title {    font-size: 22px;    font-weight: 800;    color: var(--rvn-text-main);    margin-bottom: 12px;    line-height: 1.3;}.rvn-popup-message {    font-size: 15px;    font-weight: 500;    color: var(--rvn-text-muted);    line-height: 1.6;    margin-bottom: 25px;}.rvn-popup-icon-wrapper {    width: 90px; height: 90px; margin: 0 auto 20px;    border-radius: 50%; display: flex; align-items: center; justify-content: center;    font-size: 32px; transition: all 0.3s ease;}.popup-success .rvn-popup-icon-wrapper { background: #dcfce7; color: #16a34a; border: 3px solid #f0fdf4; }.popup-error .rvn-popup-icon-wrapper,.popup-warning .rvn-popup-icon-wrapper { background: #fee2e2; color: #dc2626; border: 3px solid #fef2f2; }.popup-error .btn-popup-primary, .popup-warning .btn-popup-primary { background: var(--rvn-accent); }.rvn-popup-icon-wrapper svg { animation: rvn-icon-bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }@keyframes rvn-icon-bounce { 0% { transform: scale(0); } 100% { transform: scale(1); } }.rvn-popup-actions button { margin: 0 3px; }#rvn-toast-container {    position: fixed;    top: 75px;    right: 20px;    z-index: 999999;}.rvn-toast {    display: flex;    align-items: center;    min-width: 280px;    max-width: 380px;    background: #fff;    padding: 18px 20px;    border-radius: 12px;    margin-bottom: 10px;    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);    border-left: 4px solid #ddd;    animation: toastSlideIn 0.3s ease forwards;position: relative;    overflow: hidden;}@keyframes toastSlideIn {    from { transform: translateX(100%); opacity: 0; }    to { transform: translateX(0); opacity: 1; }}.rvn-toast.toast-success { border-left-color: #10b981; }.rvn-toast.toast-error { border-left-color: #ef4444; }.rvn-toast.toast-warning { border-left-color: #f59e0b;}.rvn-toast-icon { margin-right: 12px; font-size: 18px; }.toast-success svg { color: #10b981; background-color: rgb(16 185 129 / 20%);}.toast-error svg { color: #ef4444; background-color: rgb(239 69 69 / 20%);}.toast-warning svg { color: #f59e0b; background-color: rgb(245 158 11 / 20%)}.rvn-toast-icon svg {    width: 40px !important;    height: 40px !important;    padding: 8px;    border-radius: 10px;}.rvn-toast-message { font-size: 16px; font-weight: 500; }.rvn-toast.fade-out {    animation: toastFadeOut 0.5s ease forwards;}@keyframes toastFadeOut {    to { transform: translateX(20px); opacity: 0; }}.rvn-toast-progress {    position: absolute;    bottom: 0;    left: 0;    height: 3px;    width: 100%;    background: rgba(0, 0, 0, 0.05);}.rvn-toast-progress-bar {    height: 100%;    width: 100%;    background: currentColor;     opacity: 0.6;    transform-origin: left;}@keyframes toastProgress {    from { transform: scaleX(1); }    to { transform: scaleX(0); }}.toast-success .rvn-toast-progress-bar { background: #10b981; }.toast-error .rvn-toast-progress-bar { background: #ef4444; }svg {    vertical-align: middle;    flex-shrink: 0; }.spin {    animation: rvn-spin 1s linear infinite;}@keyframes rvn-spin {    from { transform: rotate(0deg); }    to { transform: rotate(360deg); }}.rvn-popup-icon-wrapper svg {    width: 48px !important;    height: 48px !important;}.form-footer-sticky svg {    width: 24px !important;    height: 24px !important;}.modal-header svg {    width: 24px;}
.rvn-sidebar-modern {    width: var(--sidebar-width);    background: #ffffff;    border-right: 1px solid var(--border-color);    display: flex;    flex-direction: column;    height: calc(100vh - var(--header-height));    position: sticky;    top: var(--header-height);    z-index: 1000;    transition: transform 0.3s ease;    overflow: hidden;}.sidebar-top-card { flex-shrink: 0; border-bottom: 1px solid var(--border-color); z-index: 10; }.user-profile-card {    margin: 1.25rem; padding: .6rem; background: #ffffff;    border: 1px solid var(--border-color); border-radius: var(--radius-lg);    display: flex; align-items: center; gap: 0.75rem;    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); transition: var(--transition); cursor: pointer;}.user-profile-card:hover { border-color: var(--border-hover-color:); background: #f8fafc; box-shadow: 0 4px 12px rgba(19, 91, 236, 0.08); }.user-avatar-wrapper { position: relative; flex-shrink: 0; }.user-avatar-large { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background-size: cover; background-position: center; }.status-online-dot {    position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px;    background-color: #10b981; border: 2px solid #ffffff; border-radius: 50%; z-index: 2;}.status-online-dot::after {    content: ''; position: absolute; inset: -2px; border-radius: 50%;    background-color: #10b981; opacity: 0.4; animation: status-pulse 2s infinite ease-out;}@keyframes status-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }.user-name { font-size: 0.875rem; font-weight: 700; color: var(--text-main); margin: 0; }.user-meta { font-size: 0.6875rem; color: var(--text-muted); margin: 0; }.sidebar-nav-scrollable { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 0.5rem 0; }.sidebar-nav-scrollable::-webkit-scrollbar { width: 4px; }.sidebar-nav-scrollable::-webkit-scrollbar-thumb { background: rgba(203, 213, 225, 0.5); border-radius: 10px; }.nav-group-label { padding: 1.25rem 1.25rem 0.625rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.05em; }.nav-item {    display: flex; align-items: center; justify-content: space-between;    padding: 0.625rem 1.25rem; margin: 0.125rem 0.625rem;    border-radius: var(--radius-md); text-decoration: none; color: #475569;    transition: var(--transition); position: relative; overflow: hidden;}.nav-link-content { display: flex; align-items: center; gap: 0.75rem; }.nav-link-content svg { width: 1.125rem; height: 1.125rem; stroke-width: 2; transition: 0.25s; }.nav-text { font-size: 0.875rem; font-weight: 500; }.nav-item:hover { background-color: #f1f5f9; color: var(--primary); }.nav-item:hover .nav-link-content svg { transform: translateX(3px); }.nav-item.active { background-color: var(--primary-light) !important; color: var(--primary) !important; }.nav-item.active::before {    content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 4px;    background-color: var(--primary); border-radius: 0 4px 4px 0;}.nav-item.active .nav-text { font-weight: 700; }.count-tag-modern { background: var(--primary); color: #fff; font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 1.25rem; transition: 0.2s; }.nav-item:hover .count-tag-modern { transform: scale(1.1); }.sidebar-bottom-sticky { flex-shrink: 0; padding: 1rem 1.25rem; border-top: 1px solid var(--border-color); background: #fff; z-index: 10; }.nav-divider { height: 1px; background: var(--border-color); margin: 1rem 1.25rem; opacity: 0.6; }.logout-item-list { color: #94a3b8 !important; transition: 0.2s; }.logout-item-list:hover { background: #fef2f2 !important; color: #ef4444 !important; }.btn-post-new-full {    display: flex; align-items: center; justify-content: center; gap: 0.625rem;    background: var(--primary); color: #ffffff !important; padding: 0.875rem;    border-radius: var(--radius-md); font-weight: 700; font-size: 0.875rem;    box-shadow: 0 4px 12px rgba(19, 91, 236, 0.2); transition: var(--transition);}.btn-post-new-full:hover { background-color: #0e4bc3; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(19, 91, 236, 0.3); }.btn-post-new-full svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.5; transition: 0.3s; }.btn-post-new-full:hover svg { transform: rotate(90deg); }.rvn-sidebar-close {    display: none; position: absolute; top: 0.6rem; right: 0.5rem;     width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;    background: #ffffff; color: var(--text-main); border-radius: 50%;    cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1002;    opacity: 0; transform: rotate(-90deg) scale(0.5); transition: 0.4s;}body.sidebar-open .rvn-sidebar-close { display: flex; opacity: 1; transform: rotate(0deg) scale(1); }.rvn-sidebar-close:hover { background: var(--primary); color: #ffffff; transform: rotate(0deg) scale(1.1); }.rvn-sidebar-close svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.5; pointer-events: none; }@media (max-width: 991px) {    .rvn-sidebar-modern {        position: fixed; top: 0; left: calc(var(--sidebar-width) * -1);        height: 100vh; z-index: 1060; max-width: 85vw;        transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);    }    body.sidebar-open .rvn-sidebar-modern { left: 0; box-shadow: 1rem 0 3rem rgba(0,0,0,0.15); }    .rvn-sidebar-close { display: flex; }}