:root {
    --cctp-bg: #ffffff;
    --cctp-surface: #ffffff;
    --cctp-text: #111318;
    --cctp-muted: #687078;
    --cctp-link: #3366cc;
    --cctp-action: #234f9f;
    --cctp-border: #e8eaed;
    --cctp-soft: #f5f6f7;
    --cctp-header-h: 58px;
    --cctp-footer-h: 66px;
    --cctp-content-max: 680px;
    --cctp-radius: 7px;
    --cctp-safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cctp-bg);
    color: var(--cctp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
a { color: var(--cctp-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { color: inherit; }
:focus-visible { outline: 3px solid rgba(51, 102, 204, .35); outline-offset: 2px; }
[hidden] { display: none !important; }

.cctp-main {
    width: min(100%, var(--cctp-content-max));
    min-height: calc(100vh - var(--cctp-header-h));
    margin: 0 auto;
    padding: 18px 16px calc(var(--cctp-footer-h) + var(--cctp-safe-bottom) + 24px);
}

.cctp-skip-link {
    position: fixed;
    left: 12px;
    top: -80px;
    z-index: 300;
    padding: 10px 14px;
    background: #111318;
    color: #fff;
    border-radius: var(--cctp-radius);
}
.cctp-skip-link:focus { top: 10px; }

.cctp-shell-intro {
    padding: 24px 0 12px;
    text-align: center;
}
.cctp-shell-intro h1 { margin: 0; font-size: clamp(28px, 8vw, 42px); line-height: 1.08; letter-spacing: -.03em; }
.cctp-shell-intro p { margin: 12px auto 0; max-width: 36rem; color: var(--cctp-muted); font-size: 17px; }
.cctp-shell-status { margin: 28px 0; border-top: 1px solid var(--cctp-border); border-bottom: 1px solid var(--cctp-border); padding: 16px 0; color: var(--cctp-muted); text-align: center; }

@media (max-width: 720px) {
    .cctp-main { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 430px) {
    body { font-size: 16px; }
    .cctp-main { padding-left: 0px; padding-right: 0px; }
    .cctp-shell-intro { padding-top: 20px; }
}
@media (max-width: 390px) {
    .cctp-main { padding-left: 0px; padding-right: 0px; }
    .cctp-shell-intro p { font-size: 16px; }
}

/* STEP 7 hotfix: #0C45AE is only for send/submit actions, never global UI buttons. */
button[type="submit"],
.cctp-submit-composer [data-submit],
.cctp-opinion-composer [data-submit] {
    background: #0C45AE !important;
    color: #FFFFFF !important;
    border-color: #0C45AE !important;
}

button[type="submit"] svg,
.cctp-submit-composer [data-submit] svg,
.cctp-opinion-composer [data-submit] svg {
    color: #FFFFFF !important;
    stroke: currentColor;
}

button[type="submit"]:disabled,
.cctp-submit-composer [data-submit]:disabled,
.cctp-opinion-composer [data-submit]:disabled {
    background: #0C45AE !important;
    color: #FFFFFF !important;
    border-color: #0C45AE !important;
    opacity: .52;
}