:root {
  --tg-bg: #0b0d10;
  --tg-secondary-bg: #15181e;
  --tg-text: #e8edf5;
  --tg-hint: #9ca3af;
  --tg-link: #f97316;
  --tg-button: #f97316;
  --tg-button-text: #0b0d10;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  padding-bottom: max(0px, var(--safe-bottom));
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.btn-primary,
.btn-outline,
input,
select,
textarea {
  min-height: 44px;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(1200px, 100%);
}

.telegram-mini-app body,
.telegram-mini-app {
  background: var(--tg-bg, #0b0d10);
  color: var(--tg-text, #e8edf5);
}

.telegram-mini-app .header {
  padding-top: max(14px, var(--safe-top));
}

@media (max-width: 900px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .nav {
    gap: 18px !important;
  }

  .hero,
  .features,
  .catalog,
  .testimonials,
  .auth-page {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  .header .container {
    gap: 12px;
  }

  .logo {
    font-size: 21px !important;
  }

  .burger {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .header-actions {
    margin-left: auto;
    gap: 8px !important;
  }

  .hero h1 {
    font-size: clamp(2rem, 10vw, 3.2rem) !important;
    line-height: 1.08;
  }

  .hero p {
    font-size: 1rem !important;
    line-height: 1.5;
  }

  .stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .features-grid,
  .product-grid,
  .testimonial-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .product-card,
  .feature-card,
  .testimonial-item {
    width: 100%;
  }

  .auth-page {
    align-items: flex-start !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .auth-card {
    margin-top: 8px;
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }

  .auth-card input,
  .auth-card button,
  .auth-card .btn {
    width: 100%;
  }

  .footer {
    padding-bottom: max(24px, var(--safe-bottom)) !important;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .modal,
  .modal-content,
  .custom-modal {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .btn-primary,
  .btn-outline,
  .btn,
  button {
    min-height: 46px;
  }

  .stats {
    gap: 12px !important;
  }

  .stat-item .number {
    font-size: 1.65rem !important;
  }

  .hero .btn-primary {
    width: 100%;
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn-primary:hover,
  .btn-outline:hover,
  .product-card:hover,
  .feature-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* --- DDProxy mobile/Telegram final adaptive layer --- */
*, *::before, *::after { min-width: 0; }
html, body { max-width: 100%; overflow-x: clip; }
body { overscroll-behavior-x: none; }
button, .btn, .btn-primary, .btn-outline { font-family: inherit; }

.header-actions { flex-wrap: wrap; min-width: 0; }
.header-actions > * { max-width: 100%; }

input, select, textarea, button { max-width: 100%; }
input, select, textarea { min-width: 0; }

@media (max-width: 768px) {
  body { font-size: 14px; }
  .header { padding-top: max(10px, var(--safe-top)); padding-bottom: 10px; }
  .header .container { padding-left: 12px !important; padding-right: 12px !important; gap: 8px; }
  .logo { font-size: 20px !important; line-height: 1.1; }
  .header-actions { gap: 6px !important; }
  .header-actions > span { display: none; }
  .header-actions .btn-outline,
  .header-actions .btn-primary,
  .header-actions button { min-height: 38px; padding: 7px 12px !important; font-size: 0.82rem !important; white-space: nowrap; }
  .burger { min-width: 40px; width: 40px; min-height: 40px; padding: 6px; }
  .burger span { width: 24px; height: 2px; }

  .hero { padding: 44px 0 36px !important; }
  .hero h1, .page-hero h1 { font-size: clamp(1.85rem, 8.2vw, 2.65rem) !important; line-height: 1.08; letter-spacing: -0.5px; overflow-wrap: anywhere; }
  .hero p, .page-hero p { font-size: 0.95rem !important; line-height: 1.45; max-width: 100%; }
  .hero .btn-primary { width: auto !important; max-width: 100%; padding: 11px 18px !important; font-size: 0.92rem !important; }

  .page-title h1 { font-size: 1.9rem !important; line-height: 1.1; }
  .section-title, h2 { overflow-wrap: anywhere; }

  .stats { gap: 10px !important; padding: 24px 0 28px !important; }
  .stat-item .number, .stats-about .stat-item .number { font-size: 1.45rem !important; line-height: 1.1; }
  .stat-item .label, .stats-about .stat-item .label { font-size: 0.78rem; }

  .features, .catalog, .testimonials, .story, .mission, .team, .achievements { padding-top: 40px !important; padding-bottom: 40px !important; }
  .features h2, .catalog h2, .testimonials h2, .mission h2, .team h2, .achievements h2 { font-size: 1.55rem !important; margin-bottom: 24px !important; }
  .feature-card, .product-card, .testimonial-item, .mission-card, .team-member { padding: 20px 16px !important; border-radius: 14px; }

  .filters, .blog-filters { gap: 8px !important; padding: 14px 0 !important; align-items: stretch !important; }
  .filter-btn, .filter-select { min-height: 38px !important; padding: 7px 12px !important; font-size: 0.8rem !important; }
  .search-box { width: 100%; padding: 4px 12px; }
  .search-box input { width: 100% !important; min-width: 0; }
  .results-info { flex-direction: column; align-items: flex-start; gap: 8px; }

  .auth-page, .deposit-page { min-height: auto !important; padding: 28px 8px 40px !important; }
  .auth-card, .deposit-card { width: 100%; max-width: 520px; padding: 22px 16px !important; border-radius: 14px !important; }
  .auth-card .tabs button { min-height: 40px; padding: 9px 4px; font-size: 0.9rem; }
  .auth-card input, .deposit-card input, .deposit-card select { min-height: 42px; padding: 10px 12px !important; font-size: 0.9rem; }
  .auth-card .btn-primary, .deposit-card .btn-primary { min-height: 42px; padding: 10px 14px !important; font-size: 0.92rem; }
  .social-buttons .btn { min-height: 40px; padding: 8px 14px !important; font-size: 0.85rem; max-width: 100%; }

  .dashboard .greeting { font-size: 1.25rem !important; }
  .dashboard-grid { gap: 14px !important; }
  .card .balance-amount { font-size: 1.9rem !important; }
  .referral-input { min-width: 0 !important; width: 100%; }
  #paymentLinkBox, #paymentLink { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }

  .product-grid { gap: 16px !important; }
  .product-info h1, .product-info h2 { font-size: 1.65rem !important; line-height: 1.15; overflow-wrap: anywhere; }
  .product-image .icon { font-size: 4.5rem !important; }
  .variant-btn { min-width: 0 !important; width: 100%; padding: 12px 14px !important; }
  .variant-btn .variant-name { font-size: 0.9rem !important; overflow-wrap: anywhere; }
  .variant-btn .variant-price { font-size: 1rem !important; }
  .total-price { font-size: 1.35rem !important; }
  .buy-section .btn-primary { width: 100%; padding: 11px 16px !important; font-size: 0.95rem !important; }
  #quantityInput { width: 72px !important; min-height: 40px; }

  table { font-size: 0.78rem !important; }
  th, td { padding: 8px 9px !important; }
  .pagination { gap: 6px !important; padding-bottom: 30px !important; }
  .pagination button { min-height: 38px !important; padding: 7px 12px !important; }

  .modal-content, .custom-modal > div { padding: 22px 16px !important; border-radius: 14px !important; }
  .custom-modal .btn, .custom-modal button { min-height: 40px; padding: 8px 14px !important; }
}

@media (max-width: 420px) {
  .header .container { gap: 5px; }
  .header-actions .btn-outline,
  .header-actions .btn-primary,
  .header-actions button { padding: 6px 9px !important; font-size: 0.76rem !important; }
  .logo { font-size: 18px !important; }
  .hero h1, .page-hero h1 { font-size: 1.75rem !important; }
  .hero .btn-primary { width: 100% !important; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.telegram-mini-app .header { padding-top: max(10px, var(--safe-top)); padding-bottom: max(10px, var(--safe-bottom)); }
.telegram-mini-app .footer { padding-bottom: max(24px, var(--safe-bottom)); }
.telegram-mini-app .container { padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); }

@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  .header, .feature-card, .product-card, .btn-primary, .btn-outline { transition-duration: 0.01ms !important; }
}

@media (max-width:768px){ .telegram-login-widget, iframe[src*="telegram-widget"]{max-width:100% !important;} .social-buttons{overflow:hidden;} }

/* DDProxy V8 mobile navigation */
.ddproxy-mobile-nav { display:none; }
.ddproxy-mini-cabinet { display:none; }

@media (max-width: 820px) {
  html.has-ddproxy-mobile-nav { scroll-padding-bottom: 76px; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  .ddproxy-mobile-nav {
    position: fixed;
    z-index: 9998;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 7px;
    background: rgba(15, 18, 23, .94);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 17px;
    box-shadow: 0 10px 35px rgba(0,0,0,.35);
    backdrop-filter: blur(14px);
  }

  .ddproxy-mobile-nav__item {
    min-width: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 6px 5px;
    border-radius: 12px;
    color: #9ca3af;
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
  }

  .ddproxy-mobile-nav__item.is-active {
    color: #f97316;
    background: rgba(249,115,22,.10);
  }

  .ddproxy-mobile-nav__icon { font-size: 18px; line-height: 1; }

  body.telegram-mini-app .ddproxy-mobile-nav {
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .ddproxy-mini-cabinet {
    position: fixed;
    z-index: 9997;
    right: 12px;
    top: max(12px, env(safe-area-inset-top));
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15,18,23,.90);
    border: 1px solid rgba(249,115,22,.35);
    color: #f97316;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
    text-decoration: none;
  }

  .container { width: min(100% - 28px, 1200px); padding-left: 0; padding-right: 0; }
  h1 { font-size: clamp(1.65rem, 7vw, 2.3rem); line-height: 1.12; overflow-wrap: anywhere; }
  h2 { font-size: clamp(1.35rem, 5.5vw, 1.8rem); line-height: 1.18; }
  h3 { font-size: clamp(1.1rem, 4.8vw, 1.35rem); line-height: 1.22; overflow-wrap: anywhere; }

  button, .btn, .btn-primary, .btn-outline { min-height: 42px; }
  .btn-primary { padding: 10px 16px !important; font-size: .95rem !important; }
  .btn-outline { padding: 9px 14px !important; font-size: .92rem; }

  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: nowrap; }
  input, select, textarea { max-width: 100%; min-width: 0; font-size: 16px !important; }

  .variants-list { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; }
  .variant-btn { min-width: 0 !important; width: 100%; padding: 11px 12px !important; }
  .buy-section { gap: 10px !important; }
  .buy-section .btn-primary { width: 100%; }
  .product-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .product-image { padding: 24px !important; min-height: 180px; }
  .product-image .icon { font-size: 4.2rem !important; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 24px !important; }
}

@media (max-width: 480px) {
  .ddproxy-mobile-nav { left: 6px; right: 6px; padding: 5px; border-radius: 15px; }
  .ddproxy-mobile-nav__item { min-height: 48px; font-size: 10px; }
  .ddproxy-mobile-nav__icon { font-size: 16px; }
  .ddproxy-mini-cabinet { right: 8px; padding: 7px 10px; font-size: 11px; }

  .footer-grid { grid-template-columns: 1fr !important; }
  .header { padding: 12px 0 !important; }
  .logo { font-size: 21px !important; }
  .burger span { width: 23px !important; height: 2px !important; }

  .modal, .modal-content, .auth-container, .deposit-card { max-width: calc(100vw - 20px) !important; }
  .auth-form input, .auth-form button, .deposit-card input, .deposit-card button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* V11: one bottom navigation on phones; desktop header navigation stays untouched. */
@media (max-width: 768px) {
  body { padding-bottom: calc(78px + var(--safe-bottom)); }
  .header .container { flex-wrap:nowrap !important; }
  .header .burger,
  .header .nav,
  .header .header-actions { display:none !important; }
  .mobile-bottom-nav { display:none !important; }
  .ddproxy-mobile-nav {
    position:fixed;
    left:8px;
    right:8px;
    bottom:max(8px, var(--safe-bottom));
    z-index:11000;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    padding:6px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(15,18,23,.97);
    box-shadow:0 14px 40px rgba(0,0,0,.42);
    backdrop-filter:blur(16px);
  }
  .ddproxy-mobile-nav__item {
    min-width:0;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3px;
    padding:6px 3px;
    border-radius:13px;
    color:#9ca3af;
    font-size:10px;
    font-weight:600;
    line-height:1.1;
    text-align:center;
    text-decoration:none;
    overflow:hidden;
  }
  .ddproxy-mobile-nav__item.is-active { color:#f97316; background:rgba(249,115,22,.11); }
  .ddproxy-mobile-nav__icon { font-size:19px; line-height:1; }
  .support-fab {
    right:12px !important;
    bottom:calc(88px + var(--safe-bottom)) !important;
  }
  .support-panel {
    right:8px !important;
    left:8px !important;
    bottom:calc(150px + var(--safe-bottom)) !important;
    width:auto !important;
  }
}
@media (max-width:420px) {
  .ddproxy-mobile-nav { left:5px; right:5px; padding:5px; gap:2px; }
  .ddproxy-mobile-nav__item { min-height:50px; font-size:9px; }
  .ddproxy-mobile-nav__icon { font-size:17px; }
}

/* V13: prevent admin statistics overlap */
.stats-head,.stat-panel-head{min-width:0;flex-wrap:wrap;}
.stats-head>div,.stat-panel-head>div{min-width:0;}
.stats-title,.stat-panel h3,.stat-label,.stat-foot,.low-stock b,.recent-item b,.recent-item span{overflow-wrap:anywhere;word-break:break-word;}
.stat-card{min-width:0;height:auto;min-height:136px;}
.stat-value{overflow-wrap:anywhere;line-height:1.1;}
.stat-foot{position:static !important;margin-top:12px !important;}
.stats-two{align-items:stretch;}
.stat-bar-row{min-width:0;}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}.stats-two{grid-template-columns:1fr !important;}.stat-period{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.stats-grid{grid-template-columns:1fr !important;}.stat-period{grid-template-columns:1fr !important;}.stat-bar-row{grid-template-columns:54px minmax(0,1fr) 62px;}.stat-panel{padding:14px;}.stats-title{font-size:1.5rem;}}


/* V17 mobile: transform data tables into readable cards, no horizontal scrolling */
@media (max-width:700px){
  .tablewrap, .ticket-table-wrap, .orders-table-wrap { overflow: visible !important; }
  table:not(.preserve-horizontal){width:100%!important;min-width:0!important;border-collapse:separate!important;border-spacing:0 10px!important}
  table:not(.preserve-horizontal) thead{display:none!important}
  table:not(.preserve-horizontal) tbody,
  table:not(.preserve-horizontal) tr{display:block!important;width:100%!important}
  table:not(.preserve-horizontal) tbody tr{background:var(--tg-secondary-bg,#11151b);border:1px solid rgba(255,255,255,.07);border-radius:16px;margin-bottom:10px;padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
  table:not(.preserve-horizontal) td{display:grid!important;grid-template-columns:minmax(88px,36%) minmax(0,1fr);gap:10px;align-items:start;width:100%!important;padding:9px 0!important;border:0!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  table:not(.preserve-horizontal) td::before{content:attr(data-label);color:#7f8a99;font-size:.74rem;font-weight:600;line-height:1.35}
  table:not(.preserve-horizontal) td > *{min-width:0;max-width:100%}
  table:not(.preserve-horizontal) img{max-width:100%;height:auto}
}
@media(max-width:420px){
  table:not(.preserve-horizontal) td{grid-template-columns:82px minmax(0,1fr);font-size:.9rem}
  table:not(.preserve-horizontal) td::before{font-size:.7rem}
}


/* V17: iPhone/Telegram-style mobile surfaces and no horizontal table scrolling */
@media (max-width:700px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;-webkit-font-smoothing:antialiased;}
  .header{background:rgba(11,13,16,.88)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border-bottom-color:rgba(255,255,255,.08)!important;}
  .card,.panel,.feature-card,.product-card,.stat-card,.stat-panel{border-radius:20px!important;box-shadow:0 10px 30px rgba(0,0,0,.16)!important;}
  input,select,textarea{border-radius:14px!important;background:rgba(21,24,30,.92)!important;}
  button,.btn,.btn-primary,.btn-outline{border-radius:14px!important;}
  .ddproxy-mobile-nav{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;padding:6px!important;border-radius:22px!important;background:rgba(20,23,29,.94)!important;border:1px solid rgba(255,255,255,.10)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;box-shadow:0 12px 36px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.18)!important;}
  .ddproxy-mobile-nav__item{min-height:52px!important;border-radius:16px!important;font-size:10px!important;font-weight:600!important;}
  .ddproxy-mobile-nav__icon{font-size:18px!important;}
  .ddproxy-mobile-nav__item.is-active{background:rgba(249,115,22,.14)!important;color:#f97316!important;}
}
@media (max-width:420px){
  .ddproxy-mobile-nav{left:5px!important;right:5px!important;bottom:max(5px,env(safe-area-inset-bottom))!important;border-radius:20px!important;}
  .ddproxy-mobile-nav__item{min-height:50px!important;font-size:9px!important;}
  .ddproxy-mobile-nav__icon{font-size:17px!important;}
}