:root{
      --aw-bg:#090807;
      --aw-bg2:#0c0a09;
      --aw-text:rgba(255,255,255,.88);
      --aw-muted:rgba(255,255,255,.62);
      --aw-muted2:rgba(255,255,255,.50);
      --aw-stroke:rgba(255,255,255,.10);
      --aw-stroke2:rgba(255,255,255,.14);
      --aw-panel:rgba(255,255,255,.03);
      --aw-panel2:rgba(255,255,255,.05);
      --aw-gold1:#d6c2a2;
      --aw-gold2:#a88a5f;
      --aw-shadow:0 18px 55px rgba(0,0,0,.55);
      --aw-shadow2:0 12px 44px rgba(0,0,0,.45);
      --aw-max:1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--aw-text);
background:
  radial-gradient(1000px 650px at 75% 22%, var(--glow1), transparent 62%),
  radial-gradient(900px 520px at 30% 52%, var(--glow2), transparent 65%),
  radial-gradient(1200px 800px at 50% 130%, var(--glow3), transparent 60%),
  linear-gradient(180deg, var(--bg), var(--bg2));

      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow-x:hidden;
    }

    .aw-page{
      min-height:100%;
      position:relative;
      padding:26px 0 40px;
      z-index:0;
    }

    .aw-page::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(1200px 650px at 50% -10%, rgba(0,0,0,0), rgba(0,0,0,.55) 55%, rgba(0,0,0,.85) 85%),
        radial-gradient(900px 520px at 50% 105%, rgba(0,0,0,0), rgba(0,0,0,.65) 55%, rgba(0,0,0,.92) 90%);
      opacity:.96;
      z-index:0;
    }

    .aw-page::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.17;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
      background-size:220px 220px;
      mix-blend-mode:overlay;
      z-index:0;
    }

    .aw-container{
      width:min(var(--aw-max), calc(100% - 48px));
      margin:0 auto;
      position:relative;
      z-index:1;
    }

    .aw-header{
      display:grid;
      grid-template-columns: 240px 1fr 200px;
      align-items:center;
      gap:18px;
      padding:6px 0 10px;
    }

    .aw-brand{
      font-family:Cinzel, serif;
      letter-spacing:.4px;
      font-size:22px;
      color:rgba(255,255,255,.92);
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      white-space:nowrap;
    }

    .aw-nav{
      display:flex;
      justify-content:center;
      gap:22px;
      align-items:center;
      font-size:13px;
      letter-spacing:.2px;
      color:rgba(255,255,255,.62);
      overflow:auto;
      scrollbar-width:thin;
    }

    .aw-nav a{
      color:inherit;
      text-decoration:none;
      padding:10px 6px;
      border-radius:10px;
      transition:.18s ease;
      white-space:nowrap;
    }

    .aw-nav a:hover{
      color:rgba(255,255,255,.86);
      background:rgba(255,255,255,.03);
    }

    .aw-cta{
      display:flex;
      justify-content:flex-end;
    }

    .aw-btn{
      appearance:none;
      border:1px solid rgba(214,194,162,.35);
      background:linear-gradient(180deg, rgba(214,194,162,.18), rgba(168,138,95,.12));
      color:rgba(255,255,255,.86);
      padding:10px 16px;
      border-radius:12px;
      font-size:13px;
      letter-spacing:.15px;
      cursor:pointer;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:128px;
      user-select:none;
    }

    .aw-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(214,194,162,.55);
      background:linear-gradient(180deg, rgba(214,194,162,.22), rgba(168,138,95,.14));
    }

    .aw-btn--light{
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      box-shadow:none;
      color:rgba(255,255,255,.88);
    }

    .aw-rule{
      height:1px;
      width:86px;
      margin:8px auto 0;
      background:linear-gradient(90deg, transparent, rgba(214,194,162,.55), transparent);
      opacity:.9;
    }

    .aw-hero{
      margin-top:18px;
      border-radius:26px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(1200px 700px at 60% 30%, rgba(214,194,162,.12), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.28));
      box-shadow:var(--aw-shadow);
      overflow:hidden;
      position:relative;
    }

    .aw-hero__inner{
      padding:44px 42px 42px;
      text-align:center;
      position:relative;
    }

    .aw-hero__title{
      font-family:Cinzel, serif;
      font-weight:500;
      letter-spacing:.25px;
      font-size:48px;
      margin:0 0 10px;
      color:rgba(255,255,255,.92);
      text-shadow:0 10px 45px rgba(0,0,0,.55);
    }

    .aw-hero__sub{
      margin:0 auto 18px;
      max-width:820px;
      color:rgba(255,255,255,.62);
      font-size:14px;
      line-height:1.8;
      letter-spacing:.12px;
    }

    .aw-hero__actions{
      display:flex;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .aw-hero__decor{
      position:absolute;
      right:20px;
      bottom:18px;
      width:140px;
      height:140px;
      opacity:.22;
      background:
        radial-gradient(circle at 35% 35%, rgba(214,194,162,.45), transparent 56%),
        radial-gradient(circle at 55% 60%, rgba(255,255,255,.18), transparent 62%);
      border-radius:50%;
      pointer-events:none;
    }

    .aw-section{
      margin-top:26px;
    }

    .aw-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:16px;
    }

    .aw-card{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.02);
      box-shadow:var(--aw-shadow2);
      aspect-ratio: 4 / 3;
      cursor:pointer;
      transition: transform .18s ease, border-color .18s ease;
      user-select:none;
    }

    .aw-card:hover{
      transform: translateY(-2px);
      border-color:rgba(214,194,162,.28);
    }

    .aw-card__bg{
      position:absolute;
      inset:0;
      background-size:cover;
      background-position:center;
      transform:scale(1.02);
      filter:saturate(.92) contrast(1.04);
    }

    .aw-card__bg::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.78)),
        radial-gradient(700px 360px at 50% 20%, rgba(255,255,255,.10), transparent 60%);
      opacity:.95;
    }

    .aw-card__label{
      position:absolute;
      left:16px;
      right:16px;
      bottom:14px;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:12px;
    }

    .aw-card__name{
      margin:0;
      font-family:Cinzel, serif;
      font-size:18px;
      letter-spacing:.2px;
      color:rgba(255,255,255,.92);
      text-shadow:0 10px 35px rgba(0,0,0,.55);
      line-height:1.15;
    }

    .aw-card__pill{
      margin:0;
      font-size:11px;
      letter-spacing:.22px;
      color:rgba(255,255,255,.55);
      background:rgba(0,0,0,.24);
      border:1px solid rgba(255,255,255,.10);
      padding:6px 10px;
      border-radius:999px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      white-space:nowrap;
    }

    .aw-modal{
      position:fixed;
      inset:0;
      display:none;
      z-index:99999;
    }

    .aw-modal.aw-modal--open{display:block}

    .aw-modal__backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.66);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .aw-modal__dialog{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:min(980px, calc(100% - 28px));
      border-radius:22px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(900px 520px at 60% 25%, rgba(214,194,162,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.30));
      box-shadow: 0 30px 90px rgba(0,0,0,.65);
      overflow:hidden;
    }

    .aw-modal__top{
      position:relative;
      z-index:2;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:14px 14px 12px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.20);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .aw-modal__title{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:8px;
      flex:1;
    }

    .aw-modal__titleRow{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .aw-modal__h{
      margin:0;
      font-family:Cinzel, serif;
      font-weight:500;
      font-size:18px;
      letter-spacing:.18px;
      color:rgba(255,255,255,.92);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 640px;
    }

    .aw-modal__badge{
      font-size:12px;
      letter-spacing:.16px;
      color:rgba(255,255,255,.70);
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.05);
      padding:5px 10px;
      border-radius:999px;
      white-space:nowrap;
      flex:0 0 auto;
    }

    .aw-modal__desc{
      color:rgba(255,255,255,.62);
      font-size:12.5px;
      line-height:1.6;
      letter-spacing:.12px;
      max-width:820px;
    }

    .aw-modal__actions{
      display:flex;
      gap:10px;
      align-items:center;
      flex:0 0 auto;
    }

    .aw-iconBtn{
      width:38px;
      height:38px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.05);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:.18s ease;
      color:rgba(255,255,255,.86);
      padding:0;
    }

    .aw-iconBtn:hover{
      transform:translateY(-1px);
      border-color:rgba(214,194,162,.30);
      background:rgba(214,194,162,.08);
    }

    .aw-iconBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

    .aw-modal__body{
      position:relative;
      z-index:1;
      padding:14px;
      display:grid;
      gap:12px;
      background:rgba(0,0,0,.10);
    }

    .aw-viewer{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.22);
      overflow:hidden;
      display:grid;
      place-items:center;
      min-height: 420px;
    }

    .aw-viewer img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      background:rgba(0,0,0,.20);
    }

    .aw-thumbs{
      display:flex;
      gap:10px;
      padding:10px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      overflow:auto;
      min-height:106px;
    }

    .aw-thumb{
      width:120px;
      height:86px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(0,0,0,.24);
      overflow:hidden;
      flex:0 0 auto;
      cursor:pointer;
      position:relative;
      transition:.18s ease;
    }

    .aw-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      filter:saturate(.95) contrast(1.02);
    }

    .aw-thumb.aw-thumb--active{
      border-color:rgba(214,194,162,.55);
      box-shadow: 0 10px 28px rgba(0,0,0,.45);
      transform: translateY(-1px);
    }

    @media (max-width: 980px){
      .aw-header{grid-template-columns: 1fr auto; grid-template-areas:"brand cta" "nav nav"}
      .aw-brand{grid-area:brand}
      .aw-cta{grid-area:cta}
      .aw-nav{grid-area:nav; justify-content:flex-start; gap:14px; padding-bottom:6px}

      .aw-hero__inner{padding:38px 18px 34px}
      .aw-hero__title{font-size:40px}

      .aw-grid{grid-template-columns: repeat(2, 1fr)}
      .aw-viewer{min-height: 340px}
      .aw-thumb{width:108px;height:78px}
      .aw-modal__h{max-width: 260px}
    }

    @media (max-width: 520px){
      .aw-container{width:calc(100% - 28px)}
      .aw-hero__title{font-size:34px}
      .aw-grid{grid-template-columns:1fr}
      .aw-viewer{min-height: 300px}
      .aw-thumb{width:98px;height:74px}
    }
    /* FORCE modal layout + visibility */
.aw-modal{z-index:999999 !important;}
.aw-modal__dialog{
  max-height:calc(100vh - 24px) !important;
  overflow:auto !important;
}

.aw-modal__top{
  position:sticky !important;
  top:0 !important;
  z-index:999999 !important;
  display:flex !important;
  background:rgba(0,0,0,.72) !important;
}

.aw-modal__title, .aw-modal__actions, .aw-modal__desc, .aw-modal__badge, .aw-modal__h{
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
}

.aw-modal__actions{display:flex !important;}
.aw-iconBtn{
  display:grid !important;
  opacity:1 !important;
  visibility:visible !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

.aw-modal__body{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  padding:14px !important;
}

.aw-viewer{
  flex:1 1 auto !important;
  min-height:320px !important;
  max-height:calc(100vh - 260px) !important;
  overflow:hidden !important;
}

.aw-viewer img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

.aw-thumbs{
  display:flex !important;
  min-height:106px !important;
  opacity:1 !important;
  visibility:visible !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

.aw-thumb{
  display:block !important;
  width:120px !important;
  height:86px !important;
  opacity:1 !important;
  visibility:visible !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
/* FORCE modal layout + visibility */
.aw-modal{z-index:999999 !important;}

/* ВАЖНО: фиксируем позицию и высоту диалога, чтобы не "уезжал" */
.aw-modal__dialog{
  top:12px !important;
  bottom:12px !important;
  left:50% !important;
  transform:translateX(-50%) !important;

  max-height:calc(100vh - 24px) !important;
  height:calc(100vh - 24px) !important;

  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}

/* верхняя панель всегда видна */
.aw-modal__top{
  position:sticky !important;
  top:0 !important;
  z-index:999999 !important;
  display:flex !important;
  background:rgba(0,0,0,.72) !important;
}

.aw-modal__title, .aw-modal__actions, .aw-modal__desc, .aw-modal__badge, .aw-modal__h{
  opacity:1 !important;
  visibility:visible !important;
}

/* кнопки */
.aw-modal__actions{display:flex !important;}
.aw-iconBtn{
  display:grid !important;
  opacity:1 !important;
  visibility:visible !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

/* тело модалки занимает всё оставшееся место */
.aw-modal__body{
  position:relative !important;
  z-index:1 !important;

  flex:1 1 auto !important;
  min-height:0 !important;

  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  padding:14px !important;

  overflow:hidden !important;
}

/* viewer занимает место между top и thumbs */
.aw-viewer{
  flex:1 1 auto !important;
  min-height:0 !important;

  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:10px !important;
}

/* картинка целиком (как на твоём правильном втором скрине) */
.aw-viewer img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* превью всегда видны и не ломают высоту viewer */
.aw-thumbs{
  display:flex !important;
  flex:0 0 auto !important;

  min-height:106px !important;
  max-height:140px !important;

  overflow:auto !important;

  opacity:1 !important;
  visibility:visible !important;

  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

.aw-thumb{
  display:block !important;
  width:120px !important;
  height:86px !important;
  opacity:1 !important;
  visibility:visible !important;
  border:1px solid rgba(255,255,255,.18) !important;
}