:root {
  --resp-gutter: 20px;
  --resp-gutter-sm: 16px;
  --resp-gutter-xs: 12px;
  --resp-radius-card: 16px;
  --resp-radius-card-sm: 12px;
  --resp-radius-btn: 10px;
  --resp-radius-input: 10px;
  --resp-radius-modal: 16px;
  --resp-sidebar-w: 270px;
  --resp-sidebar-w-sm: 260px;
  --resp-nav-h: 64px;
  --resp-nav-h-sm: 56px;
  --resp-btn-h: 44px;
  --resp-btn-h-sm: 36px;
  --resp-input-h: 44px;
  --resp-input-h-sm: 40px;
  --resp-font-xs: 0.75rem;
  --resp-font-sm: 0.82rem;
  --resp-font-base: 0.88rem;
  --resp-font-md: 0.93rem;
  --resp-font-lg: 1rem;
  --resp-font-xl: 1.1rem;
  --resp-font-2xl: 1.25rem;
  --resp-font-3xl: 1.5rem;
  --resp-mobile-bar-h: 60px;
}

@media (max-width: 1199.98px) {
  .container,
  .container-fluid {
    padding-left: var(--resp-gutter) !important;
    padding-right: var(--resp-gutter) !important;
  }
}

@media (max-width: 991.98px) {
  .container,
  .container-fluid {
    padding-left: var(--resp-gutter-sm) !important;
    padding-right: var(--resp-gutter-sm) !important;
  }
  h1, .h1 { font-size: 1.6rem !important; }
  h2, .h2 { font-size: 1.3rem !important; }
  h3, .h3 { font-size: 1.1rem !important; }
  h4, .h4 { font-size: 1rem !important; }
}

@media (max-width: 767.98px) {
  html { font-size: 14px; }
  .container,
  .container-fluid {
    padding-left: var(--resp-gutter-xs) !important;
    padding-right: var(--resp-gutter-xs) !important;
  }
  h1, .h1 { font-size: 1.4rem !important; }
  h2, .h2 { font-size: 1.15rem !important; }
  h3, .h3 { font-size: 1rem !important; }
  h4, .h4 { font-size: 0.92rem !important; }
  h5, .h5 { font-size: 0.88rem !important; }
  h6, .h6 { font-size: 0.82rem !important; }
  p, li, .text-muted, .text-secondary { font-size: var(--resp-font-base); }
  .small, small { font-size: var(--resp-font-sm); }
  body { padding-top: var(--resp-nav-h-sm); padding-bottom: calc(var(--resp-mobile-bar-h) + 10px); }
  body.modal-open { padding-right: 0 !important; overflow: hidden; }

  .glass-nav { padding: 10px 0 !important; }
  .glass-nav .brand-icon { width: 28px; height: 28px; font-size: 0.9rem; margin-right: 8px; }
  .glass-nav .brand-text { font-size: 1.2rem; }
  .glass-nav .cart-btn { font-size: 1.1rem; padding: 6px; }
  .glass-nav .menu-btn { width: 36px; height: 36px; font-size: 1.2rem; }

  .btn {
    font-size: var(--resp-font-base) !important;
    padding: 8px 16px !important;
    border-radius: var(--resp-radius-btn) !important;
    min-height: var(--resp-btn-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .btn-sm { font-size: var(--resp-font-sm) !important; padding: 6px 12px !important; min-height: var(--resp-btn-h-sm); }
  .btn-lg { font-size: var(--resp-font-md) !important; padding: 10px 20px !important; min-height: 48px; }
  .btn i { font-size: inherit; }

  .form-control,
  .form-select {
    font-size: 16px !important;
    padding: 10px 14px !important;
    border-radius: var(--resp-radius-input) !important;
    min-height: var(--resp-input-h);
  }
  .form-control-sm,
  .form-select-sm { font-size: var(--resp-font-sm) !important; padding: 6px 10px !important; min-height: var(--resp-input-h-sm); }
  .form-label { font-size: var(--resp-font-sm); margin-bottom: 4px; }
  textarea.form-control { min-height: 100px; }

  .card {
    border-radius: var(--resp-radius-card) !important;
  }
  .card-body { padding: 16px !important; }
  .card-header,
  .card-footer { padding: 12px 16px !important; }

  .modal-dialog { margin: 10px; }
  .modal-content {
    border-radius: var(--resp-radius-modal) !important;
    padding: 0;
  }
  .modal-header { padding: 14px 16px 10px; min-height: 54px; }
  .modal-body { padding: 14px 16px; }
  .modal-footer { padding: 10px 16px 14px; }
  .modal-title { font-size: var(--resp-font-lg) !important; }
  .modal .btn-close { font-size: 0.85rem; }

  .offcanvas { width: 280px !important; }
  .offcanvas-header { padding: 14px 16px !important; }
  .offcanvas-body { padding: 0 !important; }
  .offcanvas .offcanvas-brand { font-size: var(--resp-font-lg) !important; }
  .offcanvas .nav-link {
    padding: 12px 16px !important;
    font-size: var(--resp-font-base) !important;
    min-height: 44px;
  }
  .offcanvas .nav-link i { font-size: 1.1rem; width: 22px; }
  .offcanvas .nav-tree-link {
    padding: 11px 14px !important;
    font-size: var(--resp-font-sm) !important;
    min-height: 40px;
  }
  .offcanvas .nav-tree-toggle {
    padding: 11px 16px !important;
    font-size: var(--resp-font-base) !important;
    min-height: 44px;
  }
  .offcanvas-user-card { padding: 14px 16px !important; }
  .offcanvas-user-avatar { width: 32px; height: 32px; font-size: 0.85rem; }
  .offcanvas-user-name { font-size: var(--resp-font-base) !important; }
  .offcanvas-user-id { font-size: var(--resp-font-xs) !important; }
  .offcanvas-user-balance { padding: 8px 12px !important; }
  .offcanvas-user-balance .balance-label { font-size: var(--resp-font-xs) !important; }
  .offcanvas-user-balance .balance-amount { font-size: var(--resp-font-md) !important; }
  .offcanvas-account-tree { padding: 6px 10px !important; }
  .offcanvas-divider { margin: 0 12px !important; }
  .offcanvas .dropdown-menu { font-size: var(--resp-font-sm) !important; }
  .offcanvas .dropdown-item { padding: 10px 14px !important; }

  .table { font-size: var(--resp-font-sm) !important; }
  .table td, .table th { padding: 8px 8px !important; }
  .table thead th { font-size: var(--resp-font-xs) !important; }
  .table-responsive-wrap table { min-width: 500px; }

  .breadcrumb { font-size: var(--resp-font-xs) !important; }
  .badge { font-size: var(--resp-font-xs) !important; padding: 3px 8px !important; }
  .alert { padding: 10px 14px !important; font-size: var(--resp-font-sm) !important; border-radius: var(--resp-radius-card-sm) !important; }

  .pagination .page-link {
    font-size: var(--resp-font-sm) !important;
    padding: 6px 10px !important;
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  .nav-tabs .nav-link { font-size: var(--resp-font-sm) !important; padding: 8px 12px !important; }
  .list-group-item { padding: 10px 14px !important; font-size: var(--resp-font-sm) !important; }

  .dropdown-menu { font-size: var(--resp-font-sm) !important; }
  .dropdown-item { padding: 8px 14px !important; }

  .accordion-button { font-size: var(--resp-font-base) !important; padding: 12px 14px !important; }
  .accordion-body { padding: 12px 14px !important; }

  .progress { height: 8px !important; }
  .progress-bar { font-size: var(--resp-font-xs) !important; }

  footer.footer { padding: 24px 0 70px !important; }
  footer.footer .row.g-5 { gap: 0 !important; --bs-gutter-y: 0; }
  footer.footer .col-lg-4,
  footer.footer .col-lg-2,
  footer.footer .col-lg-3,
  footer.footer .col-md-4 { margin-bottom: 16px; }
  footer.footer .footer-brand { font-size: 1.1rem; margin-bottom: 8px; }
  footer.footer .footer-desc { font-size: var(--resp-font-sm); margin-bottom: 12px; max-width: 100%; }
  footer.footer .footer-heading { font-size: var(--resp-font-sm); margin-bottom: 8px; }
  footer.footer .footer-links li { margin-bottom: 4px; }
  footer.footer .footer-links a,
  footer.footer .footer-links li { font-size: var(--resp-font-sm); }
  footer.footer .footer-copy { font-size: var(--resp-font-xs); }
  footer.footer .social-link { width: 34px; height: 34px; font-size: 1rem; }
  footer.footer hr { margin: 12px 0; }

  .mobile-bottom-bar { padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 1030; }
  .mobile-bottom-bar a {
    font-size: 0.5rem !important;
    padding: 3px 8px !important;
    min-width: 48px;
  }
  .mobile-bottom-bar a i { font-size: 1.25rem !important; }

  .back-to-top { width: 38px; height: 38px; bottom: calc(var(--resp-mobile-bar-h) + 10px); right: 12px; font-size: 1rem; }

  .filter-sidebar {
    position: static !important;
    margin-bottom: 16px;
    padding: 16px !important;
  }
}

@media (max-width: 575.98px) {
  .offcanvas { width: 280px !important; }

  .modal-dialog { margin: 8px; }
  .modal-header { padding: 12px 14px 8px; }
  .modal-body { padding: 12px 14px; }
  .modal-footer { padding: 8px 14px 12px; }

  .card-body { padding: 14px !important; }
  .card-header, .card-footer { padding: 10px 14px !important; }

  .btn-lg { padding: 8px 16px !important; font-size: var(--resp-font-base) !important; }

  .table td, .table th { padding: 6px 6px !important; }

  footer.footer { padding: 20px 0 70px !important; }

  .breadcrumb { flex-wrap: wrap; font-size: var(--resp-font-xs) !important; }

  .post-content img,
  .product-detail-content img,
  .forum-post-content img { max-width: 100%; height: auto; }
}

body.overflow-hidden {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  padding-right: 0 !important;
}

body.modal-open .modal {
  padding-right: 0 !important;
}

body.modal-open #app {
  padding-right: 0 !important;
}

button, input, select, textarea, a.btn {
  touch-action: manipulation;
}

input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(255,255,255,0.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px !important;
}

@media (hover: hover) {
  .back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .back-to-top {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
  }
}

@media (max-width: 767.98px) {
  .admin-sidebar { display: none; }
  .admin-main { margin-left: 0; padding: 1rem; padding-top: 60px; }
  .admin-wrapper { display: block; }
  .admin-toggle { display: flex; position: fixed; top: 12px; left: 12px; z-index: 1050; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; background: rgba(7,7,13,0.9); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); font-size: 1.3rem; cursor: pointer; }
  .admin-offcanvas { width: 270px !important; }
  .admin-offcanvas .sidebar-link { font-size: var(--resp-font-sm) !important; padding: 10px 12px !important; min-height: 40px; }
  .admin-offcanvas .sidebar-section { font-size: 0.6rem !important; }
  .admin-card { padding: 1rem !important; }
  .admin-stat { padding: 0.85rem !important; }
  .admin-stat .stat-number { font-size: 1.1rem !important; }
  .admin-stat .stat-label { font-size: var(--resp-font-xs) !important; }
  .admin-table td,
  .admin-table th { white-space: nowrap; padding: 6px 6px !important; font-size: var(--resp-font-sm) !important; }
  .admin-table th { font-size: var(--resp-font-xs) !important; }
  h2.fw-bold { font-size: 1.15rem !important; }
  .admin-main .container-fluid { padding-left: 0; padding-right: 0; }
  .admin-main .card-body { padding: 14px !important; }
  .admin-main .btn { font-size: var(--resp-font-sm) !important; min-height: 36px; }
  .admin-main .btn-sm { font-size: var(--resp-font-xs) !important; min-height: 32px; }

  .wlt-sidebar,
  .acct-sidebar { position: static !important; width: 100% !important; margin-bottom: 16px; }
  .wlt-wrapper,
  .acct-wrapper { flex-direction: column !important; }
  .wlt-hero { padding: 24px 16px !important; }
  .wlt-hero .balance-amount { font-size: 1.6rem !important; }
  .wlt-hero .balance-label { font-size: var(--resp-font-xs) !important; }
  .wlt-action-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .wlt-stat-card { padding: 14px !important; }
  .wlt-stat-card .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .wlt-stat-card .stat-number { font-size: 1rem !important; }
  .wlt-stat-card .stat-label { font-size: var(--resp-font-xs) !important; }
  .wlt-nav a { padding: 10px 14px !important; font-size: var(--resp-font-sm) !important; min-height: 40px; }
  .wlt-table-wrap { overflow-x: auto; }
  .wlt-table-wrap table { min-width: 500px; }
  .wlt-mobile-nav { display: flex !important; }
  .wlt-sidebar + .wlt-main { padding-left: 0 !important; }

  .acct-hero { padding: 24px 16px !important; }
  .acct-hero .acct-username { font-size: 1.2rem !important; }
  .acct-quick-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .acct-stat-card { padding: 14px !important; }
  .acct-stat-card .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .acct-stat-card .stat-number { font-size: 1rem !important; }
  .acct-stat-card .stat-label { font-size: var(--resp-font-xs) !important; }
  .acct-nav a { padding: 10px 14px !important; font-size: var(--resp-font-sm) !important; min-height: 40px; }
  .acct-table-wrap { overflow-x: auto; }
  .acct-table-wrap table { min-width: 500px; }
}

.prem-container {
  padding-left: var(--resp-gutter) !important;
  padding-right: var(--resp-gutter) !important;
}

@media (max-width: 767.98px) {
  .prem-container { padding-left: var(--resp-gutter-xs) !important; padding-right: var(--resp-gutter-xs) !important; }
  .prem-container .price-grid { grid-template-columns: 1fr !important; }
  .prem-container .price-card { padding: 16px !important; }
  .prem-container .price-card .price-amount { font-size: 1.5rem !important; }
  .prem-container .channel-header h2 { font-size: var(--resp-font-lg) !important; }
  .prem-container .channel-header .username { font-size: var(--resp-font-sm) !important; }
  .prem-container .pay-methods { flex-direction: column !important; }
  .prem-container .pay-method { width: 100% !important; }
  .prem-container .ch-row { padding: 12px !important; }
  .prem-container .ch-title { font-size: var(--resp-font-base) !important; }
  .prem-container .ch-meta { font-size: var(--resp-font-xs) !important; }
  .prem-container .sub-row { padding: 12px !important; }
  .prem-container .sub-title { font-size: var(--resp-font-base) !important; }
  .prem-container .sub-meta { font-size: var(--resp-font-xs) !important; }
  .prem-container .stat-card { padding: 14px !important; }
  .prem-container .stat-card .stat-val { font-size: 1.2rem !important; }
  .prem-container .stat-card .stat-label { font-size: var(--resp-font-xs) !important; }
  .prem-container .form-card { padding: 16px !important; }
  .prem-container .form-control { font-size: 16px !important; }
  .prem-container .btn { font-size: var(--resp-font-base) !important; min-height: var(--resp-btn-h); }
  .prem-container .tg-island { padding: 8px 16px !important; }
  .prem-container .island-pill { font-size: var(--resp-font-xs) !important; padding: 4px 10px !important; }

  .pay-container { padding-left: var(--resp-gutter-xs) !important; padding-right: var(--resp-gutter-xs) !important; }
  .pay-container .pay-header h3 { font-size: var(--resp-font-lg) !important; }
  .pay-container .amount-display { font-size: 1.6rem !important; }
  .pay-container .pay-methods { flex-direction: column !important; }
  .pay-container .pay-method { width: 100% !important; }
  .pay-container .pay-method { padding: 12px 14px !important; }
  .pay-container .pay-form .form-section { padding: 16px !important; }
  .pay-container .form-control { font-size: 16px !important; }
  .pay-container .btn { font-size: var(--resp-font-base) !important; min-height: var(--resp-btn-h); }
  .pay-container .bank-details-box { padding: 12px !important; }
  .pay-container .bank-details-box .amount-big { font-size: 1.4rem !important; }

  .sidebar { width: 220px !important; }
  .sidebar + .main-content { margin-left: 0 !important; }
  .main-content { padding: 16px !important; padding-top: 70px !important; }
  .main-content .stat-card { padding: 14px !important; }
  .main-content .stat-card .stat-number { font-size: 1.1rem !important; }
  .main-content .stat-card .stat-label { font-size: var(--resp-font-xs) !important; }

  .login-card { padding: 24px 20px !important; margin: 16px !important; }
  .login-card .brand { font-size: 1.2rem !important; }
  .login-card h3 { font-size: var(--resp-font-lg) !important; }
  .login-card .form-control { font-size: 16px !important; }

  .prem-container .cat-scroll { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .prem-container .cat-scroll::-webkit-scrollbar { display: none; }
  .prem-container .cat-btn { white-space: nowrap; flex-shrink: 0; font-size: var(--resp-font-sm) !important; padding: 6px 14px !important; }
  .prem-container .ch-list { gap: 10px !important; }
  .prem-container .ch-card { padding: 14px !important; }
  .prem-container .ch-card .ch-title { font-size: var(--resp-font-base) !important; }
  .prem-container .ch-card .ch-desc { font-size: var(--resp-font-sm) !important; }
  .prem-container .hero { padding: 32px 0 16px !important; }
  .prem-container .hero h1 { font-size: 1.3rem !important; }
  .prem-container .hero p { font-size: var(--resp-font-sm) !important; }
}

.post-content img,
.post-content table,
.post-content pre,
.post-content code,
.post-content iframe,
.post-content video {
  max-width: 100% !important;
  height: auto;
}
.post-content pre,
.post-content code {
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-x: auto;
}
.post-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.forum-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
}

@media (max-width: 767.98px) {
  .chat-container {
    height: calc(100vh - 250px) !important;
    min-height: 350px !important;
    max-height: none !important;
  }
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  #app {
    overflow-x: hidden;
    width: 100%;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  table {
    word-break: break-word;
  }
  .text-truncate {
    max-width: 100%;
  }
  .min-width-0 {
    min-width: 0;
    overflow: hidden;
  }
}

@media (max-width: 575.98px) {
  body.modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }
  .stats-col {
    display: none !important;
  }
}