/* Tukluy — in-app screen primitives (360-design-width mock screens).
   Shared by phone / tablet / iOS store-screenshot canvases. Pairs with app-tokens.css. */
.s { width: 360px; min-height: 766px; background: var(--c-bg); display: flex; flex-direction: column; font-family: var(--ff-body); color: var(--c-text-primary); }
.sb { height: 30px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; font-family: var(--ff-mono); font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.sb .r { display: inline-flex; gap: 7px; align-items: center; opacity: .8; font-size: 11px; }
.ab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-surface); flex: 0 0 auto; }
.ab .ttl { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ab .ttl .km { font-family: var(--ff-km); font-weight: 600; font-size: 13px; color: var(--c-text-tertiary); margin-left: 6px; }
.ab .badge2 { font-family: var(--ff-mono); font-size: 11px; font-weight: 600; color: var(--c-text-tertiary); background: var(--c-surface-sunken); padding: 5px 10px; border-radius: 999px; }
.nav { display: flex; height: 66px; background: var(--c-surface); box-shadow: 0 -1px 0 var(--c-border); flex: 0 0 auto; }
.nav .ti { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--c-text-tertiary); }
.nav .ti .i { font-size: 21px; line-height: 1; }
.nav .ti.on { color: var(--g); font-weight: 700; }
.body { flex: 1; overflow: hidden; padding: 14px; }
.km { font-family: var(--ff-km); }
.mono { font-family: var(--ff-mono); font-feature-settings:"tnum","zero"; font-variant-numeric: tabular-nums slashed-zero; }

.entry { flex:1; height:38px; background:var(--c-surface); border-radius:8px; box-shadow:var(--sh-card); display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.pt { background:var(--c-surface); border-radius:8px; box-shadow:var(--sh-card); overflow:hidden; }
.pi { aspect-ratio:1; background:var(--c-surface-sunken); position:relative; display:flex; align-items:center; justify-content:center; }
.pb { position:absolute; top:4px; left:4px; padding:1px 5px; border-radius:4px; font-family:var(--ff-mono); font-size:9px; font-weight:700; }
.mb { position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:4px; background:var(--c-surface); box-shadow:inset 0 0 0 1px var(--c-border-strong); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--c-text-secondary); }
.qb { position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 5px; background:var(--c-primary); color:#fff; border-radius:999px; font-family:var(--ff-mono); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.pm { padding:5px 7px 7px; }
.pn { font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp { font-size:10px; font-weight:600; color:var(--c-text-secondary); margin-top:1px; }
.ofbar { display:flex; align-items:center; gap:8px; padding:7px 14px; background:var(--c-info-bg); color:var(--c-info); font-size:12px; font-weight:600; flex:0 0 auto; }
.ofbar .d { width:8px; height:8px; border-radius:50%; background:var(--c-info); box-shadow:0 0 0 3px rgba(26,91,168,.18); }
.qrow { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--c-divider); }
.qi { width:26px; height:26px; border-radius:50%; background:var(--c-info-bg); color:var(--c-info); display:flex; align-items:center; justify-content:center; font-size:13px; flex:0 0 auto; }
.subbar { display:flex; gap:0; padding:0 6px; background:var(--c-surface); box-shadow:0 1px 0 var(--c-border); flex:0 0 auto; }
.stb { padding:11px 12px; font-size:12.5px; font-weight:600; color:var(--c-text-tertiary); border-bottom:2px solid transparent; white-space:nowrap; }
.stb.on { color:var(--c-text-primary); border-bottom-color:var(--c-primary); }
.kpi { background:var(--c-surface); border-radius:10px; padding:12px 13px; box-shadow:var(--sh-card); min-height:62px; }
.kpi.p { background:var(--c-primary); } .kpi.p .kl,.kpi.p .kv{ color:#fff; }
.kpi.g .kv { color:var(--c-primary); }
.kl { font-family:var(--ff-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--c-text-tertiary); }
.kv { font-size:21px; font-weight:700; margin-top:6px; letter-spacing:-.015em; }