:root {
    color-scheme: light;
    --navy: #101c35;
    --navy-soft: #182844;
    --ink: #101936;
    --muted: #66779c;
    --blue: #1769ff;
    --blue-2: #3159d9;
    --green: #0fb56d;
    --purple: #7548ee;
    --red: #ef4f57;
    --line: #dfe7f3;
    --surface: #fff;
    --background: #f4f7fb;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }

.portal-body { min-height: 100vh; background: radial-gradient(circle at 65% 5%, #fff 0, #f7f9fd 34%, var(--background) 70%); }
.sidebar { position: fixed; inset: 58px auto 0 0; z-index: 14; width: 238px; padding: 20px 15px; overflow-y: auto; color: #dbe6fb; background: radial-gradient(circle at 20% 20%, #1b2d4e 0, var(--navy) 52%, #0c172d 100%); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; padding: 0 8px 25px; color: #fff; }
.brand-logo { display: block; width: 190px; max-width: 100%; height: auto; }
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.side-nav a { display: flex; align-items: center; min-height: 45px; gap: 14px; padding: 10px 14px; border-radius: 8px; color: #c9d7ef; font-size: 14px; }
.side-nav a:hover { color: #fff; background: #ffffff0d; }
.side-nav a.active { color: #fff; background: linear-gradient(100deg, #1769ff, #3153bc); box-shadow: 0 8px 18px #07112f4d; }
.nav-icon { width: 27px; color: #b9d0ff; text-align: center; font-size: 20px; line-height: 1; }
.nav-icon svg { display: block; width: 19px; height: 19px; margin: auto; fill: currentColor; }
.side-nav a.active .nav-icon { color: #fff; }
.side-nav-group { margin-top: 3px; padding-top: 8px; border-top: 1px solid #ffffff12; }
.side-nav-group summary { min-height: 42px; padding: 9px 14px; border-radius: 8px; color: #aebdd9; display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: .4px; list-style: none; text-transform: uppercase; }
.side-nav-group summary::-webkit-details-marker { display: none; }
.side-nav-group summary:hover { color: #fff; background: #ffffff0d; }
.side-nav-group summary .nav-icon { font-size: 17px; }
.nav-chevron { margin-left: auto; font-size: 19px; transition: transform .2s ease; }
.side-nav-group[open] .nav-chevron { transform: rotate(90deg); }
.side-subnav { display: grid; gap: 3px; padding: 2px 0 4px 14px; }
.side-subnav a { min-height: 36px; padding: 7px 11px; font-size: 13px; }
.side-subnav .nav-icon { width: 21px; font-size: 15px; }
.sidebar-apps-link { display: flex; justify-content: center; margin-top: auto; padding: 10px; border: 1px solid #ffffff1f; border-radius: 6px; color: #dbe6fb; font-size: 12px; font-weight: 700; }
.selected-app-name { margin-bottom: 17px; padding: 4px 10px 17px; border-bottom: 1px solid #ffffff17; }
.selected-app-name small, .selected-app-name strong { display: block; }
.selected-app-name small { margin-bottom: 6px; color: #8fa4c8; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.selected-app-name strong { color: #fff; font-size: 17px; overflow-wrap: anywhere; }
.portal-shell { min-height: 100vh; }
.portal-shell.with-app-sidebar .portal-main { width: calc(100% - 238px); max-width: none; margin-right: 0; margin-left: 238px; }
.topbar { position: sticky; top: 0; z-index: 20; height: 58px; padding: 0 22px; border-bottom: 1px solid #ffffff14; color: #fff; background: radial-gradient(circle at 20% 20%, #1b2d4e 0, var(--navy) 52%, #0c172d 100%); display: flex; align-items: center; gap: 16px; }
.topbar-brand { display: flex; width: 154px; flex: 0 0 auto; align-items: center; }.topbar-brand img { display: block; width: 100%; height: auto; }
.global-nav { min-width: 0; height: 100%; display: flex; align-items: center; gap: 4px; }
.global-nav > a { min-height: 36px; padding: 0 11px; border-radius: 7px; color: #c9d7ef; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; }
.global-nav > a:hover, .global-nav > a.active { color: #fff; background: #ffffff14; }
.menu-button { display: none; padding: 6px 10px; border: 0; background: transparent; color: #fff; font-size: 21px; }
.global-search { width: min(365px, 30vw); margin-left: auto; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid #ffffff24; border-radius: 8px; background: #ffffff0d; color: #b9c9e5; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #fff; font-size: 13px; }
.global-search input::placeholder { color: #98abc9; }
.global-search-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.global-search-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.topbar-divider { width: 1px; height: 26px; background: #ffffff20; }
.account-menu { position: relative; }
.account-menu summary { min-height: 46px; margin: 0 -7px 0 0; padding: 5px 7px; border: 1px solid transparent; border-radius: 11px; outline: none; list-style: none; display: flex; align-items: center; gap: 10px; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover { background: #ffffff0d; }
.account-menu summary:focus-visible { border-color: #8db6ff; box-shadow: 0 0 0 3px #1769ff4d; }
.account-menu[open] summary { border-color: #ffffff1f; background: #ffffff12; box-shadow: inset 0 1px 0 #ffffff0d; }
.account-menu summary > span:nth-child(2) { min-width: 105px; }
.account-menu summary strong, .account-menu summary small { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu summary strong { color: #fff; font-size: 13px; }
.account-menu summary small { color: #9fb0cc; font-size: 11px; }
.avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid #ffffff1f; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #4969d8, #2c419d); box-shadow: 0 3px 9px #0711264d, inset 0 1px 0 #ffffff24; font-size: 12px; font-weight: 750; }
.account-menu-chevron { width: 24px; height: 24px; margin-left: 2px; border-radius: 7px; color: #b8c8e4; background: #ffffff0a; display: grid; place-items: center; transition: color .16s ease, background .16s ease, transform .2s ease; }
.account-menu-chevron svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-menu summary:hover .account-menu-chevron, .account-menu[open] .account-menu-chevron { color: #fff; background: #ffffff14; }
.account-menu[open] .account-menu-chevron { transform: rotate(180deg); }
.account-menu[open] > .account-menu-panel { position: absolute; top: 54px; right: -7px; width: 260px; padding: 8px; border: 1px solid #dce5f2; border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 22px 55px #0b17393d, 0 4px 14px #0b173914; animation: account-menu-in .16s ease-out; }
.account-menu-panel::before { position: absolute; top: -6px; right: 20px; width: 11px; height: 11px; border-top: 1px solid #dce5f2; border-left: 1px solid #dce5f2; background: #fff; content: ""; transform: rotate(45deg); }
.account-menu-heading { position: relative; margin: 0 0 7px; padding: 9px 10px 13px; border-bottom: 1px solid #e7edf6; display: flex; align-items: center; gap: 11px; }
.account-menu-heading .avatar { width: 38px; height: 38px; box-shadow: 0 4px 12px #253a7929; }
.account-menu-heading > span:last-child { min-width: 0; }
.account-menu-heading strong, .account-menu-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-heading strong { color: var(--ink); font-size: 13px; }
.account-menu-heading small { margin-top: 2px; color: #7282a2; font-size: 11px; }
.account-menu div a, .account-menu .link-button { display: flex; width: 100%; min-height: 39px; align-items: center; gap: 11px; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: #34466a; font-size: 13px; font-weight: 550; transition: color .14s ease, background .14s ease, transform .14s ease; }
.account-menu div a > .account-menu-icon, .account-menu .link-button > .account-menu-icon { width: 20px; height: 20px; flex: 0 0 auto; color: #64789d; }
.account-menu-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-menu div a:hover, .account-menu .link-button:hover { color: #173f91; background: #f1f5fc; transform: translateX(2px); }
.account-menu div a:hover > .account-menu-icon, .account-menu .link-button:hover > .account-menu-icon { color: #1769ff; }
.account-menu-divider { height: 1px; margin: 6px 4px; background: var(--line); }
@keyframes account-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.portal-main { max-width: 1600px; margin: 0 auto; padding: 18px 22px 28px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 4px 15px; }
.page-heading h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.05; letter-spacing: -1.1px; }
.page-heading p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.date-filter { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #26385c; font-size: 13px; box-shadow: 0 2px 5px #1b315b08; }
.date-filter select { width: auto; margin: 0 0 0 7px; padding: 0 20px 0 0; border: 0; background: transparent; color: inherit; font: inherit; }
.filter-row { display: flex; gap: 10px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 7px; font-weight: 650; font-size: 13px; }
.primary-button { border: 1px solid #1769ff; color: #fff; background: linear-gradient(#2877ff, #1262f3); box-shadow: 0 5px 12px #1769ff28; }
.primary-button:disabled { cursor: not-allowed; opacity: .65; box-shadow: none; }
.secondary-button { border: 1px solid #cbd9ed; color: #175dd5; background: #fff; }
.danger-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid #efc9ce; border-radius: 7px; color: #bd3542; background: #fff; font-weight: 650; font-size: 13px; }
.metric-grid { display: grid; gap: 13px; margin-bottom: 14px; }
.metric-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.analytics-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.metric-card, .panel { border: 1px solid #e0e7f2; border-radius: 10px; background: #fff; box-shadow: 0 5px 16px #19325c0a; }
.metric-card { min-height: 132px; padding: 16px 17px; display: flex; align-items: flex-start; gap: 18px; }
.metric-icon { display: grid; width: 64px; height: 64px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 27px; font-weight: 500; }
.metric-icon.blue, .mini-icon.blue { color: var(--blue); background: #eaf2ff; }
.metric-icon.purple, .mini-icon.purple { color: var(--purple); background: #f1ebff; }
.metric-icon.green, .mini-icon.green { color: var(--green); background: #e5f8f0; }
.metric-icon.red, .mini-icon.red { color: var(--red); background: #ffebed; }
.metric-icon.icon-only { width: 48px; height: 48px; border-radius: 0; background: transparent; }
.metric-icon svg { width: 1em; height: 1em; fill: currentColor; }
.metric-icon.outline svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.metric-card small { display: block; margin: 2px 0 3px; color: #53658c; font-size: 13px; }
.metric-card strong { display: block; color: var(--ink); font-size: clamp(23px, 2vw, 30px); line-height: 1.15; letter-spacing: -.5px; }
.metric-card p { margin: 8px 0 0; color: #65779d; font-size: 11px; }
.dashboard-panels { display: grid; grid-template-columns: 2fr 1.05fr 1.05fr; gap: 13px; margin-bottom: 14px; }
.dashboard-welcome { margin: 2px 1px 23px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dashboard-welcome h1 { margin: 0; color: #111a38; font-size: clamp(27px, 3vw, 37px); line-height: 1.05; letter-spacing: -1.25px; }
.dashboard-welcome h1 span { display: inline-block; font-size: .72em; transform: rotate(-8deg); }
.dashboard-welcome p { margin: 7px 0 0; color: #71809d; font-size: 13px; }
.dashboard-welcome > time { padding-top: 5px; color: #7c89a5; font-size: 11px; white-space: nowrap; }
.dashboard-top-grid, .dashboard-detail-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, .85fr) minmax(280px, .92fr); gap: 13px; margin-bottom: 13px; }
.dashboard-top-grid > .panel, .dashboard-detail-grid > .panel { border-color: #e2e8f2; border-radius: 9px; box-shadow: 0 5px 18px #263a6208; }
.dashboard-panel-heading { min-height: 38px; margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dashboard-panel-heading h2 { margin: 0; color: #17203e; font-size: 15px; letter-spacing: -.25px; }
.dashboard-panel-heading p { margin: 3px 0 0; color: #7483a0; font-size: 10px; line-height: 1.4; }
.dashboard-panel-heading > a { color: #4667ed; font-size: 10px; font-weight: 700; white-space: nowrap; }
.dashboard-panel-heading > span { min-height: 34px; padding: 8px 11px; border: 1px solid #e0e6f0; border-radius: 7px; color: #4d5d7d; background: #fff; font-size: 10px; white-space: nowrap; }
.dashboard-panel-heading > span small { margin-right: 12px; color: #7886a1; font-size: 9px; }
.dashboard-usage-panel { padding: 19px 20px; }
.usage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.usage-row { min-height: 100px; padding: 14px; border: 1px solid #e3e9f2; border-radius: 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.dashboard-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #5367f5; background: #eef1ff; font-size: 19px; font-style: normal; font-weight: 600; }
.dashboard-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.usage-row-content { min-width: 0; }
.usage-row-content > strong, .usage-row-content > span { display: block; }
.usage-row-content > strong { margin: 1px 0 6px; color: #253354; font-size: 11px; }
.usage-row-content > span { color: #6d7c99; font-size: 10px; }
.usage-row-content > span b { color: #273655; font-size: 12px; }
.usage-row > small { align-self: end; padding-bottom: 1px; color: #71809d; font-size: 9px; }
.usage-progress { height: 6px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: #e8edf6; }
.usage-progress i { display: block; width: var(--usage); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4c5ff5, #6b7dff); }
.usage-progress.unlimited i { width: 100%; opacity: .2; }
.dashboard-plan-panel, .dashboard-actions-panel { min-height: 320px; padding: 19px; }
.dashboard-plan-panel { display: flex; flex-direction: column; }
.dashboard-plan-panel.needs-attention { border-color: #efc6cb; background: linear-gradient(150deg, #fff 65%, #fff2f3); }
.dashboard-plan-title { margin: 0 0 8px; display: flex; align-items: center; gap: 11px; }
.dashboard-plan-title > span { display: grid; width: 49px; height: 49px; flex: 0 0 auto; place-items: center; }
.dashboard-plan-title > span img { display: block; width: 48px; height: 48px; object-fit: contain; }
.dashboard-plan-title h3 { margin: 0 0 4px; color: #17203e; font-size: 18px; }
.dashboard-plan-title small { padding: 3px 7px; border-radius: 99px; color: #14925e; background: #e4f8ee; font-size: 9px; font-weight: 750; }
.dashboard-plan-title small.is-warning { color: #bd3d48; background: #ffeaec; }
.dashboard-plan-panel > p { margin: 0 0 11px; color: #6d7c99; font-size: 10px; line-height: 1.45; }
.dashboard-plan-panel ul { margin: 0 0 13px; padding: 0; list-style: none; }
.dashboard-plan-panel li { position: relative; padding: 3px 0 3px 22px; color: #596987; font-size: 10px; }
.dashboard-plan-panel li::before { position: absolute; left: 1px; top: 2px; width: 14px; height: 14px; border: 1px solid #9ab2ff; border-radius: 50%; color: #4b65ee; content: "✓"; display: grid; place-items: center; font-size: 8px; font-weight: 800; }
.dashboard-plan-panel > .primary-button { min-height: 36px; margin-top: auto; font-size: 10px; }
.dashboard-actions-panel nav { display: grid; gap: 8px; }
.dashboard-actions-panel nav > a { min-height: 55px; padding: 8px 10px; border: 1px solid #e2e8f1; border-radius: 7px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 12px; align-items: center; gap: 10px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.dashboard-actions-panel nav > a:hover { border-color: #bdcafa; box-shadow: 0 5px 14px #435bd614; transform: translateY(-1px); }
.dashboard-actions-panel nav strong, .dashboard-actions-panel nav small { display: block; }
.dashboard-actions-panel nav strong { color: #263554; font-size: 10px; }
.dashboard-actions-panel nav small { margin-top: 3px; color: #7e8ba5; font-size: 9px; }
.dashboard-actions-panel nav b { color: #6677a0; font-size: 17px; font-weight: 400; text-align: right; }
.dashboard-detail-grid { align-items: stretch; }
.dashboard-activity-panel, .dashboard-recent-apps, .dashboard-blog-panel { min-height: 355px; padding: 18px 19px; }
.dashboard-chart-legend { margin: -3px 0 5px; display: flex; justify-content: flex-end; gap: 17px; color: #76849e; font-size: 9px; }
.dashboard-chart-legend span { display: flex; align-items: center; gap: 6px; }
.dashboard-chart-legend i { width: 7px; height: 7px; border-radius: 50%; background: #5268f6; }
.dashboard-chart-legend span:last-child i { background: #aebafd; }
.dashboard-chart { min-height: 155px; }
.dashboard-chart svg { display: block; width: 100%; height: 135px; overflow: visible; }
.dashboard-chart-grid line { stroke: #e7ecf4; stroke-width: .5; vector-effect: non-scaling-stroke; }
.dashboard-chart-fill { fill: url(#dashboard-chart-fill); }
.dashboard-chart-notifications, .dashboard-chart-devices { fill: none; stroke: #5268f6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dashboard-chart-devices { stroke: #aebafd; stroke-width: 1.5; }
.dashboard-chart > div { display: flex; justify-content: space-between; color: #8a96ad; font-size: 8px; }
.dashboard-activity-stats { margin: 14px -19px -18px; border-top: 1px solid #e6ebf3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-activity-stats > div { min-width: 0; padding: 12px 13px; display: flex; gap: 9px; }
.dashboard-activity-stats > div + div { border-left: 1px solid #e6ebf3; }
.dashboard-activity-stats .dashboard-icon { width: 31px; height: 31px; }
.dashboard-activity-stats .dashboard-icon svg { width: 17px; height: 17px; }
.dashboard-activity-stats strong, .dashboard-activity-stats small, .dashboard-activity-stats em { display: block; }
.dashboard-activity-stats strong { margin-bottom: 3px; color: #263453; font-size: 12px; }
.dashboard-activity-stats small { overflow: hidden; color: #74829d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-activity-stats em { width: max-content; margin-top: 7px; padding: 3px 6px; border-radius: 99px; color: #168b59; background: #e7f8ef; font-size: 8px; font-style: normal; }
.dashboard-activity-stats em.down { color: #bd3e4a; background: #ffeaec; }.dashboard-activity-stats em.flat { color: #66758f; background: #f0f3f8; }
.dashboard-recent-list { display: grid; gap: 7px; }
.dashboard-recent-list > a { min-height: 58px; padding: 9px 10px; border: 1px solid #e4e9f2; border-radius: 7px; display: grid; grid-template-columns: minmax(0, 1fr) 10px; align-items: center; gap: 10px; transition: background .15s ease, border-color .15s ease; }
.dashboard-recent-list > a:hover { border-color: #c7d2fa; background: #fafbff; }
.dashboard-recent-apps a strong, .dashboard-recent-apps a small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-recent-apps a strong { margin-bottom: 3px; color: #243250; font-size: 10px; }
.dashboard-recent-apps a small { color: #7a88a2; font-size: 8px; line-height: 1.4; }
.dashboard-recent-apps a b { color: #6273a0; font-size: 16px; font-weight: 400; }
.dashboard-blog-panel { display: flex; flex-direction: column; }
.dashboard-blog-feature { position: relative; min-height: 143px; padding: 18px 52px 17px 16px; overflow: hidden; isolation: isolate; border-radius: 8px; color: #fff; background: radial-gradient(circle at 86% 22%, #5468f5 0 14%, transparent 15%), radial-gradient(circle at 76% 65%, #3549be 0 22%, transparent 23%), linear-gradient(135deg, #101b55, #202b78 55%, #17204f); display: flex; flex-direction: column; justify-content: flex-end; }
.dashboard-blog-feature::before { position: absolute; top: -38px; right: -30px; width: 130px; height: 130px; border: 1px solid #ffffff17; border-radius: 24px; content: ""; transform: rotate(28deg); }
.dashboard-blog-feature.has-image::before { display: none; }
.dashboard-blog-feature > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.dashboard-blog-feature span { position: relative; z-index: 1; margin-bottom: 8px; color: #c7d0ff; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-blog-feature strong { position: relative; z-index: 1; font-size: 14px; line-height: 1.25; }
.dashboard-blog-feature.has-image span, .dashboard-blog-feature.has-image strong { color: #fff; filter: grayscale(1) contrast(100); mix-blend-mode: difference; }
.dashboard-blog-feature i { position: absolute; right: 13px; bottom: 13px; z-index: 1; width: 27px; height: 27px; border-radius: 50%; color: #4058e8; background: #fff; display: grid; place-items: center; font-style: normal; }
.dashboard-blog-panel > p { display: -webkit-box; margin: 13px 0; overflow: hidden; color: #697895; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 10px; line-height: 1.5; }
.dashboard-blog-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid #e6ebf3; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dashboard-blog-meta time { color: #7d8aa3; font-size: 9px; }.dashboard-blog-meta a { color: #4866e8; font-size: 9px; font-weight: 750; }
.panel { min-width: 0; padding: 16px 18px; }
.panel-heading { min-height: 37px; margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel h2 { margin: 0; font-size: 16px; letter-spacing: -.25px; }
.panel-heading p, .panel > p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.panel-heading > span, .panel-heading > a { color: #1769ec; font-size: 11px; }
.line-chart { position: relative; height: 205px; padding-top: 3px; }
.line-chart svg { width: 100%; height: 180px; overflow: visible; }
.grid-lines line { stroke: #e6edf7; stroke-width: 1; }
.sent-line, .opened-line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.opened-line { stroke: var(--green); stroke-width: 2.5; }
.chart-fill { fill: url(#sent-fill); }
.chart-labels { position: absolute; inset: auto 4px 0 18px; display: flex; justify-content: space-between; color: #7485a7; font-size: 10px; }
.platform-chart { min-height: 206px; display: grid; grid-template-columns: minmax(125px, 1fr) 1fr; align-items: center; gap: 14px; }
.donut { width: min(150px, 100%); aspect-ratio: 1; margin: auto; border-radius: 50%; background: conic-gradient(#3979ee 0 var(--ios), #16b873 var(--ios) var(--android), #8668ea var(--android) 100%); display: grid; place-items: center; }
.donut::before { content: ""; grid-area: 1/1; width: 67%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.donut span { z-index: 1; grid-area: 1/1; text-align: center; }
.donut strong, .donut small { display: block; }
.donut strong { font-size: 17px; }
.donut small { margin-top: 2px; color: #66789e; font-size: 10px; }
.platform-chart ul { margin: 0; padding: 0; list-style: none; }
.platform-chart li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #edf1f7; font-size: 12px; }
.platform-chart li:last-child { border: 0; }
.platform-chart li i { width: 9px; height: 9px; border-radius: 50%; }
.platform-ios { background: #3979ee; }.platform-android { background: #16b873; }.platform-web { background: #8668ea; }
.platform-chart li span { flex: 1; }
.platform-chart li small { display: block; margin-top: 2px; color: #7183a6; }
.health-panel .healthy { padding: 4px 8px; border-radius: 99px; color: #079557; background: #e9f8f1; }
.health-list > div { min-height: 48px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #edf1f7; font-size: 12px; }
.health-list > div:last-child { border: 0; }
.mini-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 7px; font-size: 18px; }
.health-list div > span:nth-child(2) { min-width: 0; flex: 1; }
.health-list small { display: block; color: #7183a6; font-size: 10px; }
.health-list strong { font-size: 12px; text-align: right; }
.green-text { color: var(--green); }
.bottom-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 13px; }
.table-panel { padding-bottom: 7px; }
.responsive-table { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 8px 8px; color: #53658b; background: #f6f8fc; text-align: left; font-size: 10px; font-weight: 650; white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid #e8edf5; color: #273a60; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td > strong, td > small { display: block; }
td > small { color: #7889a9; }
.status { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 99px; color: #0b9659; background: #e1f8ee; white-space: nowrap; font-size: 10px; }
.status-draft, .status-warning { color: #b17600; background: #fff2ce; }
.status-failed, .status-invalid_token, .status-expired, .status-capped, .status-cancelled, .status-archived { color: #c43643; background: #ffe4e7; }
.status-processing, .status-pending, .status-retry, .status-queued { color: #1763dd; background: #e8f0ff; }
.app-name { display: flex; align-items: center; min-width: 150px; }
.app-name strong { display: block; }
.apps-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr); gap: 14px; }
.apps-selector-panel { width: 100%; }
.apps-selector-table td { height: 58px; }.apps-selector-table td:not(:first-child) { white-space: nowrap; }
.configured-platforms { display: flex; align-items: center; gap: 6px; }
.platform-symbol { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: #fff; font-size: 12px; }.platform-symbol svg { width: 19px; height: 19px; fill: currentColor; }.platform-symbol .platform-icon-cutout { fill: #268bea; }
.platform-symbol.apns { background: #17191f; }.platform-symbol.fcm { background: #77c159; }.platform-symbol.webpush { background: conic-gradient(from 30deg, #f44336 0 33%, #ffc107 0 66%, #4caf50 0); }
.continue-setup, .select-app-link { color: var(--blue); font-size: 11px; font-weight: 700; white-space: nowrap; }
.app-list-panel { padding-top: 12px; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.list-toolbar > strong { padding: 9px 18px; border-radius: 7px; color: #fff; background: var(--blue); font-size: 13px; }
.list-toolbar label { display: flex; align-items: center; gap: 7px; width: min(300px, 45%); padding: 7px 10px; border: 1px solid #dbe4f2; border-radius: 7px; color: #587099; }
.list-toolbar input { min-width: 0; width: 100%; border: 0; outline: 0; }
.more-button { display: inline-flex; padding: 6px 9px; border: 1px solid #dbe4f2; border-radius: 6px; letter-spacing: 1px; }
.setup-panel { padding: 20px; }
.setup-panel > p { margin-bottom: 18px; line-height: 1.5; }
.setup-ring { width: 115px; aspect-ratio: 1; margin: 10px auto 18px; border-radius: 50%; background: conic-gradient(var(--green) 0 var(--progress), #e9eef5 var(--progress) 100%); display: grid; place-items: center; }
.setup-ring::before { content: ""; grid-area: 1/1; width: 72%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.setup-ring strong { z-index: 1; grid-area: 1/1; font-size: 20px; }
.setup-panel ul { margin: 0 0 17px; padding: 0; list-style: none; }
.setup-panel li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 2px; border-top: 1px solid #e8edf4; font-size: 12px; }
.setup-panel li strong { color: #0c9b5b; font-weight: 600; }
.setup-panel .secondary-button { width: 100%; }
.empty-state { padding: 35px 20px; text-align: center; color: #66799b; }
.empty-state strong { color: var(--ink); font-size: 16px; }
.empty-state p { margin: 6px 0 16px; }
.empty-state.compact { padding: 24px 12px; }
.portal-dialog { width: min(480px, calc(100vw - 32px)); padding: 27px; border: 1px solid #dae4f2; border-radius: 12px; color: var(--ink); box-shadow: 0 30px 100px #0b17395c; }
.portal-dialog::backdrop { background: #0a173a99; backdrop-filter: blur(3px); }
.portal-dialog h2 { margin: 0; }.portal-dialog p { margin: 5px 0 20px; color: var(--muted); }
.portal-dialog label, .compose-panel label { display: block; margin: 14px 0 5px; color: #152141; font-size: 13px; font-weight: 650; }
.portal-dialog input, .portal-dialog select, .compose-panel input, .compose-panel select, .compose-panel textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #cfdaeb; border-radius: 7px; outline: none; color: var(--ink); background: #fff; font-size: 13px; font-weight: 400; }
.portal-dialog input:focus, .portal-dialog select:focus, .compose-panel input:focus, .compose-panel select:focus, .compose-panel textarea:focus { border-color: #5590f9; box-shadow: 0 0 0 3px #1769ff15; }
.dialog-close { position: absolute; top: 12px; right: 15px; border: 0; background: transparent; color: #66789b; font-size: 25px; }
.portal-dialog .primary-button { width: 100%; margin-top: 20px; }
.new-app-dialog { width: min(900px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.new-app-dialog form { padding: 30px 34px 0; }
.new-app-header { padding-right: 35px; }
.new-app-step { display: block; margin-bottom: 7px; color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.new-app-dialog .new-app-header h2 { font-size: 24px; letter-spacing: -.5px; }
.new-app-dialog .new-app-header p { max-width: 650px; margin: 7px 0 24px; font-size: 13px; line-height: 1.55; }
.new-app-name { max-width: 560px; }
.new-app-dialog .new-app-name label { margin: 0; }
.new-app-dialog .new-app-name label span, .channel-picker legend span { color: var(--red); }
.new-app-dialog .new-app-name input { min-height: 44px; }
.channel-picker { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.channel-picker legend { padding: 0; color: #152141; font-size: 14px; font-weight: 700; }
.new-app-dialog .channel-picker > p { margin: 5px 0 13px; font-size: 12px; }
.channel-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.new-app-dialog .channel-option { position: relative; margin: 0; cursor: pointer; }
.new-app-dialog .channel-option input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.channel-card { position: relative; min-height: 174px; padding: 24px 16px 18px; border: 1px solid #dbe3ef; border-radius: 10px; background: #fff; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.channel-option:hover .channel-card { border-color: #9ebbf4; box-shadow: 0 8px 22px #1a4ca412; transform: translateY(-1px); }
.channel-option input:focus-visible + .channel-card { outline: 3px solid #1769ff33; outline-offset: 2px; }
.channel-option input:checked + .channel-card { border-color: var(--blue); background: #f7faff; box-shadow: 0 0 0 2px #1769ff1f, 0 9px 24px #1769ff14; }
.channel-check { position: absolute; top: 11px; right: 11px; width: 22px; height: 22px; border: 1px solid #cdd9ea; border-radius: 50%; color: transparent; background: #fff; display: grid; place-items: center; font-size: 12px; }
.channel-option input:checked + .channel-card .channel-check { border-color: var(--blue); color: #fff; background: var(--blue); }
.channel-icon { width: 55px; height: 55px; margin-bottom: 13px; }
.apple-icon { fill: #111; }
.android-icon { fill: #77c159; }
.chrome-red { fill: #ea4335; }.chrome-yellow { fill: #fbbc04; }.chrome-green { fill: #34a853; }.chrome-blue { fill: #4285f4; }.chrome-ring { fill: #fff; }
.channel-card strong { color: var(--ink); font-size: 14px; }
.channel-card small { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 450; line-height: 1.35; }
.new-app-actions { margin: 28px -34px 0; padding: 16px 34px; border-top: 1px solid #e5ebf4; background: #f9fbfe; display: flex; justify-content: flex-end; gap: 10px; }
.new-app-dialog .new-app-actions .primary-button, .new-app-dialog .new-app-actions .secondary-button { width: auto; margin: 0; }
.channel-page-heading { align-items: flex-end; }
.channel-page-heading .date-filter { max-width: 370px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-setup-layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.8fr); gap: 14px; align-items: start; }
.channel-setup-nav { padding: 18px; }
.setup-channel { display: flex; min-height: 76px; align-items: center; gap: 11px; margin-top: 9px; padding: 11px; border: 1px solid #e0e7f2; border-radius: 9px; background: #fff; transition: border-color .16s ease, background .16s ease; }
.setup-channel:hover { border-color: #a9c2f3; background: #f9fbff; }
.setup-channel.active { border-color: var(--blue); background: #f3f7ff; box-shadow: 0 0 0 2px #1769ff12; }
.channel-icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.setup-channel-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; }
.setup-channel-icon svg { width: 36px; height: 36px; }
.setup-channel-icon.apple { fill: #111; }.setup-channel-icon.android { fill: #77c159; }
.setup-channel-icon.large { width: 56px; height: 56px; }
.setup-channel-icon.large svg { width: 48px; height: 48px; }
.setup-channel > span:nth-child(2) { min-width: 0; flex: 1; }
.setup-channel strong, .setup-channel small { display: block; }
.setup-channel strong { font-size: 13px; }.setup-channel small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.setup-channel em { color: #577098; font-size: 10px; font-style: normal; white-space: nowrap; }.setup-channel em.configured { color: #079557; font-weight: 700; }
.channel-nav-note { margin: 16px 4px 0 !important; line-height: 1.5; }
.channel-config-panel { padding: 25px 28px 18px; }
.channel-config-heading { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid #e5ebf4; }
.channel-config-heading h2 { margin-top: 2px; font-size: 22px; }.channel-config-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.channel-configured { margin-top: 18px; padding: 13px 15px; border: 1px solid #bcebd7; border-radius: 8px; color: #087b4b; background: #edfaf5; display: flex; justify-content: space-between; gap: 15px; font-size: 12px; }
.channel-configured span { color: #488169; }
.channel-credential-form { margin-top: 20px; }
.channel-credential-form label { display: block; color: #152141; font-size: 13px; font-weight: 700; }.channel-credential-form label span { color: var(--red); }
.channel-credential-form textarea { width: 100%; min-height: 220px; margin-top: 7px; padding: 13px; border: 1px solid #cfdaeb; border-radius: 8px; outline: none; resize: vertical; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.channel-credential-form textarea:focus { border-color: #5590f9; box-shadow: 0 0 0 3px #1769ff15; }
.channel-credential-form > p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.channel-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.mobile-setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: start; }
.credential-intro { margin: 20px 0 18px !important; color: #425476 !important; font-size: 12px !important; line-height: 1.55; }
.credential-field { position: relative; margin-top: 16px; }
.credential-label-row { min-height: 22px; display: flex; align-items: center; gap: 7px; }
.credential-label-row label { margin: 0; }
.credential-field > input:not(.credential-file-input), .credential-field > select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #cfdaeb; border-radius: 7px; outline: none; color: var(--ink); background: #fff; font-size: 13px; font-weight: 400; }
.credential-field > input:focus, .credential-field > select:focus { border-color: #5590f9; box-shadow: 0 0 0 3px #1769ff15; }
.credential-field > select:disabled { color: #425476; background: #f7f9fc; opacity: 1; }
.help-trigger { width: 18px; height: 18px; padding: 0; border: 1px solid #8b9ab2; border-radius: 50%; color: #5b6d8b; background: #fff; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; line-height: 1; }
.help-trigger:hover, .help-trigger[aria-expanded="true"] { border-color: var(--blue); color: #fff; background: var(--blue); }
.help-trigger:focus-visible { outline: 3px solid #1769ff33; outline-offset: 2px; }
.help-popover { position: absolute; top: 26px; left: 0; z-index: 8; width: min(340px, 100%); padding: 12px 14px; border: 1px solid #cbd8eb; border-radius: 8px; color: #33466a; background: #fff; box-shadow: 0 12px 32px #10234c24; font-size: 11px; line-height: 1.5; }
.help-popover[hidden] { display: none; }
.help-popover strong { display: block; color: var(--ink); font-size: 12px; }.help-popover p { margin: 3px 0 0; color: #5e7092; }
.credential-file-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.credential-file-picker { min-height: 118px; margin-top: 8px; padding: 18px; border: 1px dashed #9db7e4; border-radius: 9px; color: #175dd5; background: #f7faff; cursor: pointer; display: grid !important; grid-template-columns: 42px 1fr; column-gap: 12px; align-content: center; }
.credential-file-picker.compact { min-height: 82px; }
.credential-file-picker:hover { border-color: var(--blue); background: #f1f6ff; }
.credential-file-input:focus-visible + .credential-file-picker { outline: 3px solid #1769ff33; outline-offset: 3px; }
.credential-file-picker > .credential-upload-icon { width: 42px; height: 42px; grid-row: 1 / 3; border: 1px solid #c9dcff; border-radius: 12px; color: var(--blue); background: linear-gradient(145deg, #fff 0%, #e9f2ff 100%); box-shadow: 0 5px 14px #1769ff1f; display: grid; place-items: center; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.credential-file-picker > .credential-upload-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.credential-file-picker:hover > .credential-upload-icon { border-color: var(--blue); color: #fff; background: var(--blue); transform: translateY(-1px); }
.credential-file-picker strong { align-self: end; font-size: 13px; }.credential-file-picker small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 450; }
.provider-console-link { display: inline-block; margin-top: 10px; color: var(--blue); font-size: 12px; font-weight: 650; }
.credential-advanced { margin-top: 17px; padding: 0; border: 0; }
.credential-advanced summary { color: var(--blue); font-size: 12px; font-weight: 650; }
.credential-advanced[open] { padding: 0 0 4px; }
.mobile-sdk-guide { margin-top: 20px; padding: 20px; border: 1px solid #e0e7f2; border-radius: 10px; background: #fff; }
.mobile-sdk-guide .setup-checklist { margin-top: 4px; }
.mobile-sdk-guide .setup-checklist a, .mobile-sdk-links a { color: var(--blue); font-weight: 650; }
.mobile-sdk-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 17px; padding-top: 15px; border-top: 1px solid #e5ebf4; font-size: 12px; }
.mobile-sdk-guide .channel-form-actions { margin-top: 20px; }
.setup-progress { margin-top: 20px; padding-left: 24px; border-left: 1px solid #e2e9f3; }
.setup-progress-count { color: #53658b; display: flex; justify-content: space-between; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .35px; }
.setup-progress-count span { color: var(--blue); font-weight: 700; }
.setup-progress-bar { height: 7px; margin: 9px 0 21px; overflow: hidden; border: 1px solid #c9d5e7; border-radius: 99px; background: #fff; }
.setup-progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3159d9, #1769ff); transition: width .2s ease; }
.setup-progress ol { margin: 0; padding: 0; list-style: none; }
.setup-progress li { position: relative; min-height: 48px; padding: 2px 0 15px 34px; color: #71809e; font-size: 12px; }
.setup-progress li:not(:last-child)::after { position: absolute; top: 23px; bottom: 0; left: 11px; width: 1px; background: #d6dfec; content: ""; }
.setup-progress li > span { position: absolute; top: 0; left: 0; z-index: 1; width: 23px; height: 23px; border: 1px solid #aebbd0; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 10px; }
.setup-progress li.current { color: var(--ink); }.setup-progress li.current > span { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 3px #1769ff14; }
.setup-progress li.complete { color: #168459; }.setup-progress li.complete > span { border-color: var(--green); color: #fff; background: var(--green); }
.setup-progress > a { color: var(--blue); font-size: 11px; font-weight: 700; }
.channel-next-actions { margin: 24px -28px -18px; padding: 15px 28px; border-top: 1px solid #e5ebf4; background: #f9fbfe; display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 12px; }
.channel-next-actions a { color: var(--blue); font-weight: 700; }
.web-configuration { display: grid; gap: 16px; margin-top: 20px; }
.web-setup-section { padding: 20px; border: 1px solid #e0e7f2; border-radius: 10px; background: #fff; }
.web-step-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 17px; }
.web-step-heading > span { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 12px; font-weight: 800; }
.web-step-heading h3, .integration-guide-heading h3 { margin: 0; color: var(--ink); font-size: 17px; }
.web-step-heading p, .integration-guide-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.copy-field { display: block; margin-top: 15px; color: var(--ink); font-size: 12px; font-weight: 700; }
.copy-field input { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #cfd9e9; border-radius: 7px; color: #2d436c; background: #f8faff; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.web-key-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 12px; margin-top: 0; }
.web-key-form label { grid-column: 1 / -1; }
.web-key-form input { width: 100%; padding: 10px 12px; border: 1px solid #cfdaeb; border-radius: 8px; }
.web-key-form p { margin: 0; }
.web-key-form .primary-button { align-self: center; white-space: nowrap; }
.web-integration-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.web-integration-card { position: relative; min-height: 145px; padding: 18px 15px; border: 1px solid #dce4ef; border-radius: 9px; color: inherit; background: #fff; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; text-decoration: none; }
.web-integration-card:hover { border-color: #9ebbf4; box-shadow: 0 7px 20px #1a4ca412; }
.web-integration-card.active { border-color: var(--blue); background: #f5f8ff; box-shadow: 0 0 0 2px #1769ff18; }
.web-integration-card.active::after { position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--blue); display: grid; place-items: center; content: "✓"; font-size: 10px; font-weight: 800; }
.web-integration-card > span { display: grid; width: 50px; height: 43px; margin-bottom: 10px; place-items: center; border-radius: 8px; color: #49658e; background: #edf2f8; font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.web-integration-card > .integration-brand { overflow: hidden; padding: 5px; background: #fff; }
.integration-brand img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.integration-brand.typical, .integration-brand.custom { padding: 0; background: transparent; }
.integration-brand.wordpress { padding: 7px; background: #28799e; }
.integration-brand.magento img { filter: invert(49%) sepia(92%) saturate(2980%) hue-rotate(346deg) brightness(101%) contrast(90%); }
.integration-brand.joomla { justify-content: flex-start; }
.integration-brand.joomla img { width: auto; max-width: none; height: 32px; }
.web-integration-card strong { color: var(--ink); font-size: 13px; }
.web-integration-card small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.integration-guide { background: #fbfcfe; }
.integration-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.integration-kicker { display: block; margin-bottom: 4px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.download-button { white-space: nowrap; }
.setup-checklist { margin: 0; padding: 0; list-style: none; }
.setup-checklist li { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid #e6ecf4; }
.setup-checklist li > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border: 1px solid #b9c9df; border-radius: 50%; color: var(--blue); background: #fff; font-size: 10px; font-weight: 800; }
.setup-checklist strong { color: var(--ink); font-size: 12px; }.setup-checklist p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.setup-checklist a { color: var(--blue); }.setup-checklist code, .web-key-callout code { padding: 1px 4px; border-radius: 4px; color: #334b78; background: #edf2fa; }
.code-file-row { display: flex; gap: 10px; margin-bottom: 10px; }.code-file-row a { color: var(--blue); font-size: 11px; font-weight: 700; }
.integration-code { max-height: 355px; margin: 0; padding: 16px; overflow: auto; border: 1px solid #273758; border-radius: 9px; color: #e8efff; background: #111a2d; font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre; }
.hosted-sdk-callout { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; padding: 15px; border: 1px solid #cdd9fa; border-radius: 9px; background: #f5f7ff; }
.hosted-sdk-callout strong, .generated-snippet-heading strong { color: var(--ink); font-size: 12px; }.hosted-sdk-callout p, .generated-snippet-heading p { max-width: 610px; margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.hosted-sdk-callout form { flex: 0 0 auto; }.hosted-sdk-callout .primary-button { white-space: nowrap; }
.generated-snippet { margin-bottom: 15px; padding: 14px; border: 1px solid #b9c9f5; border-radius: 9px; background: #f9faff; scroll-margin-top: 20px; }
.generated-snippet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.web-key-callout { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 17px; padding: 14px; border: 1px solid #cbdaf4; border-radius: 8px; background: #f1f6ff; }
.web-key-callout strong { color: var(--ink); font-size: 12px; }.web-key-callout p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.send-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(370px, 1fr); gap: 14px; align-items: start; }
.compose-panel { padding: 20px 23px; }
.compose-panel label > span { float: right; color: #7081a4; font-size: 11px; font-weight: 400; }
.compose-panel label > small { color: #7183a7; font-weight: 400; }
.compose-panel textarea { min-height: 92px; resize: vertical; }
.compose-section { margin-top: 22px; padding: 19px; border: 1px solid #dfe6f0; border-radius: 10px; background: #fff; }
.compose-section h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; color: #3e4c68; font-size: 16px; }
.compose-section h3 > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 11px; }
.advanced-options { margin-top: 17px; padding-top: 13px; border-top: 1px solid #e6ecf4; }
.advanced-options summary { color: var(--blue); cursor: pointer; font-size: 12px; font-weight: 700; }
.choice-group { margin: 18px 0 0; padding: 0; border: 0; }
.choice-group legend { margin-bottom: 9px; color: #152141; font-size: 13px; font-weight: 700; }
.choice-card { display: flex !important; align-items: center; gap: 11px; margin: 9px 0 !important; padding: 12px 13px; border: 1px solid #d7e0ec; border-radius: 9px; cursor: pointer; }
.choice-card:has(input:checked) { border-color: #6964eb; box-shadow: 0 0 0 1px #6964eb; }
.compose-panel .choice-card input { width: 16px; height: 16px; margin: 0; accent-color: #6559df; }
.choice-card > span, .choice-card strong, .choice-card small { display: block; }
.choice-card strong { color: #17233f; font-size: 13px; }.choice-card small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.choice-card.locked { cursor: not-allowed; opacity: .65; background: #f6f8fb; }
.choice-card .paid-plan-lock { margin-left: 3px; }
.choice-card .paid-plan-pill { display: inline-block; margin-left: 4px; padding: 2px 7px; border: 1px solid #d8d5ff; border-radius: 999px; color: #5148ba; background: #eeecff; font-size: 9px; font-weight: 700; line-height: 1.2; vertical-align: 1px; }
.bootstrap-picker-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 15px 27px; padding: 14px; border: 1px solid #dbe3ee; border-radius: 8px; background: #f8fafc; }
.bootstrap-picker-row[hidden], .delivery-config[hidden] { display: none; }
.bootstrap-picker-row label { margin: 0; }.bootstrap-picker-row > small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.delivery-config { margin: 5px 0 13px 27px; padding: 3px 13px 12px; border-left: 3px solid #8177ed; background: #f8f7ff; }
.paid-feature-note { margin: 13px 0 0; padding: 10px 12px; border-radius: 7px; color: #52617d; background: #f1f4f9; font-size: 11px; }.paid-feature-note a { color: var(--blue); font-weight: 700; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-single { grid-template-columns: 1fr; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #e6ecf5; }
.send-side { display: grid; gap: 14px; }
.preview-panel { height: 390px; overflow: hidden; }
.preview-panel .panel-heading > span { padding: 5px 15px; border-radius: 6px; color: #fff; background: var(--blue); }
.phone { position: relative; width: 255px; height: 350px; margin: 12px auto 0; padding-top: 55px; border: 8px solid #10141b; border-radius: 43px 43px 0 0; color: #fff; background: radial-gradient(circle at 75% 25%, #238ef7, transparent 40%), linear-gradient(145deg, #2777ec 20%, #a379ef 52%, #f889af 75%, #455fe5); text-align: center; box-shadow: 0 8px 20px #243a6829; }
.phone-island { position: absolute; top: 9px; left: 50%; width: 78px; height: 23px; transform: translateX(-50%); border-radius: 999px; background: #050608; box-shadow: inset 0 0 0 1px #ffffff0a; }
.phone-island::after { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #24456a, #07111d 48%, #020305 72%); content: ""; opacity: .72; }
.phone time { display: block; font-size: 44px; font-weight: 250; letter-spacing: -2px; }
.phone > small { display: block; margin-top: -4px; font-size: 12px; }
.notification-preview { position: absolute; top: 162px; left: 14px; right: 14px; min-height: 91px; padding: 11px; border: 1px solid #ffffff6b; border-radius: 14px; color: #111a34; background: #ffffffd9; backdrop-filter: blur(15px); display: flex; gap: 9px; text-align: left; }
.notification-preview > b { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #6562f3, #1769ff); font-size: 11px; }
.notification-preview span { min-width: 0; flex: 1; }
.notification-preview span strong { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.notification-preview span > strong:nth-of-type(2) { margin-top: 3px; font-size: 11px; }
.notification-preview em { position: absolute; right: 12px; top: 11px; color: #1769ee; font-size: 9px; font-style: normal; }
.notification-preview p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; font-size: 9px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.settings-panel > div { display: grid; grid-template-columns: repeat(3, 1fr); }
.settings-panel span { min-width: 0; padding: 5px 15px; border-right: 1px solid #e6ecf4; }
.settings-panel span:last-child { border: 0; }
.settings-panel b, .settings-panel small, .settings-panel strong { display: block; }
.settings-panel b { color: var(--blue); font-size: 22px; }.settings-panel small { margin: 4px 0; color: #7183a7; font-size: 10px; }.settings-panel strong { font-size: 13px; }
.analytics-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 14px; margin-bottom: 14px; }
.analytics-chart .line-chart { height: 230px; }.analytics-chart .line-chart svg { height: 205px; }
.legend { display: flex; align-items: center; gap: 6px; color: #394c72; font-size: 11px; }
.legend i { width: 9px; height: 9px; margin-left: 8px; border-radius: 50%; }.blue-dot { background: var(--blue); }.green-dot { background: var(--green); }
.campaign-table { padding-bottom: 8px; }
.table-panel form { margin: 0; }
.compact-button { min-height: 30px; padding: 5px 10px; border: 1px solid #efc9ce; border-radius: 6px; color: #bd3542; background: #fff; cursor: pointer; font: inherit; font-size: 11px; }
.key-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.compact-key-button { min-height: 30px; padding: 5px 10px; font-size: 11px; white-space: nowrap; }
.scope-options { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #dbe4f2; border-radius: 8px; }
.scope-options legend { padding: 0 5px; color: #152141; font-size: 13px; font-weight: 650; }
.portal-dialog .scope-options label { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 500; }
.portal-dialog .scope-options input { width: auto; margin: 0; }
.form-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.toast { margin: 0 4px 14px; padding: 12px 15px; border-radius: 8px; font-size: 13px; }
.toast-error { color: #a52331; background: #ffe6e9; }.toast-success { color: #087446; background: #e2f7ed; }.toast-secret { color: #fff; background: #192b4a; overflow-wrap: anywhere; }

/* Workspace pages share the same cards, spacing and controls as the dashboard. */
.metric-card .metric-text { max-width: 175px; overflow: hidden; font-size: clamp(18px, 1.7vw, 24px); text-overflow: ellipsis; white-space: nowrap; }
.page-heading form, .plan-card form, .account-panel form { margin: 0; }
.page-section-heading { margin: 24px 4px 14px; }
.page-section-heading h2 { margin: 0; font-size: 20px; }
.page-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; }
.plan-card { position: relative; display: flex; min-height: 280px; flex-direction: column; padding: 22px; }
.plan-card.current-plan { border-color: #9dbbff; box-shadow: 0 7px 25px #1769ff14; }
.plan-value-badge { align-self: flex-start; margin: -8px 0 14px; padding: 5px 10px; border-radius: 999px; background: #eaf1ff; color: #1769ff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.plan-price { display: block; margin: 17px 0; color: var(--ink); font-size: 27px; }
.plan-price small { color: var(--muted); font-size: 12px; font-weight: 500; }
.plan-card ul { margin: 0 0 22px; padding: 0; color: #52658a; list-style: none; font-size: 13px; }
.plan-card li { padding: 7px 0; border-bottom: 1px solid #edf1f7; }
.plan-card li::before { margin-right: 8px; color: var(--green); content: "✓"; font-weight: 700; }
.plan-card form { margin-top: auto; }
.plan-card form .primary-button { width: 100%; }
.account-grid { display: grid; grid-template-columns: minmax(0, 760px); gap: 14px; }
.account-grid.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.account-panel { padding: 24px; }
.account-panel-icon { display: grid; width: 48px; height: 48px; margin-bottom: 17px; place-items: center; border-radius: 12px; color: #b17600; background: #fff2ce; font-size: 22px; font-weight: 800; }
.account-panel-icon.enabled { color: #087446; background: #e2f7ed; }
.account-panel-icon.danger-icon { color: #bd3542; background: #ffe4e7; }
.account-panel > p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.account-details { margin: 0; }
.account-details div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 15px; padding: 11px 0; border-top: 1px solid var(--line); }
.account-details dt { color: var(--muted); font-size: 12px; }.account-details dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; font-weight: 650; }
.account-settings-links { display: grid; gap: 7px; }
.account-settings-links a { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.account-settings-links a:hover { border-color: #b9cff4; background: #f5f8ff; }
.account-settings-links a > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--blue); background: #eaf2ff; }
.account-settings-links strong, .account-settings-links small { display: block; }.account-settings-links strong { font-size: 12px; }.account-settings-links small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 450; }
.danger-panel { border-color: #f0dadd; }
.settings-form { max-width: 440px; margin-top: 20px !important; }
.settings-form label { display: block; margin-bottom: 13px; color: #152141; font-size: 13px; font-weight: 650; }
.settings-form input, .inline-form select { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #cfdaeb; border-radius: 7px; outline: none; color: var(--ink); background: #fff; }
.settings-form input:focus, .inline-form select:focus { border-color: #5590f9; box-shadow: 0 0 0 3px #1769ff15; }
.notice { margin: 16px 0; padding: 12px 14px; border-radius: 8px; font-size: 13px; }
.success-notice { color: #087446; background: #e2f7ed; }
.warning-notice { color: #9a6500; background: #fff2ce; }
.security-explainer { display: flex; align-items: center; gap: 13px; margin: 18px 0; padding: 15px; border: 1px solid #dfe7f3; border-radius: 9px; background: #f8faff; }
.security-explainer > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--blue); background: #e8f0ff; font-size: 20px; }
.security-explainer p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.mfa-setup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.mfa-qr { max-width: 100%; height: auto; padding: 8px; border: 1px solid #dfe7f3; border-radius: 10px; background: #fff; }
.secret-code { display: block; padding: 12px; overflow-wrap: anywhere; border-radius: 7px; color: #fff; background: #192b4a; }
.inline-form { display: flex; min-width: 315px; align-items: center; gap: 7px; }
.inline-form select { width: 115px; margin: 0; padding: 7px 9px; }
.compact-action { min-height: 30px; padding: 5px 10px; font-size: 11px; }
.audit-action { display: inline-flex; padding: 4px 8px; border-radius: 5px; color: #315d9f; background: #edf3ff; font-size: 11px; font-weight: 650; }
.request-id { display: inline-block; max-width: 155px; overflow: hidden; color: #53658b; font-size: 10px; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }

/* Shared treatment for account, app-detail, security and administration routes. */
.legacy-portal { min-height: 100vh; background: radial-gradient(circle at 65% 5%, #fff 0, #f7f9fd 34%, var(--background) 70%); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.legacy-portal > nav { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 238px; height: 100vh; padding: 20px 15px; overflow-y: auto; color: #dbe6fb; background: radial-gradient(circle at 20% 20%, #1b2d4e 0, var(--navy) 52%, #0c172d 100%); display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.legacy-portal > nav a { display: flex; min-height: 43px; align-items: center; padding: 9px 14px; border-radius: 8px; color: #c9d7ef; font-size: 14px; }
.legacy-portal > nav .legacy-brand { min-height: 58px; padding: 0 8px 20px; }
.legacy-brand img { display: block; width: 190px; max-width: 100%; height: auto; }
.legacy-portal > nav a:hover { color: #fff; background: #ffffff0d; }
.legacy-portal > nav a.active { color: #fff; background: #ffffff14; box-shadow: inset 3px 0 0 #ffbf1f; }
.legacy-topbar { position: sticky; top: 0; z-index: 15; height: 58px; margin-left: 238px; padding: 0 26px; border-bottom: 1px solid var(--line); background: #ffffffee; backdrop-filter: blur(14px); display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.legacy-account strong, .legacy-account small { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legacy-account strong { font-size: 13px; }.legacy-account small { color: var(--muted); font-size: 11px; }
.legacy-topbar form { margin: 0; }
.legacy-portal .legacy-topbar .link-button { min-height: 34px; margin: 0; padding: 0 11px; border-color: #dbe4f2; color: #53658b; background: #fff; box-shadow: none; font-size: 12px; }
.legacy-portal > .wrap { width: auto; max-width: 1600px; min-height: 100vh; margin: 0 0 0 238px; padding: 25px 22px 32px; }
.legacy-portal h1 { margin: 0 0 17px; color: var(--ink); font-size: clamp(26px, 3vw, 34px); line-height: 1.05; letter-spacing: -1.1px; }
.legacy-portal h2 { color: var(--ink); line-height: 1.2; }
.legacy-portal a { color: #1769ec; text-decoration: none; }
.legacy-portal .card { min-width: 0; margin-bottom: 14px; padding: 20px 22px; border: 1px solid #e0e7f2; border-radius: 10px; background: #fff; box-shadow: 0 5px 16px #19325c0a; overflow-x: auto; }
.legacy-portal .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 14px; }
.legacy-portal .grid > .card { margin-bottom: 0; }
.legacy-portal .metric { min-height: 115px; }
.legacy-portal .metric strong { display: block; margin-top: 4px; color: var(--ink); font-size: 30px; }
.legacy-portal .muted { color: var(--muted); }
.legacy-portal label { display: block; margin: 14px 0 5px; color: #152141; font-size: 13px; font-weight: 650; }
.legacy-portal input, .legacy-portal select, .legacy-portal textarea { width: 100%; padding: 10px 12px; border: 1px solid #cfdaeb; border-radius: 7px; outline: none; color: var(--ink); background: #fff; font: inherit; font-size: 13px; }
.legacy-portal input:focus, .legacy-portal select:focus, .legacy-portal textarea:focus { border-color: #5590f9; box-shadow: 0 0 0 3px #1769ff15; }
.legacy-portal textarea { min-height: 140px; resize: vertical; }
.legacy-portal .legacy-topbar .global-search { width: min(340px, 32vw); margin: 0 0 0 auto; padding: 7px 11px; border: 1px solid #d5deed; background: #f8faff; color: #7183a6; display: flex; align-items: center; gap: 9px; }
.legacy-portal .legacy-topbar .global-search input { width: auto; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--ink); }
.legacy-portal .legacy-topbar .global-search input::placeholder { color: #91a1bd; }
.legacy-portal .legacy-topbar .topbar-divider { background: #dfe6f1; }
.legacy-portal button, .legacy-portal .button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; margin-top: 14px; padding: 0 17px; border: 1px solid #1769ff; border-radius: 7px; color: #fff; background: linear-gradient(#2877ff, #1262f3); box-shadow: 0 5px 12px #1769ff28; font-weight: 650; cursor: pointer; }
.legacy-portal button.danger, .legacy-portal .danger { border-color: #f0c8cd; color: #bd3542; background: #fff; box-shadow: none; }
.legacy-portal table { width: 100%; border-collapse: collapse; font-size: 12px; }
.legacy-portal th { padding: 10px 8px; color: #53658b; background: #f6f8fc; text-align: left; font-size: 10px; font-weight: 650; white-space: nowrap; }
.legacy-portal td { padding: 10px 8px; border-bottom: 1px solid #e8edf5; color: #273a60; vertical-align: middle; }
.legacy-portal .tabs { display: flex; gap: 5px; margin: 0 0 16px; padding: 5px; overflow-x: auto; border: 1px solid #dfe7f3; border-radius: 9px; background: #fff; }
.legacy-portal .tabs a { min-width: max-content; padding: 9px 13px; border-radius: 6px; color: #53658b; font-size: 12px; font-weight: 650; }
.legacy-portal .tabs a:hover { color: #1769ec; background: #edf3ff; }
.legacy-portal .badge { display: inline-flex; padding: 4px 8px; border-radius: 99px; color: #1763dd; background: #e8f0ff; font-size: 10px; }
.legacy-portal .alert { margin-bottom: 14px; padding: 12px 15px; border-radius: 8px; color: #087446; background: #e2f7ed; font-size: 13px; }
.legacy-portal .alert.error { color: #a52331; background: #ffe6e9; }
.legacy-portal .alert.secret { color: #fff; background: #192b4a; }
.legacy-portal pre { padding: 16px; border-radius: 8px; color: #e8f0ff; background: #101c35; }
.legacy-portal .mfa-qr { padding: 10px; border: 1px solid #dfe7f3; border-radius: 10px; background: #fff; }

.auth-portal { min-height: 100vh; margin: 0; padding: 32px 18px; color: var(--ink); background: radial-gradient(circle at 72% 18%, #4069d6 0, #182b5b 33%, #0c172d 76%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.auth-brand { display: block; width: min(290px, 76vw); margin: 4vh auto 24px; }
.auth-brand img { display: block; width: 100%; height: auto; }
.auth-portal .wrap { width: min(460px, 100%); margin: 0 auto 6vh; padding: 0; }
.auth-portal .card { padding: 30px; border: 1px solid #ffffff2e; border-radius: 13px; background: #fff; box-shadow: 0 25px 70px #07112766; }
.auth-portal h1 { margin: 0 0 20px; font-size: 29px; letter-spacing: -.7px; }
.auth-portal .muted { color: var(--muted); }
.auth-portal label { display: block; margin: 14px 0 5px; color: #152141; font-size: 13px; font-weight: 650; }
.auth-portal input { width: 100%; padding: 11px 12px; border: 1px solid #cfdaeb; border-radius: 7px; outline: none; font: inherit; }
.auth-portal input:focus { border-color: #5590f9; box-shadow: 0 0 0 3px #1769ff15; }
.auth-portal button { width: 100%; min-height: 43px; margin-top: 20px; border: 1px solid #1769ff; border-radius: 7px; color: #fff; background: linear-gradient(#2877ff, #1262f3); box-shadow: 0 5px 12px #1769ff28; font-weight: 700; }
.auth-portal a { color: #1769ec; text-decoration: none; }
.auth-portal .alert { margin: 0 auto 14px; padding: 12px 15px; border-radius: 8px; color: #087446; background: #e2f7ed; }
.auth-portal .alert.error { color: #a52331; background: #ffe6e9; }

.advanced-delivery { margin: 16px 0; padding: 12px 14px; border: 1px solid #dfe7f3; border-radius: 8px; background: #f8faff; }
.advanced-delivery summary { color: #273a60; font-size: 13px; font-weight: 700; cursor: pointer; }
.advanced-delivery small, [data-interruption-description] { display: block; margin-top: 5px; color: var(--muted); font-weight: 400; }
.critical-warning { margin: 14px 0; padding: 13px 15px; border: 1px solid #f0c36a; border-radius: 8px; color: #6f4700; background: #fff7df; }
.critical-warning strong { display: block; margin-bottom: 4px; }
.critical-warning p { margin: 0; font-size: 13px; line-height: 1.45; }

.back-link { display: inline-block; margin-bottom: 8px; color: var(--blue); font-size: 12px; font-weight: 650; text-decoration: none; }
.campaign-result-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); gap: 14px; margin-bottom: 14px; }
.message-result, .campaign-details, .ai-analysis-panel { padding: 22px; }
.message-result > h3 { margin: 20px 0 8px; font-size: 18px; }
.message-result > p { color: #3c4f72; line-height: 1.65; }
.message-result > a { color: var(--blue); overflow-wrap: anywhere; }
.campaign-details dl { display: grid; grid-template-columns: 100px 1fr; gap: 12px; margin: 20px 0 0; font-size: 13px; }
.campaign-details dt { color: var(--muted); }.campaign-details dd { margin: 0; color: var(--ink); font-weight: 650; }
.sent-items-panel td { white-space: nowrap; }
.sent-items-panel td:first-child { min-width: 240px; white-space: normal; }
tbody tr[data-row-link] { cursor: pointer; transition: background-color .15s ease; }
tbody tr[data-row-link]:hover { background: #f7f9fd; }
tbody tr[data-row-link]:focus-within { background: #f2f6ff; }
.table-pagination { min-height: 52px; padding: 12px 18px 5px; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 12px; }
.table-pagination .secondary-button { min-height: 32px; padding: 6px 11px; }
.sent-item-overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr) minmax(250px, .75fr); gap: 14px; margin-bottom: 14px; }
.sent-item-overview-grid > .panel { min-width: 0; }
.sent-message-body { white-space: normal; }
.sent-item-facts { margin: 14px 0 0; }
.sent-item-facts div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 12px; }
.sent-item-facts dt { color: var(--muted); }.sent-item-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.sent-item-facts a { color: var(--blue); }
.origin-explanation { margin: 18px 0 2px; padding: 13px; border-radius: 8px; color: #304568; background: #edf3ff; }
.origin-explanation strong, .origin-explanation span { display: block; }.origin-explanation span { margin-top: 4px; font-size: 12px; line-height: 1.45; }
.payload-details { margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--line); }
.payload-details summary, .event-properties summary { color: var(--blue); font-size: 12px; font-weight: 650; }
.payload-details h4 { margin: 14px 0 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.payload-details pre, .event-properties pre { max-height: 300px; margin: 7px 0 0; padding: 12px; overflow: auto; border-radius: 7px; color: #dce7ff; background: #12203a; font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sent-failures-panel, .sent-recipient-panel, .sent-attempt-panel, .sent-event-panel { margin-bottom: 14px; }
.sent-failures-panel .failure-suggestion { min-width: 320px; color: #304568; line-height: 1.45; white-space: normal; }
.sent-recipient-panel td, .sent-attempt-panel td, .sent-event-panel td { max-width: 280px; overflow-wrap: anywhere; }
.sent-item-timing dl { grid-template-columns: 92px minmax(0, 1fr); }
.ai-analysis-panel { margin-bottom: 14px; border-color: #cad8ff; background: linear-gradient(135deg, #fff 55%, #f4f7ff); }
.ai-analysis-panel .panel-heading { align-items: flex-start; }
.ai-analysis-panel .panel-heading form { margin: 0; }
.ai-analysis-panel h2 span { color: #7257e8; }
.ai-analysis-content { margin-top: 18px; }
.ai-summary { display: flex; gap: 14px; padding: 16px; border-radius: 10px; background: #edf3ff; }
.ai-mark { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #7257e8, #1769ff); }
.ai-summary h3 { margin: 0 0 5px; font-size: 17px; }.ai-summary p { margin: 0; color: #3f5378; line-height: 1.55; }
.ai-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.ai-insight-grid section { padding: 15px; border: 1px solid #e1e8f4; border-radius: 9px; background: #fff; }
.ai-insight-grid h4 { margin: 0 0 9px; color: var(--ink); font-size: 13px; }.ai-insight-grid ul { margin: 0; padding-left: 18px; color: #52658a; font-size: 12px; line-height: 1.55; }.ai-insight-grid p { color: var(--muted); font-size: 12px; }
.ai-analysis-content > small { color: var(--muted); font-size: 10px; }
.toggle-option { display: flex !important; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid #dbe4f2; border-radius: 9px; background: #f8faff; }
.toggle-option input { width: auto !important; margin: 2px 0 0 !important; }.toggle-option strong, .toggle-option small { display: block; }.toggle-option small { margin-top: 4px; color: var(--muted); font-weight: 400; }
.digest-feature-list { padding-left: 19px; color: #52658a; font-size: 13px; line-height: 1.8; }

@media (max-width: 1250px) {
    .metric-grid.five { grid-template-columns: repeat(3, 1fr); }
    .sent-item-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sent-item-timing { grid-column: 1 / -1; }
    .dashboard-panels { grid-template-columns: 1.6fr 1fr; }
    .health-panel { grid-column: 1 / -1; }
    .health-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .health-list > div { border: 0; }
    .bottom-grid { grid-template-columns: 1fr; }
    .dashboard-top-grid, .dashboard-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-usage-panel, .dashboard-activity-panel { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 20px 0 50px #07142f38; }
    .sidebar.open { transform: translateX(0); }
    .portal-shell.with-app-sidebar .portal-main { width: 100%; margin-left: 0; }
    .menu-button { display: block; margin-right: 0; }
    .metric-grid.four { grid-template-columns: repeat(2, 1fr); }
    .apps-layout, .send-layout, .channel-setup-layout { grid-template-columns: 1fr; }
    .web-integration-options { grid-template-columns: 1fr 1fr 1fr; }
    .account-grid.two-column { grid-template-columns: 1fr; }
    .send-side { grid-template-columns: 1fr 1fr; }.settings-panel { grid-column: 1 / -1; }
    .legacy-portal > nav { position: static; width: 100%; height: auto; padding: 12px; flex-direction: row; flex-wrap: wrap; }
    .legacy-portal > nav b { width: 100%; min-height: 0; padding: 5px 8px 12px; }
    .legacy-portal > nav a { min-height: 38px; }
    .legacy-topbar { margin-left: 0; }
    .legacy-portal > .wrap { margin-left: 0; }
}

@media (max-width: 700px) {
    .topbar { padding: 0 10px; gap: 6px; }.topbar-brand { width: 90px; }.global-nav { flex: 1; gap: 0; overflow-x: auto; }.global-nav > a { padding: 0 7px; font-size: 11px; white-space: nowrap; }.global-search { display: none; }.topbar-divider { margin-left: auto; }
    .account-menu summary > span:nth-child(2) { display: none; }
    .portal-main { padding: 15px 11px 25px; }.page-heading { align-items: flex-start; flex-direction: column; }
    .metric-grid.four, .metric-grid.five, .analytics-metrics, .dashboard-panels, .analytics-grid { grid-template-columns: 1fr !important; }
    .health-panel { grid-column: auto; }.health-list { grid-template-columns: 1fr 1fr; }
    .form-grid, .send-side, .campaign-result-grid, .sent-item-overview-grid, .ai-insight-grid, .bootstrap-picker-row { grid-template-columns: 1fr; }.settings-panel, .sent-item-timing { grid-column: auto; }
    .table-pagination { justify-content: space-between; }
    .bootstrap-picker-row > small { grid-column: auto; }
    .filter-row { flex-wrap: wrap; }.metric-card { min-height: 110px; }
    .list-toolbar { align-items: stretch; flex-direction: column; }.list-toolbar label { width: 100%; }
    .new-app-dialog form { padding: 25px 20px 0; }.channel-options { grid-template-columns: 1fr; }.channel-card { min-height: 116px; padding: 17px 48px 17px 72px; align-items: flex-start; text-align: left; }.channel-icon { position: absolute; left: 18px; width: 42px; height: 42px; margin: 0; }.new-app-actions { margin: 24px -20px 0; padding: 14px 20px; flex-direction: column-reverse; }.new-app-dialog .new-app-actions .primary-button, .new-app-dialog .new-app-actions .secondary-button { width: 100%; }
    .channel-config-panel { padding: 20px 18px 15px; }.mobile-setup-grid { grid-template-columns: 1fr; gap: 8px; }.setup-progress { padding: 20px 0 0; border-top: 1px solid #e2e9f3; border-left: 0; }.channel-configured, .channel-form-actions, .channel-next-actions { align-items: stretch; flex-direction: column; }.channel-form-actions .primary-button, .channel-form-actions .secondary-button { width: 100%; }.channel-next-actions { margin: 20px -18px -15px; padding: 14px 18px; }
    .web-setup-section { padding: 16px; }.web-integration-options, .web-key-form { grid-template-columns: 1fr; }.web-integration-card { min-height: 108px; padding: 15px 45px 15px 68px; align-items: flex-start; text-align: left; }.web-integration-card > span { position: absolute; left: 13px; width: 42px; height: 42px; margin: 0; }.integration-guide-heading, .web-key-callout, .hosted-sdk-callout, .generated-snippet-heading { align-items: stretch; flex-direction: column; }.integration-guide-heading .primary-button, .integration-guide-heading .secondary-button, .web-key-callout .secondary-button, .hosted-sdk-callout .primary-button, .generated-snippet-heading .secondary-button { width: 100%; }.code-file-row { flex-direction: column; }
    .mfa-setup { grid-template-columns: 1fr; }
    .legacy-topbar { padding: 0 12px; }.legacy-topbar .global-search, .legacy-account { display: none; }
    .legacy-topbar .topbar-divider { margin-left: auto; }
    .dashboard-welcome { flex-direction: column; gap: 8px; }.dashboard-welcome > time { padding: 0; }
    .dashboard-top-grid, .dashboard-detail-grid, .usage-list { grid-template-columns: 1fr; }.dashboard-usage-panel, .dashboard-activity-panel { grid-column: auto; }
    .dashboard-panel-heading { flex-wrap: wrap; }.dashboard-panel-heading > span { width: 100%; display: flex; justify-content: space-between; }
    .dashboard-plan-panel, .dashboard-actions-panel, .dashboard-activity-panel, .dashboard-recent-apps, .dashboard-blog-panel { min-height: auto; }
    .dashboard-chart { min-height: 130px; }.dashboard-chart svg { height: 110px; }
    .dashboard-activity-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-activity-stats > div:nth-child(3) { border-left: 0; }.dashboard-activity-stats > div:nth-child(n+3) { border-top: 1px solid #e6ebf3; }
}
.invoice-month { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.invoice-month:first-of-type { margin-top: 0; }