/* Кабинет, блок 5.2: счётчик бесплатных чертежей, меню аккаунта внизу списка, окно «Настройки» как в Claude,
   плашка «бесплатные на сегодня закончились», страница «Условия использования».
   Те же токены, что в site.css (светлая тема; тёмной нет). Строгий CSP: стилей в HTML нет, всё здесь. */

/* ---------- счётчик под «Новый чертёж» и под полем загрузки ---------- */
.side__quota { display: flex; align-items: center; gap: 8px; margin: -6px 12px 12px; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; color: var(--muted); text-decoration: none; }
.side__quota::before, .composer__quota::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.side__quota:hover { background: var(--hover); color: var(--ink); }
.side__quota.is-out, .composer__quota.is-out { color: var(--accent); }
.side__quota.is-out::before, .composer__quota.is-out::before { background: var(--accent); }
.composer__quota { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--muted); text-decoration: none; }
.composer__quota:hover { color: var(--ink); text-decoration: underline; }

/* ---------- бесплатные на сегодня закончились ---------- */
.quota-out { width: 100%; max-width: 680px; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border: 1px solid #EED3C6; border-radius: 14px; background: var(--accent-soft); color: var(--ink); text-align: left; }
.quota-out svg { width: 24px; height: 24px; flex: none; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.quota-out p { font-size: 15.5px; }
.quota-out b { font-weight: 600; }
.quota-out [data-countdown-text] { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.composer.is-off { box-shadow: none; }
.composer.is-off .drop { cursor: not-allowed; opacity: .5; background: none; border-color: #D9D4C7; }
.composer.is-off .drop:hover { background: none; border-color: #D9D4C7; }

/* ---------- строка аккаунта и меню над ней (как в Claude) ---------- */
.acct { position: relative; padding: 8px; border-top: 1px solid var(--line); }
.acct__btn { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: 10px;
  cursor: pointer; list-style: none; user-select: none; }
.acct__btn::-webkit-details-marker { display: none; }
.acct__btn::marker { content: ""; }
.acct__btn:hover, .acct[open] > .acct__btn { background: var(--hover); }
.acct__who { flex: 1; min-width: 0; font-size: 14px; }
.acct__who b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acct__menu { position: absolute; left: 8px; right: 8px; bottom: calc(100% - 2px); z-index: 25; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(31, 30, 27, .06), 0 12px 32px rgba(31, 30, 27, .14); }
.acct__mail { padding: 8px 10px 6px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--ink); font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.acct__item:hover, .acct__item:focus-visible { background: var(--hover); }
.acct__item:focus-visible { outline-offset: -2px; }
.acct__item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acct__two { display: flex; flex-direction: column; line-height: 1.25; }
.acct__two small { font-size: 12.5px; color: var(--muted); }
.acct__sep { height: 1px; margin: 6px 4px; border: 0; background: var(--line); }
.acct form { margin: 0; }
.avatar--lg { width: 44px; height: 44px; font-size: 18px; }

/* ---------- «Настройки»: окно поверх страницы и страница без JS ---------- */
.stg { display: flex; flex-direction: column; color: var(--ink); background: var(--surface); }
dialog.stg { width: min(880px, calc(100vw - 48px)); height: min(620px, calc(100svh - 48px)); max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: 18px; box-shadow: 0 10px 48px rgba(31, 30, 27, .28); }
dialog.stg:not([open]) { display: none; }
dialog.stg::backdrop { background: rgba(31, 30, 27, .45); }
.stg--page { flex: 1; min-height: 520px; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.stg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 6px 26px; }
.stg__title { font-size: 26px; }
.stg__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.stg__nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 18px 16px; }
.stg__tab { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 10px; color: var(--ink-2);
  text-decoration: none; font-size: 15px; }
.stg__tab:hover { background: var(--hover); color: var(--ink); }
.stg__tab[aria-selected="true"] { background: var(--side); color: var(--ink); font-weight: 500; }
.stg__panels { overflow: auto; padding: 14px 30px 30px 22px; overscroll-behavior: contain; }
.stg__panel:focus { outline: none; }
.stg__h { font-size: 19px; font-weight: 600; margin-bottom: 14px; }
.stg__h4 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
.stg__p { color: var(--ink-2); font-size: 15px; }
.stg__p + .stg__p { margin-top: 8px; }
.stg__text { min-width: 0; flex: 1; }
.stg__text b { display: block; font-weight: 500; }
.stg__text small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.stg__mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stg__me { display: flex; align-items: center; gap: 14px; padding: 4px 0 18px; }
.stg__line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.stg__line form { margin: 0; }
.stg__danger { color: var(--danger); border-color: #EBC9C2; }
.stg__danger:hover { background: var(--danger-soft); }
.stg__list { padding-left: 20px; color: var(--ink-2); font-size: 15px; display: grid; gap: 4px; }
.stg__facts { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
.stg__facts li { display: flex; gap: 6px 16px; flex-wrap: wrap; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.stg__facts b { font-weight: 500; }
.stg__facts span { color: var(--ink-2); }
.stg__facts a { color: var(--accent); }
.stg__more { display: inline-block; margin-top: 14px; color: var(--accent); font-size: 15px; }
.stg__docs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.stg__doc { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); text-decoration: none; font-size: 14px; }
.stg__doc:hover { background: var(--hover); }

/* «Использование» — сколько осталось сегодня */
.usage { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.usage__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.usage__num { font-size: 26px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage__num span { font-size: 16px; font-weight: 400; color: var(--muted); }
.usage__bar { display: block; width: 100%; height: 8px; margin: 10px 0 12px; border: 0; border-radius: 4px; background: var(--hover);
  overflow: hidden; -webkit-appearance: none; appearance: none; }
.usage__bar::-webkit-progress-bar { background: var(--hover); border-radius: 4px; }
.usage__bar::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.usage__bar::-moz-progress-bar { background: var(--accent); border-radius: 4px; }
.usage__note { color: var(--ink-2); font-size: 14.5px; }
.usage__note [data-countdown-text] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage.is-out .usage__num { color: var(--accent); }

/* ---------- подвал гостя: «Что мы храним» и «Условия использования» — с промежутком ---------- */
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__links .sg-foot { margin-right: 0; }

/* ---------- «Условия использования» — черновик ---------- */
.draft-note { display: grid; gap: 2px; margin: 4px 0 8px; padding: 12px 16px; border: 1px dashed #D9B9A9; border-radius: 12px;
  background: var(--accent-soft); color: var(--ink-2); font-size: 15px; }
.draft-note b { color: var(--accent); }
.todo { display: inline-block; padding: 0 8px; border: 1px dashed #CFC8B8; border-radius: 6px; background: #F6F3EC; color: var(--muted);
  font-style: italic; font-size: .92em; }
.terms__facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 8px 0 0; color: var(--ink-2); }
.terms__facts dt { color: var(--muted); }
.terms__facts dd { margin: 0; }
.terms__facts a { color: var(--accent); }

/* ---------- телефон: окно — на весь экран, разделы — полоской сверху ---------- */
@media (max-width: 820px) {
  dialog.stg { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
  .stg--page { border: 0; border-radius: 0; box-shadow: none; min-height: 0; margin: -16px -12px -24px; }
  .stg__head { padding: 8px 6px 4px 16px; }
  .stg__title { font-size: 22px; }
  .stg__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .stg__nav { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 6px 12px 12px; border-bottom: 1px solid var(--line); }
  .stg__tab { flex: none; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14.5px; white-space: nowrap; }
  .stg__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .stg__panels { padding: 16px 16px 28px; }
  .stg__line { flex-wrap: wrap; }
  .side__quota { margin-top: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .acct__menu { transition: none; }
}