/* ================================
   SlyWink.net v7 · Light · DLE 19.1
   ================================ */

/* ================================
   BLOCK: CSS Variables
   ================================ */
:root {
  --a: #e84393;
  --a-d: #c0367a;
  --a-l: #fd79a8;
  --v: #6c5ce7;
  --bg: #f4f5f7;
  --bg2: #fff;
  --s: #fff;
  --s2: #f0f1f4;
  --b: #e0e2e7;
  --t: #494958;
  --m: #8c8c9e;
  --h: #1a1a2e;
  --f: 'Inter', system-ui, sans-serif;
  --r: 8px;
  --rl: 12px;
  --e: .2s ease;
  --g: 12px;
  --nw: 56px;
  --mw: 1400px;
  --hh: 60px;
  --ss: 0 1px 3px rgba(0,0,0,.05);
  --sm: 0 4px 16px rgba(0,0,0,.07);
  --sl: 0 8px 32px rgba(0,0,0,.09);
}

/* ================================
   BLOCK: Reset & Base
   ================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
  padding: 0; margin: 0;
  background: var(--bg);
  font-family: var(--f);
  font-size: 14px;
  color: var(--t);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
input, textarea, select, button { font-family: var(--f); }
h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; color: var(--h); font-weight: 700; }
a { text-decoration: none; color: var(--a); transition: color var(--e); }
a:hover { color: var(--a-d); }
img { border: none; max-width: 100%; }

/* ================================
   BLOCK: Header
   ================================ */
.top-line {
  background: var(--bg2);
  position: sticky; top: 0; z-index: 900;
  border-bottom: 1px solid var(--b);
  box-shadow: var(--ss);
}
.top-line2 {
  height: var(--hh); max-width: var(--mw); width: 100%;
  margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 16px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; height: var(--hh); font-size: 0; }
.logo svg { height: 28px; width: auto; }
.mob-menu {
  display: none; width: 40px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center;
  border-radius: var(--r); color: var(--m);
}
.mob-menu:hover { background: var(--s2); color: var(--h); }
.search-block { position: relative; flex: 1; max-width: 520px; }
.search-block form { padding: 0; margin: 0; display: flex; align-items: center; }
.form-text {
  width: 100%; padding: 9px 44px 9px 14px;
  border: 1px solid var(--b); border-radius: 24px;
  background: var(--s2); color: var(--t); font-size: 14px; outline: none;
  transition: border-color var(--e), box-shadow var(--e);
}
.form-text::placeholder { color: var(--m); }
.form-text:focus { border-color: var(--a); box-shadow: 0 0 0 3px rgba(232,67,147,.1); background: #fff; }
.form-search {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--m); cursor: pointer; border-radius: 50%;
}
.form-search:hover { color: var(--a); }
.head-soc { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--m); }
.head-soc a { color: var(--m); }
.head-soc a:hover { color: var(--h); }

/* ================================
   BLOCK: Left Navigation
   ================================ */
.main-center-block { max-width: var(--mw); width: 100%; margin: 0 auto; position: relative; padding: 0 0 0 var(--nw); }
.left-col {
  position: fixed; left: 0; top: var(--hh); width: var(--nw);
  height: calc(100vh - var(--hh)); z-index: 800;
  display: flex; flex-direction: column;
  background: var(--bg2); border-right: 1px solid var(--b);
}
.main-menu { display: flex; flex-direction: column; padding: 8px 0; gap: 2px; overflow-y: auto; flex: 1; }
.main-menu ul { margin: 0; padding: 0; list-style: none; display: contents; }
.main-menu ul li { margin: 0; padding: 0; list-style: none; }
.menu-ul { margin: 0; padding: 0; list-style: none; }
.main-menu ul ul {
  display: none; position: absolute; left: var(--nw); top: 0;
  background: var(--s); border: 1px solid var(--b);
  border-radius: 0 var(--r) var(--r) 0;
  min-width: 180px; padding: 4px; box-shadow: var(--sl); z-index: 999;
}
.main-menu ul ul .main-menu-link { height: 36px; border-radius: var(--r); border: none; width: auto; justify-content: flex-start; padding: 0 12px; gap: 8px; }
.main-menu ul ul .main-menu-link span { position: static; display: block; background: none; padding: 0; color: var(--t); font-size: 13px; border: none; height: auto; line-height: 36px; box-shadow: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.main-menu-link {
  width: var(--nw); height: 44px; display: flex; align-items: center; justify-content: center;
  position: relative; color: var(--m); border: none; background: transparent;
  transition: background var(--e), color var(--e);
}
.main-menu-link svg, .main-menu-link i { font-size: 18px; flex-shrink: 0; transition: color var(--e); }
.main-menu-link span {
  position: absolute; left: var(--nw); top: 0; height: 44px; line-height: 44px;
  padding: 0 14px 0 10px; background: var(--s); color: var(--h);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--b); border-left: none;
  border-radius: 0 var(--r) var(--r) 0; box-shadow: var(--sm);
  opacity: 0; visibility: hidden; transform: translateX(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  pointer-events: none; z-index: 10;
}
.main-menu-link:hover { background: var(--s2); color: var(--a); }
.main-menu-link:hover span { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }
.main-menu-link:hover svg, .main-menu-link:hover i { color: var(--a); }
.sub-li { position: relative; }
.sub-li:hover > ul { display: block; }
.show-menu > ul { display: block !important; }
.right-col { min-height: calc(100vh - var(--hh)); }
.main-page { padding: 16px 0 0; }

/* ================================
   BLOCK: Content Grid
   ================================ */
#dle-content { columns: 5 220px; column-gap: var(--g); padding: 16px 16px 0; }
#dle-content:has(.fn),
#dle-content:has(.stt-block),
#dle-content:has(.s-block),
#dle-content:has(.user-profile-tt) { columns: unset; padding: 16px; }

/* ================================
   BLOCK: Card (shortstory / search)
   ================================ */
.main-news {
  display: inline-block; width: 100%; break-inside: avoid;
  margin: 0 0 var(--g); background: var(--s); border-radius: var(--rl);
  overflow: hidden; transition: transform .2s, box-shadow .2s;
  border: 1px solid var(--b); animation: fadeIn .3s ease both;
}
.main-news:hover { transform: translateY(-3px); box-shadow: var(--sl); }
.main-news-image { display: block; position: relative; overflow: hidden; background: var(--s2); text-decoration: none; }
.main-news-image img { width: 100%; height: auto; display: block; transition: transform .35s; }
.main-news:hover .main-news-image img { transform: scale(1.04); }
.main-news-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
  padding: 28px 10px 10px; opacity: 0; transition: opacity .25s;
}
.main-news:hover .main-news-overlay { opacity: 1; }
.main-news-overlay .main-news-title { margin: 0; padding: 0; font-size: 13px; font-weight: 600; color: #fff; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.main-news-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.main-news-badges .main-news-date { display: inline-flex; align-items: center; gap: 3px; background: rgba(255,255,255,.92); color: var(--t); font-size: 11px; padding: 3px 8px; border-radius: 20px; margin: 0; }
.main-news-cat-badge { display: inline-block; background: var(--a); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }
.main-news-cat { display: none; }
.main-news-meta { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 12px; color: var(--m); }
.main-news-like { color: var(--m); text-decoration: none; display: flex; align-items: center; gap: 4px; }
.main-news-like svg { color: var(--a); }
.main-news-like:hover { color: var(--a); }
.main-news-comments { display: flex; align-items: center; gap: 4px; }
.main-news-comments.gotoloadcomments { cursor: pointer; }
.main-news-comments.gotoloadcomments:hover { color: var(--a); }
.main-news-views { display: flex; align-items: center; gap: 4px; }
.main-com-alert, .main-news-image-link, .main-news-image-u { display: none; }
.main-news-title { margin: 0 12px 10px; color: var(--h); font-size: 14px; font-weight: 600; line-height: 1.4; }
.main-news-title a { color: var(--h); }
.main-news-title a:hover { color: var(--a); }
.main-news-date { display: inline-flex; align-items: center; gap: 4px; }

/* ================================
   BLOCK: Breadcrumbs
   ================================ */
.speed-b { padding: 12px 16px; font-size: 13px; color: var(--m); }
.speed-b a { color: var(--m); }
.speed-b a:hover { color: var(--a); }

/* ================================
   BLOCK: Pagination
   ================================ */
.nav-cont { text-align: center; padding: 24px 16px; color: var(--m); font-size: 13px; }
.load-more { display: inline-block; padding: 12px 36px; background: var(--a); color: #fff; font-size: 14px; font-weight: 600; border-radius: 24px; cursor: pointer; transition: background var(--e); margin: 0 0 12px; }
.load-more:hover { background: var(--a-d); }
.nomorenews { font-size: 16px; color: var(--m); padding: 40px; text-align: center; }
.navigation { clear: both; padding: 16px 0 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.navigation-left, .navigation-right, .navigation-center { display: contents; }
.navigation a, .navigation span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 20px; font-size: 14px; border: 1px solid var(--b); background: var(--s); color: var(--t); transition: all var(--e); }
.navigation a:hover { background: var(--a); color: #fff; border-color: var(--a); }
.navigation span.nav_current { background: var(--a); color: #fff; border-color: var(--a); }

/* ================================
   BLOCK: Fullstory (.fn)
   ================================ */
.fn { background: var(--s); border: 1px solid var(--b); border-radius: var(--rl); overflow: hidden; max-width: 900px; margin: 0 auto 20px; }
.fn-head { padding: 20px 24px 16px; }
.fn-cat a { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 3px 10px; border-radius: 20px; background: var(--s2); color: var(--m); border: 1px solid var(--b); text-decoration: none; margin-bottom: 10px; }
.fn-cat a:hover { color: var(--a); border-color: var(--a); }
.fn-title { font-size: 20px; font-weight: 700; color: var(--h); line-height: 1.35; margin: 0 0 10px; }
.fn-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--m); }
.fn-meta span { display: inline-flex; align-items: center; gap: 4px; }
.fn-meta svg { opacity: .6; }
.fn-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--b); }

/* Viewer */
.fn-viewer { position: relative; background: #0f0f13; overflow: hidden; }
.fn-viewer-stage { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.fn-viewer-stage img { display: block; max-width: 100%; max-height: 80vh; height: auto; object-fit: contain; margin: 0 auto; }
.fn-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: rgba(255,255,255,.85); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 3; }
.fn-nav:hover { background: rgba(0,0,0,.65); color: #fff; }
.fn-nav-prev { left: 12px; }
.fn-nav-next { right: 12px; }
.fn-post-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .15s; z-index: 3; }
.fn-post-arrow:hover { color: #fff; background: rgba(0,0,0,.55); }
.fn-post-arrow-left { left: 12px; }
.fn-post-arrow-right { right: 12px; }
.fn-counter { position: absolute; bottom: 10px; right: 12px; background: rgba(0,0,0,.45); color: rgba(255,255,255,.9); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; pointer-events: none; }

/* Thumbnails */
.fn-thumbs { border-top: 1px solid var(--b); background: var(--s2); }
.fn-thumbs-inner { display: flex; gap: 5px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; }
.fn-thumbs-inner::-webkit-scrollbar { display: none; }
.fn-thumb { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; cursor: pointer; flex-shrink: 0; opacity: .5; border: 2px solid transparent; transition: opacity .15s, border-color .15s; }
.fn-thumb--active { opacity: 1; border-color: var(--a); }
.fn-thumb:hover { opacity: .85; }

/* Action bar */
.fn-actions { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--b); gap: 8px; }
.fn-actions-left, .fn-actions-right { display: flex; align-items: center; gap: 8px; }
.fn-act-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--b); background: none; font-size: 13px; font-weight: 500; color: var(--m); cursor: pointer; transition: all .15s; font-family: var(--f); text-decoration: none; }
.fn-act-btn:hover { border-color: var(--a); color: var(--a); }

/* Like */
.fn-like-btn svg { transition: fill .15s, stroke .15s; }
.fn-like-btn:hover { border-color: var(--a); color: var(--a); }
.fn-like-btn:hover svg { fill: var(--a); stroke: var(--a); }

/* +/- rating */
.fn-rating-wrap { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 20px; border: 1px solid var(--b); font-size: 13px; font-weight: 600; color: var(--h); }
.fn-rate-minus, .fn-rate-plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--b); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--m); transition: all .15s; padding: 0; }
.fn-rate-plus:hover { border-color: #22c55e; color: #22c55e; }
.fn-rate-minus:hover { border-color: #ef4444; color: #ef4444; }

/* Favorites */
.fn-fav-btn { padding: 7px 12px; }
.fn-fav-btn svg { transition: all .15s; }
.fn-fav-btn--add:hover { border-color: #f59e0b; color: #f59e0b; }
.fn-fav-btn--add:hover svg { stroke: #f59e0b; }
.fn-fav-btn--del { border-color: #f59e0b; color: #f59e0b; }
.fn-fav-btn--del svg { fill: #f59e0b; }
.fn-fav-btn--del:hover { background: #fffbeb; }

/* Share */
.fn-share-btn { padding: 7px 12px; }

/* Text */
.fn-text { font-size: 14px; line-height: 1.75; color: var(--t); }
.fn-text:not(:empty) { padding: 18px 24px; border-top: 1px solid var(--b); }
.fn-text p, .fn-text div, .fn-text span { display: block; }
.fn-text img { display: none; }
.fn-text a { color: var(--a); }

/* Tags */
.fn-tags { padding: 0 24px 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.fn-tags a { display: inline-block; padding: 4px 13px; background: var(--s2); border: 1px solid var(--b); border-radius: 20px; font-size: 12px; color: var(--m); text-decoration: none; transition: all .15s; }
.fn-tags a:hover { background: var(--a); color: #fff; border-color: var(--a); }

/* Post nav */
.fn-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--b); border-top: 1px solid var(--b); }
.fn-post-nav-card { background: var(--s); padding: 14px 16px; display: flex; align-items: center; gap: 10px; text-decoration: none; transition: background .15s; }
.fn-post-nav-card:hover { background: var(--s2); }
.fn-post-nav-card svg { flex-shrink: 0; color: var(--m); }
.fn-post-nav-card--next { justify-content: flex-end; }
.fn-post-nav-label { font-size: 10px; color: var(--m); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.fn-post-nav-title { font-size: 12px; font-weight: 600; color: var(--h); line-height: 1.3; }

/* ================================
   BLOCK: Comments
   ================================ */
.fn-comments { background: var(--s); border: 1px solid var(--b); border-radius: var(--rl); overflow: hidden; max-width: 900px; margin: 0 auto 12px; }
.fn-comments-header { padding: 14px 20px; border-bottom: 1px solid var(--b); display: flex; align-items: center; justify-content: space-between; }
.fn-comments-title { font-size: 14px; font-weight: 700; color: var(--h); }
.fn-comments-count { font-size: 11px; color: var(--m); background: var(--s2); border: 1px solid var(--b); padding: 2px 9px; border-radius: 20px; }
.fn-comments-list { padding: 0 20px; }
.fn-comments-list .comment-item:first-child { margin-top: 16px; }
.fn-comments-list .comment-item:last-child .comment-item-text { border-bottom: none; }
.fn-add-comment-btn { display: flex; align-items: center; gap: 7px; padding: 12px 20px; font-size: 13px; font-weight: 500; color: var(--m); cursor: pointer; border-top: 1px solid var(--b); transition: color .15s; }
.fn-add-comment-btn:hover { color: var(--a); }
.fn-com-form { display: none; padding: 0 20px 16px; }
.fn-com-form--open { display: block; }

/* Comment item */
.comment-item { position: relative; padding: 0 0 0 64px; min-height: 56px; margin: 0 0 20px; }
.comment-item-left { position: absolute; left: 0; top: 0; width: 48px; }
.comment-item-image { width: 44px; height: 44px; border-radius: 50%; background: var(--s2); overflow: hidden; position: relative; }
.comment-item-image img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.comment-online { position: absolute; bottom: -2px; right: -2px; font-size: 10px; color: #22c55e; line-height: 1; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.comment-item-date { color: var(--m); font-size: 12px; margin: 0 0 4px; }
.comment-item-date a { color: #d63031; }
.comment-item-author { font-size: 14px; font-weight: 600; color: var(--a); display: inline; margin: 0 12px 0 0; }
.comment-item-author a { color: var(--a); }
.comment-item-time { font-size: 12px; color: var(--m); }
.comment-item-text { padding: 8px 0; color: var(--t); font-size: 14px; line-height: 1.6; border-bottom: 1px solid var(--b); }
.comment-item-text a { color: var(--a); }

/* Comment rating */
.comment-item-rating { margin: 4px 0 0; }
.comment-rating-stars { display: inline-flex; gap: 2px; }
.comment-rating-like { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--m); }
.comment-rating-action { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--b); color: var(--m); transition: all .15s; text-decoration: none; }
.comment-rating-plus { color: var(--a); }
.comment-rating-plus:hover { border-color: var(--a); background: rgba(232,67,147,.06); }
.comment-rating-minus:hover { border-color: #ef4444; color: #ef4444; }
.comment-rating-likes { color: #22c55e; font-weight: 600; }
.comment-rating-dislikes { color: #ef4444; font-weight: 600; }

/* Comment extras */
.comment-item-newslink { margin: 4px 0; font-size: 13px; }
.comment-item-newslink a { color: var(--a); font-weight: 500; }
.comment-item-images { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.comment-item-images img { max-width: 200px; border-radius: var(--r); border: 1px solid var(--b); }
.comment-item-signature { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--b); font-size: 12px; font-style: italic; color: var(--m); }

/* Comment actions */
.comments-item-links { padding: 6px 0; text-align: right; font-size: 12px; }
.comment-action { color: var(--m); margin-left: 10px; text-decoration: none; transition: color .15s; }
.comment-action:hover { color: var(--a); }
.comment-action--del:hover { color: #ef4444; }
.comment-mass-action { display: inline-flex; align-items: center; margin-left: 10px; }
.comment-mass-action input[type="checkbox"] { accent-color: var(--a); }

/* Comment tree */
.comments-tree-list { padding: 0; margin: 0; }
.comments-tree-list li { list-style: none; }
.comments-tree-list ol { padding: 0 0 0 32px; border-left: 2px solid var(--b); margin-left: 22px; background: none; }
.mass_comments_action { display: none; }

/* Add comment form */
.add-comment { margin: 16px 0 0; }
.add-comment .form-line-tt-left { width: 80px; }
.add-comment textarea, .bb_smilies textarea, #commenth { width: 100% !important; min-height: 120px; border: 1px solid var(--b); background: var(--s2); color: var(--t); border-radius: var(--r); padding: 10px 12px; font-size: 14px; font-family: var(--f); outline: none; resize: vertical; }
.add-comment textarea:focus, #commenth:focus { border-color: var(--a); }
.add-comment input[type=text], .add-comment input[type=email] { width: 100%; border: 1px solid var(--b); background: var(--s2); color: var(--t); border-radius: var(--r); padding: 8px 12px; font-size: 14px; outline: none; }
.add-comment input[type=text]:focus, .add-comment input[type=email]:focus { border-color: var(--a); }
.comment-image-upload { margin: 12px 0; font-size: 13px; }
.comment-image-upload a { color: var(--a); font-weight: 500; }
.comment-captcha { display: flex; gap: 8px; align-items: center; }
.comment-captcha img { border-radius: var(--r); }
.bb_smilies, .bbcodes { background: var(--s2) !important; border: 1px solid var(--b) !important; color: var(--t) !important; border-radius: var(--r) !important; cursor: pointer; font-size: 13px !important; padding: 4px 8px !important; margin: 2px !important; }
.bb_smilies:hover, .bbcodes:hover { background: var(--a) !important; color: #fff !important; border-color: var(--a) !important; }

/* ================================
   BLOCK: Related Posts
   ================================ */
.fn-related { max-width: 900px; margin: 0 auto 20px; }
.fn-related-title { color: var(--h); font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.fn-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--g); }
.fn-related-grid .main-news { animation: none; }
.fn-related-grid .main-news-image img { width: 100%; height: 180px; object-fit: cover; }

/* ================================
   BLOCK: Search
   ================================ */
#searchsuggestions { width: 400px; max-width: 90vw; background: var(--s); border: 1px solid var(--b); border-radius: var(--r); box-shadow: var(--sl); z-index: 999; overflow: hidden; }
#searchsuggestions a { display: block; padding: 12px 16px; color: var(--m); font-size: 13px; border-bottom: 1px solid var(--b); }
#searchsuggestions a:hover { background: var(--s2); }
#searchsuggestions a span.searchheading { color: var(--h); font-size: 14px; font-weight: 500; display: block; }
#searchsuggestions span.notfound { display: block; padding: 12px 16px; color: var(--m); }
#searchsuggestions .break { display: none; }
.search-result-num { padding: 12px 0 0; font-size: 13px; color: var(--m); }

/* ================================
   BLOCK: Forms
   ================================ */
.form-line-tt { margin: 0 0 16px; }
.form-line-tt-left { display: inline-block; vertical-align: top; margin: 0 10px 0 0; padding: 5px 0 0; color: var(--m); }
.form-line-tt-right { display: inline-block; vertical-align: top; }
.form-line-tt input, .form-line-tt textarea { border: 1px solid var(--b); background: var(--s2); color: var(--t); border-radius: var(--r); padding: 8px 12px; font-size: 14px; outline: none; }
.form-line-tt input:focus, .form-line-tt textarea:focus { border-color: var(--a); }
.form-submit-block-tt { margin: 0 0 10px; padding: 12px 0; border-top: 1px solid var(--b); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-button-tt { font-size: 14px; cursor: pointer; background: var(--a); color: #fff; padding: 10px 32px; border-radius: 24px; border: none; font-weight: 600; transition: background var(--e); }
.form-button-tt:hover { background: var(--a-d); }
.form-button-tt--secondary { background: var(--s2); color: var(--t); border: 1px solid var(--b); }
.form-button-tt--secondary:hover { background: var(--a); color: #fff; border-color: var(--a); }

/* ================================
   BLOCK: Quotes & Spoilers
   ================================ */
.quote { background: var(--s2); padding: 12px 16px; color: var(--m); border-radius: var(--r); border-left: 3px solid var(--a); margin: 0 0 8px; font-size: 13px; }
.title_spoiler { position: relative; margin: 0 0 4px; }
.title_spoiler a:last-child { display: block; line-height: 36px; padding: 0 12px 0 32px; color: var(--h); font-weight: 600; background: var(--s2); border-radius: var(--r); }
.text_spoiler { border: 1px solid var(--b); padding: 12px; border-radius: var(--r); margin: 0 0 8px; }

/* ================================
   BLOCK: Static / Stats / Sidebar
   ================================ */
.stt-block { background: var(--s); padding: 28px; margin: 0 0 20px; border-radius: var(--rl); border: 1px solid var(--b); }
.stt-block-title { font-size: 24px; color: var(--h); margin: 0 0 16px; }
.stt-block-content { color: var(--t); font-size: 15px; line-height: 1.7; }
.s-block { background: var(--s); padding: 28px; border-radius: var(--rl); border: 1px solid var(--b); margin: 0 0 20px; }
.s-block-title { color: var(--h); font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.s-block-content { }
.statss { color: var(--t); font-size: 13px; line-height: 1.8; }
.statss td { padding: 4px 16px 4px 0; vertical-align: top; }
.vote-l { margin: 0 0 12px; }
.vote-buttom { padding: 8px 20px; background: var(--a); color: #fff; border: none; border-radius: 24px; cursor: pointer; font-size: 13px; font-weight: 600; margin: 0 4px 8px 0; }
.vote-buttom:hover { background: var(--a-d); }
.vote-buttom2 { background: var(--s2); color: var(--t); border: 1px solid var(--b); }
.vote-buttom2:hover { background: var(--a); color: #fff; }
.top-news-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); color: var(--t); transition: background var(--e); }
.top-news-item:hover { background: var(--s2); color: var(--a); }
.top-news-item-image { width: 40px; height: 40px; border-radius: var(--r); background-size: cover; background-position: center; flex-shrink: 0; }
.top-news-item i { font-style: normal; font-size: 13px; line-height: 1.4; }

/* Add news */
.add-news-table { width: 100%; border-collapse: collapse; }
.add-news-table td { padding: 8px 0; vertical-align: top; }
.dhfjf { margin: 12px 0; }

/* ================================
   BLOCK: Private Messages
   ================================ */
.pmtt-menu { margin: 0 0 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.pmtt-menu .form-button-tt { padding: 8px 16px; font-size: 13px; }
.pm-status { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 13px; color: var(--m); }
.pm-status-text { white-space: nowrap; }
.pm-list { margin: 16px 0 0; }
.pm-list table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pm-list table td, .pm-list table th { padding: 10px 8px; border-bottom: 1px solid var(--b); text-align: left; }
.pm-list table tr:hover td { background: var(--s2); }
.pm-list a { color: var(--a); font-weight: 500; }
.pm-compose { margin: 16px 0 0; }
.pm-compose-title { font-size: 16px; font-weight: 600; color: var(--h); margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--b); }
.pm-captcha { display: flex; gap: 8px; align-items: center; }
.pm-dialog { margin: 16px 0 0; }
.pm-dialog-header { margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--b); }
.pm-dialog-subject { font-size: 18px; font-weight: 700; color: var(--h); margin: 0 0 4px; }
.pm-dialog-with { font-size: 13px; color: var(--m); }
.pm-dialog-with a { color: var(--a); font-weight: 500; }
.pm-reply { margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--b); }
.pm-reply-title { font-size: 15px; font-weight: 600; color: var(--h); margin: 0 0 12px; }
table.pm { width: 100%; border-collapse: collapse; font-size: 13px; }
table.pm td { padding: 8px; border-bottom: 1px solid var(--b); }

/* ================================
   BLOCK: User Profile
   ================================ */
.user-profile-tt { background: var(--s); padding: 32px; border-radius: var(--rl); border: 1px solid var(--b); max-width: 700px; margin: 0 auto; }
.profile-tt-header { display: flex; align-items: center; gap: 24px; margin: 0 0 24px; flex-wrap: wrap; }
.profile-tt-avatar { width: 100px; height: 100px; border-radius: 50%; border: 3px solid var(--b); overflow: hidden; flex-shrink: 0; }
.profile-tt-avatar img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; }
.profile-tt-name { font-size: 24px; font-weight: 700; color: var(--h); margin: 0 0 4px; }
.profile-tt-group { font-size: 14px; color: var(--m); }
.profile-tt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 0 0 24px; font-size: 14px; }
.profile-tt-stats dt { color: var(--m); font-weight: 400; }
.profile-tt-stats dd { margin: 0; color: var(--t); font-weight: 500; }
.profile-tt-menu { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-tt-menu a { display: inline-block; padding: 8px 20px; background: var(--a); color: #fff; border-radius: 24px; font-size: 13px; font-weight: 600; transition: background var(--e); }
.profile-tt-menu a:hover { background: var(--a-d); }
.profile-tt-menu a.profile-tt-btn-secondary { background: var(--s2); color: var(--t); border: 1px solid var(--b); }
.profile-tt-menu a.profile-tt-btn-secondary:hover { background: var(--a); color: #fff; border-color: var(--a); }
.user-card-tt { padding: 24px 0 0 120px; position: relative; }
.user-card-tt-left { position: absolute; left: 10px; width: 90px; top: 10px; }
.user-card-tt-image { border: 3px solid var(--b); border-radius: 50%; width: 80px; height: 80px; overflow: hidden; }
.user-card-tt-image img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }

/* ================================
   BLOCK: DLE Notifications
   ================================ */
.ui-widget-overlay { position: fixed !important; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3); z-index: 9998; }
.ui-dialog { position: fixed !important; z-index: 9999 !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; border: 1px solid var(--b); background: var(--s); color: var(--t); box-shadow: var(--sl); border-radius: var(--rl); overflow: hidden; max-width: 500px; width: 90%; margin: 0; }
.ui-dialog-titlebar { border-bottom: 1px solid var(--b); padding: 14px 20px; background: var(--s2); color: var(--h); font-weight: 600; font-size: 15px; position: relative; }
.ui-dialog-titlebar-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--s); opacity: .6; font-size: 0; cursor: pointer; border: 1px solid var(--b); }
.ui-dialog-titlebar-close:hover { opacity: 1; }
.ui-dialog-content { padding: 20px; font-size: 14px; line-height: 1.6; }
.ui-dialog-buttonpane, .ui-dialog-buttonset { background: var(--s2); border-top: 1px solid var(--b); padding: 12px 16px; display: flex; justify-content: flex-end; gap: 8px; }
.ui-dialog-buttonset button, .ui-dialog-buttonpane button { padding: 8px 20px; background: var(--a); color: #fff; border: none; border-radius: 24px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: var(--f); }
.ui-dialog-buttonset button:hover, .ui-dialog-buttonpane button:hover { background: var(--a-d); }
#dlealert, #dle-alert, .dle-alert-text { position: fixed !important; z-index: 99999 !important; left: 50% !important; top: 20px !important; transform: translateX(-50%) !important; background: var(--s) !important; border: 1px solid var(--b) !important; border-radius: var(--rl) !important; padding: 14px 24px !important; color: var(--t) !important; font-size: 14px !important; box-shadow: var(--sl) !important; max-width: 400px !important; text-align: center !important; }
.dle-alert, .DLEalert, #dle-info, .info, .berror { background: var(--s); border: 1px solid var(--b); border-radius: var(--rl); padding: 16px 20px; color: var(--t); font-size: 14px; margin: 0 0 16px; }

/* ============ DLEPush ============ */
.DLEPush{z-index:2001;position:fixed;right:1.2em;top:1.2em}
@keyframes DLEPush-show{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}
.DLEPush-notification.wrapper{animation:DLEPush-show .5s ease both;position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;color:var(--t);margin-bottom:.6em;width:100%;max-width:26em;box-shadow:var(--sl);background:var(--s);border:1px solid var(--b);border-radius:var(--rl)}
.DLEPush-notification .DLEPush-icon{grid-column:1;grid-row:1/span 2;display:flex;align-items:center;justify-content:center;color:#fff;width:3em;height:100%;border-top-left-radius:var(--rl);border-bottom-left-radius:var(--rl);text-align:center}.DLEPush-notification .DLEPush-icon svg{width:1.6em;height:1.6em}
.DLEPush-notification .DLEPush-header{font-weight:600;grid-column:2;grid-row:1;font-size:14px;margin-left:1em;margin-top:.5em}.DLEPush-notification .DLEPush-header:empty{margin-top:0}
.DLEPush-notification .DLEPush-message{grid-column:2;grid-row:2;font-size:13px;margin:.8em 1em}.DLEPush-notification .DLEPush-message li,.DLEPush-notification .DLEPush-message ul{list-style-type:none;padding-left:0}
.DLEPush-notification .DLEPush-close{position:absolute;top:6px;right:8px;font-weight:300;background:none;border:0;font-size:18px;cursor:pointer;line-height:1;padding:0;color:inherit;outline:0;opacity:.65;transition:opacity .15s}.DLEPush-notification .DLEPush-close:hover{opacity:1}
.DLEPush-notification.wrapper.push-success{background-color:#e0f2f1;border-color:#b2dfdb}.DLEPush-notification.wrapper.push-success .DLEPush-icon{background-color:#00897b}
.DLEPush-notification.wrapper.push-warning{background-color:#FFF3E0;border-color:#FFE0B2}.DLEPush-notification.wrapper.push-warning .DLEPush-icon{background-color:#FF9800}
.DLEPush-notification.wrapper.push-error{background-color:#FBE9E7;border-color:#FFCCBC}.DLEPush-notification.wrapper.push-error .DLEPush-icon{background-color:#FF5722}

/* ================================
   BLOCK: Page Forms (register / lostpassword)
   ================================ */
.page-form-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 40px 20px; position: relative; }
.page-form-back { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--s); border: 1px solid var(--b); color: var(--m); transition: all var(--e); text-decoration: none; }
.page-form-back:hover { color: var(--a); border-color: var(--a); box-shadow: var(--sm); }
.page-form-body { width: 100%; max-width: 420px; background: var(--s); border: 1px solid var(--b); border-radius: var(--rl); padding: 32px; box-shadow: var(--sm); }
.page-form-logo { text-align: center; margin: 0 0 24px; }
.page-form-logo svg { height: 32px; }
.page-form-body .stt-block { background: none; border: none; border-radius: 0; padding: 0; margin: 0; }
.page-form-body .stt-block-title { font-size: 20px; text-align: center; margin: 0 0 20px; }
.page-form-body .form-line-tt-left { width: 100px; }
.page-form-body .login-input-text { width: 100%; }

/* ================================
   BLOCK: Footer
   ================================ */
footer.footer { background: #1e2030; margin-top: 40px; padding-left: var(--nw); }
.footer2 { max-width: var(--mw); margin: 0 auto; padding: 40px 24px; display: flex; flex-wrap: wrap; gap: 32px; }
.footer-menu { flex: 0 0 140px; }
.footer-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; margin: 0 0 16px; font-weight: 600; }
.footer-menu-content a { display: block; color: #d1d5db; font-size: 13px; margin: 0 0 8px; }
.footer-menu-content a:hover { color: #fff; }
.footer-text { flex: 1 1 220px; min-width: 180px; }
.footer-text-content { color: #9ca3af; font-size: 13px; line-height: 1.7; }
.footer-copyright { background: #171923; padding-left: var(--nw); }
.footer-copyright2 { max-width: var(--mw); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; flex-wrap: wrap; }
.copiright-text { color: #9ca3af; font-size: 12px; }
.copiright-text a { color: #d1d5db; }
.copiright-text a:hover { color: #fff; }

/* ================================
   BLOCK: Login Panel
   ================================ */
.hidden-panel { display: none; position: fixed; right: 0; top: var(--hh); width: 280px; max-height: calc(100vh - var(--hh)); overflow-y: auto; background: var(--s); border: 1px solid var(--b); border-radius: 0 0 0 var(--rl); box-shadow: var(--sl); z-index: 950; }
.asdrtr { display: block; }
.login-block { padding: 20px; }
.login-line { margin: 0 0 12px; }
.login-input-text { width: 100%; padding: 10px 12px; border: 1px solid var(--b); background: var(--s2); color: var(--t); border-radius: var(--r); font-size: 14px; outline: none; }
.login-input-text:focus { border-color: var(--a); }
.enter { width: 100%; padding: 10px; background: var(--a); color: #fff; border: none; border-radius: 24px; font-size: 14px; font-weight: 600; cursor: pointer; margin: 0 0 12px; }
.enter:hover { background: var(--a-d); }
.reg-link { font-size: 13px; color: var(--m); }
.reg-link a { color: var(--a); }
.login-block2 { padding: 20px; }
.login-ava { margin: 0 0 12px; }
.login-ava2 img { width: 48px; height: 48px; border-radius: 50%; }
.login-user { font-weight: 600; color: var(--h); margin: 0 0 12px; }
.login-link a { display: block; padding: 8px 0; color: var(--t); font-size: 13px; border-bottom: 1px solid var(--b); }
.login-link a:hover { color: var(--a); }
.login-link a i, .login-link a .fa-solid { margin-right: 8px; width: 16px; text-align: center; color: var(--m); font-size: 14px; }
.login-link a:hover i, .login-link a:hover .fa-solid { color: var(--a); }

/* ================================
   BLOCK: Overlay
   ================================ */
.opacity-body { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.25); backdrop-filter: blur(2px); z-index: 799; cursor: pointer; }

/* ================================
   BLOCK: Animation
   ================================ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ================================
   BLOCK: Responsive
   ================================ */
@media (max-width: 1400px) { #dle-content { columns: 4 200px; } }
@media (max-width: 1100px) { #dle-content { columns: 3 180px; } }

@media (max-width: 900px) {
  body { padding-top: var(--hh); }
  .top-line { position: fixed; left: 0; top: 0; width: 100%; }
  .mob-menu { display: flex; }
  .main-center-block { padding: 0; }
  .left-col { position: fixed; left: -280px; top: var(--hh); width: 260px; height: calc(100vh - var(--hh)); overflow-y: auto; transition: left .3s; z-index: 850; background: var(--bg2); border-right: 1px solid var(--b); }
  .vismenu { left: 0; box-shadow: 8px 0 32px rgba(0,0,0,.12); }
  .main-menu { width: 100%; }
  .main-menu-link { width: 100%; justify-content: flex-start; padding: 0 16px; gap: 12px; }
  .main-menu-link svg, .main-menu-link i { position: static; width: 24px; text-align: center; flex-shrink: 0; }
  .main-menu-link span { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; background: none; padding: 0; border: none; box-shadow: none; font-size: 14px; color: var(--t); height: auto; line-height: 44px; }
  .main-menu-link:hover span { color: var(--a); }
  .main-menu ul ul { position: static; border: none; box-shadow: none; min-width: 0; padding: 0 0 0 24px; background: none; }
  .head-soc { display: none; }
  .search-block { flex: 1; max-width: none; }
  footer.footer, .footer-copyright { padding-left: 0; }
  .stt-block, .s-block { margin: 0 0 16px; padding: 20px; border-radius: 0; border-left: none; border-right: none; max-width: none; }
  .fn, .fn-comments, .fn-related { margin: 0 0 8px; border-radius: 0; border-left: none; border-right: none; max-width: none; }
  .fn-head { padding: 14px 16px 12px; }
  .fn-title { font-size: 16px; }
  .fn-text { padding: 14px 16px; }
  .fn-tags { padding: 0 16px 14px; }
  .fn-actions { padding: 8px 12px; }
  .fn-act-btn { padding: 6px 11px; font-size: 12px; }
  .fn-comments-header, .fn-add-comment-btn { padding: 12px 16px; }
  .fn-comments-list { padding: 0 16px; }
  .fn-com-form { padding: 0 16px 14px; }
  .hidden-panel { width: 100%; border-radius: 0; }
  .profile-tt-header { flex-direction: column; align-items: flex-start; }
  .page-form-body { padding: 24px 20px; }
}

@media (max-width: 700px) {
  #dle-content { columns: 2 160px; }
  .fn-title { font-size: 15px; }
  .fn-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  #dle-content { columns: 1; }
  .fn-act-btn .fn-act-label { display: none; }
  .fn-fav-btn .fn-act-label { display: none; }
  .fn-act-btn { padding: 7px 10px; }
  .fn-related-grid { grid-template-columns: repeat(2, 1fr); }
  .comment-item { padding: 0; min-height: auto; }
  .comment-item-left { position: static; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; width: auto; }
  .comment-online { position: static; text-shadow: none; }
  .page-form-body { padding: 20px 16px; }
  .page-form-body .form-line-tt-left { width: 100%; margin: 0 0 4px; }
}

@media print {
  .top-line, .left-col, .footer, .footer-copyright, .nav-cont, .mob-menu { display: none; }
  body { background: #fff; }
  .main-center-block { padding: 0; }
}
/* ================================
   BLOCK: User Profile
   ================================ */
.profile-tt-online  { color: #22c55e; font-size: 13px; }
.profile-tt-offline { color: var(--m); font-size: 13px; }
.profile-tt-pm a    { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--a); color: #fff; border-radius: 20px; font-size: 13px; font-weight: 600; margin-left: auto; }
.profile-tt-pm a:hover { background: var(--a-d); color: #fff; }
.profile-tt-ignore-btn { font-size: 12px; color: var(--m); border-bottom: 1px dashed var(--m); margin-left: 8px; }
.profile-tt-ignore-btn:hover { color: #ef4444; border-color: #ef4444; }
.profile-tt-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--m); margin: 0 0 8px; }
.profile-tt-about { padding: 16px 0; border-top: 1px solid var(--b); font-size: 14px; color: var(--t); line-height: 1.6; }
.profile-tt-tabs { display: flex; align-items: center; gap: 4px; padding: 16px 0 0; border-bottom: 1px solid var(--b); margin: 0 0 16px; }
.profile-tt-tab { background: none; border: none; padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--m); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--e); }
.profile-tt-tab:hover { color: var(--h); }
.profile-tt-tab.active { color: var(--a); border-bottom-color: var(--a); }
.profile-tt-form-list { list-style: none; padding: 0; margin: 0; }
.profile-tt-form-group { padding: 10px 0; border-bottom: 1px solid var(--b); }
.profile-tt-form-group label { display: block; font-size: 13px; color: var(--m); margin: 0 0 6px; }
.profile-tt-input { width: 100%; padding: 9px 12px; border: 1px solid var(--b); border-radius: var(--r); background: var(--s2); color: var(--t); font-size: 14px; outline: none; box-sizing: border-box; }
.profile-tt-input:focus { border-color: var(--a); background: #fff; }
.profile-tt-form-sep { height: 8px; }
.profile-tt-checkbox { margin-top: 6px; font-size: 13px; }
.profile-tt-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.profile-tt-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.profile-tt-soc-btn { display: inline-flex; padding: 5px 12px; background: var(--s2); border: 1px solid var(--b); border-radius: var(--r); font-size: 12px; font-weight: 600; color: var(--t); transition: all var(--e); }
.profile-tt-soc-btn:hover { background: var(--a); border-color: var(--a); color: #fff; }
.profile-tt-social-list { margin-top: 8px; font-size: 13px; color: var(--m); }
.profile-tt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; border-radius: 24px; font-size: 14px; font-weight: 600; font-family: var(--f); background: var(--a); color: #fff; border: none; cursor: pointer; transition: background var(--e); }
.profile-tt-btn:hover { background: var(--a-d); }
.profile-tt-btn-danger { background: #ef4444; margin-left: 8px; }
.profile-tt-btn-danger:hover { background: #dc2626; }
/* MAIN H1 */
.main-h1 {
  padding: 28px 0 20px;
}

.main-h1 h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.3px;
}

/* CAT HERO */
.cat-hero {
  padding: 28px 24px;
  margin: 20px 0;
  background: linear-gradient(135deg, #fdf2f8 0%, #f0e6ff 50%, #e8f0fe 100%);
  border-radius: 16px;
  border: 1px solid rgba(108, 92, 231, 0.08);
}

.cat-hero h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}

.cat-hero-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #6c5ce7;
  margin-bottom: 16px;
}

.cat-hero-sub-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #e84393;
}

.cat-hero-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: #4a4a5a;
  margin: 0;
}

.cat-hero-desc a {
  color: #6c5ce7;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(108, 92, 231, 0.2);
  transition: border-color 0.2s ease;
}

.cat-hero-desc a:hover {
  border-color: #6c5ce7;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .main-h1 {
    padding: 16px 12px 12px;
  }

  .main-h1 h1 {
    font-size: 20px;
  }

  .cat-hero {
    padding: 20px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
  }

  .cat-hero h1 {
    font-size: 19px;
  }

  .cat-hero-sub {
    font-size: 13px;
  }

  .cat-hero-desc {
    font-size: 13px;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .main-h1 h1 {
    font-size: 18px;
  }

  .cat-hero {
    padding: 16px 14px;
    border-radius: 10px;
  }

  .cat-hero h1 {
    font-size: 17px;
  }
}
.ui-form {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ui-form .form-line-tt {
  margin: 0;
}

.ui-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--m);
  margin: 0 0 6px;
}

.login_check {
  display: flex;
  gap: 8px;
  align-items: center;
}

.login_check .login-input-text {
  flex: 1;
}

.login_check button {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--v);
  background: rgba(108, 92, 231, 0.08);
  border: 1px solid rgba(108, 92, 231, 0.2);
  border-radius: var(--r);
  cursor: pointer;
  transition: all var(--e);
  white-space: nowrap;
  font-family: var(--f);
}

.login_check button:hover {
  background: rgba(108, 92, 231, 0.15);
  border-color: rgba(108, 92, 231, 0.3);
}

#result-registration {
  font-size: 13px;
  color: var(--m);
}
.fn-viewer--single {
  background: none;
  padding: 0;
}

.fn-viewer--single .fn-viewer-stage {
  min-height: auto;
}

.fn-viewer--single .fn-viewer-stage img {
  max-height: 85vh;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.fn-viewer--single .fn-post-arrow {
  background: rgba(255,255,255,.85);
  border: 1px solid var(--b);
  color: var(--m);
}

.fn-viewer--single .fn-post-arrow:hover {
  color: var(--a);
  border-color: var(--a);
}
.speedbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 14px 16px;
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.4;
}
.speedbar a {
  color: #6b7280;
  text-decoration: none;
  transition: color .2s;
}
.speedbar a:hover {
  color: #e84393;
}
.speedbar a:first-child::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Tag Cloud Page */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
}
.tag-cloud a {
  display: inline-block;
  padding: 5px 14px;
  background: var(--s2);
  border: 1px solid var(--b);
  border-radius: 20px;
  color: var(--m);
  text-decoration: none;
  transition: all .15s;
  font-size: 13px;
}
.tag-cloud a:hover {
  background: var(--a);
  color: #fff;
  border-color: var(--a);
}
/* Стили для модального окна */
    .modal_age {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }

    .modal_age_wrap {
      max-width: 420px;
      background: #fff;
      padding: 25px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .modal_title {
      text-align: center;
      color: #000;
      font-size: 15px;
      margin-bottom: 15px;
    }

    .modal_age_text {
      text-align: center;
    }

    .modal_age_text span {
      text-transform: uppercase;
      font-size: 17px;
      font-weight: bold;
      color: red;
      margin-bottom: 10px;
      display: inline-block;
    }

    .modal_age_but {
      text-align: center;
      margin-top: 15px;
    }

    .modal_but_yes,
    .modal_but_no {
      display: inline-block;
      padding: 8px 12px;
      border-radius: 5px;
      background: #eee;
      cursor: pointer;
      margin: 0 10px;
      transition: background 0.3s;
    }

    .modal_but_yes:hover,
    .modal_but_no:hover {
      background: #ddd;
    }