/* ===== Reset ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;background:#000;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;overflow:hidden;user-select:none;color:#fff}
button{font-family:inherit;border:none;cursor:pointer}

/* ===== Phone ===== */
#phone{position:relative;width:100%;height:100%;max-width:430px;margin:0 auto;background:#000;overflow:hidden}
@media(min-width:431px){
  #phone{height:92vh;margin-top:4vh;border-radius:55px;box-shadow:0 0 0 12px#1a1a1a,0 30px 80px rgba(0,0,0,.6)}
}

/* Dynamic Island */
#dynamic-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:126px;height:37px;background:#000;border-radius:20px;z-index:150}

/* Status Bar */
#status-bar{position:absolute;top:0;left:0;right:0;height:54px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 28px 8px;z-index:140;font-size:15px;font-weight:600}
.sb-right{display:flex;gap:6px;align-items:center;font-size:12px}

/* Screen */
#screen{position:absolute;top:54px;bottom:0;left:0;right:0;overflow:hidden;background:#000}

#home-bar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:rgba(255,255,255,.6);z-index:150}

/* ===== Notification Banner ===== */
#banner{position:absolute;top:54px;left:8px;right:8px;background:rgba(40,40,42,.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-radius:22px;padding:12px;display:flex;gap:12px;z-index:200;cursor:pointer;animation:slideDown .4s ease}
#banner.hidden{display:none}
@keyframes slideDown{from{transform:translateY(-120%);opacity:0}to{transform:translateY(0);opacity:1}}
.banner-icon{width:40px;height:40px;border-radius:9px;background:#333;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.banner-body{flex:1;min-width:0}
.banner-head{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.5)}
.banner-title{font-size:14px;color:rgba(255,255,255,.9);margin-top:2px}
.banner-text{font-size:14px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Home Screen ===== */
.home{width:100%;height:100%;background:linear-gradient(160deg,#0f1e3d 0%,#1e3a5f 50%,#0d1b2a 100%);padding:20px 16px 90px;overflow-y:auto}
.home-time{text-align:center;padding-top:40px;color:#fff}
.home-time .big{font-size:64px;font-weight:700;letter-spacing:-2px}
.home-time .date{font-size:18px;opacity:.9;margin-top:4px}
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 10px;margin-top:30px}
.app{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative}
.app .icon{width:58px;height:58px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.app .label{font-size:11px;color:#fff}
.app .badge{position:absolute;top:-4px;right:8px;min-width:20px;height:20px;border-radius:10px;background:#ff3b30;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 6px;font-weight:600}

/* Dock */
.dock{position:absolute;bottom:8px;left:8px;right:8px;height:80px;background:rgba(60,60,60,.5);backdrop-filter:blur(30px);border-radius:28px;display:flex;justify-content:space-around;align-items:center;padding:0 10px}
.dock .app .icon{width:56px;height:56px}

/* ===== Generic App Page ===== */
.app-page{width:100%;height:100%;display:flex;flex-direction:column;background:#000}
.app-nav{padding:14px 16px;background:#1c1c1e;border-bottom:.5px solid#38383c;display:flex;align-items:center;gap:12px;font-size:17px;position:relative}
.app-nav .back{color:#0a84ff;cursor:pointer;font-size:17px}
.app-nav .title{font-weight:600}
.app-body{flex:1;overflow-y:auto;padding:16px}

/* ===== SMS ===== */
.sms-list-item{display:flex;gap:12px;padding:12px 0;border-bottom:.5px solid#2c2c2e;cursor:pointer}
.sms-list-item .avatar{width:40px;height:40px;border-radius:8px;background:#5ac8fa;display:flex;align-items:center;justify-content:center;font-size:18px}
.sms-list-item .content{flex:1;min-width:0}
.sms-list-item .top{display:flex;justify-content:space-between;font-size:15px}
.sms-list-item .sender{font-weight:600}
.sms-list-item .time{font-size:12px;color:#8e8e93}
.sms-list-item .preview{font-size:14px;color:#8e8e93;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.sms-bubble{background:#2c2c2e;border-radius:18px;padding:12px 16px;margin-bottom:12px;font-size:15px;line-height:1.5;animation:fadeIn .3s}
.sms-bubble .link{color:#0a84ff;text-decoration:underline;word-break:break-all;cursor:pointer}
.sms-sender{font-size:12px;color:#8e8e93;text-align:center;margin-bottom:12px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== WeChat ===== */
.wx{background:#ededed}
.wx .app-nav{background:#f7f7f7;color:#000;border-bottom:.5px solid#c7c7cc}
.wx .app-nav .back{color:#0a84ff}
.wx-msg{display:flex;gap:10px;margin-bottom:16px;animation:fadeIn .3s}
.wx-msg .avatar{width:40px;height:40px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;background:#ccc}
.wx-msg .name{font-size:12px;color:#888;margin-bottom:4px}
.wx-msg .bubble{background:#fff;padding:10px 14px;border-radius:6px;font-size:15px;line-height:1.5;max-width:75%}
.wx-msg.self{flex-direction:row-reverse}
.wx-msg.self .bubble{background:#95ec69}
.wx-msg .link{color:#576b95;text-decoration:underline;word-break:break-all}

/* ===== Choices ===== */
.choices{padding:12px 16px 30px;background:#1c1c1e;border-top:.5px solid#2c2c2e;display:flex;flex-direction:column;gap:10px}
.choice{background:#2c2c2e;color:#fff;border:none;padding:14px;border-radius:12px;font-size:15px;text-align:left;cursor:pointer}
.choice:active{background:#3a3a3c}
.choice.primary{background:#0a84ff;text-align:center;font-weight:600}
.choice.danger{background:#ff453a;text-align:center}

/* ===== Tooltip / Lesson ===== */
.tooltip{position:fixed;bottom:120px;left:20px;right:20px;background:#1c1c1e;border:1px solid#3a3a3c;border-radius:14px;padding:18px;z-index:300;font-size:14px;line-height:1.7;animation:fadeIn .3s}
.tooltip .red{color:#ff453a;font-weight:600}
.tooltip .green{color:#30d158}
.tooltip button{margin-top:14px;width:100%;background:#0a84ff;color:#fff;border:none;padding:12px;border-radius:10px;font-size:15px}

.lesson{background:#1c1c1e;min-height:100%;padding:24px}
.lesson .tag{display:inline-block;background:#ff453a;color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;margin-bottom:16px}
.lesson h2{font-size:22px;margin-bottom:16px;line-height:1.4}
.lesson .body{font-size:15px;line-height:1.8;color:#e5e5e7}
.lesson h4{color:#ff453a;margin:16px 0 8px}
.lesson ul{padding-left:20px}
.lesson li{margin-bottom:8px}
.lesson button{margin-top:24px;width:100%;background:#0a84ff;color:#fff;border:none;padding:14px;border-radius:12px;font-size:16px}

/* ===== Call ===== */
.call{width:100%;height:100%;background:linear-gradient(180deg,#1a1a2e,#0a0a14);display:flex;flex-direction:column;align-items:center;color:#fff;padding-top:80px}
.call .who{font-size:28px;font-weight:300}
.call .status{font-size:14px;color:#8e8e93;margin-top:8px}
.call .face{width:100px;height:100px;border-radius:50%;background:#444;display:flex;align-items:center;justify-content:center;font-size:50px;margin-top:40px}
.call .btns{margin-top:auto;margin-bottom:80px;display:flex;gap:60px}
.call .btn{width:70px;height:70px;border-radius:50%;border:none;font-size:28px;cursor:pointer}
.call .btn.reject{background:#ff3b30}
.call .btn.accept{background:#30d158}
.call .transcript{padding:24px;font-size:14px;line-height:1.8;color:#ccc}

/* ===== Reveal ===== */
.reveal{width:100%;height:100%;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}
.reveal p{font-size:17px;line-height:2.2;white-space:pre-line;animation:fadeIn 1s ease}
.reveal button{margin-top:40px;background:#fff;color:#000;border:none;padding:14px 40px;border-radius:24px;font-size:16px}

/* ===== Report ===== */
.report{background:linear-gradient(180deg,#1a1a2e,#16213e);min-height:100%;padding:24px;overflow-y:auto}
.report .badge{text-align:center;font-size:56px;margin:20px 0}
.report h2{text-align:center;font-size:24px}
.report .tag{text-align:center;color:#ffd60a;font-size:16px;margin:8px 0 20px}
.report .score{text-align:center;color:#8e8e93;margin-bottom:20px}
.report .advice{background:rgba(255,255,255,.08);border-radius:12px;padding:16px;font-size:14px;line-height:1.7;margin-bottom:20px}
.report .contact{font-size:13px;color:#8e8e93;text-align:center;line-height:1.8}

/* ===== Fake Web (Safari钓鱼页) ===== */
.fakeweb{background:#f5f5f7;min-height:100%;color:#000}
.fakeweb .nav{background:#e5e5ea;padding:10px 16px;font-size:13px;color:#666;border-bottom:.5px solid#ccc;display:flex;align-items:center;gap:8px}
.fakeweb .body{padding:24px}
.fakeweb h3{font-size:20px;margin-bottom:16px}
.fakeweb input{width:100%;padding:12px;border:1px solid#ccc;border-radius:8px;margin-bottom:12px;font-size:15px}
.fakeweb button{width:100%;background:#0a84ff;color:#fff;border:none;padding:14px;border-radius:8px;font-size:16px}

.hidden{display:none!important}