*{box-sizing:border-box;margin:0;padding:0}
html,body{width:390px;height:844px;overflow:hidden;background:#000;font-family:-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;color:#fff}
.phone{position:relative;width:390px;height:844px;background:#0b0b0f;border-radius:0;overflow:hidden}
.status{height:54px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 28px 8px;font-size:15px;font-weight:600}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:125px;height:36px;background:#000;border-radius:20px}
h1{font-size:34px;font-weight:700;letter-spacing:-.5px;padding:8px 20px 4px}
.sub{color:#8e8e93;font-size:15px;padding:0 20px 12px}
.card{margin:12px 16px;background:#1c1c1e;border-radius:18px;padding:16px}
.row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #2c2c2e}
.row:last-child{border-bottom:0}
.avatar{width:44px;height:44px;border-radius:22px;background:#3a3a3c;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:none}
.name{font-size:17px;font-weight:600}
.note{color:#8e8e93;font-size:14px}
.chip{display:inline-block;padding:5px 11px;border-radius:14px;background:#2c2c2e;font-size:13px;font-weight:600;margin:4px 6px 0 0;color:#e5e5ea}
.chip.on{background:#0a84ff;color:#fff}
.chip.red{background:#ff453a}
.chip.amber{background:#ff9f0a;color:#000}
.field{background:#2c2c2e;border-radius:12px;padding:12px 14px;font-size:17px;margin-top:10px;min-height:46px}
.field .ph{color:#636366}
.caret{display:inline-block;width:2px;height:20px;background:#0a84ff;vertical-align:middle;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.btn{display:block;margin:16px;background:#0a84ff;color:#fff;border-radius:14px;text-align:center;padding:16px;font-size:17px;font-weight:600}
.notif{position:absolute;left:12px;right:12px;top:-140px;background:rgba(40,40,44,.92);backdrop-filter:blur(20px);border-radius:24px;padding:14px 16px;display:flex;gap:12px;transition:top .5s cubic-bezier(.2,.9,.3,1.2)}
.notif.in{top:64px}
.notif .icon{width:38px;height:38px;border-radius:10px;background:#5e5ce6;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.notif b{font-size:15px}.notif p{font-size:14px;color:#d1d1d6}
.tag{position:absolute;bottom:0;left:0;right:0;padding:18px 20px 40px;font-size:22px;font-weight:700;letter-spacing:-.3px;background:linear-gradient(transparent,#000 40%);opacity:0;transition:opacity .4s}
.tag.in{opacity:1}
.hidden{display:none}