/* ═══════════════════════════════════════════════════════
   REVENIX — Общие стили (shared.css)
   Подключается на ВСЕХ страницах
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0a0a0a;--bg2:#111111;--bg3:#181818;--bg4:#1e1e1e;
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.14);
  --text:#f0f0f0;--text2:rgba(240,240,240,0.5);--text3:rgba(240,240,240,0.28);
  --accent:#c8f041;--accent2:rgba(200,240,65,0.1);--accent3:rgba(200,240,65,0.05);
  --red:#ff4d4d;--red2:rgba(255,77,77,0.1);
  --green:#4dff91;--green2:rgba(77,255,145,0.1);
  --yellow:#ffc04d;--yellow2:rgba(255,192,77,0.1);
}
body{background:var(--bg);color:var(--text);font-family:'Stem',sans-serif;font-weight:400;line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
input,textarea,select,button{font-family:'Stem',sans-serif;}

/* ── Общие компоненты ── */
.btn-accent{width:100%;background:var(--accent);color:#0a0a0a;border:none;border-radius:8px;padding:14px;font-size:15px;font-weight:600;transition:opacity 0.2s,transform 0.15s;cursor:pointer;}
.btn-accent:hover{opacity:0.88;transform:translateY(-1px);}
.btn-accent:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.error-msg{background:var(--red2);border:1px solid rgba(255,77,77,0.3);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:16px;display:none;}
.success-msg{background:var(--green2);border:1px solid rgba(77,255,145,0.3);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--green);margin-bottom:16px;display:none;}
.field{margin-bottom:16px;}
.field label{font-size:12px;color:var(--text2);display:block;margin-bottom:6px;}
.field input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:13px 16px;color:var(--text);font-size:14px;outline:none;transition:border-color 0.2s;}
.field input:focus{border-color:rgba(200,240,65,0.4);}
.field input::placeholder{color:var(--text3);}
.badge{font-size:11px;padding:4px 10px;border-radius:99px;font-weight:500;}
.badge-green{background:var(--green2);color:var(--green);}
.badge-accent{background:var(--accent2);color:var(--accent);}
.btn-sm{padding:5px 12px;border-radius:6px;font-size:12px;border:1px solid var(--border2);background:transparent;color:var(--text2);transition:all 0.15s;cursor:pointer;}
.btn-sm:hover{color:var(--text);background:var(--bg3);}
.btn-sm.accent{border-color:rgba(200,240,65,0.3);color:var(--accent);}
.btn-sm.accent:hover{background:var(--accent2);}
.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text3);font-size:14px;}
.toggle{width:40px;height:22px;border-radius:99px;position:relative;cursor:pointer;transition:background 0.2s;background:var(--bg4);border:1px solid var(--border2);flex-shrink:0;}
.toggle.on{background:#1D9E75;border-color:#1D9E75;}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text3);transition:left 0.2s,background 0.2s;}
.toggle.on::after{left:20px;background:white;}

/* ── Layout: sidebar + main ── */
.layout{display:flex;flex-direction:row;min-height:100vh;}
.sidebar{width:220px;min-height:100vh;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;}
.sidebar-logo{font-family:'Stem-Bold',sans-serif;font-size:28px;letter-spacing:3px;color:var(--accent);padding:0 24px 0 48px;height:64px;display:flex;align-items:center;border-bottom:1px solid var(--border);text-decoration:none;transition:opacity 0.2s;}
.sidebar-nav{flex:1;padding:16px 12px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--text2);transition:background 0.15s,color 0.15s;cursor:pointer;margin-bottom:2px;font-weight:500;text-decoration:none;}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:var(--accent2);color:var(--accent);}
.nav-item-icon{font-size:16px;width:20px;text-align:center;}
.nav-section{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);padding:16px 12px 6px;font-weight:600;}
.sidebar-bottom{padding:16px;border-top:1px solid var(--border);}
.user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background 0.15s;}
.user-card:hover{background:var(--bg3);}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent2);border:1px solid rgba(200,240,65,0.2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--accent);flex-shrink:0;}
.user-name{font-size:13px;font-weight:500;}
.user-plan{font-size:11px;color:var(--text3);}
.logout-btn{width:100%;background:transparent;border:1px solid var(--border2);border-radius:8px;padding:8px;color:var(--text3);font-size:12px;cursor:pointer;margin-top:8px;transition:all 0.2s;}
.logout-btn:hover{border-color:var(--red);color:var(--red);}
.main{flex:1;min-height:100vh;overflow-y:auto;}
.topbar{height:64px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:rgba(10,10,10,0.8);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;}
.topbar-title{font-size:15px;font-weight:500;}
.topbar-actions{display:flex;gap:10px;align-items:center;}
/* Панель пользователя в верхней строке (на месте бывшей надписи "Агент активен") */
.topbar-user{display:flex;align-items:center;gap:10px;padding:5px 12px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);}
.topbar-user-info{display:flex;flex-direction:column;line-height:1.25;}
.topbar-actions .sku-bar-wrap{margin-top:0;width:120px;}
.topbar-actions .logout-btn{width:auto;margin-top:0;padding:8px 18px;white-space:nowrap;}
.page-content{padding:32px;}

/* ── Метрики ── */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;}
.metrics-grid.metrics-grid-6{grid-template-columns:repeat(3,1fr);}
.metric-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;}
.metric-label{font-size:12px;color:var(--text3);margin-bottom:6px;}
.metric-val{font-size:26px;font-weight:500;line-height:1;}
.metric-val.accent{color:var(--accent);}
.metric-change{font-size:12px;color:var(--text3);margin-top:6px;}
.metric-change.up{color:var(--green);}
.metric-change.down{color:var(--red);}

/* ── Сетки ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
.grid-3{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:24px;}

/* ── Заказы и продажи ── */
.os-section-title{font-size:13px;color:var(--text3);margin-bottom:10px;margin-top:20px;letter-spacing:0.5px;text-transform:uppercase;}
.os-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.os-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;}
.os-card .metric-val{font-size:28px;}
.os-card .metric-change.down{color:var(--red);}

/* ── Карточки ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.card-title{font-size:14px;font-weight:500;}
.card-action{font-size:12px;color:var(--accent);cursor:pointer;}
.chart-wrap{position:relative;width:100%;height:180px;}

/* ── Кампании ── */
.campaign-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);}
.campaign-row:last-child{border-bottom:none;}
.campaign-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.campaign-dot.active{background:var(--green);}
.campaign-dot.paused{background:var(--red);}
.campaign-dot.ready{background:#ffaa00;}
.campaign-info{flex:1;}
.campaign-name{font-size:14px;font-weight:500;}
.campaign-meta{font-size:12px;color:var(--text3);margin-top:2px;}
.campaign-stats{display:flex;gap:20px;}
.campaign-stat{text-align:right;}
.campaign-stat-val{font-size:13px;font-weight:500;}
.campaign-stat-label{font-size:11px;color:var(--text3);}
.campaign-actions{display:flex;gap:6px;}

/* ── AI рекомендации ── */
.ai-rec{padding:14px 16px;border-radius:8px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start;}
.ai-rec.warn{background:var(--yellow2);border:1px solid rgba(255,192,77,0.2);}
.ai-rec.good{background:var(--green2);border:1px solid rgba(77,255,145,0.2);}
.ai-rec.info{background:var(--accent2);border:1px solid rgba(200,240,65,0.2);}
.ai-rec-icon{font-size:14px;flex-shrink:0;margin-top:1px;}
.ai-rec-text{font-size:13px;color:var(--text2);line-height:1.5;}
.ai-rec-text strong{color:var(--text);font-weight:500;}

/* ── Настройки ── */
.settings-title{font-size:15px;font-weight:500;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);}
.settings-row:last-child{border-bottom:none;}
.settings-label{font-size:14px;}
.settings-desc{font-size:12px;color:var(--text3);margin-top:2px;}
.settings-input{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:9px 14px;color:var(--text);font-size:14px;outline:none;transition:border-color 0.2s;width:200px;font-family:'Stem',sans-serif;}
.settings-input:focus{border-color:rgba(200,240,65,0.4);}
.settings-save{margin-top:24px;background:var(--accent);border:none;border-radius:8px;padding:12px 28px;color:#0a0a0a;font-size:14px;font-weight:600;transition:opacity 0.2s;cursor:pointer;}
.settings-save:hover{opacity:0.88;}

/* ── Токен ── */
.token-input-wrap{position:relative;margin-bottom:12px;}
.token-input-wrap input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:13px 80px 13px 16px;color:var(--text);font-size:14px;outline:none;transition:border-color 0.2s;font-family:'Stem',sans-serif;text-overflow:ellipsis;}
.token-input-wrap input:focus{border-color:rgba(200,240,65,0.4);}
.token-eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:16px;cursor:pointer;}

/* ── Баннер подписки ── */
.sub-banner{padding:14px 20px;border-radius:10px;margin:12px 32px;display:none;align-items:center;gap:12px;font-size:13px;line-height:1.5;}
.sub-banner.expired{background:rgba(255,70,70,0.1);border:1px solid rgba(255,70,70,0.25);display:flex;}
.sub-banner.warning{background:rgba(255,180,50,0.1);border:1px solid rgba(255,180,50,0.25);display:flex;}
.sub-banner-icon{font-size:20px;flex-shrink:0;}
.sub-banner-text{flex:1;color:var(--text2);}
.sub-banner-text strong{color:var(--text);display:block;margin-bottom:2px;}
.sub-banner .btn-sm{white-space:nowrap;flex-shrink:0;}

/* ── SKU прогресс-бар ── */
.sku-bar-wrap{margin-top:8px;}
.sku-bar-info{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-bottom:4px;}
.sku-bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;}
.sku-bar-fill{height:100%;border-radius:3px;background:var(--accent);transition:width 0.4s ease;}
.sku-bar-fill.warn{background:#ffb432;}
.sku-bar-fill.over{background:#ff4646;}

/* ── Promo wizard ── */
.promo-step-indicator{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;z-index:1;}
.promo-step-indicator .promo-step-num{width:32px;height:32px;border-radius:50%;background:var(--bg3);border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--text3);transition:all 0.3s;line-height:1;padding:0;}
.promo-step-indicator .promo-step-label{font-size:11px;color:var(--text3);transition:color 0.3s;}
.promo-step-indicator.active .promo-step-num{background:var(--accent2);border-color:var(--accent);color:var(--accent);}
.promo-step-indicator.active .promo-step-label{color:var(--accent);}
.promo-step-indicator.done .promo-step-num{background:var(--accent);border-color:var(--accent);color:#0a0a0a;}
.promo-step-indicator.done .promo-step-label{color:var(--text2);}
.promo-step-line{height:2px;background:var(--border2);transition:background 0.3s;flex:1;align-self:flex-start;margin-top:15px;}
.promo-step-line.active{background:var(--accent);}
.promo-step-panel{display:none;}
.promo-step-panel.active{display:block;}
.promo-store-card{padding:16px;border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all 0.2s;margin-bottom:8px;}
.promo-store-card:hover{border-color:rgba(200,240,65,0.3);background:var(--bg3);}
.promo-store-card.selected{border-color:var(--accent);background:var(--accent3);}
.promo-product-card{padding:12px 16px;border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all 0.2s;margin-bottom:6px;display:flex;align-items:center;gap:12px;}
.promo-product-card:hover{border-color:rgba(200,240,65,0.3);background:var(--bg3);}
.promo-product-card.selected{border-color:var(--accent);background:var(--accent3);}
.promo-payment-card{padding:16px;border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all 0.2s;margin-bottom:8px;}
.promo-payment-card:hover{border-color:rgba(200,240,65,0.3);background:var(--bg3);}
.promo-payment-card.selected{border-color:var(--accent);background:var(--accent3);}
.promo-payment-card.disabled{opacity:0.4;cursor:not-allowed;}
.plan-option:hover{border-color:rgba(200,240,65,0.3) !important;background:var(--bg3) !important;}

/* ── Animations ── */
@keyframes aiWink{0%,90%,100%{transform:scaleY(1);}95%{transform:scaleY(0.1);}}
.ai-eye-right{animation:aiWink 5s ease-in-out infinite;transform-origin:center center;}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}

/* ── Sync overlay ── */
.sync-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:9999;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s;}
.sync-overlay.show{display:flex;opacity:1;}
.sync-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:48px 40px;width:460px;max-width:90vw;text-align:center;position:relative;animation:syncModalIn 0.4s ease;}
@keyframes syncModalIn{from{opacity:0;transform:scale(0.9) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
.sync-spinner{width:64px;height:64px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:syncSpin 1s linear infinite;margin:0 auto 24px;}
@keyframes syncSpin{to{transform:rotate(360deg);}}
.sync-done-icon{width:64px;height:64px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;animation:syncPop 0.4s ease;}
@keyframes syncPop{0%{transform:scale(0);}50%{transform:scale(1.2);}100%{transform:scale(1);}}
.sync-error-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,70,70,0.15);border:2px solid rgba(255,70,70,0.4);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:28px;}
.sync-title{font-size:20px;font-weight:600;margin-bottom:8px;color:var(--text);}
.sync-subtitle{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:24px;}
.sync-steps{text-align:left;margin:0 auto 24px;max-width:320px;}
.sync-step{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:13px;color:var(--text3);border-bottom:1px solid var(--border);transition:color 0.3s;}
.sync-step:last-child{border-bottom:none;}
.sync-step.active{color:var(--accent);}
.sync-step.done{color:var(--green);}
.sync-step-icon{width:20px;text-align:center;font-size:14px;}
.sync-progress{height:4px;background:var(--bg3);border-radius:2px;margin-bottom:8px;overflow:hidden;}
.sync-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width 0.5s ease;width:0%;}
.sync-timer{font-size:12px;color:var(--text3);}

/* ── Login ── */
.login-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;padding:0 48px;height:64px;background:rgba(10,10,10,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.login-header-logo{font-family:'Stem-Bold',sans-serif;font-size:28px;letter-spacing:3px;color:var(--accent);text-decoration:none;transition:opacity 0.2s;}
.login-header-logo:hover{opacity:0.8;}
.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);position:relative;overflow:hidden;}
.login-glow{position:absolute;top:-300px;right:-200px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(200,240,65,0.06) 0%,transparent 70%);pointer-events:none;}
.login-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 30%,transparent 100%);}
.login-box{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:48px;width:420px;position:relative;z-index:1;}
.login-logo{font-family:'Stem-Bold',sans-serif;font-size:32px;letter-spacing:4px;color:var(--accent);margin-bottom:32px;text-align:center;}
.tabs{display:flex;gap:0;margin-bottom:28px;border:1px solid var(--border2);border-radius:8px;overflow:hidden;}
.tab{flex:1;padding:10px;text-align:center;font-size:14px;color:var(--text2);cursor:pointer;transition:all 0.2s;background:transparent;border:none;}
.tab.active{background:var(--accent2);color:var(--accent);}