/* cn3-plus / saved: закладки, «Продолжить чтение», страница «Сохранённое» */

/* кнопка-закладка в строке «Аа / Поделиться» */
.cn3x-savebtn { align-items: center; padding: 3px 9px; }
.cn3x-savebtn svg { display: block; }
.cn3x-savebtn[aria-pressed="true"] { color: var(--mainColor); border-color: var(--mainColor); }

/* главная: «Продолжить чтение» */
body .cn3x-continue { position: relative; margin: 1rem auto; }
.cn3x-continue[hidden] { display: none; }
.cn3x-cont { display: flex; align-items: center; gap: 16px; padding: 12px 44px 12px 12px; border: 1px solid var(--borderColor); border-radius: 16px; background: var(--lightColor); color: var(--mainColor); text-decoration: none; transition: border-color .15s; }
.cn3x-cont:hover { border-color: var(--mainColor); text-decoration: none; }
.cn3x-cont:focus-visible { outline: 2px solid var(--hoverColor, currentColor); outline-offset: 2px; }
.cn3x-cont__img { flex: 0 0 auto; width: 96px; height: 64px; object-fit: cover; border-radius: 10px; }
.cn3x-cont__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.cn3x-cont__kicker { font-size: var(--t-label, .65rem); letter-spacing: .08em; text-transform: uppercase; color: var(--cn3Muted, var(--greyColor)); }
.cn3x-cont__title { font-size: var(--t-card, .95rem); font-weight: var(--medium, 500); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn3x-cont__bar { display: block; height: 4px; border-radius: 4px; background: var(--borderColor); overflow: hidden; }
.cn3x-cont__bar i { display: block; height: 100%; border-radius: 4px; background: var(--cn3Accent, var(--mainColor)); }
.cn3x-cont__x { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--cn3Muted, var(--greyColor)); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cn3x-cont__x:hover { background: var(--greyBg); color: var(--mainColor); }
.cn3x-cont__x:focus-visible { outline: 2px solid var(--hoverColor, currentColor); }

/* страница «Сохранённое» */
body .cn3x-savedpage .container { padding-top: 1.6rem; padding-bottom: 3rem; }
.cn3x-savedpage__title { margin: 0 0 .4rem; font-size: var(--t-h1, clamp(1.7rem, 3.4vw, 2.4rem)); font-weight: var(--bold, 600); color: var(--mainColor); }
.cn3x-savedpage__sub { margin: 0 0 1.4rem; color: var(--cn3Muted, var(--greyColor)); }
.cn3x-saved-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 1rem; }
.cn3x-saved-bar__n { margin-right: auto; font-size: var(--t-ui, .88rem); color: var(--cn3Muted, var(--greyColor)); }
.cn3x-saved-bar__btn { min-height: 38px; padding: 0 16px; border: 1px solid var(--borderColor); border-radius: 999px; background: transparent; color: var(--mainColor); font: inherit; font-size: var(--t-ui, .88rem); cursor: pointer; }
.cn3x-saved-bar__btn:hover { border-color: var(--mainColor); }
.cn3x-saved-bar__btn--danger:hover { border-color: #c2410c; color: #c2410c; }
.cn3x-saved-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .cn3x-saved-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cn3x-saved-grid { grid-template-columns: repeat(4, 1fr); gap: 22px 20px; } }
.cn3x-saved-card { position: relative; min-width: 0; }
.cn3x-saved-card__link { display: flex; flex-direction: column; gap: 10px; color: var(--mainColor); text-decoration: none; }
.cn3x-saved-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--greyBg); }
.cn3x-saved-card__title { font-size: var(--t-card, .95rem); font-weight: var(--medium, 500); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cn3x-saved-card__link:hover .cn3x-saved-card__title { color: var(--hoverColor); }
.cn3x-saved-card__rm { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cn3x-saved-card__rm:hover { background: rgba(0, 0, 0, .8); }
.cn3x-saved-card__rm:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cn3x-saved-empty { max-width: 460px; padding: 2rem 0; }
.cn3x-saved-empty__t { margin: 0 0 .4rem; font-size: var(--t-h3, 1.2rem); font-weight: var(--bold, 600); color: var(--mainColor); }
.cn3x-saved-empty__s { margin: 0 0 1.2rem; color: var(--cn3Muted, var(--greyColor)); }
.cn3x-saved-empty__btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--mainColor); color: var(--bodyBg, #fff); text-decoration: none; }
.cn3x-saved-empty__btn:hover { color: var(--bodyBg, #fff); opacity: .9; }
@media (max-width: 700px) { .cn3x-cont__img { width: 72px; height: 54px; } }

/* ---- Закладки: список на телефоне, жест смахивания, «Вернуть», кнопка в шапке ---- */
.cn3x-saved-card__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cn3x-saved-card__meta { font-size: var(--t-meta, .78rem); color: var(--cn3Muted, var(--greyColor)); }
.cn3x-saved-hint { margin: 0 0 12px; font-size: var(--t-meta, .78rem); color: var(--cn3Muted, var(--greyColor)); }
.cn3x-saved-card__rm { opacity: 0; transition: opacity .15s ease; }
.cn3x-saved-card:hover .cn3x-saved-card__rm, .cn3x-saved-card__rm:focus-visible { opacity: 1; }

@media (max-width: 700px) {
  .cn3x-saved-grid { grid-template-columns: 1fr; gap: 10px; }
  .cn3x-saved-card { position: relative; overflow: hidden; border-radius: 14px; touch-action: pan-y; }
  .cn3x-saved-card.is-drag, .cn3x-saved-card.is-gone { background: #b91c1c; }
  .cn3x-saved-card::before { content: "Убрать"; opacity: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 22px; color: #fff; font-size: var(--t-ui, .88rem); font-weight: var(--medium, 500); }
  .cn3x-saved-card__link { position: relative; z-index: 1; flex-direction: row; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--borderColor); border-radius: 14px; background: var(--bodyBg, #fff); transform: translateX(var(--dx, 0px)); transition: transform .2s ease; }
  .cn3x-saved-card.is-drag::before, .cn3x-saved-card.is-gone::before { opacity: 1; }
  .cn3x-saved-card.is-drag .cn3x-saved-card__link { transition: none; }
  .cn3x-saved-card.is-gone .cn3x-saved-card__link { transform: translateX(-110%); }
  .cn3x-saved-card.is-gone { opacity: 0; transition: opacity .18s ease; }
  .cn3x-saved-card__img { flex: 0 0 auto; width: 104px; height: 70px; aspect-ratio: auto; border-radius: 10px; }
  .cn3x-saved-card__title { -webkit-line-clamp: 3; }
  /* на телефоне крестик остаётся как запасной способ, но не мешает чтению */
  .cn3x-saved-card__rm { position: absolute; z-index: 2; top: 6px; right: 6px; width: 30px; height: 30px; background: transparent; color: var(--cn3Muted, var(--greyColor)); opacity: 1; }
  .cn3x-saved-card__link { padding-right: 38px; }
}

.cn3x-undo { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 300; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 14px; background: #1f2937; color: #fff; font-size: var(--t-ui, .88rem); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); transform: translate(-50%, 16px); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.cn3x-undo.is-on { transform: translate(-50%, 0); opacity: 1; }
.cn3x-undo span { white-space: nowrap; }
.cn3x-undo button { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-weight: var(--medium, 500); cursor: pointer; }
.cn3x-undo button:hover { background: rgba(255, 255, 255, .26); }
@media (min-width: 769px) { .cn3x-undo { bottom: 24px; } }

/* кнопка «Сохранённое» в шапке: появляется, когда что-то сохранено */
.cn3x-hbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--greyBg); color: var(--mainColor); text-decoration: none; }
.cn3x-hbtn[hidden] { display: none; }
.cn3x-hbtn:hover { color: var(--hoverColor); text-decoration: none; }
.cn3x-hbtn:focus-visible { outline: 2px solid var(--hoverColor, currentColor); outline-offset: 2px; }
.cn3x-hbtn__n { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--cn3Accent, #c2410c); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.cn3x-hbtn__n[hidden] { display: none; }
@media (min-width: 700px) and (max-width: 1100px) { .cn3x-hbtn { width: 44px; height: 44px; } }