.cekx-provider {
    margin-top: 16px;
}





.cekx-provider-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cekx-provider-logo {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf3ff;
    color: #0874ff;
    font-weight: 900;
}

.cekx-count {
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef3f8;
    text-align: center;
    font-size: 13px;
}

.cekx-content {
    margin-top: 12px;
}

.cekx-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cekx-pill {
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(120,130,145,.11);
    font-size: 12px;
    font-weight: 750;
}

.cekx-list {
    display: grid;
    gap: 10px;
}

.cekx-card {
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(22,34,55,.07);
}

.cekx-type {
    display: inline-flex;
    margin-bottom: 7px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 850;
}

.cekx-type.planned {
    background: #fff3d4;
    color: #825b00;
}

.cekx-type.emergency {
    background: #ffe0e0;
    color: #a52626;
}

.cekx-time {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.cekx-reason {
    margin-top: 6px;
    line-height: 1.42;
    font-size: 13px;
}

.cekx-address {
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cekx-empty,
.cekx-loading,
.cekx-error {
    padding: 15px;
    border-radius: 14px;
    background: rgba(120,130,145,.08);
    color: #667085;
    line-height: 1.45;
}

.cekx-news-head {
    margin-bottom: 12px;
}

.cekx-news-head h3 {
    margin: 0 0 4px;
}

.cekx-news-head p {
    margin: 0;
    color: #667085;
    font-size: 13px;
}

.cekx-news-open {
    width: 100%;
    margin-top: 12px;
    border: 0;
    border-radius: 14px;
    padding: 13px 15px;
    background: #0874ff;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

/* CEK UI V2 */
.cekx-provider,
.cekx-provider *,
.cek2-cities,
.cek2-cities *,
.cek2-day,
.cek2-day *,
.cek2-event,
.cek2-event *,
.cek2-news,
.cek2-news * {
    color: #172033;
}

.cek2-select-title {
    margin: 14px 0 10px;
    font-size: 14px;
    font-weight: 800;
    color: #667085;
}

.cek2-cities {
    display: grid;
    gap: 10px;
}

.cek2-city {
    width: 100%;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(20,35,55,.08);
    padding: 15px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.cek2-city small {
    min-width: 30px;
    border-radius: 999px;
    padding: 4px 8px;
    text-align: center;
    background: #edf2f7;
}

.cek2-city-head {
    margin: 14px 0 8px;
}

.cek2-city-head h3 {
    margin: 10px 0 0;
    font-size: 22px;
}

.cek2-back {
    border: 0;
    background: transparent;
    padding: 0;
    color: #0874ff !important;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.cek2-day {
    margin-top: 20px;
}

.cek2-day h4 {
    margin: 0 0 9px;
    font-size: 17px;
    font-weight: 900;
}

.cek2-events {
    display: grid;
    gap: 9px;
}

.cek2-event {
    background: #fff;
    border-radius: 16px;
    padding: 13px 14px;
    box-shadow: 0 4px 16px rgba(20,35,55,.07);
}

.cek2-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.cek2-type {
    border-radius: 8px;
    padding: 4px 7px;
    font-size: 11px;
    font-weight: 900;
}

.cek2-type.planned {
    background: #fff1c9;
    color: #6d5100 !important;
}

.cek2-type.emergency {
    background: #ffe1e1;
    color: #a52020 !important;
}

.cek2-time {
    white-space: nowrap;
    font-size: 14px;
}

.cek2-reason {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4;
}

.cek2-address {
    margin-top: 7px;
    color: #667085 !important;
    font-size: 12px;
    line-height: 1.42;
}

.cek2-empty {
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    background: #f4f6f8;
    color: #667085 !important;
}

.cek2-news {
    padding: 13px 14px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(20,35,55,.07);
    margin-bottom: 9px;
}

.cek2-news-city {
    margin-bottom: 5px;
    color: #0874ff !important;
    font-size: 12px;
    font-weight: 900;
}

.cek2-news p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
}

/* CEK PERSONAL EXACT V1 */
.cek3-personal-head {
    margin: 15px 0 12px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(20,35,55,.07);
}

.cek3-label {
    margin-bottom: 5px;
    color: #667085 !important;
    font-size: 12px;
    font-weight: 800;
}

.cek3-personal-head h3 {
    margin: 0;
    color: #172033 !important;
    font-size: 18px;
    line-height: 1.35;
}

.cek3-exact {
    margin-top: 7px;
    color: #14804a !important;
    font-size: 12px;
    font-weight: 800;
}


/* ==================================================
   CEK UI V4 — LIGHT / NOW / DATES
   ================================================== */

.cek4-screen {
    min-height: 100%;
    padding-bottom: 34px;
    background:
        linear-gradient(
            180deg,
            #f3f7ff 0,
            #f7f9fc 240px,
            #f7f9fc 100%
        ) !important;
}

.cek4-hero {
    margin: 12px;
    border-radius: 24px !important;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #ff5757 0%,
            #ff7757 48%,
            #ff9a62 100%
        ) !important;
    box-shadow:
        0 14px 32px
        rgba(211,67,55,.20);
}

.cek4-hero,
.cek4-hero * {
    color: #fff !important;
}

.cek4-provider-title {
    margin: 18px 2px 10px;
    color: #182230 !important;
    font-size: 14px;
    font-weight: 850;
}





.cekx-provider-logo {
    background:
        linear-gradient(
            135deg,
            #1478ff,
            #5c9cff
        ) !important;
    color: #fff !important;
}

.cek4-city-head {
    margin-top: 15px;
    padding: 17px;
    border: 1px solid #e5ebf4;
    border-radius: 22px;
    background: #fff;
    box-shadow:
        0 9px 28px
        rgba(42,61,89,.08);
}

.cek4-back {
    border: 0;
    padding: 0;
    background: transparent;
    color: #1478ff !important;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.cek4-city-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 13px;
}

.cek4-eyebrow {
    margin-bottom: 2px;
    color: #78879b !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.cek4-city-title-row h3 {
    margin: 0;
    color: #172033 !important;
    font-size: 25px;
    line-height: 1.15;
}

.cek4-city-total {
    min-width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #edf4ff;
    color: #1478ff !important;
    font-size: 16px;
    font-weight: 900;
}

.cek4-stats {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.cek4-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f1f4f8;
    color: #667085 !important;
    font-size: 12px;
    font-weight: 750;
}

.cek4-stats b {
    color: #172033 !important;
}

.cek4-stats .has-emergency {
    background: #ffe9e9;
    color: #a92a2a !important;
}

.cek4-stats .has-emergency b {
    color: #a92a2a !important;
}


/* ACTIVE NOW */

.cek4-now {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #ffd4d4;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            #fff8f8,
            #fff
        );
}

.cek4-now-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

.cek4-now-title > div {
    display: flex;
    flex-direction: column;
}

.cek4-now-title strong {
    color: #b22626 !important;
    font-size: 18px;
    line-height: 1.15;
}

.cek4-now-title small {
    margin-top: 2px;
    color: #866363 !important;
    font-size: 11px;
}

.cek4-live-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    background: #e33a3a;
    box-shadow:
        0 0 0 5px
        rgba(227,58,58,.12);
}


/* DATE — EXPLICIT DARK TEXT */

.cek4-day {
    margin-top: 22px;
}

.cek4-date-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #dce6f5;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #eaf2ff,
            #f4f8ff
        );
}

.cek4-date-title,
.cek4-date-title * {
    color: #172033 !important;
}

.cek4-date-title strong {
    flex: 1;
    font-size: 15px;
    font-weight: 900;
}

.cek4-date-title small {
    min-width: 26px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fff;
    text-align: center;
    color: #55708f !important;
    font-weight: 850;
}

.cek4-date-icon {
    font-size: 15px;
}


/* EVENT */

.cek4-events {
    display: grid;
    gap: 10px;
}

.cek4-event {
    padding: 14px;
    border: 1px solid #e8edf4;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 6px 20px
        rgba(42,61,89,.065);
}

.cek4-event.is-emergency {
    border-color: #ffd9d9;
}

.cek4-event-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cek4-type {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
}

.cek4-type.planned {
    background: #fff1c8;
    color: #725200 !important;
}

.cek4-type.emergency {
    background: #ffe1e1;
    color: #ab2525 !important;
}

.cek4-time {
    color: #172033 !important;
    text-align: right;
    font-size: 13px;
    font-weight: 900;
}

.cek4-reason {
    margin-top: 9px;
    color: #27364a !important;
    font-size: 13px;
    line-height: 1.45;
}


/* COLLAPSED ADDRESSES */

.cek4-addresses {
    margin-top: 10px;
    border-top: 1px solid #edf0f5;
    padding-top: 9px;
}

.cek4-addresses summary {
    color: #1478ff !important;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    list-style-position: inside;
}

.cek4-addresses div {
    margin-top: 8px;
    padding: 10px;
    border-radius: 12px;
    background: #f6f8fb;
    color: #667085 !important;
    font-size: 12px;
    line-height: 1.5;
}


/* EMPTY */

.cek4-empty {
    margin-top: 18px;
    padding: 24px 18px;
    border: 1px solid #e4eadf;
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.cek4-empty-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f7ed;
    color: #18844c !important;
    font-size: 20px;
    font-weight: 900;
}

.cek4-empty strong {
    display: block;
    color: #172033 !important;
}

.cek4-empty span {
    display: block;
    max-width: 300px;
    margin: 6px auto 0;
    color: #667085 !important;
    font-size: 12px;
    line-height: 1.45;
}

/* ==================================================
   CEK UI V5 — SAME VISUAL LANGUAGE AS THE APP
   Do not redesign the page shell here.
   ================================================== */

.cek4-screen {
    background: inherit !important;
    padding-bottom: inherit !important;
}

.cek4-hero {
    margin: inherit !important;
    border-radius: inherit !important;
    background: inherit !important;
    box-shadow: inherit !important;
}

/* Provider becomes a normal app card */
.cekx-provider {
    margin-top: 0;
}

.cek4-provider-title {
    margin: 0 0 10px;
    color: inherit !important;
    font-size: 15px;
    font-weight: 800;
}





.cekx-provider-logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent-soft, #eaf2ff) !important;
    color: var(--accent, #1677ff) !important;
}

.cekx-count,
.cek4-city-total {
    background: var(--surface-muted, #f1f4f8) !important;
    color: var(--text, #172033) !important;
}

/* City selector */
.cek2-select-title {
    margin: 16px 0 10px;
    color: var(--text-muted, #667085) !important;
}

.cek2-cities {
    gap: 8px;
}

.cek2-city {
    border: 0;
    border-radius: 16px;
    background: var(--surface, #fff);
    color: var(--text, #172033);
    box-shadow: none;
}

.cek2-city small {
    background: var(--surface-muted, #f1f4f8);
    color: var(--text-muted, #667085);
}

/* Selected city header */
.cek4-city-head {
    margin-top: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cek4-back {
    color: var(--accent, #1677ff) !important;
}

.cek4-city-title-row h3 {
    color: var(--text, #172033) !important;
}

.cek4-eyebrow {
    color: var(--text-muted, #667085) !important;
}

.cek4-stats span {
    background: var(--surface-muted, #f1f4f8);
    color: var(--text-muted, #667085) !important;
}

.cek4-stats b {
    color: var(--text, #172033) !important;
}

/* "Now" block remains semantically red, but not a separate design */
.cek4-now {
    margin-top: 18px;
    padding: 14px;
    border: 0;
    border-radius: 16px;
    background: var(--surface, #fff);
}

.cek4-now-title strong {
    color: #c73535 !important;
}

.cek4-now-title small {
    color: var(--text-muted, #667085) !important;
}

/* Dates: visible but native */
.cek4-date-title {
    margin: 18px 0 9px;
    padding: 0 2px 8px;
    border: 0;
    border-bottom: 1px solid var(--line, #e6eaf0);
    border-radius: 0;
    background: transparent;
}

.cek4-date-title,
.cek4-date-title * {
    color: var(--text, #172033) !important;
}

.cek4-date-title strong {
    font-size: 16px;
    font-weight: 800;
}

.cek4-date-title small {
    background: var(--surface-muted, #f1f4f8);
    color: var(--text-muted, #667085) !important;
}

/* Events use the same quiet card treatment */
.cek4-event {
    padding: 14px;
    border: 0;
    border-radius: 16px;
    background: var(--surface, #fff);
    box-shadow: none;
}

.cek4-event + .cek4-event {
    margin-top: 1px;
}

.cek4-time,
.cek4-reason {
    color: var(--text, #172033) !important;
}

.cek4-addresses {
    border-top: 1px solid var(--line, #edf0f4);
}

.cek4-addresses summary {
    color: var(--accent, #1677ff) !important;
}

.cek4-addresses div {
    background: var(--surface-muted, #f6f7f9);
    color: var(--text-muted, #667085) !important;
}

/* Empty state also native */
.cek4-empty,
.cek2-empty {
    border: 0;
    background: var(--surface, #fff);
    color: var(--text-muted, #667085) !important;
}

/* News cards: same language */
.cek2-news {
    border: 0;
    border-radius: 16px;
    background: var(--surface, #fff);
    box-shadow: none;
}

.cek2-news-city {
    color: var(--accent, #1677ff) !important;
}


/* ==================================================
   CEK V5 — native app tiles + theme-safe contrast
   ================================================== */

:root {
    --cek5-text: #172033;
    --cek5-muted: #687386;
    --cek5-card: #ffffff;
    --cek5-soft: #f1f4f8;
    --cek5-line: #e5eaf1;
    --cek5-accent: #1677ff;
}

html[data-theme="dark"],
body[data-theme="dark"],
.theme-dark,
.dark-theme {
    --cek5-text: #f5f7fb;
    --cek5-muted: #b6c0ce;
    --cek5-card: #1d2733;
    --cek5-soft: #273341;
    --cek5-line: rgba(255,255,255,.12);
    --cek5-accent: #78aaff;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --cek5-text: #f5f7fb;
        --cek5-muted: #b6c0ce;
        --cek5-card: #1d2733;
        --cek5-soft: #273341;
        --cek5-line: rgba(255,255,255,.12);
        --cek5-accent: #78aaff;
    }
}


/* CEK card uses existing home-card class for geometry.
   These rules only fix inner CEK content. */






/* OUTAGES */

.cekx-provider-name > span:last-child {
    color: var(--cek5-text) !important;
}

.cekx-count {
    background: var(--cek5-soft) !important;
    color: var(--cek5-text) !important;
}


/* DATES NEVER DISAPPEAR */

.cek4-date-title {
    border-color:
        var(--cek5-line) !important;
}

.cek4-date-title,
.cek4-date-title strong,
.cek4-date-title span {
    color:
        var(--cek5-text) !important;
}

.cek4-date-title small {
    background:
        var(--cek5-soft) !important;

    color:
        var(--cek5-muted) !important;
}


/* CITY / EVENT TEXT */

.cek4-city-title-row h3,
.cek4-time,
.cek4-reason,
.cek4-event {
    color:
        var(--cek5-text) !important;
}

.cek4-eyebrow,
.cek4-now-title small {
    color:
        var(--cek5-muted) !important;
}

.cek4-event,
.cek4-now,
.cek4-city-head {
    background:
        var(--cek5-card) !important;
}

.cek4-event {
    border-color:
        var(--cek5-line) !important;
}

.cek4-addresses {
    border-color:
        var(--cek5-line) !important;
}

.cek4-addresses summary {
    color:
        var(--cek5-accent) !important;
}

.cek4-addresses div {
    background:
        var(--cek5-soft) !important;

    color:
        var(--cek5-muted) !important;
}


/* NEWS = ONE TILE, NOT A FEED */

.cek-news-compact {
    margin-top: 14px;
}

.cek-news-tile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cek-news-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        var(--cek5-soft);

    font-size: 20px;
}

.cek-news-main {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cek-news-main strong {
    color:
        var(--cek5-text) !important;

    font-size: 14px;
    font-weight: 850;
}

.cek-news-main small {
    color:
        var(--cek5-muted) !important;

    font-size: 12px;
}

.cek-news-main > span {
    color:
        var(--cek5-muted) !important;

    font-size: 11px;
}

.cek-news-count {
    min-width: 32px;

    padding: 5px 8px;

    border-radius: 999px;

    background:
        var(--cek5-soft);

    color:
        var(--cek5-text) !important;

    text-align: center;

    font-size: 12px;
    font-weight: 900;
}


/* OLD CEK NEWS CARDS MUST NEVER APPEAR */

.cek2-news {
    display: none !important;
}


/* CEK V6 — native home tile owns the card itself */

.cek-provider-native {
    font-family: inherit !important;
}

.cek-provider-native .cekx-provider-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.cek-provider-native .cekx-provider-name > span:last-child {
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit;
}

.cek-provider-native .cekx-provider-logo {
    flex: 0 0 38px;
}

.cek-provider-native .cekx-count {
    margin-left: auto;
    flex: 0 0 auto;
}

/* Detail content always readable */

.cek4-date-title strong,
.cek4-time,
.cek4-reason,
.cek4-city-title-row h3 {
    opacity: 1 !important;
}