/* Макет iPhone: общий для сайта и админки */
/* ===== Телефон ===== */
.phone { --pw: 300px; --pad: calc(var(--pw) * .06); --gap: calc(var(--pw) * .055); width: var(--pw); aspect-ratio: 9 / 19.3; border-radius: calc(var(--pw) * .16); background: #0b0b0b; padding: calc(var(--pw) * .028); flex: none; position: relative; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw) * .135); overflow: hidden; background: var(--wall, #3b4a6b); }
.phone-screen::before { content: ''; position: absolute; top: calc(var(--pw) * .03); left: 50%; width: 32%; height: calc(var(--pw) * .085); transform: translateX(-50%); background: #000; border-radius: 99px; z-index: 3; }
.status { display: flex; justify-content: space-between; padding: calc(var(--pw) * .045) calc(var(--pw) * .1) 0; font-size: calc(var(--pw) * .047); font-weight: 600; color: #fff; position: relative; z-index: 2; }
.status i { font-style: normal; letter-spacing: .1em; }
.home { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc((var(--pw) * .944 - var(--pad) * 2 - var(--gap) * 3) / 4); gap: var(--gap); padding: calc(var(--pw) * .09) var(--pad) 0; grid-auto-flow: row dense; }
.home .w-small { grid-column: span 2; grid-row: span 2; }
.home .w-medium { grid-column: span 4; grid-row: span 2; }
.home .w-large { grid-column: span 4; grid-row: span 4; }
.home .slot > div { width: 100%; height: 100%; }
.home .slot .wg { width: 100%; height: 100%; aspect-ratio: auto; }
.lock-row [class^="slot-"] > div { width: 100%; }
.app { border-radius: 24%; background: var(--c, rgba(255, 255, 255, .22)); }
.dock { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pw) * .05); height: calc(var(--pw) * .24); border-radius: calc(var(--pw) * .09); background: rgba(255, 255, 255, .2); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: calc(var(--pw) * .035); }
.dock .app { aspect-ratio: 1; align-self: center; }
.lockscreen { color: #fff; text-align: center; padding-top: calc(var(--pw) * .16); position: relative; z-index: 2; }
.lock-inline { min-height: calc(var(--pw) * .07); font-size: calc(var(--pw) * .047); font-weight: 600; display: flex; justify-content: center; }
.lock-inline .wg { width: auto; }
.lock-time { font-family: var(--f-display); font-weight: 800; font-size: calc(var(--pw) * .25); line-height: 1; letter-spacing: -0.02em; margin-top: calc(var(--pw) * .01); }
.lock-row { display: flex; justify-content: center; gap: calc(var(--pw) * .04); margin-top: calc(var(--pw) * .05); padding: 0 calc(var(--pw) * .08); }
.lock-row .slot-circular { width: calc(var(--pw) * .2); }
.lock-row .slot-rectangular { width: calc(var(--pw) * .445); }
.lock-row .slot-ghost { border-radius: 50%; background: rgba(255, 255, 255, .14); width: calc(var(--pw) * .2); aspect-ratio: 1; }
.lock-row .slot-ghost.r { border-radius: calc(var(--pw) * .04); width: calc(var(--pw) * .445); aspect-ratio: 160 / 72; }
.lock-bottom { position: absolute; bottom: calc(var(--pw) * .06); left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 calc(var(--pw) * .12); z-index: 2; }
.lock-bottom span { width: calc(var(--pw) * .14); aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .3); }
.phone .wg-inline .inl { font-size: calc(var(--pw) * .047); }

/* ===== Кастомные экраны: обои и схема ===== */
.phone-screen.has-img { background-size: cover; background-position: center; }
.phone-screen.has-img .app { background: rgba(255, 255, 255, .26); }
.phone-screen.has-img .dock { background: rgba(255, 255, 255, .18); }
.home .slot, .lock-row [class^="slot-"] { position: relative; }
.slot-n { position: absolute; top: -6px; left: -6px; z-index: 4; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 700 12px/22px var(--f-text); text-align: center; box-shadow: 0 0 0 2px #0b0b0b; }
.lock-inline { position: relative; }
.slot-n.in { position: static; display: inline-block; margin-left: 6px; }
/* Светлые обои: часы и виджеты блокировки тёмные, как их покажет iOS */
.lockscreen.ink { color: var(--ink); }
.lockscreen.ink .wg-circular .wg-in, .lockscreen.ink .wg-rectangular .wg-in { --wfg: var(--ink); --wac: var(--ink); color: var(--ink); background: rgba(255, 255, 255, .5); }
.lockscreen.ink .wg-inline .wg-in { color: var(--ink); }
.lockscreen.ink .slot-ghost { background: rgba(255, 255, 255, .5); }