:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;background:#f4f6f8;color:#17202a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#f4f6f8}
body{min-height:100vh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,input{font:inherit}
.app-shell{min-height:100vh}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:rgba(255,255,255,.94);border-bottom:1px solid #e6e9ed;backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo,.brand-mark{width:42px;height:42px;border-radius:12px}
.brand-logo{object-fit:contain;background:#fff}
.brand-mark{display:grid;place-items:center;background:#0d6efd;color:#fff;font-weight:800;font-size:13px}
.brand-name{font-size:15px;font-weight:750}
.brand-subtitle{margin-top:2px;color:#6c757d;font-size:11px}
.mode-badge{padding:6px 9px;border-radius:999px;background:#eef1f4;color:#66717d;font-size:11px;font-weight:700}
.mode-badge.installed{background:#e8f7ed;color:#16763a}
.content{width:min(100%,680px);margin:0 auto;padding:20px 14px 36px}
.card{margin-bottom:14px;padding:20px;border:1px solid #e3e7eb;border-radius:22px;background:#fff;box-shadow:0 6px 22px rgba(31,45,61,.06)}
h1{margin:0 0 9px;font-size:24px}
h2{margin:0;font-size:20px}
p{margin:0;color:#5d6874;line-height:1.55}
.steps{margin:16px 0 0;padding-left:22px}
.steps li{margin:10px 0}
.form-group{margin-top:17px}
.form-group label{display:block;margin-bottom:7px;font-size:13px;font-weight:750}
.form-group input{width:100%;min-height:48px;padding:11px 13px;border:1px solid #ccd3da;border-radius:13px;background:#fff;color:#17202a;outline:none}
.form-group input:focus{border-color:#0d6efd;box-shadow:0 0 0 3px rgba(13,110,253,.11)}
.primary-button,.secondary-button{width:100%;margin-top:14px;padding:13px 16px;border-radius:14px;font-weight:750}
.primary-button{border:0;background:#0d6efd;color:#fff}
.secondary-button{border:1px solid #8ebbf2;background:#fff;color:#0d6efd}
.primary-button:disabled,.secondary-button:disabled{opacity:.6}
.security-note,.protection-box,.message-box{margin-top:15px;padding:13px 14px;border-radius:14px;font-size:13px;line-height:1.45}
.security-note{background:#f1f7ff;color:#285b91}
.protection-box{background:#edf8f0;color:#236e3a}
.message-box.error{background:#fff0f0;color:#9a2929}
.account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.eyebrow{margin-bottom:5px;color:#73808d;font-size:11px;font-weight:800;letter-spacing:.08em}
.account-number{margin-top:2px;color:#65717d}
.active-pill{white-space:nowrap;padding:7px 9px;border-radius:999px;background:#e8f7ed;color:#16763a;font-size:11px;font-weight:800}
.status-panel{margin-top:18px;padding:16px;border:1px solid #d9e2ea;border-radius:18px;background:#f8fbfd}
.status-title{font-size:12px;letter-spacing:.08em;color:#71808d}
.status-main{display:flex;align-items:center;gap:10px;margin-top:7px}
.status-main strong{font-size:28px}
.status-dot{width:12px;height:12px;border-radius:50%;background:#2fc36b}
.status-copy{margin-top:5px;color:#65717d;font-size:13px}
.status-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
.status-meta div{padding:10px 12px;border-radius:12px;background:#fff}
.status-meta span,.detail-item span{display:block;color:#78838f;font-size:11px}
.status-meta strong,.detail-item strong{display:block;margin-top:4px;font-size:14px}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.detail-item{padding:14px;border-radius:15px;background:#f6f8fa}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.count-pill{min-width:34px;padding:7px 10px;border-radius:999px;background:#0d6efd;color:#fff;text-align:center;font-weight:800}
.muted-copy{margin-top:8px;font-size:13px}
.notification-list{margin-top:14px}
.notification-item{padding:14px 0;border-top:1px solid #edf0f2}
.notification-item:first-child{border-top:0}
.notification-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.notification-top strong{font-size:15px}
.dismiss-button{border:0;background:#eef3f7;color:#576471;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:700}
.notification-body{
    margin-top:7px;
    color:#394653;
    line-height:1.6;
    font-size:14px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}.notification-link{
    color:#1565c0;
    text-decoration:underline;
    font-weight:600;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.notification-image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin-top:10px;
    border-radius:12px;
    object-fit:contain;
}
.notification-meta{margin-top:8px;color:#88939e;font-size:11px}
.footer{padding:0 16px 28px;text-align:center;color:#8a949f;font-size:11px}

.push-status-text{
    margin-top:9px;
    text-align:center;
    color:#6c7884;
    font-size:12px;
    line-height:1.4;
}


.danger-button{
    width:100%;
    margin-top:14px;
    padding:13px 16px;
    border:1px solid #dc3545;
    border-radius:14px;
    background:#fff;
    color:#b4232f;
    font-weight:750;
}
.danger-button:disabled{opacity:.6}
.message-box.success{
    background:#edf8f0;
    color:#236e3a;
}

.recovery-box{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #edf0f2;
}
.recovery-title{
    margin-bottom:2px;
    color:#4e5b67;
    font-size:13px;
    font-weight:750;
}