/* Common styles for auth panel and buttons */
:root {
  --auth-bg: rgba(0,0,0,0.6);
  --auth-text: #fff;
  --auth-btn-bg: #3498db;
  --auth-btn-hover: #2980b9;
  --auth-btn-active: #1f6fa5;
  --auth-btn-current: #27ae60;
  --auth-danger: #e74c3c;
  --auth-btn-h: 28px;
  /* [Shared] Design tokens */
  --bg-page: #f8f9fa;
  --fg-main: #2c3e50;
  --fg-muted: #666;
  --card-bg: #fff;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.06);
  --border-soft: #e9ecef;
  --border-mid: #ddd;
  --accent: #3498db;
  --accent-hover: #2980b9;
  --warning: #f39c12;
  --danger: #e74c3c;
}

/* Panel */
.auth-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  background: var(--auth-bg);
  backdrop-filter: blur(4px);
  color: var(--auth-text);
  padding: 8px 10px;
  border-radius: 8px;
  font: 500 13px/1.4 'Noto Sans', sans-serif;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Hide all by default; show home explicitly */
#auth-panel .auth-btn,
#auth-panel .auth-logout { display: none; }
#auth-panel .auth-btn.home { display: inline-flex; }

/* Buttons */
.auth-btn {
  all: unset;
  box-sizing: border-box;
  background: var(--auth-btn-bg);
  color: var(--auth-text);
  padding: 0 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--auth-btn-h);
  min-width: 32px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  font-weight: 500;
}
.auth-btn:hover { background: var(--auth-btn-hover); }
.auth-btn.active {
  background: var(--auth-btn-current);
  pointer-events: none;
  font-weight: 600;
}

.auth-logout {
  all: unset;
  box-sizing: border-box;
  background: var(--auth-danger);
  color: #fff;
  padding: 0 12px;
  border-radius: 6px;
  height: var(--auth-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  font-weight: 500;
}
.auth-logout:hover { background: #c0392b; }

#auth-panel iframe {
  border-radius: 6px;
  overflow: hidden;
  height: var(--auth-btn-h) !important;
}

/* Hide Telegram widget when authenticated */
#auth-panel.is-auth #widget_login { display: none !important; }

#auth-panel:not(.is-auth) #btn-email-login { display: inline-flex !important; }
#auth-panel.is-auth #btn-email-login { display: none !important; }

.auth-user { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
.auth-user .tg-icon { width: 14px; height: 14px; display: inline-block; }
.auth-user a { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.5); }
.auth-user .user-link.active { font-weight: 600; border-bottom-color: transparent; }

/* [profile.html|stats.html|contkion.html|adminka.html] initial state */
#auth-user { display: none; }

/* ===== Shared layout & UI ===== */
/* [Shared] Base */
* { box-sizing: border-box; }
body { font-family: 'Noto Sans', sans-serif; background: var(--bg-page); color: #333; margin: 0; }
.container { width: 85vw; margin: 0 auto; padding: 20px; }

/* [Shared] Page header (BEM) */
.page-header { background: var(--card-bg); padding: 16px 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 16px; display:flex; justify-content:space-between; align-items:center; }
.page-header__title { margin: 0; font-size: 24px; color: var(--fg-main); font-weight: 600; }
.page-header__actions { display:flex; gap:10px; align-items:center; }

/* [Shared] Buttons */
.btn { background: var(--accent); color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; text-decoration:none; font-size:14px; display:inline-flex; align-items:center; justify-content:center; transition: background .2s ease, transform .1s ease; }
.btn:hover { background: var(--accent-hover); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #c0392b; }

/* [Shared] Cards */
.card { background: var(--card-bg); border-radius:10px; box-shadow: var(--card-shadow); padding:16px; }
.card h3 { margin: 0 0 12px 0; font-size: 16px; color: var(--fg-main); }
.card__title { font-size:18px; margin-bottom:12px; color: var(--fg-main); }

/* [Shared] Tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border-soft); }
th { background: #f8f9fa; font-weight: 600; color: var(--fg-main); }

/* [Shared] Text helpers */
.muted { color: var(--fg-muted); font-size: 12px; }
.pill { font-size:12px; color:#556; background:#eef3fb; padding:2px 8px; border-radius:999px; }
/* [Shared] Utilities */
.is-hidden { display:none !important; }
.thumb-wrap { position:relative; flex:0 0 auto; }
.controls-bar { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.shelf--spaced { margin-top:10px; }
.table--spaced { margin-top:10px; }
/* [Shared] Button spacing in inline groups */
td > .btn + .btn { margin-left: 5px; }

/* ===== profile.html ===== */
/* [profile.html] Profile card */
.profile-card { background:#fff; border-radius:10px; box-shadow: var(--card-shadow); padding:16px; display:flex; gap:16px; align-items:center; }
.profile-card .avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--border-soft); background:#f1f3f5; }
.profile-card .name { font-size:18px; font-weight:600; }
.stats-grid { display:grid; grid-template-columns: 1fr; gap:16px; margin-top:16px; }
@media(min-width: 900px){ .stats-grid { grid-template-columns: 1fr 1fr; } }

/* [profile.html|stats.html] Poster shelves */
.shelf { display:flex; align-items:flex-start; gap:10px; overflow-x:auto; overflow-y:hidden; padding-bottom:6px; width:50vw; max-width:100%; min-width:0; }
.shelf::-webkit-scrollbar { height:8px; }
.shelf::-webkit-scrollbar-thumb { background:#cbd2d9; border-radius:8px; }
.thumb { flex:0 0 auto; height:110px; width:195px; border-radius:6px; background:#eee; object-fit:cover; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.thumb:hover { transform: translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,0.2); }
.thumb-miss { flex:0 0 auto; height:110px; width:195px; border-radius:6px; background:#f1f3f5; color:#666; display:flex; align-items:center; justify-content:center; font-size:12px; border:1px dashed #cbd2d9; }
/* Logo shelf thumbnails */
.logo-thumb { flex:0 0 auto; width:180px; height:64px; border-radius:6px; background:#1a1a1a; object-fit:contain; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.15); border:1px solid var(--border-mid); }
.logo-thumb:hover { transform: translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,0.2); }

/* [profile.html] Mini chart */
.mini-chart { display:flex; align-items:flex-end; gap:4px; height:120px; padding:8px 0; }
.mini-bar { width:12px; background:#3498db; border-radius:3px 3px 0 0; position:relative; }
.mini-bar::after { content:attr(data-tip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.75); color:#fff; font-size:10px; padding:2px 4px; border-radius:4px; opacity:0; pointer-events:none; white-space:nowrap; }
.mini-bar:hover::after { opacity:1; }
/* Grouped bars per week (posters+logos) */
.mini-week { display:flex; align-items:flex-end; gap:2px; height:100%; }
.mini-bar.logo { background:#e74c3c; }

/* ===== stats.html ===== */
/* [stats.html] Layout */
.stats-grid { display:grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .stats-grid { grid-template-columns: 1fr 2fr; } }
.filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.filters label { font-size:13px; color: var(--fg-main); }
.filters select { padding:6px 8px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; font-size:13px; }
.user-shelf-title { font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.poster-item { margin: 4px 0; color:#333; }
.user-block + .user-block { border-top:1px dashed #e9ecef; padding-top:12px; }
#totals { margin-bottom:8px; }

/* [Shared] Minor layout helpers (limited) */
.poster-block { display:flex; flex-direction:column; align-items:center; }
.ml-8 { margin-left:8px; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.8); display:none; align-items:center; justify-content:center; z-index:10000; }
.lightbox.open { display:flex; }
.lightbox-content { max-width:92vw; max-height:92vh; position:relative; }
.lightbox img { max-width:92vw; max-height:80vh; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.lightbox-caption { margin-top:8px; color:#fff; text-align:center; font-size:14px; }
.lightbox-close { position:absolute; top:-10px; right:-10px; background: var(--danger); color:#fff; border:none; border-radius:999px; width:28px; height:28px; cursor:pointer; }

/* Modal (logo search) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 10001; padding: 16px; }
.modal.open { display: flex; }
.modal-dialog { background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); width: 920px; max-width: 96vw; max-height: 92vh; overflow: auto; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.modal-title { font-weight: 600; color: var(--fg-main); }
.modal-close { background: var(--danger); color:#fff; border:none; border-radius:6px; width:28px; height:28px; cursor:pointer; }
.modal-body { padding: 12px 16px; }
.sr-item { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border-soft); }
.sr-left { flex:0 0 auto; width:64px; display:flex; align-items:center; justify-content:center; }
.sr-thumb { width:48px; height:72px; object-fit:cover; border-radius:4px; background:#f1f3f5; border:1px solid var(--border-soft); }
.sr-thumb--ph { width:48px; height:72px; display:flex; align-items:center; justify-content:center; color:#999; border:1px dashed var(--border-mid); border-radius:4px; }
.sr-main { flex:1 1 auto; padding:0 10px; }
.sr-title-row { display:flex; align-items:center; gap:8px; }
.sr-title { font-weight:600; }
.sr-year { color: var(--fg-muted); font-size: 12px; }
.sr-rating { color: var(--accent); font-weight:700; font-size:12px; }
.sr-sub { color: var(--fg-muted); font-size:12px; margin-top:2px; }
.sr-actions { flex:0 0 auto; }
.logo-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.logo-choice { border:1px solid var(--border-soft); border-radius:8px; padding:8px; background:#fff; display:flex; flex-direction:column; align-items:center; gap:6px; }
.logo-choice img { width:100%; height:80px; object-fit:contain; background:#f1f3f5; border-radius:4px; }
.logo-section-title { font-weight:600; margin:8px 0; }
.logo-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.logo-tag { font-size:10px; color:#333; background:#ecf0f1; border:1px solid var(--border-mid); padding:2px 6px; border-radius:999px; }
.logo-tag.local { background:#d1f7c4; border-color:#a3e1a2; }

/* ===== contkion.html ===== */
/* [contkion.html] Controls */
.controls { background:#fff; padding:20px; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1); margin-bottom:20px; }
.controls-row { display:flex; gap:20px; margin-bottom:15px; flex-wrap:wrap; align-items:center; }
.control-group { display:flex; flex-direction:column; gap:5px; }
.control-group label { font-size:12px; font-weight:500; color:#666; }
.search-input { padding:8px 12px; border:1px solid var(--border-mid); border-radius:6px; font-size:14px; min-width:250px; }
.select-control { padding:8px 12px; border:1px solid var(--border-mid); border-radius:6px; font-size:14px; background:#fff; min-width:120px; }

/* ===== page overlay (loading/reload) ===== */
.mpm-page-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  z-index: 10000;
}
.mpm-page-overlay[hidden] { display: none !important; }
.mpm-overlay-text {
  color: #fff;
  font: 500 14px/1.4 'Noto Sans', sans-serif;
  opacity: 0.9;
}
.mpm-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: #75FB4C;
  border-radius: 50%;
  animation: mpm-spin 0.9s linear infinite;
}
@keyframes mpm-spin {
  to { transform: rotate(360deg); }
}

.sort-controls { display:flex; gap:10px; align-items:center; }
.sort-controls .muted { margin-right:10px; }
.sort-btn { background:#ecf0f1; border:1px solid var(--border-mid); padding:6px 12px; border-radius:4px; cursor:pointer; font-size:12px; transition: all .3s; }
.sort-btn:hover { background:#d5dbdb; }
.sort-btn.active { background: var(--accent); color:#fff; border-color: var(--accent); }
.sort-btn.active:hover { background: var(--accent-hover); }

/* [contkion.html] Table */
.table-container { background:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1); overflow:hidden; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { background:#f8f9fa; padding:15px 12px; text-align:left; font-weight:600; color:#2c3e50; border-bottom:2px solid #e9ecef; white-space:nowrap; }
.table td { padding:12px; border-bottom:1px solid #e9ecef; vertical-align:top; }
.table tr:hover { background:#f8f9fa; }

/* [contkion.html] Preview & poster controls */
.image-preview { width:180px; height:64px; object-fit:contain; border-radius:4px; cursor:pointer; border:1px solid var(--border-mid); transition: transform .2s; background:#1a1a1a; }
.image-preview:hover { transform: scale(1.05); }
.image-preview.vertical { width:80px; height:110px; }
.image-preview.horizontal { width:160px; height:90px; }
.image-preview.background { width:160px; height:90px; }
.no-image { width:180px; height:64px; background:#1a1a1a; border:1px dashed var(--border-mid); border-radius:4px; display:flex; align-items:center; justify-content:center; color:#999; font-size:12px; }
.no-image.vertical { width:80px; height:110px; }
.no-image.horizontal { width:160px; height:90px; }
.no-image.background { width:160px; height:90px; }
.create-btn { width:160px; height:90px; background: var(--accent); color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:600; transition: all .3s; display:flex; align-items:center; justify-content:center; text-align:center; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.create-btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.2); }
.create-btn:active { transform: translateY(0); box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.poster-controls { display:flex; gap:3px; margin-top:8px; justify-content:center; }
.poster-btn { padding:6px; border:none; border-radius:4px; cursor:pointer; font-size:12px; font-weight:500; transition: all .2s; min-width:60px; }
.poster-btn.delete { background: var(--danger); color:#fff; }
.poster-btn.delete:hover { background:#c0392b; transform: translateY(-1px); }
.poster-btn.edit { background: var(--accent); color:#fff; }
.poster-btn.edit:hover { background: var(--accent-hover); transform: translateY(-1px); }
.poster-btn.refresh { background: var(--warning); color:#fff; }
.poster-btn.refresh:hover { background:#e67e22; transform: translateY(-1px); }
.poster-btn:active { transform: translateY(0); }
.poster-authors { margin-top:6px; font-size:11px; color:#666; text-align:center; }

/* [contkion.html] Stats badges */
.stats-indicator { display:inline-block; margin-left:8px; padding:2px 6px; border-radius:12px; font-size:11px; font-weight:600; color:#fff; cursor:help; transition: transform .2s; }
.stats-indicator:hover { transform: scale(1.1); }
.stats-excellent { background:#27ae60; }
.stats-good { background:#2ecc71; }
.stats-average { background:#f39c12; }
.stats-poor { background:#e74c3c; }
.stats-very-poor { background:#c0392b; }

/* [contkion.html] Pagination */
.pagination { background:#fff; padding:20px; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1); margin-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; }
.pagination-info { color:#666; font-size:14px; }
.pagination-controls { display:flex; gap:10px; align-items:center; }
.page-btn { background:#ecf0f1; border:1px solid var(--border-mid); padding:8px 12px; border-radius:4px; cursor:pointer; font-size:14px; transition: background .3s; }
.page-btn:hover { background:#d5dbdb; }
.page-btn.active { background: var(--accent); color:#fff; border-color: var(--accent); }
.page-btn:disabled { opacity:.5; cursor:not-allowed; }

/* [contkion.html] Responsive tweaks */
@media (max-width: 768px) {
  .controls-row { flex-direction: column; align-items: stretch; }
  .search-input { min-width: auto; }
  .table-container { overflow-x: auto; }
  .pagination { flex-direction: column; text-align: center; }
}

/* ===== adminka.html ===== */
/* [adminka.html] Layout & table */
.wrap { width:85vw; margin:24px auto; padding:0 16px; }
.row { display:flex; gap:8px; align-items:center; }
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.badge { display:inline-block; background:#eee; border-radius:12px; padding:2px 8px; font-size:12px; }
.avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid #ddd; display:inline-block; }
.avatar-placeholder { width:32px; height:32px; border-radius:50%; background:#ddd; display:inline-flex; align-items:center; justify-content:center; font-size:12px; color:#666 }
select { padding:6px 8px; border:1px solid #d0d7de; border-radius:6px; }
/* Inputs in admin table */
.form-input { width:150px; padding:4px; border:1px solid #ddd; border-radius:4px; }

/* [adminka.html] Tabs */
.tabs { background: var(--card-bg); border-radius: 8px; box-shadow: var(--card-shadow); }
.tab-nav { display:flex; gap:8px; border-bottom:1px solid var(--border-soft); padding:8px; flex-wrap:wrap; }
.tab-btn { background:#ecf0f1; border:1px solid var(--border-mid); padding:8px 12px; border-radius:6px; cursor:pointer; font-size:14px; transition: background .2s, color .2s, border-color .2s; }
.tab-btn:hover { background:#dfe6e9; }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color:#fff; }
.tab-panels { padding:12px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ===== View Transitions (cross-document) ===== */
@supports (view-transition-name: none) {
  :root {
    --vt-duration: 260ms;
    --vt-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
    --vt-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Не анимируем root, чтобы фокус был на именованных блоках (page + auth) */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  /* Optional shared elements across pages */
  .page-header__title { view-transition-name: page-title; }

  /* Общая шапка/панель навигации: “приклеенная” поверх */
  #auth-panel { view-transition-name: auth-panel; }
  ::view-transition-group(auth-panel) { z-index: 100000; }
  ::view-transition-old(auth-panel),
  ::view-transition-new(auth-panel) {
    animation: vt-auth-fade var(--vt-duration) var(--vt-ease-in) both;
  }
  @keyframes vt-auth-fade { from { opacity: 0.98; } to { opacity: 1; } }

  /* Основной контейнер страницы (на разных страницах разные врапперы) */
  body > .container,
  body > .wrap,
  #root {
    view-transition-name: page;
  }
  ::view-transition-group(page) { z-index: 1; }
  ::view-transition-old(page) {
    animation: vt-page-out var(--vt-duration) var(--vt-ease-out) both;
  }
  ::view-transition-new(page) {
    animation: vt-page-in var(--vt-duration) var(--vt-ease-in) both;
  }
  @keyframes vt-page-out {
    to { opacity: 0; transform: translateY(8px) scale(0.99); filter: blur(2px); }
  }
  @keyframes vt-page-in {
    from { opacity: 0; transform: translateY(-8px) scale(1.01); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  @supports (view-transition-name: none) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  }
}

/* Auth modals (email / migration) */
.mpm-auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.mpm-auth-modal-overlay.is-open { display: flex; }
.mpm-auth-modal {
  background: var(--card-bg, #fff);
  color: var(--fg-main, #2c3e50);
  border: 1px solid var(--border-mid, #ddd);
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  font: 14px/1.45 'Noto Sans', sans-serif;
}
.mpm-auth-modal h3 { margin: 0 0 10px; font-size: 17px; }
.mpm-auth-modal label { display: block; margin-top: 10px; font-size: 12px; color: var(--fg-muted, #666); }
.mpm-input {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border-mid, #ddd);
  border-radius: 6px;
  font: inherit;
  box-sizing: border-box;
}
.mpm-auth-muted { font-size: 12px; color: var(--fg-muted, #666); margin: 8px 0 0; }
.mpm-auth-msg { font-size: 13px; margin-top: 10px; min-height: 1.2em; }
.mpm-auth-msg.err { color: var(--danger, #c0392b); }
.mpm-auth-msg.ok { color: #1e8449; }
.mpm-link {
  all: unset;
  cursor: pointer;
  color: var(--accent, #3498db);
  text-decoration: underline;
  font-size: inherit;
}