/* ============================================================
   Base — reset, phone shell, screen system, status bar
   ============================================================ */

/* ── RESET ── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

/* ── BASE BODY ── */
body {
    background: var(--ink-900);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;
    min-height: 100vh
}

/* ── PHONE FRAME ── */
.pw {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px
}

.plbl {
    color: #555;
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 500;
    text-transform: uppercase
}

.phone {
    width: 375px;
    height: 812px;
    background: var(--surface-canvas);
    border-radius: 50px;
    /* `hidden` still makes this a scroll container, and the closed sheets
       park below the fold (scrollHeight ≈ 1313). Focusing any control near
       the bottom then let Chrome scroll the whole frame out of alignment.
       `clip` is not scrollable at all; `hidden` stays as the fallback. */
    overflow: hidden;
    overflow: clip;
    border: 8px solid #2a2a3e;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
    position: relative
}

/* Cửa sổ thấp hơn khung máy thì phần đáy — bottom nav, FAB Quick Sale,
   nút + tạo post — rơi khỏi tầm nhìn và trông y như bị mất. Thu nhỏ cả
   khung cho vừa cửa sổ. Dùng `zoom` chứ không `transform: scale()`:
   zoom co luôn hệ toạ độ nên chuột vẫn bấm đúng chỗ và không tạo
   containing block mới. Tỉ lệ bên trong vẫn nguyên 375×812. */
@media (max-height: 930px) { body { padding: 20px 16px } }
@media (max-height: 890px) { .pw { zoom: .92 } }
@media (max-height: 820px) { .pw { zoom: .84 } }
@media (max-height: 750px) { .pw { zoom: .76 } }
@media (max-height: 680px) { .pw { zoom: .68 } }

/* ── SCREEN SYSTEM ── */
.screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-canvas);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease
}

.screen.active {
    opacity: 1;
    pointer-events: all
}

/* ── STATUS BAR ── */
.sb {
    padding: 14px 20px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: var(--surface-canvas)
}

.sbt {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-900)
}

.sbi {
    display: flex;
    gap: 5px;
    align-items: center
}