/**************************
    GLOBAL: COLORS & VARS
**************************/
:root {
    /* Базові шрифти та розміри */
    --font-main: 'Inter', 'Segoe UI', Arial, sans-serif;
    --radius-xl: 1.2em;
    --radius-md: 0.7em;
    --radius-sm: 0.45em;
    --sp-xs: 0.22em;
    --sp-sm: 0.55em;
    --sp-xl: 0.75em;
    --sp-md: 1em;
    --sp-lg: 1.8em;
    --container-max: 1100px;
    --container-pad: 1em;

    --slider-gap: 1px; /* рівно 1px між слайдером і хедером/футером */

    /* Кольори (основний колір змінюється під користувача) */
    --user-color-main: #1891c3;
    --color-main: var(--user-color-main);
    --color-dark: #085177;
    --color-light: #b6efff;
    --color-bg: #e3d4b7;
    --color-white: #fff;
    --color-black: #222;
    --color-danger: #e34850;
    --color-success: #3ace5e;
    --color-warning: #fdba2c;
    --color-info: #36b7e7;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.54);
    --glass-blur: 18px;
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.14);
    --glass-border: rgba(182,239,255,0.33);

    --border: 1.5px solid rgba(30,30,36,0.09);

    /* Глобальні токени для сторінкових макетів */
    --layout-gap: .75rem;
    --layout-col-left: minmax(0, 300px);
    --layout-col-right: minmax(0, 280px);
    --sticky-top: 0px;

    /* Alias для сумісності зі старими секціями */
    --ocean-main: var(--color-main);

    font-family: var(--font-main);
}

/* Темна тема */
[data-theme="dark"], body.dark-mode {
    --color-bg: #121821;
    --color-main: #3ace5e;
    --glass-bg: rgba(24,33,54,0.51);
    --glass-shadow: 0 8px 32px 0 rgba(31,38,135,0.27);
    --color-white: #e8e8e8;
    --color-black: #181818;
    --color-dark: #56d6b7;
    --color-light: #0f2235;
    background: linear-gradient(120deg, #161c24 0%, #19407e 100%) !important;
    color: var(--color-white) !important;
}
[data-theme="dark"] .glass,
body.dark-mode .glass { color: var(--color-white) !important; }

/**************************
    GENERAL LAYOUT & PAGE
**************************/
body {
    min-height: 100vh;
    background: linear-gradient(120deg, #e3d4b7 0%, #b6efff 100%);
    font-family: var(--font-main);
    font-size: 1em;
    color: #222;
    margin: 0;
    padding: 0;
    letter-spacing: 0.01em;
}
.container, .main-container {
    max-width: 85%;
    margin: 0 auto;
    padding: var(--container-pad);
    margin-top: calc(var(--header-height, 54px) + 8px);
}
main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Щоб контент не перекривався фіксованим футером */
main, .main-container, .container {
    padding-bottom: calc(var(--footer-height, 58px) + 16px) !important;
}

/**************************
    PAGE GLASS
**************************/
.page-glass, .glass, .block-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
    border: var(--border);
    padding: var(--sp-lg) var(--sp-md);
    margin-bottom: var(--sp-lg);
    transition: box-shadow .13s, background .11s;
}
.soft-glass {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.block-glass { margin-bottom: var(--sp-md); }

/* ==========================
   GLOBAL PAGE BUILDING BLOCKS
   (однаково для всіх сторінок)
   ========================== */

/* Сітка сторінки (опційно) */
.page-grid { display:grid; gap: var(--layout-gap); margin-top: 0; }

/* HERO (універсальний) */
.hero {
  padding: clamp(.7rem,1.6vw,1rem);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(10,44,64,.08);
  box-shadow: 0 6px 20px rgba(8,81,119,.06);
}
.hero::after {
  content:"";
  position:absolute;
  inset:-30% -10% auto auto;
  width:60%; height:140%;
  background: radial-gradient(closest-side, rgba(24,145,195,.14), transparent 70%);
  transform: rotate(18deg);
}
.hero__title { margin:.1rem 0 .25rem; font-size:clamp(1.5rem,3.4vw,2.2rem); color:#0b3a56; font-weight:800; }
.hero__subtitle { max-width:62ch; color:#214d66; opacity:.92; }
.hero__cta { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.55rem; }

/* Швидка статистика (універсальна) */
.stats-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
.stat-card {
  padding:.7rem; text-align:center; border-radius:.9rem; background:#fff;
  border:1px solid rgba(24,145,195,.10); box-shadow:0 6px 18px rgba(24,145,195,.08);
}
.stat-card__num { font-weight:800; font-size:clamp(1.05rem,2.2vw,1.6rem); color:#0b66a1; }
.stat-card__lbl { opacity:.88; font-weight:700; font-size:.95rem; }

/* 3-колонний макет (Left / Center / Right) */
.layout-3col {
  display:grid;
  gap: var(--layout-gap);
  align-items:start;
  grid-template-columns: var(--layout-col-left) minmax(0,1fr) var(--layout-col-right);
}
.layout-2col {
  display:grid;
  gap: var(--layout-gap);
  align-items:start;
  grid-template-columns: minmax(0,1fr) var(--layout-col-right);
}
.col-left, .col-center, .col-right { min-width: 0; }

/* Sticky для лівого/правого */
@media (min-width:981px){
  .col-left, .col-right { position: sticky; top: var(--sticky-top); }
}

/* Стилі «скляних» колонок за замовчуванням */
.col-left, .col-right {
  padding:.9rem; background:#fff; border:1px solid rgba(10,44,64,.08);
  border-radius:1rem; box-shadow:0 6px 18px rgba(8,81,119,.06);
}
/* Right column: compact lists (Latest/Popular) */
.col-right .list-ranked__item{
  align-items: flex-start;
  padding: .35rem .5rem;
}

.col-right .list-ranked__name{
  font-size: .92rem;
  line-height: 1.2;
  /* обрізання на 2 рядки */
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Дата/час під заголовком (вирівнюємо по номеру) */
.col-right .badge--time{
  display: block;
  margin: 2px 0 0 1.6rem; /* 1.6rem = відступ під лічильник з ::before */
  padding: 0;
  background: transparent;
  border: 0;
  color: #6e7b8d;
  font-size: .78rem;
  font-weight: 600;
}

/* Заголовок блоку/віджета */
.widget-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.widget-title { display:flex; align-items:center; gap:.45rem; font-weight:800; letter-spacing:.2px; margin:.05rem 0 .55rem; font-size:1.06rem; }

/* Базова картка-віджет */
.widget, .panel {
  padding:.9rem; background:#fff; border:1px solid rgba(24,145,195,.10);
  border-radius:1rem; box-shadow:0 6px 18px rgba(24,145,195,.08);
}

/* Ранжовані списки (наприклад «Останні статті», «Рейтинг») */
.list-ranked { counter-reset:pos; list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.list-ranked__item {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.45rem .55rem; border-radius:.6rem; background:#fff; border:1px solid rgba(24,145,195,.10);
}
.list-ranked__name {
  position:relative; padding-left:1.6rem; font-weight:700; color:#0b3a56;
  text-decoration:none; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.list-ranked__name:hover { text-decoration:underline; }
.list-ranked__name::before { counter-increment:pos; content: counter(pos) "."; position:absolute; left:0; top:0; opacity:.55; }

/* Список з аватарками (нові користувачі, друзі тощо) */
.avatar-list { display:grid; gap:.45rem; max-height:240px; overflow:auto; scrollbar-width:thin; padding-right:4px; }
.avatar-item {
  display:flex; align-items:center; gap:.5rem; padding:.38rem .5rem; border-radius:.55rem;
  background:#fff; border:1px solid rgba(24,145,195,.10);
}
.avatar-item .avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid rgba(24,145,195,.16); }
.avatar-item .name { font-weight:700; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Компактний медіа-список (топ-5, треки, короткі елементи з обкладинкою) */
.media-compact { list-style:none; margin:.1rem 0 0; padding:0; display:grid; gap:.28rem; max-height:clamp(240px,42vh,360px); overflow:auto; scrollbar-width:thin; padding-right:2px; }
.media-compact .item {
  display:grid; grid-template-columns:1.6rem 34px 1fr; align-items:center; gap:.55rem;
  padding:.1rem .1rem; border-radius:.6rem; cursor:pointer; border:1px solid rgba(11,58,86,.08); background:#fff;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease; min-height:44px;
}
.media-compact .item:hover { background:#f6fbfe; border-color:rgba(24,145,195,.22); }
.media-compact .item.is-playing,
.media-compact .item.active { background:#eef7fd; border-color:rgba(24,145,195,.32); box-shadow:0 2px 10px rgba(24,145,195,.10); }
.media-compact .idx { text-align:center; font-weight:600; opacity:.7; }
.media-compact .cover { width:34px; height:34px; border-radius:.5rem; object-fit:cover; }
.media-compact .meta { min-width:0; display:flex; flex-direction:column; }
.media-compact .meta .t { font-weight:600; font-size:.9rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-compact .meta .t:empty::after{ content:"Untitled"; opacity:.6; }
.media-compact .meta .a { opacity:.7; font-size:.85rem; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/**************************
    TYPOGRAPHY
**************************/
h1, .h1 { font-size: 2.15em; font-weight: 800; margin-bottom: .45em; }
h2, .h2 { font-size: 1.55em; font-weight: 700; margin-bottom: .45em;}
h3, .h3 { font-size: 1.15em; font-weight: 600; margin-bottom: .38em;}
h4, .h4 { font-size: 1em;   font-weight: 600; }
h5, .h5 { font-size: .92em; font-weight: 500;}
h6, .h6 { font-size: .8em;  font-weight: 400;}
p, .p { margin-bottom: .8em; line-height: 1.6;}
.muted, .txt-muted { color: #909ba7; }
.txt-center { text-align: center; }
.txt-right  { text-align: right; }
.txt-left   { text-align: left; }
.txt-danger { color: var(--color-danger);}
.txt-success { color: var(--color-success);}
.txt-warning { color: var(--color-warning);}
.txt-info   { color: var(--color-info);}
.bold       { font-weight: bold;}
.italic     { font-style: italic;}
a, .link { color: var(--color-main); text-decoration: none; transition: color 0.12s; }
a:hover, .link:hover { color: var(--color-dark); text-decoration: underline; }

/**************************
    BUTTONS (glass)
**************************/
button, .btn {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-xl) var(--sp-xl);
  margin: var(--sp-xs) var(--sp-sm);
  color: var(--color-main);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  transition: transform .15s, background .15s, color .15s;
  cursor: pointer;
}
button i, .btn i, button span, .btn span { transition: color .15s; color: inherit; }
button:hover:not(:disabled), .btn:hover:not(:disabled),
button:focus:not(:disabled), .btn:focus:not(:disabled) { transform: scale(1.05); outline: none; }
button:active:not(:disabled), .btn:active:not(:disabled) { transform: scale(0.97); }
button:disabled, .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
button.active, .btn.active { background: var(--color-main); color: var(--color-white); }
button.active i, .btn.active i, button.active span, .btn.active span { color: var(--color-white); }

@media (max-width: 600px) {
  button, .btn { padding: var(--sp-sm) var(--sp-sm); margin: var(--sp-sm) var(--sp-sm); }
}

/* Secondaries (універсальний “сіро-неактивний”) */
.btn-secondary, .btn-secondary:disabled, .btn:disabled, button.btn-secondary, button.btn-secondary:disabled {
  background: #e6eaf0 !important; color: #b7bbc2 !important; border: none !important;
  cursor: default !important; opacity: 0.77 !important; pointer-events: none !important; box-shadow: none !important;
}

/**************************
    TABLES
**************************/
.table-glass, .table, table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 0.98em;
}
.table-glass th, .table th {
    background: rgba(24,145,195,0.09);
    color: #1b2838;
    font-weight: 700;
    padding: 0.72em 0.7em;
    text-align: left;
    border-bottom: var(--border);
    font-size: 0.96em;
}
.table-glass td, .table td {
    padding: 0.61em 0.7em;
    border-bottom: 1px solid rgba(100,100,100,0.07);
    font-size: 0.95em;
    color: #263242;
    background: transparent;
}
.table-glass tr:last-child td, .table tr:last-child td { border-bottom: none; }
.table-glass tbody tr:hover { background: rgba(24,145,195,0.05); }
.table-glass .txt-center, .table .txt-center { text-align: center; }

/**************************
    FORM ELEMENTS
**************************/
.input-group { display: flex; flex-direction: column; margin-bottom: var(--sp-sm); }
.input-group label { font-size: .96em; color: #6e8fae; font-weight: 500; margin-bottom: 0.17em; }
.input, input, textarea, select {
    padding: .55em 1.15em; border-radius: var(--radius-md); border: var(--border);
    font-size: 1em; font-family: var(--font-main); background: rgba(255,255,255,0.55);
    color: #333; margin-bottom: 0.1em; box-shadow: 0 2px 10px rgba(24,145,195,0.09);
    outline: none; transition: box-shadow .13s, border-color .12s;
}
input:focus, textarea:focus, select:focus { border-color: var(--color-main); box-shadow: 0 0 0 2px rgba(24,145,195,0.17); }
input[type=checkbox], input[type=radio] { width: 1.15em; height: 1.15em; accent-color: var(--color-main); margin-right: .7em; }
.form-row, .form-inline { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; }
.form-row > * { flex: 1; }

/**************************
    ALERTS & QUOTES
**************************/
.alert, .alert-glass {
    background: rgba(255,255,255,0.75);
    color: #294b6d;
    padding: 0.85em 1.2em;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 10px rgba(24,145,195,0.07);
    border-left: 5px solid var(--color-main);
    margin-bottom: 1em;
    font-size: 1.02em;
}
.alert-danger { border-left-color: var(--color-danger); color: var(--color-danger); }
.alert-success { border-left-color: var(--color-success); color: var(--color-success); }
.alert-warning { border-left-color: var(--color-warning); color: var(--color-warning); }
.alert-info    { border-left-color: var(--color-info); color: var(--color-info); }
blockquote, .quote {
    background: rgba(24,145,195,0.10);
    border-left: 5px solid var(--color-main);
    margin: 1.3em 0;
    padding: 1em 1.6em;
    border-radius: var(--radius-md);
    color: #18557a;
    font-style: italic;
}

/**************************
    ICONS & BADGES
**************************/
.icon, .icon-img { height: 1.18em; width: 1.18em; vertical-align: middle; margin-right: .28em; }
.badge, .status-badge {
    display: inline-block;
    padding: 0.12em 0.82em;
    border-radius: 1.2em;
    background: var(--color-main);
    color: #fff;
    font-size: .92em;
    font-weight: 600;
    margin-right: .37em;
}
.badge-danger { background: var(--color-danger); }
.badge-success { background: var(--color-success); }
.badge-warning { background: var(--color-warning); }
.badge-info    { background: var(--color-info); }
.badge-light   { background: #fff; color: #222; border: var(--border); }
.badge-outline { background: transparent; border: 1.2px solid var(--color-main); color: var(--color-main); }
.badge-pill    { border-radius: 999px; }

/**************************
    FLEX GRID
**************************/
.row, .flex-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.col, .flex-col { flex: 1 1 0%; min-width: 0; padding: var(--sp-xs); }
.grid { display: grid; gap: var(--sp-sm); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 800px) { .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/**************************
    CARDS & PANELS
**************************/
.card, .card-glass {
    background: var(--glass-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
    border: var(--border);
    padding: var(--sp-md);
    margin-bottom: var(--sp-sm);
    transition: box-shadow .13s, background .11s;
}

/**************************
    PAGINATION
**************************/
.pagination {
    display: flex;
    gap: 0.44em;
    margin: 1.2em 0 1.7em 0;
    justify-content: center;
    align-items: center;
}
.pagination .page-link, .pagination .page-item {
    background: var(--glass-bg);
    color: var(--color-main);
    border-radius: var(--radius-sm);
    padding: 0.37em 0.98em;
    border: var(--border);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.13s;
    font-size: 0.98em;
}
.pagination .page-link:hover, .pagination .page-item.active { background: var(--color-main); color: #fff; }

/******************************
  MODALS (глобальний стиль)
******************************/
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.modal-content {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  margin: 6% auto;
  padding: var(--sp-lg);
  max-width: 500px;
  width: 90%;
  color: var(--color-main);
  font-family: var(--font-main);
  position: relative;
  animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn { from { opacity:0; transform: translateY(-20px);} to { opacity:1; transform: translateY(0);} }
.modal-content h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: var(--sp-md); color: var(--color-main); text-align: center; }
.modal-content .close { position: absolute; right: var(--sp-md); top: var(--sp-sm); font-size: 1.8rem; color: var(--color-main); cursor: pointer; transition: color 0.2s; }
.modal-content .close:hover { color: var(--color-light); }
.modal-content ul { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.modal-content li {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md); background: rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); margin-bottom: var(--sp-xs); cursor: pointer; transition: background .2s ease;
}
.modal-content li:hover { background: rgba(255,255,255,0.2); }
.modal-content li img { width: 50px; height: 50px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.2); }
.modal-content li span { font-size: 0.95rem; color: var(--color-main); }
@media (max-width: 480px) {
  .modal-content { margin: 15% auto; padding: var(--sp-md); }
  .modal-content h2 { font-size: 1.1rem; }
}

/**************************
    RESPONSIVE
**************************/
@media (max-width: 1100px) {
  :root { --layout-col-left: minmax(0, 280px); --layout-col-right: minmax(0, 260px); }
}
@media (max-width: 980px) {
  .layout-3col, .layout-2col { grid-template-columns: 1fr; }
}
@media (max-width: 950px) {
    .container, .main-container { padding: .42em; }
    .table-glass, .table { font-size: 0.94em; }
    .block-glass, .page-glass, .glass { padding: var(--sp-md); }
    .row, .flex-row { gap: .32em;}
}
@media (max-width: 650px) {
    main { min-height: 60vh;}
    .container, .main-container { padding: .11em; }
    .block-glass, .page-glass, .glass { padding: var(--sp-sm); }
    .card, .card-glass { padding: var(--sp-xs); }
    .stats-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
    h1, .h1 { font-size: 1.2em;}
    h2, .h2 { font-size: 1.09em;}
    .table-glass th, .table th,
    .table-glass td, .table td { padding: .43em .38em; font-size: 0.91em;}
}
@media (max-width: 400px) {
    .fs-90 { font-size: .80em !important;}
    .p-3 { padding: var(--sp-sm) !important;}
}
@media (max-width: 390px) {
    h1, .h1 { font-size: 1.05em;}
    h2, .h2 { font-size: 1em;}
}

/**************************
    MINI-UTILITIES & STATE
**************************/
.mt-1 { margin-top: var(--sp-xs) !important;} .mt-2 { margin-top: var(--sp-sm) !important;}
.mt-3 { margin-top: var(--sp-md) !important;} .mt-4 { margin-top: var(--sp-lg) !important;}
.mt-xl  { margin-top: 2.8em !important;} .mt-xxl { margin-top: 4em !important;}

.mb-1 { margin-bottom: var(--sp-xs) !important;} .mb-2 { margin-bottom: var(--sp-sm) !important;}
.mb-3 { margin-bottom: var(--sp-md) !important;} .mb-4 { margin-bottom: var(--sp-lg) !important;}
.mb-xl  { margin-bottom: 2.8em !important;} .mb-xxl { margin-bottom: 4em !important;}

.mx-1 { margin-left: var(--sp-xs) !important; margin-right: var(--sp-xs) !important;}
.mx-2 { margin-left: var(--sp-sm) !important; margin-right: var(--sp-sm) !important;}
.mx-3 { margin-left: var(--sp-md) !important; margin-right: var(--sp-md) !important;}
.mx-4 { margin-left: var(--sp-lg) !important; margin-right: var(--sp-lg) !important;}
.mx-xl  { margin-left: 2.8em !important; margin-right: 2.8em !important;}
.mx-xxl { margin-left: 4em !important; margin-right: 4em !important;}

.my-1 { margin-top: var(--sp-xs) !important; margin-bottom: var(--sp-xs) !important;}
.my-2 { margin-top: var(--sp-sm) !important; margin-bottom: var(--sp-sm) !important;}
.my-3 { margin-top: var(--sp-md) !important; margin-bottom: var(--sp-md) !important;}
.my-4 { margin-top: var(--sp-lg) !important; margin-bottom: var(--sp-lg) !important;}
.my-xl  { margin-top: 2.8em !important; margin-bottom: 2.8em !important;}
.my-xxl { margin-top: 4em !important; margin-bottom: 4em !important;}

/* Padding */
.p-1 { padding: var(--sp-xs) !important;} .p-2 { padding: var(--sp-sm) !important;}
.p-3 { padding: var(--sp-md) !important;} .p-4 { padding: var(--sp-lg) !important;}
.p-xl  { padding: 2.8em !important;} .p-xxl { padding: 4em !important;}
.px-1 { padding-left: var(--sp-xs) !important; padding-right: var(--sp-xs) !important;}
.px-2 { padding-left: var(--sp-sm) !important; padding-right: var(--sp-sm) !important;}
.px-3 { padding-left: var(--sp-md) !important; padding-right: var(--sp-md) !important;}
.px-4 { padding-left: var(--sp-lg) !important; padding-right: var(--sp-lg) !important;}
.px-xl  { padding-left: 2.8em !important; padding-right: 2.8em !important;}
.px-xxl { padding-left: 4em !important; padding-right: 4em !important;}
.py-1 { padding-top: var(--sp-xs) !important; padding-bottom: var(--sp-xs) !important;}
.py-2 { padding-top: var(--sp-sm) !important; padding-bottom: var(--sp-sm) !important;}
.py-3 { padding-top: var(--sp-md) !important; padding-bottom: var(--sp-md) !important;}
.py-4 { padding-top: var(--sp-lg) !important; padding-bottom: var(--sp-lg) !important;}
.py-xl  { padding-top: 2.8em !important; padding-bottom: 2.8em !important;}
.py-xxl { padding-top: 4em !important; padding-bottom: 4em !important;}

/* Border-radius */
.rounded-xl { border-radius: var(--radius-xl) !important;}
.rounded-md { border-radius: var(--radius-md) !important;}
.rounded-sm { border-radius: var(--radius-sm) !important;}
.rounded-xxl { border-radius: 2.3em !important;}

/* Flex/Align */
.d-flex { display: flex !important; }
.flex-row { flex-direction: row !important; }
.flex-col { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important;}
.flex-col-reverse { flex-direction: column-reverse !important;}
.align-center { align-items: center !important; }
.align-start { align-items: flex-start !important; }
.align-end   { align-items: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.self-center { align-self: center !important; }
.self-end    { align-self: flex-end !important; }
.gap-0 { gap: 0 !important;} .gap-1 { gap: var(--sp-xs) !important;} .gap-2 { gap: var(--sp-sm) !important;} .gap-3 { gap: var(--sp-md) !important;} .gap-4 { gap: 2em !important;} .gap-5 { gap: 3.5em !important;}

/* Colors, Glass, Status */
.glass-yellow { background: rgba(255, 221, 51, 0.13) !important; border-color: #ffe066 !important;}
.glass-red    { background: rgba(255, 82, 82, 0.12)  !important; border-color: #ff8282 !important;}
.glass-green  { background: rgba(82, 255, 168, 0.13) !important; border-color: #43e97b !important;}
.status { display: inline-block; min-width: 1.8em; border-radius: 50%; height: 1.1em; width: 1.1em; }
.status-online  { background: var(--color-success); }
.status-offline { background: var(--color-danger); }
.status-warning { background: var(--color-warning); }
.status-info    { background: var(--color-info); }

/* Skeletons & Loaders */
.skeleton { background: linear-gradient(90deg, #e3e6ea 25%, #f3f5f8 37%, #e3e6ea 63%); background-size: 400% 100%; animation: skeleton-loading 1.1s infinite linear; border-radius: var(--radius-md); min-height: 1.4em;}
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.loader { display: inline-block; width: 2em; height: 2em; border: 3px solid var(--glass-bg); border-top: 3px solid var(--color-main); border-radius: 50%; animation: spin 0.7s linear infinite;}
@keyframes spin { 100% { transform: rotate(360deg);} }

/* Text utils */
.text-uppercase { text-transform: uppercase !important;}
.text-lowercase { text-transform: lowercase !important;}
.text-nowrap    { white-space: nowrap !important;}
.txt-justify { text-align: justify !important;}
.fw-bold { font-weight: 700 !important;} .fw-normal { font-weight: 400 !important;}
.fw-light { font-weight: 300 !important;} .fw-medium { font-weight: 500 !important;} .fw-semibold { font-weight: 600 !important;}
.fs-90 { font-size: .90em !important;} .fs-110 { font-size: 1.10em !important;}
.text-ellipsis, .text-ellipsis-2, .text-ellipsis-3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.text-ellipsis-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.text-shadow { text-shadow: 0 1px 6px rgba(24,145,195,0.19);}
.fade-in { animation: fadeIn .55s cubic-bezier(.23,1.17,.52,.93) both; }
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(25px);} 100% { opacity: 1; transform: none;}}
.fade-up { animation: fadeUp .44s cubic-bezier(.27,1.1,.36,.98) both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(28px);} to { opacity:1; transform:none;} }
.fade-right { animation: fadeRight .37s cubic-bezier(.45,1.2,.56,.96) both;}
@keyframes fadeRight { from { opacity:0; transform:translateX(30px);} to { opacity:1; transform:none;} }

/* Display/Visible helpers */
.d-block { display: block !important;} .d-inline { display: inline !important;} .d-inline-block { display: inline-block !important;} .d-none { display: none !important;}
@media (max-width: 900px) { .hidden-md { display: none !important; } .visible-md { display: block !important; } }
@media (max-width: 600px) { .hidden-sm { display: none !important; } .visible-sm { display: block !important; } }
@media (max-width: 420px) { .hidden-xs { display: none !important; } .visible-xs { display: block !important; } }

/* Sizing helpers */
.min-w-0 { min-width: 0 !important;}
.min-w-25 { min-width: 25px !important;}
.max-w-50 { max-width: 50px !important;}
.max-w-100 { max-width: 100% !important;}
.min-h-0 { min-height: 0 !important;}
.max-h-50 { max-height: 50px !important;}
.max-h-100 { max-height: 100% !important;}
.w-100 { width: 100% !important;}
.h-100 { height: 100% !important;}
.w-auto { width: auto !important;}
.h-auto { height: auto !important;}

/* Avatar, Images */
.avatar { border-radius: 50%; object-fit: cover;}
.avatar-xs { width: 22px; height: 22px;}
.avatar-sm { width: 34px; height: 34px;}
.avatar-md { width: 54px; height: 54px;}
.avatar-lg { width: 94px; height: 94px;}
.img-fluid { max-width: 100%; height: auto; border-radius: var(--radius-sm);}
.flag { width: 1.6em; height: 1.1em; border-radius: 3px; object-fit: cover; box-shadow: 0 1px 3px #0002;}

/* Chip & Misc */
.chip { display: inline-block; border-radius: 1em; padding: 0.14em 0.7em; background: var(--glass-bg); color: var(--color-main);}
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px);}
.no-select { user-select: none; }
.text-break { word-break: break-word; }
.overflow-auto { overflow: auto !important;}
.overflow-hidden { overflow: hidden !important;}
.h-min { height: min-content !important;}
.h-max { height: max-content !important;}
.w-min { width: min-content !important;}
.w-max { width: max-content !important;}

/* Cursor helpers */
.pointer { cursor: pointer !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-move { cursor: move !important; }
.draggable { cursor: grab; user-select: none; }
.pointer-none { pointer-events: none !important;}
.pointer-auto { pointer-events: auto !important;}

/* Borders & Divider */
.no-border { border: none !important; }
.border-main { border-color: var(--color-main) !important;}
.border-danger { border-color: var(--color-danger) !important;}
.border-success { border-color: var(--color-success) !important;}
.border-warning { border-color: var(--color-warning) !important;}
.border-info { border-color: var(--color-info) !important;}
.border-top { border-top: var(--border) !important;}
.border-bottom { border-bottom: var(--border) !important;}
.border-left { border-left: var(--border) !important;}
.border-right { border-right: var(--border) !important;}
.divider { border: none; border-top: 1.5px solid rgba(30,30,36,0.07); margin: var(--sp-md) 0; width: 100%; }

/* Utility: shadow, radius, active */
.shadow { box-shadow: var(--glass-shadow) !important;}
.shadow-sm { box-shadow: 0 2px 8px 0 rgba(31,38,135,0.08) !important;}
.shadow-lg { box-shadow: 0 12px 36px 0 rgba(31,38,135,0.17) !important;}
.shadow-hover:hover { box-shadow: 0 2px 16px rgba(24,145,195,0.18) !important; }
.no-shadow { box-shadow: none !important; }
.radius-0 { border-radius: 0 !important;}
.radius-50 { border-radius: 50% !important;}

/* Overlay / Sticky / Fixed helpers */
.overlay { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(40,50,72,0.18); z-index: 999; pointer-events: all; }
.overlay-loader { position: fixed; z-index: 1209; top:0; left:0; right:0; bottom:0; background: rgba(24,33,54,0.14); display: flex; align-items: center; justify-content: center; }
.sticky-top { position: sticky; top: 0; z-index: 110;}
.sticky-bottom { position: sticky; bottom: 0; z-index: 110;}
.sticky-header { position: sticky; top: 0; background: var(--glass-bg); z-index: 104;}
.fixed-bottom-right { position: fixed; bottom: 2em; right: 2em; z-index: 1205;}
.fixed-top-left { position: fixed; top: 2em; left: 2em; z-index: 1205;}

/* Animations & Transitions */
.transition-all { transition: all .17s cubic-bezier(.4,.13,.3,1) !important;}
.transition-bg  { transition: background .17s cubic-bezier(.4,.13,.3,1) !important;}
.transition-c   { transition: color .16s;}
.transition-fast { transition: all .13s cubic-bezier(.47,1.64,.41,.8);}
.transition-slow { transition: all .27s cubic-bezier(.47,1.64,.41,.8);}
.delay-100 { animation-delay: .1s;} .delay-200 { animation-delay: .2s;} .delay-300 { animation-delay: .3s;}

/* Back-to-top Button */
.back-to-top {
    position: fixed;
    bottom: 2.6em; right: 2.3em;
    z-index: 1500;
    background: var(--color-main);
    color: #fff;
    border-radius: 50%;
    padding: .66em .83em;
    box-shadow: var(--glass-shadow);
    cursor: pointer;
    transition: background .13s;
}
.back-to-top:hover { background: var(--color-dark); }

/* Tooltip (глобальний) */
.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.tooltip {
    position: absolute; left: -205%; top: 0%; transform: translateY(-50%);
    background: rgba(255,255,255,0.91); color: var(--color-dark, #085177);
    font-size: 0.98em; padding: 0.45em 1.05em; border-radius: var(--radius-md);
    box-shadow: 0 2px 12px 0 rgba(24,145,195,0.10); white-space: nowrap; opacity: 0;
    pointer-events: none; z-index: 2010; transition: opacity 0.15s, left 0.13s; font-weight: 500;
    border: 1.2px solid var(--glass-border, #b6efff55); visibility: hidden;
}
.tooltip-wrapper:hover .tooltip, .tooltip-wrapper:focus-within .tooltip { opacity: 1; visibility: visible; left: -235%; }
@media (max-width: 600px) { .tooltip { left: -190%; top: 0%; transform: translateY(-50%); font-size: 0.91em; } }

/* Floating form labels (global helpers) */
.form-floating { position: relative; margin-bottom: 1.2em; }
.form-floating .form-control {
    background: rgba(255,255,255,0.45);
    border: 1.2px solid var(--glass-border, #b6efff33);
    box-shadow: 0 2px 14px 0 rgba(24,145,195,0.08);
    border-radius: var(--radius-xl, 1.2em);
    padding: 1.1em 1em 0.4em 1.13em;
    font-size: 1em; transition: border 0.15s, background 0.17s; color: var(--color-dark, #085177);
}
.form-floating label {
    position: absolute; top: 50%; left: 1.13em; transform: translateY(-50%);
    background: transparent; color: #6fa9c9; font-size: 1.01em; pointer-events: none;
    padding: 0 0.3em; transition: top .19s cubic-bezier(.6,-0.25,.55,1.18), left .15s, font-size .18s, color .18s, background .22s;
    z-index: 2; line-height: 1.25; opacity: .95; display: flex; align-items: center; gap: .33em;
}
.form-floating .form-control:focus + label,
.form-floating .form-control:not(:placeholder-shown) + label {
    top: -0.69em; left: 0.75em; background: rgba(255,255,255,0.66);
    font-size: 0.93em; color: var(--ocean-main, #1891c3); opacity: .97; padding: 0 .25em;
    border-radius: 1em; box-shadow: 0 2px 8px 0 rgba(24,145,195,0.06);
}
.form-floating .form-control:focus { border-color: var(--ocean-main, #1891c3); background: rgba(255,255,255,0.60); }
.form-floating .form-control:-webkit-autofill { background: rgba(255,255,255,0.85) !important; }

@media (max-width: 600px) {
    .form-floating .form-control { font-size: 0.98em; padding: 1em 0.7em 0.4em 0.8em; }
    .form-floating label { font-size: 0.97em; left: 0.8em; }
    .form-floating .form-control:focus + label,
    .form-floating .form-control:not(:placeholder-shown) + label { font-size: 0.86em; left: 0.5em; }
    button, .btn { padding: var(--sp-sm) var(--sp-sm); margin: var(--sp-sm) var(--sp-sm); }
}

/* Glass Floating Label з іконкою */
.glass-float { position: relative; margin-bottom: 1.55em; }
.float-icon {
    position: absolute; left: 1.06em; top: 50%; transform: translateY(-50%);
    font-size: 1.19em; color: var(--ocean-main, #1891c3); opacity: .93; z-index: 2; pointer-events: none; transition: color .17s;
}
.glass-float .form-control {
    padding-left: 2.85em !important; background: rgba(255,255,255,0.36);
    border: 1.5px solid var(--glass-border, #b6efff55);
    border-radius: 1.3em; box-shadow: 0 2px 18px 0 rgba(24,145,195,0.09);
    font-size: 1.09em; color: var(--color-dark,#085177); font-weight: 500; margin-bottom: .5em;
    transition: border .17s, background .17s, box-shadow .17s;
}
.glass-float .form-control:focus { border-color: var(--ocean-main, #1891c3); background: rgba(255,255,255,0.62); box-shadow: 0 2px 24px 0 rgba(24,145,195,0.18); }
.glass-float .form-control:-webkit-autofill { background: rgba(255,255,255,0.92) !important; }
.glass-float label {
    position: absolute; top: 50%; left: 2.9em !important; transform: translateY(-50%);
    background: transparent; color: #6fa9c9; font-size: 1.01em; pointer-events: none; padding: 0 .33em;
    transition: top .19s cubic-bezier(.6,-0.25,.55,1.18), left .16s, font-size .17s, color .17s, background .23s, box-shadow .14s;
    z-index: 2; line-height: 1.25; opacity: .97; display: block; font-weight: 500;
}
.glass-float .form-control:focus + label,
.glass-float .form-control:not(:placeholder-shown) + label {
    top: -1.13em; left: 1.2em !important; font-size: .85em;
    background: rgba(255,255,255,0.76); color: var(--ocean-main, #1891c3); opacity: 1;
    padding-left: 1.2em; padding-right: .45em; border-radius: 1.3em; box-shadow: 0 3px 11px 0 rgba(24,145,195,0.11);
}
.glass-float .form-control:focus ~ .float-icon,
.glass-float .form-control:not(:placeholder-shown) ~ .float-icon {
    color: #0ac; opacity: 1; filter: drop-shadow(0 0 4px #b6efff);
}

/* Alerts (success/error) compact */
.alert { border-radius: 1em; padding: .75em 1em; margin-bottom: 1em; font-size: 1.05em; background: rgba(255,204,204,0.17); color: #bc3232; box-shadow: 0 1px 8px 0 rgba(24,145,195,0.05); border: 1.1px solid #eec0c0; }
.alert-success { background: rgba(204,255,230,0.17); color: #1e9552; border-color: #b3e6c2; }
.alert-danger  { background: rgba(255,204,204,0.17); color: #bc3232; border-color: #eec0c0; }

/* Соціальні кнопки (універсальні) */
.glass-social-auth { width: 100%; margin: 1.2em 0 1.7em 0; text-align: center; }
.glass-divider { display: flex; align-items: center; text-align: center; color: #70b7d6; font-size: 1.01em; margin-bottom: .8em; opacity: .92; font-weight: 500; }
.glass-divider:before, .glass-divider:after { content: ''; flex: 1; border-bottom: 1.2px solid #d3efff; margin: 0 .8em; opacity: .44; }
.social-btn-row { display: flex; justify-content: center; gap: 1.1em; margin-bottom: .1em; }
.glass-social-btn {
    background: rgba(255,255,255,0.41); border-radius: 50%; width: 2.6em; height: 2.6em;
    display: flex; align-items: center; justify-content: center; font-size: 1.35em; color: var(--ocean-main, #1891c3);
    box-shadow: 0 2px 13px 0 rgba(24,145,195,0.07); border: 1.1px solid #b6efff33;
    transition: background .17s, color .13s, box-shadow .16s; cursor: pointer; outline: none; position: relative;
}
.glass-social-btn:hover, .glass-social-btn:focus { background: var(--ocean-main, #1891c3); color: #fff; box-shadow: 0 4px 24px 0 rgba(24,145,195,0.12); text-decoration: none; }
.glass-social-btn.google { color: #db4437; } .glass-social-btn.google:hover { background: #db4437; color: #fff; }

/* Віджет голосів/переглядів (універсальний контейнер) */
.vote-widget { display: inline-flex; gap: var(--sp-sm); align-items: center; padding: 3px; }
.loader.small { width: 1em; height: 1em; border: 2px solid var(--glass-bg); border-top: 2px solid var(--color-main); border-radius: 50%; animation: spin .6s linear infinite; margin-left: var(--sp-xs); }
.vote-widget .views-btn { pointer-events: none; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(120deg, var(--color-main), var(--color-light)); border-radius: 8px; }

/* Rotate / Scale */
.rotate-90  { transform: rotate(90deg);} .rotate-180 { transform: rotate(180deg);}
.scale-95   { transform: scale(.95);} .scale-105  { transform: scale(1.05); }

/* Z-index helpers */
.z-1 { z-index: 1 !important;} .z-10 { z-index: 10 !important;}
.z-100 { z-index: 100 !important;} .z-1000 { z-index: 1000 !important; }

/* Print */
@media print {
  .no-print, .btn, .pagination, nav, footer, .modal, .toast { display: none !important; }
  .page-glass, .block-glass, .glass { box-shadow: none !important; background: #fff !important; }
  body { background: #fff !important; color: #111 !important; }
}