:root { color-scheme: dark; --bg:#101214; --panel:#1a1d20; --panel-2:#20252a; --line:#30363c; --text:#f4f6f7; --muted:#98a2aa; --accent:#42a5f5; --danger:#ff776e; --success:#9fe0b5; --mobile-columns:3; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; }
body.modal-open { overflow:hidden; }
.topbar, main { width:min(1440px,calc(100% - 40px)); margin:0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:42px 0 28px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 8px; color:var(--accent); font-size:11px; letter-spacing:.14em; }
h1 { margin:0; font-size:clamp(28px,4vw,48px); letter-spacing:0; }
.stats { color:var(--muted); font-size:14px; }
.topbar-right { display:flex; flex-direction:column; align-items:end; gap:18px; }
.nav-links { display:flex; gap:16px; align-items:center; }
.nav-links a { color:var(--muted); text-decoration:none; }
.nav-links a:hover,.nav-links a.active { color:var(--text); }
.toolbar { display:flex; align-items:center; gap:10px; padding:20px 0; }
.selection-tools { display:flex; align-items:center; gap:8px; margin-right:auto; }
.mobile-columns { display:none; align-items:center; gap:4px; }
.mobile-columns button { min-width:40px; padding:0 10px; background:var(--panel); color:var(--text); border-color:var(--line); }
.mobile-columns button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#081018; }
input, select, button, .secondary-button, .primary-link { min-height:42px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--text); padding:0 13px; font:inherit; }
input { flex:1; min-width:160px; }
button, .primary-link { cursor:pointer; background:var(--accent); color:#081018; border-color:var(--accent); font-weight:700; }
button:disabled { opacity:.5; cursor:default; }
.secondary-button { display:inline-flex; align-items:center; justify-content:center; color:var(--text); background:var(--panel); text-decoration:none; }
.secondary-button:hover { border-color:var(--accent); }
.danger-button { background:var(--danger); border-color:var(--danger); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding-bottom:42px; }
.item { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--panel); transition:border-color .18s ease,transform .18s ease; }
.item:hover { border-color:#4c5964; transform:translateY(-2px); }
.item.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.media-shell { position:relative; aspect-ratio:9 / 13; overflow:hidden; background:#080909; cursor:pointer; }
.cover-image,.preview-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover-image { transition:opacity .2s ease; }
.preview-video { opacity:0; transition:opacity .2s ease; }
.item.is-previewing .preview-video { opacity:1; }
.item.is-previewing .cover-image { opacity:0; }
.cover-placeholder { display:grid; place-items:center; width:100%; height:100%; color:var(--muted); background:linear-gradient(140deg,#252b31,#101214); }
.media-overlay { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between; padding:13px; pointer-events:none; background:linear-gradient(transparent 55%,rgba(0,0,0,.65)); }
.duration-badge { padding:3px 6px; border-radius:4px; background:rgba(0,0,0,.7); font-size:12px; }
.select-control { position:absolute; top:12px; left:12px; z-index:2; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.7); cursor:pointer; }
.select-control input { width:17px; min-width:0; height:17px; accent-color:var(--accent); }
.icon-button { display:grid; place-items:center; width:36px; min-height:36px; padding:0; border:0; border-radius:50%; }
.modal-close:hover { background:var(--danger); }
.item-body { position:relative; padding:14px; cursor:pointer; }
.item-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.author-line,.detail-author-row { display:flex; align-items:center; gap:9px; min-width:0; }
.author { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { display:inline-grid; place-items:center; flex:0 0 auto; width:32px; height:32px; border-radius:50%; object-fit:cover; background:#37414a; color:#d7e4ec; font-size:12px; font-weight:700; }
.avatar img { width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.avatar-large { width:48px; height:48px; }
.time { color:var(--muted); font-size:12px; white-space:nowrap; }
.caption,.detail-caption { color:#d6dcdf; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.caption { display:-webkit-box; min-height:45px; margin:12px 0 0; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.hashtag { color:#818a92; }
.card-stats,.detail-stats { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:12px; }
.card-stats { align-items:center; margin-top:13px; }
.detail-stats { margin:16px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.status-line { margin-top:13px; color:var(--muted); font-size:12px; }
.status-line.failed { color:var(--danger); }
.log-action { min-height:32px; padding:0 10px; white-space:nowrap; }
.empty { padding:80px 0; color:var(--muted); text-align:center; }
.settings-panel { max-width:680px; margin:32px 0 48px; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.settings-form { display:grid; gap:18px; }
.settings-field { display:grid; gap:8px; }
.settings-field label,.settings-label { color:var(--text); font-weight:700; }
.settings-field input { width:100%; min-width:0; }
.settings-help,.settings-meta { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.settings-toggle { display:flex; align-items:center; gap:10px; }
.settings-toggle input { flex:0 0 auto; width:18px; min-width:18px; height:18px; accent-color:var(--accent); }
.settings-status { min-height:20px; margin:0; color:var(--muted); }
.settings-status.success { color:var(--success); }
.settings-status.error { color:var(--danger); }
.settings-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.telegram-history-panel { max-width:960px; }
.settings-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.settings-section-heading h2 { margin-bottom:0; }
.telegram-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:24px 0 16px; }
.telegram-summary-item { display:grid; gap:4px; padding:12px; border:1px solid var(--line); background:var(--panel-2); }
.telegram-summary-item strong { font-size:20px; }
.telegram-summary-item span { color:var(--muted); font-size:12px; }
.telegram-history { display:grid; gap:8px; }
.telegram-history-item { padding:14px 0; border-top:1px solid var(--line); }
.telegram-history-head,.telegram-history-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.telegram-history-head { justify-content:space-between; }
.telegram-history-head time,.telegram-history-meta,.telegram-history-title span { color:var(--muted); font-size:12px; }
.telegram-history-title { margin-top:10px; font-weight:700; }
.telegram-history-caption { margin:6px 0; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.telegram-history-meta a { color:var(--accent); }
.telegram-history-error { margin:8px 0 0; color:var(--danger); font-size:13px; overflow-wrap:anywhere; }
.delivery-status { color:var(--muted); }
.delivery-status.sent { color:var(--success); }
.delivery-status.failed { color:var(--danger); }
.history-pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }
.maintenance-panel { max-width:1100px; }
.maintenance-summary { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:24px; }
.maintenance-stat { display:grid; gap:5px; min-width:0; padding:14px; border:1px solid var(--line); background:var(--panel-2); }
.maintenance-stat strong { overflow-wrap:anywhere; font-size:20px; }
.maintenance-stat span,.maintenance-orphan-summary,.maintenance-file span { color:var(--muted); font-size:12px; }
.maintenance-orphan-summary { margin:22px 0 8px; }
.maintenance-files { display:grid; gap:0; }
.maintenance-file { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:13px 0; border-top:1px solid var(--line); }
.maintenance-file > div { display:grid; gap:5px; min-width:0; }
.maintenance-file strong { overflow-wrap:anywhere; }
.maintenance-file time { flex:0 0 auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.modal[hidden] { display:none; }
.modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }
.detail-modal-card { position:relative; z-index:1; display:grid; grid-template-columns:minmax(280px,44%) 1fr; width:min(1040px,100%); max-height:min(820px,calc(100vh - 48px)); overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:0 24px 80px rgba(0,0,0,.55); }
.detail-media-wrap { position:relative; min-height:0; aspect-ratio:9 / 13; overflow:hidden; background:#080909; }
.detail-media-wrap > video { display:block; width:100%; height:100%; max-height:820px; object-fit:contain; background:#080909; }
.detail-slideshow { position:relative; width:100%; height:100%; outline:0; background:#080909; touch-action:pan-y; }
#detail-audio { display:none; }
.slideshow-viewport { width:100%; height:100%; overflow:hidden; }
.slideshow-track { display:flex; width:100%; height:100%; transition:transform .36s ease-out; will-change:transform; }
.detail-slide { position:relative; flex:0 0 100%; width:100%; height:100%; display:grid; place-items:center; overflow:hidden; }
.detail-slide img,.detail-slide video { display:block; width:100%; height:100%; object-fit:contain; background:#080909; }
.detail-slide video { pointer-events:none; }
.slide-counter { position:absolute; left:50%; bottom:16px; z-index:2; min-width:42px; padding:4px 8px; transform:translateX(-50%); border-radius:12px; background:rgba(0,0,0,.55); color:#fff; font-size:12px; text-align:center; }
.detail-content { position:relative; min-width:0; overflow:auto; padding:32px; }
.detail-content h2 { margin:0; font-size:23px; }
.detail-author-row { margin-bottom:22px; }
.detail-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; }
.detail-fields div { padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); }
.detail-fields dt { color:var(--muted); font-size:12px; }
.detail-fields dd { margin:6px 0 0; overflow-wrap:anywhere; }
.detail-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px; }
.primary-link,.secondary-button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.modal-close { position:absolute; top:14px; right:14px; z-index:3; background:rgba(0,0,0,.7); color:#fff; }
.drawer-toggle { display:none; }
@media (max-width:680px) {
  .mobile-columns { display:flex; }
  .gallery { grid-template-columns:repeat(var(--mobile-columns),minmax(0,1fr)); }
  .modal { inset:0; padding:0; place-items:stretch; }
  .detail-modal-card { display:block; width:100%; height:100dvh; max-height:none; overflow:hidden; border:0; border-radius:0; background:#080909; }
  .detail-media-wrap { position:absolute; inset:0; z-index:0; width:100%; height:100%; aspect-ratio:auto; background:#080909; }
  .detail-media-wrap video { width:100%; height:100%; max-height:none; object-fit:contain; }
  .detail-content { position:absolute; left:0; right:0; bottom:0; z-index:2; max-height:72dvh; overflow:auto; padding:44px 16px calc(24px + env(safe-area-inset-bottom)); border-radius:16px 16px 0 0; background:rgba(26,29,32,.96); backdrop-filter:blur(18px); transition:max-height .24s ease,padding .24s ease,background .24s ease,backdrop-filter .24s ease; }
  .detail-content[data-drawer="collapsed"] { height:0; max-height:0; overflow:visible; padding:0; border-radius:0; background:transparent; backdrop-filter:none; }
  .detail-content[data-drawer="collapsed"] > :not(.drawer-toggle) { display:none; }
  .drawer-toggle { position:fixed; top:auto; left:12px; bottom:60px; z-index:30; display:grid; place-items:center; width:28px; min-height:28px; height:28px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(26,29,32,.55); color:rgba(255,255,255,.86); backdrop-filter:blur(6px); box-shadow:0 2px 8px rgba(0,0,0,.35); }
  .drawer-toggle[data-drawer="expanded"] { top:0; left:50%; bottom:auto; transform:translateX(-50%); }
  .drawer-toggle span { display:block; font-size:9px; line-height:1; transition:transform .2s ease; }
  .detail-content[data-drawer="expanded"] .drawer-toggle span { transform:translateY(1px); }
  .detail-content .avatar-large { width:32px; height:32px; font-size:11px; }
  .detail-content .detail-author-row { margin-bottom:16px; }
  .detail-content[data-drawer="collapsed"] .detail-caption,
  .detail-content[data-drawer="collapsed"] .detail-stats,
  .detail-content[data-drawer="collapsed"] .detail-fields,
  .detail-content[data-drawer="collapsed"] .detail-actions { visibility:hidden; }
  .gallery[data-columns="3"] .author { font-size:12px; }
  .gallery[data-columns="3"] .caption { font-size:11px; line-height:1.35; }
  .gallery[data-columns="3"] .card-stats { gap:7px; font-size:11px; }
  .gallery[data-columns="3"] .avatar { width:22px; height:22px; font-size:10px; }
  .gallery[data-columns="3"] .author-line { gap:5px; }
  .gallery[data-columns="4"] .item-body { padding:6px; }
  .gallery[data-columns="4"] .author { font-size:10px; }
  .gallery[data-columns="4"] .caption { font-size:9px; line-height:1.3; min-height:35px; margin-top:8px; }
  .gallery[data-columns="4"] .card-stats { gap:4px; font-size:9px; }
  .gallery[data-columns="4"] .avatar { width:18px; height:18px; font-size:8px; }
  .gallery[data-columns="4"] .author-line { gap:3px; }
  .gallery[data-columns="4"] .icon-button { width:26px; min-height:26px; font-size:11px; }
  .gallery[data-columns="4"] .duration-badge { padding:2px 4px; font-size:10px; }
}
@media (min-width:681px) and (max-width:900px) { .detail-modal-card { grid-template-columns:1fr; max-height:calc(100vh - 24px); overflow:auto; } .detail-media-wrap { min-height:0; aspect-ratio:9 / 11; } .detail-media-wrap > video { max-height:none; } .detail-content { overflow:visible; padding:24px; } }
@media (max-width:680px) { .topbar,main { width:min(100% - 24px,1440px); } .topbar { align-items:flex-start; flex-direction:column; } .topbar-right { align-items:flex-start; width:100%; } .nav-links { gap:12px; flex-wrap:wrap; } .toolbar { align-items:stretch; flex-wrap:wrap; } .selection-tools { width:100%; margin-right:0; } input { flex-basis:100%; } select, .toolbar > button { flex:1; } .gallery { gap:8px; } .item-body { padding:8px; } .time { display:none; } .detail-fields { grid-template-columns:1fr; } .settings-panel { margin-top:24px; padding:18px; } .settings-actions { align-items:stretch; flex-direction:column; } .settings-actions button { width:100%; } .telegram-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } .telegram-summary-item:first-child { grid-column:span 3; } .settings-section-heading { align-items:stretch; flex-direction:column; } .settings-section-heading button { width:100%; } .maintenance-file { display:grid; gap:8px; } .maintenance-file time { white-space:normal; } }
@media (max-width:420px) { .gallery { grid-template-columns:repeat(var(--mobile-columns),minmax(0,1fr)); } }