.latest-card { background:linear-gradient(120deg,#2454eb,#2448cd); color:white; border-radius:var(--radius); padding:25px 28px 0; position:relative; overflow:hidden; min-height:258px; display:flex; flex-direction:column; box-shadow:0 8px 20px #234fe516; }
.latest-card > :not(.card-orbit) { position:relative; z-index:1; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:9px; font-weight:600; letter-spacing:1px; }
.card-top > span:first-child { display:flex; align-items:center; gap:9px; color:#cad7ff; }
.live-dot { width:6px; height:6px; background:#99c4ff; box-shadow:0 0 0 4px #ffffff0c; }
.outline-pill { color:#d2e2ff; padding:4px 9px; border:1px solid #ffffff30; background:#ffffff0b; font-size:9px; letter-spacing:0; border-radius:20px; }
.latest-content { display:flex; align-items:center; gap:19px; margin:30px 0 27px; flex:1; }
.call-symbol { display:grid; place-items:center; width:61px; height:61px; background:#ffffff12; border:1px solid #ffffff20; border-radius:18px; flex-shrink:0; }
.call-symbol svg { width:28px; height:28px; }
.latest-content > div { min-width:0; }
.latest-content p { color:#b7cafa; font-size:11px; margin:0 0 8px; }
.latest-content h2 { font-size:clamp(22px,2.65vw,38px); font-weight:650; letter-spacing:-1px; margin-bottom:9px; overflow-wrap:anywhere; }
.latest-content p:last-child { font-size:10px; color:#a9bff4; margin:0; }
.latest-action { display:flex; align-items:center; justify-content:space-between; width:100%; border-top:1px solid #ffffff26; background:none; color:#e4ecff; font-size:11px; padding:15px 0; }
.latest-action svg { width:16px; height:16px; }
.card-orbit { position:absolute; border:1px solid #ffffff09; width:350px; height:350px; border-radius:50%; right:-200px; top:10px; pointer-events:none; }
.orbit-two { width:440px; height:440px; top:-35px; right:-245px; }
.status-card { padding:25px; position:relative; }
.status-card > .soft-icon { position:absolute; right:23px; top:24px; width:34px; height:34px; border-radius:10px; }
.status-card > .soft-icon svg { width:19px; height:19px; }
.status-card .eyebrow { font-size:9px; margin-top:5px; }
.status-phone { display:block; font-size:18px; margin:17px 0 12px; letter-spacing:-.3px; overflow-wrap:anywhere; }
.status-line { display:flex; align-items:center; gap:7px; font-size:10px; color:#7c869a; }
.status-card p { font-size:11px; line-height:1.8; max-width:230px; margin:14px 0 17px; }
.status-card .text-link { font-size:10px; }
.stat-card { display:flex; align-items:center; gap:15px; padding:21px; border:1px solid var(--line); border-radius:13px; background:white; min-width:0; }
.stat-card > div { min-width:0; }
.stat-card > div > span { color:#8a94a9; font-size:10px; display:block; }
.stat-card strong { font-size:26px; line-height:1.3; letter-spacing:-.7px; display:block; margin-top:3px; }
.stat-card .stat-text { font-size:15px; font-weight:550; letter-spacing:-.3px; margin-top:8px; }
.stat-card .online-dot { margin-left:auto; width:5px; height:5px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; padding:25px 27px 22px; gap:15px; }
.section-heading h2 { font-size:16px; }
.section-heading p { font-size:10px; margin:0; }
.section-heading .text-link { font-size:10px; white-space:nowrap; }
.call-row { width:100%; display:flex; align-items:center; gap:14px; padding:17px 26px; border-top:1px solid #f0f2f7; background:white; text-align:left; color:var(--ink); }
.call-row:hover { background:#fafbff; }
.call-row:last-child { border-radius:0 0 var(--radius) var(--radius); }
.call-row .soft-icon { width:37px; height:37px; border-radius:11px; background:#f1f4fb; color:#6b83b1; }
.call-row .soft-icon svg { width:18px; height:18px; }
.call-info { flex:1; min-width:0; }
.call-info strong { display:block; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.call-info small { display:block; font-size:10px; color:#98a1b5; margin-top:4px; }
.call-time { color:#939eb1; font-size:10px; white-space:nowrap; text-align:right; }
.call-row > svg { width:15px; height:15px; color:#adb7ca; margin-left:10px; }
.new-badge { display:inline-block; border-radius:5px; padding:3px 7px; color:var(--blue); background:#edf2ff; font-size:9px; }
.empty-state { padding:37px 20px 42px; text-align:center; }
.empty-state .soft-icon { background:#f3f5fa; color:#9aaac7; margin-bottom:15px; width:49px; height:49px; border-radius:16px; }
.empty-state h3 { font-size:14px; font-weight:550; }
.empty-state p { font-size:11px; margin-bottom:15px; }
.tip-card { display:flex; gap:16px; padding:17px 3px; }
.tip-card .soft-icon { width:38px; height:38px; border-radius:11px; }
.tip-card h3 { font-size:12px; font-weight:600; }
.tip-card p { font-size:11px; line-height:1.8; max-width:270px; margin-bottom:5px; }
.tip-card .text-button { font-size:10px; }
.history-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 25px; }
.search-box { display:flex; align-items:center; gap:12px; border:1px solid var(--line); padding:0 12px; border-radius:9px; width:380px; margin:0; color:#9ca7bb; }
.search-box input { border:0; font-size:12px; padding:11px 0; background:transparent; }
.search-box input:focus { outline:none; }
.search-box:focus-within { outline:2px solid #9bb5ff; }
.search-box svg { width:17px; height:17px; }
.history-toolbar > span { font-size:11px; }
.load-more { text-align:center; padding:20px; }
.load-more:has(button[hidden]) { display:none; }
.setup-card { padding:32px; }
.step { display:flex; gap:18px; margin-bottom:36px; }
.step:last-child { margin-bottom:0; }
.step-number { display:grid; place-items:center; width:28px; height:28px; background:#edf2ff; color:var(--blue); border-radius:50%; font-size:12px; font-weight:700; flex-shrink:0; }
.step > div { min-width:0; }
.step h2 { font-size:16px; margin:3px 0 10px; }
.step p { font-size:12px; line-height:1.8; }
.mmi-code { display:flex; align-items:center; gap:10px; background:#f4f6fc; padding:12px 15px; border:1px dashed #d4dff5; border-radius:11px; margin:19px 0; }
.mmi-code code { font-size:20px; color:var(--blue); }
.mmi-code button { margin-left:auto; }
.check-label { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:500; }
.check-label input { width:18px; height:18px; accent-color:var(--blue); flex-shrink:0; }
dialog { border:1px solid var(--line); border-radius:20px; padding:28px; max-width:460px; width:calc(100% - 32px); color:var(--ink); box-shadow:0 20px 70px #14214d30; max-height:90dvh; overflow:auto; }
dialog::backdrop { background:#121b3b65; backdrop-filter:blur(3px); }
.dialog-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.dialog-header .eyebrow { margin:0; }
dialog h2 { margin-top:20px; font-size:25px; overflow-wrap:anywhere; }
dialog p { font-size:12px; line-height:1.8; }
.detail-number { font-size:19px; color:var(--blue); margin-bottom:25px; }
.dialog-actions { display:flex; gap:10px; justify-content:space-between; margin-top:20px; flex-wrap:wrap; }