@import url("../runtime/concepts/shared/scrollbars.css");

/* Размер iframe фиксирован: уменьшается только внешняя рамка, без изменения вёрстки концепта. */
:root { color-scheme:light; font-family:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden;background:transparent; }
body[data-surface="paper"] { background:#efeff1; }
/* Светлая подложка и тень отделяют макет от карточки без изменения самого интерфейса. */
body[data-surface="preview"] { background:#fff; }
body[data-surface="preview"] .device { box-shadow:0 18px 48px -16px #17192345,0 0 0 1px #959ba330; }
[hidden] { display:none !important; }
.frame-stage { position:absolute;inset:0;display:grid;place-items:center;padding:24px;overflow:hidden; }
.device-space { position:relative;flex:none; }
html[data-frame-state="loading"] .device-space { visibility:hidden; }
.device { position:absolute;left:0;top:0;transform-origin:0 0;isolation:isolate; }
.device[data-format="desktop"],.device[data-format="web"] { width:1922px;height:1146px;padding:1px;border-radius:19px;background:#bcbfc4;box-shadow:0 22px 65px -18px #17192335,0 2px 7px #17192312; }
.browser-chrome { height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 22px;background:linear-gradient(#fafafb,#e9eaed);border-radius:18px 18px 0 0;border-bottom:1px solid #d5d7dc; }
.traffic-lights { display:flex;gap:10px;align-items:center;min-width:78px; }
.traffic-lights i { display:block;width:15px;height:15px;border:1px solid #00000012;border-radius:50%;background:#ee6a60; }
.traffic-lights i:nth-child(2) { background:#efbf50; }
.traffic-lights i:nth-child(3) { background:#5fc054; }
.address-label { display:block;width:620px;max-width:60%;padding:10px 24px;border:1px solid #d6d8dd;border-radius:9px;background:#ffffffb0;color:#62666e;font-size:16px;line-height:20px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.chrome-balance { min-width:78px; }
.screen { position:relative;overflow:hidden;background:var(--screen-background,#fff); }
.device[data-format="desktop"] .screen,.device[data-format="web"] .screen { width:1920px;height:1080px;border-radius:0 0 18px 18px; }
.screen iframe { display:block;border:0;padding:0;margin:0;background:var(--screen-background,#fff); }
.device[data-format="desktop"] iframe,.device[data-format="web"] iframe { width:1920px;height:1080px; }
.camera-island,.device-button,.phone-status,.phone-home { display:none;pointer-events:none; }

/* Телефон сохраняет 430 × 932 CSS px; металл, стекло и камера принадлежат только презентации. */
.device[data-format="mobile"] { width:446px;height:948px;padding:8px;border-radius:60px;background:linear-gradient(115deg,#96958f 0,#d3d2ca 12%,#454641 28%,#b7b7af 72%,#777972 100%);box-shadow:0 28px 70px -25px #1013166b,0 0 0 1px #696b65,0 0 0 3px #d4d4cd; }
.device[data-format="mobile"]:before { position:absolute;content:"";inset:3px;border:4px solid #171815;border-radius:57px;pointer-events:none;z-index:2; }
.device[data-format="mobile"] .browser-chrome { display:none; }
.device[data-format="mobile"] .screen { width:430px;height:932px;border-radius:51px; }
.device[data-format="mobile"] iframe { width:430px;height:932px; }
.device[data-format="mobile"] .camera-island { display:block;position:absolute;top:20px;left:50%;width:126px;height:35px;transform:translateX(-50%);border-radius:22px;background:#10100f;box-shadow:inset 0 0 0 1px #161715;z-index:4; }
.device[data-format="mobile"] .camera-island:after { content:"";position:absolute;top:12px;right:11px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 37% 34%,#1c2e4f,#0c0d15 54%,#16181d); }
.device[data-format="mobile"] .device-button { display:block;position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#75766d,#c7c8bf); }
.device[data-format="mobile"] .device-button-left { left:-4px;top:175px;height:58px;box-shadow:0 74px 0 #9b9d94; }
.device[data-format="mobile"] .device-button-right { right:-4px;top:245px;height:94px; }
.device[data-format="mobile"] .phone-status { display:flex;align-items:center;justify-content:space-between;position:absolute;inset:0 0 auto;height:56px;padding:0 29px 0 33px;z-index:3;color:#151515;background:var(--screen-background,#fff);font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:700; }
.phone-status-icons { display:flex;gap:6px;align-items:center; }
.phone-status-icons svg { width:18px;height:14px;fill:currentColor; }
.phone-status-icons .wifi-icon { fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round; }
.phone-status-icons .wifi-icon circle { fill:currentColor;stroke:none; }
.phone-status-icons .battery-icon { width:28px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round; }
.phone-status-icons .battery-icon rect:nth-child(2) { fill:currentColor;stroke:none; }
.device[data-format="mobile"] .phone-home { display:block;position:absolute;left:50%;bottom:10px;width:132px;height:5px;transform:translateX(-50%);border-radius:8px;background:#151515;z-index:3; }
.device[data-phone-theme="dark"] .phone-status { color:#fff; }
.device[data-phone-theme="dark"] .phone-home { background:#fff; }
.frame-loading { position:absolute;margin:0;color:#666b75;font-size:14px;line-height:20px; }
.frame-error { max-width:460px;margin:0;padding:20px 24px;border:1px solid #d7d9df;border-radius:16px;background:#fff;color:#363a43;font-size:15px;line-height:1.55;text-align:center; }
@media (max-width:600px) { .frame-stage { padding:16px; } }
@media (max-width:360px) { .frame-stage { padding:12px; } }