/* =========================================================================
   slivhub-skin.css — DRAFT-MATCHED SKIN (slivhb.pro reference)
   Loaded LAST (after cy-redesign.css). Black + orange, SHARP corners (no
   rounding), 4-col catalog grid, title-below cards. Stylish/2026, dark-first.
   Palette: bg #0b0b0b · panel #111 · card #151515 · border #27272a (zinc-800)
            border-strong #3f3f46 (zinc-700) · orange #fe6e00
   ========================================================================= */
:root, :root:not([data-theme="light"]) {
  /* exact draft palette */
  --c-bg:            #0b0b0b;
  --c-surface:       #111111;
  --c-surface-2:     #151515;
  --c-surface-3:     #1c1c1c;
  --c-border:        #27272a;   /* zinc-800 */
  --c-border-strong: #3f3f46;   /* zinc-700 */
  --c-text:          #f4f4f5;   /* zinc-100 */
  --c-text-muted:    #a1a1aa;   /* zinc-400 */
  --c-text-soft:     #71717a;   /* zinc-500 */

  /* orange system (draft orange-500 / -400) */
  --brand-l: 70.5%; --brand-c: 0.213; --brand-h: 47.6;
  --c-primary:        #fe6e00;
  --c-primary-hover:  #ff8a2b;
  --c-primary-active: #e05f00;
  --c-primary-soft:   rgba(254,110,0,.12);
  --c-primary-ring:   rgba(254,110,0,.30);
  --cy-violet:        #ff9a3d;   /* warm secondary (kills any leftover 2nd hue) */

  /* SHARP — no rounding */
  --c-radius:     2px;
  --c-radius-sm:  2px;
  --c-radius-lg:  3px;
  --c-radius-pill:3px;

  /* flat, tight shadows (sharp aesthetic) */
  --c-shadow-sm: 0 1px 0 rgba(0,0,0,.5);
  --c-shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --c-shadow-lg: 0 18px 44px rgba(0,0,0,.6);
  --grad-brand:       linear-gradient(180deg,#ff8a2b,#fe6e00);
  --grad-brand-hover: linear-gradient(180deg,#ff9a45,#ff7d14);
}

html, body { background: #0b0b0b !important; color: var(--c-text); }

/* kill leftover rounding globally on our components */
.site-header, .site-header *,
.sidebar-card, .search-box__input, .search-box__btn, .sidebar-login-form input,
.profile-card, .profile-card__link, .profile-card__img,
.topnews-panel, .btn, button, input, .cy-btn, .site-nav a {
  border-radius:2px!important;
}

/* ---------- Header ---------- */
.site-header {
  background: rgba(11,11,11,.95) !important;
  border-bottom: 1px solid var(--c-border) !important;
  backdrop-filter: blur(14px);
}
/* brand = uploaded wordmark SVG (orange+white); hide text title + square dot */
.site-brand { gap: 8px !important; }
.site-brand__logo {
  display: inline-block !important; height: 32px !important; width: auto !important;
  max-width: 190px; border-radius:2px!important;
}
.site-brand__title { display: none !important; }
.site-brand::after { display: none !important; }
/* nav = crisp ghost buttons; hover = orange */
.site-nav a, .nav_ext a {
  border: 1px solid transparent !important; color: var(--c-text-muted) !important;
  font-weight: 700 !important; padding: 9px 14px !important; transition: all .15s;
}
.site-nav a:hover, .nav_ext a:hover {
  border-color: var(--c-border-strong) !important; background: var(--c-surface-2) !important;
  color: var(--c-primary) !important;
}
/* active / current page nav → filled orange */
.site-nav a.is-current, .site-nav a.active, .site-nav a[aria-current="page"], .site-nav li.active a, .site-nav .uk-active a {
  background: var(--c-primary) !important; color: #000 !important;
  border-color: var(--c-primary) !important;
}

/* ---------- Section header accent ---------- */
.news-list, #dle-content { }
h1, .content-title, .cy-section-title {
  letter-spacing: -.02em;
}

/* ---------- Catalog grid: 2 / 3 / 4 columns ---------- */
.news-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
}
@media (min-width: 768px)  { .news-list { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (min-width: 1180px) { .news-list { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 16px !important; } }

/* ---------- Cards: ONE bordered box, image on top, title BELOW ---------- */
.profile-card {
  display: flex !important; flex-direction: column !important; height: 100%;
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important;
  overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.4);
  transition: transform .18s, border-color .18s, background .18s;
}
.profile-card:hover {
  transform: translateY(-2px); border-color: rgba(254,110,0,.85) !important;
  background: var(--c-surface-3) !important;
}
.profile-card__link {
  order: 1 !important; display: block !important; height: auto !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  transform: none !important; overflow: hidden;
}
.profile-card__link:hover { transform: none !important; border: 0 !important; background: none !important; }
.profile-card__img, .profile-card__link > span:first-child {
  aspect-ratio: 3/4 !important; width: 100% !important; height: auto !important;
  object-fit: cover !important; display: block; background: #0a0a0a; transition: transform .3s;
}
.profile-card:hover .profile-card__img { transform: scale(1.04); }
.profile-card__link::before, .profile-card__link::after,
.profile-card__title::before, .profile-card__title::after { content: none !important; display: none !important; }
.profile-card__title {
  order: 2 !important; position: static !important; inset: auto !important; background: none !important;
  padding: 11px 12px !important; margin: 0 !important;
  font-weight: 800 !important; font-size: 14px !important; line-height: 1.35 !important;
  text-shadow: none !important; transition: color .15s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.profile-card__title, .profile-card__title a { color: var(--c-text) !important; text-decoration: none !important; }
.profile-card:hover .profile-card__title, .profile-card:hover .profile-card__title a { color: var(--c-primary) !important; }

/* ---------- Sidebar panels ---------- */
.sidebar-card, .topnews-panel, .cysup__panel, .search-box {
  background: var(--c-surface) !important; border: 1px solid var(--c-border) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.4);
}
.sidebar-card h2, .sidebar-card .sidebar-card__title, .topnews-widget h2 {
  color: #fff !important; font-weight: 900 !important; letter-spacing: -.01em;
}
/* search + login inputs */
.search-box__input, .sidebar-login-form input, input[type="text"], input[type="search"],
input[type="password"], input[type="email"] {
  background: #0b0b0b !important; border: 1px solid var(--c-border-strong) !important;
  color: var(--c-text) !important;
}
.search-box__input:focus, .sidebar-login-form input:focus,
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="email"]:focus {
  border-color: var(--c-primary) !important; box-shadow: 0 0 0 2px rgba(254,110,0,.2) !important; outline: none !important;
}
.search-box__btn { background: var(--c-primary) !important; color: #000 !important; border: 0 !important; }
.search-box__btn:hover { background: var(--c-primary-hover) !important; }

/* topnews list items */
.topnews-panel a, .topnews-widget a {
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important;
  transition: border-color .15s, background .15s;
}
.topnews-panel a:hover, .topnews-widget a:hover {
  border-color: rgba(254,110,0,.8) !important; background: var(--c-surface-3) !important;
}

/* ---------- Buttons ---------- */
.cy-btn--primary, .btn-primary, button[type="submit"], .sidebar-login-form button,
.login-form button, .primary-btn, a.cy-cta, .cy-login-open, .register-open {
  background: var(--c-primary) !important; color: #000 !important; border: 1px solid var(--c-primary) !important;
  font-weight: 800 !important; transition: background .15s;
}
.cy-btn--primary:hover, .btn-primary:hover, button[type="submit"]:hover,
.sidebar-login-form button:hover, .login-form button:hover, .primary-btn:hover {
  background: var(--c-primary-hover) !important; border-color: var(--c-primary-hover) !important;
}
/* ghost / telegram-styled secondary buttons keep crisp borders */
.cy-btn--ghost, .btn-ghost { border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; background: var(--c-surface-2) !important; }
.cy-btn--ghost:hover, .btn-ghost:hover { border-color: var(--c-primary) !important; color: var(--c-primary) !important; }

/* links */
a { color: inherit; }
.cy-seo-text a, .content a { color: var(--c-primary); }

/* ---------- Footer ---------- */
.site-footer, footer, .footer { background: #0b0b0b !important; border-top: 1px solid var(--c-border) !important; }
.site-footer a:hover, footer a:hover { color: var(--c-primary) !important; }
.footer-brand { display: inline-block; }
.footer-logo { height: 40px !important; width: auto !important; display: inline-block; border-radius:2px!important; }

/* scrollbar */
* { scrollbar-color: var(--c-primary) transparent; }

/* ---- topnews tab accents: kill pink likes-heart, keep on-theme ---- */
:root, :root:not([data-theme="light"]) { --tn-likes:#fe6e00; --tn-views:#ff9a3d; --tn-comm:#d1d5db; }
.topnews-tab.is-active { color: var(--c-primary) !important; }
.topnews-tab--likes.is-active, .topnews-tab--likes.is-active .topnews-tab__icon { color:#fe6e00 !important; }
.topnews-tab--likes.is-active .topnews-tab__icon { background: rgba(254,110,0,.14) !important; }
.topnews-tab--views.is-active, .topnews-tab--views.is-active .topnews-tab__icon { color:#ff9a3d !important; }
.topnews-tab--views.is-active .topnews-tab__icon { background: rgba(255,154,61,.14) !important; }
.topnews-tab--comm.is-active, .topnews-tab--comm.is-active .topnews-tab__icon { color:#d1d5db !important; }
.topnews-tab--comm.is-active .topnews-tab__icon { background: rgba(209,213,219,.12) !important; }

/* ==== FORCE card layout: image on top, title BELOW (beats .news-list + :has overlay) ==== */
.news-list .profile-card,
.news-list .profile-card:has(.shortstory-imported) {
  aspect-ratio: auto !important; display: flex !important; flex-direction: column !important;
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important;
  border-radius:2px!important; overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.4) !important;
  transition: transform .18s, border-color .18s, background .18s;
}
.news-list .profile-card:hover {
  transform: translateY(-2px) !important; border-color: rgba(254,110,0,.85) !important;
  background: var(--c-surface-3) !important;
}
.news-list .profile-card__link,
.news-list .profile-card:has(.shortstory-imported) .profile-card__link {
  position: static !important; inset: auto !important; order: 1 !important;
  display: block !important; width: 100% !important; height: auto !important;
  border: 0 !important; background: none !important; box-shadow: none !important; transform: none !important;
}
.news-list .profile-card__img,
.news-list .profile-card:has(.shortstory-imported) .profile-card__img {
  position: static !important; inset: auto !important; aspect-ratio: 3/4 !important;
  width: 100% !important; height: auto !important; object-fit: cover !important; display: block; transition: transform .3s;
}
.news-list .profile-card:hover .profile-card__img { transform: scale(1.04) !important; }
.news-list .profile-card__title,
.news-list .profile-card:has(.shortstory-imported) .profile-card__title {
  position: static !important; inset: auto !important; order: 2 !important; background: none !important;
  padding: 11px 12px !important; margin: 0 !important; text-shadow: none !important;
  font-weight: 800 !important; font-size: 14px !important; line-height: 1.35 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-list .profile-card__title, .news-list .profile-card__title a { color: var(--c-text) !important; text-decoration: none !important; }
.news-list .profile-card:hover .profile-card__title, .news-list .profile-card:hover .profile-card__title a { color: var(--c-primary) !important; }

/* ---- notice/alert boxes: kill teal, match theme (dark + orange accent) ---- */
.alert, .alert-info, .alert.alert-info, .alert.alert-warning, .alert.alert-success, .info, .cy-notice {
  background: var(--c-surface) !important; border: 1px solid var(--c-border) !important;
  border-left: 3px solid var(--c-primary) !important; color: var(--c-text-muted) !important;
  border-radius:2px!important; background-image: none !important;
}
.alert a, .alert-info a, .alert.alert-info a, .info a, .cy-notice a { color: var(--c-primary) !important; }
/* keep Telegram buttons the brand blue (matches draft) */
.btn-tg-login { background: #229ED9 !important; color: #fff !important; border: 0 !important; border-radius:2px!important; }
.btn-tg-login:hover { background: #1b8ec2 !important; }
