/* Единый layout магазина (сайдбары, мобильное меню) */
:root {
    --bg-deep:#0a1018; --bg-surface:#131c29; --bg-card:#1a2533; --bg-elevated:#1e2a3a;
    --accent:#4884ff; --green:#3acf6b; --text-primary:#eef2f6; --text-muted:#8aa2c0;
    --text-dim:#7f8fa0; --border-subtle:#ffffff0c; --border-default:#ffffff10;
    --border-strong:#ffffff20; --border-accent:#4884ff40;
    --radius-sm:14px; --radius-md:18px; --radius-lg:22px; --radius-pill:60px;
    --sidebar-width-left:250px; --sidebar-width-right:290px; --bottom-nav-height:64px;
}
.app-layout { display:flex; min-height:100vh; }
.sidebar-left { width:var(--sidebar-width-left); min-width:var(--sidebar-width-left); background:var(--bg-surface); border-right:1px solid var(--border-default); position:sticky; top:0; height:100vh; z-index:100; display:flex; flex-direction:column; overflow-y:auto; padding:16px 12px; gap:6px; }
.sidebar-left__logo { padding:8px 10px 16px; text-decoration:none; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border-subtle); margin-bottom:8px; }
.logo-go { font-size:1.5rem; font-weight:700; color:var(--green); }
.logo-script { font-size:1.5rem; font-weight:300; color:var(--accent); }
.sidebar-nav-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); padding:10px 10px 4px; font-weight:500; }
.sidebar-nav-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm); text-decoration:none; color:var(--text-primary); font-size:0.88rem; border:1px solid transparent; transition:0.15s; }
.sidebar-nav-item:hover { background:#4884ff14; border-color:var(--border-accent); }
.sidebar-nav-item.active { background:#4884ff20; border-color:var(--accent); font-weight:400; }
.sidebar-nav-item i { width:20px; text-align:center; color:var(--accent); }
.sidebar-nav-item .badge-count { margin-left:auto; font-size:0.68rem; background:#4884ff25; padding:3px 9px; border-radius:20px; color:var(--accent); }
.badge-count--alert { background:#ff475730!important; color:#ff6b7a!important; animation:pulse 2s infinite; }
.sidebar-left__logo .site-logo-img { max-width:100%; }
.sidebar-left__logo .site-logo-text { margin-left:4px; }
.sidebar-nav-item--pro { background:linear-gradient(135deg,#ffb34715,#ff6b6b10); border:1px solid #ffb34730; }
.sidebar-nav-item--pro i { color:#ffb347; }
.sidebar-divider { height:1px; background:var(--border-subtle); margin:6px 10px; }
.sidebar-stats { margin-top:auto; padding:12px 10px; background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border-default); }
.sidebar-stats__row { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--text-muted); padding:4px 0; }
.sidebar-stats__dot { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; margin-right:6px; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
.main-content { flex:1; min-width:0; display:flex; flex-direction:column; }
.sidebar-right { width:var(--sidebar-width-right); min-width:var(--sidebar-width-right); background:var(--bg-surface); border-left:1px solid var(--border-default); position:sticky; top:0; height:100vh; padding:16px 12px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; }
.sidebar-right__cart { background:var(--bg-card); border-radius:var(--radius-lg); padding:16px; border:1px solid var(--border-default); }
.sidebar-right__pro { background:linear-gradient(160deg,#1a1f30,#1e2535); border-radius:var(--radius-lg); padding:18px 14px; border:1px solid #ffb34730; text-align:center; }
.sidebar-right__pro--active { background:linear-gradient(160deg,#1a3020,#1e3528); border-color:#3acf6b50; text-align:left; }
.sidebar-right__pro .pro-crown { font-size:2rem; color:#ffb347; margin-bottom:8px; }
.pro-active-badge { display:inline-flex; align-items:center; gap:8px; background:#3acf6b25; color:var(--green); padding:8px 14px; border-radius:var(--radius-pill); font-size:0.85rem; font-weight:500; margin-bottom:10px; }
.pro-active-plan { font-weight:500; font-size:0.95rem; margin-bottom:4px; }
.pro-active-until { font-size:0.75rem; opacity:0.6; margin-bottom:12px; }
.pro-active-perks { list-style:none; font-size:0.78rem; opacity:0.85; margin-bottom:14px; }
.pro-active-perks li { padding:4px 0; display:flex; align-items:center; gap:8px; }
.pro-active-perks i { color:var(--green); font-size:0.7rem; }
.btn-pro-sm--outline { background:transparent!important; border:1px solid #3acf6b60!important; color:var(--green)!important; }
.btn-pro-sm { display:inline-block; background:linear-gradient(135deg,#ffb347,#ff8c35); color:#0a1018; padding:9px 20px; border-radius:var(--radius-pill); text-decoration:none; font-weight:600; font-size:0.8rem; }
.sidebar-cart { display:flex; flex-direction:column; gap:0; }
.sidebar-cart__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sidebar-cart__head h4 { font-weight:400; font-size:0.95rem; display:flex; align-items:center; gap:8px; margin:0; }
.sidebar-cart__count { background:var(--accent); color:#fff; font-size:0.7rem; min-width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:500; }
.sidebar-cart-empty { text-align:center; padding:20px 10px; opacity:0.55; }
.sidebar-cart-empty i { font-size:2rem; margin-bottom:8px; display:block; color:var(--text-muted); }
.sidebar-cart-empty__link { font-size:0.8rem; color:var(--accent); text-decoration:none; display:inline-block; margin-top:8px; }
.sidebar-cart__items { max-height:220px; overflow-y:auto; margin-bottom:12px; scrollbar-width:thin; }
.sidebar-cart-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #ffffff08; }
.sidebar-cart-item__icon { width:36px; height:36px; border-radius:10px; background:var(--bg-elevated); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:0.9rem; flex-shrink:0; overflow:hidden; }
.sidebar-cart-item__icon img { width:100%; height:100%; object-fit:cover; }
.sidebar-cart-item__body { flex:1; min-width:0; }
.sidebar-cart-item__name { display:block; font-size:0.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-cart-item__meta { font-size:0.65rem; opacity:0.55; }
.sidebar-cart-item__price { font-size:0.8rem; font-weight:400; white-space:nowrap; color:var(--green); }
.sidebar-cart__footer { border-top:1px solid var(--border-subtle); padding-top:12px; }
.sidebar-cart__pay-btn { background:var(--accent); color:#fff; padding:10px 0; width:100%; border-radius:40px; font-size:0.85rem; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; margin-top:10px; transition:0.2s; }
.sidebar-cart__pay-btn:hover { background:#5a90ff; }
.sidebar-cart__pay-btn:disabled { opacity:0.45; cursor:not-allowed; }
.sidebar-cart__secondary { display:block; text-align:center; font-size:0.72rem; opacity:0.5; margin-top:8px; color:inherit; text-decoration:none; }
.sidebar-cart__secondary:hover { color:var(--accent); }
.sidebar-cart__topup-link { display:flex; align-items:center; justify-content:center; gap:6px; font-size:0.78rem; color:var(--accent); text-decoration:none; margin:8px 0; padding:8px; border-radius:var(--radius-sm); background:#4884ff12; border:1px solid var(--border-accent); }
.sidebar-right__balance { display:flex; align-items:center; gap:10px; background:var(--bg-card); border-radius:var(--radius-md); padding:12px 14px; border:1px solid var(--border-default); font-size:0.85rem; }
.sidebar-right__balance strong { flex:1; color:var(--green); font-size:1rem; }
.sidebar-right__balance a { width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:0.75rem; }
.sidebar-right__tags-block { margin-top:4px; }
.sidebar-right__tags-label { font-size:0.7rem; opacity:0.6; display:block; margin-bottom:8px; }
.pay-chip { font-size:0.65rem; padding:4px 10px; border-radius:20px; background:var(--bg-elevated); border:1px solid var(--border-default); opacity:0.75; display:inline-flex; align-items:center; gap:4px; }
.pay-chip--yukassa { color:#fc3f1d; border-color:#fc3f1d30; }

/* Right sidebar: profile + service */
.sidebar-right__profile { background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border-default); padding:12px; margin-bottom:10px; }
.sidebar-profile-card { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.sidebar-profile-card__avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#a855f7); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; position:relative; flex-shrink:0; }
.sidebar-profile-card__pro { position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; background:#ffb347; border-radius:50%; font-size:0.5rem; display:flex; align-items:center; justify-content:center; color:#0a1018; }
.sidebar-profile-card__info { flex:1; min-width:0; }
.sidebar-profile-card__info strong { display:block; font-size:0.85rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-profile-card__info span { font-size:0.68rem; opacity:0.55; }
.sidebar-profile-card__balance { font-size:0.82rem; color:var(--green); font-weight:500; white-space:nowrap; }
.sidebar-profile-quick { display:flex; justify-content:space-around; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-subtle); }
.sidebar-profile-quick a { width:32px; height:32px; border-radius:50%; background:var(--bg-elevated); display:flex; align-items:center; justify-content:center; color:var(--text-muted); text-decoration:none; font-size:0.8rem; transition:0.15s; }
.sidebar-profile-quick a:hover { color:var(--accent); border:1px solid var(--border-accent); }
.sidebar-right__guest { background:var(--bg-card); border-radius:var(--radius-md); padding:14px; text-align:center; border:1px solid var(--border-default); margin-bottom:10px; font-size:0.82rem; opacity:0.85; }
.sidebar-guest-btn { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; padding:8px 16px; border-radius:20px; text-decoration:none; margin:10px 0 6px; font-size:0.82rem; }
.sidebar-guest-link { font-size:0.75rem; color:var(--accent); text-decoration:none; }
.sidebar-right__service { background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border-default); padding:10px 12px; margin-bottom:10px; }
.sidebar-right__service-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em; opacity:0.5; display:block; margin-bottom:8px; }
.sidebar-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sidebar-service-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border-radius:10px; text-decoration:none; color:inherit; font-size:0.65rem; opacity:0.8; border:1px solid transparent; transition:0.15s; position:relative; }
.sidebar-service-item i { font-size:0.95rem; color:var(--accent); }
.sidebar-service-item:hover, .sidebar-service-item.active { background:#4884ff12; border-color:var(--border-accent); opacity:1; }
.sidebar-service-item--pro i { color:#ffb347; }
.sidebar-service-item em { position:absolute; top:4px; right:8px; font-style:normal; font-size:0.6rem; background:var(--accent); color:#fff; min-width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.sidebar-service-item em.em-alert { background:#ff4757; }
.sidebar-right__tags { display:flex; flex-wrap:wrap; gap:6px; }
.sidebar-right__tags .tag { font-size:0.7rem; padding:5px 10px; border-radius:var(--radius-pill); background:var(--bg-elevated); border:1px solid var(--border-default); color:var(--text-muted); text-decoration:none; }
.sidebar-right__payments { display:flex; flex-wrap:wrap; gap:5px; font-size:0.65rem; opacity:0.6; }
.buy-btn { background:var(--accent); color:#fff; padding:8px 0; width:100%; border-radius:40px; font-size:0.8rem; text-align:center; text-decoration:none; display:block; border:none; cursor:pointer; }
.sidebar-cart-row { display:flex; align-items:center; gap:6px; padding:6px 0; font-size:0.78rem; border-bottom:1px solid #ffffff08; }
.sidebar-cart-row__name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-cart-row__qty { opacity:0.6; }
.sidebar-cart-row__price { font-weight:400; white-space:nowrap; }
.sidebar-cart-total { display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-subtle); font-size:0.85rem; }
.sidebar-checkout-totals { margin-top:12px; padding-top:12px; border-top:1px solid var(--border-subtle); }
.sidebar-checkout-row { display:flex; justify-content:space-between; font-size:0.78rem; padding:4px 0; opacity:0.85; }
.sidebar-checkout-row--discount { color:var(--green); }
.sidebar-checkout-row--total { font-size:0.95rem; margin-top:6px; padding-top:8px; border-top:1px solid var(--border-subtle); }
.sidebar-checkout-balance { display:flex; justify-content:space-between; margin-top:8px; font-size:0.8rem; padding:8px; border-radius:8px; background:var(--bg-elevated); }
.sidebar-checkout-balance.ok strong { color:var(--green); }
.sidebar-checkout-balance.low strong { color:var(--red); }
.sidebar-checkout-warn { font-size:0.72rem; color:var(--red); margin-top:6px; }
.checkout-pay-mobile { display:none; }
@media (max-width:1200px) { .checkout-pay-mobile { display:block; } }

/* ============ Unified mobile header ============ */
.top-header {
    display:none; position:sticky; top:0; z-index:110;
    background:var(--bg-surface); border-bottom:1px solid var(--border-default);
    padding:10px 12px; gap:10px; align-items:center;
    backdrop-filter:blur(12px); min-height:52px;
}
.top-header--app { grid-template-columns:auto 1fr auto; display:none; }
.top-header--catalog { display:none; }
.hamburger, .mobile-header__menu {
    background:transparent; border:1px solid var(--border-strong); color:#fff;
    padding:8px 12px; border-radius:40px; cursor:pointer;
    display:flex; align-items:center; gap:6px; font-size:0.85rem; flex-shrink:0;
    font-family:inherit; white-space:nowrap;
}
.top-header--app .mobile-header__menu { width:40px; height:40px; padding:0; justify-content:center; border-radius:50%; }
.top-header--app .mobile-header__menu span { display:none; }
.mobile-header__title { flex:1; min-width:0; text-align:center; padding:0 8px; }
.mobile-header__title-text { font-size:0.95rem; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.mobile-header__search { flex:1; min-width:0; }
.search-box-mobile {
    background:var(--bg-elevated); border-radius:60px; padding:8px 14px;
    display:flex; align-items:center; gap:8px; border:1px solid var(--border-default);
}
.search-box-mobile i { color:var(--text-dim); font-size:0.85rem; flex-shrink:0; }
.search-box-mobile input { background:transparent; border:none; width:100%; color:#fff; outline:none; font-size:0.85rem; min-width:0; font-family:inherit; font-weight:300; }
.mobile-header__actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mobile-header__icon, .header-icon-mobile {
    width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center; color:inherit;
    text-decoration:none; position:relative; flex-shrink:0; font-size:1rem; transition:0.15s;
}
.mobile-header__icon:hover, .header-notify:hover { border-color:var(--accent); color:var(--accent); }
.cart-badge-mobile {
    position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
    background:var(--accent); color:#fff; border-radius:20px; font-size:0.6rem; font-weight:500;
    display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-surface);
}
.header-notify { width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:inherit; text-decoration:none; position:relative; flex-shrink:0; transition:0.15s; }
.header-notify--active { border-color:var(--accent); color:var(--accent); background:#4884ff12; }
.header-notify__badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; background:var(--red,#ff4757); color:#fff; font-size:0.6rem; font-weight:500; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-surface); }
.mobile-bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:#0f1722f0; backdrop-filter:blur(20px); border-top:1px solid var(--border-default); padding:6px 8px max(10px, env(safe-area-inset-bottom)); justify-content:space-around; z-index:300; }
.mobile-nav-item { display:flex; flex-direction:column; align-items:center; color:#9aabbf; text-decoration:none; font-size:0.58rem; gap:3px; position:relative; padding:4px 6px; min-width:52px; }
.mobile-nav-item i { font-size:1.2rem; }
.mobile-nav-item.active { color:var(--accent); }
.cart-dot { position:absolute; top:2px; right:8px; width:8px; height:8px; background:var(--accent); border-radius:50%; }
.cart-dot--alert { background:var(--red,#ff4757); }
.mobile-nav-item--cart { position:relative; }
.menu-backdrop { display:none; position:fixed; inset:0; z-index:280; background:rgba(5,10,18,0.75); opacity:0; visibility:hidden; transition:0.25s; }
.menu-backdrop.show { opacity:1; visibility:visible; }
.mobile-menu-panel, .right-panel-mobile { display:none; position:fixed; top:0; bottom:0; width:300px; max-width:85vw; background:var(--bg-surface); z-index:290; flex-direction:column; overflow-y:auto; padding:16px 12px; gap:4px; }
.mobile-menu-panel { left:0; transform:translateX(-105%); transition:0.3s; border-right:1px solid var(--border-default); }
.mobile-menu-panel.show { transform:translateX(0); }
.right-panel-mobile { right:0; transform:translateX(105%); transition:0.3s; border-left:1px solid var(--border-default); }
.right-panel-mobile.show { transform:translateX(0); }
.menu-close-btn { align-self:flex-end; background:#ffffff12; border:none; color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; margin-bottom:8px; }
.toast-notification { position:fixed; bottom:90px; left:16px; right:16px; background:#1e2a3af0; border-radius:var(--radius-pill); padding:12px 20px; display:flex; align-items:center; gap:12px; z-index:350; border:1px solid #4884ff60; transform:translateY(20px); opacity:0; transition:0.3s; pointer-events:none; }
.toast-notification.show { transform:translateY(0); opacity:1; }
.main-content__inner { width:100%; max-width:none; padding:20px 24px 40px; flex:1; }
@media (min-width:1201px) {
    .sidebar-left,.sidebar-right{display:flex}
    .top-header,.mobile-bottom-nav,.menu-backdrop,.mobile-menu-panel,.right-panel-mobile{display:none!important}
}
@media (max-width:1200px) { .sidebar-right{display:none} }
@media (max-width:1024px) {
    .sidebar-left{display:none}
    .top-header--catalog, .top-header--app { display:flex!important; }
    .mobile-bottom-nav{display:flex}
    .menu-backdrop,.mobile-menu-panel,.right-panel-mobile{display:flex}
    .mobile-menu-panel,.right-panel-mobile{display:none}
    .mobile-menu-panel.show,.right-panel-mobile.show{display:flex}
    body{padding-bottom:var(--bottom-nav-height)}
    .main-content__inner { padding:16px 14px 24px; }
    /* Заголовок страницы уже в mobile header — не дублируем */
    body.page-notifications .notifications-header > div:first-child h1,
    body.page-support .support-header h1,
    body.page-checkout .checkout-title,
    body.page-cart .cart-items-section > h2:first-child { display:none; }
    body.page-notifications .notifications-header,
    body.page-support .support-header { margin-bottom:12px; }
}