/* ============================================================
   VAEL — auth modal + account popup + nav user chip
   Mecha-plate card (chamfered frame-clip, duotone lit edge)
   over a dimmed, blurred landing.
   ============================================================ */

/* ---------- overlay ---------- */
.auth-overlay{
  position:fixed; inset:0; z-index:220;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(4,6,10,.6);
  backdrop-filter:blur(7px) saturate(.9);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.auth-overlay.open{ opacity:1; pointer-events:auto; }

/* ---------- card (same plate language as .card/.tier) ---------- */
.auth-card{
  position:relative; isolation:isolate; width:100%;
  --fill:#0d1015;
  background:linear-gradient(135deg, rgba(255,88,0,.65), rgba(255,255,255,.18) 42%, rgba(11,53,241,.6));
  clip-path:var(--frame-clip);
  padding:34px 34px 36px;
  color:var(--ink,#f4f6f9);
  transform:translateY(16px) scale(.97);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.auth-wrap{
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(255,88,0,.12));
  width:min(430px,100%);
  transition:width .32s cubic-bezier(.22,1,.36,1);
}
/* личный кабинет — заметно шире (3 тарифа в ряд) */
.auth-overlay[data-view="account"] .auth-wrap{ width:min(900px,100%); }
.auth-overlay[data-view="early"] .auth-wrap{ width:min(470px,100%); }
.auth-overlay.open .auth-card{ transform:none; }
.auth-card::before{ content:""; position:absolute; inset:1.5px; z-index:-1; background:var(--fill); clip-path:var(--frame-clip); }

/* close */
.auth-close{
  position:absolute; top:14px; right:14px; z-index:5;
  width:34px; height:34px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-2,rgba(255,255,255,.2)); border-radius:var(--r,3px);
  color:var(--ink-2,#aab4c1); cursor:pointer;
  transition:color .2s, border-color .2s, transform .2s;
}
.auth-close:hover{ color:#fff; border-color:var(--orange,#ff5800); transform:rotate(90deg); }
.auth-close svg{ width:14px; height:14px; display:block; }

/* head */
.auth-head{ display:flex; align-items:center; gap:11px; margin-bottom:24px; }
.auth-head .mark{ width:30px; height:30px; flex:0 0 auto; }
.auth-head .mark svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.auth-head .kicker{ font-size:11.5px; }

/* ---------- tabs ---------- */
.auth-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line,rgba(255,255,255,.1)); border-radius:var(--r,3px);
  background:rgba(255,255,255,.03); padding:3px; margin-bottom:24px;
}
.auth-tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted,#6c7682); padding:10px 8px; border-radius:2px;
  transition:color .18s, background .18s, box-shadow .18s;
}
.auth-tab:hover{ color:var(--ink-2,#aab4c1); }
.auth-tab.on{
  color:#fff; background:var(--orange,#ff5800);
  box-shadow:0 8px 22px -8px var(--glow,rgba(255,88,0,.5)), inset 0 1px 0 rgba(255,255,255,.28);
}
.auth-tab:disabled{ cursor:default; opacity:.55; }
.auth-tab.on:disabled{ opacity:1; }

/* ---------- form ---------- */
.auth-form{ display:flex; flex-direction:column; gap:16px; }
.auth-field{ display:flex; flex-direction:column; gap:7px; }
.auth-field span{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted,#6c7682);
}
.auth-field input{
  height:48px; padding:0 15px; width:100%;
  font-family:var(--sans); font-size:15px; color:var(--ink,#f4f6f9);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-2,rgba(255,255,255,.2)); border-radius:var(--r,3px);
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s, opacity .2s;
}
.auth-field input::placeholder{ color:var(--muted,#6c7682); opacity:.7; }
.auth-field input:focus{
  border-color:var(--orange,#ff5800);
  box-shadow:0 0 0 1px var(--orange,#ff5800), 0 10px 30px -16px var(--glow,rgba(255,88,0,.5));
  background:rgba(255,255,255,.06);
}
.auth-field input:disabled{ opacity:.5; }

.auth-submit{ width:100%; justify-content:center; margin-top:6px; position:relative; }
.auth-submit:disabled{ cursor:default; pointer-events:none; }

/* login / signup error line */
.auth-err{
  display:none; font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.04em; color:#ff5f54; margin:-4px 0 0; line-height:1.4;
}
.auth-card.auth-error .auth-err{ display:block; }
/* neutral note (e.g. "you have an invite — sign in to activate") */
.auth-card.auth-note .auth-err{ display:block; color:var(--muted,#8A95A6); }

/* submit label swaps with tab */
.auth-submit .lab-signup{ display:none; }
.auth-card[data-tab="signup"] .auth-submit .lab-login{ display:none; }
.auth-card[data-tab="signup"] .auth-submit .lab-signup{ display:inline; }

/* fields shown only on the signup tab (e.g. optional Telegram) */
.auth-field.signup-only{ display:none; }
.auth-card[data-tab="signup"] .auth-field.signup-only{ display:flex; }

/* spinner */
.auth-spin{
  width:17px; height:17px; flex:0 0 auto; display:none;
  border:2.4px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:authSpin .7s linear infinite;
}
@keyframes authSpin{ to{ transform:rotate(360deg); } }
.auth-card.loading .auth-spin{ display:inline-block; }
.auth-card.loading .auth-submit{ opacity:.92; }

/* ---------- views ---------- */
.auth-view{ display:none; }
.auth-card[data-view="form"] .auth-view.v-form{ display:block; }
.auth-card[data-view="account"] .auth-view.v-account{ display:flex; flex-direction:column; animation:authIn .3s ease both; }
.auth-card[data-view="early"] .auth-view.v-early{ display:block; animation:authIn .3s ease both; }
@keyframes authIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- account (личный кабинет) ---------- */
.acc-id{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.acc-ava{
  width:52px; height:52px; flex:0 0 auto; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:24px; color:#fff;
  background:linear-gradient(145deg, var(--orange-hi,#ff7a33), var(--orange-dk,#d44900));
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow:0 12px 30px -12px var(--glow,rgba(255,88,0,.5));
}
.acc-name{ font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:.01em; line-height:1.15; }
.acc-mail{ font-family:var(--mono); font-size:12px; color:var(--muted,#6c7682); letter-spacing:.04em; margin-top:3px; }

.acc-panel{
  border:1px solid var(--line,rgba(255,255,255,.1)); border-radius:var(--r,3px);
  background:rgba(255,255,255,.03); padding:18px 20px 20px;
}
.acc-panel + .acc-panel{ margin-top:12px; }
.acc-panel .k,
.acc-row .k{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted,#6c7682);
}
.acc-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.acc-row .v{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ink,#f4f6f9); }

/* sub head: ПОДПИСКА + статус */
.acc-sub-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sub-state{ display:none; }
.sub-state.s-none{
  font-family:var(--mono); font-size:12px; color:var(--muted,#6c7682); letter-spacing:.04em;
}
.sub-state.s-active{ align-items:center; gap:12px; }
.acc-live{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange,#ff5800);
}
.acc-live i{ width:6px; height:6px; border-radius:50%; background:var(--orange,#ff5800); box-shadow:0 0 8px var(--glow,rgba(255,88,0,.5)); animation:pulseDot 1.6s infinite; }
.acc-badge{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--orange,#ff5800); padding:4px 10px; border-radius:2px;
  box-shadow:0 6px 18px -6px var(--glow,rgba(255,88,0,.5));
}
.acc-badge .pl{ display:none; }

/* state visibility, driven by data-plan on the card */
.sub-none, .sub-early, .sub-limited{ display:none; }
.auth-card[data-plan="none"]  .sub-state.s-none{ display:inline; }
.auth-card[data-plan="none"]  .sub-none{ display:block; }
.auth-card[data-plan="early"] .sub-state.s-active,
.auth-card[data-plan="trial"] .sub-state.s-active,
.auth-card[data-plan="light"] .sub-state.s-active,
.auth-card[data-plan="pro"]   .sub-state.s-active{ display:inline-flex; }
.auth-card[data-plan="early"] .sub-early{ display:flex; flex-direction:column; gap:11px; margin-top:16px; }
.auth-card[data-plan="trial"] .sub-limited,
.auth-card[data-plan="light"] .sub-limited,
.auth-card[data-plan="pro"]   .sub-limited{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.auth-card[data-plan="light"] .acc-badge .pl-light{ display:inline; }
.auth-card[data-plan="pro"]   .acc-badge .pl-pro{ display:inline; }
.auth-card[data-plan="trial"] .acc-badge .pl-trial{ display:inline; }
.auth-card[data-plan="early"] .acc-badge .pl-early{ display:inline; }
/* trial never refills → the period-reset row is meaningless, hide it */
.auth-card[data-plan="trial"] .sub-limited .reset-row{ display:none; }

/* tariffs inside the cabinet (no subscription) — 3 across, wrap when narrow */
.acc-tiers{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-top:16px; }
.acc-tier{
  position:relative; display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--line-2,rgba(255,255,255,.2)); border-radius:var(--r,3px);
  background:rgba(255,255,255,.025); padding:18px 18px 18px;
}
.acc-tier.hot{ border-color:var(--orange,#ff5800); box-shadow:0 18px 44px -26px var(--glow,rgba(255,88,0,.5)); }
.acc-tier .pname{
  font-family:var(--mono); font-weight:800; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange,#ff5800);
}
.acc-tier .aprice{ font-family:var(--display); font-weight:800; font-size:24px; line-height:1; }
.acc-tier .aprice span{ font-family:var(--mono); font-size:12px; font-weight:400; color:var(--muted,#6c7682); }
.acc-tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.acc-tier li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2,#aab4c1); }
.acc-tier li svg{ width:14px; height:14px; flex:0 0 auto; color:var(--orange,#ff5800); }
.acc-tier .btn{ --bh:42px; width:100%; justify-content:center; margin-top:auto; }
.acc-save{
  position:absolute; top:-9px; right:12px;
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--orange,#ff5800); padding:3px 8px; border-radius:2px;
}

/* usage bar (limited plans) */
.acc-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.acc-bar i{
  display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--orange-dk,#d44900), var(--orange,#ff5800), var(--orange-hi,#ff7a33));
  box-shadow:0 0 12px var(--glow,rgba(255,88,0,.5));
  transition:width .4s ease, background .3s, box-shadow .3s;
}
.acc-bar i.warn{ background:linear-gradient(90deg, #c77f00, #ffb000, #ffd166); box-shadow:0 0 12px rgba(255,176,0,.55); }
.acc-bar i.full{ background:linear-gradient(90deg, #b3231a, #ff3b30, #ff6f61); box-shadow:0 0 12px rgba(255,59,48,.55); }
#accUsage.warn{ color:#ffb000; }
#accUsage.full{ color:#ff5f54; }

/* unlimited (early access) — full bar, flowing, never warns */
.acc-bar-unlim i{
  width:100%;
  background:linear-gradient(90deg, var(--orange-dk,#d44900), var(--orange,#ff5800), var(--orange-hi,#ff7a33), var(--orange,#ff5800), var(--orange-dk,#d44900));
  background-size:200% 100%;
  animation:accFlow 2.6s linear infinite;
}
@keyframes accFlow{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .acc-bar-unlim i{ animation:none; } }

.acc-limited-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.acc-limited-foot .acc-row{ flex:1 1 auto; justify-content:flex-start; gap:14px; }
.acc-upgrade{ --bh:38px; display:none; font-size:12px; padding:0 16px; }
.auth-card[data-plan="light"] .acc-upgrade,
.auth-card[data-plan="trial"] .acc-upgrade{ display:inline-flex; }

/* ---------- referral panel ---------- */

/* semantic groups: tight internal spacing, hairline dividers between groups */
.acc-ref-group{
  padding-top:18px; margin-top:18px;
  border-top:1px solid var(--line,rgba(255,255,255,.1));
}
.acc-ref-group:first-of-type{
  border-top:0; padding-top:0; margin-top:14px;
}

/* hint: sentence-case recessed helper text (replaces acc-ref-note in new markup) */
.acc-ref-hint{
  margin:8px 0 0; font-size:13px; line-height:1.5;
  color:var(--muted,#6c7682); font-family:var(--sans);
}

/* referrals header: section title (left) + earned total (right) */
.acc-ref-refhead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:10px;
}
.acc-ref-refhead .acc-ref-grouptitle{ margin-bottom:0; }
.acc-ref-earned{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.acc-ref-earned-k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted,#6c7682);
}
.acc-ref-earned-v{
  font-family:var(--mono); font-size:20px; font-weight:500;
  color:var(--orange-hi,#ff7a33); font-variant-numeric:tabular-nums;
}
/* below-minimum hint: shown only while 0 < earned < $50 */
.acc-ref-note{ margin:0 0 12px; font-size:12px; color:#ffb000; text-align:right; }
.acc-ref-note b{ font-weight:500; font-variant-numeric:tabular-nums; }

/* payout row: field + button aligned at bottom */
.acc-ref-payout{ display:flex; gap:8px; align-items:flex-end; }

/* table sub-heading inside group */
.acc-ref-grouptitle{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted,#6c7682); margin-bottom:10px;
}

/* legacy note class kept in case of external references */
.acc-ref-note{
  font-family:var(--mono); font-size:12px; color:var(--muted,#6c7682);
  margin:8px 0 0; letter-spacing:.03em;
}
.acc-ref-table-wrap{ overflow-x:auto; }
.acc-ref-table{
  width:100%; border-collapse:collapse;
  font-family:var(--mono); font-size:12px;
}
.acc-ref-table th{
  text-align:left; padding:6px 10px 6px 0;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted,#6c7682); border-bottom:1px solid var(--line,rgba(255,255,255,.1));
}
.acc-ref-table td{
  padding:7px 10px 7px 0; color:var(--ink-2,#aab4c1);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.acc-ref-table tr:last-child td{ border-bottom:0; }
.acc-ref-empty{
  font-family:var(--mono); font-size:12px; color:var(--muted,#6c7682);
  margin:10px 0 0; letter-spacing:.03em;
}

/* ---------- admin payouts mini-CRM ---------- */
.acc-admin-pill{
  display:inline-block; padding:2px 8px; border-radius:2px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.acc-admin-pill.ready{ color:#fff; background:var(--orange,#ff5800); }
.acc-admin-pill.hold{ color:#ffb000; background:rgba(255,176,0,.13); }
.acc-admin-pill.below_min{ color:var(--muted,#6c7682); background:rgba(255,255,255,.07); }
.acc-admin-pill.paid{ color:var(--ink-2,#aab4c1); background:rgba(255,255,255,.05); }
.acc-admin-mark{ --bh:30px; font-size:11.5px; padding:0 12px; white-space:nowrap; }

/* header: title + month picker */
.acc-pay-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }
.acc-pay-title{ font-size:15px; font-weight:500; color:var(--ink,#f4f6f9); }
.acc-pay-sub{ font-size:12px; color:var(--muted,#6c7682); margin-top:2px; }

/* month picker: ‹ select › */
.acc-month-picker{ display:flex; align-items:center; gap:2px; border:1px solid rgba(255,255,255,.12); border-radius:6px; overflow:hidden; }
.acc-month-nav{
  appearance:none; background:transparent; border:none; color:var(--ink-2,#aab4c1);
  padding:7px 11px; cursor:pointer; font-size:15px; line-height:1; transition:color .15s, background .15s;
}
.acc-month-nav:hover{ color:#fff; background:rgba(255,255,255,.06); }
.acc-month-select{
  appearance:none; background:transparent; border:none;
  border-left:1px solid rgba(255,255,255,.1); border-right:1px solid rgba(255,255,255,.1);
  color:var(--ink,#f4f6f9); font-family:var(--mono); font-size:13px; font-weight:500;
  padding:6px 12px; cursor:pointer; text-align:center;
}
.acc-month-select:focus{ outline:none; }
.acc-month-select option{ background:#11151c; color:var(--ink,#f4f6f9); }

/* summary tiles */
.acc-pay-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.acc-pay-tile{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:8px;
  padding:12px 13px; display:flex; flex-direction:column; gap:5px;
}
.acc-pay-tile.accent{ background:rgba(255,88,0,.08); border-color:rgba(255,88,0,.25); }
.acc-pay-tile-k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#6c7682);
}
.acc-pay-tile-v{ font-family:var(--mono); font-size:20px; font-weight:500; color:var(--ink,#f4f6f9); }
.acc-pay-tile.accent .acc-pay-tile-v{ color:var(--orange-hi,#ff7a33); }
.acc-pay-tile.warn .acc-pay-tile-v{ color:#ffb000; }
.acc-pay-tile.danger .acc-pay-tile-v{ color:#ff5f54; }

/* table cells */
.acc-pay-table td{ vertical-align:middle; }
.acc-pay-table td.num, .acc-pay-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.acc-pay-tile-v{ font-variant-numeric:tabular-nums; }
.acc-pay-status{ white-space:nowrap; }
.acc-pay-partner{ display:flex; align-items:center; gap:10px; }
.acc-pay-ava{
  width:30px; height:30px; flex:0 0 auto; border-radius:50%;
  background:rgba(255,88,0,.16); color:var(--orange-hi,#ff7a33);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.acc-pay-id{ display:flex; flex-direction:column; min-width:0; }
.acc-pay-mail{ color:var(--ink-2,#e8edf2); }
.acc-pay-role{ font-size:10.5px; color:var(--muted,#6c7682); text-transform:none; letter-spacing:0; }
.acc-pay-table tr.is-paid{ opacity:.55; }

@media (max-width:680px){
  .acc-pay-tiles{ grid-template-columns:repeat(2,1fr); }
}

/* app block */
.acc-app{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.acc-app-sub{ font-family:var(--mono); font-size:12px; color:var(--ink-2,#aab4c1); letter-spacing:.06em; margin-top:7px; }
.acc-app .btn{ --bh:44px; flex:0 0 auto; }

.acc-logout{ --bh:44px; justify-content:center; }

/* ---------- early access view ---------- */
.auth-back{
  appearance:none; background:transparent; border:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted,#6c7682); transition:color .18s;
}
.auth-back:hover{ color:var(--orange,#ff5800); }
.auth-back svg{ width:12px; height:12px; }
.early-title{ font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:.005em; }
.early-sub{ font-size:14.5px; line-height:1.55; color:var(--ink-2,#aab4c1); margin:10px 0 22px; text-wrap:pretty; }
.early-err{
  display:none; font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.06em; color:#ff5f54; margin:-6px 0 0;
}
.auth-card.code-error .early-err{ display:block; }
.auth-card.code-error #earlyCode{ border-color:#ff3b30; box-shadow:0 0 0 1px #ff3b30; }

/* ---------- nav user chip ---------- */
.nav-actions [hidden]{ display:none !important; }
.nav-user{
  appearance:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  height:42px; padding:0 16px 0 7px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-2,rgba(255,255,255,.2)); border-radius:var(--r,3px);
  color:var(--ink,#f4f6f9);
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.06em;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.nav-user:hover{
  border-color:var(--orange,#ff5800);
  box-shadow:0 0 0 1px var(--orange,#ff5800), 0 14px 36px -16px var(--glow,rgba(255,88,0,.5));
  transform:translateY(-1px);
}
.nav-user .nav-user-ava{
  width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto;
  font-family:var(--display); font-weight:800; font-size:14px; color:#fff;
  background:linear-gradient(145deg, var(--orange-hi,#ff7a33), var(--orange-dk,#d44900));
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.nav-user[hidden]{ display:none; }

@media (max-width:560px){
  .auth-card{ padding:28px 22px 30px; }
  .acc-tiers{ grid-template-columns:1fr; }
  .acc-app{ flex-direction:column; align-items:stretch; }
  .acc-app .btn{ width:100%; justify-content:center; }
}

/* ---------- account sidebar layout ---------- */
.v-account{ max-height:calc(min(900px,90vh) - 80px); } /* bounded so flex scroll works */
.acc-layout{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:0;
  margin-top:16px;
}

/* left sidebar nav */
.acc-sidebar{
  display:flex;
  flex-direction:column;
  padding-right:12px;
  border-right:1px solid var(--line,rgba(255,255,255,.1));
}
.acc-sidebar-nav{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.acc-sidebar-foot{
  padding-top:8px;
}

.acc-nav-item{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  padding:9px 12px;
  border-radius:var(--r,3px);
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--ink-2,#aab4c1);
  transition:color .18s, background .18s;
  white-space:normal;
  line-height:1.35;
}
.acc-nav-item:hover{ color:var(--ink,#f4f6f9); background:var(--panel,rgba(255,255,255,.05)); }
.acc-nav-item.active{
  color:var(--orange,#ff5800);
  font-weight:700;
  background:rgba(255,88,0,.1);
}
.acc-nav-item[hidden]{ display:none; }

/* logout button lives in .acc-sidebar-foot */
.acc-sidebar-foot .acc-logout{
  width:100%;
  justify-content:center;
  --bh:38px;
  font-size:12px;
}

/* right content pane — scrollable */
.acc-content{
  padding-left:20px;
  max-height:60vh;
  overflow-y:auto;
}
.acc-content .acc-panel + .acc-panel{ margin-top:12px; }

/* pane visibility */
.acc-pane[hidden]{ display:none; }

/* ---------- copy button beside a link field (mirrors the "Сохранить" row) ---------- */
.acc-ref-copyrow{ display:flex; gap:8px; align-items:center; }
.acc-ref-copyrow input{ flex:1 1 auto; min-width:0; }
.acc-ref-copyrow .btn{ flex:0 0 auto; }

/* ---------- responsive: stack at narrow widths ---------- */
@media (max-width:680px){
  .v-account{ max-height:none; overflow:hidden; }
  .auth-card{ overflow:hidden; max-height:90vh; }
  .acc-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    overflow:hidden;
  }
  .acc-sidebar{
    flex-direction:row;
    flex-wrap:wrap;
    padding-right:0;
    padding-bottom:10px;
    border-right:0;
    border-bottom:1px solid var(--line,rgba(255,255,255,.1));
    gap:4px;
  }
  .acc-sidebar-nav{
    flex-direction:row;
    flex-wrap:wrap;
    gap:4px;
  }
  .acc-sidebar-foot{
    margin-left:auto;
    padding-top:0;
  }
  .acc-sidebar-foot .acc-logout{
    width:auto;
  }
  .acc-content{
    padding-left:0;
    padding-top:14px;
  }
}