:root {
    --_bg: #ffffff;
    --_surface: #f5f7fa;
    --_surfaceHover: #eef1f5;
    --_primary: #0088cc;
    --_primaryHover: #0077b5;
    --_primaryLight: #e6f4fa;
    --_primaryGlow: rgba(0, 136, 204, 0.15);
    --_text: #1a1a2e;
    --_textSecondary: #6c7a89;
    --_textDim: #9aa3b0;
    --_border: #e1e8ed;
    --_borderLight: #eef1f5;
    --_success: #2ecc71;
    --_successLight: #e8f8f0;
    --_warning: #f39c12;
    --_warningLight: #fef9e7;
    --_danger: #e74c3c;
    --_dangerLight: #fef0ef;
    --_info: #0088cc;
    --_infoLight: #e6f4fa;
    --_shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    --_shadowMd: 0 4px 12px rgba(0, 0, 0, 0.06);
    --_shadowLg: 0 8px 28px rgba(0, 0, 0, 0.1);
    --_radius: 10px;
    --_radiusSm: 7px;
    --_radiusLg: 14px;
    --_radiusXl: 20px;
    --_font: 'Inter', sans-serif;
    --_overlay: rgba(0, 0, 0, 0.5);
}

._dark {
    --_bg: #0d1117;
    --_surface: #161b22;
    --_surfaceHover: #1c2333;
    --_primary: #079ee9;
    --_primaryHover: #0285cc;
    --_primaryLight: #121d2f;
    --_primaryGlow: rgba(88, 166, 255, 0.18);
    --_text: #e6edf3;
    --_textSecondary: #8b949e;
    --_textDim: #6e7681;
    --_border: #30363d;
    --_borderLight: #21262d;
    --_success: #3fb950;
    --_successLight: #122116;
    --_warning: #d2991d;
    --_warningLight: #1f1a10;
    --_danger: #f85149;
    --_dangerLight: #1f1315;
    --_info: #58a6ff;
    --_infoLight: #121d2f;
    --_shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    --_shadowMd: 0 4px 12px rgba(0, 0, 0, 0.5);
    --_shadowLg: 0 8px 28px rgba(0, 0, 0, 0.6);
    --_overlay: rgba(0, 0, 0, 0.75);
}

* {
    margin: 0; padding: 0;
    box-sizing: border-box !important; 
    font-family: var(--_font);
    -webkit-tap-highlight-color: transparent;
    font-display: swap;
}

body {
    font-family: var(--_font); background: var(--_bg); color: var(--_text);
    line-height: 1.5; max-width: 768px; margin: 0 auto; min-height: 100vh;
    font-size: 14px; -webkit-font-smoothing: antialiased;
}

/* Global Css */
._fs-10 { font-size: 10px; }
._fs-11 { font-size: 11px; }
._fs-12 { font-size: 12px; }
._fs-13 { font-size: 13px; }
._fs-14 { font-size: 14px; }
._fs-15 { font-size: 15px; }
._fs-16 { font-size: 16px; }

.material-icons {
  margin: 0px 3px;
  vertical-align: middle !important;
  padding: 0px;
  font-size: auto;
}

._pagination { text-align: center; margin-top: 14px; }

._divider { height: 1px; background: var(--_borderLight); margin: 10px 0; }
._main { padding: 12px; min-height: 60vh; }

._formGroup { margin-bottom: 12px; }
._formLabel {
    display: block; font-weight: 600; font-size: 14px;
    margin-bottom: 3px; color: var(--_text); letter-spacing: -0.1px;
}
._formInput, ._formSelect, ._formTextarea {
    width: 100%; padding: 8px 10px; border: 2px solid var(--_border);
    border-radius: 7px; font-size: 14px; background: var(--_surface);
    color: var(--_text); transition: all 0.2s; outline: none;
}
._formTextarea { resize: vertical; min-height: 70px; }
._formInput:focus, ._formSelect:focus, ._formTextarea:focus {
    border-color: var(--_primary); box-shadow: 0 0 0 3px var(--_primaryGlow); background: var(--_bg);
}
._alert {
    padding: 8px 12px; border-radius: 7px; font-size: 14px; font-weight: 500;
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
._alertInfo { background: var(--_infoLight); color: var(--_info); border-left: 3px solid var(--_info); }

/* Buttons Css */
._btn {
    padding: 6px 14px; border: none; border-radius: 7px; cursor: pointer;
    font-weight: 600; font-size: 13px; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 4px;
    text-decoration: none; white-space: nowrap;
    line-height: 1.4; letter-spacing: -0.1px;
}
._btnPrimary { background: var(--_primary); color: #fff; box-shadow: 0 2px 6px var(--_primaryGlow); }
._btnPrimary:hover { background: var(--_primaryHover); box-shadow: 0 4px 12px var(--_primaryGlow);}
._btnPrimary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
._btnOutline { background: transparent; border: 2px solid var(--_primary); color: var(--_primary); }
._btnOutline:hover { background: var(--_primaryLight); }
._btnSmall { padding: 4px 10px; font-size: 11px; border-radius: 5px; }
._btnLarge { padding: 10px 22px; font-size: 14px; border-radius: 9px; }
._btnBlock { width: 100%; justify-content: center; }
._btnLight { background: var(--_surface); color: var(--_text); border: 1px solid var(--_border); }
._btnLight:hover { background: var(--_surfaceHover); border-color: var(--_textSecondary); }
/* End Buttons */

._emptyState { text-align: center; padding: 28px 14px; }
._emptyIcon { font-size: 64px; color: var(--_textDim); margin-bottom: 10px; opacity: 0.6; }
._emptyText { font-size: 16px; color: var(--_textSecondary); margin-bottom: 4px; font-weight: 600; }

._radioGroup { display: flex; flex-direction: column; gap: 6px; }
._radioItem {
    display: flex; align-items: center; gap: 7px; padding: 7px 10px;
    border: 1.5px solid var(--_border); border-radius: 7px;
    cursor: pointer; transition: all 0.2s; font-size: 14px;
}
._radioItem:hover { border-color: var(--_primary); background: var(--_primaryLight); }
._radioItem input[type="radio"] { accent-color: var(--_primary); width: 14px; height: 14px;  }

/* Nav and Offcanvas */
._navbar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; background: var(--_bg);
    border-bottom: 1px solid var(--_border);
    position: sticky; top: 0; z-index: 100;
}

._brand {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 16px; color: var(--_primary);
    text-decoration: none; flex-shrink: 0; cursor: pointer;
    transition: opacity 0.2s; background: none; border: none;
}
._brand:hover { opacity: 0.85; }

._brandIcon {
    width: 26px; height: 26px;
    border-radius: 7px;
}

._searchWrap {
    flex: 1; display: flex; align-items: center; position: relative; min-width: 0;
    background: var(--_surface); border-radius: 22px;
    border: 1.5px solid var(--_border); transition: all 0.2s;
}
._searchWrap:focus-within {
    border-color: var(--_primary); box-shadow: 0 0 0 3px var(--_primaryGlow);
    background: var(--_bg);
}

._searchInput {
    flex: 1; width: 100%; padding: 7px 36px 7px 14px;
    border: none; background: transparent; font-size: 13px;
    color: var(--_text); outline: none; min-width: 0;
}
._searchInput::placeholder { color: var(--_textDim); }

._searchIcon {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    color: var(--_textDim); font-size: 18px; pointer-events: none; transition: color 0.2s;
}
._searchWrap:focus-within ._searchIcon { color: var(--_primary); }

._menuBtn {
    width: 34px; height: 34px; border: none; background: var(--_surface);
    border-radius: 8px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; color: var(--_text); flex-shrink: 0;
    font-size: 18px; transition: all 0.2s;
}
._menuBtn:hover { background: var(--_primaryLight); color: var(--_primary); }

._offcanvas {
    position: fixed; top: 0; right: -280px; width: 260px; height: 100vh;
    background: var(--_bg); box-shadow: var(--_shadowLg); z-index: 1000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 16px; overflow-y: auto; border-left: 1px solid var(--_border);
}
._offcanvas._open { right: 0; }

._backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--_overlay); z-index: 999; opacity: 0;
    pointer-events: none; transition: opacity 0.3s;
}
._backdrop._show { opacity: 1; pointer-events: all; }

._offcanvasHeader {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--_borderLight);
}
._offcanvasTitle { font-weight: 700; font-size: 17px; letter-spacing: -0.2px; }
._offcanvasClose {
    width: 30px; height: 30px; border: none; background: var(--_surface);
    border-radius: 50%; cursor: pointer; display: flex; align-items: center;
    justify-content: center; color: var(--_text); font-size: 16px; transition: all 0.2s;
}
._offcanvasClose:hover { background: var(--_danger); color: #fff; transform: rotate(90deg); }

._menuList { list-style: none; display: flex; flex-direction: column; gap: 4px; }
._menuItem {
    padding: 10px 14px; border-radius: 8px; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center; gap: 10px;
    font-weight: 500; font-size: 14px; color: var(--_text);
    text-decoration: none; background: none; border: none;
    width: 100%; text-align: left;
}
._menuItem:hover { background: var(--_surfaceHover); }
._menuItem._active { background: var(--_primaryLight); color: var(--_primary); font-weight: 600; }
._menuIcon { font-size: 18px; opacity: 0.8; }
._menuItem._active ._menuIcon { opacity: 1; }

/* Theme Switch */
._themeRow {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--_surface); border-radius: 8px;
    cursor: pointer; border: 1px solid var(--_borderLight); width: 100%;
    color: var(--_text); font-family: var(--_font); font-size: 13px; font-weight: 500;
    transition: all 0.2s;
}
._themeRow:hover { border-color: var(--_border); background: var(--_surfaceHover); }

._toggle {
    width: 42px; height: 24px; background: var(--_border); border-radius: 12px;
    position: relative; transition: all 0.3s; flex-shrink: 0;
}
._toggle._on { background: var(--_primary); box-shadow: 0 0 10px var(--_primaryGlow); }
._toggleDot {
    width: 20px; height: 20px; background: #fff; border-radius: 50%;
    position: absolute; top: 2px; left: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
._toggle._on ._toggleDot { left: 20px; }
/* Theme Switch */
/* End Nav and Offcanvas */

/* Sections */
._sectionHeader {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; gap: 8px; flex-wrap: wrap;
}
._sectionTitle { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
/* End Sections */


/* Cards List Style */
._cardList { display: flex; flex-direction: column; gap: 8px; }
._card {
    background: var(--_bg); border: 1px solid var(--_border);
    border-radius: var(--_radius); padding: 10px 10px;
    transition: all 0.2s; display: flex;
    flex-direction: column; gap: 6px; position: relative;
}

._card a {
    text-decoration: none !important;
    color: inherit;
}

._card:hover { box-shadow: var(--_shadowMd); border-color: var(--_primary); }

._cardTop { display: flex; align-items: center; gap: 10px; }
._cardAvatar {
    width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
    background: var(--_surface); flex-shrink: 0; border: 2px solid var(--_borderLight);
}
._cardHead { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
._cardTitleRow { display: flex; align-items: center; gap: 4px; }
._cardTitle {
    font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 230px; letter-spacing: -0.1px;
}
._verifiedIcon { color: #0088cc; font-size: 17px; flex-shrink: 0; }
._cardMeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
._cardSubs {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 14px; font-weight: 600; color: var(--_primary);
}
._cardTypeBadge {
    padding: 2px 6px; border-radius: 4px; font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
._typeChannel { background: var(--_infoLight); color: #0390d6; }
._typeGroup { background: var(--_successLight); color: #27ae60; }
._typeBot { background: #f3eef8; color: #8e44ad; }
._cardVis {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 13px; color: var(--_textSecondary); text-transform: capitalize;
}
._cardVisDot { width: 6px; height: 6px; border-radius: 50%; }
._visPublic { background: #27ae60; box-shadow: 0 0 4px rgba(39, 174, 96, 0.4); }
._visPrivate { background: #e67e22; box-shadow: 0 0 4px rgba(230, 126, 34, 0.4); }
._cardTime {
    font-size: 13px; color: var(--_textSecondary);
    display: inline-flex; align-items: center; gap: 0px;
}
._cardDesc {
    font-size: 13px; color: var(--_textSecondary);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.5;
}
._cardBottom { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

._actionBtn {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 4px 6px; border-radius: 5px; border: 1px solid var(--_border);
    background: var(--_surface); cursor: pointer; font-size: 14px; font-weight: 500;
    transition: all 0.2s; color: var(--_textSecondary);
}

._actionBtn .material-icons{
    font-size: 14px;
}
._actionBtn:hover { background: var(--_primaryLight); color: var(--_primary); border-color: var(--_primary); }
._liked { color: #e74c3c; border-color: #e74c3c; background: var(--_dangerLight); }
._disliked { color: #e74c3c; border-color: #e74c3c; background: var(--_dangerLight); }
._actionBooked { color: #f39c12; border-color: #f39c12; background: var(--_warningLight); }
._actionReport { color: var(--_textSecondary); transition: all 0.2s; }
._actionReport:hover { color: var(--_danger); border-color: var(--_danger); background: var(--_dangerLight); }


._joinBtn {
    background: var(--_primary); color: #fff; border: none;
    padding: 5px 18px; border-radius: 14px; cursor: pointer;
    font-weight: 600; font-size: 14px; transition: all 0.2s;
    white-space: nowrap; margin-left: auto;
    box-shadow: 0 2px 6px var(--_primaryGlow);
}
._joinBtn:hover { background: var(--_primaryHover); box-shadow: 0 4px 12px var(--_primaryGlow);}

/* End Cards */

/* Chip Buttons */
._chipRow { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
._chip {
    padding: 5px 12px; border-radius: 16px; border: 1.5px solid var(--_border);
    background: var(--_surface); cursor: pointer; font-size: 14px; font-weight: 500;
    transition: all 0.2s; color: var(--_textSecondary); font-family: var(--_font);
    letter-spacing: -0.1px;
}
._chip .material-icons{ margin-top: -2px; }
._chip:hover { border-color: var(--_primary); color: var(--_primary); background: var(--_primaryLight); }
._chip._active {
    background: var(--_primary); color: #fff; border-color: var(--_primary);
    box-shadow: 0 2px 8px var(--_primaryGlow); font-weight: 500;
}
@media screen and (max-width: 500px){
    ._chip{ font-size: 12px; }
}
/* End Chip Buttons */

/* Modal */
._modalOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--_overlay); z-index: 1100; display: flex;
    align-items: center; justify-content: center; opacity: 0;
    pointer-events: none; transition: opacity 0.25s; padding: 16px;
}
._modalOverlay._show { opacity: 1; pointer-events: all; }

._modal {
    background: var(--_bg); border-radius: var(--_radiusLg);
    width: 100%; max-width: 420px; max-height: 80vh;
    box-shadow: var(--_shadowLg); transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--_border); display: flex;
    flex-direction: column; overflow: hidden;
}
._modalOverlay._show ._modal { transform: translateY(0); }

._modalHeader {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px; border-bottom: 1px solid var(--_border);
    flex-shrink: 0; background: var(--_bg);
    border-radius: var(--_radiusLg) var(--_radiusLg) 0 0;
}
._modalTitle { font-weight: 700; font-size: 16px; letter-spacing: -0.2px; }
._modalClose {
    width: 32px; height: 32px; border: none; background: var(--_surface);
    border-radius: 50%; cursor: pointer; display: flex; align-items: center;
    justify-content: center; font-size: 11px; color: var(--_text);
    transition: all 0.2s; flex-shrink: 0;
}
._modalClose:hover { background: var(--_danger); color: #fff; transform: rotate(90deg); }

._modalBody { padding: 16px 18px; overflow-y: auto; flex: 1; position: relative; min-height: 80px; }
._modalFooter {
    display: flex; gap: 5px; padding: 12px 18px; border-top: 1px solid var(--_border);
    justify-content: flex-end; flex-shrink: 0; background: var(--_bg);
    border-radius: 0 0 var(--_radiusLg) var(--_radiusLg);
}

._modalSpinnerWrap {
    display: flex; align-items: center; justify-content: center;
    padding: 36px 16px; flex-direction: column; gap: 10px;
}
._modalSpinnerText { font-size: 14px; color: var(--_textSecondary); font-weight: 500; }
._modalErrorWrap {
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; flex-direction: column; gap: 10px; text-align: center;
}
._modalErrorIcon { font-size: 36px; color: var(--_danger); opacity: 0.8; }
._modalErrorText { font-size: 14px; color: var(--_textSecondary); font-weight: 500; }

._spinner {
    display: inline-block; width: 24px; height: 24px;
    border: 3px solid var(--_border); border-top-color: var(--_primary);
    border-radius: 50%; animation: _spin 0.7s linear infinite;
}
._spinnerSmall { width: 16px; height: 16px; border-width: 2px; }
@keyframes _spin { to { transform: rotate(360deg); } }

/* End Modal */

/* Toast */
._toastBox {
    position: fixed; top: 14px; right: 14px; z-index: 2000;
    display: flex; flex-direction: column; gap: 5px;
    max-width: 300px; width: calc(100% - 28px);
}
._toast {
    padding: 10px 14px; border-radius: 7px; color: #fff;
    font-weight: 500; font-size: 13px; display: flex; align-items: center; gap: 6px;
    box-shadow: var(--_shadowLg); animation: _slideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer; transition: all 0.3s;
}
._toastSuccess { background: var(--_success); }
._toastError { background: var(--_danger); }
._toastWarning { background: var(--_warning); }
._toastInfo { background: var(--_primary); }
@keyframes _slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* End Toast */

._recentSection {
    margin-top: 20px; background: var(--_surface);
    border-radius: var(--_radiusLg); padding: 14px;
    border: 1px solid var(--_borderLight);
}
._recentHeader {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
._recentTitle {
    font-size: 16px; font-weight: 600; color: var(--_text);
    letter-spacing: -0.1px; display: flex; align-items: center; gap: 6px;
}

._tagsGrid { display: flex; flex-wrap: wrap; gap: 6px; }
._tag {
    background: var(--_bg); border: 1px solid var(--_border);
    border-radius: var(--_radius); padding: 5px 8px; cursor: pointer;
    transition: all 0.2s; display: inline-flex; align-items: center;
    gap: 2px; font-size: 13px; font-weight: 500; color: var(--_text);
    letter-spacing: -0.1px; white-space: nowrap; text-decoration: none;
}
._tag:hover {
    border-color: var(--_primary); background: var(--_primaryLight);
    color: var(--_primary); transform: translateY(-1px);
    box-shadow: 0 2px 6px var(--_primaryGlow);
}
._tagIcon { font-size: 14px; color: var(--_primary); }

/* Footer */
._footer {
    text-align: center; padding: 14px; border-top: 1px solid var(--_border);
    color: var(--_textDim); font-size: 13px; margin-top: 16px;
}
._footerLinks { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
._footerLink {
    color: var(--_textSecondary); text-decoration: none; font-size: 13px;
    cursor: pointer; transition: color 0.2s; background: none; border: none;
}
._footerLink:hover { color: var(--_primary); }

/* End footer */

/* Cookie Banner */
._cookieBanner {
    position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
    background: var(--_bg); border: 1px solid var(--_border);
    border-radius: var(--_radiusLg); padding: 12px 16px;
    box-shadow: var(--_shadowLg); z-index: 1500;
    width: calc(100% - 24px); max-width: 440px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 14px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
._cookieBanner._hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(30px); }
._cookieIcon { color: var(--_primary); font-size: 24px; flex-shrink: 0; }
._cookieText { flex: 1; min-width: 160px; font-size: 13px; line-height: 1.5; color: var(--_textSecondary); }
._cookieActions { display: flex; gap: 5px; flex-shrink: 0; }
/* End Cookie Banner */


._legalContent { font-size: 13px; line-height: 1.7; color: var(--_textSecondary); padding: 5px; }
._legalContent h1,
._legalContent h2,
._legalContent h3,
._legalContent h4,
._legalContent h5 { font-size: 16px; font-weight: 700; color: var(--_text); margin: 10px 0px; }
._legalContent p { margin: 10px 15px; }
._legalContent ol, ._legalContent ul { margin: 10px 30px; }
._disclaimer {display:block;text-align:center;font-size:11px;margin-top:10px;}

@media (max-width: 500px) {
    ._brand { font-size: 14px; }
    ._brandIcon { width: 24px; height: 24px; font-size: 14px; }
    ._cookieBanner { padding: 10px 12px; gap: 8px; }
    ._modalHeader { padding: 12px 14px; }
    ._modalBody { padding: 14px; }
    ._modalFooter { padding: 10px 14px; }
}

/* Hero Section */
._heroSection {
    padding: 24px 14px 20px;
    text-align: center;
    background: var(--_bg);
    margin-bottom: 5px;
}

._heroIcon img {
    width: 64px;
    height: 64px;
}

._heroTitle {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 6px;
    color: var(--_text);
    line-height: 1.3;
}

._heroHighlight {
    color: var(--_primary);
}

._heroSubtitle {
    font-size: 14px;
    color: var(--_textSecondary);
    margin-bottom: 18px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

._heroSearch {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 480px;
    margin: 0 auto;
    background: var(--_surface);
    border-radius: 28px;
    border: 2px solid var(--_border);
    transition: all 0.25s;
    overflow: visible;
    position: relative;
    padding-right: 4px;
}

._heroSearch:focus-within {
    border-color: var(--_primary);
    box-shadow: 0 0 0 4px var(--_primaryGlow);
    background: var(--_bg);
}

._heroSearchInput {
    flex: 1;
    padding: 11px 8px 11px 18px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--_text);
    outline: none;
    min-width: 0;
}

._heroSearchInput::placeholder {
    color: var(--_textDim);
}

._heroSearchBtn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: var(--_primary);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px var(--_primaryGlow);
}

._heroSearchBtn:hover {
    background: var(--_primaryHover);
    box-shadow: 0 4px 14px var(--_primaryGlow);
}


._heroSearchBtnIcon {
    font-size: 20px;
}

._heroStats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 18px;
    flex-wrap: wrap;
}

._heroStat {
    text-align: center;
}

._heroStatNumber {
    font-size: 18px;
    font-weight: 700;
    color: var(--_text);
    letter-spacing: -0.2px;
}

._heroStatLabel {
    font-size: 12px;
    color: var(--_textDim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 1px;
}

._heroTags {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    flex-wrap: wrap;
}

._heroTag {
    padding: 5px 10px;
    border-radius: 14px;
    border: 1px solid var(--_border);
    background: var(--_surface);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--_textSecondary);
    letter-spacing: -0.1px;
}

._heroTag:hover {
    border-color: var(--_primary);
    color: var(--_primary);
    background: var(--_primaryLight);
}

._heroTag ._heroTagIcon {
    font-size: inherit !important;
    margin-top: -2px;
    margin-right: 3px;
    vertical-align: middle !important;
}

@media (max-width: 500px) {
    ._heroSubtitle {
        font-size: 14px;
    }

}

/* Details */
._detailCard {
    background: var(--_bg);
    border: 1px solid var(--_border);
    border-radius: var(--_radiusLg);
    overflow: hidden;
    max-width: 600px;
    margin: 0 auto;
}

._detailCover {
    height: 120px;
    background: linear-gradient(135deg, var(--_primary) 0%, var(--_primaryHover) 100%);
    position: relative;
}

._detailCoverPattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-image: radial-gradient(circle, #fff 3px, transparent 1px);
    background-size: 20px 20px;
}

._detailAvatarWrap {
    display: flex;
    justify-content: center;
    margin-top: -40px;
    position: relative;
    z-index: 2;
}

._detailAvatar {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    object-fit: cover;
    border: 4px solid var(--_bg);
    box-shadow: var(--_shadowMd);
    background: var(--_surface);
}

._detailVerifiedBadge {
    position: absolute;
    bottom: 2px;
    right: calc(50% - 50px);
    width: 22px;
    height: 22px;
    background: #0088cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--_bg);
}

._detailVerifiedBadge .material-icons {
    font-size: 14px;
    color: #fff;
}

._detailBody {
    padding: 16px 20px 20px;
}

._detailHeader {
    text-align: center;
    margin-bottom: 14px;
}

._detailTitle {
    font-size: 20px;
    font-weight: 700;
    color: var(--_text);
    letter-spacing: -0.2px;
    margin-bottom: 4px;
}

._detailUsername {
    font-size: 13px;
    color: var(--_primary);
    font-weight: 500;
    margin-bottom: 10px;
}

._detailBadges {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

._detailBadge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

._detailBadgeChannel { background: var(--_infoLight); color: #0088cc; }
._detailBadgeGroup { background: var(--_successLight); color: #27ae60; }
._detailBadgeBot { background: #f3eef8; color: #8e44ad; }
._detailBadgePublic { background: #e8f8f0; color: #27ae60; }
._detailBadgePrivate { background: #fef3e2; color: #e67e22; }

._detailDescription {
    font-size: 13px;
    color: var(--_textSecondary);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 16px;
    padding: 0 10px;
}

._detailStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

._detailStat {
    background: var(--_surface);
    border-radius: var(--_radius);
    padding: 12px 10px;
    text-align: center;
    border: 1px solid var(--_borderLight);
}

._detailStatIcon {
    font-size: 18px;
    color: var(--_primary);
    margin-bottom: 4px;
}

._detailStatValue {
    font-size: 16px;
    font-weight: 700;
    color: var(--_text);
    letter-spacing: -0.2px;
}

._detailStatLabel {
    font-size: 10px;
    color: var(--_textDim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

._detailInfo {
    background: var(--_surface);
    border-radius: var(--_radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--_borderLight);
}

._detailInfoRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
}

._detailInfoRow + ._detailInfoRow {
    border-top: 1px solid var(--_borderLight);
}

._detailInfoLabel {
    color: var(--_textSecondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

._detailInfoValue {
    font-weight: 600;
    color: var(--_text);
}

._detailInfoValueGreen { color: #27ae60; }
._detailInfoValueOrange { color: #e67e22; }

._detailActions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

._detailJoinBtn {
    flex: 1;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: var(--_primary);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--_font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px var(--_primaryGlow);
    min-width: 120px;
}

._detailJoinBtn:hover {
    background: var(--_primaryHover);
    box-shadow: 0 4px 14px var(--_primaryGlow);
    transform: translateY(-1px);
}

._detailActionBtn {
    padding: 10px 14px;
    border: 1px solid var(--_border);
    border-radius: 10px;
    background: var(--_surface);
    color: var(--_textSecondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--_font);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

._detailActionBtn:hover {
    background: var(--_primaryLight);
    color: var(--_primary);
    border-color: var(--_primary);
}

._detailActionBtnActive {
    color: #f39c12;
    border-color: #f39c12;
    background: var(--_warningLight);
}

._detailEngagement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

._detailReport {
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
    color: var(--_textDim);
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    font-family: var(--_font);
    width: 100%;
    padding: 4px;
}

._detailReport:hover { color: var(--_danger); }

._alertWarning {
    margin-top: 14px;
    background: var(--_warningLight);
    border-radius: var(--_radiusSm);
    border-left: 3px solid var(--_warning);
}

._detailDisclaimerIcon {
    font-size: 16px;
    color: var(--_warning);
    flex-shrink: 0;
    margin-top: 1px;
}

._detailDisclaimerText {
    font-size: 11px;
    color: #8a6d14;
    line-height: 1.5;
}

._dark ._detailDisclaimerText {
    color: #d4a843;
}

._detailDisclaimerText strong {
    font-weight: 600;
}

._sharePreview {
    background: var(--_surface);
    border-radius: var(--_radius);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--_borderLight);
}

._sharePreviewAvatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

._sharePreviewInfo {
    flex: 1;
    min-width: 0;
}

._sharePreviewTitle {
    font-weight: 600;
    font-size: 13px;
    color: var(--_text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._sharePreviewLink {
    font-size: 11px;
    color: var(--_primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._shareOptions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

._shareOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    background: var(--_surface);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--_font);
    font-size: 10px;
    font-weight: 500;
    color: var(--_textSecondary);
    text-align: center;
}

._shareOption:hover {
    border-color: var(--_primary);
    background: var(--_primaryLight);
    color: var(--_primary);
    transform: translateY(-2px);
    box-shadow: var(--_shadowMd);
}

._shareOptionIcon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

._shareOptionIconTelegram { background: #0088cc; }
._shareOptionIconWhatsapp { background: #25D366; }
._shareOptionIconFacebook { background: #1877F2; }
._shareOptionIconTwitter { background: #1DA1F2; }
._shareOptionIconReddit { background: #FF4500; }
._shareOptionIconLinkedin { background: #0A66C2; }
._shareOptionIconEmail { background: #EA4335; }
._shareOptionIconCopy { background: #6c7a89; }

._shareUrlWrap {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--_surface);
    border: 1px solid var(--_border);
    border-radius: 8px;
    overflow: hidden;
}

._shareUrlInput {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--_text);
    font-family: var(--_font);
    outline: none;
    min-width: 0;
}

._shareUrlCopyBtn {
    padding: 10px 16px;
    border: none;
    background: var(--_primary);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    font-family: var(--_font);
    white-space: nowrap;
    transition: all 0.2s;
}

._shareUrlCopyBtn:hover {
    background: var(--_primaryHover);
}

._shareUrlCopyBtnCopied {
    background: var(--_success);
}

@media (max-width: 400px) {
    ._detailCover { height: 90px; }
    ._detailAvatar { width: 64px; height: 64px; border-radius: 16px; }
    ._detailAvatarWrap { margin-top: -32px; }
    ._detailBody { padding: 12px 14px 16px; }
    ._detailTitle { font-size: 18px; }
    ._detailStats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    ._detailStat { padding: 10px 6px; }
    ._detailStatValue { font-size: 14px; }
    ._detailVerifiedBadge { right: calc(50% - 42px); }
    ._shareOptions { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    ._shareOption { padding: 10px 4px; }
    ._shareOptionIcon { width: 34px; height: 34px; font-size: 17px; }
    ._detailDisclaimer { padding: 8px 10px; gap: 6px; }
    ._detailDisclaimerText { font-size: 10px; }
}