/* ===== BlackBerry Messenger clone — Bold 9900 / BBM 6 look ===== */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:Tahoma,Verdana,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{background:#e9e9ec radial-gradient(ellipse at 50% 40%,#f7f7f9 0%,#e6e6ea 60%,#d9d9de 100%)}
button{font-family:inherit}
#stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#pagelogo{position:fixed;left:18px;top:14px;display:flex;align-items:center;gap:10px;z-index:50;user-select:none}
#pagelogo .bb7{width:34px;height:26px}
#pagelogo .bb7 i{background:#111;width:11px;height:6px}
#pagelogo .bb7 i:nth-child(1){left:3px;top:0}#pagelogo .bb7 i:nth-child(2){left:15px;top:0}
#pagelogo .bb7 i:nth-child(3){left:0;top:10px}#pagelogo .bb7 i:nth-child(4){left:12px;top:10px}#pagelogo .bb7 i:nth-child(5){left:24px;top:10px}
#pagelogo .bb7 i:nth-child(6){left:6px;top:20px}#pagelogo .bb7 i:nth-child(7){left:18px;top:20px}
#pagelogo .wordmark{font:italic bold 22px/1 Arial,Helvetica,sans-serif;letter-spacing:-.5px;color:#111}

/* ---------- device body ---------- */
.device{position:relative;width:704px;padding:0 32px 26px;background:linear-gradient(180deg,#3a3a3e 0%,#1c1c1f 12%,#121214 100%);border-radius:40px 40px 34px 34px;box-shadow:0 0 0 2px #5a5a5e,0 0 0 5px #222,0 0 0 6px #6b6b70,0 30px 60px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.12);transform-origin:center center;user-select:none}
.dev-top{height:52px;position:relative}
.earpiece{position:absolute;left:50%;top:18px;width:110px;height:7px;margin-left:-55px;border-radius:4px;background:linear-gradient(#050505,#2a2a2a);box-shadow:inset 0 1px 2px #000,0 1px 0 rgba(255,255,255,.08)}
.brand{position:absolute;left:50%;top:30px;transform:translateX(-50%);font:italic bold 11px/1 Arial,sans-serif;letter-spacing:.5px;color:#8f8f95;text-shadow:0 1px 0 #000}
.led{position:absolute;right:6px;top:16px;width:9px;height:9px;border-radius:50%;background:#3a1010;box-shadow:inset 0 0 2px #000}
.led.on{background:#ff2020;box-shadow:0 0 6px #ff3030,0 0 14px #ff1010;animation:ledblink 2.4s infinite}
@keyframes ledblink{0%,8%{opacity:1}12%,100%{opacity:.08}}
.dev-screen{position:relative;width:640px;height:480px;background:#000;border:2px solid #000;border-radius:3px;box-shadow:0 0 0 3px #0b0b0c,0 0 0 4px #333,inset 0 0 12px rgba(0,0,0,.9)}
.dev-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%);border-radius:2px}
.dev-nav{height:72px;display:flex;align-items:center;justify-content:center;gap:6px;padding-top:8px}
.nav-key{width:118px;height:52px;border:0;border-radius:6px;background:linear-gradient(#2c2c30,#151517);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 3px #000;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .05s}
.nav-key:active{transform:translateY(1px);background:linear-gradient(#1a1a1c,#0e0e0f)}
.nav-key svg{width:26px;height:26px;fill:#9a9aa0}
.nav-key.call svg{fill:#3fb84e}.nav-key.end svg{fill:#e03a2a}
.nav-key.back svg{fill:none;stroke:#9a9aa0}
.nav-key.call{border-radius:20px 6px 6px 20px}.nav-key.end{border-radius:6px 20px 20px 6px}
.bb7{position:relative;width:28px;height:22px;display:block}
.bb7 i{position:absolute;width:9px;height:5px;background:#ccc;border-radius:2px;transform:skewX(-18deg)}
.bb7 i:nth-child(1){left:2px;top:0}.bb7 i:nth-child(2){left:12px;top:0}
.bb7 i:nth-child(3){left:0;top:8px}.bb7 i:nth-child(4){left:10px;top:8px}.bb7 i:nth-child(5){left:20px;top:8px}
.bb7 i:nth-child(6){left:5px;top:16px}.bb7 i:nth-child(7){left:15px;top:16px}
.trackpad{width:44px;height:44px;border:0;border-radius:8px;background:radial-gradient(circle at 40% 35%,#3c3c44,#101012 70%);box-shadow:0 0 0 2px #0a0a0b,0 0 0 3px #4a4a50,inset 0 1px 1px rgba(255,255,255,.2);cursor:pointer;margin:0 6px}
.trackpad:active{background:radial-gradient(circle at 50% 50%,#5a6fa0,#1a1e2a 70%)}
.dev-kbd{display:grid;grid-template-rows:repeat(4,44px);gap:5px;padding:6px 8px 0}
.kbd-row{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.key{position:relative;border:0;border-radius:5px 5px 7px 7px;background:linear-gradient(#3a3a3e,#1b1b1e 60%,#111);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 #000,0 2px 2px #000;color:#eee;font:bold 17px/1 Arial,sans-serif;cursor:pointer;padding:0}
.key:active,.key.lit{background:linear-gradient(#5a5f6c,#2a2d38);color:#fff}
.key small{position:absolute;right:5px;top:4px;font:bold 9px/1 Arial;color:#bdbdc4}
.key.wide{grid-column:span 6}.key.dim{font-size:12px;color:#c8c8cc}
.key.sp{grid-column:span 2;font-size:12px}
.device.frameless{padding:0;background:none;box-shadow:none;border-radius:0;width:auto}
.device.frameless .dev-top,.device.frameless .dev-kbd{display:none}
.device.frameless .dev-nav{background:#111;border-radius:0 0 10px 10px;height:60px;padding:6px 0}
.device.frameless .dev-screen{border-radius:0}

/* ---------- screen ---------- */
.screen{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;color:#111;font-size:16px;line-height:1.25;user-select:text}
.statusbar{height:26px;background:#000;color:#fff;font-size:13px;display:flex;align-items:center;padding:0 8px;position:relative}
.sb-left,.sb-right{display:flex;align-items:center;gap:8px;flex:1}
.sb-right{justify-content:flex-end;font-weight:bold;font-size:11px}
.sb-mid{position:absolute;left:0;right:0;text-align:center;font-weight:bold;pointer-events:none}
.sb-left .splat b{font-size:11px}
.sb-bars svg,.sb-batt svg{height:12px;display:block}
.titlebar{height:38px;background:linear-gradient(#5a5a5e,#2f2f32 50%,#1a1a1c);color:#fff;font-weight:bold;font-size:17px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid #000;text-shadow:0 1px 0 #000;gap:8px;white-space:nowrap;overflow:hidden}
.titlebar .tb-sub{font-weight:normal;font-size:12px;color:#c7c7c7;margin-left:auto}
.content{position:absolute;top:64px;bottom:0;left:0;right:0;overflow-y:auto;overflow-x:hidden;background:#fff}
.content.has-bottom{bottom:46px}
.content.dark{background:#000;color:#fff}
.bottombar{position:absolute;bottom:0;left:0;right:0;height:46px;background:linear-gradient(#ececec,#cfcfd2);border-top:1px solid #8b8b8e;display:flex;align-items:center;gap:6px;padding:0 6px}
.bottombar input{flex:1;height:32px;border:1px solid #8a8a8a;border-radius:4px;padding:0 8px;font:inherit;font-size:15px;box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.bottombar input:focus{outline:2px solid #2f6fd8;outline-offset:-1px}

/* avatar */
.av{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:4px;background-size:cover;background-position:center;color:#fff;font-weight:bold;text-shadow:0 1px 1px rgba(0,0,0,.4);box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25);overflow:hidden;line-height:1}
.av-emoji{text-shadow:none}

/* me bar on main screen */
.me-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(#f7f7f7,#dedede);border-bottom:1px solid #999;cursor:pointer}
.me-bar:hover{background:linear-gradient(#fff,#e8e8e8)}
.me-bar .me-name{font-weight:bold;font-size:17px;display:flex;align-items:center;gap:6px}
.me-bar .me-msg{font-size:13px;color:#555;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-bar .me-pin{margin-left:auto;text-align:right;font-size:11px;color:#666;line-height:1.3}
.me-bar .me-pin b{font-family:Menlo,Consolas,monospace;font-size:12px;color:#222}

/* section headers & rows */
.sec{height:28px;background:linear-gradient(#6a6a6e,#3c3c40 60%,#2a2a2d);color:#fff;font-weight:bold;font-size:14px;padding:0 8px;display:flex;align-items:center;gap:6px;border-top:1px solid #8a8a8e;border-bottom:1px solid #111;cursor:pointer;text-shadow:0 1px 0 #000}
.sec .tri{display:inline-block;width:0;height:0;border:5px solid transparent;border-top:7px solid #fff;margin-top:6px}
.sec.collapsed .tri{border-top:5px solid transparent;border-left:7px solid #fff;margin:0 3px 0 0}
.sec .cnt{font-weight:normal;color:#ddd}
.sec-tip{margin-left:auto;font-weight:normal;font-size:11px;color:#bbb}
.row{display:flex;align-items:center;gap:10px;height:54px;padding:0 10px;border-bottom:1px solid #e1e1e1;cursor:pointer;position:relative}
.row.sm{height:40px}
.row.static{cursor:default}.row.static:hover{background:none}
.row.static .main .sub{white-space:normal;word-break:break-all;line-height:1.2}
.row:hover{background:#eef3fb}
.row.hl,.row.hl:hover{background:linear-gradient(#5b9cff,#2360d6);color:#fff}
.row.hl .sub,.row.hl .r-time,.row.hl .me-msg{color:#e6eeff}
.row .main{flex:1;min-width:0}
.row .name{font-weight:bold;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.row .sub{font-size:13px;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .sub.pm{font-style:italic}
.row .r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.row .r-time{font-size:12px;color:#666}
.row.unread .name{font-weight:900}
.row .badge{font-size:11px;color:#fff;background:#2f6fd8;border-radius:8px;padding:1px 6px}
.empty{padding:12px 14px;color:#777;font-size:14px;font-style:italic}
.upd-row .sub{font-style:normal}
.st-busy{display:inline-block;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff6b5e,#c8140a 70%);position:relative;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.st-busy::after{content:"";position:absolute;left:3px;right:3px;top:5.5px;height:2px;background:#fff;border-radius:1px}
.st-avail{display:inline-block;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#7ee88a,#1f9d32 70%);flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.st-away{display:inline-block;width:11px;height:11px;border-radius:50%;background:#bbb;flex:none}

/* splat */
.splat{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none}
.splat svg{position:absolute;inset:0;width:100%;height:100%}
.splat b{position:relative;color:#fff;font-size:11px;font-weight:bold;text-shadow:0 1px 0 rgba(0,0,0,.4)}

/* ---------- chat ---------- */
.chat-log{padding:4px 0 6px}
.chat-subject{background:#f1f1f1;border-bottom:1px solid #ddd;font-size:12px;color:#444;padding:4px 10px}
.day-sep{text-align:center;font-size:11px;color:#777;padding:6px 0 4px;position:relative}
.day-sep span{background:#fff;padding:0 8px;position:relative}
.day-sep::before{content:"";position:absolute;left:14px;right:14px;top:50%;border-top:1px solid #ddd}
.msg{display:flex;align-items:flex-start;gap:8px;padding:5px 10px}
.msg:hover{background:#f6f8fc}
.msg .msg-body{flex:1;min-width:0;word-wrap:break-word;font-size:15px;line-height:1.3;padding-top:3px}
.msg .msg-name{font-weight:bold}
.msg .msg-meta{flex:none;display:flex;align-items:center;gap:4px;padding-top:4px;min-width:82px;justify-content:flex-end}
.msg-time{font-size:11px;color:#777}
.ping-text{color:#e02020;font-weight:900;letter-spacing:.5px}
.msg-sys{text-align:center;font-size:12px;color:#777;padding:4px 10px;font-style:italic}
.msg .bcast{display:inline-block;font-size:10px;color:#fff;background:#888;border-radius:3px;padding:0 4px;margin-right:4px;vertical-align:middle}
.msg .att{display:inline-flex;align-items:center;gap:6px;border:1px solid #ccc;background:#f7f7f7;border-radius:6px;padding:4px 8px;font-size:13px;margin-top:2px}
.msg .att .ico{width:22px;height:22px;border-radius:3px;background:linear-gradient(#6aa0f5,#2a5fc7);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:bold}
.msg .att.voice .ico{background:linear-gradient(#f5a26a,#c7622a)}
.msg .att img{max-width:180px;max-height:140px;display:block;border-radius:3px}
.typing{padding:2px 10px 6px;font-size:12px;color:#555;font-style:italic}
.ms{display:inline-flex;align-items:center;gap:2px;height:14px}
.ms svg{width:13px;height:13px;display:block}
.ms b{display:inline-block;font:bold 9px/11px Arial,sans-serif;border:1px solid;border-radius:2px;padding:0 2px;min-width:12px;text-align:center}
.ms-p svg{stroke:#999;fill:none}
.ms-s svg,.ms-d svg,.ms-r svg{fill:#2d7ee8}
.ms-d b{color:#2d7ee8;border-color:#2d7ee8;background:#e9f2ff}
.ms-r b{color:#fff;border-color:#1c9a3a;background:#28b04a}
.emo-btn{width:32px;height:32px;border:1px solid #8a8a8a;border-radius:4px;background:linear-gradient(#fff,#ddd);font-size:18px;cursor:pointer;padding:0;line-height:1}
.emo-panel{position:absolute;left:0;right:0;bottom:46px;height:150px;background:#f3f3f3;border-top:1px solid #999;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:34px;gap:2px;padding:4px;overflow:auto;box-shadow:0 -3px 8px rgba(0,0,0,.2)}
.emo-panel button{border:1px solid transparent;background:none;font-size:20px;cursor:pointer;border-radius:4px;line-height:1}
.emo-panel button:hover{background:#dbe6fb;border-color:#9ab8f0}

/* ---------- buttons / forms ---------- */
.btn{background:linear-gradient(#fdfdfd,#cfcfd2);border:1px solid #6e6e72;border-radius:6px;padding:6px 14px;font:inherit;font-size:14px;color:#111;cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.2);white-space:nowrap}
.btn:hover{background:linear-gradient(#fff,#dcdcdf)}
.btn:active{background:linear-gradient(#c8c8cb,#e8e8ea)}
.btn.primary{background:linear-gradient(#5f9df7,#2160d3);color:#fff;border-color:#1a4aa8;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.btn.primary:hover{background:linear-gradient(#70a9ff,#2a6be0)}
.btn.small{padding:3px 10px;font-size:12px}
.btn.danger{background:linear-gradient(#f28b80,#c9281a);color:#fff;border-color:#8f1a10}
.btnrow{display:flex;gap:8px;padding:10px;justify-content:center;flex-wrap:wrap}
.form .field{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #e8e8e8;min-height:42px}
.form .field label{width:150px;font-weight:bold;font-size:14px;color:#333;flex:none}
.form .field .val{flex:1;min-width:0;font-size:15px;word-break:break-word}
.form .field .val.mono{font-family:Menlo,Consolas,monospace;letter-spacing:1px}
.form input[type=text],.form textarea,.form select{width:100%;border:1px solid #8a8a8a;border-radius:4px;padding:6px 8px;font:inherit;font-size:15px;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.form textarea{height:70px;resize:none}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid #2f6fd8;outline-offset:-1px}
.form .hint{font-size:12px;color:#777;padding:6px 12px}
.form h4{margin:0;padding:10px 12px 4px;font-size:13px;color:#555;text-transform:uppercase;letter-spacing:.5px}
.check{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #eee;cursor:pointer;font-size:15px}
.check:hover{background:#f4f7fc}
.check input{width:18px;height:18px;margin:0}
.check.done span.t{text-decoration:line-through;color:#888}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatch{width:26px;height:26px;border-radius:4px;border:2px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.swatch.sel{border-color:#111;box-shadow:0 0 0 2px #fff inset}
.profile-head{display:flex;gap:14px;align-items:center;padding:14px;background:linear-gradient(#f5f5f5,#e2e2e2);border-bottom:1px solid #aaa}
.profile-head .pname{font-size:21px;font-weight:bold}
.profile-head .pstat{font-size:14px;color:#444;display:flex;align-items:center;gap:6px;margin-top:3px}
.profile-head .pmsg{font-size:14px;color:#555;font-style:italic;margin-top:4px}
.group-head{display:flex;gap:12px;align-items:center;padding:12px 14px;background:linear-gradient(#f5f5f5,#e2e2e2);border-bottom:1px solid #aaa}
.gicon{width:44px;height:44px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:22px;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(0,0,0,.3)}
.grid-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px}
.grid-icons .tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:1px solid #ccc;border-radius:8px;background:linear-gradient(#fff,#e6e6e6);cursor:pointer;font-size:13px;font-weight:bold;position:relative}
.grid-icons .tile:hover{background:linear-gradient(#fff,#d6e2f7)}
.grid-icons .tile .tico{font-size:28px}
.grid-icons .tile .splat{position:absolute;right:6px;top:6px}
.toggle{margin-left:auto;width:46px;height:24px;border-radius:12px;background:#aaa;position:relative;flex:none;transition:background .15s}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4);transition:left .15s}
.toggle.on{background:#2f9e44}.toggle.on::after{left:24px}
.about{padding:20px;text-align:center}
.about p{margin:6px 0;font-size:13px;color:#444}
.barcode-wrap{display:flex;flex-direction:column;align-items:center;padding:12px;gap:8px}
.qr{display:grid;background:#fff;padding:8px;border:1px solid #ccc}
.qr i{display:block;background:#000}
.scanner{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#2a3a2a,#050805 70%);overflow:hidden}
.scanner .vf{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border:2px solid rgba(255,255,255,.7);box-shadow:0 0 0 4000px rgba(0,0,0,.45)}
.scanner .line{position:absolute;left:0;right:0;height:2px;background:#ff3c3c;box-shadow:0 0 8px #ff3c3c;animation:scan 1.6s ease-in-out infinite}
@keyframes scan{0%{top:0}50%{top:100%}100%{top:0}}
.scanner .txt{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#fff;font-size:13px}
.scanner .qr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(6deg) scale(.7);opacity:.9}

/* ---------- menu popup ---------- */
.menu-back{position:absolute;inset:0;z-index:20}
.menu{position:absolute;left:0;bottom:0;width:290px;max-height:452px;background:linear-gradient(#45454a,#1d1d20 20%,#111 100%);border:1px solid #6a6a70;border-bottom:0;border-radius:6px 6px 0 0;box-shadow:4px -2px 16px rgba(0,0,0,.6);overflow-y:auto;z-index:21}
.menu .mi{height:33px;line-height:33px;padding:0 16px;color:#fff;font-size:15px;border-bottom:1px solid #2c2c30;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.menu .mi .mico{width:18px;text-align:center;font-size:14px;color:#9fc0ff}
.menu .mi.hl,.menu .mi:hover{background:linear-gradient(#5f9df7,#2160d3)}
.menu .msep{height:1px;background:#555;margin:2px 0}
.menu .mhead{padding:6px 12px 4px;font-size:11px;color:#9a9aa0;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #333}

/* ---------- dialogs ---------- */
.dlg-back{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:30;display:flex;align-items:center;justify-content:center}
.dlg{width:440px;max-height:420px;background:linear-gradient(#f4f4f5,#d9d9dc);border:2px solid #4c4c50;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.6);overflow:hidden;display:flex;flex-direction:column}
.dlg .dtitle{background:linear-gradient(#5a5a5e,#2a2a2d);color:#fff;font-weight:bold;padding:7px 12px;font-size:15px;text-shadow:0 1px 0 #000}
.dlg .dbody{padding:12px 14px;font-size:15px;overflow:auto;color:#111}
.dlg .dbody p{margin:0 0 8px}
.dlg .dbody input[type=text],.dlg .dbody textarea,.dlg .dbody select{width:100%;border:1px solid #8a8a8a;border-radius:4px;padding:6px 8px;font:inherit;font-size:15px;margin-top:4px;background:#fff}
.dlg .dbody textarea{height:64px;resize:none}
.dlg .dbody .check{padding:6px 2px}
.dlg .dbtns{display:flex;gap:8px;justify-content:center;padding:10px;border-top:1px solid #b5b5b8;background:#e4e4e6}
.dlg .dbtns .btn{min-width:90px}

/* toast / preview */
.toast{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);background:rgba(20,20,22,.92);color:#fff;padding:8px 14px;border-radius:6px;font-size:13px;z-index:40;pointer-events:none;animation:fade 2.6s forwards;border:1px solid #666}
@keyframes fade{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
.preview{position:absolute;left:8px;right:8px;top:30px;background:linear-gradient(#3b3b40,#1a1a1d);color:#fff;border:1px solid #777;border-radius:8px;padding:8px 10px;display:flex;align-items:center;gap:10px;z-index:40;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.6);animation:slidein .2s}
@keyframes slidein{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}
.preview .pv-name{font-weight:bold;font-size:14px}
.preview .pv-text{font-size:13px;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview .pv-app{margin-left:auto;font-size:11px;color:#aaa}

/* splash / home */
.splash{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#2c2c30,#000 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:14px}
.splash h1{margin:0;font-size:22px;font-weight:bold;letter-spacing:.3px}
.splash .ld{font-size:12px;color:#aaa}
.home{position:absolute;inset:26px 0 0;background:linear-gradient(180deg,#0a1a33 0%,#12315e 45%,#0a1a2e 100%);color:#fff}
.home .hb{position:absolute;left:0;right:0;top:0;padding:10px 14px;display:flex;justify-content:space-between;align-items:flex-end}
.home .hb .clock{font-size:36px;font-weight:bold;line-height:1}
.home .hb .date{font-size:13px;color:#cfd8e6}
.home .hb .carrier{font-size:13px;color:#cfd8e6;text-align:right}
.home .dock{position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.6));border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:center;align-items:center;gap:22px}
.home .app{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;cursor:pointer;position:relative;width:72px}
.home .app .ic{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 2px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.home .app .splat{position:absolute;right:6px;top:-6px}
.home .notifs{position:absolute;left:14px;top:70px;display:flex;flex-direction:column;gap:8px}
.home .notif{display:flex;gap:8px;align-items:center;font-size:12px;color:#fff}
.home .notif.online{color:#cfe9d4}
.home .notif.online .st-avail{width:12px;height:12px;margin:0 5px;box-shadow:0 0 6px #4ee06a}
.hl-focus{outline:2px solid #2f6fd8;outline-offset:-2px}
.mono{font-family:Menlo,Consolas,monospace}
.muted{color:#777}
.center{text-align:center}
.pad{padding:12px}
.hidden{display:none!important}

/* twitter */
.tw-head{display:flex;gap:10px;align-items:center;padding:10px 12px;background:linear-gradient(#f7fbff,#e6f1fb);border-bottom:1px solid #9cc3e6}
.tw-av{width:32px;height:32px;border-radius:4px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.3);object-fit:cover}
.tw-av.big{width:48px;height:48px}
.tw-tick{display:inline-block;margin-left:4px;color:#fff;background:#1da1f2;border-radius:50%;width:15px;height:15px;font-size:10px;line-height:15px;text-align:center;vertical-align:middle}
.tw-row{display:flex;gap:10px;padding:8px 12px;border-bottom:1px solid #e1e1e1}
.tw-row .main{flex:1;min-width:0}
.tw-top{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-top .muted{font-size:12px}
.tw-text{font-size:14px;line-height:1.35;word-break:break-word;margin-top:2px}
.tw-media{position:relative;display:inline-block;margin-top:6px;margin-right:6px;border:1px solid #ccc;border-radius:6px;overflow:hidden}
.tw-media img{display:block;max-width:220px;max-height:140px}
.tw-media i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-style:normal;font-size:14px;display:flex;align-items:center;justify-content:center;padding-left:3px}
.tw-meta{display:flex;gap:16px;font-size:12px;color:#666;margin-top:5px}
.tw-embed-wrap{background:#fff}
.tw-embed{width:100%;height:100%;border:0;display:block}

/* camera video */
.cam-wrap{background:#000;overflow:hidden}
.cam-video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.cam-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);color:#fff;font-size:15px;padding:10px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.4);cursor:pointer;user-select:none}
/* chart app */
.chart-wrap{background:#0b0e11;display:flex;flex-direction:column;overflow:hidden}
.chart-bar{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;font-size:12px;color:#c9d1d9;background:#161b22;border-bottom:1px solid #30363d;flex:none}
.chart-frame{flex:1;width:100%;border:0;display:block;background:#0b0e11}
.bb7-icon{width:32px;height:26px;transform:scale(1.05)}
.bb7-icon i{background:#fff;width:11px;height:6px}
.bb7-icon i:nth-child(1){left:2px;top:0}.bb7-icon i:nth-child(2){left:14px;top:0}
.bb7-icon i:nth-child(3){left:-1px;top:10px}.bb7-icon i:nth-child(4){left:11px;top:10px}.bb7-icon i:nth-child(5){left:23px;top:10px}
.bb7-icon i:nth-child(6){left:5px;top:20px}.bb7-icon i:nth-child(7){left:17px;top:20px}
/* raid */
.raid-card{display:block;margin-top:6px;border:1px solid #cfd8e3;background:#f7f9fc;border-radius:6px;padding:6px 8px;text-decoration:none;color:#111;font-size:13px;max-width:420px}
.raid-card:hover{background:#eef3fb}
.raid-card-top{display:flex;align-items:center;gap:4px}
.raid-card-top svg{fill:#1da1f2}
.raid-card-text{display:block;margin-top:3px;color:#333;line-height:1.3}
.raid-card-open{display:block;margin-top:4px;color:#1a56c4;font-weight:bold;font-size:12px}
.raid-alert{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:35;display:flex;align-items:center;justify-content:center}
.raid-alert-box{width:360px;background:linear-gradient(#fff,#e9e9ec);border:2px solid #a80f0f;border-radius:10px;padding:16px 14px 6px;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.6);animation:raidpop .25s}
.raid-alert-box .splat{width:44px;height:44px;margin-bottom:4px}
.raid-alert-title{font-size:24px;font-weight:900;color:#c8140a;letter-spacing:1px}
.raid-alert-text{font-size:15px;margin-top:4px}
.raid-alert-sub{font-size:13px;color:#555;margin-top:4px}
@keyframes raidpop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}