/* REIN SYSTEM — единая дизайн-система библиотек: «Мои карусели», «Мои Reels», «Мои Stories», «Мои посты Telegram».
   Основа — сетка/карточки/вкладки «Мои карусели» (.mc-*), шапка — как у «Мои посты Telegram» (кикер с линией + заголовок + описание + кнопка).
   Подключается ПОСЛЕДНИМ, правила привязаны к id экранов библиотек (.lib-screen), на остальную платформу не влияют. */

/* ---------- экран и страница: те же поля, фон и ширина, что у «Создать карусель» (.rein-content-studio-screen / .rein-content-studio) ---------- */
#screen-my-carousels.lib-screen,#screen-reels-library.lib-screen,#screen-stories-library.lib-screen,#screen-telegram-posts.lib-screen{
  position:relative;overflow-x:hidden;max-width:none;min-height:100vh;padding:18px 16px 44px!important;
  background:radial-gradient(circle at 78% 6%,rgba(165,101,22,.10),transparent 25%),
    linear-gradient(90deg,rgba(5,4,3,.34),rgba(5,4,3,.05) 58%,rgba(5,4,3,.12)),
    url('assets/ui/backgrounds/carousel_workspace_bg_dark_01.webp') center top/cover fixed no-repeat,#070605!important;
}
@media(min-width:800px){
  #screen-my-carousels.lib-screen,#screen-reels-library.lib-screen,#screen-stories-library.lib-screen,#screen-telegram-posts.lib-screen{padding:26px 42px 64px!important;}
  .lib-screen .rtg-back{display:none!important;}
}
.lib-page{position:relative;z-index:1;width:100%;max-width:1680px;margin:0 auto;box-sizing:border-box;padding:0!important;}
.lib-screen [hidden]{display:none!important;}

/* ---------- шапка: кикер + заголовок + описание (штатные .rein-studio-*) и кнопка «Создать» в той же строке ---------- */
.lib-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;margin:0 0 18px;}
.lib-head-copy{min-width:0;flex:1 1 560px;}
.lib-head .rein-studio-kicker{margin-bottom:8px;}
.lib-screen .gold-btn.lib-cta{display:inline-flex;align-items:center;justify-content:center;flex:none;width:auto;min-width:0;max-width:none;margin:0 0 6px;padding:15px 28px!important;white-space:nowrap;font:800 12px/1 'Montserrat',sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase;}
@media(max-width:799px){
  .lib-head{display:block;}
  .lib-screen .gold-btn.lib-cta{display:flex;width:100%;margin:16px 0 0!important;}
}

/* ---------- переключатели Готовые / Черновики ---------- */
.lib-tabs,.lib-screen .mc-tabs,.lib-screen .rtg-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.lib-tab,.lib-screen .mc-tab,.lib-screen .rtg-filter{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;
  background:rgba(255,255,255,.03);color:#bfb19d;font:700 12px/1 'Montserrat',sans-serif;letter-spacing:0;text-transform:none;cursor:pointer;transition:color .16s,border-color .16s,background .16s;}
.lib-tab:hover,.lib-screen .mc-tab:hover,.lib-screen .rtg-filter:hover{color:#e8cf9b;border-color:rgba(255,211,122,.30);}
.lib-tab.active,.lib-tab[aria-selected="true"],.lib-screen .mc-tab.active,.lib-screen .rtg-filter[aria-selected="true"]{border-color:rgba(235,187,91,.65);background:rgba(137,88,22,.16);color:#f3dca8;box-shadow:none;}
.lib-tab:focus-visible,.lib-screen .mc-tab:focus-visible,.lib-screen .rtg-filter:focus-visible{outline:2px solid rgba(255,211,122,.75);outline-offset:2px;}
.lib-tab small,.lib-screen .mc-tab small,.lib-screen .rtg-filter small{margin-left:5px;opacity:.75;font-weight:600;font-size:inherit;}

/* ---------- фильтр-список (линии шаблонов) ---------- */
.lib-select,.lib-screen .mc-line-filter{display:block;width:auto;max-width:260px;margin:0 0 18px;background:#15110A;border:1px solid rgba(255,211,122,.25);color:var(--ink);border-radius:8px;padding:8px 12px;font:inherit;font-size:12.5px;}
.lib-select:focus,.lib-screen .mc-line-filter:focus{outline:none;border-color:rgba(255,211,122,.55);}

/* ---------- сетка и карточка (основа: .mc-*) ---------- */
.lib-screen .mc-grid,.lib-screen .lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:0;}
.lib-screen #mc-drafts-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.lib-screen .mc-card-thumb{aspect-ratio:4/5;}
.lib-screen .mc-card-thumb video{display:block;width:100%;height:100%;object-fit:cover;background:#050403;}
.lib-screen .mc-card-t{-webkit-line-clamp:2;min-height:2.6em;}
.lib-screen .mc-card-status.ready .dot,.lib-screen .mc-card-status.published .dot{background:#3ecf6e;}
.lib-screen .mc-card-status.draft .dot{background:#f0b429;}
.lib-screen .mc-card.is-demo{pointer-events:none;user-select:none;}
.lib-screen .mc-card.is-demo .mc-card-thumb-badge{background:rgba(226,170,66,.18);color:#e8cf9b;}
.mc-card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.lib-mini-btn{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border:1px solid rgba(255,211,122,.28);border-radius:999px;background:rgba(255,211,122,.06);
  color:#f3dca8;font:700 10px/1 'Montserrat',sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;width:auto;max-width:none;margin:0;}
.lib-mini-btn:hover{border-color:rgba(255,211,122,.55);background:rgba(255,211,122,.12);}

/* ---------- пустое состояние и загрузка ---------- */
.lib-empty{grid-column:1/-1;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 22px;border:1px solid rgba(223,164,61,.26);border-radius:24px;
  background:linear-gradient(145deg,rgba(17,13,9,.84),rgba(8,7,5,.92));box-shadow:0 26px 64px rgba(0,0,0,.38),0 0 44px rgba(193,132,36,.06),inset 0 1px 0 rgba(255,236,198,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.lib-empty::after{content:'';position:absolute;right:-90px;bottom:-110px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(226,164,58,.15),transparent 68%);pointer-events:none;}
.lib-empty>*{position:relative;z-index:1;}
.lib-empty-ico{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#f0c46a;border:1px solid rgba(240,196,106,.5);background:radial-gradient(circle at 40% 35%,rgba(250,196,84,.22),rgba(8,7,5,.7) 70%);box-shadow:0 0 0 6px rgba(226,170,66,.05),0 0 26px rgba(226,170,66,.16);}
.lib-empty-ico svg{width:24px;height:24px;}
.lib-empty-title{margin:6px 0 0;font-family:'NovelistDisplay',serif;font-weight:400;font-size:clamp(22px,2.4vw,28px);line-height:1.1;color:#f6ede1;}
.lib-empty-text{max-width:46ch;margin:0;font-size:13px;line-height:1.6;color:#b3a898;}
.lib-screen .gold-btn.lib-empty-cta{margin:10px 0 0!important;}
.lib-empty.is-compact{padding:20px 22px;}
.lib-skel{pointer-events:none;}
.lib-skel .mc-card-thumb,.lib-skel .mc-card-t,.lib-skel .mc-card-meta{background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,211,122,.10) 50%,rgba(255,255,255,.04) 70%);background-size:220% 100%;animation:lib-shimmer 1.4s linear infinite;border-radius:6px;color:transparent;}
.lib-skel .mc-card-t{height:14px;min-height:0;width:80%;}
.lib-skel .mc-card-meta{height:10px;width:45%;}
@keyframes lib-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){.lib-skel .mc-card-thumb,.lib-skel .mc-card-t,.lib-skel .mc-card-meta{animation:none;}}

/* ---------- Telegram: счётчики перенесены в переключатели ---------- */
#screen-telegram-posts .rtg-stats{display:none;}
#screen-telegram-posts .rtg-page{max-width:1680px;padding:0;}

/* ---------- телефон: две колонки ---------- */
@media(max-width:559px){
  .lib-screen .mc-grid,.lib-screen .lib-grid,.lib-screen #mc-drafts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .lib-screen .mc-card-t{font-size:11.5px;}
  .lib-screen .mc-card-del{opacity:1;}
}
@media(max-width:799px){.lib-screen .lib-page{padding-top:14px;}}

/* превью целиком, без обрезки: у каруселей кадр 4:5 совпадает с рамкой, Reels/Stories 9:16 и визуалы Telegram помещаются с полями */
.lib-screen .mc-card-thumb img,.lib-screen .mc-card-thumb video{object-fit:contain;background:#0b0907;}

/* ---------- Telegram: компактные карточки, превью 16:9 целиком (без обрезки и без лишних полей) ---------- */
.lib-screen .mc-grid--wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.lib-screen .mc-card--wide .mc-card-thumb{aspect-ratio:16/9;background:#1a1612;}
.lib-screen .mc-card--wide .mc-card-thumb img{object-fit:contain;background:#1a1612;}
.lib-screen .mc-card--wide .mc-draft-ico svg{width:34px;height:34px;}
.lib-screen .mc-card--wide .mc-card-t{min-height:0;}
@media(max-width:559px){.lib-screen .mc-grid--wide{grid-template-columns:minmax(0,1fr);}}

@media(max-width:799px){.lib-screen .topbar ~ .lib-page{padding-top:16px!important;}}

/* ---------- Reels: блок действий — четыре кнопки столбцом, матовое стекло + тонкая золотая рамка с металлическим переливом ----------
   Токены взяты у существующих элементов платформы: стекло .rtg-stat/.lib-empty (градиент тёмного стекла + blur + внутренний блик),
   золото рамок .rtg-post-card / .lib-empty (rgba(223,164,61,…), #FFD37A, #f3dca8). Тексты полностью, без сокращений и троеточий. */
.lib-screen .mc-card-actions--grid{display:flex;flex-direction:column;gap:7px;padding-top:10px;margin-top:auto;}
.lib-screen .mc-card-actions--grid .lib-mini-btn{
  position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-width:0;min-height:36px;margin:0;padding:0 14px;
  border:1px solid transparent;border-radius:11px;white-space:nowrap;overflow:visible;text-decoration:none;cursor:pointer;
  color:#f3dca8;font:700 11.5px/1 'Montserrat',sans-serif;letter-spacing:.02em;text-transform:none;
  background:
    linear-gradient(145deg,rgba(34,26,16,.66),rgba(10,8,6,.78)) padding-box,
    linear-gradient(115deg,rgba(255,211,122,.62) 0%,rgba(150,100,35,.34) 26%,rgba(255,236,198,.78) 50%,rgba(150,100,35,.34) 74%,rgba(255,211,122,.58) 100%) border-box;
  background-size:100% 100%,240% 100%;background-position:0 0,0% 0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,236,198,.07),0 6px 16px rgba(0,0,0,.28);
  transition:background-position .55s ease,box-shadow .2s ease,transform .2s ease,color .2s ease;
}
.lib-screen .mc-card-actions--grid .lib-mini-btn span{overflow:visible;text-overflow:clip;}
.lib-screen .mc-card-actions--grid .lib-mini-btn svg{flex:none;width:14px;height:14px;color:#e8b857;transition:transform .2s ease,color .2s ease;}
.lib-screen .mc-card-actions--grid .lib-mini-btn:hover{
  color:#ffe9b8;transform:translateY(-1px);background-position:0 0,100% 0;
  box-shadow:inset 0 1px 0 rgba(255,236,198,.14),0 10px 22px rgba(0,0,0,.36),0 0 20px rgba(226,170,66,.22);
}
.lib-screen .mc-card-actions--grid .lib-mini-btn:hover svg{color:#ffd37a;transform:scale(1.12);}
.lib-screen .mc-card-actions--grid .lib-mini-btn:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,236,198,.1),0 3px 8px rgba(0,0,0,.3);}
.lib-screen .mc-card-actions--grid .lib-mini-btn:focus-visible{outline:2px solid rgba(255,211,122,.75);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){.lib-screen .mc-card-actions--grid .lib-mini-btn,.lib-screen .mc-card-actions--grid .lib-mini-btn svg{transition:none;}.lib-screen .mc-card-actions--grid .lib-mini-btn:hover{transform:none;}}

.lib-screen .mc-card-origin{position:absolute;top:7px;left:7px;z-index:2;padding:5px 8px;border-radius:999px;border:1px solid rgba(255,211,122,.45);background:rgba(10,8,6,.74);color:#f3dca8;font:800 8.5px/1 'Montserrat',sans-serif;letter-spacing:.09em;text-transform:uppercase;pointer-events:none;}
.lib-screen .mc-card-origin.copy{border-color:rgba(255,236,198,.55);background:linear-gradient(135deg,rgba(137,88,22,.78),rgba(60,38,10,.78));color:#ffe9b8;}
.lib-screen .mc-card.is-new{animation:lib-new-pulse 1.6s ease 2;}
@keyframes lib-new-pulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}50%{box-shadow:0 0 0 2px rgba(255,211,122,.55),0 0 26px rgba(226,170,66,.35)}}
@media(prefers-reduced-motion:reduce){.lib-screen .mc-card.is-new{animation:none;box-shadow:0 0 0 2px rgba(255,211,122,.55);}}