/* ==========================================================
   手机壳核心样式
   ========================================================== */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
    width:100%;height:100%;
    background:#d8d8dd;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
}

/* ================= 缩放舞台 ================= */
#stage{
    width:393px;height:852px;
    transform-origin:center center;
    position:relative;flex-shrink:0;
}

/* ================= 手机本体 ================= */
.phone{
    position:absolute;inset:0;
    background:linear-gradient(165deg,#8e8e93 0%,#5c5c61 45%,#3a3a3f 100%);
    border-radius:52px;
    overflow:hidden;
    box-shadow:0 0 0 10px #1c1c1e, 0 20px 60px rgba(0,0,0,.25);
}
body.fullscreen .phone{border-radius:0;box-shadow:none}

.screen{position:absolute;inset:0;overflow:hidden}

/* ================= Liquid Glass 材质 ================= */
.glass{
    background:transparent;
    backdrop-filter:blur(1px) brightness(1.06);
    -webkit-backdrop-filter:blur(1px) brightness(1.06);
    border:none;
    box-shadow:
        0 -0.5px 0 0 rgba(255,255,255,.35),
        0 0.5px 0 0 rgba(0,0,0,.08),
        inset 0 1px 0 0 rgba(255,255,255,.45),
        inset 0 -0.5px 0 0 rgba(0,0,0,.06),
        0 2px 8px rgba(0,0,0,.06);
}

/* ================= 桌面 ================= */
.home{
    position:absolute;inset:0;
    padding:70px 24px 0;
    display:flex;flex-direction:column;
    transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .3s;
}
body.in-app .home{transform:scale(.92);opacity:0;pointer-events:none}

.app-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:22px 16px;align-content:start;
}

.app{
    display:flex;flex-direction:column;align-items:center;gap:7px;
    background:none;border:none;cursor:pointer;padding:0;
    transition:transform .15s;
}
.app:active{transform:scale(.9)}

.app-icon{
    width:60px;height:60px;border-radius:15px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.app-icon svg{
    width:30px;height:30px;
    flex-shrink:0;
    fill:none;stroke:#fff;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;
}

.app-name{
    font-size:11px;font-weight:450;color:#fff;
    letter-spacing:.1px;
    text-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* 页面指示点 */
.page-dots{
    margin-top:auto;margin-bottom:12px;
    display:flex;justify-content:center;gap:7px;
}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}
.dot.active{background:rgba(255,255,255,.85)}

/* ================= Dock ================= */
.dock{
    position:absolute;left:84px;right:84px;bottom:26px;
    height:66px;border-radius:24px;
    display:flex;align-items:center;justify-content:space-evenly;
    z-index:40;
    transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .3s;
}
body.in-app .dock{transform:translateY(130%);opacity:0;pointer-events:none}
.dock .app-name{display:none}
.dock .app-icon{width:50px;height:50px;border-radius:13px}
.dock .app-icon svg{width:26px;height:26px}

/* ================= App 容器 ================= */
.app-view{
    position:absolute;inset:0;
    background:#fff;
    z-index:70;
    transform:scale(1.08);
    opacity:0;pointer-events:none;
    transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .25s;
    overflow:hidden;
}
body.in-app .app-view{transform:scale(1);opacity:1;pointer-events:auto}

/* ================= Home 指示条 ================= */
.home-indicator{
    position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
    width:140px;height:5px;border-radius:3px;
    background:rgba(255,255,255,.5);
    z-index:100;cursor:pointer;
    transition:background .3s;
}
body.in-app .home-indicator{background:rgba(0,0,0,.22)}