/* Andsof Studio — the staff website. Same soft extruded look as the app. */
@font-face { font-family: 'Andsof Display'; src: url('/static/EBGaramond-Variable.ttf') format('truetype'); font-weight: 400 800; }
:root {
  --bg: #ECECEA; --line: #DEDEDA; --ink: #101010; --ink-soft: #454542; --muted: #85857F; --muted-2: #ADADA7;
  --accent: #79B23C; --accent-soft: rgba(121, 178, 60, .16); --green: #4A7030; --green-soft: #E3ECDA;
  --danger: #B23A32; --danger-soft: #F3E0DD; --amber: #9A6B12;
  --solid: #111111; --solid-text: #FFFFFF; --well: #E4E4E1;
  --sh-d: #CDCDC7; --sh-l: #FFFFFF;
  --raise: 7px 7px 16px var(--sh-d), -7px -7px 16px var(--sh-l);
  --raise-sm: 3px 3px 8px var(--sh-d), -3px -3px 8px var(--sh-l);
  --press-sm: inset 2px 2px 5px var(--sh-d), inset -2px -2px 5px var(--sh-l);
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1C1A; --line: #2C2C29; --ink: #F0F0EB; --ink-soft: #C7C7C0; --muted: #90908A; --muted-2: #5E5E58;
    --accent: #8CC63F; --accent-soft: rgba(140, 198, 63, .18); --green: #A5CE79; --green-soft: #232D19;
    --danger: #E39289; --danger-soft: #331D1A; --amber: #E2C271;
    --solid: #F0F0EB; --solid-text: #141412; --well: #191917;
    --sh-d: rgba(0, 0, 0, .55); --sh-l: rgba(255, 255, 255, .045);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); }
body { min-height: 100vh; padding: 28px 16px 60px; }
.wrap { max-width: 1040px; margin: 0 auto; }
.wrap--narrow { max-width: 420px; margin-top: 8vh; }
.top { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.logo { height: 64px; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .logo-light { display: none; } .logo-dark { display: inline; } }
.title { font-family: 'Andsof Display', Georgia, serif; font-size: 30px; font-weight: 560; letter-spacing: -.04em; margin: 0; }
.top .who { margin-left: auto; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.card { background: var(--bg); border-radius: 18px; box-shadow: var(--raise); padding: 22px 24px; margin-bottom: 22px; }
.card h2 { font-size: 13px; font-weight: 650; color: var(--ink-soft); margin: 0 0 16px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.card h2 .count { margin-left: auto; color: var(--muted-2); font-family: var(--mono); }
label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 0 0 7px; }
.field { margin-bottom: 14px; }
input[type=text], input[type=password] {
  width: 100%; border: none; outline: none; border-radius: 10px; padding: 11px 13px; font: 13px var(--font);
  background: var(--bg); color: var(--ink); box-shadow: var(--press-sm);
}
input:focus { box-shadow: var(--press-sm), 0 0 0 3px var(--accent-soft); }
.btn {
  display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer; border-radius: 11px;
  padding: 9px 16px; font: 650 12px var(--font); background: var(--bg); color: var(--ink-soft); box-shadow: var(--raise-sm);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { color: var(--ink); box-shadow: var(--raise); }
.btn:disabled { color: var(--muted-2); box-shadow: none; cursor: not-allowed; }
.btn-primary { background: var(--solid); color: var(--solid-text); padding: 12px 24px; font-size: 13px; }
.btn-primary:hover { color: var(--solid-text); }
.btn-small { padding: 6px 11px; font-size: 11px; }
.btn-danger { color: var(--danger); }
.link { background: none; border: none; color: var(--muted); font: 600 12px var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.link:hover { color: var(--ink); }
.msg { font-size: 12.5px; margin-top: 12px; min-height: 18px; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--green); }
.hint { font-size: 12px; color: var(--muted); line-height: 1.6; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.row .field { flex: 1; min-width: 160px; margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 10px 10px; }
td { padding: 11px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
tr.off td { opacity: .55; }
.name { font-weight: 600; }
.sub { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 10.5px; padding: 3px 8px; border-radius: 7px; background: var(--well); color: var(--ink-soft); cursor: pointer; user-select: none; border: none; font-family: var(--font); }
.chip.on { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.status { font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 8px; }
.status.on { background: var(--green-soft); color: var(--green); }
.status.off { background: var(--danger-soft); color: var(--danger); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.secret { margin-top: 14px; padding: 14px 16px; border-radius: 12px; box-shadow: var(--press-sm); font-size: 12.5px; line-height: 1.7; }
.secret b { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.secret pre { white-space: pre-wrap; font: 12px/1.6 var(--font); margin: 10px 0 0; color: var(--ink-soft); }
.download { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.download .btn { white-space: normal; text-align: center; max-width: 100%; }
.dlother { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 14px; font-size: 12px; }
.dlother:empty { display: none; }
.dlother .sub { font-family: var(--font); }
.version { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.bar { height: 6px; border-radius: 4px; box-shadow: var(--press-sm); margin-top: 16px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.tplsets { display: grid; gap: 6px; margin-top: 12px; font-size: 12.5px; }
.tplset { display: flex; align-items: baseline; gap: 10px; }
.tplset .link { margin-left: auto; font-size: 11px; }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.steps { margin: 16px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
@media (max-width: 720px) {
  table, thead, tbody, tr, td, th { display: block; }
  thead { display: none; }
  tr { padding: 10px 0; border-top: 1px solid var(--line); }
  td { border: none; padding: 4px 0; }
  .actions { justify-content: flex-start; }
}

/* ═══ 9 Oct 2026 — tiles like the app's Settings: a grid of picture tiles, one panel open below ═══ */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles, .tiles.two { grid-template-columns: 1fr; } }
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 13px; text-align: left;
  min-height: 92px; padding: 18px 20px; border: none; border-radius: 18px; cursor: pointer;
  background: var(--bg); color: var(--ink); font: inherit; box-shadow: var(--raise-sm);
  transition: box-shadow .16s ease, transform .1s ease;
}
.tile[hidden] { display: none; }
.tile:hover { transform: translateY(-1px); box-shadow: var(--raise); }
.tile:active { transform: translateY(1px); box-shadow: var(--press-sm); }
.tile.active { box-shadow: var(--press-sm), inset 0 0 0 1.5px var(--accent); }
.tile > .ico, .tile > .tile-txt { position: relative; z-index: 1; }
.tile .ico { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; transition: color .14s ease; }
.tile:hover .ico { color: var(--ink); }
.tile.active .ico { color: var(--accent); }
.tile-txt { display: flex; flex-direction: column; min-width: 0; max-width: 64%; }
.tile-name { font-family: 'Helvetica Neue', Helvetica, var(--font); font-size: 20px; font-weight: 600; letter-spacing: -.045em; line-height: 1.05; text-transform: lowercase; white-space: nowrap; }
.tile-desc { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-desc.warn { color: var(--amber); font-weight: 600; }
.tile-art {
  position: absolute; inset: 0 0 0 auto; width: 52%; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center right; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%); mask-image: linear-gradient(to right, transparent 0, #000 55%);
}
.tile[data-t="people"]    .tile-art { background-image: url(/static/art-theme-light.jpg); }
.tile[data-t="stats"]     .tile-art { background-image: url(/static/art-diag.jpg); background-position: center 28%; }
.tile[data-t="money"]     .tile-art { background-image: url(/static/art-photoshop.jpg); }
.tile[data-t="keys"]      .tile-art { background-image: url(/static/art-keys.jpg); }
.tile[data-t="versions"]  .tile-art { background-image: url(/static/art-about-light.png); background-position: center; }
.tile[data-t="templates"] .tile-art { background-image: url(/static/art-poster-light.jpg); }
.tile[data-t="app"]       .tile-art { background-image: url(/static/art-about-light.png); background-position: 20% 40%; }
.tile[data-t="password"]  .tile-art { background-image: url(/static/art-keys.jpg); background-size: 260%; background-position: 8% 85%; }
@media (prefers-color-scheme: dark) {
  .tile[data-t="people"]    .tile-art { background-image: url(/static/art-theme-dark.jpg); }
  .tile[data-t="versions"]  .tile-art, .tile[data-t="app"] .tile-art { background-image: url(/static/art-about-dark.png); }
  .tile[data-t="templates"] .tile-art { background-image: url(/static/art-poster-dark.jpg); }
}

/* the one detail card under the tiles */
.detail { padding: 24px 26px 28px; }
.panel { display: none; }
.panel.active { display: block; animation: panel-in .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ph { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ph h2 { margin: 0; font-size: 17px; font-weight: 650; color: var(--ink); letter-spacing: -.02em; }
.ph .right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sub-h { font-size: 13px; font-weight: 650; color: var(--ink-soft); margin: 26px 0 12px; }

/* ⓘ «Как это работает» — folded until asked for */
.tip { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; font: 12px var(--font); color: var(--muted); }
.tip::before { content: 'i'; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.3px solid currentColor; font: 700 9.5px Georgia, serif; }
.tip:hover, .tip.on { color: var(--ink); }
.tiptext { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; box-shadow: var(--press-sm); font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.tiptext b { color: var(--ink); }
.tiptext ul { margin: 6px 0 0; padding-left: 18px; }

/* password field with an eye */
.pw { position: relative; display: block; }
.pw input { padding-right: 42px; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; }
.eye:hover { color: var(--ink); }
.eye svg { width: 18px; height: 18px; }

/* add-employee box */
.addbox { margin: 0 0 22px; padding: 18px 20px; border-radius: 14px; box-shadow: var(--press-sm); }
.addbox[hidden] { display: none; }
.rolehelp { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* service balance cards */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.svc { padding: 16px 18px; border-radius: 14px; box-shadow: var(--raise-sm); }
.svc .n { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.svc .v { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.svc .c { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.svc.bad .v, .svc.bad .c { color: var(--danger); }
.svc.warn .v { color: var(--amber); }

/* usage table */
.num { font-family: var(--mono); text-align: right; }
th.num { text-align: right; }

/* versions / template sets as small cards */
.vers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.vcard { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; box-shadow: var(--raise-sm); }
.vcard .os-ic svg { width: 22px; height: 22px; color: var(--ink-soft); display: block; }
.vcard b { display: block; font-size: 13px; }
.vcard span { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.vcard.none { box-shadow: var(--press-sm); }
.tplsets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0 0 18px; }
.tplset { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; box-shadow: var(--raise-sm); font-size: 12.5px; }
.tplset .link { align-self: flex-start; font-size: 11px; margin-top: 4px; }

/* download block + steps with drawn «screenshots» */
.dl-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn-big { padding: 14px 26px; font-size: 14px; }
.os-ic { display: inline-flex; }
.os-ic svg { width: 17px; height: 17px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps-grid { grid-template-columns: 1fr; } }
.step { display: flex; flex-direction: column; gap: 9px; }
.shot { height: 122px; border-radius: 14px; box-shadow: var(--press-sm); display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; }
.step-t { font-size: 13px; font-weight: 650; display: flex; gap: 8px; align-items: center; }
.step-t b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--solid); color: var(--solid-text); font-size: 11px; flex-shrink: 0; }
.step-x { font-size: 12px; color: var(--muted); line-height: 1.55; }
.mock { font-family: var(--font); font-size: 9.5px; line-height: 1.3; }
.mock .hl { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-soft); }
.mock-dl { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--bg); box-shadow: var(--raise-sm); max-width: 100%; }
.mk-file { width: 16px; height: 20px; border-radius: 3px; background: var(--well); box-shadow: inset 0 0 0 1.3px var(--muted-2); flex-shrink: 0; }
.mk-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ok { color: var(--green); font-weight: 800; }
.mock-ss { width: 100%; max-width: 190px; background: #1663C7; color: #fff; border-radius: 6px; padding: 9px 10px; }
.ss-t { font-weight: 700; font-size: 10px; margin-bottom: 6px; }
.mk-line { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); margin: 4px 0; }
.mk-line.s { width: 60%; }
.ss-more { text-decoration: underline; margin: 5px 0 7px; }
.ss-btns { display: flex; gap: 5px; justify-content: flex-end; }
.ss-btns span { padding: 3px 6px; border: 1px solid rgba(255, 255, 255, .7); font-size: 8.5px; white-space: nowrap; }
.ss-btns .hl { background: #fff; color: #1663C7; font-weight: 700; }
.mock-dmg { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; background: #F4F4F2; color: #222; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.dmg-app { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(#2C2C29, #151513); color: #A9D452; display: grid; place-items: center; font-size: 27px; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.dmg-arrow { font-size: 18px; color: var(--muted); }
.dmg-folder { padding: 14px 8px 6px; border-radius: 6px; background: #6FA8E8; color: #fff; font-weight: 700; font-size: 9px; }
.mock-gk { width: 100%; max-width: 190px; background: #F4F4F2; color: #222; border-radius: 8px; padding: 8px 10px 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.gk-dots { display: flex; gap: 4px; margin-bottom: 6px; }
.gk-dots i { width: 7px; height: 7px; border-radius: 50%; background: #FF5F57; }
.gk-dots i:nth-child(2) { background: #FEBC2E; } .gk-dots i:nth-child(3) { background: #28C840; }
.gk-t { font-weight: 700; font-size: 10px; }
.gk-x { color: #666; margin: 4px 0 8px; }
.mock-gk .hl { display: inline-block; padding: 3px 8px; border-radius: 5px; background: #fff; font-weight: 600; }
.mock-login { width: 110px; padding: 10px; border-radius: 10px; background: var(--bg); box-shadow: var(--raise-sm); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ml-logo { width: 34px; height: 20px; border-radius: 50%; border: 1.3px solid var(--ink); position: relative; }
.ml-logo::after { content: '✱'; position: absolute; right: -8px; top: -9px; color: #8CC63F; font-size: 13px; }
.ml-f { width: 100%; height: 9px; border-radius: 4px; box-shadow: var(--press-sm); }
.ml-b { width: 100%; text-align: center; padding: 3px 0; border-radius: 5px; background: var(--solid); color: var(--solid-text); font-weight: 700; font-size: 8.5px; }
.mock-upd { display: flex; align-items: center; gap: 9px; }
.mock-upd .hl { padding: 6px 11px; border-radius: 999px; background: var(--solid); color: var(--solid-text); font-weight: 700; font-size: 9.5px; white-space: nowrap; }
.upd-gear { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--raise-sm); color: var(--muted); font-size: 13px; }
.upd-site { font-family: var(--mono); color: var(--ink-soft); font-size: 9px; }

/* header extras */
.top .who .role { color: var(--muted-2); }
@media (max-width: 560px) { .detail { padding: 18px 16px 22px; } .top .who { margin-left: 0; width: 100%; } }

/* roles explanation + the role switcher in the table */
.roles { display: grid; gap: 6px; margin-bottom: 10px; }
.roles div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.roles b { min-width: 118px; }
.rolesel { border: none; outline: none; border-radius: 7px; padding: 2px 6px; font: 11px var(--mono); color: var(--ink-soft); background: var(--bg); box-shadow: var(--raise-sm); cursor: pointer; }

/* keys panel: one key per line — field with the eye + «Скопировать» */
.keyrows { display: grid; gap: 14px; }
.keyrow label { margin-bottom: 7px; }
.keyline { display: flex; gap: 10px; align-items: center; }
.keyline .pw { flex: 1; min-width: 0; }
.keyline input { font-family: var(--mono); font-size: 12px; }

/* drawn macOS dialogs for the install steps */
.mac-dlg { width: 100%; max-width: 186px; background: #F2F2F0; color: #1d1d1b; border-radius: 10px; padding: 9px 10px 9px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.mac-dlg b { font-size: 9.5px; line-height: 1.25; }
.md-ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #E7C13A; color: #222; font-size: 12px; font-weight: 800; }
.md-ic.tid { background: #F45D6B; color: #fff; border-radius: 50%; }
.md-ic.fold { background: #6FA8E8; color: #fff; }
.md-ic.ps { background: #0B1D3A; color: #31A8FF; font-size: 9.5px; }
.md-x { color: #6a6a66; font-size: 8.5px; }
.md-field { width: 100%; padding: 3px 6px; border-radius: 4px; background: #fff; border: 1px solid #d6d6d2; text-align: left; letter-spacing: 1px; font-size: 8px; }
.md-btns { display: flex; gap: 5px; width: 100%; margin-top: 4px; }
.md-btns span { flex: 1; padding: 3px 4px; border-radius: 5px; background: #fff; border: 1px solid #d6d6d2; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-btns .hl { background: #2F7DF6; color: #fff; border-color: #2F7DF6; font-weight: 700; }
.mac-set { width: 100%; max-width: 196px; height: 98px; background: #F2F2F0; color: #1d1d1b; border-radius: 9px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); display: grid; grid-template-columns: 74px 1fr; grid-template-rows: 14px 1fr; overflow: hidden; }
.mac-set .gk-dots { grid-column: 1 / 3; padding: 4px 6px 0; margin: 0; }
.ms-side { display: flex; flex-direction: column; gap: 3px; padding: 4px 5px; background: #E6E6E3; font-size: 7.5px; color: #555; }
.ms-side .on { background: #2F7DF6; color: #fff; border-radius: 4px; padding: 2px 3px; }
.ms-main { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 6px 7px; }
.ms-btn { align-self: flex-start; padding: 3px 7px; border-radius: 5px; background: #fff; font-size: 8px; font-weight: 600; }
.md-ic.app { background: linear-gradient(#2C2C29, #151513); color: #A9D452; font-size: 15px; }

/* real screenshots in the install steps (click → large) */
.shot.real { height: 250px; padding: 12px; background: #262624; }
@media (prefers-color-scheme: light) { .shot.real { background: #D9D9D5; } }
.shot.real img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.zoom { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 10, 9, .82); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; animation: panel-in .2s ease; }
.zoom img { max-width: min(92vw, 1100px); max-height: 88vh; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5)); }