/* 自定义细节与 iPhone 15 外观 */
:root{
  --device-width:390px; /* iPhone 15 */
  --device-height:844px;
  --bezel:16px;
  --radius:48px;
}

html,body{height:100%;}

.device{
  width:calc(var(--device-width) + var(--bezel)*2);
  height:calc(var(--device-height) + var(--bezel)*2);
  background:#dcdfe3;
  border-radius:calc(var(--radius) + var(--bezel));
  padding:var(--bezel);
  box-shadow:0 30px 60px rgba(0,0,0,.15), 0 10px 20px rgba(255,255,255,.45) inset;
  position:relative;
}

.screen{
  width:var(--device-width);
  height:var(--device-height);
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
}

/* 动态岛 */
.island{
  position:absolute;
  top:10px;left:50%;
  transform:translateX(-50%);
  width:120px;height:35px;
  background:rgba(0,0,0,.85);
  border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  z-index:30;
}

/* 动态岛摄像头点位 */
.island::before{
  content:"";
  position:absolute;
  right:12px;top:50%;
  transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #3cf, #024);
  filter:blur(.2px);
}

/* 侧边按键（静音、电源、音量）*/
.device::before,.device::after{
  content:"";position:absolute;left:-2px;background:#1a1a1a;border-radius:2px;
}
.device::before{top:120px;width:2px;height:48px;box-shadow:0 80px 0 0 #1a1a1a}
.device::after{right:-2px;left:auto;top:180px;width:2px;height:68px}

/* 统一的导航栏与底部栏占位（在各页面内部使用 Tailwind）*/
.safe-top{height:48px}
.safe-bottom{height:64px}

/* 卡片阴影与圆角 */
.card{border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.12)}

/* iframe 容器在 index.html 中使用 */
.frames-wrap{display:grid;gap:16px}
@media(min-width:1200px){
  .frames-wrap{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1600px){
  .frames-wrap{grid-template-columns:repeat(4,1fr)}
}

.frame-title{position:absolute;top:8px;left:16px;z-index:40;color:#111;font-size:12px;background:rgba(255,255,255,.85);padding:4px 8px;border-radius:10px}

.iframe-mock{border:none;width:100%;height:100%;}

/* 轻量滚动条 */
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:10px}

/* 通用徽章、标签 */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:rgba(0,0,0,.06);backdrop-filter:blur(6px);color:#111}