:root {
    --p9-blue: #087cf0;
    --p9-blue-dark: #0757c9;
    --p9-cyan: #35dfea;
    --p9-cyan-light: #bff8fb;
    --p9-page: #edf7ff;
    --p9-card: #ffffff;
    --p9-text: #17324d;
    --p9-muted: #66829d;
    --p9-line: #8ed9ff;
}

html,
body,
.landing,
.app,
.chat-app {
    color: var(--p9-text) !important;
    background: linear-gradient(180deg, #c8f9fc 0, #e8f8ff 18rem, #f4f9ff 100%) !important;
}

.bg-glow-1 {
    background: rgba(25, 211, 235, .28) !important;
}

.bg-glow-2 {
    background: rgba(8, 124, 240, .18) !important;
}

.line-deco {
    background: linear-gradient(90deg, transparent, rgba(8, 124, 240, .42), transparent) !important;
}

.top-logo,
.topbar,
.chat-head {
    background: linear-gradient(135deg, #bffbfc 0%, #56e6ef 55%, #29cbdc 100%) !important;
    border-color: rgba(8, 124, 240, .24) !important;
    box-shadow: 0 .12rem .34rem rgba(5, 99, 190, .16) !important;
}

.top-action-btn,
.back {
    background-color: rgba(255, 255, 255, .72) !important;
    border-color: rgba(8, 124, 240, .28) !important;
    color: var(--p9-blue-dark) !important;
}

.hero h1,
.hero h1 strong,
.platform-info h1,
.page-head h1,
.platform-name,
.card-title,
.section-title,
.active-name,
.modal-card h3 {
    color: #0757c9 !important;
    text-shadow: none !important;
}

.hero-desc,
.premium-line,
.platform-info p,
.link-note,
.bind-desc,
.message-desc,
.head-sub,
.active-status,
.jr-times,
.empty-state p,
.jr-empty p {
    color: var(--p9-muted) !important;
}

.hero-badge,
.hot-tag,
.unread {
    background: linear-gradient(135deg, #28d9eb, #087cf0) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.7) !important;
    box-shadow: 0 .08rem .22rem rgba(8, 124, 240, .25) !important;
}

.campaign,
.platform-head,
.time-item,
.commission-box,
.link-card,
.card,
.jr-row,
.jr-id-card,
.jr-info-box,
.jr-data-item,
.contact-box,
.message-box,
.contact-item,
.message-top,
.modal,
.jr-modal,
.modal-card,
.notice-box {
    background: rgba(255, 255, 255, .94) !important;
    color: var(--p9-text) !important;
    border-color: var(--p9-line) !important;
    box-shadow: 0 .12rem .34rem rgba(5, 99, 190, .12) !important;
}

.contact-item.active,
.top-contact-list .contact-item.active {
    background: #dff7ff !important;
    border-color: var(--p9-blue) !important;
}

.input,
.send-box textarea,
.modal-card input {
    color: var(--p9-text) !important;
    background: #fff !important;
    border-color: #72ccfa !important;
    box-shadow: none !important;
}

.input:focus,
.send-box textarea:focus,
.modal-card input:focus {
    border-color: var(--p9-blue) !important;
    box-shadow: 0 0 0 3px rgba(8, 124, 240, .13) !important;
}

.hero-btn,
.main-btn,
.fullbtn,
.copy-btn,
.bind-btn,
.jr-view-btn,
.jr-copy-btn,
.notice-btn,
.add-friend-btn,
.send-box button,
.modal-actions button {
    color: #fff !important;
    background: linear-gradient(135deg, #20d7e6 0%, #087cf0 58%, #0757c9 100%) !important;
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: 0 .10rem .24rem rgba(8, 124, 240, .28) !important;
}

.tab.active,
.box-title,
.jr-section-title,
.deadline-bar,
.register-tip,
.fixed-id b,
.message-content b,
.time-item b,
.commission-text,
.link-text,
.jr-data-item b,
.jr-id-text b {
    color: var(--p9-blue) !important;
}

.tab {
    color: var(--p9-muted) !important;
    border-color: var(--p9-line) !important;
}

.bottom {
    background: linear-gradient(180deg, #9cf5f7 0%, #3cdee8 100%) !important;
    border-color: rgba(8, 124, 240, .22) !important;
    box-shadow: 0 -.08rem .26rem rgba(5, 99, 190, .15) !important;
}

.bottom a {
    color: #3481d6 !important;
}

/* Flat background, borderless 86px platform logo and compact records title */
.app,
.campaign,
.record-page,
.contact-page {
    background: #fff !important;
}

.platform-head,
.time-item,
.commission-box,
.link-card,
.card,
.jr-row,
.jr-empty,
.jr-id-card,
.jr-info-box,
.jr-data-item,
.contact-card,
.contact-empty {
    background: #fff !important;
    box-shadow: none !important;
}

.platform-logo-box {
    width: 86px !important;
    height: 86px !important;
    flex: 0 0 86px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.platform-logo {
    width: 86px !important;
    height: 86px !important;
    border-radius: 16px !important;
    object-fit: contain !important;
}

.record-page {
    padding-top: 16px !important;
}

.page-head {
    margin-bottom: 12px !important;
}

.page-head h1 {
    margin: 0 0 12px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    text-shadow: none !important;
}

.jr-empty h2 {
    color: #244765 !important;
    font-size: 18px !important;
}

/* Records keeps its bordered floating empty-state card */
.jr-empty {
    background: #f8fcff !important;
    border: 1px solid #c5e1f2 !important;
    box-shadow: 0 12px 30px rgba(47, 105, 145, .14) !important;
}

/* Contact cards intentionally retain a soft card shadow */
.contact-card {
    background: #fff !important;
    border: 1px solid #c5e1f2 !important;
    box-shadow: 0 7px 22px rgba(47, 105, 145, .12) !important;
}

.bottom a.active {
    color: #0757e6 !important;
}

.msg-bubble {
    color: var(--p9-text) !important;
    background: #fff !important;
    border-color: #a7dcff !important;
}

.msg-row.mine .msg-bubble {
    color: #073a75 !important;
    background: #c9f5ff !important;
    border-color: #61c9f4 !important;
}

.mask,
.jr-mask,
.modal-mask,
.notice-mask {
    background: rgba(4, 39, 82, .48) !important;
}

.close,
.modal-close,
.jr-close {
    color: #fff !important;
    background: linear-gradient(135deg, #36dce9, #087cf0) !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }
}

/* Refined P9 light-blue visual hierarchy */
html,
body,
.landing,
.app,
.chat-app {
    color: #253e59 !important;
    background: #edf4fa !important;
}

.bg-glow,
.line-deco {
    display: none !important;
}

.app > .top-logo {
    width: calc(100% + 36px) !important;
    margin-left: -18px !important;
    padding: 0 18px !important;
}

.landing > .top-logo {
    width: calc(100% + 44px) !important;
    margin-left: -22px !important;
    padding: 0 22px !important;
}

.top-logo,
.topbar,
.chat-head {
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(110deg, #22c9ed 0%, #45e4eb 52%, #1eb8e8 100%) !important;
    box-shadow: 0 3px 12px rgba(27, 123, 178, .15) !important;
}

.top-action-btn {
    border: 1px solid rgba(255,255,255,.82) !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 3px 10px rgba(20,91,141,.14) !important;
}

.top-back-btn::before {
    border-color: #1686d9 !important;
}

.top-close-btn::before,
.top-close-btn::after {
    background: #1686d9 !important;
}

.campaign,
.record-page,
.hero {
    color: #253e59 !important;
}

.platform-head,
.commission-box,
.link-card,
.time-item,
.card,
.jr-row,
.jr-id-card,
.jr-info-box,
.jr-data-item,
.contact-box,
.message-box,
.contact-item,
.message-top {
    border: 1px solid #c5e1f2 !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(47, 105, 145, .09) !important;
    backdrop-filter: none !important;
}

.platform-head {
    border-radius: 20px !important;
}

.platform-logo-box {
    border: 1px solid #b9dced !important;
    background: #eaf7fc !important;
    box-shadow: 0 6px 16px rgba(40,108,148,.13) !important;
}

.platform-info h1,
.page-head h1,
.hero h1,
.hero h1 strong,
.platform-name,
.active-name {
    color: #123f7a !important;
}

.box-title,
.card-title,
.jr-section-title,
.section-title,
.time-item b,
.deadline-bar b {
    color: #096fc8 !important;
}

.platform-info p,
.time-item span,
.link-note,
.logout-text,
.jr-times,
.jr-data-item span,
.jr-id-text span,
.input-note,
.bind-desc,
.message-desc,
.head-sub,
.active-status,
.empty-state p,
.jr-empty p {
    color: #607b95 !important;
}

.platform-logo-text {
    color: #166aa7 !important;
}

.commission-text,
.link-text,
.fixed-id,
.message-content,
.jr-info-box {
    color: #294d6b !important;
    background: #eaf5fb !important;
    border: 1px solid #d1e8f5 !important;
}

.commission-text {
    font-weight: 650 !important;
}

.link-text {
    color: #0874cf !important;
}

.link-text.empty {
    color: #7890a5 !important;
}

.hot-tag {
    color: #fff !important;
    border: 0 !important;
    background: linear-gradient(90deg, #13bde1, #0878e6) !important;
    box-shadow: 0 3px 9px rgba(8,120,230,.22) !important;
}

.hero-btn,
.main-btn,
.fullbtn,
.copy-btn,
.bind-btn,
.jr-view-btn,
.jr-copy-btn,
.notice-btn,
.add-friend-btn,
.send-box button,
.modal-actions button {
    border: 0 !important;
    color: #fff !important;
    background: linear-gradient(100deg, #129de5 0%, #0872dc 100%) !important;
    box-shadow: 0 5px 13px rgba(8, 107, 207, .22) !important;
}

.logout-text span,
.bottom a.active {
    color: #075fc9 !important;
}

.bottom {
    border-top: 1px solid #b6dceb !important;
    background: linear-gradient(180deg, #8cecf0 0%, #51dbe6 100%) !important;
    box-shadow: 0 -3px 12px rgba(25, 114, 158, .12) !important;
}

.bottom a {
    color: #3f7fb7 !important;
}

.bottom a.active {
    font-weight: 900 !important;
}

@media (max-width: 360px) {
    .app > .top-logo {
        width: calc(100% + 28px) !important;
        margin-left: -14px !important;
        padding: 0 14px !important;
    }
}

/* Shared geometry for all three order frontend pages */
.app,
.landing,
.contact-app {
    width: 100% !important;
    max-width: 430px !important;
    background: #fff !important;
}
.app > .top-logo,
.contact-app > .top-logo { height: 78px !important; }
.top-logo .logo,
.top-logo > img {
    height: 37px !important;
    max-width: 218px !important;
    object-fit: contain !important;
}
.app > .top-logo .top-back-btn,
.contact-app > .top-logo .top-back-btn { left: 14px !important; }
.app > .top-logo .top-close-btn,
.contact-app > .top-logo .top-close-btn { right: 14px !important; }
.bottom {
    width: 100% !important;
    max-width: 430px !important;
    height: 58px !important;
}
.bottom a {
    line-height: 58px !important;
    font-size: 14px !important;
}

/* Campanhas uses one uninterrupted white canvas; cards keep borders only. */
.campaign-app,
.campaign-app .campaign,
.campaign-app .logout-text {
    background: #fff !important;
    background-image: none !important;
}

.campaign-app .campaign {
    margin-top: 12px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
}

.campaign-app::before,
.campaign-app::after,
.campaign-app .campaign::before,
.campaign-app .campaign::after {
    display: none !important;
    content: none !important;
}

.campaign-app .platform-head,
.campaign-app .time-item,
.campaign-app .commission-box,
.campaign-app .link-card {
    background: #fff !important;
    border-color: #c5e1f2 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.campaign-app .main-btn,
.campaign-app .hot-tag,
.campaign-app .copy-btn {
    filter: none !important;
    box-shadow: none !important;
}

html.campaign-page,
body.campaign-body {
    background: #fff !important;
    background-image: none !important;
}

body.campaign-body .campaign-app {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.campaign-app .platform-logo-box,
.campaign-app .platform-logo {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Larger shared brand logo on Campanhas, Contatos and Registros. */
.campaign-app > .top-logo .logo,
.contact-app > .top-logo .logo,
.records-app > .top-logo .logo {
    width: auto !important;
    height: 50px !important;
    max-width: 260px !important;
    object-fit: contain !important;
}

/* Login landing header uses the exact same geometry as logged-in pages. */
.landing {
    padding-top: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}
.landing > .top-logo {
    width: calc(100% + 36px) !important;
    height: 78px !important;
    margin-left: -18px !important;
    margin-bottom: 26px !important;
    padding: 0 18px !important;
    align-items: center !important;
}
.landing > .top-logo .logo {
    width: auto !important;
    height: 50px !important;
    max-width: 260px !important;
    object-fit: contain !important;
}
.landing > .top-logo .top-back-btn { left: 14px !important; }
.landing > .top-logo .top-close-btn { right: 14px !important; }

/* Records list: platform logo and complete, readable campaign times. */
.records-app .jr-row {
    grid-template-columns: 66px minmax(0, 1fr) 96px !important;
    gap: 9px !important;
}
.records-app .jr-platform {
    width: 66px !important;
    height: 66px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: normal !important;
}
.records-app .jr-platform-logo {
    display: block !important;
    width: 62px !important;
    height: 62px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}
.records-app .jr-platform-fallback {
    color: #607b95 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
.records-app .jr-times {
    gap: 5px !important;
}
.records-app .jr-times div {
    color: #607b95 !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.records-app .jr-times b {
    color: #096fc8 !important;
    font-size: 11px !important;
}
.records-app .jr-view-btn {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
}
@media (max-width: 360px) {
    .records-app .jr-row { grid-template-columns: 58px minmax(0, 1fr) 86px !important; gap: 7px !important; }
    .records-app .jr-platform { width: 58px !important; height: 58px !important; }
    .records-app .jr-platform-logo { width: 54px !important; height: 54px !important; }
    .records-app .jr-times div { font-size: 9.5px !important; }
    .records-app .jr-times b { font-size: 10px !important; }
    .records-app .jr-view-btn { width: 86px !important; min-width: 86px !important; max-width: 86px !important; }
}