/* ========================================================================
   CABINET — личный кабинет / профиль (redesign)
   Ported from design_handoff_namtar_pages/redesign/app.css (CABINET + REFERRAL)
   Token map: --bg2→--surface, --panel→--surface, --panel2→--surface-2,
              --ink→--text, --ink-dim→--text-dim, --faint→--muted-deep,
              --crimson→--error, --crimson-dim→--error-dim
   Reused as-is from style.css :root — NOT redefined here:
   --gold, --gold-bright, --gold-deep, --champ, --line, --line-soft,
   --muted, --serif, --serif-sc, --sans, --mono, --success, --success-dim,
   --error, --error-dim
   ======================================================================== */

.cab-layout { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; }

/* левая сводка (sticky) */
.cab-summary {
  position: sticky; top: 24px;
  border: 1px solid var(--line-soft); background: var(--surface);
  padding: 32px 28px; text-align: center;
}
.cab-summary .ava-lg {
  width: 84px; height: 84px; margin: 0 auto 18px; border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--surface-2), var(--bg-void, #0a090c));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 38px; color: var(--champ);
}
.cab-summary .nm { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.cab-summary .em {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--muted); margin-top: 6px; word-break: break-all;
}
.cab-summary .credits {
  margin: 26px 0; padding: 24px 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.cab-summary .credits .big { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--gold-bright); }
.cab-summary .credits .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-top: 8px;
}
.cab-summary .topup { width: 100%; justify-content: center; margin-top: 4px; }
.cab-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; text-align: left; }
.cab-nav a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); padding: 11px 12px; transition: .2s;
  display: flex; justify-content: space-between; align-items: center;
}
.cab-nav a:hover { color: var(--gold-bright); background: var(--surface-2); }
.cab-nav a .arr { color: var(--muted-deep); }

/* контент */
.cab-content { display: flex; flex-direction: column; gap: 64px; min-width: 0; }
.cab-section { scroll-margin-top: 24px; }
.cab-section > .sec-label { margin-bottom: 24px; }
.cab-section h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.5vw, 42px);
  margin-bottom: 26px; line-height: 1;
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cab-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* пакеты пополнения */
.pkg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
}
.pkg-grid .pkg { background: var(--bg-void, #0a090c); padding: 28px 24px; text-align: center; transition: .25s; cursor: pointer; position: relative; }
.pkg-grid .pkg:hover { background: var(--surface-2); }
.pkg-grid .pkg.feat { background: var(--surface); }
.pkg-grid .pkg .tag {
  position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--line); padding: 3px 8px;
}
.pkg-grid .pkg .q { font-family: var(--serif); font-size: 40px; color: var(--champ); line-height: 1; }
.pkg-grid .pkg .ql {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 8px 0 18px;
}
.pkg-grid .pkg .pr { font-family: var(--mono); font-size: 15px; color: var(--gold-bright); letter-spacing: .04em; }

/* telegram карточка */
.tg-card {
  display: flex; align-items: center; gap: 22px; border: 1px solid var(--line-soft);
  background: var(--surface); padding: 26px 28px; flex-wrap: wrap;
}
.tg-card .tg-ic {
  width: 46px; height: 46px; flex: none; border-radius: 50%; background: rgba(120,150,210,.12);
  display: flex; align-items: center; justify-content: center; color: #7faae0;
}
.tg-card .tg-ic svg { width: 24px; height: 24px; }
.tg-card .tg-txt { flex: 1; min-width: 200px; }
.tg-card .tg-txt .st {
  display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--success);
}
.tg-card .tg-txt .st .d { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.tg-card .tg-txt h4 { font-family: var(--serif); font-size: 24px; margin: 8px 0 4px; }
.tg-card .tg-txt p { font-size: 14px; color: var(--text-dim); }
.tg-card .tg-txt p b { color: var(--champ); }

/* документы */
.doc-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
}
.doc-row {
  background: var(--bg-void, #0a090c); padding: 22px 24px; display: flex; align-items: center;
  gap: 16px; transition: .2s; width: 100%; text-align: left; border: none; cursor: pointer;
}
.doc-row:hover { background: var(--surface-2); }
.doc-row .ic { width: 20px; height: 20px; color: var(--gold-deep); flex: none; }
.doc-row .nm, .doc-row-label { flex: 1; font-size: 14.5px; color: var(--text-dim); }
.doc-row .arr, .doc-row-arrow { color: var(--muted-deep); transition: .2s; }
.doc-row:hover .arr, .doc-row:hover .doc-row-arrow { color: var(--gold); transform: translateX(3px); }
.doc-row-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--muted);
  border: 1px solid var(--line-soft); padding: 2px 7px; flex: none;
}

/* мета-реквизиты */
.meta-card { border: 1px solid var(--line-soft); background: var(--surface-2); padding: 30px 32px; }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.meta-grid .row {
  display: flex; justify-content: space-between; gap: 18px;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 14px;
}
.meta-grid .row .lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.meta-grid .row .val { font-size: 13.5px; color: var(--text-dim); text-align: right; }
.ph { color: var(--gold-deep); border-bottom: 1px dashed var(--gold-deep); font-family: var(--mono); font-size: .92em; }

/* read-only (view) state for editable profile section */
.cab-section .field input:disabled,
.cab-section .field select:disabled {
  -webkit-text-fill-color: var(--text); color: var(--text); opacity: 1; cursor: default;
  background: transparent; border-color: transparent; padding-left: 0; background-image: none;
  box-shadow: none;
}
.cab-section .field input:disabled:focus,
.cab-section .field select:disabled:focus { box-shadow: none; }

/* danger button */
.btn-danger { border: 1px solid var(--error-dim); background: transparent; color: #d98a82; }
.btn-danger:hover { border-color: var(--error); background: rgba(192,70,61,.08); color: #e89a92; }

/* compact confirm dialog */
.confirm .mbody { text-align: center; padding: 40px 36px 28px; }
.confirm .seal-sm {
  width: 60px; height: 60px; margin: 0 auto 22px; border: 1px solid var(--error-dim); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--error);
  background: radial-gradient(circle, rgba(192,70,61,.1), transparent);
}
.confirm .seal-sm svg { width: 26px; height: 26px; }
.confirm h3 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; }
.confirm p { font-size: 14px; color: var(--text-dim); margin-top: 12px; line-height: 1.6; }
.confirm .mfoot { display: flex; gap: 12px; }
.confirm .mfoot .btn { flex: 1; justify-content: center; }

/* modal scrim (logout confirm) */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100; background: rgba(6,5,8,.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: .3s;
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal-scrim .modal {
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: var(--bg-void, #0a090c); border: 1px solid var(--line); position: relative;
  transform: translateY(16px) scale(.99); transition: .3s;
}
.modal-scrim.open .modal { transform: none; }

/* ═══════════════════════════════════════════════════════════
   REFERRAL  (cabinet section)
   ═══════════════════════════════════════════════════════════ */
.ref-card {
  border: 1px solid var(--line); background: linear-gradient(160deg, var(--surface), var(--bg-void, #0a090c) 88%);
  padding: 34px 36px; position: relative; overflow: hidden;
}
.ref-card::after {
  content: ""; position: absolute; top: -70px; right: -50px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(212,178,90,.10), transparent 70%); pointer-events: none;
}
.ref-head { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; position: relative; z-index: 1; margin-bottom: 28px; }
.ref-head .rl { max-width: 400px; }
.ref-head .rl .t { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.ref-head .rl p { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin-top: 10px; }
.ref-head .rl p b { color: var(--champ); }
.ref-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.ref-stats .s .n { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--gold-bright); }
.ref-stats .s .l { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.ref-link { display: flex; border: 1px solid var(--line-soft); background: var(--bg-void, #0a090c); position: relative; z-index: 1; }
.ref-link input {
  flex: 1; min-width: 0; border: none; background: transparent; color: var(--champ);
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .01em; padding: 0 18px; outline: none;
}
.ref-link button {
  flex: none; border: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; padding: 16px 24px; background: linear-gradient(150deg, var(--gold-bright), var(--gold-deep));
  color: #1a1407; transition: .2s;
}
.ref-link button:hover { filter: brightness(1.07); }
.ref-link button.copied { background: var(--success); color: #06140b; }
.ref-share { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.ref-share a, .ref-share button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--text-dim);
  border: 1px solid var(--line-soft); padding: 9px 16px; transition: .2s; background: transparent; cursor: pointer;
}
.ref-share a:hover, .ref-share button:hover { border-color: var(--line); color: var(--champ); }
.ref-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); margin-top: 30px;
}
.ref-steps .st { background: var(--bg-void, #0a090c); padding: 24px 24px; }
.ref-steps .st .n { font-family: var(--mono); font-size: 11px; color: var(--gold); letter-spacing: .12em; }
.ref-steps .st h4 { font-family: var(--serif); font-size: 21px; margin: 12px 0 8px; font-weight: 500; }
.ref-steps .st p { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .cab-layout { grid-template-columns: 1fr; gap: 40px; }
  .cab-summary { position: static; }
}
@media (max-width: 760px) {
  .ref-stats { gap: 28px; }
}
@media (max-width: 680px) {
  .field-grid, .meta-grid, .doc-list { grid-template-columns: 1fr; }
  .pkg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ref-steps { grid-template-columns: 1fr; }
  .ref-card { padding: 26px 22px; }
}