/* Music-bot pages translated into Creative Tim Material Dashboard 3's visual language.
   The template's routes, forms and interaction scripts remain application-owned. */
body.material-app {
    --md-heading: #344767;
    --md-muted: #7b809a;
    --md-line: #e9ecef;
    --md-dark-bar: linear-gradient(195deg, #42424a, #191919);
    --md-dark-shadow: 0 4px 6px rgba(0, 0, 0, .17);
    --md-card-shadow: 0 4px 6px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
    --md-green: #43a047;
    --md-accent: var(--material-accent);
}
body.material-app[data-theme='dark'] {
    --md-heading: #f5f5f5;
    --md-muted: #a0a4b0;
    --md-line: #393d46;
    --md-dark-bar: linear-gradient(195deg, #323a54, #1a2035);
    --md-dark-shadow: 0 4px 8px rgba(0, 0, 0, .22);
    --md-card-shadow: 0 4px 7px rgba(0, 0, 0, .19);
}

/* Bots and announcements use the same card and table rhythm as
   Material Dashboard's Tables and Notifications pages. */
body.material-app .feature-page {
    --feature-surface: var(--surface);
    --feature-border: var(--surface-border);
    --feature-ink: var(--md-heading);
    --feature-muted: var(--md-muted);
    --feature-hover: #fafafa;
    --feature-soft: #fafafa;
    --feature-shadow: var(--md-card-shadow);
    width: 100%; max-width: none; margin: 0;
    font: inherit; color: var(--md-heading);
}
body.material-app[data-theme='dark'] .feature-page {
    --feature-hover: #2d3039;
    --feature-soft: #292c35;
}
body.material-app .feature-head { align-items: center; margin: 2px 16px 22px; }
body.material-app .feature-eyebrow { display: none; }
body.material-app .feature-head h1 {
    margin: 0; color: var(--text-main); font: 700 24px/1.25 'Poppins', Helvetica, Arial, sans-serif;
    letter-spacing: -.025em;
}
body.material-app .feature-subtitle { margin: 3px 0 0; color: var(--md-muted); font-size: 14px; line-height: 1.45; }
body.material-app .feature-metrics { gap: 24px; margin: 26px 4px 28px; }
body.material-app .feature-metric {
    position: relative; display: block; min-height: 110px; padding: 17px 18px;
    border: 1px solid var(--surface-border); border-radius: 8px;
    background: var(--surface); box-shadow: var(--md-card-shadow);
}
body.material-app .feature-metric-icon {
    position: absolute; top: -12px; right: 17px; display: grid; place-items: center;
    width: 48px; height: 48px; border: 0; border-radius: 8px;
    background: var(--md-dark-bar); box-shadow: var(--md-dark-shadow);
    color: #fff; font-size: 17px;
}
body.material-app .feature-metric-icon.feature-icon-online { background: linear-gradient(195deg, #66bb6a, #43a047); color: #fff; }
body.material-app .feature-metric-icon.feature-icon-offline { background: linear-gradient(195deg, #757575, #42424a); color: #fff; }
body.material-app .feature-metric p { margin: 0 56px 0 0; color: var(--md-muted); font-size: 14px; font-weight: 400; }
body.material-app .feature-metric strong {
    display: block; margin: 1px 56px 0 0; color: var(--md-heading);
    font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em;
}
body.material-app .feature-card {
    overflow: visible; margin: 16px 4px 0; border: 1px solid var(--surface-border);
    border-radius: 8px; background: var(--surface); box-shadow: var(--md-card-shadow);
}
body.material-app .feature-card-head {
    align-items: center; min-height: 74px; margin: -16px 16px 0; padding: 16px 20px;
    border: 0; border-radius: 8px; background: var(--md-dark-bar);
    box-shadow: var(--md-dark-shadow);
}
body.material-app .feature-card-head h2 { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0; }
body.material-app .feature-card-caption { color: #dedee2; font-size: 13px; }
body.material-app .feature-controls { gap: 8px; }
body.material-app .feature-search,
body.material-app .feature-select-label select {
    min-height: 36px; border: 1px solid #c9ccd4; border-radius: 6px;
    background: #fff; color: #344767; font: 400 12px/1.35 'Poppins', sans-serif;
}
body.material-app .feature-search { padding: 0 10px; }
body.material-app .feature-search input { color: #344767; font-size: 12px; }
body.material-app .feature-search input::placeholder { color: #7b809a; }
body.material-app .feature-select-label select { padding: 6px 28px 6px 9px; }
body.material-app .feature-search:focus-within { border-color: var(--material-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--material-accent) 12%, transparent); }
body.material-app .feature-table-wrap { padding-top: 14px; }
body.material-app .feature-table th {
    padding: 13px 16px; border-bottom: 1px solid var(--md-line); background: var(--surface);
    color: #8b8f9b; font: 700 11px/1.3 'Poppins', sans-serif; letter-spacing: .035em;
}
body.material-app .feature-table td { padding: 13px 16px; border-top: 1px solid var(--md-line); color: var(--md-heading); font-size: 13px; }
body.material-app .feature-table tbody tr:hover { background: var(--feature-hover); }
body.material-app .feature-bot-avatar {
    width: 35px; height: 35px; border: 0; border-radius: 8px;
    background: #e8f5e9; color: #43a047;
}
body.material-app .feature-bot-name strong { color: var(--md-heading); font-size: 13px; font-weight: 600; }
body.material-app .feature-bot-name small,
body.material-app .feature-mono { color: var(--md-muted); font: 400 11px/1.35 'Poppins', sans-serif; }
body.material-app .feature-status {
    min-height: 22px; padding: 3px 8px; border: 0; border-radius: 6px;
    color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase;
}
body.material-app .feature-status.is-online { background: linear-gradient(195deg, #66bb6a, #43a047); color: #fff; }
body.material-app .feature-status.is-offline { background: linear-gradient(195deg, #757575, #42424a); color: #fff; }
body.material-app .feature-status-dot { display: none; }
body.material-app .feature-row-action,
body.material-app .feature-text-link { color: var(--md-accent); font-size: 12px; font-weight: 600; }
body.material-app .feature-table-footer { padding: 14px 22px; border-top: 1px solid var(--md-line); color: var(--md-muted); font-size: 12px; }
body.material-app .feature-live-dot { background: var(--md-green); box-shadow: none; }
body.material-app .feature-filter-empty,
body.material-app .feature-empty { color: var(--md-muted); }
body.material-app .feature-empty-icon { border-radius: 8px; background: #e8f5e9; color: #43a047; }
body.material-app .feature-empty h2,
body.material-app .feature-empty h3 { color: var(--md-heading); font-size: 16px; font-weight: 600; }
body.material-app .feature-button,
body.material-app .feature-category-link,
body.material-app .feature-page-link {
    min-height: 36px; padding: 7px 13px; border-radius: 6px;
    font: 600 12px/1.25 'Poppins', sans-serif;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.material-app .feature-button-primary,
body.material-app .feature-category-link.is-active {
    border-color: #191919; background: var(--md-dark-bar);
    box-shadow: var(--md-dark-shadow); color: #fff;
}
body.material-app .feature-button-primary:hover { color: #fff; transform: translateY(-2px); }
body.material-app .feature-button-secondary,
body.material-app .feature-page-link,
body.material-app .feature-category-link {
    border-color: #d2d5dd; background: var(--surface); color: var(--md-heading);
}
body.material-app .feature-button-secondary:hover,
body.material-app .feature-page-link:hover,
body.material-app .feature-category-link:hover { color: var(--md-accent); background: var(--feature-hover); }
body.material-app .feature-category-link.is-active { color: #fff; }

body.material-app .feature-category-nav { gap: 8px; margin: 0 16px 18px; }
body.material-app .feature-news-list { gap: 18px; margin-inline: 4px; }
body.material-app .feature-news-card {
    margin: 0; padding: 22px 24px; border: 1px solid var(--surface-border);
    border-radius: 8px; background: var(--surface); box-shadow: var(--md-card-shadow);
}
body.material-app .feature-news-kind { color: var(--md-green); font: 700 11px 'Poppins', sans-serif; }
body.material-app .feature-news-card[data-kind='maintenance'] .feature-news-kind { color: #fb8c00; }
body.material-app .feature-news-card-top time,
body.material-app .feature-news-author { color: var(--md-muted); font: 400 11px 'Poppins', sans-serif; }
body.material-app .feature-news-card h2 { color: var(--md-heading); font-size: 17px; font-weight: 600; letter-spacing: 0; }
body.material-app .feature-news-body { color: var(--md-muted); font-size: 13px; line-height: 1.65; }
body.material-app .feature-pagination { margin: 18px 4px; color: var(--md-muted); font: 400 12px 'Poppins', sans-serif; }

body.material-app[data-theme='dark'] .feature-metric,
body.material-app[data-theme='dark'] .feature-card,
body.material-app[data-theme='dark'] .feature-news-card { border-color: #393d46; background: var(--surface); }
body.material-app[data-theme='dark'] .feature-card-head { color: #fff; }
body.material-app[data-theme='dark'] .feature-search,
body.material-app[data-theme='dark'] .feature-select-label select { border-color: #4a4e58; background: #252831; color: #f5f5f5; }
body.material-app[data-theme='dark'] .feature-search input { color: #f5f5f5; }
body.material-app[data-theme='dark'] .feature-bot-avatar,
body.material-app[data-theme='dark'] .feature-empty-icon { background: #263d2b; color: #8bd990; }
body.material-app[data-theme='dark'] .feature-table th { background: var(--surface); color: #a0a4b0; }
body.material-app[data-theme='dark'] .feature-button-secondary,
body.material-app[data-theme='dark'] .feature-page-link,
body.material-app[data-theme='dark'] .feature-category-link { border-color: #4a4e58; background: var(--surface); color: #e3e5e9; }
body.material-app[data-theme='dark'] .feature-category-link.is-active { color: #fff; background: var(--md-dark-bar); }

@media (max-width: 1100px) {
    body.material-app .feature-metrics { gap: 14px; }
    body.material-app .feature-card-head { flex-wrap: wrap; }
    body.material-app .feature-controls { width: 100%; margin-left: 0; }
}
@media (max-width: 780px) {
    body.material-app .feature-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.material-app .feature-head { margin-inline: 4px; }
}
@media (max-width: 610px) {
    body.material-app .feature-metrics { gap: 12px; margin-top: 28px; }
    body.material-app .feature-metric { min-height: 98px; padding: 14px 12px; }
    body.material-app .feature-metric-icon { width: 38px; height: 38px; top: -8px; right: 10px; font-size: 14px; }
    body.material-app .feature-metric p { margin-right: 35px; font-size: 12px; }
    body.material-app .feature-metric strong { margin-right: 35px; font-size: 22px; }
    body.material-app .feature-card-head { margin-inline: 8px; padding: 14px 16px; }
    body.material-app .feature-table tbody tr { border-radius: 6px; background: var(--feature-soft); }
    body.material-app .feature-table td { padding: 0; border: 0; }
    body.material-app .feature-news-card { padding: 18px; }
}

/* Account, support and administration pages use the Material table/card system. */
body.material-app .secondary-page {
    --secondary-line: var(--surface-border);
    --secondary-soft: #fafafa;
    --secondary-ink: var(--md-heading);
    --secondary-muted: var(--md-muted);
    --secondary-accent: var(--md-accent);
    --secondary-accent-soft: #fcf1ec;
    font: inherit; color: var(--md-heading);
}
body.material-app[data-theme='dark'] .secondary-page {
    --secondary-soft: #292c35;
    --secondary-accent-soft: #42332f;
}
body.material-app .secondary-page .secondary-page-head {
    align-items: center; margin: 2px 16px 22px; min-height: 48px;
}
body.material-app .secondary-page .secondary-eyebrow,
body.material-app .secondary-page .news-admin-eyebrow { display: none !important; }
body.material-app .secondary-page .secondary-page-title,
body.material-app .secondary-page .news-admin-title {
    color: var(--text-main) !important; font: 700 24px/1.25 'Poppins', Helvetica, Arial, sans-serif !important;
    letter-spacing: -.025em !important;
}
body.material-app .secondary-page .secondary-page-description,
body.material-app .secondary-page .news-admin-subtitle {
    margin: 3px 0 0 !important; color: var(--md-muted) !important;
    font-size: 14px !important; line-height: 1.45 !important;
}
body.material-app .secondary-page .panel,
body.material-app .secondary-page .news-admin-card {
    overflow: visible; border: 1px solid var(--surface-border); border-radius: 8px;
    background: var(--surface); box-shadow: var(--md-card-shadow);
}
body.material-app .secondary-page .panel-soft,
body.material-app .secondary-page .secondary-ticket,
body.material-app .secondary-page .news-admin-item {
    border: 1px solid var(--md-line); border-radius: 7px;
    background: var(--secondary-soft); box-shadow: none;
}
body.material-app .secondary-page .secondary-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 68px; margin: -31px 0 20px; padding: 14px 18px;
    border: 0; border-radius: 8px; background: var(--md-dark-bar);
    box-shadow: var(--md-dark-shadow);
}
body.material-app .secondary-page .secondary-card-head .secondary-card-icon {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 0; border-radius: 6px; background: rgba(255,255,255,.13); color: #fff;
}
body.material-app .secondary-page .secondary-card-head .secondary-card-title,
body.material-app .secondary-page .secondary-card-head h2 {
    color: #fff !important; font-size: 16px; font-weight: 600; letter-spacing: 0;
}
body.material-app .secondary-page .secondary-card-head .secondary-card-description {
    color: #d5d5dc !important; font-size: 12px; line-height: 1.35;
}
body.material-app .secondary-page .secondary-card-head .badge-tech {
    border: 1px solid rgba(255,255,255,.26); border-radius: 6px;
    background: rgba(255,255,255,.13); color: #fff; font-size: 11px;
}
body.material-app .secondary-page .secondary-metric {
    position: relative; min-height: 110px; padding: 17px 18px !important;
    border-radius: 8px; box-shadow: var(--md-card-shadow);
}
body.material-app .secondary-page .secondary-metric > p:first-child,
body.material-app .secondary-page .secondary-metric .kpi-label {
    margin: 0 55px 0 0; color: var(--md-muted) !important;
    font: 400 14px/1.45 'Poppins', sans-serif !important; letter-spacing: 0;
    text-transform: none;
}
body.material-app .secondary-page .secondary-metric > p:nth-of-type(2),
body.material-app .secondary-page .secondary-metric .kpi-value {
    display: block; margin: 1px 55px 0 0; color: var(--md-heading) !important;
    font: 700 24px/1.4 'Poppins', sans-serif !important; letter-spacing: -.02em;
}
body.material-app .secondary-page .secondary-metric.is-email > p:nth-of-type(2) {
    font-size: 13px !important; line-height: 1.5 !important; overflow-wrap: anywhere;
}
body.material-app .secondary-page .secondary-metric .secondary-metric-icon {
    position: absolute; top: -12px; right: 17px; display: grid; place-items: center;
    width: 48px; height: 48px; border: 0; border-radius: 8px;
    background: var(--md-dark-bar); box-shadow: var(--md-dark-shadow);
    color: #fff; opacity: 1; font-size: 17px;
}
body.material-app .secondary-page .secondary-metric > p:last-child:not(:nth-of-type(2)) {
    color: var(--md-muted) !important; font-size: 11px;
}
body.material-app .secondary-page .secondary-table { border-collapse: collapse; }
body.material-app .secondary-page .secondary-table th {
    padding: 13px 16px; border-bottom: 1px solid var(--md-line);
    background: var(--surface); color: #8b8f9b; font: 700 11px 'Poppins', sans-serif;
    letter-spacing: .035em; text-transform: uppercase;
}
body.material-app .secondary-page .secondary-table td {
    padding: 13px 16px; border-bottom: 1px solid var(--md-line);
    color: var(--md-heading); font-size: 13px;
}
body.material-app .secondary-page .secondary-table tbody tr:hover td { background: var(--secondary-soft); }
body.material-app .secondary-page .badge-tech,
body.material-app .secondary-page .news-admin-pill {
    border: 0; border-radius: 6px; font: 700 10px/1.3 'Poppins', sans-serif;
    letter-spacing: .01em; text-transform: uppercase;
}
body.material-app .secondary-page .badge-online,
body.material-app .secondary-page .news-admin-pill:not(.is-draft) {
    background: linear-gradient(195deg, #66bb6a, #43a047); color: #fff;
}
body.material-app .secondary-page .badge-offline,
body.material-app .secondary-page .news-admin-pill.is-draft {
    background: linear-gradient(195deg, #757575, #42424a); color: #fff;
}
body.material-app .secondary-page .input-dark,
body.material-app .secondary-page .news-admin-input {
    width: 100%; min-height: 40px; padding: 9px 12px;
    border: 1px solid #d2d5dd; border-radius: 6px;
    background: var(--surface); color: var(--md-heading);
    font: 400 13px/1.4 'Poppins', sans-serif;
}
body.material-app .secondary-page :is(.input-dark, .news-admin-input):focus {
    border-color: var(--material-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--material-accent) 13%, transparent);
}
body.material-app .secondary-page .magic-btn,
body.material-app .secondary-page .news-admin-submit {
    min-height: 36px; padding: 7px 14px; border: 0; border-radius: 6px;
    background: var(--md-dark-bar); box-shadow: var(--md-dark-shadow);
    color: #fff !important; font: 700 12px/1.3 'Poppins', sans-serif;
    transition: transform .2s ease, box-shadow .2s ease;
}
body.material-app .secondary-page :is(.magic-btn, .news-admin-submit):hover {
    background: var(--md-dark-bar); color: #fff !important;
    transform: translateY(-2px); box-shadow: 0 7px 12px rgba(0,0,0,.2);
}
body.material-app .secondary-page .outline-btn,
body.material-app .secondary-page .news-admin-ghost,
body.material-app .secondary-page .news-admin-back {
    min-height: 36px; padding: 7px 13px; border: 1px solid #d2d5dd;
    border-radius: 6px; background: var(--surface); color: var(--md-heading);
    font: 600 12px/1.3 'Poppins', sans-serif; box-shadow: none;
}
body.material-app .secondary-page :is(.outline-btn, .news-admin-ghost, .news-admin-back):hover {
    border-color: var(--material-accent); background: var(--surface);
    color: var(--material-accent); transform: translateY(-1px);
}
body.material-app .secondary-page .secondary-ticket:hover { border-color: #c7cbd2; box-shadow: 0 3px 10px rgba(0,0,0,.06); }
body.material-app .secondary-page .secondary-message { border: 1px solid var(--md-line) !important; border-radius: 6px; background: var(--secondary-soft) !important; }
body.material-app .secondary-page .secondary-message.is-admin { border-color: #b6ddb8 !important; background: #f1f8f1 !important; }
body.material-app .secondary-page .secondary-theme-choice > div {
    min-height: 84px; border: 1px solid var(--md-line) !important;
    border-radius: 7px; background: var(--surface) !important;
    box-shadow: none;
}
body.material-app .secondary-page .secondary-theme-choice input:checked + div,
body.material-app .secondary-page .secondary-theme-choice input:focus-visible + div {
    border-color: var(--material-accent) !important; background: #fcf1ec !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--material-accent) 12%, transparent);
}
body.material-app .secondary-page .secondary-admin-link {
    border-color: var(--md-line) !important; border-radius: 8px;
    background: var(--surface) !important; box-shadow: var(--md-card-shadow);
}
body.material-app .secondary-page .secondary-admin-link:hover { border-color: var(--material-accent) !important; background: var(--surface) !important; }

/* Admin announcements have an inline stylesheet; these higher-specificity rules
   keep them aligned with the Tables-page raised headers. */
body.material-app .secondary-page.news-admin-page .news-admin-header { align-items: center; margin: 2px 16px 22px !important; }
body.material-app .secondary-page.news-admin-page .news-admin-layout { gap: 24px; margin: 28px 4px 0 !important; }
body.material-app .secondary-page.news-admin-page .news-admin-card-head {
    min-height: 72px; margin: -16px 16px 0; padding: 15px 18px !important;
    border: 0; border-radius: 8px; background: var(--md-dark-bar);
    box-shadow: var(--md-dark-shadow);
}
body.material-app .secondary-page.news-admin-page .news-admin-card-head h2 {
    color: #fff !important; font-size: 16px !important; font-weight: 600 !important;
}
body.material-app .secondary-page.news-admin-page .news-admin-card-head p { color: #d5d5dc !important; font-size: 12px; }
body.material-app .secondary-page.news-admin-page .news-admin-card-head > i { color: #fff !important; }
body.material-app .secondary-page.news-admin-page .news-admin-card-body { padding: 22px 24px !important; }
body.material-app .secondary-page.news-admin-page .news-admin-field > span { color: var(--md-heading) !important; font-size: 12px; }
body.material-app .secondary-page.news-admin-page .news-admin-hint { color: var(--md-muted); font-size: 11px; }
body.material-app .secondary-page.news-admin-page .news-admin-list {
    gap: 0 !important; padding: 12px 0 0 !important;
    border-radius: 0 0 14px 14px; overflow: hidden;
}
body.material-app .secondary-page.news-admin-page .news-admin-item {
    padding: 16px 24px !important; border: 0 !important;
    border-bottom: 1px solid var(--md-line) !important;
    border-radius: 0 !important; background: var(--surface) !important;
}
body.material-app .secondary-page.news-admin-page .news-admin-item:last-child { border-bottom: 0 !important; }
body.material-app .secondary-page.news-admin-page .news-admin-item h3 { color: var(--md-heading) !important; font-size: 13px; font-weight: 600; }
body.material-app .secondary-page.news-admin-page .news-admin-item p,
body.material-app .secondary-page.news-admin-page .news-admin-item-meta { color: var(--md-muted) !important; font-size: 12px; }
body.material-app .secondary-page.news-admin-page .news-admin-pill { padding: 4px 8px; }

body.material-app[data-theme='dark'] .secondary-page .panel,
body.material-app[data-theme='dark'] .secondary-page .news-admin-card { border-color: #393d46; background: var(--surface); }
body.material-app[data-theme='dark'] .secondary-page .panel-soft,
body.material-app[data-theme='dark'] .secondary-page .news-admin-item { border-color: #393d46; background: var(--secondary-soft); }
body.material-app[data-theme='dark'] .secondary-page .secondary-table th { background: var(--surface); color: #a0a4b0; }
body.material-app[data-theme='dark'] .secondary-page .input-dark,
body.material-app[data-theme='dark'] .secondary-page .news-admin-input { border-color: #4a4e58; background: #252831; color: #f5f5f5; }
body.material-app[data-theme='dark'] .secondary-page .outline-btn,
body.material-app[data-theme='dark'] .secondary-page .news-admin-ghost,
body.material-app[data-theme='dark'] .secondary-page .news-admin-back { border-color: #4a4e58; background: var(--surface); color: #e5e6eb; }
body.material-app[data-theme='dark'] .secondary-page .secondary-message.is-admin { border-color: #45694a !important; background: #2c4230 !important; }
body.material-app[data-theme='dark'] .secondary-page .secondary-theme-choice > div { border-color: #4a4e58 !important; background: var(--surface) !important; }
body.material-app[data-theme='dark'] .secondary-page .secondary-theme-choice input:checked + div { border-color: var(--material-accent) !important; background: #42332f !important; }
body.material-app[data-theme='dark'] .secondary-page.news-admin-page .news-admin-item { background: var(--surface) !important; }
body.material-app[data-theme='dark'] .secondary-page.news-admin-page .news-admin-field > span { color: #f5f5f5 !important; }

@media (max-width: 780px) {
    body.material-app .secondary-page .secondary-page-head,
    body.material-app .secondary-page.news-admin-page .news-admin-header { margin-inline: 4px !important; }
}
@media (max-width: 610px) {
    body.material-app .secondary-page > section:has(> .secondary-metric) {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    }
    body.material-app .secondary-page .secondary-metric { min-height: 98px; padding: 14px 12px !important; }
    body.material-app .secondary-page .secondary-metric .secondary-metric-icon { top: -8px; right: 9px; width: 38px; height: 38px; font-size: 14px; }
    body.material-app .secondary-page .secondary-metric > p:first-child { margin-right: 35px; font-size: 12px !important; }
    body.material-app .secondary-page .secondary-metric > p:nth-of-type(2) { margin-right: 35px; font-size: 20px !important; }
    body.material-app .secondary-page .secondary-card-head { margin-top: -25px; padding: 12px 14px; }
    body.material-app .secondary-page.news-admin-page .news-admin-card-head { margin-inline: 8px; padding: 12px 14px !important; }
    body.material-app .secondary-page.news-admin-page .news-admin-card-body,
    body.material-app .secondary-page.news-admin-page .news-admin-item { padding-inline: 16px !important; }
}

/* Bot creation and management keep their existing PHP/JS workflow. */
body.material-app .create-page,
body.material-app .manage-page { color: var(--md-heading); font: inherit; }
body.material-app .create-page h1,
body.material-app .manage-page h1,
body.material-app .manage-page h2,
body.material-app .manage-page strong { color: var(--md-heading); }
body.material-app .create-page p,
body.material-app .manage-page p { color: var(--md-muted); }
body.material-app .app-content.create-page .create-header,
body.material-app .app-content.manage-page .manage-hero {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; margin: 2px 16px 22px; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body.material-app .create-eyebrow,
body.material-app .manage-eyebrow { display: none; }
body.material-app .create-header h1,
body.material-app .manage-hero h1 {
    margin: 0; color: var(--text-main); font: 700 24px/1.25 'Poppins', sans-serif;
    letter-spacing: -.025em;
}
body.material-app .create-description,
body.material-app .manage-hero-description { margin: 3px 0 0; color: var(--md-muted); font-size: 14px; }
body.material-app .create-header-icon {
    width: 44px; height: 44px; border: 0; border-radius: 8px;
    background: var(--md-dark-bar); box-shadow: var(--md-dark-shadow); color: #fff;
}
body.material-app .app-content.create-page .create-card {
    width: min(100%, 980px); max-width: none; overflow: visible;
    margin: 28px 4px 0; padding: 0;
    border: 1px solid var(--surface-border); border-radius: 8px;
    background: var(--surface); box-shadow: var(--md-card-shadow);
}
body.material-app .create-steps {
    min-height: 72px; margin: -16px 16px 0; padding: 16px 20px;
    border: 0; border-radius: 8px; background: var(--md-dark-bar);
    box-shadow: var(--md-dark-shadow); color: #fff;
}
body.material-app .create-step { color: #d4d4d9; font-size: 13px; font-weight: 600; }
body.material-app .create-step.is-active { color: #fff; }
body.material-app .create-step.is-complete { color: #b8e8bb; }
body.material-app .create-step-badge {
    width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.35);
    border-radius: 7px; background: rgba(255,255,255,.12); color: #fff;
    font: 700 12px 'Poppins', sans-serif;
}
body.material-app .create-step.is-active .create-step-badge {
    border-color: #fff; background: #fff; color: #262626;
}
body.material-app .create-step.is-complete .create-step-badge {
    border-color: #66bb6a; background: #43a047; color: #fff;
}
body.material-app .create-step-divider { background: rgba(255,255,255,.36); }
body.material-app .create-card form { padding: 24px; }
body.material-app .create-page label > span,
body.material-app .manage-field > span {
    margin-bottom: 7px; color: var(--md-heading); font: 600 12px/1.35 'Poppins', sans-serif;
}
body.material-app .create-page label > input,
body.material-app .manage-field input,
body.material-app .manage-field select {
    min-height: 42px; padding: 9px 12px;
    border: 1px solid #d2d5dd; border-radius: 6px;
    background: var(--surface); color: var(--md-heading);
    font: 400 13px/1.4 'Poppins', sans-serif;
}
body.material-app .create-page label > input:focus,
body.material-app .manage-field input:focus,
body.material-app .manage-field select:focus {
    border-color: var(--material-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--material-accent) 12%, transparent);
}
body.material-app .create-helper { color: var(--md-muted); font-size: 12px; }
body.material-app .create-actions { gap: 9px; margin-top: 10px; padding-top: 20px; border-color: var(--md-line); }
body.material-app .create-actions button,
body.material-app .create-actions a,
body.material-app .manage-primary,
body.material-app .manage-secondary,
body.material-app .manage-danger {
    min-height: 38px; padding: 8px 14px; border-radius: 6px;
    font: 700 12px/1.25 'Poppins', sans-serif;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.material-app .create-primary,
body.material-app .manage-primary {
    border: 0; background: var(--md-dark-bar); box-shadow: var(--md-dark-shadow); color: #fff;
}
body.material-app .create-primary:hover,
body.material-app .manage-primary:hover:not(:disabled) {
    background: var(--md-dark-bar); color: #fff;
    transform: translateY(-2px); box-shadow: 0 7px 12px rgba(0,0,0,.2);
}
body.material-app .create-secondary,
body.material-app .manage-secondary {
    border: 1px solid #d2d5dd; background: var(--surface);
    color: var(--md-heading); box-shadow: none;
}
body.material-app .create-secondary:hover,
body.material-app .manage-secondary:hover:not(:disabled) {
    border-color: var(--material-accent); background: var(--surface); color: var(--material-accent);
}
body.material-app .manage-danger {
    border: 1px solid #f1b7bb; background: #fff3f4; color: #ea5959;
}
body.material-app .manage-danger:hover { background: #ffe5e8; }
body.material-app .manage-hero-row { align-items: center; }
body.material-app .manage-live-pill {
    min-height: 24px; padding: 4px 8px; border: 0; border-radius: 6px;
    background: linear-gradient(195deg, #757575, #42424a); color: #fff;
    font: 700 10px/1.25 'Poppins', sans-serif; text-transform: uppercase;
}
body.material-app .manage-live-pill.is-online { background: linear-gradient(195deg, #66bb6a, #43a047); color: #fff; }
body.material-app .manage-live-pill .status-dot { display: none; }
body.material-app .app-content.manage-page .manage-nav {
    display: flex; align-items: stretch; gap: 6px; overflow-x: auto;
    margin: 0 4px 26px; padding: 6px; border: 0; border-radius: 8px;
    background: #e9ecef; box-shadow: none;
}
body.material-app .manage-nav a {
    min-height: 40px; padding: 9px 14px; border: 0; border-radius: 6px;
    color: #555963; font: 600 12px/1.3 'Poppins', sans-serif;
}
body.material-app .manage-nav a:hover { color: #262626; background: rgba(255,255,255,.55); }
body.material-app .manage-nav a[aria-current='page'] {
    border: 0; background: var(--surface); color: var(--text-main);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
body.material-app .manage-nav a[aria-current='page'] i { color: var(--md-accent); }
body.material-app .manage-content-heading { margin: 0 16px 18px; }
body.material-app .manage-content-heading h2 { color: var(--text-main); font-size: 18px; font-weight: 600; }
body.material-app .manage-content-heading p { color: var(--md-muted); font-size: 13px; }
body.material-app .manage-grid { gap: 24px; margin: 0 4px; }
body.material-app .manage-card,
body.material-app .manage-jump {
    border: 1px solid var(--surface-border); border-radius: 8px;
    background: var(--surface); box-shadow: var(--md-card-shadow);
}
body.material-app .manage-card { padding: 22px 24px; }
body.material-app .manage-card h2 { color: var(--md-heading); font-size: 16px; font-weight: 600; letter-spacing: 0; }
body.material-app .manage-card p:not(.manage-eyebrow):not(.manage-number):not(.manage-server) { color: var(--md-muted); font-size: 13px; }
body.material-app .manage-number { color: var(--md-heading) !important; font: 700 24px/1.35 'Poppins', sans-serif; letter-spacing: -.02em; }
body.material-app .manage-server { color: var(--md-heading) !important; font-size: 15px; font-weight: 600; }
body.material-app .manage-now-playing,
body.material-app .manage-station,
body.material-app .manage-empty {
    border-color: var(--md-line); border-radius: 7px;
    background: #fafafa; color: var(--md-heading);
}
body.material-app .manage-jump { padding: 16px; }
body.material-app .manage-jump-icon {
    border: 0; border-radius: 8px; background: var(--md-dark-bar);
    box-shadow: var(--md-dark-shadow); color: #fff;
}
body.material-app .manage-jump strong,
body.material-app .manage-station-copy strong { color: var(--md-heading); font-size: 13px; font-weight: 600; }
body.material-app .manage-jump small,
body.material-app .manage-station-copy small { color: var(--md-muted); font-size: 12px; }
body.material-app .manage-text-link { color: var(--md-accent); font-size: 12px; font-weight: 600; }
body.material-app .manage-check input { accent-color: var(--material-accent); }
body.material-app .manage-icon-button { border-radius: 6px; }

body.material-app[data-theme='dark'] .app-content.create-page .create-card,
body.material-app[data-theme='dark'] .manage-card,
body.material-app[data-theme='dark'] .manage-jump { border-color: #393d46; background: var(--surface); }
body.material-app[data-theme='dark'] .create-page label > input,
body.material-app[data-theme='dark'] .manage-field input,
body.material-app[data-theme='dark'] .manage-field select { border-color: #4a4e58; background: #252831; color: #f5f5f5; }
body.material-app[data-theme='dark'] .create-secondary,
body.material-app[data-theme='dark'] .manage-secondary { border-color: #4a4e58; background: var(--surface); color: #e3e5e9; }
body.material-app[data-theme='dark'] .manage-danger { border-color: #8b454d; background: #40282d; color: #ffadb4; }
body.material-app[data-theme='dark'] .app-content.manage-page .manage-nav { background: #2c303a; }
body.material-app[data-theme='dark'] .manage-nav a { color: #c0c4cc; }
body.material-app[data-theme='dark'] .manage-nav a:hover { background: #383c47; color: #fff; }
body.material-app[data-theme='dark'] .manage-nav a[aria-current='page'] { background: #454955; color: #fff; }
body.material-app[data-theme='dark'] .manage-now-playing,
body.material-app[data-theme='dark'] .manage-station,
body.material-app[data-theme='dark'] .manage-empty { border-color: #393d46; background: #292c35; color: #f5f5f5; }

@media (max-width: 780px) {
    body.material-app .app-content.create-page .create-header,
    body.material-app .app-content.manage-page .manage-hero,
    body.material-app .manage-content-heading { margin-inline: 4px; }
    body.material-app .manage-grid { gap: 14px; }
}
@media (max-width: 610px) {
    body.material-app .create-card form { padding: 16px; }
    body.material-app .create-steps { margin-inline: 8px; padding: 12px 14px; }
    body.material-app .manage-grid { grid-template-columns: 1fr; }
    body.material-app .manage-card--wide { grid-column: 1; }
    body.material-app .manage-card { padding: 17px; }
    body.material-app .manage-nav a { min-height: 38px; padding: 8px 11px; }
}
@media (prefers-reduced-motion: reduce) {
    body.material-app :is(.feature-page, .secondary-page, .create-page, .manage-page) * {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
}

/* Warmer card treatment with Poppins, while keeping Material 3's raised
   headers, metrics, controls and responsive placement. */
body.material-app {
    --md-heading: #3f3836;
    --md-muted: #817a75;
    --md-line: #eee5e1;
    --md-dark-bar: linear-gradient(195deg, #4b4643, #2d2927);
    --md-dark-shadow: 0 7px 16px rgba(48, 40, 35, .19);
    --md-card-shadow: 0 10px 28px rgba(74, 52, 49, .075), 0 2px 6px rgba(74, 52, 49, .045);
    --md-warm-border: #e9dfda;
    --md-warm-soft: #fbf8f6;
}
body.material-app[data-theme='dark'] {
    --md-heading: #f6f1ef;
    --md-muted: #b8afa8;
    --md-line: #4d4541;
    --md-dark-bar: linear-gradient(195deg, #49413d, #2b2725);
    --md-dark-shadow: 0 7px 18px rgba(0, 0, 0, .26);
    --md-card-shadow: 0 10px 28px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .12);
    --md-warm-border: #4a423e;
    --md-warm-soft: #2d2927;
}
body.material-app :is(.feature-page, .secondary-page, .create-page, .manage-page) {
    font-family: 'Poppins', sans-serif;
}
body.material-app .feature-page {
    --feature-border: var(--md-warm-border);
    --feature-hover: #fcf7f5;
    --feature-soft: var(--md-warm-soft);
}
body.material-app .secondary-page {
    --secondary-line: var(--md-warm-border);
    --secondary-soft: var(--md-warm-soft);
}
body.material-app[data-theme='dark'] .feature-page { --feature-hover: #332e2c; --feature-soft: var(--md-warm-soft); }
body.material-app[data-theme='dark'] .secondary-page { --secondary-soft: var(--md-warm-soft); }
body.material-app :is(.feature-metric, .feature-card, .feature-news-card,
    .secondary-page .panel, .secondary-page .news-admin-card,
    .create-page .create-card, .manage-card, .manage-jump) {
    border-color: var(--md-warm-border) !important; border-radius: 14px !important;
    background: linear-gradient(145deg, var(--surface) 60%, #fdfaf8 100%) !important;
    box-shadow: var(--md-card-shadow) !important;
}
body.material-app[data-theme='dark'] :is(.feature-metric, .feature-card, .feature-news-card,
    .secondary-page .panel, .secondary-page .news-admin-card,
    .create-page .create-card, .manage-card, .manage-jump) {
    border-color: var(--md-warm-border) !important;
    background: linear-gradient(145deg, var(--surface) 60%, #2e2a28 100%) !important;
    box-shadow: var(--md-card-shadow) !important;
}
body.material-app :is(.feature-card-head, .secondary-page .secondary-card-head,
    .secondary-page.news-admin-page .news-admin-card-head, .create-steps) {
    border-radius: 12px; background: var(--md-dark-bar);
    box-shadow: var(--md-dark-shadow);
}
body.material-app :is(.feature-metric-icon, .secondary-page .secondary-metric .secondary-metric-icon,
    .create-header-icon, .manage-jump-icon) {
    border-radius: 12px !important; box-shadow: var(--md-dark-shadow);
}
body.material-app :is(.feature-button, .feature-category-link, .feature-page-link,
    .secondary-page .magic-btn, .secondary-page .outline-btn,
    .secondary-page .news-admin-submit, .secondary-page .news-admin-ghost,
    .create-actions button, .create-actions a, .manage-primary,
    .manage-secondary, .manage-danger, .manage-nav a) { border-radius: 9px !important; }
body.material-app :is(.feature-search, .feature-select-label select,
    .secondary-page .input-dark, .secondary-page .news-admin-input,
    .create-page label > input, .manage-field input, .manage-field select) {
    border-color: #e4d9d4; border-radius: 10px !important;
    background: #fffcfa; color: var(--md-heading);
}
body.material-app[data-theme='dark'] :is(.feature-search, .feature-select-label select,
    .secondary-page .input-dark, .secondary-page .news-admin-input,
    .create-page label > input, .manage-field input, .manage-field select) {
    border-color: #57504b; background: #2b2927; color: #f6f1ef;
}
body.material-app .feature-search input { color: var(--md-heading); }
body.material-app[data-theme='dark'] .feature-search input { color: #f6f1ef; }
body.material-app :is(.feature-table th, .secondary-page .secondary-table th) {
    border-color: var(--md-line); color: #8b8185;
    background: transparent;
}
body.material-app :is(.feature-table td, .secondary-page .secondary-table td) { border-color: var(--md-line); }
body.material-app .feature-news-card { border-left: 1px solid var(--md-warm-border); }
body.material-app .feature-news-card[data-kind='update'] { border-left: 4px solid var(--material-accent) !important; }
body.material-app .feature-news-card[data-kind='maintenance'] { border-left: 4px solid #d99e66 !important; }
body.material-app .manage-now-playing,
body.material-app .manage-station,
body.material-app .manage-empty,
body.material-app .secondary-page .panel-soft,
body.material-app .secondary-page .secondary-ticket {
    border-color: var(--md-warm-border); border-radius: 11px;
    background: var(--md-warm-soft);
}
body.material-app .app-content.manage-page .manage-nav {
    border-radius: 12px; background: #f1eae7;
}
body.material-app[data-theme='dark'] .app-content.manage-page .manage-nav { background: #342e2b; }
body.material-app :is(.feature-head h1, .secondary-page .secondary-page-title,
    .secondary-page .news-admin-title, .create-header h1, .manage-hero h1) {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important; letter-spacing: -.015em !important;
}
body.material-app .feature-metric strong,
body.material-app .secondary-page .secondary-metric > p:nth-of-type(2),
body.material-app .manage-number { font-weight: 400 !important; }
body.material-app[data-theme='dark'] .feature-news-card { border-color: var(--md-warm-border); }
@media (max-width: 610px) {
    body.material-app :is(.feature-metric, .feature-card, .feature-news-card,
        .secondary-page .panel, .secondary-page .news-admin-card,
        .create-page .create-card, .manage-card, .manage-jump) { border-radius: 12px !important; }
}

/* musicbots.net reference: dark navy workspace with bright action colors.
   Page-specific structures and all existing form/status hooks remain intact. */
body.material-app {
    --sub-ink: #f5f6fb;
    --sub-muted: #a5aabc;
    --sub-border: #3e4356;
    --sub-panel: #282c3d;
    --sub-panel-deep: #24283a;
    --sub-input: #25293a;
    --sub-cyan: #43c8e5;
    --sub-red: var(--primary, #ce1034);
    --md-heading: var(--sub-ink);
    --md-muted: var(--sub-muted);
    --md-line: var(--sub-border);
    --md-accent: var(--sub-red);
    --md-dark-bar: none;
    --md-card-shadow: 0 10px 28px rgba(7, 10, 24, .18);
}
body.material-app :is(.feature-page, .secondary-page, .create-page, .manage-page) { color: var(--sub-ink); }
body.material-app :is(.feature-head, .secondary-page-head, .create-header, .manage-hero) {
    margin: 0 0 24px; padding: 0; background: transparent; border: 0; box-shadow: none;
}
body.material-app :is(.feature-head h1, .secondary-page-title, .news-admin-title, .create-header h1, .manage-hero h1) {
    color: var(--sub-ink) !important; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2;
}
body.material-app :is(.feature-subtitle, .secondary-page-description, .news-admin-subtitle, .create-description, .manage-hero-description) {
    color: var(--sub-muted) !important; font-size: 13px; line-height: 1.55;
}
body.material-app :is(.feature-eyebrow, .secondary-eyebrow, .news-admin-eyebrow, .create-eyebrow, .manage-eyebrow) {
    display: block; color: var(--sub-red) !important; letter-spacing: .1em;
}
body.material-app :is(.feature-card, .feature-news-card, .secondary-page .panel,
    .secondary-page .news-admin-card, .create-page .create-card, .manage-card, .manage-jump) {
    border: 1px solid var(--sub-border) !important; border-radius: 14px !important;
    background: var(--sub-panel) !important; box-shadow: 0 8px 24px rgba(8, 12, 27, .16) !important;
}
body.material-app[data-theme='dark'] :is(.feature-card, .feature-news-card, .secondary-page .panel,
    .secondary-page .news-admin-card, .create-page .create-card, .manage-card, .manage-jump) {
    border: 1px solid var(--sub-border) !important; border-radius: 14px !important;
    background: var(--sub-panel) !important; box-shadow: 0 8px 24px rgba(8, 12, 27, .16) !important;
}
body.material-app :is(.feature-card-head, .secondary-page .secondary-card-head,
    .secondary-page.news-admin-page .news-admin-card-head, .create-steps) {
    border-radius: 12px; background: var(--sub-panel-deep); box-shadow: none;
}
body.material-app :is(.feature-button-primary, .manage-primary, .create-primary, .secondary-page .magic-btn,
    .secondary-page .news-admin-submit) {
    border-color: var(--sub-red) !important; border-radius: 9px !important;
    background: var(--sub-red) !important; color: #fff !important; box-shadow: none;
}
body.material-app :is(.feature-button-primary, .manage-primary, .create-primary, .secondary-page .magic-btn,
    .secondary-page .news-admin-submit):hover:not(:disabled) {
    background: #b90e30 !important; transform: translateY(-1px);
}
body.material-app :is(.feature-search, .feature-select-label select, .secondary-page .input-dark,
    .secondary-page .news-admin-input, .create-page label > input,
    .manage-field input, .manage-field select) {
    border: 1px solid var(--sub-border) !important; border-radius: 8px !important;
    background: var(--sub-input) !important; color: var(--sub-ink) !important;
}
body.material-app :is(.feature-search, .feature-select-label select, .secondary-page .input-dark,
    .secondary-page .news-admin-input, .create-page label > input,
    .manage-field input, .manage-field select):focus,
body.material-app .feature-search:focus-within {
    border-color: var(--sub-red) !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 206,16,52), .14) !important;
}
body.material-app :is(.feature-search input, .secondary-page .input-dark, .secondary-page .news-admin-input,
    .create-page label > input, .manage-field input)::placeholder { color: #8e94a9 !important; }

/* My Bots: three gradient statistics, compact filter bar and individual bot cards. */
body.material-app .feature-bots-page .feature-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.material-app .feature-bots-page .feature-head .feature-button { flex: 0 0 auto; }
body.material-app .feature-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 24px; }
body.material-app .feature-metric {
    min-height: 132px; padding: 22px 23px; display: flex; align-items: center; gap: 18px;
    border: 0 !important; border-radius: 14px !important; color: #fff;
    box-shadow: 0 12px 27px rgba(4, 8, 24, .2) !important;
}
body.material-app .feature-metric.is-total,
body.material-app[data-theme='dark'] .feature-metric.is-total { background: linear-gradient(120deg, #7562d4, #5144ab) !important; }
body.material-app .feature-metric.is-online,
body.material-app[data-theme='dark'] .feature-metric.is-online { background: linear-gradient(120deg, #1aaeb2, #087d88) !important; }
body.material-app .feature-metric.is-offline,
body.material-app[data-theme='dark'] .feature-metric.is-offline { background: linear-gradient(120deg, #4a5267, #343b50) !important; }
body.material-app .feature-metric-icon {
    position: static; width: 54px; height: 54px; flex: 0 0 54px;
    border: 1px solid rgba(255,255,255,.23); border-radius: 12px !important;
    background: rgba(255,255,255,.14) !important; box-shadow: none; color: #fff !important; font-size: 22px;
}
body.material-app .feature-metric p,
body.material-app .feature-metric strong { margin: 0; color: #fff !important; }
body.material-app .feature-metric p { font-size: 13px; opacity: .9; }
body.material-app .feature-metric strong { font-size: 34px; line-height: 1.15; font-weight: 400 !important; }
body.material-app .feature-metric small { display: block; margin-top: 3px; color: rgba(255,255,255,.82); font-size: 11px; }
body.material-app .feature-bots-page .feature-card {
    margin: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
body.material-app .feature-bots-page .feature-card-head {
    min-height: 86px; margin: 0 0 18px; padding: 16px 20px;
    display: flex; align-items: center; gap: 20px;
    border: 1px solid var(--sub-border); border-radius: 14px;
    background: var(--sub-panel-deep) !important; box-shadow: none;
}
body.material-app .feature-bots-page .feature-card-head h2 { color: var(--sub-ink); font-size: 17px; }
body.material-app .feature-bots-page .feature-card-caption { color: var(--sub-muted); font-size: 12px; }
body.material-app .feature-bots-page .feature-controls { margin-left: auto; flex-wrap: wrap; }
body.material-app .feature-bots-page .feature-search { min-width: 180px; }
body.material-app .feature-bots-page .feature-search input { color: var(--sub-ink) !important; }
body.material-app .feature-bot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
body.material-app .feature-bot-card {
    min-width: 0; padding: 22px; border: 1px solid var(--sub-border); border-radius: 14px;
    background: var(--sub-panel-deep); box-shadow: 0 8px 22px rgba(7, 10, 23, .13);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.material-app .feature-bot-card:hover { border-color: #565d78; transform: translateY(-2px); box-shadow: 0 13px 27px rgba(7, 10, 23, .22); }
body.material-app .feature-bot-card[hidden] { display: none !important; }
body.material-app .feature-bot-card-top,
body.material-app .feature-bot-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.material-app .feature-bot-avatar {
    display: grid; place-items: center; width: 50px; height: 50px;
    border-radius: 12px !important; background: #153d55 !important; color: var(--sub-cyan) !important; font-size: 20px;
}
body.material-app .feature-status {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid transparent; border-radius: 999px; padding: 6px 10px;
    font-size: 11px; font-weight: 400; letter-spacing: .02em;
}
body.material-app .feature-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.material-app .feature-status.is-online { border-color: #245849; background: #1e493e; color: #75dfbb; }
body.material-app .feature-status.is-offline { border-color: #4c5264; background: #363b4f; color: #bec5d3; }
body.material-app .feature-bot-card-title { margin: 20px 0 16px; }
body.material-app .feature-bot-card-title h3 { margin: 0; color: var(--sub-ink); font-size: 19px; font-weight: 400; }
body.material-app .feature-bot-card-title span { display: block; margin-top: 3px; color: var(--sub-muted); font-size: 11px; }
body.material-app .feature-bot-meta { display: grid; gap: 11px; padding: 15px 0; border-top: 1px solid var(--sub-border); border-bottom: 1px solid var(--sub-border); }
body.material-app .feature-bot-meta div { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
body.material-app .feature-bot-meta span,
body.material-app .feature-bot-card-footer time { color: var(--sub-muted); font-size: 11px; }
body.material-app .feature-bot-meta strong { min-width: 0; color: #e0e5f0; font-size: 12px; font-weight: 400; text-align: right; overflow-wrap: anywhere; }
body.material-app .feature-bot-card-footer { margin-top: 18px; }
body.material-app .feature-row-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 35px; padding: 8px 12px; border-radius: 8px;
    background: var(--sub-red); color: #fff !important; font-size: 11px; text-decoration: none;
}
body.material-app .feature-row-action:hover { background: #b90e30; }
body.material-app .feature-bots-page .feature-table-footer { margin: 16px 1px 0; padding: 0; border: 0; color: var(--sub-muted); }
body.material-app .feature-live-dot { background: #62d3b5; }
body.material-app .feature-filter-empty { margin-top: 18px; padding: 20px; border: 1px solid var(--sub-border); border-radius: 12px; background: var(--sub-panel); color: var(--sub-muted); }

/* Create remains a dedicated page, using the reference's compact connect form. */
body.material-app .app-content.create-page .create-header { width: min(100%, 560px); margin: 6px auto 22px; }
body.material-app .create-header-icon { border: 1px solid var(--sub-border); border-radius: 12px; background: var(--sub-panel); color: var(--sub-cyan); box-shadow: none; }
body.material-app .app-content.create-page .create-card {
    width: min(100%, 560px); margin: 0 auto; padding: 0;
    border-radius: 15px !important; background: var(--sub-panel) !important;
}
body.material-app[data-theme='dark'] .app-content.create-page .create-card {
    width: min(100%, 560px); margin: 0 auto;
    border-radius: 15px !important; background: var(--sub-panel) !important;
}
body.material-app .create-steps {
    min-height: 66px; margin: 0; padding: 14px 21px; border-bottom: 1px solid var(--sub-border);
    border-radius: 14px 14px 0 0; background: var(--sub-panel-deep); box-shadow: none;
}
body.material-app .create-step { color: var(--sub-muted); font-size: 12px; }
body.material-app .create-step.is-active { color: var(--sub-ink); }
body.material-app .create-step-badge { border-color: var(--sub-border); background: #34394f; color: var(--sub-muted); }
body.material-app .create-step.is-active .create-step-badge { border-color: var(--sub-red); background: var(--sub-red); color: #fff; }
body.material-app .create-step-divider { background: var(--sub-border); }
body.material-app .create-card form { padding: 24px; }
body.material-app .create-page label > span,
body.material-app .manage-field > span { color: #e5e8f2; font-size: 12px; font-weight: 400; }
body.material-app .create-helper { color: var(--sub-muted); font-size: 11px; }
body.material-app .create-actions { border-color: var(--sub-border); }
body.material-app .create-secondary,
body.material-app .manage-secondary,
body.material-app .secondary-page .outline-btn,
body.material-app .secondary-page .news-admin-ghost,
body.material-app .secondary-page .news-admin-back {
    border: 1px solid var(--sub-border) !important; border-radius: 9px !important;
    background: #303549 !important; color: var(--sub-ink) !important; box-shadow: none;
}
body.material-app .create-secondary:hover,
body.material-app .manage-secondary:hover:not(:disabled),
body.material-app .secondary-page .outline-btn:hover,
body.material-app .secondary-page .news-admin-ghost:hover {
    border-color: #666e8b !important; background: #394057 !important; color: #fff !important;
}
body.material-app .create-page #wizardSubmit { border-color: #28b5d3 !important; background: #28b5d3 !important; color: #101d2c !important; }
body.material-app .create-page #wizardSubmit:hover { background: #4bcee7 !important; }

/* Manage keeps five server-rendered sections and shows a reference-style info rail. */
body.material-app .manage-hero { margin-bottom: 18px; }
body.material-app .app-content.manage-page .manage-nav,
body.material-app[data-theme='dark'] .app-content.manage-page .manage-nav {
    display: flex; gap: 8px; margin: 0 0 24px; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; overflow-x: auto;
}
body.material-app .manage-nav a {
    min-height: 39px; padding: 8px 13px; border: 1px solid var(--sub-border);
    border-radius: 8px !important; background: var(--sub-panel); color: #c2c7d7; font-size: 12px;
}
body.material-app .manage-nav a:hover { border-color: #626b85; background: #33394d; color: #fff; }
body.material-app .manage-nav a[aria-current='page'],
body.material-app[data-theme='dark'] .manage-nav a[aria-current='page'] {
    border-color: var(--sub-red); background: var(--sub-red); color: #fff;
    box-shadow: 0 5px 12px rgba(var(--primary-rgb, 206,16,52), .18);
}
body.material-app .manage-nav a[aria-current='page'] i { color: #fff; }
body.material-app .manage-content-heading { margin: 0 0 17px; }
body.material-app .manage-content-heading h2 { color: var(--sub-ink); font-size: 19px; }
body.material-app .manage-content-heading p { color: var(--sub-muted); }
body.material-app .manage-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(265px, 1fr); gap: 28px; align-items: start; }
body.material-app .manage-main { min-width: 0; }
body.material-app .manage-sidebar { min-width: 0; display: grid; gap: 12px; }
body.material-app .manage-main .manage-grid { gap: 16px; margin: 0; }
body.material-app .manage-card { padding: 21px; }
body.material-app .manage-card h2,
body.material-app .manage-settings-group h3 { color: #ef5774; font-weight: 400; }
body.material-app .manage-card p:not(.manage-eyebrow):not(.manage-number):not(.manage-server) { color: var(--sub-muted); }
body.material-app .manage-number,
body.material-app .manage-server { color: var(--sub-ink) !important; }
body.material-app .manage-live-pill,
body.material-app .manage-live-pill.is-online { border-radius: 999px; font-size: 11px; }
body.material-app .manage-live-pill { border-color: #52586a; background: #363b4f; color: #c2c8d8; }
body.material-app .manage-live-pill.is-online { border-color: #245849; background: #1e493e; color: #75dfbb; }
body.material-app .manage-live-pill .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.material-app .manage-info-card {
    padding: 20px; border: 1px solid var(--sub-border); border-radius: 14px;
    background: var(--sub-panel); box-shadow: 0 8px 24px rgba(8,12,27,.16);
}
body.material-app .manage-info-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
body.material-app .manage-info-icon,
body.material-app .manage-settings-icon,
body.material-app .manage-jump-icon {
    display: grid; place-items: center; flex: 0 0 35px; width: 35px; height: 35px;
    border: 0; border-radius: 9px !important; background: #4b2337; color: #f36b84; box-shadow: none;
}
body.material-app .manage-info-heading h2 { margin: 0; color: #ef5774; font-size: 15px; font-weight: 400; }
body.material-app .manage-info-heading p { margin: 3px 0 0; color: var(--sub-muted); font-size: 11px; }
body.material-app .manage-info-list { margin: 0; }
body.material-app .manage-info-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--sub-border); }
body.material-app .manage-info-list dt { color: var(--sub-muted); font-size: 11px; }
body.material-app .manage-info-list dd { max-width: 58%; margin: 0; color: var(--sub-ink); font-size: 11px; text-align: right; overflow-wrap: anywhere; }
body.material-app .manage-info-link,
body.material-app .manage-back-link { display: inline-flex; align-items: center; gap: 8px; color: #f36b84; font-size: 11px; text-decoration: none; }
body.material-app .manage-info-link { justify-content: center; width: 100%; min-height: 38px; margin-top: 15px; border: 1px solid #8f314b; border-radius: 8px; }
body.material-app .manage-info-link:hover { background: #3c283a; }
body.material-app .manage-info-link .fa-arrow-right { margin-left: auto; margin-right: 11px; }
body.material-app .manage-back-link { padding: 10px 4px; }
body.material-app .manage-now-playing,
body.material-app .manage-station,
body.material-app .manage-empty { border-color: var(--sub-border); border-radius: 10px; background: var(--sub-panel-deep); color: var(--sub-ink); }
body.material-app .manage-jump { border-color: var(--sub-border) !important; background: var(--sub-panel-deep) !important; }
body.material-app .manage-text-link { color: #f36b84; }
body.material-app .manage-danger { border: 1px solid #8f314b; background: #412a39; color: #f69aab; }
body.material-app .manage-danger:hover { background: #5a3044; }
body.material-app .manage-check input { accent-color: var(--sub-red); }
body.material-app .manage-settings-group { padding: 17px; border: 1px solid var(--sub-border); border-radius: 11px; background: var(--sub-panel-deep); }
body.material-app .manage-settings-group-head { display: flex; align-items: center; gap: 11px; margin-bottom: 17px; }
body.material-app .manage-settings-group-head h3 { margin: 0; font-size: 14px; }
body.material-app .manage-settings-group-head p { margin: 3px 0 0 !important; font-size: 11px !important; }
body.material-app .manage-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.material-app .manage-settings-fields .manage-field { min-width: 0; }
body.material-app .manage-danger-zone { border-color: #6c3a4b !important; }

/* News, profile, administration and support share the same navy card language. */
body.material-app .feature-news-page .feature-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
body.material-app .feature-category-nav { margin: 0 0 22px; gap: 9px; }
body.material-app .feature-category-link,
body.material-app .feature-page-link,
body.material-app .feature-button-secondary {
    border: 1px solid var(--sub-border) !important; border-radius: 8px !important;
    background: var(--sub-panel) !important; color: #d7dcea !important; box-shadow: none;
}
body.material-app .feature-category-link.is-active,
body.material-app[data-theme='dark'] .feature-category-link.is-active {
    border-color: var(--sub-red) !important; background: var(--sub-red) !important; color: #fff !important;
}
body.material-app .feature-category-link:hover,
body.material-app .feature-page-link:hover,
body.material-app .feature-button-secondary:hover { border-color: #667089 !important; background: #34394e !important; color: #fff !important; }
body.material-app .feature-news-list { margin: 0; gap: 16px; }
body.material-app .feature-news-card { padding: 22px; background: var(--sub-panel-deep) !important; }
body.material-app[data-theme='dark'] .feature-news-card { background: var(--sub-panel-deep) !important; }
body.material-app .feature-news-card h2 { color: var(--sub-ink); font-size: 18px; font-weight: 400; }
body.material-app .feature-news-body,
body.material-app .feature-news-author,
body.material-app .feature-news-card-top time { color: var(--sub-muted); }
body.material-app .feature-news-kind { color: #f36b84; }
body.material-app .feature-news-card[data-kind='update'] { border-left: 3px solid var(--sub-red) !important; }
body.material-app .feature-news-card[data-kind='maintenance'] { border-left: 3px solid #d9904c !important; }
body.material-app .feature-pagination { color: var(--sub-muted); }
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) :is(.feature-category-link, .feature-page-link, .feature-button-secondary) {
    color: var(--sub-ink) !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .feature-category-link.is-active {
    color: #fff !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) :is(.feature-category-link, .feature-page-link, .feature-button-secondary):hover {
    border-color: #e3a6b4 !important;
    background: #fcecf1 !important;
    color: #b41c3d !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .feature-category-link.is-active:hover {
    background: #b90e30 !important;
    color: #fff !important;
}

body.material-app .secondary-page { --secondary-line: var(--sub-border); --secondary-soft: var(--sub-panel-deep); }
body.material-app .secondary-page .secondary-page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
body.material-app .secondary-page .secondary-metric { min-height: 126px; }
body.material-app .secondary-page .secondary-metric .secondary-metric-icon,
body.material-app .secondary-page .secondary-card-icon,
body.material-app .secondary-page .news-admin-card-head > i {
    border: 0; border-radius: 10px !important; background: #4b2337; color: #f36b84; box-shadow: none;
}
body.material-app .secondary-page .secondary-metric :is(.kpi-label, .kpi-value),
body.material-app .secondary-page .secondary-metric p { color: var(--sub-ink) !important; }
body.material-app .secondary-page .secondary-metric .kpi-label { color: var(--sub-muted) !important; }
body.material-app .secondary-page .secondary-card-head,
body.material-app .secondary-page.news-admin-page .news-admin-card-head {
    min-height: 0; margin: 0 0 18px; padding: 0 0 16px !important;
    border: 0; border-bottom: 1px solid var(--sub-border);
    border-radius: 0; background: transparent; box-shadow: none;
}
body.material-app .secondary-page .secondary-card-title,
body.material-app .secondary-page.news-admin-page .news-admin-card-head h2 { color: var(--sub-ink) !important; font-size: 16px !important; font-weight: 400 !important; }
body.material-app .secondary-page .secondary-card-description,
body.material-app .secondary-page.news-admin-page .news-admin-card-head p { color: var(--sub-muted) !important; font-size: 12px; }
body.material-app .secondary-page .badge-tech {
    border-color: var(--sub-border) !important; border-radius: 999px;
    background: #363b50 !important; color: #d5dae7 !important;
}
body.material-app .secondary-page :is(.badge-tech.badge-online, .badge-tech[class*='border-emerald']) {
    border-color: #245849 !important; background: #1e493e !important; color: #75dfbb !important;
}
body.material-app .secondary-page .badge-tech[class*='border-red'] {
    border-color: #66384a !important; background: #432c3b !important; color: #f69aad !important;
}
body.material-app .secondary-page .panel-soft,
body.material-app .secondary-page .secondary-ticket,
body.material-app .secondary-page.news-admin-page .news-admin-item {
    border-color: var(--sub-border) !important; border-radius: 10px;
    background: var(--sub-panel-deep) !important; color: var(--sub-ink);
}
body.material-app .secondary-page .secondary-table th,
body.material-app .secondary-page .secondary-table td { border-color: var(--sub-border); color: var(--sub-ink); }
body.material-app .secondary-page .secondary-table th { color: var(--sub-muted); background: transparent; }
body.material-app .secondary-page .secondary-theme-choice > div {
    border: 1px solid var(--sub-border) !important; border-radius: 10px; background: var(--sub-panel-deep) !important;
}
body.material-app .secondary-page .secondary-theme-choice input:checked + div,
body.material-app .secondary-page .secondary-theme-choice input:focus-visible + div {
    border-color: var(--sub-red) !important; background: #3d273b !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 206,16,52), .17);
}
body.material-app .secondary-page .secondary-admin-link,
body.material-app .secondary-page .admin-news-link {
    border-color: var(--sub-border) !important; border-radius: 12px;
    background: var(--sub-panel) !important; color: var(--sub-ink) !important;
}
body.material-app .secondary-page .admin-news-link-caption { color: var(--sub-muted) !important; }
body.material-app .secondary-page .admin-news-link-action { color: #f36b84 !important; }
body.material-app .secondary-page .admin-news-link-icon { background: #4b2337 !important; color: #f36b84 !important; }
body.material-app .secondary-page.news-admin-page .news-admin-header { margin: 0 0 22px !important; }
body.material-app .secondary-page.news-admin-page .news-admin-layout { gap: 18px; margin: 0 !important; }
body.material-app .secondary-page.news-admin-page .news-admin-card-body { padding: 0 20px 20px !important; }
body.material-app .secondary-page.news-admin-page .news-admin-card-head { margin: 0; padding: 19px 20px 15px !important; }
body.material-app .secondary-page.news-admin-page .news-admin-list { padding: 0 !important; }
body.material-app .secondary-page.news-admin-page .news-admin-item { margin: 0 12px 12px; padding: 14px !important; border: 1px solid var(--sub-border) !important; border-radius: 10px !important; }
body.material-app .secondary-page.news-admin-page .news-admin-item h3,
body.material-app .secondary-page.news-admin-page .news-admin-field > span { color: var(--sub-ink) !important; }
body.material-app .secondary-page.news-admin-page .news-admin-item p,
body.material-app .secondary-page.news-admin-page .news-admin-item-meta,
body.material-app .secondary-page.news-admin-page .news-admin-hint { color: var(--sub-muted) !important; }
body.material-app .secondary-page.news-admin-page .news-admin-submit { background: var(--sub-red) !important; }

/* The existing Pearl and Ocean preferences remain usable as light variants. */
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) {
    --sub-ink: #253047;
    --sub-muted: #66718a;
    --sub-border: #dfe5ef;
    --sub-panel: #fff;
    --sub-panel-deep: #f6f8fc;
    --sub-input: #fff;
    --sub-cyan: #168eac;
    --md-heading: var(--sub-ink);
    --md-muted: var(--sub-muted);
    --md-line: var(--sub-border);
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean'])
    :is(.feature-card, .feature-news-card, .secondary-page .panel,
        .secondary-page .news-admin-card, .create-page .create-card, .manage-card, .manage-jump) {
    border-color: var(--sub-border) !important; background: var(--sub-panel) !important;
    box-shadow: 0 8px 24px rgba(33, 47, 75, .07) !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .feature-bot-card,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .feature-news-card,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .manage-settings-group,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .manage-now-playing,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .manage-station,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .secondary-page .panel-soft {
    border-color: var(--sub-border) !important; background: var(--sub-panel-deep) !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean'])
    :is(.feature-search, .feature-select-label select, .secondary-page .input-dark,
        .secondary-page .news-admin-input, .create-page label > input,
        .manage-field input, .manage-field select) {
    border-color: var(--sub-border) !important; background: var(--sub-input) !important; color: var(--sub-ink) !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .feature-search input,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .feature-bot-meta strong,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .create-page label > span,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .manage-field > span,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .manage-info-list dd { color: var(--sub-ink) !important; }
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .manage-nav a,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .create-secondary,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .manage-secondary,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .secondary-page .outline-btn,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .secondary-page .news-admin-back,
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .secondary-page .news-admin-ghost {
    border-color: var(--sub-border) !important; background: var(--sub-panel) !important; color: var(--sub-ink) !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .manage-info-card {
    border-color: var(--sub-border); background: var(--sub-panel);
    box-shadow: 0 8px 24px rgba(33,47,75,.07);
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .feature-bots-page .feature-card {
    border: 0 !important; background: transparent !important; box-shadow: none !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .manage-nav a[aria-current='page'] {
    border-color: var(--sub-red) !important; background: var(--sub-red) !important; color: #fff !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .secondary-page .badge-tech {
    border-color: var(--sub-border) !important; background: #f3f5fa !important; color: #526075 !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .secondary-page .badge-tech[class*='border-emerald'] {
    border-color: #b9ddce !important; background: #eaf8f1 !important; color: #167053 !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .secondary-page .badge-tech[class*='border-red'] {
    border-color: #e7c4cf !important; background: #fdf0f3 !important; color: #af3555 !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean']) .secondary-page .secondary-theme-choice input:checked + div { background: #fceaf0 !important; }

/* Keep the reference page hierarchy and card-head contrast after the older
   Material rules above, including their higher-specificity !important values. */
body.material-app .secondary-page .secondary-eyebrow,
body.material-app .secondary-page .news-admin-eyebrow {
    display: block !important;
    color: var(--sub-red) !important;
}
body.material-app .secondary-page .secondary-page-title,
body.material-app .secondary-page .news-admin-title {
    color: var(--sub-ink) !important;
    font-size: clamp(24px, 2.3vw, 32px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
body.material-app .secondary-page .secondary-page-description,
body.material-app .secondary-page .news-admin-subtitle {
    color: var(--sub-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
body.material-app .secondary-page .secondary-card-head .secondary-card-title,
body.material-app .secondary-page .secondary-card-head h2 {
    color: var(--sub-ink) !important;
    font-weight: 600 !important;
}
body.material-app .secondary-page .secondary-card-head .secondary-card-description {
    color: var(--sub-muted) !important;
}
body.material-app .secondary-page .secondary-card-head .secondary-card-icon {
    background: #4b2337;
    color: #f36b84;
}
body.material-app .secondary-page.news-admin-page .news-admin-card-head > i {
    color: #f36b84 !important;
}
body.material-app:is([data-theme='pearl'], [data-theme='ocean'])
    .secondary-page .secondary-card-head .secondary-card-icon {
    background: #fceaf0;
    color: #b52046;
}

@media (max-width: 1050px) {
    body.material-app .feature-bots-page .feature-card-head { align-items: stretch; flex-direction: column; }
    body.material-app .feature-bots-page .feature-controls { width: 100%; margin-left: 0; }
    body.material-app .manage-layout { grid-template-columns: 1fr; }
    body.material-app .manage-sidebar { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 820px) {
    body.material-app .feature-bot-grid { grid-template-columns: 1fr; }
    body.material-app .feature-metrics { gap: 12px; }
    body.material-app .feature-metric { min-height: 116px; padding: 15px; gap: 11px; }
    body.material-app .feature-metric-icon { width: 42px; height: 42px; flex-basis: 42px; font-size: 17px; }
    body.material-app .feature-metric strong { font-size: 27px; }
}
@media (max-width: 650px) {
    body.material-app .feature-bots-page .feature-head,
    body.material-app .feature-news-page .feature-head,
    body.material-app .secondary-page .secondary-page-head { align-items: stretch; flex-direction: column; }
    body.material-app .feature-bots-page .feature-head .feature-button { align-self: flex-start; }
    body.material-app .secondary-page .secondary-page-head > .badge-tech { align-self: flex-start; }
    body.material-app .feature-metrics { grid-template-columns: 1fr; }
    body.material-app .feature-metric { min-height: 93px; }
    body.material-app .feature-bots-page .feature-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    body.material-app .feature-bots-page .feature-search { grid-column: 1/-1; min-width: 0; }
    body.material-app .feature-bot-card { padding: 17px; }
    body.material-app .feature-bot-card-footer { flex-wrap: wrap; }
    body.material-app .app-content.create-page .create-header { align-items: start; }
    body.material-app .create-card form { padding: 17px; }
    body.material-app .manage-main .manage-grid,
    body.material-app .manage-settings-fields { grid-template-columns: 1fr; }
    body.material-app .manage-main .manage-card--wide { grid-column: 1; }
    body.material-app .manage-card { padding: 17px; }
    body.material-app .secondary-page.news-admin-page .news-admin-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    body.material-app .feature-bot-card { transition: none; }
}

@media (max-width: 420px) {
    body.material-app .app-content.profile-page > section:has(> .secondary-metric) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.material-app .profile-page .secondary-metric { min-height: 96px; }
    body.material-app .profile-page .secondary-metric.is-email > p:nth-of-type(2) {
        margin-right: 30px;
        overflow-wrap: anywhere;
        word-break: normal;
    }
}