/* Device frames (Board 2 device gallery). Retro shows them flat; Clean adds a soft shadow. */

.frame { position: relative; flex: none; box-shadow: var(--device-shadow); }
.frame-screen { position: absolute; overflow: hidden; background: #fbf8f1; isolation: isolate; }
.frame-none .frame-screen { position: relative; outline: var(--bwc) solid var(--line); }
:root[data-skin="clean"] .frame-none .frame-screen { outline: 1px solid var(--line); box-shadow: var(--shadow); }

.frame-island { background: #1d1f24; border-radius: 68px; }
.frame-island .frame-screen { border-radius: 56px; }
.frame-dynamic { position: absolute; left: 50%; top: 11px; z-index: 40; width: 124px; height: 36px; margin-left: -62px; background: #000000; border-radius: 20px; pointer-events: none; }
.frame-island.is-landscape .frame-dynamic { left: 11px; top: 50%; width: 36px; height: 124px; margin: -62px 0 0; }

.frame-key { position: absolute; width: 4px; background: #2b2e34; }
.frame-key-a, .frame-key-b, .frame-key-c { left: -4px; border-radius: 3px 0 0 3px; }
.frame-key-a { top: 150px; height: 32px; }
.frame-key-b { top: 205px; height: 58px; }
.frame-key-c { top: 275px; height: 58px; }
.frame-key-d { right: -4px; top: 230px; height: 92px; border-radius: 0 3px 3px 0; }
.frame-key-e, .frame-key-f { right: -4px; background: #3a3d44; border-radius: 0 3px 3px 0; }
.frame-key-e { top: 210px; height: 60px; }
.frame-key-f { top: 300px; height: 110px; }
.is-landscape .frame-key { display: none; }

.frame-punch { background: #2b2e33; border-radius: 50px; }
.frame-punch .frame-screen { border-radius: 40px; }
.frame-hole { position: absolute; left: 50%; top: 12px; z-index: 40; width: 20px; height: 20px; margin-left: -10px; background: #000000; border-radius: 50%; pointer-events: none; }
.frame-punch.is-landscape .frame-hole { left: 12px; top: 50%; margin: -10px 0 0; }

.frame-home { background: #1d1f24; border-radius: 58px; }
.frame-home .frame-screen { border-radius: 3px; }
.frame-speaker { position: absolute; left: 50%; top: 38px; width: 56px; height: 6px; margin-left: -28px; background: #3a3d44; border-radius: 3px; }
.frame-cam { position: absolute; left: 50%; top: 36px; width: 10px; height: 10px; margin-left: -56px; background: #2b2e34; border-radius: 50%; }
.frame-home-btn { position: absolute; left: 50%; bottom: 14px; width: 54px; height: 54px; margin-left: -27px; border: 3px solid #3a3d44; border-radius: 50%; }
.frame-home.is-landscape .frame-speaker, .frame-home.is-landscape .frame-cam { display: none; }
.frame-home.is-landscape .frame-home-btn { left: auto; right: 14px; bottom: auto; top: 50%; margin: -27px 0 0; }

.frame-tablet { background: #2b2e33; border-radius: 38px; }
.frame-tablet .frame-screen { border-radius: 18px; }
.frame-tablet.frame-tablet-wide { border-radius: 32px; }
.frame-tablet.frame-tablet-wide .frame-screen { border-radius: 12px; }
.frame-cam-dot { position: absolute; left: 50%; top: 7px; width: 7px; height: 7px; margin-left: -3px; background: #111214; border-radius: 50%; }
.frame-tablet.is-landscape .frame-cam-dot { left: 7px; top: 50%; margin: -3px 0 0; }

.frame-browser { display: flex; flex-direction: column; overflow: hidden; background: #e9e6df; border: 1px solid #cfc8b8; border-radius: 14px; }
.frame-browser .frame-screen { position: relative; }
.frame-bar { position: relative; flex: none; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.frame-light { width: 13px; height: 13px; border-radius: 50%; }
.frame-red { background: #ff5f57; }
.frame-amber { background: #febc2e; }
.frame-green { background: #28c840; }
.frame-address { position: absolute; left: 50%; top: 8px; width: 420px; max-width: calc(100% - 150px); height: 28px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: system-ui, sans-serif; font-size: 14px; color: #474e5f; white-space: nowrap; background: #ffffff; border: 1px solid #d8d3c7; border-radius: 8px; }