/* ==========================================================
   PHONE — a real handset: titanium bezel, side buttons,
   status bar with island, app screen, home indicator
   ========================================================== */
.ph-row { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 24px; justify-items: center; }
.ph { --tint: #4FC291; position: relative; margin: 0; width: 268px; aspect-ratio: 9 / 19.2; padding: 10px; border-radius: 48px;
  background: linear-gradient(145deg, #3A3D46, #15161B 30%, #0B0C10 70%, #2A2C33);
  box-shadow: 0 0 0 1.5px #4A4D57, inset 0 0 0 2px #050608, 0 50px 80px -40px rgba(0,0,0,.75), 0 20px 50px -30px color-mix(in srgb, var(--tint) 60%, transparent);
  transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ph:hover { transform: translateY(-8px) rotate(-.6deg); }
.ph-btn { position: absolute; width: 3px; border-radius: 2px; background: #2C2E35; }
.ph-btn.a { left: -3px; top: 104px; height: 28px; } .ph-btn.b { left: -3px; top: 146px; height: 50px; } .ph-btn.c { right: -3px; top: 128px; height: 72px; }
.ph-scr { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #FFFFFF; color: #14161C; display: flex; flex-direction: column;
  background-image: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--tint) 16%, #fff), #fff 70%); }
.ph-status { position: relative; display: flex; align-items: center; gap: 5px; padding: 13px 22px 0 26px; height: 40px; font: 600 12.5px var(--sans); }
.ph-status b { flex: 1; font-weight: 600; }
.ph-island { position: absolute; left: 50%; top: 9px; width: 86px; height: 24px; margin-left: -43px; border-radius: 20px; background: #050608; }
.ph-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.ph-sig i { width: 3px; border-radius: 1px; background: #14161C; } .ph-sig i:nth-child(1) { height: 4px; } .ph-sig i:nth-child(2) { height: 6px; } .ph-sig i:nth-child(3) { height: 8px; } .ph-sig i:nth-child(4) { height: 10px; }
.ph-bat { position: relative; width: 22px; height: 11px; margin-left: 4px; border-radius: 3.5px; border: 1.5px solid #14161C; }
.ph-bat::before { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1.5px; background: #14161C; }
.ph-app { padding: 16px 18px 10px; }
.ph-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); box-shadow: 0 8px 18px -8px var(--tint); }
.ph-ic svg { width: 22px; height: 22px; fill: none; stroke: #0B0D12; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ph-ind { margin: 12px 0 0; font: 600 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6B7183; }
.ph h3 { margin: 4px 0 0; font: 700 19px/1.15 var(--sans); letter-spacing: -.02em; color: #14161C; }
.ph-desc { margin: 6px 0 0; font: 12.5px/1.45 var(--sans); color: #4D5263; }
.ph-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 14px 4px; }
.ph-kpi div { padding: 7px 8px; border-radius: 10px; background: #F2F3F7; }
.ph-kpi b { display: block; font: 700 17px var(--sans); } .ph-kpi small { font: 9.5px var(--sans); color: #7A8090; }
.ph-list { list-style: none; margin: 4px 0 0; padding: 0 14px; display: grid; gap: 2px; }
.ph-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #EEF0F4; }
.ph-list li > i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 10.5px var(--sans); font-style: normal; color: #14161C; background: color-mix(in srgb, var(--tint) 28%, #fff); }
.ph-list b { display: block; font: 600 11.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-list small { display: block; font: 10px var(--sans); color: #7A8090; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-list u { text-decoration: none; font: 600 9px var(--sans); padding: 4px 8px; border-radius: 100px; white-space: nowrap; background: #EEF0F4; color: #555B6B; }
.ph-list u.go { background: #DDF7EC; color: #11885A; } .ph-list u.wait { background: #FFF1D6; color: #A86A00; } .ph-list u.hot { background: #FFE3DF; color: #C2382A; }
.ph-meta { margin: auto 14px 0; padding: 10px 12px; border-radius: 14px; background: #F4F5F8; display: grid; gap: 6px; }
.ph-meta div { display: grid; gap: 1px; }
.ph-meta dt { font: 600 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A90A0; }
.ph-meta dd { margin: 0; font: 600 11px var(--sans); color: #14161C; }
.ph-home { display: block; width: 110px; height: 4.5px; margin: 10px auto 8px; border-radius: 4px; background: #14161C; }
@media (prefers-reduced-motion: reduce) { .ph:hover { transform: none; } }
@media (min-width: 900px) { .ph-row { grid-template-columns: repeat(3, 268px); justify-content: center; gap: 48px 64px; } }
@media (max-width: 599px) {
  .ph-row { display: flex; gap: 18px; justify-content: flex-start; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 4px 4px 26px; scrollbar-width: thin; }
  .ph-row .ph { flex: 0 0 268px; scroll-snap-align: start; }
}
.ph.ph-sm .ph-island { width: 70px; margin-left: -35px; }
.ph.ph-sm .ph-status { padding-left: 20px; padding-right: 16px; }