.cctp-icon { width: 24px; height: 24px; display: block; flex: 0 0 auto; }
.cctp-icon-button {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--cctp-radius);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}
.cctp-icon-button:hover { background: var(--cctp-soft); text-decoration: none; }
.cctp-icon-button:active { transform: scale(.96); }

.cctp-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--cctp-header-h);
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid var(--cctp-border);
    backdrop-filter: saturate(180%) blur(14px);
}
.cctp-header__inner {
    position: relative;
    width: min(100%, var(--cctp-content-max));
    height: 100%;
    margin: 0 auto;
    padding: 0 8px;
    display: grid;
    grid-template-columns: 88px 1fr 88px;
    align-items: center;
}
.cctp-header__brand { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block; min-width:0; z-index:1; }
.cctp-header__brand:hover { text-decoration: none; }
.cctp-header__brand img { display:block; width:170px; max-width:100%; height:auto; object-fit:contain; }
.cctp-header__actions { justify-self: end; display: flex; align-items: center; }

.cctp-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(255,255,255,.98);
    border-top: 1px solid var(--cctp-border);
    padding-bottom: var(--cctp-safe-bottom);
    backdrop-filter: saturate(180%) blur(14px);
}
.cctp-footer__nav {
    width: min(100%, var(--cctp-content-max));
    height: var(--cctp-footer-h);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
}
.cctp-footer__item {
    min-width: 0;
    min-height: 58px;
    border: 0;
    background: transparent;
    color: #363a40;
    padding: 7px 2px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    text-decoration: none;
}
.cctp-footer__item:hover { background: var(--cctp-soft); text-decoration: none; }
.cctp-footer__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; }
.cctp-footer__item .cctp-icon { width: 23px; height: 23px; }
.cctp-footer__item--primary { color: var(--cctp-action); }

.cctp-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(0,0,0,.36);
    opacity: 0;
    transition: opacity .18s ease;
}
.cctp-sheet-backdrop.is-visible { opacity: 1; }
.cctp-sheet {
    position: fixed;
    z-index: 200;
    background: var(--cctp-surface);
    box-shadow: 0 -10px 34px rgba(0,0,0,.14);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s step-end;
}
.cctp-sheet.is-open { visibility: visible; transition: transform .2s ease; }
.cctp-sheet--side {
    top: 0;
    left: 0;
    bottom: 0;
    width: min(84vw, 340px);
    transform: translateX(-102%);
    box-shadow: 10px 0 34px rgba(0,0,0,.14);
}
.cctp-sheet--side.is-open { transform: translateX(0); }
.cctp-sheet--bottom {
    left: 50%;
    bottom: 0;
    width: min(100%, var(--cctp-content-max));
    border-radius: var(--cctp-radius);
    padding-bottom: calc(10px + var(--cctp-safe-bottom));
    transform: translate(-50%, 105%);
}
.cctp-sheet--bottom.is-open { transform: translate(-50%, 0); }
.cctp-sheet__header { min-height: 58px; padding: 7px 10px 7px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cctp-border); }
.cctp-sheet__header strong { font-size: 17px; }
.cctp-sheet__handle { width: 38px; height: 4px; border-radius: var(--cctp-radius); background: #c8ccd1; margin: 8px auto 0; }

.cctp-menu-list { display: flex; flex-direction: column; padding: 8px; }
.cctp-menu-list a { min-height: 50px; padding: 0 12px; display: flex; align-items: center; gap: 13px; color: var(--cctp-text); border-radius: var(--cctp-radius); font-weight: 600; }
.cctp-menu-list a:hover { background: var(--cctp-soft); text-decoration: none; }

.cctp-group-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.cctp-group-list__item { min-height: 64px; border-radius: var(--cctp-radius); display: flex; align-items: center; gap: 11px; padding: 10px 12px; color: #17202a; font-weight: 700; text-decoration: none; }
.cctp-group-list__item:hover { text-decoration: none; filter: brightness(.98); }
.cctp-group-list__item--chan { background: #fff0ef; }
.cctp-group-list__item--com { background: #fff7d8; }
.cctp-group-list__item--them { background: #eef4ff; }
.cctp-group-list__item--pho { background: #ecf9f1; }
body.cctp-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media (max-width: 720px) {
    .cctp-header__inner { padding: 0 6px; }
}
@media (max-width: 430px) {
    .cctp-header__inner { grid-template-columns: 76px 1fr 88px; }
    .cctp-header__brand img { width: 164px; }
    .cctp-footer__item span { font-size: 9.5px; }
}
@media (max-width: 390px) {
    .cctp-header__inner { grid-template-columns: 66px 1fr 82px; }
    .cctp-header__brand img { width: 158px; }
    .cctp-icon-button { width: 41px; height: 41px; }
    .cctp-footer__item span { font-size: 9px; }
    .cctp-group-list { gap: 6px; padding: 10px; }
}


/* Shared form/control primitives used by multiple pages */
.cctp-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.cctp-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cctp-fieldset legend, .cctp-field > span { display: block; margin: 0 0 7px; font-weight: 700; }
.cctp-field { display: block; }
.cctp-field small, .cctp-fieldset small { display: block; margin-top: 6px; color: var(--cctp-muted); font-size: 13px; }
.cctp-input, .cctp-select { width: 100%; min-height: 48px; border: 1px solid #d8dce1; border-radius: var(--cctp-radius); background: #fff; color: var(--cctp-text); padding: 11px 12px; }
.cctp-input:focus, .cctp-select:focus { border-color: var(--cctp-link); outline: 3px solid rgba(51,102,204,.14); }
.cctp-button { min-height: 48px; border: 0; border-radius: var(--cctp-radius); padding: 11px 16px; font-weight: 750; cursor: pointer; }
.cctp-button--primary { background: var(--cctp-action); color: #fff; }
.cctp-button:hover { filter: brightness(.98); }
.cctp-button:disabled { opacity: .58; cursor: wait; }
.cctp-form-alert { margin: 0 0 16px; padding: 12px 13px; border-radius: var(--cctp-radius); font-weight: 650; }
.cctp-form-alert--error { background: #fff0ef; color: #8b211b; border: 1px solid #f2cbc7; }
.cctp-form-alert--success { background: #eef9f1; color: #185c32; border: 1px solid #cce9d5; }
.cctp-inline-form { display: inline; }
@media (max-width:390px) {
    .cctp-input, .cctp-select, .cctp-button { min-height:47px; }
}

.cctp-header-account-link{position:relative}
.cctp-header-badge{position:absolute;top:-3px;right:-5px;display:flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:7px;background:#d93025;color:#fff;font-size:10px;font-weight:800;line-height:1}
/* STEP 9 footer notification badge */
.cctp-footer-account-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    line-height: 0;
}
.cctp-footer-account-icon > .cctp-icon {
    width: 23px;
    height: 23px;
}
.cctp-footer-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 7px;
    background: #d93025;
    color: #fff;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1;
    overflow: visible !important;
}

/* STEP 9 HOTFIX — footer account notification badge positioning */
.cctp-footer__item .cctp-footer-account-icon {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: inherit !important;
    line-height: 1 !important;
    flex: 0 0 28px;
}
.cctp-footer__item .cctp-footer-account-icon > .cctp-icon {
    width: 23px !important;
    height: 23px !important;
}
.cctp-footer__item .cctp-footer-account-icon > .cctp-footer-badge {
    position: absolute !important;
    top: -7px !important;
    right: -9px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 18px !important;
    max-width: none !important;
    height: 18px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 7px !important;
    background: #d93025 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* STEP 14 HOTFIX — neutral black header/footer icons without altering icon geometry */
.cctp-header a,
.cctp-header button,
.cctp-footer a,
.cctp-footer button,
.cctp-bottom-nav a,
.cctp-bottom-nav button,
.cctp-footer .is-active,
.cctp-bottom-nav .is-active,
.cctp-footer [aria-current="page"],
.cctp-bottom-nav [aria-current="page"] {
  color: #16181d !important;
}

.cctp-header svg,
.cctp-footer svg,
.cctp-bottom-nav svg {
  color: inherit !important;
  stroke: currentColor !important;
}

/* STEP 14 HOTFIX — no link underlines anywhere in CCTP UI */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:focus-visible,
a:active {
  text-decoration: none !important;
}