*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══ Цветовые темы ══════════════════════════════════════════════════════════
   По умолчанию — стандартная (зелёная). Ice переопределяет переменные.
   Dark — через @media, но Ice всегда светлая (нет тёмного варианта).
═══════════════════════════════════════════════════════════════════════════ */

/* ── Standard light (default) ─────────────────── */
:root {
  /* Light — фирменная палитра JustNotes (смягчённая) */
  --bg:           #F5FBF7;
  --bg2:          #EDF5F0;
  --bg3:          #E2EDEA;
  --surface:      #F5FBF7;
  --border:       #CEDAD6;
  --border2:      #8FA8A2;
  --text:         #1E2724;
  --text2:        #4A5552;
  --text3:        #7A8E8A;
  --accent:       #2D8C7A;       /* чуть светлее чем #076B5B */
  --accent-hover: #1F7060;
  --accent-text:  #FFFFFF;
  --accent-dim:   #C8EDE5;       /* мягче чем #A0F2DE */
  --accent-on-dim:#003D32;
  --secondary-bg: #DCF0E8;
  --secondary-fg: #1A3830;
  --danger:       #C0392B;
  --danger-bg:    #FDECEA;
  --success:      #2D8C7A;
  --radius:       12px;
  --radius-sm:    8px;
}

/* ── Standard dark ────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="ice"]):not([data-theme="coffee"]):not([data-theme="red"]) {
    --bg:           #111816;
    --bg2:          #1A2220;
    --bg3:          #222E2B;
    --surface:      #2B3330;
    --border:       #2E3C38;
    --border2:      #4D615C;
    --text:         #E4EDEA;
    --text2:        #A8C0BB;
    --text3:        #6E8A84;
    --accent:       #72C4B0;       /* мягче чем #84D6C2 */
    --accent-hover: #5EB09C;
    --accent-text:  #002118;
    --accent-dim:   #1B4840;       /* тёмный контейнер */
    --accent-on-dim:#A0D9CC;
    --secondary-bg: #1E3530;
    --secondary-fg: #A8C0BB;
    --danger:       #F4A49A;
    --danger-bg:    #4A1010;
    --success:      #72C4B0;
  }
}

/* ── Coffee light ─────────────────────────────── */
[data-theme="coffee"], [data-theme="ice"] {
  --bg:           #F4EBE2;   /* тёплый крем */
  --bg2:          #ECDFD3;
  --bg3:          #E2D2C3;
  --surface:      #F4EBE2;
  --border:       rgba(74,53,40,.15);
  --border2:      rgba(74,53,40,.32);
  --text:         #2C211A;   /* эспрессо */
  --text2:        #5C4A3E;
  --text3:        #8C7565;
  --accent:       #8A5A3C;   /* насыщенный кофе/карамель */
  --accent-hover: #6F4730;
  --accent-text:  #FFFFFF;
  --accent-dim:   #E7D3BF;   /* тёплый латте-контейнер */
  --accent-on-dim:#4A2E1A;
  --secondary-bg: #DCC8B2;
  --secondary-fg: #3A2A1E;
  --danger:       #B3261E;
  --danger-bg:    #F9DEDC;
  --success:      #5F7A52;   /* мягкая зелень для статуса */
  --radius:       12px;
  --radius-sm:    8px;
}

/* ── Coffee dark ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
  [data-theme="coffee"], [data-theme="ice"] {
    --bg:           #1A130E;   /* тёмный эспрессо */
    --bg2:          #241A12;
    --bg3:          #2F2218;
    --surface:      #2F2218;
    --border:       rgba(244,235,226,.12);
    --border2:      rgba(244,235,226,.26);
    --text:         #F0E5DA;   /* крем */
    --text2:        #CBB6A4;
    --text3:        #95806F;
    --accent:       #C99B73;   /* светлая карамель */
    --accent-hover: #D8AC84;
    --accent-text:  #2A1A0E;
    --accent-dim:   #4A3322;   /* тёплый коричневый контейнер */
    --accent-on-dim:#EAD0B8;
    --secondary-bg: #3A2A1C;
    --secondary-fg: #E0CDBA;
    --danger:       #F2B8B5;
    --danger-bg:    #5C1A16;
    --success:      #A8C08F;
  }
}

/* ── Red light ────────────────────────────────── */
[data-theme="red"] {
  --bg:           #FBF4F6;
  --bg2:          #F5E8EC;
  --bg3:          #EFDCE2;
  --surface:      #FBF4F6;
  --border:       #E5CDD5;
  --border2:      #B98A99;
  --text:         #2A1118;
  --text2:        #5A3540;
  --text3:        #8A6571;
  --accent:       #CB2957;
  --accent-hover: #A81E47;
  --accent-text:  #FFFFFF;
  --accent-dim:   #FFD9E0;
  --accent-on-dim:#5A0E25;
  --secondary-bg: #F3DDE3;
  --secondary-fg: #5A0E25;
  --danger:       #C0392B;
  --danger-bg:    #FDECEA;
  --success:      #CB2957;
  --radius:       12px;
  --radius-sm:    8px;
}

/* ── Red dark (AMOLED) ────────────────────────── */
@media (prefers-color-scheme: dark) {
  [data-theme="red"] {
    --bg:           #000000;   /* AMOLED true black */
    --bg2:          #0E0E0E;
    --bg3:          #1A1A1A;
    --surface:      #000000;
    --border:       #2A2A2A;
    --border2:      #4A4A4A;
    --text:         #DDDDDD;
    --text2:        #B0B0B0;
    --text3:        #7A7A7A;
    --accent:       #CB2957;
    --accent-hover: #E0345F;
    --accent-text:  #FFFFFF;
    --accent-dim:   #3A0E1C;
    --accent-on-dim:#FFD9E0;
    --secondary-bg: #2A1018;
    --secondary-fg: #F3C2CD;
    --danger:       #FF6B6B;
    --danger-bg:    #3A0E0E;
    --success:      #CB2957;
  }
}

/* ══ Base ════════════════════════════════════════════════════════════════════ */

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.screen { height: 100dvh; }
.hidden { display: none !important; }

/* ══ Auth ════════════════════════════════════════════════════════════════════ */

#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  box-shadow: 0 4px 24px rgba(7,107,91,.08);
}

.logo {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--accent);
}

.auth-subtitle {
  color: var(--text2);
  margin-top: 4px;
  margin-bottom: 28px;
  font-size: 14px;
}

.tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.tab {
  flex: 1; padding: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: all .15s;
}
.tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 500;
}

#auth-form { display: flex; flex-direction: column; gap: 12px; }

input[type="email"],
input[type="password"],
input[type="text"],
textarea {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
input:focus, textarea:focus { border-color: var(--accent); }

.error { color: var(--danger); font-size: 13px; }

/* ══ Buttons ═════════════════════════════════════════════════════════════════ */

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(.98); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.btn-danger:hover { background: var(--danger-bg); }

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.btn-icon:hover { color: var(--text); background: var(--bg3); }

/* ══ App layout ══════════════════════════════════════════════════════════════ */

#app-screen { display: flex; }

.sidebar {
  width: 220px; min-width: 220px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  gap: 8px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  margin-bottom: 16px;
}

.logo-sm {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

.nav-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.nav-item:hover { background: var(--bg3); color: var(--text); }
.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent-on-dim);
  font-weight: 500;
}

/* ══ Categories ══════════════════════════════════════════════════════════════ */

.cat-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.cat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; margin-bottom: 4px;
}
.cat-label {
  font-size: 11px; font-weight: 600;
  color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px;
}
.cat-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; padding: 7px 12px;
  border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--text2);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: all .15s;
}
.cat-item:hover { background: var(--bg3); color: var(--text); }
.cat-item.active { background: var(--accent-dim); color: var(--accent-on-dim); }
.cat-item .cat-del {
  opacity: 0; font-size: 12px; color: var(--danger);
  padding: 0 2px; background: none; border: none; cursor: pointer;
}
.cat-item:hover .cat-del { opacity: 1; }
.cat-add-form { display: flex; gap: 6px; padding: 6px 8px 0; }
.cat-add-form input { flex: 1; font-size: 13px; padding: 6px 10px; }

/* ══ Note category select ════════════════════════════════════════════════════ */

.note-cat-select {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 7px 10px; font-size: 13px; font-family: inherit;
  outline: none; cursor: pointer; width: 100%;
  transition: border-color .15s;
}
.note-cat-select:focus { border-color: var(--accent); }
.note-cat-select option { background: var(--bg2); }

.sync-status {
  margin-top: auto; font-size: 12px; color: var(--text3); padding: 0 8px;
}
.sync-status.ok { color: var(--success); }
.sync-status.err { color: var(--danger); }

.main-content { flex: 1; overflow-y: auto; padding: 24px; }

/* ══ View header ═════════════════════════════════════════════════════════════ */

.view-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.search-input { flex: 1; max-width: 360px; }

/* ══ Notes grid ══════════════════════════════════════════════════════════════ */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.note-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s, transform .1s, box-shadow .15s;
  min-height: 120px;
  display: flex; flex-direction: column; gap: 8px;
}
.note-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(45,140,122,.1);
}

.note-card-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.note-card-body {
  font-size: 13px; color: var(--text2); line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  flex: 1;
}
.note-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; gap: 6px; flex-wrap: wrap;
}
.note-card-date { font-size: 11px; color: var(--text3); }
.note-cat-chip {
  font-size: 11px; color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-on-dim);
  border-radius: 20px;
  padding: 2px 8px; white-space: nowrap;
}

.empty-state {
  text-align: center; color: var(--text2); padding: 60px 0; font-size: 15px;
}

/* ══ Todos ═══════════════════════════════════════════════════════════════════ */

.todos-list { display: flex; flex-direction: column; gap: 8px; max-width: 600px; }

.todos-archive-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 14px 0 2px;
}

.todo-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
  transition: border-color .15s;
}
.todo-item:hover { border-color: var(--accent); }

.todo-checkbox {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border2); cursor: pointer;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.todo-checkbox.checked { background: var(--accent); border-color: var(--accent); }
.todo-checkbox.checked::after { content: '✓'; font-size: 11px; color: var(--accent-text); }

.todo-text { flex: 1; font-size: 14px; cursor: pointer; }
.todo-text.done { text-decoration: line-through; color: var(--text3); }

.todo-edit-btn {
  background: transparent; border: none; color: var(--text2);
  cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px;
}
.todo-edit-btn:hover { color: var(--text); background: var(--bg3); }

/* ══ Modal ════════════════════════════════════════════════════════════════════ */

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
}
.modal-card {
  position: relative; z-index: 1;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  width: 100%; max-width: 640px; max-height: 90dvh;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.15);
}
.modal-card--sm { max-width: 400px; }

.modal-header { display: flex; align-items: center; gap: 12px; }

.modal-title-input {
  flex: 1; font-size: 16px; font-weight: 600;
  background: transparent; border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0; padding: 4px 0; color: var(--text);
}
.modal-title-input:focus { border-bottom-color: var(--accent); outline: none; }

.modal-heading { font-size: 16px; font-weight: 600; flex: 1; }

.modal-body-input {
  flex: 1; min-height: 260px; max-height: 50dvh; overflow-y: auto;
  font-size: 14px; line-height: 1.7;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  outline: none; white-space: pre-wrap; word-break: break-word;
  transition: border-color .15s;
}
.modal-body-input:focus { border-color: var(--accent); }
.modal-body-input:empty::before {
  content: attr(data-placeholder);
  color: var(--text3); pointer-events: none;
}

/* ══ Formatting toolbar ══════════════════════════════════════════════════════ */

.fmt-toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); flex-wrap: wrap;
}
.fmt-btn {
  background: transparent; border: none; color: var(--text2);
  font-family: inherit; font-size: 13px; padding: 4px 8px;
  border-radius: 6px; cursor: pointer; transition: all .15s;
  min-width: 28px; text-align: center;
}
.fmt-btn:hover { background: var(--bg2); color: var(--text); }
.fmt-btn.active { background: var(--accent); color: var(--accent-text); }
.fmt-color {
  width: 20px; height: 20px; border-radius: 50% !important;
  padding: 0; min-width: 20px; border: 2px solid transparent !important;
}
.fmt-color:hover { border-color: var(--text) !important; }
.fmt-divider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

.modal-footer { display: flex; gap: 10px; justify-content: flex-end; }

/* ══ Mobile-only elements (скрыты на десктопе) ═══════════════════════════════ */

.mobile-topbar      { display: none; }
.mobile-bottom-nav  { display: none; }

/* ══ Responsive ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── App layout ───────────────────────────────── */
  #app-screen {
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  /* Десктопный сайдбар скрыт */
  .sidebar { display: none; }

  /* Мобильный топбар */
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 10;
  }
  .mobile-topbar-right {
    display: flex; align-items: center; gap: 4px;
  }
  .mobile-sync {
    font-size: 12px; color: var(--text3); padding: 0 4px;
  }

  /* Контент */
  .main-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 72px; /* место под bottom nav */
  }

  /* Нижняя навигация */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    z-index: 20;
  }
  .mob-nav-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    background: none; border: none; cursor: pointer;
    color: var(--text3);
    font-family: inherit;
    transition: color .15s, background .15s;
    padding: 6px 0;
  }
  .mob-nav-item:hover { background: var(--bg3); }
  .mob-nav-item.active { color: var(--accent); }
  .mob-nav-icon { font-size: 20px; line-height: 1; }
  .mob-nav-label { font-size: 11px; font-weight: 500; }

  /* ── Notes grid: 1 или 2 колонки ─────────────── */
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  /* ── View header ──────────────────────────────── */
  .view-header {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
  }
  .view-header h2 { font-size: 18px; flex: 1; }
  .search-input { max-width: 100%; }

  /* ── Todos ────────────────────────────────────── */
  .todos-list { max-width: 100%; }

  /* ── Modals — полный экран снизу ──────────────── */
  .modal { align-items: flex-end; }

  .modal-card {
    max-width: 100%;
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 20px 16px;
  }

  /* ── Gate screen ──────────────────────────────── */
  #gate-screen {
    height: 100dvh;
    overflow: hidden;
  }
  .gate-header { padding: 12px 16px; }
  .gate-user-email { display: none; }
  .gate-body {
    padding: 24px 16px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gate-hero { gap: 16px; }
  .gate-title { font-size: 24px; }
  .gate-price { font-size: 28px; }
  .gate-doc h2 { font-size: 18px; }

  /* ── Auth card ────────────────────────────────── */
  .auth-card {
    padding: 32px 20px;
    border-radius: var(--radius);
    border-left: none; border-right: none;
    max-width: 100%;
  }

  /* ── Settings ─────────────────────────────────── */
  .theme-picker { flex-direction: row; gap: 10px; }
  .theme-option { padding: 10px 6px; }
  .theme-preview { width: 52px; height: 36px; }
}

@media (max-width: 400px) {
  .cards-grid { grid-template-columns: 1fr; }
  .mob-nav-label { display: none; }
  .mob-nav-icon { font-size: 22px; }
  .mobile-bottom-nav { height: 52px; }
  .main-content { padding-bottom: 60px; }
}

/* ══ Gate screen ══════════════════════════════════════════════════════════════ */

#gate-screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
}

.gate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}

.gate-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gate-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gate-user-email {
  font-size: 13px;
  color: var(--text2);
}

.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border2); }

.gate-body {
  flex: 1;
  overflow-y: auto;
  padding: 48px 16px 24px;
}

.gate-view { max-width: 500px; margin: 0 auto; }

/* Hero */
.gate-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.gate-badge {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(45,140,122,.25);
}

.gate-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.5px;
}

.gate-desc {
  color: var(--text2);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.gate-features {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.gate-feature {
  padding: 13px 18px;
  font-size: 14px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.gate-feature:last-child { border-bottom: none; }
.gate-feature span { font-size: 18px; flex-shrink: 0; }

/* ── Plan picker ───────────────────────────────── */
.plan-picker {
  display: flex;
  gap: 8px;
  width: 100%;
}

.plan-card {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.plan-card:hover { border-color: var(--border2); }
.plan-card.active {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.plan-badge {
  position: absolute;
  top: -10px; right: 12px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.plan-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
}
.plan-card.active .plan-name { color: var(--accent-on-dim); }

.plan-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.plan-card.active .plan-price { color: var(--accent-on-dim); }

.plan-sub {
  font-size: 12px;
  color: var(--text3);
}
.plan-card.active .plan-sub { color: var(--accent-on-dim); opacity: .8; }

.gate-fineprint {
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  line-height: 1.5;
  margin-top: -4px;
}

.btn-buy-plus {
  width: 100%;
  padding: 15px 20px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, transform .1s;
  letter-spacing: .2px;
}
.btn-buy-plus:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-buy-plus:active { transform: translateY(0); }
.btn-buy-plus:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.gate-hint {
  font-size: 13px;
  color: var(--text2);
  min-height: 18px;
  text-align: center;
}

/* ── Doc pages ─────────────────────────────────── */
.gate-doc {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 32px;
}

.gate-doc h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text);
}

.gate-doc h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 28px 0 8px;
  color: var(--text);
}

.gate-doc p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text2);
  margin-bottom: 8px;
}

.gate-doc a { color: var(--accent); text-decoration: none; }
.gate-doc a:hover { text-decoration: underline; }

.gate-doc ul {
  list-style: none;
  margin: 10px 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gate-doc ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text2);
}
.gate-doc ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.offer-updated {
  font-size: 12px !important;
  color: var(--text3) !important;
  margin-top: -16px !important;
  margin-bottom: 24px !important;
}

.req-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.req-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.6;
}
.req-table tr:last-child td { border-bottom: none; }
.req-table td:first-child {
  color: var(--text3);
  white-space: nowrap;
  width: 150px;
  background: var(--bg2);
}
.req-table td:last-child { color: var(--text); }

/* ── Gate footer ───────────────────────────────── */
.gate-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-wrap: wrap;
}

.gate-footer-link {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 4px;
  transition: color .15s;
  border-radius: 4px;
}
.gate-footer-link:hover,
.gate-footer-link.active { color: var(--accent); }

.gate-footer-sep { color: var(--border); font-size: 13px; }

/* ══ Settings ═════════════════════════════════════════════════════════════════ */

.btn-settings-sidebar {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none; background: transparent;
  color: var(--text3);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: all .15s;
  margin-top: 4px;
}
.btn-settings-sidebar:hover { background: var(--bg3); color: var(--text2); }

.settings-section { display: flex; flex-direction: column; gap: 10px; }

.settings-label {
  font-size: 12px; font-weight: 600;
  color: var(--text3); text-transform: uppercase; letter-spacing: .5px;
}

/* ── Theme picker ──────────────────────────────── */
.theme-picker {
  display: flex; gap: 12px;
}

.theme-option {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 2px solid var(--border);
  border-radius: var(--radius); padding: 12px 8px;
  cursor: pointer; transition: border-color .15s;
  font-size: 13px; font-family: inherit; color: var(--text2);
}
.theme-option:hover { border-color: var(--border2); }
.theme-option.active { border-color: var(--accent); color: var(--text); font-weight: 500; }

.theme-preview {
  width: 64px; height: 44px;
  border-radius: 8px;
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
}

/* Standard preview */
.theme-preview--standard { background: #F5FBF7; }
.theme-preview--standard .tp-accent {
  position: absolute; bottom: 6px; right: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #2D8C7A;
}

/* Coffee preview */
.theme-preview--coffee { background: #F4EBE2; }
.theme-preview--coffee .tp-accent {
  position: absolute; bottom: 6px; right: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #8A5A3C;
}

/* Red preview */
.theme-preview--red { background: #FBF4F6; }
.theme-preview--red .tp-accent {
  position: absolute; bottom: 6px; right: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #CB2957;
}

.settings-section--account { border-top: 1px solid var(--border); padding-top: 14px; }

.settings-sub-info {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.5;
}

/* ── Announcement card (в настройках) ──────────── */
.announce-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--secondary-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.announce-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.announce-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary-fg);
}
.announce-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--secondary-fg);
  opacity: .85;
  margin-top: 3px;
  white-space: pre-wrap;
}

/* ── Renewal banner ────────────────────────────── */
.renew-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--secondary-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--secondary-fg);
}
.renew-banner-btn {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.renew-banner-btn:hover { background: var(--accent-hover); }

.btn-settings-logout {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.btn-settings-logout:hover { background: var(--danger-bg); }

/* ── Корзина ─────────────────────────────────────── */
.trash-hint {
  font-size: 13px;
  color: var(--text2);
}
.trash-card { cursor: default; }
.trash-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.trash-actions .btn-ghost {
  flex: 1;
  font-size: 13px;
  padding: 6px 8px;
}
.trash-purge { color: var(--danger) !important; }
.trash-purge:hover { background: var(--danger-bg); }

/* ── Публичная ссылка на заметку ─────────────────── */
.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 0;
}
.share-label { font-size: 13px; color: var(--text2); }
.share-days { font-size: 13px; padding: 5px 10px; }
.share-result {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}
.share-result input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.share-revoke { color: var(--danger) !important; }

/* ── Мои публичные ссылки (настройки) ───────────── */
#settings-links-section { flex-direction: column; }
#settings-links-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.shared-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.shared-link-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.shared-link-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shared-link-until { font-size: 12px; color: var(--text2); }
.shared-link-copy { font-size: 12px; padding: 5px 8px; white-space: nowrap; }
.shared-link-revoke { color: var(--danger) !important; padding: 5px 8px; }

/* ── Модалка «Мои ссылки» ───────────────────────── */
/* Настройки могут не влезать по высоте — даём прокрутку */
#settings-modal .modal-card { overflow-y: auto; }

.links-scroll {
  overflow-y: auto;
  max-height: 65dvh;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Панель «Мои ссылки» рядом с настройками ───── */
#settings-modal { gap: 16px; }
.links-panel {
  max-width: 340px;
  align-self: center;
  max-height: 80dvh;
}
/* Мобильные: настройки и ссылки в столбик, ссылки под общим блоком */
@media (max-width: 899px) {
  #settings-modal {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 24px 12px;
  }
  #settings-modal .modal-card { flex-shrink: 0; }
  .links-panel { max-width: 640px; width: 100%; }
  /* Настройки на мобильных — стопка карточек, а не «шторка»:
     возвращаем скругление всех углов (базовое правило делает низ квадратным) */
  #settings-modal .modal-card,
  #settings-modal .plus-panel,
  #settings-modal .links-panel {
    border-radius: var(--radius);
  }
}

/* ── Панель JustNotes+ (слева от настроек) ──────── */
.plus-panel {
  max-width: 280px;
  align-self: center;
  align-items: center;
  text-align: center;
  color: #fff;
  border: none;
  background: linear-gradient(135deg, var(--accent), #c2477e, #7b5cc4, var(--accent));
  background-size: 300% 300%;
  animation: plusFlow 7s linear infinite;
}
@keyframes plusFlow {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.plus-star-wrap { animation: plusPulse 1.6s ease-in-out infinite alternate; }
.plus-star {
  display: inline-block;
  font-size: 54px;
  animation: plusSpin 9s linear infinite;
}
@keyframes plusSpin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes plusPulse { from { transform: scale(.92); }  to { transform: scale(1.12); } }
.plus-panel-title { font-size: 24px; font-weight: 700; }
.plus-panel-status {
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 5px 14px;
}
.plus-panel-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  text-align: left;
}
/* Десктоп: панель Plus слева от настроек */
@media (min-width: 900px) {
  .plus-panel { order: -1; }
}
/* Мобильные: между настройками и ссылками (естественный порядок DOM) */
@media (max-width: 899px) {
  .plus-panel { max-width: 640px; width: 100%; }
}