/* Mystery Logic v4 — material hybrid layer.
   Keeps the accepted photographic evidence/artwork while rendering all interface copy as native HTML. */
.ref-storefront-material .ref-home-art{width:min(100%,560px)!important;max-width:560px!important;height:auto!important;image-rendering:auto}
.ref-storefront-material .ref-archive-art{width:min(100%,562px)!important;max-width:562px!important;height:auto!important;image-rendering:auto}
.ref-storefront-material .ml-material-home-lower{margin-top:-46px}
.ref-storefront-material .ml-material-home-lower .ref-trust{margin-top:0}

.ml-mat-crop{position:relative;overflow:hidden;background:#06131d;isolation:isolate}
.ml-mat-crop:after,.ml-archive-crop:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(222,178,101,.08);background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.035));mix-blend-mode:soft-light}
.ml-mat-crop img,.ml-archive-crop img{position:absolute;left:0;top:0;display:block;max-width:none;height:auto;filter:contrast(1.055) saturate(1.025);transform-origin:0 0;backface-visibility:hidden}

/* The accepted big photographic compositions remain photographic.
   The co-op and Who Lied cards keep their genuine vector originals; First Volume uses
   a dedicated high-resolution archival still life instead of the old flat folder icon. */
.ml-material-formats .ref-format-card{background:#06131d}
.ml-material-formats .ml-mat-crop{height:188px;margin-top:auto;border-top:1px solid rgba(197,140,58,.08)}
.ml-material-formats .mat-format-1,.ml-material-formats .mat-format-3,.ml-native-photo-stage{position:relative;background-color:#071019;background-repeat:no-repeat;background-position:center;background-size:cover}
.ml-material-formats .mat-format-1{background-image:url("./reference-format-2317.svg")}
.ml-material-formats .mat-format-3{background-image:url("./reference-format-volume-archive.webp")}
.ml-material-formats .mat-format-1>img,.ml-material-formats .mat-format-3>img{display:none!important}

/* A deliberately soft, low-opacity crop of the accepted photographic board is used only as surface texture.
   It restores paper/shadow irregularity without bringing raster text back into the UI. */
.ml-material-formats .mat-format-1:before,.ml-native-photo-stage:before{content:"";position:absolute;z-index:2;inset:-4px;pointer-events:none;background-image:url("./reference-home-lower.webp");background-repeat:no-repeat;opacity:.13;mix-blend-mode:multiply;filter:blur(2.4px) sepia(.16) contrast(1.22) saturate(.72)}
.ml-material-formats .mat-format-1:before{background-size:341% auto;background-position:4% 34%}
.ml-native-photo-stage:before{background-size:360% auto;background-position:35% 30%}
.ml-material-formats .mat-format-1:after,.ml-material-formats .mat-format-3:after,.ml-native-photo-stage:after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:repeating-linear-gradient(17deg,rgba(219,188,139,.035) 0 1px,transparent 1px 4px),radial-gradient(circle at 24% 27%,rgba(222,187,126,.055),transparent 31%),radial-gradient(circle at 74% 68%,rgba(0,0,0,.12),transparent 38%);box-shadow:inset 0 0 0 1px rgba(222,178,101,.07),inset 0 -28px 42px rgba(0,0,0,.08);mix-blend-mode:soft-light}

/* Who card: same accepted notebook/loupe composition, but from the true vector source.
   Photo is present only as blurred texture, so there is no raster ghost text. */
.ml-native-photo-stage{height:188px;margin-top:auto;display:grid;place-items:center;overflow:hidden;background-image:url("./reference-format-who.svg");border-top:1px solid rgba(197,140,58,.08);box-shadow:inset 0 0 0 1px rgba(197,140,58,.04)}
.ml-native-photo-stage .ml-who-photo-card{display:none!important}

/* Evidence row is native v4 HTML/CSS: no readable raster UI remains here.
   Subtle grain, uneven paper tone and shadow keep it in the same material world as the approved mockup. */
.ml-live-evidence .ref-material{position:relative;isolation:isolate;background:radial-gradient(circle at 18% 12%,rgba(183,140,80,.055),transparent 38%),linear-gradient(145deg,#071721,#06131d 68%);box-shadow:inset 0 0 28px rgba(0,0,0,.13)}
.ml-live-evidence .ref-material:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.34;background:repeating-linear-gradient(8deg,rgba(223,199,157,.028) 0 1px,transparent 1px 5px),radial-gradient(circle at 78% 82%,rgba(197,140,58,.055),transparent 32%);mix-blend-mode:soft-light}
.ml-live-evidence .ref-wave i{box-shadow:0 0 3px rgba(198,172,129,.14)}
/* Keep the real approved CCTV frame at essentially native crop scale. Opaque top/bottom masks remove its old raster labels; the base v4 pseudo labels stay live and crisp above it. */
.ml-live-evidence .ref-camera-mini{background-image:url("./reference-home-lower.webp");background-repeat:no-repeat;background-size:556% auto;background-position:36.5% 73.5%;background-color:#080d11;box-shadow:inset 0 22px 0 rgba(4,9,13,.97),inset 0 -20px 0 rgba(4,9,13,.97),inset 0 0 26px rgba(0,0,0,.32)}
.ml-live-evidence .ref-chat-bubble{box-shadow:0 4px 10px rgba(0,0,0,.15);background-image:linear-gradient(120deg,rgba(255,255,255,.08),transparent 42%)}
.ml-live-evidence .ref-protocol{box-shadow:0 8px 18px rgba(0,0,0,.25);background:linear-gradient(155deg,#d0bd9c,#a18c6c 68%,#89765c)}

/* Archive cards: original evidence/photo crop + crisp live number and access badge.
   The masks remove the old raster number/badge baked into the reference collage. */
.ml-material-archive{margin-bottom:20px}
.ml-material-case{background:#06131c}
.ml-material-case .ml-archive-crop{height:150px;position:relative;overflow:hidden;background:#071019}
.ml-material-case .ml-archive-crop:before{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(180deg,#07131c 0 70%,rgba(7,19,28,.92) 82%,rgba(7,19,28,0) 100%) left top/52px 62px no-repeat,linear-gradient(180deg,#07131c 0 70%,rgba(7,19,28,.92) 82%,rgba(7,19,28,0) 100%) right top/145px 62px no-repeat}
.ml-material-case .ml-archive-crop img{width:432.9%;filter:contrast(1.075) saturate(1.025)}
.ml-material-case .c1 img{transform:translate(0,0)}
.ml-material-case .c2 img{transform:translate(-24.7%,0)}
.ml-material-case .c3 img{transform:translate(-49.3%,0)}
.ml-material-case .c4 img{transform:translate(-76.2%,0)}
.ml-material-case .c5 img{transform:translate(0,-52.8%)}
.ml-material-case .c6 img{transform:translate(-24.7%,-52.8%)}
.ml-material-case .c7 img{transform:translate(-49.3%,-52.8%)}
.ml-material-case .c8 img{transform:translate(-76.2%,-52.8%)}
.ml-live-number,.ml-live-badge{position:absolute;z-index:5;box-sizing:border-box}
.ml-live-number{left:0;top:0;min-width:42px;height:31px;display:grid;place-items:center;border-right:1px solid rgba(197,140,58,.32);border-bottom:1px solid rgba(197,140,58,.32);background:#07131c;color:#d6a04a;font:400 17px Georgia,serif}
.ml-live-badge{right:7px;top:7px;padding:5px 9px;border-radius:3px;background:#173c23;color:#d9edcf;font:10px/1.1 Arial,sans-serif;box-shadow:0 0 0 1px rgba(255,255,255,.03)}
.ml-live-badge.locked{background:#15324e;color:#d8e5ed}

/* Кто врёт? product hero stays inside the material v4 system. */
.ref-who-v4.ref-storefront-material .ref-who-art{width:min(100%,390px);padding:0 12px 18px}
.ref-who-v4.ref-storefront-material .mat-format-who-hero{width:310px;max-width:100%;aspect-ratio:1.44;margin:0 auto;border:1px solid rgba(197,140,58,.42);border-radius:4px;box-shadow:0 28px 48px rgba(0,0,0,.4);transform:rotate(-.55deg)}

/* Undo v4.1.4's slight desktop enlargement of photographic hero art. */
@media(min-width:761px){
 .ref-storefront-material .ref-home-art{transform:translate(0,-12px)!important}
 .ref-storefront-material .ref-archive-art{transform:translate(10px,-34px)!important}
}

@media(max-width:980px){
 .ref-storefront-material .ml-material-home-lower{margin-top:10px}
 .ref-storefront-material .ref-home-art,.ref-storefront-material .ref-archive-art{width:min(100%,560px)!important;margin-left:auto!important;margin-right:auto!important}
}
@media(max-width:700px){
 .ref-storefront-material .ml-material-home-lower{margin-top:8px}
 .ml-material-formats .ml-mat-crop,.ml-native-photo-stage{height:205px}
 .ml-material-case .ml-archive-crop{height:170px}
 .ref-who-v4.ref-storefront-material .ref-who-art{padding-left:0;padding-right:0}
 .ref-who-v4.ref-storefront-material .mat-format-who-hero{width:min(310px,90%)}
}

/* Archive/volume bottom banner: keep the photographic scene, but render all readable copy and the ML seal live. */
.ref-storefront-v41.ref-storefront-material .ref-banner-copy{min-height:190px;box-sizing:border-box;padding:26px 30px;background:radial-gradient(circle at 18% 20%,rgba(196,145,72,.08),transparent 34%),repeating-linear-gradient(8deg,rgba(223,199,157,.018) 0 1px,transparent 1px 5px),#06131d;display:grid;align-content:center}
.ref-storefront-v41.ref-storefront-material .ref-banner-copy>*{visibility:visible!important}
.ref-storefront-v41.ref-storefront-material .ref-banner-logo{min-height:190px;padding:0;background:radial-gradient(circle at 50% 50%,rgba(197,140,58,.06),transparent 57%),#06131d;display:grid;place-items:center;align-content:center}
.ref-storefront-v41.ref-storefront-material .ref-banner-logo>*{display:block!important}
.ref-storefront-v41.ref-storefront-material .ref-banner-logo .ref-seal{display:grid!important}
@media(max-width:980px){.ref-storefront-v41.ref-storefront-material .ref-banner-logo{display:none}}
@media(max-width:700px){.ref-storefront-v41.ref-storefront-material .ref-banner-copy{min-height:0;padding:24px}}