/* ==========================================================================
   Click & Sale — dashboard inner pages (loads after dashboard.css)
   ========================================================================== */

/* Shared tones (icon chips) */
.tone--green { background: #dcf5ea; color: #0e8a62; }
.tone--teal { background: #e3f5ef; color: #0f6e57; }
.tone--blue { background: #e3edfd; color: #2b6fd8; }
.tone--pink { background: #fde6ee; color: #e64980; }
.tone--amber { background: #fef3dc; color: #c27a06; }
.tone--red { background: #fde4e8; color: #d6334e; }

/* More status pills */
.pill--success, .pill--resolved { background: #dcf5ea; color: #0b8a63; }
.pill--pending { background: #fef3dc; color: #b26b00; }
.pill--sold, .pill--answered { background: #e3edfd; color: #2b62c4; }
.pill--failed { background: #fde4e8; color: #d6334e; }
.pill--refunded { background: #eef1f4; color: #5b6b7a; }

/* Buttons used across pages */
.dash-main .btn { font-family: var(--font-bn); font-weight: 600; }
.dash-main .btn .icon { font-size: 17px; }
.btn--sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn--soft { background: #e6f5f0; color: #0a6e56; }
.btn--soft:hover { background: #d6efe5; }
.btn--ghost { background: #f1f5f8; color: var(--d-ink-2); }
.btn--ghost:hover { background: #e6edf2; }
.btn--danger { border: 1.5px solid #f2b8c2; background: #fff; color: #d6334e; }
.btn--danger:hover { background: #fdecef; }
.btn--dashed { border: 1.5px dashed #cfd9e0; background: #fafcfd; color: var(--d-ink-2); }
.btn--dashed:hover { border-color: var(--green); color: var(--green); }
.btn:disabled { cursor: not-allowed; opacity: .6; }

.nowrap { white-space: nowrap; font-family: var(--font-bn); }

/* Page head ------------------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-left: 5px; }
.page-head h1 { font-family: var(--font-bn); font-size: 24px; font-weight: 700; color: var(--d-ink); }
.page-head p { margin-top: 6px; font-family: var(--font-bn); font-size: 15.5px; color: #4b5d6e; }
.page-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head .btn { height: 40px; }

.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-top: 20px; }
.page-grid__main, .page-grid__side { display: grid; gap: 20px; min-width: 0; }
.page-grid .panel { margin-top: 0; }

.panel__sub { margin-top: 2px; font-family: var(--font-bn); font-size: 13px; color: var(--d-muted); }

/* Mini stat row */
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 20px; }
.mini-stat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--d-line); border-radius: 10px; background: #fff; }
.mini-stat__icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; }
.mini-stat__icon .icon { font-size: 20px; }
.mini-stat p { font-family: var(--font-bn); font-size: 14px; color: var(--d-muted); }
.mini-stat strong { font-size: 21px; font-weight: 700; color: var(--d-ink); }

.stats--flush { margin-top: 20px; }
.stat__note { margin-top: 8px; font-family: var(--font-bn); font-size: 12.5px; color: var(--d-muted); }
.stat__trend.is-down { color: #d6334e; }

/* List toolbar: tabs + search + dropdowns ------------------------------- */
.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.list-bar--plain { margin: 20px 0 16px; }
.list-bar__count { padding-left: 5px; font-family: var(--font-bn); font-size: 15px; color: var(--d-muted); }
.list-bar__count strong { font-family: var(--font); font-size: 17px; color: var(--d-ink); }

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    font-family: var(--font-bn);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--d-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.tabs__tab span {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #eef2f5;
    color: #5b6b7a;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
}
.tabs__tab:hover { background: #f4f7f9; color: var(--d-ink); }
.tabs__tab.is-active { background: #e6f5f0; color: #0a6e56; font-weight: 600; }
.tabs__tab.is-active span { background: var(--green); color: #fff; }

.list-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.field-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 240px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dfe6ed;
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.field-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(5, 138, 104, .1); }
.field-search .icon { font-size: 16px; color: #5b6b7a; }
.field-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--font-bn); font-size: 14px; }
.field-search input::placeholder { color: #8a96a3; }

/* Dropdown (custom listbox) */
.dd { position: relative; }
.dd__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dfe6ed;
    border-radius: 8px;
    background: #fff;
    color: var(--d-ink-2);
    font-family: var(--font-bn);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.dd__toggle:hover { border-color: #c9d5de; }
.dd.is-open .dd__toggle { border-color: var(--green); box-shadow: 0 0 0 3px rgba(5, 138, 104, .1); }
.dd__icon { font-size: 15px; color: #5b6b7a; }
.dd__value { flex: 1; text-align: left; }
.dd__chevron { font-size: 14px; color: #5b6b7a; transition: transform .2s; }
.dd.is-open .dd__chevron { transform: rotate(180deg); }
.dd__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 100%;
    max-height: 300px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid #e6edf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(14, 27, 44, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.dd.is-open .dd__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
.dd__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--d-ink-2);
    font-family: var(--font-bn);
    font-size: 14.5px;
    white-space: nowrap;
    cursor: pointer;
}
.dd__option.is-active { background: #f4f7f9; }
.dd__option[aria-selected="true"] { color: var(--green); font-weight: 600; }
.dd__check { font-size: 15px; opacity: 0; }
.dd__option[aria-selected="true"] .dd__check { opacity: 1; }
.dd--field { width: 100%; }
.dd--field .dd__toggle { width: 100%; height: 44px; padding: 0 14px; border-radius: 9px; font-size: 14.5px; }
.dd--field .dd__panel { left: 0; right: auto; }

/* Table extras */
.ads-table tr.is-removing, .ad.is-removing { opacity: 0; transform: scale(.97); transition: opacity .25s, transform .25s; }
.ads-table__thumb--sm { width: 52px; height: 40px; }

/* Row menus */
.menu { position: relative; }
.menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 25;
    min-width: 190px;
    padding: 6px;
    border: 1px solid #e6edf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(14, 27, 44, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.menu.is-open .menu__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
tbody tr:nth-last-child(-n+2) .menu__panel { top: auto; bottom: calc(100% + 6px); }
/* items are direct children, or a submit button wrapped in its own form */
.menu__panel > :where(:not(form)),
.menu__panel > form > button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--d-ink-2);
    font-family: var(--font-bn);
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.menu__panel > form { margin: 0; }
.menu__panel > :where(:not(form)):hover,
.menu__panel > form > button:hover { background: #f4f7f9; }
.menu__panel .icon { font-size: 16px; color: var(--d-muted); }
.menu__panel .is-danger, .menu__panel .is-danger .icon { color: #d6334e; }
.menu__panel .is-danger:hover { background: #fdecef; }

/* List footer */
.list-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--d-line-soft);
    color: var(--d-muted);
    font-family: var(--font-bn);
    font-size: 14px;
}
.list-foot strong { font-family: var(--font); color: var(--d-ink); }
.pager { display: flex; gap: 6px; }
.pager__btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #dfe6ed;
    border-radius: 8px;
    background: #fff;
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.pager__btn .icon { font-size: 15px; }
.pager__btn.is-active { border-color: var(--green); background: var(--green); color: #fff; }
.pager__btn:disabled { cursor: default; opacity: .45; }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; padding: 40px 16px; text-align: center; }
.empty--card { border: 1px dashed #d5dfe6; border-radius: 12px; background: #fff; }
.empty__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #eaf6f2; color: var(--green); }
.empty__icon .icon { font-size: 26px; }
.empty h3 { margin-top: 14px; font-family: var(--font-bn); font-size: 17px; font-weight: 700; color: var(--d-ink); }
.empty p { margin-top: 6px; font-family: var(--font-bn); font-size: 14px; color: var(--d-muted); }
.empty .btn { margin-top: 16px; }

/* Avatar */
.avatar { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar__initial {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e3edfd;
    color: #2b6fd8;
    font-family: var(--font-bn);
    font-size: 18px;
    font-weight: 700;
}
.avatar--online::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #16b37a;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #dfe6ed;
    border-radius: 15px;
    background: #fff;
    color: var(--d-ink-2);
    font-family: var(--font-bn);
    font-size: 13.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}
.chip span { padding: 0 6px; border-radius: 9px; background: #eef2f5; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; }
.chip:hover { border-color: #b9dccd; color: #0a6e56; }
.chip.is-active { border-color: #bfe5d6; background: #e6f5f0; color: #0a6e56; font-weight: 600; }
.chip.is-active span { background: var(--green); color: #fff; }

/* Messages ------------------------------------------------------------- */
.chat {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    height: calc(100vh - 70px - 150px);
    min-height: 560px;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid var(--d-line);
    border-radius: 12px;
    background: #fff;
}
.chat__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--d-line); }
.chat__list .chat__search { flex: none; width: auto; margin: 14px 14px 10px; }
.chat__filters { display: flex; gap: 8px; padding: 0 14px 12px; border-bottom: 1px solid var(--d-line-soft); }
.chat__convos { flex: 1; padding: 6px; overflow-y: auto; }
.chat__none { padding: 24px; color: var(--d-muted); font-family: var(--font-bn); font-size: 14px; text-align: center; }

.convo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s;
}
.convo:hover { background: #f6f9fb; }
.convo.is-active { background: #eaf6f2; }
.convo__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.convo__top { display: flex; justify-content: space-between; gap: 8px; }
.convo__top strong { overflow: hidden; font-family: var(--font-bn); font-size: 14.5px; font-weight: 700; color: var(--d-ink); white-space: nowrap; text-overflow: ellipsis; }
.convo__top time { flex-shrink: 0; font-family: var(--font-bn); font-size: 11.5px; color: #7b8a97; }
.convo__ad { display: flex; align-items: center; gap: 4px; overflow: hidden; color: #0a7a5e; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.convo__ad .icon { flex-shrink: 0; font-size: 12px; }
.convo__bottom { display: flex; align-items: center; gap: 8px; }
.convo__text { flex: 1; min-width: 0; overflow: hidden; color: var(--d-muted); font-family: var(--font-bn); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.convo.is-unread .convo__text { color: var(--d-ink-2); font-weight: 600; }
.convo__count { display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #0d8a6a; color: #fff; font-size: 10.5px; font-weight: 700; }

.chat__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.thread { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.thread__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--d-line-soft); }
.thread__back { display: none; }
.thread__who { flex: 1; min-width: 0; }
.thread__who strong { display: block; font-family: var(--font-bn); font-size: 15.5px; font-weight: 700; color: var(--d-ink); }
.thread__who span { font-family: var(--font-bn); font-size: 12.5px; color: var(--d-muted); }
.thread__who .is-online { color: #0e9f6e; }
.thread__actions { display: flex; gap: 8px; }

.thread__ad {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 16px 0;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--d-line);
    border-radius: 10px;
    background: #fafcfd;
    transition: border-color .15s;
}
.thread__ad:hover { border-color: #bfe5d6; }
.thread__ad img { width: 50px; height: 40px; flex-shrink: 0; border-radius: 6px; object-fit: cover; }
.thread__ad-info { flex: 1; min-width: 0; }
.thread__ad-info strong { display: block; overflow: hidden; font-size: 14px; font-weight: 500; color: var(--d-ink); white-space: nowrap; text-overflow: ellipsis; }
.thread__ad-info span { font-size: 13.5px; font-weight: 600; color: var(--green); }
.thread__ad-link { display: flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--green); font-family: var(--font-bn); font-size: 13px; font-weight: 600; }
.thread__ad-link .icon { font-size: 13px; }

.thread__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 20px; overflow-y: auto; background: #f7fafb; }
.thread__day { margin: 2px 0 6px; text-align: center; }
.thread__day span { padding: 3px 12px; border: 1px solid var(--d-line); border-radius: 12px; background: #fff; color: var(--d-muted); font-family: var(--font-bn); font-size: 12px; }

.bubble { max-width: min(70%, 460px); padding: 9px 12px 6px; border-radius: 14px; font-family: var(--font-bn); font-size: 14.5px; line-height: 1.5; }
.bubble p { overflow-wrap: anywhere; }
.bubble--them { align-self: flex-start; border: 1px solid var(--d-line); border-bottom-left-radius: 4px; background: #fff; color: var(--d-ink-2); }
.bubble--me { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--green); color: #fff; }
.bubble__meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 11px; opacity: .75; }
.bubble__tick { font-size: 14px; }
.bubble--new { animation: bubble-in .25s ease; }
@keyframes bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.thread__composer { padding: 10px 16px 14px; border-top: 1px solid var(--d-line-soft); background: #fff; }
.thread__quick { display: flex; gap: 8px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.thread__input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 8px;
    border: 1px solid #dfe6ed;
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}
.thread__input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(5, 138, 104, .1); }
.thread__input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--font-bn); font-size: 15px; }
.thread__send {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s;
}
.thread__send:hover { background: var(--green-600); }
.thread__send .icon { font-size: 19px; }

/* Saved ads -------------------------------------------------------------- */
.saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.saved-card { transition: box-shadow .2s, transform .2s, opacity .25s; }
.saved-card .ad__body { padding: 13px 14px 14px; }
.ad__save.is-saved { color: #e5484d; }
.ad__save.is-saved:hover { color: #c93a3f; transform: scale(1.08); }
.saved-card__drop {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #0e8a62;
    color: #fff;
    font-family: var(--font-bn);
    font-size: 12px;
    font-weight: 600;
}
.saved-card__drop .icon { font-size: 13px; }
.saved-card__cta { width: 100%; height: 36px; margin-top: 14px; font-size: 14px; }

/* Profile ---------------------------------------------------------------- */
.profile-hero { padding: 0; overflow: hidden; }
.profile-hero__cover {
    height: 110px;
    background:
        radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .16) 0 54px, transparent 55px),
        radial-gradient(circle at 72% 130%, rgba(255, 255, 255, .12) 0 88px, transparent 89px),
        linear-gradient(120deg, #046b52, #058a68 55%, #12a679);
}
.profile-hero__main { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 18px; padding: 14px 22px 18px; }
.profile-hero__avatar { position: relative; margin-top: -58px; }
.profile-hero__avatar img { width: 96px; height: 96px; border: 4px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgba(14, 27, 44, .15); }
.profile-hero__camera {
    position: absolute;
    right: 2px;
    bottom: 4px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--d-line);
    border-radius: 50%;
    background: #fff;
    color: var(--d-ink);
    cursor: pointer;
}
.profile-hero__camera .icon { font-size: 15px; }
.profile-hero__info { flex: 1; min-width: 220px; padding-top: 4px; }
.profile-hero__info h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--d-ink); }
.profile-hero__info p { margin-top: 4px; font-family: var(--font-bn); font-size: 14px; color: var(--d-muted); }
.profile-hero__stats { display: flex; margin: 0; padding: 10px 0; border: 1px solid var(--d-line); border-radius: 10px; }
.profile-hero__stats div { padding: 0 18px; text-align: center; }
.profile-hero__stats div + div { border-left: 1px solid var(--d-line); }
.profile-hero__stats dt { font-family: var(--font-bn); font-size: 12.5px; color: var(--d-muted); }
.profile-hero__stats dd { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 3px 0 0; font-size: 17px; font-weight: 700; color: var(--d-ink); }
.profile-hero__stats small { font-size: 12px; font-weight: 500; color: var(--d-muted); }
.star { font-size: 15px; color: #f5a524; }

.form-panel { padding: 20px 22px; }
.form-panel__head h2 { font-family: var(--font-bn); font-size: 17.5px; font-weight: 700; color: var(--d-ink); }
.form-panel__head p { margin-top: 4px; font-family: var(--font-bn); font-size: 14px; color: var(--d-muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 18px; }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { display: flex; justify-content: space-between; font-family: var(--font-bn); font-size: 14px; font-weight: 600; color: var(--d-ink-2); }
.field__label small { font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--d-muted); }

.input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe6ed;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: var(--d-ink);
    font-family: var(--font);
    font-size: 14.5px;
    transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(5, 138, 104, .1); }
.input::placeholder { color: #8a96a3; }
.textarea { height: auto; padding: 11px 14px; font-family: var(--font-bn); line-height: 1.6; resize: vertical; }

.input-group { display: flex; align-items: stretch; overflow: hidden; border: 1px solid #dfe6ed; border-radius: 9px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.input-group:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(5, 138, 104, .1); }
.input-group .input { flex: 1; min-width: 0; height: 42px; border: 0; border-radius: 0; box-shadow: none; }
.input-group__addon { display: flex; align-items: center; padding-left: 14px; color: var(--d-muted); font-size: 14.5px; }
.input-group__addon + .input { padding-left: 2px; }
.input-group__tag { display: flex; align-items: center; gap: 5px; padding: 0 12px; color: #0b8a63; font-family: var(--font-bn); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.input-group__tag .icon { font-size: 15px; color: var(--green); }
.input-group__btn { padding: 0 12px; border: 0; background: none; color: var(--d-muted); cursor: pointer; }
.input-group__btn .icon { font-size: 17px; }
.input-group__btn .pw-hide, .input-group__btn.is-visible .pw-show { display: none; }
.input-group__btn.is-visible .pw-hide { display: block; }

.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--d-line-soft); }
.form-actions--split { justify-content: space-between; }

.toggle-list { margin-top: 8px; }
.toggle-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--d-line-soft); }
.toggle-list li:last-child { padding-bottom: 2px; border-bottom: 0; }
.toggle-list strong { font-family: var(--font-bn); font-size: 15px; font-weight: 600; color: var(--d-ink); }
.toggle-list p { margin-top: 2px; font-family: var(--font-bn); font-size: 13.5px; color: var(--d-muted); }

.switch { position: relative; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch__track { position: relative; display: block; width: 44px; height: 24px; border-radius: 12px; background: #cfd9e0; transition: background-color .2s; }
.switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(14, 27, 44, .25);
    transition: transform .2s;
}
.switch input:checked + .switch__track { background: var(--green); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px rgba(5, 138, 104, .25); }

.side-card { padding: 18px; }
.side-card h2 { font-family: var(--font-bn); font-size: 16.5px; font-weight: 700; color: var(--d-ink); }
.side-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.side-card__pct { font-size: 18px; font-weight: 700; color: var(--green); }

.progress { height: 8px; margin-top: 12px; overflow: hidden; border-radius: 4px; background: #edf1f4; }
.progress span { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.progress--warn span { background: #f0a020; }

.checklist { display: grid; gap: 10px; margin-top: 14px; }
.checklist li { display: flex; align-items: center; gap: 10px; color: var(--d-muted); font-family: var(--font-bn); font-size: 14.5px; }
.checklist li .icon { font-size: 18px; color: #f0a020; }
.checklist li.is-done { color: var(--d-ink-2); }
.checklist li.is-done .icon { color: var(--green); }
.checklist__action { margin-left: auto; color: var(--green); font-size: 13.5px; font-weight: 600; }

.sessions { display: grid; gap: 12px; margin: 14px 0 16px; }
.sessions li { display: flex; align-items: center; gap: 12px; }
.sessions__icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: #f1f5f8; color: var(--d-ink-2); }
.sessions__icon .icon { font-size: 19px; }
.sessions strong { font-size: 14px; font-weight: 500; color: var(--d-ink); }
.sessions p { font-family: var(--font-bn); font-size: 13px; color: var(--d-muted); }
.sessions .is-online { color: #0e9f6e; }

.side-card--danger { border-color: #f6d3d9; }
.side-card--danger h2 { color: #c22c46; }
.side-card--danger p { margin: 8px 0 14px; font-family: var(--font-bn); font-size: 14px; line-height: 1.55; color: var(--d-muted); }

.info-card { display: flex; align-items: flex-start; gap: 14px; border-color: #d9efe8; background: #f2faf7; }
.info-card__icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--green); }
.info-card__icon .icon { font-size: 22px; }
.info-card h2 { font-size: 15.5px; }
.info-card p { margin-top: 4px; font-family: var(--font-bn); font-size: 13.5px; line-height: 1.55; color: var(--d-muted); }

/* Subscription ------------------------------------------------------------ */
.current-plan {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 20px 22px;
    background: linear-gradient(120deg, #fff 60%, #f0faf6);
}
.current-plan__info { display: flex; align-items: center; gap: 14px; }
.current-plan__icon { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: #fff4dc; color: #d48a06; }
.current-plan__icon .icon { font-size: 26px; }
.current-plan__info p, .current-plan__info span { font-family: var(--font-bn); font-size: 13px; color: var(--d-muted); }
.current-plan__info h2 { font-family: var(--font-bn); font-size: 20px; font-weight: 700; color: var(--d-ink); }
.usage { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 28px; border-right: 1px solid var(--d-line-soft); border-left: 1px solid var(--d-line-soft); }
.usage__top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-bn); font-size: 14px; color: var(--d-ink-2); }
.usage__top strong { font-family: var(--font); font-weight: 700; }
.usage .progress { margin-top: 8px; }
.usage__note { display: block; margin-top: 6px; font-family: var(--font-bn); font-size: 12.5px; color: #b26b00; }
.usage__note--muted { color: var(--d-muted); }

.plans-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 30px; padding-left: 5px; }
.plans-head h2 { font-family: var(--font-bn); font-size: 20px; font-weight: 700; color: var(--d-ink); }
.plans-head p { margin-top: 4px; font-family: var(--font-bn); font-size: 14px; color: var(--d-muted); }

.segmented { display: inline-flex; gap: 2px; padding: 4px; border-radius: 10px; background: #e8eef2; }
.segmented button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--d-muted);
    font-family: var(--font-bn);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.segmented button.is-active { background: #fff; color: var(--d-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(14, 27, 44, .12); }
.segmented__save { padding: 1px 7px; border-radius: 9px; background: #dcf5ea; color: #0a7a5e; font-size: 11.5px; font-weight: 600; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 24px 22px 22px; border: 1px solid var(--d-line); border-radius: 14px; background: #fff; }
.plan--popular { border: 2px solid var(--green); box-shadow: 0 16px 36px rgba(5, 138, 104, .14); }
.plan--current { background: #fafcfd; }
.plan__flag {
    position: absolute;
    top: -13px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-family: var(--font-bn);
    font-size: 12.5px;
    font-weight: 600;
}
.plan__flag .icon { font-size: 13px; }
.plan h3 { font-family: var(--font-bn); font-size: 19px; font-weight: 700; color: var(--d-ink); }
.plan__tag { margin-top: 2px; font-family: var(--font-bn); font-size: 13.5px; color: var(--d-muted); }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin-top: 16px; }
.plan__price strong { font-size: 32px; font-weight: 700; letter-spacing: -.5px; color: var(--d-ink); }
.plan__price span { font-family: var(--font-bn); font-size: 14px; color: var(--d-muted); }
.plan__features { display: grid; align-content: start; gap: 10px; flex: 1; margin: 18px 0 22px; padding-top: 18px; border-top: 1px solid var(--d-line-soft); }
.plan__features li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-bn); font-size: 14.5px; color: var(--d-ink-2); }
.plan__features .icon { flex-shrink: 0; margin-top: 3px; font-size: 16px; color: var(--green); }
.plan__features .is-off { color: #9aa6b1; }
.plan__features .is-off .icon { color: #c3ccd3; }
.plan__btn { width: 100%; height: 42px; }
.plan--current .plan__btn { background: #eef2f5; color: var(--d-muted); }

/* Payments -------------------------------------------------------------- */
.txn-table th:nth-child(1) { width: 38%; }
.txn-table th:nth-child(2) { width: 16%; }
.txn-table th:nth-child(3) { width: 15%; }
.txn-table th:nth-child(4) { width: 10%; }
.txn-table th:nth-child(5) { width: 12%; }
.txn { display: flex; align-items: center; gap: 12px; }
.txn__icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: #eef6f3; color: var(--green); }
.txn__icon .icon { font-size: 18px; }
.txn strong { display: block; font-family: var(--font-bn); font-size: 14.5px; font-weight: 600; color: var(--d-ink); }
.txn p { margin-top: 2px; font-size: 12.5px; color: var(--d-muted); }
.txn code, .tickets code { font-family: 'Inter', monospace; font-size: 12px; color: #6b7a89; }
.txn__amount { font-weight: 600; color: var(--d-ink); white-space: nowrap; }
.txn__amount.is-muted { color: #9aa6b1; }

.methods { display: grid; gap: 10px; margin: 14px 0; }
.methods li { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; border: 1px solid var(--d-line); border-radius: 10px; }
.methods__mark { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--c); color: #fff; font-size: 17px; font-weight: 700; }
.methods li > div:not(.menu) { flex: 1; min-width: 0; }
.methods strong { display: flex; align-items: center; gap: 6px; font-family: var(--font-bn); font-size: 14.5px; font-weight: 600; color: var(--d-ink); }
.methods p { margin-top: 2px; font-size: 12.5px; color: var(--d-muted); }
.tag { padding: 1px 7px; border-radius: 8px; background: #e6f5f0; color: #0a6e56; font-family: var(--font-bn); font-size: 11px; font-weight: 600; }
.methods__mark--sm { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }
.txn__sender, .txn__note { display: block; margin-top: 2px; font-size: 12px; color: var(--d-muted); }
.txn__note { font-family: var(--font-bn); color: #b4253d; }
.current-plan__expiry.is-soon { color: #b26b00; font-weight: 600; }
.plan--current .plan__btn--renew { border: 1px solid #cfe3da; background: #f2faf7; color: var(--green); }
.pay-badges { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.pay-badges li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--d-ink-2); }
.checkout-notice { margin: 16px 0 0; }
.checkout-notice a { font-weight: 600; text-decoration: underline; }

/* Checkout --------------------------------------------------------------- */
.step-no { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; vertical-align: 1px; }
.wallets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.wallet { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--d-line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wallet:hover { border-color: color-mix(in srgb, var(--c) 45%, #fff); }
.wallet:has(input:checked) { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent); }
.wallet:has(input:focus-visible) { outline: 2px solid var(--c); outline-offset: 2px; }
.wallet input { position: absolute; opacity: 0; pointer-events: none; }
.wallet__mark { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; background: var(--c); color: #fff; font-size: 19px; font-weight: 700; }
.wallet__name { display: grid; font-size: 15.5px; font-weight: 700; color: var(--d-ink); }
.wallet__name small { font-size: 12.5px; font-weight: 500; color: var(--d-muted); }
.wallet__check { margin-left: auto; font-size: 20px; color: var(--c); opacity: 0; transition: opacity .15s; }
.wallet:has(input:checked) .wallet__check { opacity: 1; }
.wallet.is-off { cursor: not-allowed; opacity: .5; }

.pay-steps { margin-top: 16px; }
.pay-to { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--c) 7%, #fff); border: 1px dashed color-mix(in srgb, var(--c) 40%, #fff); }
.pay-to__item { display: grid; gap: 2px; }
.pay-to__item span { font-family: var(--font-bn); font-size: 13px; color: var(--d-muted); }
.pay-to__item strong { font-size: 22px; font-weight: 700; letter-spacing: .3px; color: var(--d-ink); }
.pay-to__amount { margin-left: auto; text-align: right; }
.pay-to__amount strong { color: var(--c); }
.pay-steps__list { display: grid; gap: 9px; margin: 16px 0 0; padding-left: 22px; list-style: decimal; font-family: var(--font-bn); font-size: 14.5px; color: var(--d-ink-2); }
.pay-steps__list li::marker { color: var(--c); font-weight: 700; }
.pay-steps__list b { font-family: var(--font); color: var(--d-ink); }
.input--code { font-family: 'Inter', monospace; letter-spacing: .5px; text-transform: uppercase; }
.input--code::placeholder { text-transform: none; letter-spacing: 0; }

.order__plan { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.order__plan .current-plan__icon { width: 44px; height: 44px; border-radius: 12px; }
.order__plan strong { display: block; font-family: var(--font-bn); font-size: 17px; font-weight: 700; color: var(--d-ink); }
.order__plan span:not(.current-plan__icon) { font-family: var(--font-bn); font-size: 13px; color: var(--d-muted); }
.order__cycle { display: flex; margin-top: 16px; }
.order__cycle a { flex: 1; display: grid; place-items: center; height: 34px; border-radius: 8px; color: var(--d-muted); font-family: var(--font-bn); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.order__cycle a.is-active { background: #fff; color: var(--d-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(14, 27, 44, .12); }
.order__features { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--d-line-soft); }
.order__features li { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-bn); font-size: 13.5px; color: var(--d-ink-2); }
.order__features .icon { flex-shrink: 0; margin-top: 3px; color: var(--green); }
.order__total { display: grid; gap: 8px; margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--d-line-soft); }
.order__total div { display: flex; justify-content: space-between; font-family: var(--font-bn); font-size: 14px; color: var(--d-muted); }
.order__total dd { margin: 0; color: var(--d-ink-2); }
.order__sum dt { font-weight: 700; color: var(--d-ink); }
.order__sum dd { font-family: var(--font); font-size: 22px; font-weight: 700; color: var(--d-ink); }
.order__note { margin-top: 10px; font-family: var(--font-bn); font-size: 12.5px; line-height: 1.55; text-align: center; color: var(--d-muted); }

/* admin settings: wallet number + account type side by side */
.wallet-label { display: inline-flex; align-items: center; gap: 8px; }
.wallet-fields { display: grid; grid-template-columns: 1fr 108px; gap: 8px; }

/* Analytics -------------------------------------------------------------- */
.dash-split--even { grid-template-columns: 1fr 1fr; gap: 20px; }
.bars { display: grid; gap: 14px; margin-top: 16px; padding-bottom: 8px; }
.bars li { display: grid; grid-template-columns: 110px 1fr 56px; align-items: center; gap: 12px; }
.bars__label { font-family: var(--font-bn); font-size: 14px; color: var(--d-ink-2); }
.bars__track { display: block; height: 10px; overflow: hidden; border-radius: 5px; background: #eef2f5; }
.bars__fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #0e9f6e; transition: background-color .15s; }
.bars li:hover .bars__fill, .perf-table tr:hover .bars__fill { background: #0a7f58; }
.bars__value { font-size: 13.5px; font-weight: 600; text-align: right; color: var(--d-ink); }
.perf-table th:nth-child(1) { width: 40%; }
.perf-table th:nth-child(2) { width: 26%; }
.perf-table th:nth-child(3), .perf-table th:nth-child(4) { width: 10%; }
.inline-bar { display: flex; align-items: center; gap: 10px; }
.inline-bar__value { min-width: 40px; }
.inline-bar .bars__track { flex: 1; max-width: 140px; height: 8px; }

/* Support ---------------------------------------------------------------- */
.help-hero {
    position: relative;
    padding: 34px 32px 30px;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .14) 0 70px, transparent 71px),
        radial-gradient(circle at 6% 120%, rgba(255, 255, 255, .1) 0 110px, transparent 111px),
        linear-gradient(120deg, #046b52, #058a68 55%, #12a679);
    color: #fff;
    text-align: center;
}
.help-hero h1 { font-family: var(--font-bn); font-size: 26px; font-weight: 700; }
.help-hero p { margin-top: 6px; font-family: var(--font-bn); font-size: 15.5px; opacity: .9; }
.help-hero__search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    height: 50px;
    margin: 20px auto 0;
    padding: 0 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(4, 60, 46, .25);
    color: var(--d-ink);
}
.help-hero__search .icon { font-size: 18px; color: var(--d-muted); }
.help-hero__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--font-bn); font-size: 15.5px; }

.topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.topic { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--d-line); border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.topic:hover { border-color: #cfe3da; box-shadow: 0 10px 24px rgba(16, 40, 60, .07); transform: translateY(-2px); }
.topic__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.topic__icon .icon { font-size: 22px; }
.topic h3 { margin-top: 14px; font-family: var(--font-bn); font-size: 16px; font-weight: 700; color: var(--d-ink); }
.topic p { flex: 1; margin-top: 4px; font-family: var(--font-bn); font-size: 13.5px; color: var(--d-muted); }
.topic__count { display: flex; align-items: center; gap: 5px; margin-top: 12px; color: var(--green); font-family: var(--font-bn); font-size: 13.5px; font-weight: 600; }
.topic__count .icon { font-size: 15px; transition: transform .2s; }
.topic:hover .topic__count .icon { transform: translateX(3px); }

.faqs { margin-top: 8px; }
.faq { border-bottom: 1px solid var(--d-line-soft); }
.faq:last-child { border-bottom: 0; }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 2px;
    color: var(--d-ink);
    font-family: var(--font-bn);
    font-size: 15.5px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex-shrink: 0; font-size: 18px; color: var(--d-muted); transition: transform .2s, color .2s; }
.faq[open] summary .icon { color: var(--green); transform: rotate(180deg); }
.faq summary:hover { color: var(--green); }
.faq p { padding: 0 2px 16px; font-family: var(--font-bn); font-size: 14.5px; line-height: 1.7; color: var(--d-muted); }

.contacts { display: grid; gap: 14px; margin: 14px 0 16px; }
.contacts li { display: flex; align-items: center; gap: 12px; }
.contacts__icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; }
.contacts__icon .icon { font-size: 19px; }
.contacts strong { display: flex; align-items: center; gap: 8px; font-family: var(--font-bn); font-size: 14.5px; font-weight: 600; color: var(--d-ink); }
.contacts p { margin-top: 1px; font-family: var(--font-bn); font-size: 13px; color: var(--d-muted); }
.status-dot { display: inline-flex; align-items: center; gap: 5px; color: #0e9f6e; font-size: 11.5px; font-weight: 600; }
.status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #16b37a; }

.tickets { display: grid; gap: 10px; margin-top: 12px; }
.tickets li { padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; }
.tickets__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tickets .pill { height: 22px; padding: 0 9px; font-size: 12px; }
.tickets strong { display: block; margin-top: 8px; font-family: var(--font-bn); font-size: 14.5px; font-weight: 600; color: var(--d-ink); }
.tickets p { margin-top: 2px; font-family: var(--font-bn); font-size: 12.5px; color: var(--d-muted); }

/* Toasts ----------------------------------------------------------------- */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 380px;
    padding: 12px 16px 12px 14px;
    border-radius: 10px;
    background: var(--d-ink);
    box-shadow: 0 12px 30px rgba(14, 27, 44, .25);
    color: #fff;
    font-family: var(--font-bn);
    font-size: 14.5px;
    animation: toast-in .25s ease;
    transition: opacity .3s, transform .3s;
}
.toast::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #4fd1a5; }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1320px) {
    .page-grid { grid-template-columns: minmax(0, 1fr) 300px; }
    .current-plan { grid-template-columns: 1fr auto; }
    .usage { grid-column: 1 / -1; grid-row: 2; padding: 16px 0 0; border: 0; border-top: 1px solid var(--d-line-soft); }
}

@media (max-width: 1100px) {
    .page-grid { grid-template-columns: 1fr; }
    .checkout .page-grid__side { order: 2; }
    .mini-stats { grid-template-columns: repeat(2, 1fr); }
    .topics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .chat { grid-template-columns: 1fr; height: calc(100vh - 70px - 130px); }
    .chat__main { display: none; }
    .chat--thread .chat__list { display: none; }
    .chat--thread .chat__main { display: flex; }
    .thread__back { display: grid; }
    .plans { grid-template-columns: 1fr; }
    .dash-split--even { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .page-head h1 { font-size: 21px; }
    .page-head p { font-size: 14.5px; }
    .list-tools { width: 100%; }
    .field-search { flex: 1; width: auto; min-width: 160px; }
    .form-grid, .form-grid--3 { grid-template-columns: 1fr; }
    .form-actions--split { flex-direction: column-reverse; }
    .profile-hero__stats { width: 100%; }
    .profile-hero__stats div { flex: 1; padding: 0 8px; }
    .current-plan { grid-template-columns: 1fr; }
    .usage { grid-template-columns: 1fr; }
    .help-hero { padding: 26px 18px; }
    .help-hero h1 { font-size: 22px; }
    .bars li { grid-template-columns: 88px 1fr 48px; }
    .thread__ad-link { display: none; }
    .bubble { max-width: 85%; }
    .toasts { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
}

@media (max-width: 480px) {
    .mini-stats { gap: 10px; }
    .mini-stat { padding: 12px; gap: 10px; }
    .topics { grid-template-columns: 1fr; }
    .saved-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .saved-card__cta { font-size: 12.5px; }
}

@media (max-width: 720px) {
    .wallets { grid-template-columns: 1fr; }
    .checkout .form-grid { grid-template-columns: 1fr; }
    .pay-to__amount { margin-left: 0; text-align: left; }
}