/* Base styles extracted from old index.php */

*{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 10% 0%, rgba(124,92,255,.26), transparent 60%),
        radial-gradient(1000px 650px at 90% 10%, rgba(0,215,255,.18), transparent 60%),
        radial-gradient(900px 600px at 50% 110%, rgba(56,211,159,.14), transparent 60%),
        var(--bg);
      overflow-x:hidden;
    }
    a{color:inherit}
    .wrap{max-width:1150px; margin:0 auto; padding: 26px 18px 80px;}
    .topbar{
      display:flex; align-items:center; justify-content:space-between; gap:14px;
      position:sticky; top:0; padding: 16px 0; backdrop-filter: blur(10px);
      background: linear-gradient(to bottom, rgba(11,16,32,.78), rgba(11,16,32,0));
      z-index: 20;
    }
    .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
    .logo{
      width:42px; height:42px; border-radius: 12px;
      background: url("/mrmax_specialist/assets/mrmax.png") center / contain no-repeat;
      background-color: rgba(255,255,255,.12);
      box-shadow: 0 12px 40px rgba(124,92,255,.25);
      position:relative;
    }

    .logo:after{ content:none; }

    .brand h1{font-size: 16px; line-height:1.1; margin:0; letter-spacing:.2px}
    .brand .sub{font-size: 12px; color:var(--muted)}
    .nav{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    }
    .chip{
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      text-decoration:none;
      font-size: 13px;
      color: var(--muted);
      transition: .18s ease;
    }
    .chip:hover{transform: translateY(-1px); color: var(--text); border-color: rgba(255,255,255,.18)}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 11px 14px; border-radius: 12px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.06);
      color: var(--text); text-decoration:none;
      box-shadow: 0 10px 26px rgba(0,0,0,.25);
      transition: .18s ease;
      font-weight:600; font-size: 13.5px;
      cursor:pointer;
    }
    .btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.22)}
    .btn.primary{
      background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,215,255,.55));
      border-color: rgba(255,255,255,.18);
    }
    .hero{
      margin-top: 10px;
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 16px;
      align-items: stretch;
    }
    .panel{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .hero h2{margin:0 0 10px; font-size: 34px; letter-spacing:-.3px}
    .hero p{margin:0 0 14px; color: var(--muted); font-size: 15.5px; line-height:1.5}
    .hero .cta{display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px}
    .stats{display:grid; gap:10px}
    .stat{
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.04);
    }
    .stat b{display:block; font-size: 18px}
    .stat span{color:var(--muted); font-size: 13px}
    .section{margin-top: 22px}
    .section h3{margin:0 0 10px; font-size: 18px}
    .platforms{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    }
    .tab{
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      padding: 10px 12px;
      border-radius: 999px;
      cursor:pointer;
      color: var(--muted);
      transition: .18s ease;
      display:flex; align-items:center; gap:10px;
      font-size: 13px;
      user-select:none;
    }
    .tab:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.20); color: var(--text)}
    .tab.active{
      background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(0,215,255,.18));
      border-color: rgba(255,255,255,.22);
      color: var(--text);
    }
    .badge{
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      color: var(--muted);
    }
    .grid{
      margin-top: 12px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    @media (max-width: 980px){
      .hero{grid-template-columns: 1fr}
      .grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
    }
    @media (max-width: 640px){
      .grid{grid-template-columns: 1fr}
      .hero h2{font-size: 28px}
    }
    .card{
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,.04);
      padding: 14px;
      box-shadow: 0 12px 36px rgba(0,0,0,.25);
      transition: .18s ease;
      position:relative;
      overflow:hidden;
    }
    /* --- Coming soon / dev overlay for product cards --- */
    .card.isDev{ }
    .devOverlay{
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      /* Лёгкий полупрозрачный слой: карточка остаётся читаемой */
      background: linear-gradient(180deg, rgba(10,10,18,.08), rgba(10,10,18,.28));
      pointer-events:none;
      cursor:default;
      z-index:10;
    }
    .devBadge{
      pointer-events:auto;
      cursor:default;
      padding: 14px 18px;
      border-radius: 14px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
      text-align:center;
    }
    .devTitle{ font-weight: 800; font-size: 18px; letter-spacing: .2px; }
    .devSub{ opacity: .8; margin-top: 2px; font-size: 13px; }
    .devMeta{ margin-top: 10px; }
    .devProgressBar{
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      overflow:hidden;
    }
    .devProgressFill{
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
      opacity: .9;
    
      display: block;}
    .devProgressRow{
      margin-top: 6px;
      display:flex;
      justify-content: space-between;
      gap: 10px;
      font-size: 12px;
      opacity: .9;
      flex-wrap: wrap;
      align-items:center;
    }
    .devPercent{ font-weight: 800; }
    .devRelease{ opacity: .85; }

    .devMiniProgress{
      position:absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      height: 7px;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      overflow:hidden;
      pointer-events:none;
      z-index:11; /* выше devOverlay */
    }
    .devMiniFill{
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
      opacity: .95;
    
      display: block;}

    .card.isDev .actions .btn{ opacity: .55; filter: grayscale(20%); }
    .btn.isDisabled, .btn.disabled{ opacity:.55; filter: grayscale(20%); user-select:none; pointer-events:none; }
    
    .card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.22)}
    .card:before{
      content:"";
      position:absolute; inset:-60px -80px auto auto;
      width: 220px; height: 220px; border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.35), transparent 60%);
      filter: blur(2px);
      pointer-events:none;
    }
    .cardCover{
      height: 120px;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--line);
      margin-bottom: 12px;
      background: rgba(255,255,255,.03);
    }
    .cardCover img{width:100%; height:100%; object-fit:cover; display:block}
    .blocks .blockCard .cardCover{height: 140px}
    .card .head{display:flex; justify-content:space-between; gap:10px}
    .title{font-weight: 800; font-size: 16px; margin: 0 0 6px}
    .desc{color: var(--muted); font-size: 13.5px; line-height:1.5; margin:0 0 10px}
    .price{
      display:flex; align-items:baseline; gap:8px; margin: 4px 0 12px;
      font-weight:800;
    }
    .price .num{font-size: 22px}
    .price .per{color: var(--muted); font-weight:600; font-size: 13px}
    .mini{
      display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 12px;
    }
    .mini .pill{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: var(--muted);
    }
    .actions{display:flex; gap:10px; flex-wrap:wrap}
    .actions .btn{flex:1}
    .divider{height:1px; background: var(--line); margin: 14px 0}
    details{
      border:1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.035);
      padding: 12px 14px;
    }
    details + details{margin-top: 10px}
    summary{
      cursor:pointer;
      font-weight: 700;
      outline:none;
      list-style:none;
    }
    summary::-webkit-details-marker{display:none}
    .muted{color:var(--muted)}
    .kicker{
      display:inline-flex; align-items:center; gap:8px;
      color: var(--muted);
      font-weight:700;
      font-size: 12px;
      letter-spacing:.6px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .kicker .dot{
      width:8px; height:8px; border-radius:999px;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      box-shadow: 0 0 0 4px rgba(124,92,255,.18);
    }
    /* modal */
    .modalBack{position:fixed; inset:0; background: rgba(0,0,0,.55); display:none; z-index: 50; padding: 18px; opacity:0; pointer-events:none; transition: opacity .22s ease;}
    .modalBack.is-open{opacity:1; pointer-events:auto;}

    .modal{
      width: min(1280px, calc(100vw - 24px)); max-width: 1280px;
	  margin: 6vh auto; background: rgba(10,14,28,.92);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 22px; box-shadow: 0 30px 120px rgba(0,0,0,.55);
      backdrop-filter: blur(10px);
      overflow:hidden;
    
      transform: translateY(8px) scale(.98);
      opacity: 0;
      transition: opacity .22s ease, transform .22s ease;
}
    .modalHeader{
      display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
      padding: 16px 16px 12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    .modalHeader h4{margin:0; font-size: 18px}
    .modalClose{
      background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
      color:var(--text); border-radius: 12px; padding: 8px 10px; cursor:pointer;
    }
    .modalBody{padding: 14px 16px 16px}
    .mBlocks{display:flex; flex-direction:column; gap:12px}
    .mBlock .mTitle{font-weight: 900; font-size: 16px; margin: 2px 0 0}
    .mText{line-height:1.6}
    .mMedia{margin: 0}
    .mMedia img,
    .mMedia video{
      width: 100%;
      max-height: 420px;
      object-fit: contain;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      display:block;
    }
    .mVideoWrap{
      position:relative;
      padding-top:56.25%;
      border-radius: 16px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.2);
    }
    .mVideoWrap iframe{position:absolute; inset:0; width:100%; height:100%}
    .mMedia figcaption{color:var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.4}
    .list{margin:10px 0 0; padding-left: 18px; color: var(--muted)}
    .footer{
      margin-top: 24px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.10);
      color: var(--muted);
      display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
      font-size: 12.5px;
    }
    .footer a{color: var(--text); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.25)}
    .footer a:hover{border-bottom-color: rgba(255,255,255,.45)}
    .note{
      font-size: 12.5px; color: rgba(233,236,255,.62);
      margin-top: 10px;
    }
    code.inline{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      padding: 2px 6px;
      border-radius: 8px;
      color: rgba(233,236,255,.92);
    }
  

/* Theme switch UI */
.themeSelect{appearance:none;background:var(--card);border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer}
.themeSelect:focus{outline:2px solid rgba(124,92,255,.45);outline-offset:2px}

/* THEME SELECT FIX */
.themeSelect{
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  background: rgba(255,255,255,.10);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.themeSelect:hover{ background: rgba(255,255,255,.14); }
.themeSelect:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,.35);
}
.themeSelect option{
  background: #0b1220;
  color: #e8eefc;
}

/* Light theme: keep options readable */
html[data-theme="light"] .themeSelect{
  color-scheme: light;
  background: rgba(0,0,0,.06);
  color: #0b1020;
  border-color: rgba(0,0,0,.16);
}
html[data-theme="light"] .themeSelect:hover{ background: rgba(0,0,0,.09); }
html[data-theme="light"] .themeSelect option{
  background: #ffffff;
  color: #0b1020;
}

/* убрать ID-чип справа на карточках (search_system и т.п.) */
.card .head > .badge{
  display:none !important;
}


    .modalBack.is-open .modal{transform: none; opacity: 1;}


    /* tile → modal morph (cinematic 3D) */
    .card.is-morph-hidden{opacity:0 !important; pointer-events:none !important;}

    .modalBack.is-measuring{
      opacity:0 !important;
      pointer-events:none !important;
      transition:none !important;
    }
    .modalBack.is-measuring .modal{
      transition:none !important;
      transform:none !important;
      opacity:1 !important;
    }

    /* used when we show modal right after morph (prevent its own entrance animation) */
    .modalBack.is-morphing{
      transition:none !important;
    }
    .modalBack.is-morphing .modal{
      transition:none !important;
      transform:none !important;
      opacity:1 !important;
    }

    .morphOverlay{
      position:fixed;
      z-index: 60;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 18px;
      background: rgba(10,14,28,.92);
      box-shadow:
        0 18px 60px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.06) inset;
      overflow:hidden;
      transform-origin: top left;
      transform: translate3d(0,0,0) scale(1,1);
      will-change: transform, opacity;
      pointer-events:none;
      perspective: 1400px;
      backdrop-filter: blur(10px);
    }

    /* subtle glossy highlight */
    .morphOverlay::after{
      content:"";
      position:absolute;
      inset:-40% -40% auto auto;
      width: 80%;
      height: 80%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%);
      transform: translate3d(0,0,0);
      pointer-events:none;
      mix-blend-mode: screen;
      opacity: .55;
    }

    .morphInner{
      position:absolute;
      inset:0;
      transform-style: preserve-3d;
      transform-origin: center center;
      will-change: transform;
    }

    .morphFace{
      position:absolute;
      inset:0;
      backface-visibility:hidden;
    }

    .morphBack{
      transform: rotateY(180deg);
      display:flex;
      align-items:center;
      justify-content:center;
      background:
        radial-gradient(circle at 30% 20%, rgba(124,92,255,.35), transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(0,209,255,.20), transparent 60%),
        rgba(10,14,28,.96);
    }

    .morphBackContent{display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px;}
    .morphBackText{font-weight:750; letter-spacing:.2px; opacity:.92;}
    .morphSpinner{
      width: 26px; height: 26px; border-radius: 999px;
      border: 3px solid rgba(255,255,255,.22);
      border-top-color: rgba(255,255,255,.80);
      animation: mrmSpin 1s linear infinite;
    }
    @keyframes mrmSpin{to{transform: rotate(360deg)}}

    /* modal shell used on close */
    .morphModalShell{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      padding: 18px;
      gap: 10px;
    }
    .morphModalShellTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
    }
    .morphModalShellTitle{font-weight: 900; font-size: 18px; line-height:1.2;}
    .morphModalShellMeta{color: rgba(233,236,255,.68); font-size: 12.5px;}
    .morphModalShellClose{
      width: 34px; height: 34px;
      border-radius: 12px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
    }
    .morphModalShellBody{
      margin-top: 10px;
      border-top: 1px solid rgba(255,255,255,.10);
      padding-top: 12px;
      color: rgba(233,236,255,.70);
      font-size: 13.5px;
      line-height:1.55;
    }

    @media (prefers-reduced-motion: reduce){
      .morphOverlay, .morphInner, .modalBack, .modal{transition:none !important; animation:none !important;}
    }

/* === Rich text highlights in modal text === */
.mText .tRed{ color: rgba(255, 90, 90, 1); font-weight: 900; text-shadow: 0 0 18px rgba(255,90,90,.18); }
.mText .tGreen{ color: rgba(120, 255, 170, 1); font-weight: 900; text-shadow: 0 0 18px rgba(120,255,170,.14); }
.mText .tBlue{ color: rgba(120, 175, 255, 1); font-weight: 900; text-shadow: 0 0 18px rgba(120,175,255,.14); }
.mText .tYellow{ color: rgba(255, 216, 110, 1); font-weight: 900; text-shadow: 0 0 18px rgba(255,216,110,.12); }
.mText .tPurple{ color: rgba(200, 140, 255, 1); font-weight: 900; text-shadow: 0 0 18px rgba(200,140,255,.14); }
.mText .tGray{ color: rgba(220, 230, 245, .85); font-weight: 700; }
.mText .tCustom{ font-weight: 900; text-shadow: 0 0 18px rgba(255,255,255,.10); }
.mText .tBg{
  color: rgba(10,12,18,.95);
  padding: 1px 6px;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* === Coming soon overlay (full cover + clear disabled state) === */
.devOverlay{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  background: linear-gradient(180deg, rgba(10,10,18,.35), rgba(10,10,18,.60));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  /* allow clicking underlying "Подробнее" while keeping overlay visible */
  pointer-events: none;
}

/* show "not allowed" cursor on the card itself when in development */
.card.isDev{ cursor: not-allowed; }
.card.isDev .actions .btn{ cursor: pointer; }
.card.isDev .actions .btn.isDisabled{ cursor: not-allowed; }
.devBadge{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(20, 24, 50, .72);
  border: 1px solid rgba(140, 160, 255, .35);
  box-shadow:
    0 12px 34px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.08) inset;
  text-align: center;
  transform-origin: 80% 20%;
  animation: devBadgeFloat 2.2s ease-in-out infinite;
}
.devTitle{ font-weight: 900; font-size: 15px; letter-spacing: .3px; text-shadow: 0 6px 18px rgba(0,0,0,.45); }
.devSub{ opacity: .9; margin-top: 2px; font-size: 12px; text-shadow: 0 6px 18px rgba(0,0,0,.35); }

@keyframes devBadgeFloat{
  0%   { transform: translateY(0) scale(1) rotate(-0.6deg); }
  35%  { transform: translateY(-2px) scale(1.03) rotate(0.7deg); }
  70%  { transform: translateY(0) scale(1.01) rotate(-0.4deg); }
  100% { transform: translateY(0) scale(1) rotate(-0.6deg); }
}
@media (prefers-reduced-motion: reduce){
  .devBadge{ animation: none !important; }
}

/* === FIX: scroll for long modal === */
.modalBack{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3vh 12px;              /* было 6vh */
  overscroll-behavior: contain;
}

.modal{
  margin: 0 auto;
  max-height: calc(100vh - 6vh);  /* было 12vh */
  display:flex;
  flex-direction: column;
}

.modalHeader{ flex: 0 0 auto; }
.modalBody{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


    /* CTA inside dev overlay */
    .devCta{ margin-top: 12px; display:flex; justify-content:center; }
    .devDetailsBtn{ pointer-events:auto; cursor:pointer; }
    .devDetailsBtn:hover{ filter: brightness(1.08); }


/* =========================
   MOBILE: modal + layout
   ========================= */
html.modal-open,
html.modal-open body{
  overflow: hidden !important;
  height: 100%;
}

/* телефон */
@media (max-width: 640px), (max-height: 520px) and (orientation: landscape){


  /* чуть компактнее общие отступы */
  .wrap{ padding: 18px 14px 60px; }
  .topbar{ padding: 12px 0; }
  .panel{ padding: 14px; }
  .grid{ gap: 10px; }
  .card{ padding: 12px; border-radius: 16px; }
  .cardCover{ height: 108px; }
  .actions{ gap: 8px; }
  .actions .btn{ padding: 10px 12px; font-size: 13px; border-radius: 12px; }

  /* ===== Modal full-screen sheet ===== */
  .modalBack{
    padding: 0 !important;                 /* убрать 6vh сверху/снизу */
    background: rgba(0,0,0,.78) !important; /* темнее фон, меньше “шапка светится” */
    overflow: hidden !important;           /* НЕ скроллим подложку */
  }

  .modal{
    width: 100vw !important;
    max-width: none !important;

    height: 100vh !important;
    height: 100dvh !important;             /* норм на мобиле с адресной строкой */

    max-height: 100vh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  /* На телефоне шапку модалки убираем полностью (чтобы не перекрывала контент) */
  .modalBack .modalHeader{
    display: none !important;
  }

.modalBody{
    padding: calc(12px + env(safe-area-inset-top, 0px) + 54px) 14px calc(16px + env(safe-area-inset-bottom, 0px)) 14px !important;
  }

  .mText{ font-size: 14.5px; }
  .mBlock .mTitle{ font-size: 15px; }

  /* медиа внутри модалки не “выпирает” */
  .mMedia img,
  .mMedia video{
    max-height: 52vh;
  }

  /* Плавающая кнопка закрытия на телефоне (вместо шапки) */
  .mCloseFloat{
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    z-index: 1001;

    width: 42px;
    height: 42px;
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.18);
    background: rgba(10,14,28,.60);
    color: rgba(233,236,255,.92);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: 900;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .mCloseFloat:active{ transform: scale(.98); }

}

/* When modal is open: hide header under it (mobile) */
@media (max-width: 640px), (max-height: 520px) and (orientation: landscape){

  html.modal-open .topbar{
    display: none !important;
  }
  html.modal-open .wrap{
    padding-top: 10px !important;
  }
}

/* (на всякий) даже на десктопе убираем влияние blur под модалкой */
html.modal-open .topbar{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================
   MOBILE: compact topbar
   ========================= */
@media (max-width: 640px), (max-height: 520px) and (orientation: landscape){


  /* шапку делаем компактнее */
  .topbar{
    padding: 10px 0;
    gap: 10px;
  }

  /* чипы НЕ переносятся, а скроллятся горизонтально */
  .nav{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    width: 100%;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar{ display:none; }

  .chip{
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 999px;
  }

  /* чуть компактнее бренд/тема/кнопки */
  .brand h1{ font-size: 14px; }
  .brand .sub{ font-size: 11px; }

  .themeSelect{
    padding: 8px 12px;
    font-size: 12px;
  }

  .btn{
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 12px;
  }
}

@media (max-width: 640px), (max-height: 520px) and (orientation: landscape){

  .mMedia{ position: relative; }

  .mFsBtn{
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;

    width: 40px;
    height: 40px;
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.18);
    background: rgba(10,14,28,.55);
    color: rgba(233,236,255,.92);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: 900;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .mFsBtn:active{ transform: scale(.98); }
}




/* =========================
   MODAL: force hide header (by class) + mobile tools
   ========================= */

.modalBack.noHeader .modalHeader{
  display: none !important;
}

/* floating tools (only on small screens) */
.mModalTools{
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 80;
  display: none;
  gap: 8px;
  pointer-events: none; /* кликаются только кнопки */
}

.mModalTool{
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,14,28,.62);
  color: rgba(233,236,255,.92);
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mModalTool:active{ transform: translateY(1px); }

@media (max-width: 640px), (max-height: 520px) and (orientation: landscape){
  .mModalTools{ display: flex; }
}