/* Личный кабинет. Базовые токены, шапка, кнопки, карточки и модалки — из styles.css. */
:root{
  --ok:#34D399; --ok-rgb:52,211,153;
  --warn:#FBBF24; --warn-rgb:251,191,36;
  --bad:#F87171; --bad-rgb:248,113,113;
}
[hidden]{display:none !important}

.acc-page{padding:34px 0 90px; min-height:calc(100vh - 220px)}
.acc-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.acc-title{margin:0; font-size:28px; letter-spacing:-.5px}
.acc-sub{margin:6px 0 0; color:var(--muted2); font-size:14px}

.acc-loading{display:grid; place-items:center; min-height:50vh; color:var(--muted2); font-size:14px}

.user-chip{
  display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px;
  background:var(--panel); border:1px solid var(--stroke); border-radius:999px; color:var(--text); font-size:13px;
}
.avatar{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:13px; color:#071018; text-transform:uppercase;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
}
.avatar-lg{width:56px; height:56px; font-size:20px}

.btn-sm{padding:7px 11px; font-size:13px; border-radius:10px}
.btn-danger{color:#FCA5A5}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:14px; white-space:nowrap}

/* Баннер статуса заказа после оплаты */
.acc-banner{
  display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:18px;
  border-radius:14px; font-size:14px; line-height:1.5;
  background:rgba(var(--primary2-rgb),.08); border:1px solid rgba(var(--primary2-rgb),.35);
}
.acc-banner.is-warn{background:rgba(var(--warn-rgb),.08); border-color:rgba(var(--warn-rgb),.35)}
.acc-banner-close{margin-left:auto; background:none; border:0; color:var(--muted); cursor:pointer; font-size:16px}
.spinner{flex:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.2); border-top-color:var(--primary2); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Вкладки */
.acc-tabs{display:inline-flex; gap:4px; padding:4px; background:var(--panel); border:1px solid var(--stroke); border-radius:14px}
.acc-tab{border:0; cursor:pointer; padding:9px 16px; border-radius:10px; background:transparent; color:var(--muted); font:inherit; font-weight:600; font-size:14px}
.acc-tab:hover{color:var(--text)}
.acc-tab.is-active{background:rgba(var(--primary-rgb),.14); color:var(--text); box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.45)}

.acc-grid{display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start}
.acc-stack{display:flex; flex-direction:column; gap:16px; min-width:0}
.acc-card{padding:20px; min-width:0}
.acc-card:hover{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10)}
.acc-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.acc-card-title{margin:0; font-size:16px; letter-spacing:-.2px}
.acc-hint{font-size:12px; color:var(--muted2); line-height:1.5; margin:8px 0 0}
.acc-muted{color:var(--muted2)}

/* Профиль */
.acc-profile-top{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.acc-email{font-weight:600; word-break:break-all}
.acc-rows{display:flex; flex-direction:column}
.acc-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-top:1px solid rgba(255,255,255,.06); font-size:14px}
.acc-row:first-child{border-top:0}
.acc-row .k{color:var(--muted2)}
.acc-row .v{text-align:right}
.tg-ok{color:var(--primary2)}
.acc-actions{display:flex; flex-direction:column; gap:8px; margin-top:16px}

/* Поля */
.acc-input-mono{font-family:ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.06em}
.acc-inline{display:flex; gap:10px}
.acc-inline .co-input{flex:1; min-width:0}
.acc-msg{font-size:13px; margin:10px 0 0; min-height:18px; line-height:1.5}
.acc-msg.ok{color:var(--ok)}
.acc-msg.bad{color:var(--bad)}

/* Подписки */
.subs{display:flex; flex-direction:column; gap:10px}
.sub{border:1px solid var(--stroke); border-radius:14px; padding:16px; background:rgba(255,255,255,.03)}
.sub.is-main{border-color:rgba(var(--primary-rgb),.40); background:linear-gradient(135deg, rgba(var(--primary-rgb),.08), rgba(var(--primary2-rgb),.05))}
.sub-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.sub-name{font-weight:700; font-size:16px}
.sub-key{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px; cursor:pointer;
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:12px; color:var(--muted2);
  background:none; border:0; padding:0;
}
.sub-key:hover{color:var(--text)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill-ok{color:var(--ok); background:rgba(var(--ok-rgb),.12)}
.pill-warn{color:var(--warn); background:rgba(var(--warn-rgb),.12)}
.pill-idle{color:var(--primary2); background:rgba(var(--primary2-rgb),.12)}
.pill-bad{color:var(--bad); background:rgba(var(--bad-rgb),.12)}
.pill-plain{color:var(--muted); background:var(--panel)}
.pill-plain::before{display:none}

.bar{height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin:14px 0 8px}
.bar > i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--primary), var(--primary2))}
.bar.warn > i{background:linear-gradient(90deg, #F59E0B, var(--warn))}
.sub-meta{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted2); flex-wrap:wrap}
.sub-meta b{color:var(--text); font-weight:600}
.sub-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.06); flex-wrap:wrap}
.hwid{font-size:13px; color:var(--muted2)}
.hwid code{font-family:ui-monospace, Consolas, monospace; color:var(--muted)}
.sub-actions{display:flex; gap:8px; flex-wrap:wrap}

.empty{padding:26px; text-align:center; color:var(--muted2); border:1px dashed var(--stroke); border-radius:14px; font-size:14px; line-height:1.6}
.toggle-link{background:none; border:0; color:var(--muted2); cursor:pointer; font:inherit; font-size:13px; padding:4px 0; margin-top:8px; text-align:left}
.toggle-link:hover{color:var(--text)}

/* Рефералы */
.acc-stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px}
.acc-stat{padding:18px; display:flex; flex-direction:column}
.acc-stat-label{font-size:13px; color:var(--muted2)}
.acc-stat-value{font-size:26px; font-weight:800; letter-spacing:-.6px; margin-top:6px}
.acc-stat-sub{font-size:12px; color:var(--muted2); margin-top:4px}
.acc-stat .btn{margin-top:12px}
.grad-text{background:linear-gradient(135deg, var(--primary), var(--primary2)); -webkit-background-clip:text; background-clip:text; color:transparent}

.ref-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.code-box{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:14px; background:rgba(0,0,0,.25); border:1px solid var(--stroke)}
.code-big{font-size:26px; font-weight:800; letter-spacing:.08em; font-family:ui-monospace, Consolas, monospace; word-break:break-all}
.link-text{font-family:ui-monospace, Consolas, monospace; font-size:14px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.perk{display:flex; gap:10px; margin-top:14px; font-size:13px; color:var(--muted); line-height:1.5}
.perk b{color:var(--text)}
.perk-dot{flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:700; background:rgba(var(--primary2-rgb),.14); color:var(--primary2)}

.levels{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.level{padding:14px; border-radius:14px; border:1px solid var(--stroke); background:rgba(255,255,255,.03); position:relative}
.level.is-done{opacity:.6}
.level.is-current{border-color:rgba(var(--primary-rgb),.55); background:rgba(var(--primary-rgb),.10)}
.level-name{font-size:13px; color:var(--muted)}
.level-rate{font-size:24px; font-weight:800; letter-spacing:-.5px; margin:4px 0}
.level-req{font-size:12px; color:var(--muted2)}
.level-tag{position:absolute; top:12px; right:12px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:linear-gradient(135deg, var(--primary), var(--primary2)); color:#071018}
.level-progress{margin-top:16px}

.funnel{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:14px}
.funnel div{padding:12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06)}
.funnel b{display:block; font-size:20px; letter-spacing:-.3px}
.funnel span{font-size:12px; color:var(--muted2)}

.hist-wrap{overflow-x:auto}
.hist{width:100%; border-collapse:collapse; font-size:14px}
.hist th{text-align:left; font-weight:500; font-size:12px; color:var(--muted2); padding:0 10px 10px; border-bottom:1px solid var(--stroke)}
.hist td{padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle}
.hist tr:last-child td{border-bottom:0}
.hist .amt{text-align:right; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.hist .reason{display:block; font-size:12px; color:var(--muted2); margin-top:2px}
.plus{color:var(--ok)}
.chips{display:flex; gap:6px}
.chip{border:1px solid var(--stroke); background:transparent; color:var(--muted); padding:6px 11px; border-radius:999px; cursor:pointer; font:inherit; font-size:12px}
.chip.is-on{background:var(--panel-2); color:var(--text)}

/* Вход */
.acc-login-wrap{display:grid; place-items:center; padding:20px 0}
.acc-login{width:min(420px, 100%); padding:28px}
.acc-login h1{margin:0 0 6px; font-size:24px; letter-spacing:-.4px}
.acc-login p{margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.55}
.acc-login .btn-block{width:100%; min-height:46px}
.otp{display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-bottom:14px}
.otp input{
  width:100%; height:54px; text-align:center; font:inherit; font-size:22px; font-weight:700;
  color:var(--text); background:var(--panel); border:1px solid var(--stroke); border-radius:12px;
}
.otp input:focus{outline:none; border-color:rgba(var(--primary-rgb),.7); background:var(--panel-2)}
.divider{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted2); font-size:12px}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--stroke)}
.tg-widget{display:flex; justify-content:center; min-height:40px}
.acc-login-foot{margin-top:16px; font-size:12px; color:var(--muted2); text-align:center; line-height:1.6}
.link-btn{background:none; border:0; padding:0; color:var(--primary2); cursor:pointer; font:inherit; font-size:13px}
.link-btn:disabled{color:var(--muted2); cursor:default}

/* Формы входа / регистрации / восстановления */
.acc-auth-tabs{display:flex; width:100%; margin-bottom:20px}
.acc-auth-tabs .acc-tab{flex:1}
.acc-form{display:flex; flex-direction:column; gap:14px}
.acc-form h1{margin:0}
.acc-form p{margin:0}
.acc-form .acc-msg{margin:0; min-height:0}
.acc-form .acc-msg:empty{display:none}
.acc-form .otp{margin-bottom:0}
.acc-form .acc-login-foot{margin-top:2px}
.acc-form .co-agree-text{font-size:12px}

/* Безопасность */
.acc-sec-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid rgba(255,255,255,.06)}
.acc-sec-item:first-of-type{border-top:0; padding-top:0}
.acc-sec-item b{display:block; font-size:14px; font-weight:600}
.acc-sec-item .acc-muted{display:block; font-size:12px; margin-top:2px}
.acc-sec-form{display:flex; flex-direction:column; gap:10px; padding:4px 0 14px}
.acc-sec-form > div{display:flex; flex-direction:column; gap:10px}
.acc-sec-form .btn{align-self:flex-start}
.acc-notice{
  padding:12px 14px; margin:0 0 12px; border-radius:12px; font-size:13px; line-height:1.55;
  background:rgba(var(--primary2-rgb),.08); border:1px solid rgba(var(--primary2-rgb),.30);
}
.acc-notice.is-warn{background:rgba(var(--warn-rgb),.08); border-color:rgba(var(--warn-rgb),.32); margin:12px 0 0}
.acc-notice .link-btn{font-size:13px}
.hw-left{font-size:12px; color:var(--muted2); margin-left:6px}

/* Компактные модалки кабинета (поверх .modal из styles.css) */
.modal-card.acc-modal{width:min(480px,100%)}
.acc-modal .modal-body{display:flex; flex-direction:column; gap:16px; padding:22px}
.acc-modal .modal-foot{justify-content:flex-end; gap:10px}
.acc-modal .co-options-pay{grid-template-columns:repeat(3, minmax(0,1fr))}
.acc-summary{padding:14px; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid var(--stroke)}
.acc-summary .acc-row{padding:6px 0; border:0; font-size:13px}
.amount-row{display:flex; gap:8px}
.amount-row .co-input{flex:1}

/* Тост */
.toast{
  position:fixed; top:76px; left:50%; transform:translate(-50%, -10px); z-index:95; opacity:0; pointer-events:none;
  padding:11px 16px; border-radius:12px; font-size:14px; max-width:calc(100% - 32px); text-align:center;
  background:rgba(20,24,40,.97); border:1px solid rgba(var(--primary2-rgb),.45); box-shadow:var(--shadow);
  transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translate(-50%, 0)}
.toast.is-bad{border-color:rgba(var(--bad-rgb),.55)}

@media (max-width:980px){
  .acc-grid{grid-template-columns:1fr}
  .acc-stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ref-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .acc-page{padding-top:22px}
  .acc-title{font-size:23px}
  .acc-tabs{width:100%}
  .acc-tab{flex:1; padding:9px 8px}
  .acc-stats{gap:10px}
  .acc-stat{padding:14px}
  .acc-stat-value{font-size:21px}
  .levels{grid-template-columns:1fr}
  .acc-inline{flex-direction:column}
  .user-chip .user-email{display:none}
  .acc-card{padding:16px}
  .code-big{font-size:22px}
  .hist .hide-sm{display:none}
  .acc-modal .co-options-pay{grid-template-columns:1fr 1fr}
}