/* ===================================================================
   КОНТУР — дизайн-токены
   Тема: ИИ замыкает единый контур присутствия бренда во всех каналах —
   поиске, соцсетях и мессенджерах. Светлый премиум-фон, тонкие линии,
   узлы-каналы вместо абстрактных градиентов.
=================================================================== */

:root{
  /* поверхности */
  --bg:            #F7F6F2;
  --bg-soft:       #F1EFE9;
  --surface:       #FFFFFF;
  --surface-alt:   #FBFAF7;
  --line:          #E4E1D8;
  --line-strong:   #D2CEC0;

  /* акценты */
  --ink:           #14151B;
  --ink-muted:     #63667A;
  --ink-faint:     #9598A8;

  --accent:        #2B2F8F;   /* глубокий индиго — линия контура */
  --accent-dim:    #4247A8;
  --accent-soft:   #ECEDFA;
  --gold:          #B8862E;   /* премиум-бонус, тёплый металл */
  --gold-soft:     #F7EEDC;
  --success:       #1E8A5C;
  --success-soft:  #E7F5EE;
  --danger:        #C1483C;

  --radius-s:  8px;
  --radius-m:  14px;
  --radius-l:  22px;

  --shadow-card: 0 24px 60px -34px rgba(20,21,27,0.22);
  --shadow-pop:  0 30px 70px -20px rgba(20,21,27,0.28);

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }

.container{ max-width:1180px; margin:0 auto; padding:0 32px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--accent); display:inline-block; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; border:1px solid transparent;
  font-size:15px; font-weight:600; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 14px 30px -12px rgba(43,47,143,0.45); }
.btn-primary:hover{ background:var(--accent-dim); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-gold{ background:var(--gold); color:#fff; box-shadow:0 14px 30px -12px rgba(184,134,46,0.5); }
.btn-sm{ padding:9px 18px; font-size:13px; border-radius:100px; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); }

.tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  padding:4px 10px; border-radius:100px; display:inline-flex; align-items:center; gap:5px;
}
.tag-up{ background:var(--success-soft); color:var(--success); }
.tag-down{ background:#FBEAE7; color:var(--danger); }
.tag-neutral{ background:var(--bg-soft); color:var(--ink-muted); }
.tag-gold{ background:var(--gold-soft); color:var(--gold); }

::selection{ background:var(--accent); color:#fff; }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hidden{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

@media (max-width:860px){ .container{ padding:0 20px; } }

/* ---------- значки каналов продвижения (единый стиль обводки) ---------- */
.channel-badge{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:20px 12px; border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--surface);
}
.channel-badge .icon{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.channel-badge .name{ font-size:13px; font-weight:600; text-align:center; }
.channel-badge .note{ font-size:10.5px; color:var(--ink-faint); }

.savings-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--success-soft); color:var(--success);
  font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:100px;
  width:fit-content;
}
.savings-badge svg{ flex:none; }
.price-strike{ font-size:15px; color:var(--ink-faint); text-decoration:line-through; font-family:var(--font-mono); margin-right:8px; }

/* =================================================================
   Личный кабинет — общая оболочка (используется всеми страницами app)
================================================================= */
.app-header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,246,242,0.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.app-header-row{ display:flex; align-items:center; height:68px; gap:32px; }
.app-logo{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:19px; flex:none; color:var(--ink); }
.app-tabs{ display:flex; gap:4px; flex:1; }
.app-tab{
  padding:9px 16px; border-radius:100px; font-size:14px; color:var(--ink-muted); font-weight:500;
  border:1px solid transparent; transition:all .15s ease;
}
.app-tab:hover{ color:var(--ink); }
.app-tab.active{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); box-shadow:0 1px 0 rgba(0,0,0,0.02); }

.app-right{ display:flex; align-items:center; gap:12px; flex:none; min-width:0; }
.plan-pill{
  display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
  padding:7px 8px 7px 16px; border-radius:100px; font-size:13px; max-width:min(50vw, 480px);
}
.plan-pill .plan-name{ font-weight:600; white-space:nowrap; }
.plan-pill .plan-sub{ color:var(--ink-faint); font-size:11.5px; font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bell-btn{
  width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; position:relative; flex:none;
}
.bell-dot{ position:absolute; top:8px; right:9px; width:6px; height:6px; border-radius:50%; background:var(--danger); display:none; }
.user-chip{
  display:flex; align-items:center; gap:9px; padding:5px 14px 5px 5px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line); cursor:pointer; position:relative;
}
.user-chip .av{ width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:700; }
.user-menu{
  position:absolute; top:calc(100% + 10px); right:0; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-m); padding:8px; width:200px; display:none; flex-direction:column; box-shadow:var(--shadow-card); z-index:70;
}
.user-menu.open{ display:flex; }
.user-menu a{ padding:10px 12px; border-radius:8px; font-size:13.5px; display:flex; gap:9px; align-items:center; color:var(--ink-muted); }
.user-menu a:hover{ background:var(--bg-soft); color:var(--ink); }
@media (max-width:980px){
  .app-tabs{ display:none; position:fixed; top:68px; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--line); flex-direction:column; padding:10px; gap:2px; z-index:65; box-shadow:var(--shadow-card); }
  .app-tabs.mobile-open{ display:flex; }
  .app-tab{ padding:12px 16px; }
  .mobile-nav-toggle{ display:flex !important; }
  .plan-pill{ max-width:none; padding:7px 8px 7px 12px; }
  .plan-pill .plan-sub{ display:none; }
  .user-chip span{ display:none; }
  .app-header-row{ gap:8px; }
  .app-right{ gap:6px; }
}
@media (max-width:560px){
  .plan-pill .plan-name{ display:none; }
  .plan-pill{ padding:4px; border:none; background:transparent; }
  .plan-pill .btn{ padding:9px 12px; font-size:12.5px; }
  .app-logo{ font-size:16px; }
  .bell-btn, .user-chip .av{ width:34px; height:34px; }
}
@media (max-width:400px){
  .plan-pill .btn{ font-size:0; padding:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
  .plan-pill .btn::before{ content:"₽"; font-size:15px; font-family:var(--font-mono); }
  .app-header-row{ gap:4px; }
  .app-right{ gap:4px; }
}
.mobile-nav-toggle{
  display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); align-items:center; justify-content:center; flex:none; margin-right:4px;
}

/* ---------- прогресс-бар тарифа в шапке ---------- */
.plan-pill{ position:relative; overflow:hidden; }
.plan-pill-progress{ position:absolute; bottom:0; left:0; height:2px; background:var(--gold); transition:width .3s ease; }
.urgent-pulse{ animation:pulseGold 1.6s ease-in-out infinite; }
@keyframes pulseGold{ 0%,100%{ box-shadow:0 0 0 0 rgba(184,134,46,0.5);} 50%{ box-shadow:0 0 0 6px rgba(184,134,46,0);} }

/* ---------- баннер скидки 24ч ---------- */
.discount-banner{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--gold-soft), var(--surface)); border:1px solid var(--gold);
  border-radius:var(--radius-l); padding:18px 22px; margin-bottom:24px;
}
.discount-banner-text{ display:flex; flex-direction:column; gap:4px; }
.discount-banner-text strong{ font-size:15px; }
.discount-banner-text span{ font-size:13px; color:var(--ink-muted); font-family:var(--font-mono); }
#discountTimer{ color:var(--gold); font-weight:700; }

/* ---------- панель уведомлений ---------- */
.bell-btn{ position:relative; }
.notif-panel{
  position:absolute; top:calc(100% + 10px); right:0; width:300px; max-height:360px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-m);
  box-shadow:var(--shadow-card); padding:8px; z-index:80;
}
.notif-item{ padding:12px; border-radius:8px; margin-bottom:4px; }
.notif-item.unread{ background:var(--accent-soft); }
.notif-title{ font-size:13.5px; font-weight:600; margin-bottom:3px; }
.notif-body{ font-size:12.5px; color:var(--ink-muted); line-height:1.5; }
.notif-date{ font-size:11px; color:var(--ink-faint); margin-top:6px; font-family:var(--font-mono); }
.notif-empty{ padding:24px; text-align:center; color:var(--ink-muted); font-size:13px; }

.shell{ padding:44px 0 100px; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; flex-wrap:wrap; gap:16px; }
.page-head h1{ font-size:28px; }
.page-head p{ color:var(--ink-muted); font-size:14.5px; margin-top:6px; }
.section-title{ font-size:15px; font-weight:600; margin-bottom:16px; font-family:var(--font-body); }

table.data{ width:100%; border-collapse:collapse; font-size:14px; }
table.data th{ text-align:left; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:500; padding:0 14px 12px; border-bottom:1px solid var(--line); }
table.data td{ padding:14px; border-bottom:1px solid var(--line); }
table.data tr:last-child td{ border-bottom:none; }

.empty-state{ text-align:center; padding:56px 24px; color:var(--ink-muted); }
.empty-state h4{ color:var(--ink); font-size:16px; margin-bottom:8px; font-family:var(--font-body); font-weight:600; }
.empty-state p{ font-size:13.5px; max-width:360px; margin:0 auto; }

.modal-overlay{ position:fixed; inset:0; background:rgba(20,21,27,0.45); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-l); padding:30px; width:440px; max-width:100%; box-shadow:var(--shadow-pop); }
.modal h3{ font-size:20px; margin-bottom:22px; }
.modal .field{ margin-bottom:16px; }
.modal-actions{ display:flex; gap:12px; margin-top:22px; }
.modal-actions .btn{ flex:1; }

.field label{ display:block; font-size:13px; color:var(--ink-muted); margin-bottom:8px; }
.field input, .field select{
  width:100%; background:var(--surface-alt); border:1px solid var(--line-strong); border-radius:var(--radius-s);
  padding:12px 14px; color:var(--ink); font-size:14.5px; font-family:inherit;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--accent); background:var(--surface); }

.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:100px; font-size:13.5px;
  opacity:0; pointer-events:none; transition:all .3s ease; z-index:200; font-family:var(--font-mono);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }