:root {
    --bg: #0d1117;
    --panel: #161b22;
    --panel-2: #1f2937;
    --text: #f3f4f6;
    --muted: #9ca3af;
    --line: #2d3748;
    --primary: #2f6bff;
    --success: #16a34a;
    --error: #dc2626;
    --admin-bg: #0b111a;
    --admin-sidebar-bg: #0f1624;
    --admin-topbar-bg: #101827;
    --admin-surface: #131d2c;
    --admin-surface-2: #182232;
    --admin-border: #2f3f56;
    --admin-sidebar-width: 248px;
    --admin-radius: 12px;
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.25rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

body.overlay-open {
    overflow: hidden;
}

.container {
    width: min(1100px, 100% - 1.5rem);
    margin-inline: auto;
}

body.app-shell:not(.app-shell--admin) .container {
    width: min(1180px, 94vw);
}

.site-header,
.site-footer {
    border-bottom: 1px solid var(--line);
    background: #0b1016;
}

.app-shell--admin .site-header {
    border-bottom-color: var(--admin-border);
    background: var(--admin-topbar-bg);
}

.app-shell--admin .site-footer {
    border-top-color: var(--admin-border);
    border-bottom: none;
    background: var(--admin-topbar-bg);
}

.site-footer {
    border-top: 1px solid var(--line);
    border-bottom: none;
    padding: 2rem 0 0;
    margin-top: 2rem;
    color: var(--muted);
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.footer-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer-site-logo {
    max-width: 220px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.footer-site-name {
    font-weight: 800;
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 1;
}

.footer-menu-column h3,
.footer-social-column h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.footer-menu-column ul {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.footer-menu-column li + li {
    margin-top: 0.45rem;
}

.footer-menu-column a {
    font-size: 14px;
    line-height: 1.4;
    color: #d7dfec;
    text-decoration: none;
}

.footer-menu-column a:hover {
    color: #ffffff;
}

.footer-social-list {
    margin-top: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.footer-social-link {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.footer-social-link svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.footer-social-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

.footer-bottom-bar {
    margin-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-bottom-inner {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.footer-links a {
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

@media (max-width: 980px) {
    .footer-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .site-footer {
        padding-top: 1.35rem;
    }

    .footer-main-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.6rem 0;
    }
}

.admin-users-table-wrap {
    overflow: auto;
    border: 1px solid #2f3f56;
    border-radius: 12px;
    background: #101826;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.admin-users-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #162235;
}

.admin-users-table th,
.admin-users-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #2f3f56;
    text-align: left;
    vertical-align: top;
}

.admin-users-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.35);
}

.admin-users-table tbody tr:hover {
    background: rgba(30, 64, 175, 0.18);
}

.admin-users-table th {
    font-size: 0.8rem;
    color: #9fb2cc;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.admin-users-actions {
    display: grid;
    gap: 0.5rem;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.inline-form select,
.inline-form input[type="password"] {
    min-width: 120px;
}

.events-guests-table thead th {
    position: sticky;
    top: 0;
    background: #132032;
    z-index: 1;
}

.events-guests-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.32);
}

.events-guests-table tbody tr:hover {
    background: rgba(30, 64, 175, 0.15);
}

.events-errors {
    border: 1px dashed #b8c6dc;
    border-radius: 10px;
    padding: 0.55rem;
    background: linear-gradient(180deg, #f9fbff 0%, #f1f6ff 100%);
}

.events-errors-head {
    margin-bottom: 0.45rem;
}

.events-errors-table-wrap {
    overflow-x: auto;
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 1rem;
}

.settings-sidebar {
    align-self: start;
    position: sticky;
    top: 0.8rem;
    display: grid;
    gap: 0.4rem;
    padding: 0.75rem;
}

.settings-tab-btn {
    appearance: none;
    border: 1px solid #36465d;
    background: #101826;
    color: #dbeafe;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
}

.settings-tab-btn:hover {
    background: #182232;
    color: #ffffff;
}

.settings-tab-btn.is-active {
    border-color: color-mix(in srgb, var(--primary) 72%, #ffffff 0%);
    background: color-mix(in srgb, var(--primary) 24%, #101826 76%);
    color: #ffffff;
}

.settings-panels {
    min-width: 0;
}

.settings-form {
    gap: 1rem;
}

.settings-panel[hidden] {
    display: none;
}

.post-category-inline-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: end;
}

.post-lang-tabs {
    display: grid;
    gap: 0.75rem;
}

.post-lang-tabs__nav {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid #31415a;
    padding-bottom: 0.4rem;
}

.post-lang-tab-btn {
    appearance: none;
    border: 1px solid #36465d;
    background: #101826;
    color: #dbeafe;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
}

.post-lang-tab-btn.is-active {
    border-color: color-mix(in srgb, var(--primary) 70%, #ffffff 0%);
    background: color-mix(in srgb, var(--primary) 26%, #101826 74%);
    color: #ffffff;
}

.post-featured-wrap {
    display: grid;
    gap: 0.65rem;
    border: 1px solid #cfd8e6;
    border-radius: 12px;
    padding: 0.75rem;
    background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}

.post-featured-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-featured-head strong {
    color: #1f2b3d;
}

.post-featured-upload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.post-featured-upload-row input[type="file"] {
    background: #ffffff;
    border-color: #c6d2e4;
    color: #24344a;
}

.post-featured-preview {
    border: 1px solid #d5deec;
    border-radius: 10px;
    background: #ffffff;
    min-height: 140px;
    display: grid;
    place-items: center;
    padding: 0.6rem;
}

.post-featured-preview img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 8px;
}

.post-featured-picker-modal {
    width: min(920px, 100%);
}

.post-featured-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.65rem;
    max-height: min(62vh, 520px);
    overflow: auto;
}

.post-featured-picker-item {
    border: 1px solid #cad6e8;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2b3d;
    padding: 0.45rem;
    display: grid;
    gap: 0.35rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.post-featured-picker-item:hover,
.post-featured-picker-item:focus-visible {
    border-color: #7ea1e9;
    box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.18);
    transform: translateY(-1px);
}

.post-featured-picker-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    border: 1px solid #d7e1ef;
    object-fit: cover;
    background: #f3f7ff;
}

.post-featured-picker-item span {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
}

.media-card {
    border: 1px solid #2f3f56;
    border-radius: 12px;
    background: #101826;
    padding: 0.55rem;
    display: grid;
    gap: 0.5rem;
    cursor: pointer;
}

.media-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.45);
}

.media-card-thumb-wrap {
    border: 1px solid #334155;
    border-radius: 10px;
    overflow: hidden;
    background: #0c131d;
}

.media-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.media-card-thumb--fallback {
    display: grid;
    place-items: center;
    color: #9fb2cc;
    font-weight: 700;
}

.media-card-meta {
    display: grid;
    gap: 0.2rem;
}

.media-card-meta strong {
    font-size: 0.86rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-card-meta .muted {
    font-size: 0.76rem;
}

.media-detail-modal-card {
    width: min(920px, 100%);
}

.media-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 0.75rem;
}

.media-detail-preview-wrap {
    border: 1px solid #334155;
    border-radius: 10px;
    background: #0c131d;
    min-height: 320px;
    display: grid;
    place-items: center;
    padding: 0.6rem;
}

.media-detail-image {
    width: 100%;
    max-height: min(62vh, 560px);
    object-fit: contain;
    border-radius: 8px;
}

.media-detail-no-preview {
    color: #9fb2cc;
}

.settings-field-hint {
    margin: -0.1rem 0 0;
    font-size: 0.82rem;
    color: #93a7c5;
}

.settings-field-ok {
    margin: 0;
    color: #86efac;
    font-size: 0.82rem;
}

.settings-form-actions {
    align-items: center;
    justify-content: space-between;
}

.settings-field-error {
    margin: 0;
    color: #fca5a5;
    font-size: 0.82rem;
}

.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.settings-brand-preview {
    display: block;
    width: auto;
    max-width: min(260px, 100%);
    max-height: 88px;
    height: auto;
    border-radius: 10px;
    border: 1px solid #31415a;
    background: #0c131d;
    padding: 0.35rem;
}

.settings-favicon-preview {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #31415a;
    background: #0c131d;
    padding: 0.35rem;
    object-fit: contain;
}

.settings-font-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.4rem;
}

.settings-font-list code {
    color: #9ec5ff;
    font-size: 0.82rem;
}

.settings-watermark-preview {
    display: block;
    max-width: min(280px, 100%);
    height: auto;
    border-radius: 10px;
    border: 1px solid #31415a;
    background: #0c131d;
    padding: 0.35rem;
}

.header-inner {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.site-brand-logo {
    display: block;
    width: auto;
    height: clamp(32px, 5vw, 72px);
    max-width: min(220px, 44vw);
    object-fit: contain;
}

.main-nav {
    display: flex;
    gap: 0.75rem;
}

.mobile-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #3b495f;
    background: #111a26;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.main-nav a,
.main-nav .nav-icon-btn,
.main-nav .nav-icon-link,
.main-nav .main-nav-submenu-toggle {
    color: var(--muted);
    text-decoration: none;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
}

.main-nav a:hover,
.main-nav .nav-icon-link:hover,
.main-nav .main-nav-submenu-toggle:hover {
    color: #fff;
    background: #202b37;
}

.main-nav-submenu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.main-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.main-nav-item--has-children .main-nav-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.main-nav-children-toggle {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
    border-radius: 0 10px 10px 0;
    padding: 0.4rem 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main-nav-children-toggle:hover {
    color: #fff;
    background: #202b37;
}

.main-nav-children {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 200px;
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    background: #101826;
    border: 1px solid #2f3f56;
    border-radius: 12px;
    padding: 0.35rem;
    z-index: 36;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

.main-nav-item--has-children::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.5rem;
}

.main-nav-children[hidden] {
    display: none !important;
}

.main-nav-children-link {
    width: 100%;
    border-radius: 8px;
    padding: 0.42rem 0.58rem;
}

.main-nav-item--has-children.is-open .main-nav-children {
    display: flex;
}

.main-nav-submenu-toggle {
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.main-nav-submenu-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 176px;
    display: none;
    flex-direction: column;
    background: #101826;
    border: 1px solid #2f3f56;
    border-radius: 12px;
    padding: 0.35rem;
    z-index: 36;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

.main-nav-submenu-panel a,
.main-nav-submenu-link {
    width: 100%;
    border-radius: 8px;
    padding: 0.42rem 0.58rem;
}

.main-nav-submenu-form {
    margin: 0;
}

.main-nav-submenu-link {
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.main-nav-submenu.is-open .main-nav-submenu-panel {
    display: flex;
}

.nav-icon-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
}

.main-nav form {
    margin: 0;
}

.site-main {
    padding-top: 0;
}

.app-shell--admin {
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

.admin-topbar {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: 0.4rem;
}

.admin-topbar-meta {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.admin-topbar-meta strong {
    font-size: 1rem;
}

.admin-topbar-meta .muted {
    font-size: 0.82rem;
}

.admin-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.admin-topbar-actions form {
    margin: 0;
}

.admin-shell {
    display: grid;
    grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
    min-height: calc(100vh - 64px);
}

.admin-sidebar {
    border-right: 1px solid var(--admin-border);
    background: var(--admin-sidebar-bg);
    padding: var(--space-3);
    position: sticky;
    top: 0;
    align-self: start;
    min-height: calc(100vh - 64px);
}

.admin-sidebar-nav {
    display: grid;
    gap: 0.35rem;
}

.admin-sidebar-link {
    color: #c7d2e5;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--admin-radius);
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-sidebar-link:hover {
    background: var(--admin-surface-2);
    border-color: var(--admin-border);
    color: #ffffff;
}

.admin-sidebar-link.is-active {
    background: color-mix(in srgb, var(--primary) 20%, var(--admin-surface-2) 80%);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--admin-border) 45%);
    color: #ffffff;
}

.admin-main {
    padding: var(--space-3) 0 var(--space-4);
    min-width: 0;
}

.admin-main .container {
    width: min(1200px, 100% - 2rem);
}

.stack {
    display: grid;
    gap: 1rem;
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0rem;
}

.app-shell--admin .card {
    background: var(--admin-surface);
    border-color: var(--admin-border);
}

.admin-page {
    gap: var(--space-3);
}

.admin-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.admin-page-head h1,
.admin-page-head h2 {
    margin: 0;
}

.admin-page-head h1 {
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    line-height: 1.18;
}

.admin-page-head h2 {
    font-size: clamp(1.08rem, 1.7vw, 1.38rem);
    line-height: 1.24;
}

.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-toolbar__create-campaign {
    background: linear-gradient(180deg, #2f6bff 0%, #2458d8 100%);
    border-color: #2458d8;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(47, 107, 255, 0.35);
}

.admin-toolbar__create-campaign:hover {
    background: linear-gradient(180deg, #255fe4 0%, #1f4fc8 100%);
    border-color: #1f4fc8;
    color: #ffffff;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.dashboard-kpi-grid > .events-empty-state {
    grid-column: 1 / -1;
}

.dashboard-kpi {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #111a28;
    padding: 0.75rem 0.85rem;
    display: grid;
    gap: 0.35rem;
}

.dashboard-kpi-label {
    margin: 0;
    color: #9fb2cc;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-kpi-value {
    font-size: 1.45rem;
    line-height: 1;
    color: #f8fafc;
}

.dashboard-kpi--info {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--admin-border) 45%);
}

.dashboard-kpi--warning {
    border-color: color-mix(in srgb, #f59e0b 60%, var(--admin-border) 40%);
}

.dashboard-kpi--danger {
    border-color: color-mix(in srgb, var(--error) 65%, var(--admin-border) 35%);
}

.dashboard-kpi--success {
    border-color: color-mix(in srgb, var(--success) 60%, var(--admin-border) 40%);
}

.dashboard-quick-actions {
    display: grid;
    gap: 0.75rem;
}

.dashboard-quick-actions h2 {
    margin: 0;
}

.dashboard-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.dashboard-quick-action-item {
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: #101827;
    padding: 0.7rem;
    display: grid;
    gap: 0.45rem;
    align-content: start;
}

.dashboard-quick-action-item p {
    margin: 0;
}

.dashboard-quick-action-item .btn {
    width: fit-content;
}

.dashboard-quick-action-form {
    margin: 0;
}

.admin-performance {
    align-content: start;
}

.admin-performance form {
    margin: 0;
}

.admin-performance .card {
    display: grid;
    gap: 0.6rem;
}

.admin-performance h2 {
    margin: 0;
}

.admin-json-pre {
    margin: 0;
    white-space: pre-wrap;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid var(--admin-border);
    background: #0c131d;
    padding: 0.7rem;
    font-size: 0.84rem;
    line-height: 1.4;
}

.campaign-frame-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 10px;
    
    background: #0c131d;
    margin-bottom: 0.85rem;
}

.admin-campaign-list {
    display: grid;
    gap: 0.5rem;
}

.admin-campaign-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #2f3f56;
    border-radius: 12px;
    background: #111925;
}

.events-create-card {
    gap: 0.85rem;
}

.events-grid-wrap {
    display: grid;
    gap: 0.4rem;
}

.events-import-guides {
    display: grid;
    gap: 0.2rem;
}

.events-import-guides p {
    margin: 0;
}

.events-create-actions {
    align-items: center;
    justify-content: space-between;
}

.events-empty-state {
    border: 1px dashed #b8c6d8;
    border-radius: 12px;
    background: #edf2f7;
    color: #1f2a3a;
    padding: 0.85rem;
    display: grid;
    gap: 0.45rem;
    align-content: flex-start;
}

.events-empty-state h3 {
    margin: 0;
    font-size: 0.96rem;
    color: #142033;
}

.events-empty-state .muted {
    color: #4c5f78;
}

.events-grid-label {
    font-weight: 600;
}

.events-grid {
    width: 100%;
    min-height: 240px;
    resize: vertical;
    border: 1px solid #31415a;
    border-radius: 10px;
    background: #0d141f;
    color: #e6edf7;
    padding: 0.75rem;
    line-height: 1.4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9rem;
}

.events-preview {
    display: grid;
    gap: 0.65rem;
}

.events-preview-table-wrap {
    overflow-x: auto;
}

body.app-shell.app-shell--admin .admin-main .events-template-page {
    width: min(1120px, 100% - 2rem);
    margin: 0 auto;
    padding: 0.75rem;
    display: grid;
    gap: 0.65rem;
}

.events-template-hero {
    border-radius: 18px;
    border: 1px solid #1f3362;
    background: linear-gradient(140deg, #0f1b38, #15284f);
    color: #ffffff;
    padding: 0.75rem;
    display: grid;
    gap: 0.55rem;
}

.events-template-hero__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

body.app-shell.app-shell--admin .admin-main .events-template-hero h1 {
    margin: 0;
    color: #ffffff;
    font: 800 1.15rem/1.16 "Plus Jakarta Sans", Manrope, system-ui, sans-serif;
    word-break: break-word;
}

.events-template-hero p {
    margin: 0.28rem 0 0;
    color: #c6d2ea;
    font-size: 0.79rem;
    line-height: 1.4;
}

.events-template-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.42rem 0.6rem;
    white-space: nowrap;
}

.events-template-hero__status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #42d392;
    box-shadow: 0 0 0 5px rgba(66, 211, 146, 0.24);
    animation: events-template-status-pulse 1.35s ease-in-out infinite;
}

@keyframes events-template-status-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.18);
        opacity: 0.72;
    }
}

.events-template-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.events-template-form {
    display: grid;
    gap: 0.65rem;
}

.events-template-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0.65rem;
    align-items: start;
}

.events-template-right-col {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.events-template-card {
    border: 1px solid #d8e3f4;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    min-width: 0;
    padding: 0.65rem;
}

.events-template-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}

.events-template-card__head h3 {
    margin: 0;
    font: 800 1rem/1.2 "Plus Jakarta Sans", Manrope, system-ui, sans-serif;
}

.events-template-card__hint {
    color: #5f6f92;
    font-size: 0.74rem;
    font-weight: 700;
}

.events-template-preview {
    position: sticky;
    top: 0.75rem;
}

.events-template-canvas {
    display: grid;
    gap: 0.5rem;
}

.events-template-stage {
    position: relative;
    width: 100%;
    border-radius: 14px;
    border: 1px solid #c8d6ef;
    background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
    overflow: hidden;
}

.events-template-frame {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
    background: #0f1b38;
}

.events-template-frame--empty {
    min-height: 380px;
    display: grid;
    place-items: center;
    color: #5f6f92;
    padding: 1rem;
}

.events-template-overlay {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

.events-template-text-preview {
    position: absolute;
    transform: translate(-50%, -100%);
    max-width: min(88%, 560px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.events-template-qr-zone {
    position: absolute;
    border: 2px dashed #ef4f2a;
    background: rgba(239, 79, 42, 0.18);
    border-radius: 10px;
    pointer-events: none;
}

.events-template-handle {
    position: absolute;
    pointer-events: auto;
    border: 1px solid #c7d7f2;
    background: rgba(15, 27, 56, 0.9);
    color: #f8fafc;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    line-height: 1.2;
    cursor: grab;
    transform: translate(-50%, -50%);
    user-select: none;
}

.events-template-handle:active,
.events-template-handle.is-dragging {
    cursor: grabbing;
}

.events-template-handle--qr {
    border-color: #ef4f2a;
    color: #ffd8ce;
}

.events-template-settings,
.events-template-placeholders {
    display: grid;
    gap: 0.5rem;
}

.events-template-settings label,
.events-template-placeholders label {
    display: grid;
    gap: 0.28rem;
    font-size: 0.76rem;
    color: #43547c;
    font-weight: 700;
    min-width: 0;
}

.events-template-settings input,
.events-template-settings select,
.events-template-placeholders input,
.events-template-placeholders select {
    width: 100%;
    min-height: 38px;
    border: 1px solid #c7d7f2;
    border-radius: 9px;
    padding: 0.45rem 0.55rem;
    font: 600 0.84rem/1.2 Manrope, system-ui, sans-serif;
    color: #12244a;
    background: #ffffff;
}

.events-template-subcard {
    border: 1px solid #d4dfef;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.5rem;
    display: grid;
    gap: 0.45rem;
}

.events-template-subcard h4 {
    margin: 0;
    font: 800 0.86rem/1.2 "Plus Jakarta Sans", Manrope, system-ui, sans-serif;
    color: #1a2f58;
}

.events-template-actions__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.events-template-actions__row .btn {
    min-height: 42px;
}

.events-preview-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.events-preview-table th,
.events-preview-table td {
    border-bottom: 1px solid #2f3f56;
    padding: 0.45rem 0.55rem;
    text-align: left;
}

.events-preview-table th {
    text-transform: uppercase;
    font-size: 0.76rem;
    color: #9fb2cc;
    letter-spacing: 0.03em;
}

.events-list {
    display: grid;
    gap: 0.75rem;
}

.events-table-card {
    gap: 0.9rem;
}

.events-table-head {
    display: grid;
    gap: 0.7rem;
}

.events-table-head h2 {
    margin: 0;
}

.events-filter-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: end;
}

.events-filter-form label {
    display: grid;
    gap: 0.3rem;
    font-size: 0.86rem;
    color: var(--muted);
}

.events-filter-form input,
.events-filter-form select {
    border: 1px solid #31415a;
    border-radius: 10px;
    background: #0d141f;
    color: #e6edf7;
    padding: 0.45rem 0.55rem;
}

.events-admin-table {
    min-width: 980px;
}

.events-sort-link {
    color: inherit;
    text-decoration: none;
}

.events-sort-link:hover {
    text-decoration: underline;
}

.events-inline-actions {
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.events-item {
    border: 1px solid #2f3f56;
    border-radius: 12px;
    background: #111925;
    padding: 0.75rem;
    display: grid;
    gap: 0.7rem;
}

.profile-social-item {
    border: 1px solid #c8d6e6;
    background: linear-gradient(180deg, #f7fafe 0%, #eef4fb 100%);
}

.profile-social-item .events-item-head h3 {
    color: #1a2a3f;
}

.profile-social-item .muted {
    color: #516784;
}

.events-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.events-item-head h3 {
    margin: 0;
    font-size: 1rem;
}

.events-item-metrics {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    font-size: 0.92rem;
}

.events-item-time {
    margin: 0;
    font-size: 0.85rem;
}

.events-item-actions {
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-events-create-page {
    gap: 0.9rem;
}

body.app-shell.app-shell--admin .thp-events-create-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.95rem;
    border-radius: 16px;
    border: 1px solid #d7e3f5;
    background:
        radial-gradient(circle at 8% 6%, #fff2d7 0, #fff2d7 20%, transparent 48%),
        radial-gradient(circle at 90% 18%, #dce9ff 0, #dce9ff 24%, transparent 52%),
        radial-gradient(circle at 68% 100%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

body.app-shell.app-shell--admin .thp-events-create-head h1 {
    margin: 0;
    font-size: clamp(1.34rem, 2.2vw, 1.62rem);
    line-height: 1.14;
}

body.app-shell.app-shell--admin .thp-events-create-head .muted {
    margin: 0.35rem 0 0;
    max-width: 70ch;
    color: #4c5f84;
}

body.app-shell.app-shell--admin .thp-events-create-head-actions {
    justify-content: flex-end;
}

body.app-shell.app-shell--admin .thp-events-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 0.9rem;
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-events-create-form-card {
    padding: 0.95rem;
    border-radius: 16px;
    border-color: #d7e3f5;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
}

body.app-shell.app-shell--admin .thp-events-create-form-card h2 {
    margin: 0;
}

body.app-shell.app-shell--admin .thp-events-section-sub {
    margin: -0.1rem 0 0.2rem;
    font-size: 0.86rem;
    color: #5a6b8f;
}

body.app-shell.app-shell--admin .thp-events-grid-wrap {
    gap: 0.45rem;
}

body.app-shell.app-shell--admin .thp-events-grid-hint code,
body.app-shell.app-shell--admin .thp-events-long-hint-box code {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    border: 1px solid #d7e3f5;
    background: #f7faff;
    color: #2b416d;
    font-size: 0.79rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-events-long-hint-box {
    border: 1px solid #d7e3f5;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.62rem 0.72rem;
    display: grid;
    gap: 0.22rem;
}

body.app-shell.app-shell--admin .thp-events-long-hint-box .muted {
    margin: 0;
    font-size: 0.79rem;
    line-height: 1.42;
    color: #5a6b8f;
}

body.app-shell.app-shell--admin .thp-events-create-form-card .events-grid {
    min-height: 260px;
    border: 1px solid #cedaf0;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2b45;
    font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.92rem;
    line-height: 1.42;
}

body.app-shell.app-shell--admin .thp-events-create-actions {
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-events-btn-primary {
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #ffffff;
}

body.app-shell.app-shell--admin .thp-events-btn-primary:hover {
    background: #d8411f;
    border-color: #d8411f;
    color: #ffffff;
}

body.app-shell.app-shell--admin .thp-events-preview {
    margin-top: 0.35rem;
    padding: 0.85rem;
    border-radius: 14px;
    border-color: #d7e3f5;
    background: #ffffff;
}

body.app-shell.app-shell--admin .thp-events-preview .events-preview-table {
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-events-create-right-stack {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-events-side-card {
    padding: 0.95rem;
    border-radius: 16px;
    border-color: #d7e3f5;
    background: rgba(255, 255, 255, 0.95);
}

body.app-shell.app-shell--admin .thp-events-side-card h2 {
    margin: 0;
    font-size: 1.03rem;
}

body.app-shell.app-shell--admin .thp-events-side-sub {
    margin: 0.4rem 0 0;
    color: #5c6d91;
    font-size: 0.84rem;
}

body.app-shell.app-shell--admin .thp-events-mini-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

body.app-shell.app-shell--admin .thp-events-mini-item {
    border: 1px solid #d7e3f5;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.6rem 0.68rem;
}

body.app-shell.app-shell--admin .thp-events-mini-item strong {
    display: block;
    font-size: 0.9rem;
    color: #213963;
}

body.app-shell.app-shell--admin .thp-events-mini-item p {
    margin: 0.2rem 0 0;
    color: #5f7094;
    font-size: 0.82rem;
}

body.app-shell.app-shell--admin .thp-events-drafts-list {
    margin-top: 0.72rem;
}

body.app-shell.app-shell--admin .thp-events-draft-item {
    border: 1px solid #d7e3f5;
    background: #ffffff;
    box-shadow: none;
}

body.app-shell.app-shell--admin .thp-events-draft-item .events-item-head {
    align-items: center;
}

body.app-shell.app-shell--admin .thp-events-draft-item .events-item-head h3 {
    font-size: 0.95rem;
}

body.app-shell.app-shell--admin .thp-events-draft-item .muted {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
}

body.app-shell.app-shell--admin .thp-events-empty-state {
    border-color: #d7e3f5;
    background: #ffffff;
}

@media (max-width: 1120px) {
    body.app-shell.app-shell--admin .thp-events-create-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-events-create-head {
        padding: 0.82rem;
    }

    body.app-shell.app-shell--admin .thp-events-create-head-actions {
        width: 100%;
        justify-content: stretch;
    }

    body.app-shell.app-shell--admin .thp-events-create-head-actions .btn {
        flex: 1 1 100%;
    }

    body.app-shell.app-shell--admin .thp-events-create-form-card,
    body.app-shell.app-shell--admin .thp-events-side-card {
        padding: 0.82rem;
    }

    body.app-shell.app-shell--admin .thp-events-create-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-events-create-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-events-create-actions [data-form-dirty-indicator] {
        order: 3;
    }

    body.app-shell.app-shell--admin .thp-events-draft-item .events-item-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

body.app-shell.app-shell--admin .thp-admin-events-page {
    gap: 0.72rem;
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
    padding-top: 0.55rem;
    padding-bottom: 0.65rem;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
    border-radius: 16px;
}

body.app-shell.app-shell--admin .thp-admin-events-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.8rem 0.95rem;
    border-radius: 16px;
    border: 1px solid #d1def2;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(17, 34, 74, 0.07);
    backdrop-filter: blur(8px);
}

body.app-shell.app-shell--admin .thp-admin-events-head h1 {
    margin: 0;
    font-size: clamp(1.34rem, 2.2vw, 1.62rem);
    line-height: 1.14;
}

body.app-shell.app-shell--admin .thp-admin-events-head .muted {
    margin: 0.35rem 0 0;
    max-width: 70ch;
    color: #4c5f84;
}

body.app-shell.app-shell--admin .thp-admin-events-head-actions {
    justify-content: flex-end;
}

body.app-shell.app-shell--admin .thp-admin-events-create-btn,
body.app-shell.app-shell--admin .thp-admin-events-create-btn:not(.btn--outline) {
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #ffffff;
    box-shadow: none;
}

body.app-shell.app-shell--admin .thp-admin-events-create-btn:hover,
body.app-shell.app-shell--admin .thp-admin-events-create-btn:not(.btn--outline):hover {
    background: #d8411f;
    border-color: #d8411f;
    color: #ffffff;
}

body.app-shell.app-shell--admin .thp-admin-events-filters {
    padding: 0.95rem;
    border-radius: 16px;
    border-color: #d7e3f5;
    background: rgba(255, 255, 255, 0.95);
}

body.app-shell.app-shell--admin .thp-admin-events-filters h2 {
    margin: 0;
    font-size: 1.04rem;
}

body.app-shell.app-shell--admin .thp-admin-events-filters-sub {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
    color: #5a6b8f;
}

body.app-shell.app-shell--admin .thp-admin-events-filter-grid {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.62rem;
    align-items: end;
}

body.app-shell.app-shell--admin .thp-admin-events-filter-grid input,
body.app-shell.app-shell--admin .thp-admin-events-filter-grid select {
    border: 1px solid #cfdbf0;
    border-radius: 11px;
    min-height: 38px;
    padding: 0.45rem 0.55rem;
    background: #ffffff;
    color: #1c2e56;
}

body.app-shell.app-shell--admin .thp-admin-events-filter-actions {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

body.app-shell.app-shell--admin .thp-admin-events-filter-actions .btn {
    width: 100%;
}

body.app-shell.app-shell--admin .thp-admin-events-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.62rem;
}

body.app-shell.app-shell--admin .thp-admin-events-kpi {
    border: 1px solid #d7e3f5;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.65rem 0.72rem;
    display: grid;
    gap: 0.2rem;
}

body.app-shell.app-shell--admin .thp-admin-events-kpi small {
    color: #5a6d94;
    font-size: 0.78rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-events-kpi strong {
    color: #132547;
    font-size: 1.15rem;
    line-height: 1.15;
}

body.app-shell.app-shell--admin .thp-admin-events-table-card {
    padding: 0.95rem;
    border-radius: 16px;
    border-color: #d7e3f5;
    background: rgba(255, 255, 255, 0.95);
}

body.app-shell.app-shell--admin .thp-admin-events-table-head {
    margin-bottom: 0.55rem;
}

body.app-shell.app-shell--admin .thp-admin-events-table-head .muted {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
}

body.app-shell.app-shell--admin .thp-admin-events-table-wrap {
    border: 1px solid #d6e0f1;
    border-radius: 12px;
}

body.app-shell.app-shell--admin .thp-admin-events-table-wrap .events-admin-table {
    min-width: 960px;
}

@media (max-width: 1200px) {
    body.app-shell.app-shell--admin .thp-admin-events-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.app-shell.app-shell--admin .thp-admin-events-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-admin-events-head {
        padding: 0.82rem;
    }

    body.app-shell.app-shell--admin .thp-admin-events-head-actions {
        width: 100%;
        justify-content: stretch;
    }

    body.app-shell.app-shell--admin .thp-admin-events-head-actions .btn {
        flex: 1 1 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-events-filters,
    body.app-shell.app-shell--admin .thp-admin-events-table-card {
        padding: 0.82rem;
    }

    body.app-shell.app-shell--admin .thp-admin-events-filter-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-events-kpis {
        grid-template-columns: 1fr;
    }
}

body.app-shell.app-shell--admin .thp-event-downloads-page {
    gap: 0.72rem;
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
    padding-top: 0.55rem;
    padding-bottom: 0.65rem;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
    border-radius: 16px;
}

body.app-shell.app-shell--admin .thp-event-downloads-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.8rem 0.95rem;
    border-radius: 16px;
    border: 1px solid #d1def2;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(17, 34, 74, 0.07);
    backdrop-filter: blur(8px);
}

body.app-shell.app-shell--admin .thp-event-downloads-head h1 {
    margin: 0;
    font-size: clamp(1.34rem, 2.2vw, 1.62rem);
    line-height: 1.14;
}

body.app-shell.app-shell--admin .thp-event-downloads-head .muted {
    margin: 0.35rem 0 0;
    max-width: 70ch;
    color: #4c5f84;
}

body.app-shell.app-shell--admin .thp-event-downloads-head-actions {
    justify-content: flex-end;
}

body.app-shell.app-shell--admin .thp-event-downloads-hero {
    padding: 0.95rem;
    border-radius: 16px;
    border-color: #d7e3f5;
    background: rgba(255, 255, 255, 0.95);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 0.85rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-hero h2 {
    margin: 0;
    font-size: 1.04rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-sub {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
    color: #5a6b8f;
}

body.app-shell.app-shell--admin .thp-event-downloads-meta {
    margin-top: 0.72rem;
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.62rem 0.72rem;
    display: grid;
    gap: 0.28rem;
    font-size: 0.88rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-meta strong {
    color: #1f3258;
}

body.app-shell.app-shell--admin .thp-event-downloads-meta code {
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    border: 1px solid #d8e3f4;
    background: #f7faff;
    color: #29406d;
    font-weight: 700;
    font-size: 0.78rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-status-grid {
    margin-top: 0.62rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-status-card {
    border-radius: 12px;
    padding: 0.56rem 0.65rem;
    display: grid;
    gap: 0.18rem;
    border: 1px solid #d6e0f1;
    background: #f7faff;
}

body.app-shell.app-shell--admin .thp-event-downloads-status-card small {
    color: #2f4670;
    font-size: 0.78rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-event-downloads-status-card strong {
    font-size: 0.95rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-status-card.is-ready {
    border-color: #b8e8cf;
    background: #e9f9ef;
}

body.app-shell.app-shell--admin .thp-event-downloads-status-card.is-ready strong {
    color: #157347;
}

body.app-shell.app-shell--admin .thp-event-downloads-status-card.is-pending strong {
    color: #915f00;
}

body.app-shell.app-shell--admin .thp-event-downloads-panel {
    border: 1px solid #d6e0f1;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.72rem;
    display: grid;
    gap: 0.52rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-panel h3 {
    margin: 0;
    font-size: 1rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-actions {
    display: grid;
    gap: 0.5rem;
}

body.app-shell.app-shell--admin .thp-event-download-btn {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.55rem;
    align-items: center;
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid #cedaf1;
    background: #ffffff;
    color: #162d56;
    text-decoration: none;
    padding: 0.55rem 0.68rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-event-download-btn:hover {
    background: #f6f9ff;
    border-color: #bcd0f1;
}

body.app-shell.app-shell--admin .thp-event-download-btn .ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #24457d;
}

body.app-shell.app-shell--admin .thp-event-download-btn .ico svg {
    width: 16px;
    height: 16px;
}

body.app-shell.app-shell--admin .thp-event-download-btn small {
    display: block;
    color: #607197;
    font-size: 0.77rem;
    font-weight: 600;
    margin-top: 0.12rem;
}

body.app-shell.app-shell--admin .thp-event-download-btn .cta {
    color: #1f3e75;
    font-size: 0.82rem;
}

body.app-shell.app-shell--admin .thp-event-download-btn.primary {
    border-color: #f5b8aa;
    background: linear-gradient(180deg, #fff2ee 0%, #ffe9e2 100%);
}

body.app-shell.app-shell--admin .thp-event-download-btn.primary .ico {
    background: #ffd8cd;
    color: #8f2f1c;
}

body.app-shell.app-shell--admin .thp-event-downloads-tips {
    padding: 0.95rem;
    border-radius: 16px;
    border-color: #d7e3f5;
    background: rgba(255, 255, 255, 0.95);
}

body.app-shell.app-shell--admin .thp-event-downloads-tips h3 {
    margin: 0;
    font-size: 1rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-tip-list {
    margin-top: 0.62rem;
    display: grid;
    gap: 0.5rem;
}

body.app-shell.app-shell--admin .thp-event-downloads-tip {
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.62rem 0.72rem;
    font-size: 0.84rem;
    color: #4f628a;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    body.app-shell.app-shell--admin .thp-event-downloads-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-event-downloads-head {
        padding: 0.82rem;
    }

    body.app-shell.app-shell--admin .thp-event-downloads-head-actions {
        width: 100%;
        justify-content: stretch;
    }

    body.app-shell.app-shell--admin .thp-event-downloads-head-actions .btn {
        flex: 1 1 100%;
    }

    body.app-shell.app-shell--admin .thp-event-downloads-hero,
    body.app-shell.app-shell--admin .thp-event-downloads-tips {
        padding: 0.82rem;
    }

    body.app-shell.app-shell--admin .thp-event-downloads-status-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-event-download-btn {
        grid-template-columns: auto 1fr;
    }

    body.app-shell.app-shell--admin .thp-event-download-btn .cta {
        display: none;
    }
}

body.app-shell.app-shell--admin .events-detail-page {
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
    gap: 0.85rem;
}

body.app-shell.app-shell--admin .events-detail-hero {
    border-radius: 20px;
    border: 1px solid #1f3362;
    background: linear-gradient(140deg, #0f1b38, #15284f);
    color: #ffffff;
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
}

body.app-shell.app-shell--admin .events-detail-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .events-detail-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: 1.7rem;
    line-height: 1.15;
}

body.app-shell.app-shell--admin .admin-main .events-detail-hero h1 {
    color: #ffffff;
}

body.app-shell.app-shell--admin .events-detail-hero p {
    margin: 0.35rem 0 0;
    color: #c6d2ea;
}

body.app-shell.app-shell--admin .events-detail-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
}

body.app-shell.app-shell--admin .events-detail-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #42d392;
    box-shadow: 0 0 0 5px rgba(66, 211, 146, 0.2);
    animation: events-status-pulse 1.3s ease-in-out infinite;
}

body.app-shell.app-shell--admin .events-detail-status--draft::before {
    background: #fbbf24;
    box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.24);
}

body.app-shell.app-shell--admin .events-detail-status--generating::before {
    background: #60a5fa;
    box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.24);
}

body.app-shell.app-shell--admin .events-detail-status--ready::before {
    background: #42d392;
    box-shadow: 0 0 0 5px rgba(66, 211, 146, 0.2);
}

body.app-shell.app-shell--admin .events-detail-status--ended::before,
body.app-shell.app-shell--admin .events-detail-status--scrubbed::before {
    background: #94a3b8;
    box-shadow: 0 0 0 5px rgba(148, 163, 184, 0.24);
}

@keyframes events-status-pulse {
    0%,
    100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.72; }
}

body.app-shell.app-shell--admin .events-detail-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.app-shell.app-shell--admin .events-detail-hero-actions .btn {
    min-height: 38px;
}

body.app-shell.app-shell--admin .events-detail-hero-actions .btn:not(.btn--outline) {
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #ffffff;
}

body.app-shell.app-shell--admin .events-detail-hero-actions .btn:not(.btn--outline):hover {
    background: #d8411f;
    border-color: #d8411f;
}

body.app-shell.app-shell--admin .events-detail-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
}

body.app-shell.app-shell--admin .events-detail-kpi {
    border: 1px solid #d8e3f4;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.625rem 0.75rem;
}

body.app-shell.app-shell--admin .events-detail-kpi span {
    display: block;
    font-size: 0.78rem;
    color: #607197;
    font-weight: 700;
}

body.app-shell.app-shell--admin .events-detail-kpi strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.35rem;
    line-height: 1.1;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .events-detail-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 0.85rem;
    align-items: start;
}

body.app-shell.app-shell--admin .events-detail-main {
    min-width: 0;
}

body.app-shell.app-shell--admin .events-detail-card {
    border: 1px solid #d9e3f2;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    padding: 0.875rem;
    min-width: 0;
}

body.app-shell.app-shell--admin .events-detail-module h2 {
    margin: 0;
    font-size: 1.1rem;
}

body.app-shell.app-shell--admin .events-detail-sub {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

body.app-shell.app-shell--admin .events-detail-queue-grid {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

body.app-shell.app-shell--admin .events-detail-queue-item {
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.55rem 0.625rem;
}

body.app-shell.app-shell--admin .events-detail-queue-item strong {
    font-size: 0.95rem;
}

body.app-shell.app-shell--admin .events-detail-queue-item p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

body.app-shell.app-shell--admin .events-detail-toolbar {
    margin-top: 0.75rem;
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.app-shell.app-shell--admin .events-detail-filters {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(210px, 1.25fr);
    gap: 0.5rem;
    align-items: end;
}

body.app-shell.app-shell--admin .events-detail-filters .field {
    display: grid;
    gap: 0.35rem;
}

body.app-shell.app-shell--admin .events-detail-filters .field label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #4f5f84;
}

body.app-shell.app-shell--admin .events-detail-filters .field select {
    width: 100%;
    border: 1px solid #cfdbf0;
    border-radius: 10px;
    min-height: 38px;
    padding: 0.5rem 0.625rem;
    color: #1c2e56;
    background: #ffffff;
}

body.app-shell.app-shell--admin .events-detail-filters .field .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
}

body.app-shell.app-shell--admin .events-detail-selection-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.55rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .events-detail-table-wrap {
    margin-top: 0.75rem;
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #ffffff;
}

body.app-shell.app-shell--admin .events-detail-table-wrap .events-preview-table {
    min-width: 860px;
}

body.app-shell.app-shell--admin .events-detail-table-wrap th,
body.app-shell.app-shell--admin .events-detail-table-wrap td {
    padding: 0.55rem 0.625rem;
    border-bottom: 1px solid #edf2fb;
}

body.app-shell.app-shell--admin .events-detail-table-wrap th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #55678f;
    background: #f7faff;
}

body.app-shell.app-shell--admin .events-detail-rail {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: 1fr;
    align-items: start;
    position: sticky;
    top: 1.125rem;
    width: 100%;
    max-width: 370px;
    justify-self: end;
    z-index: 2;
}

body.app-shell.app-shell--admin .events-detail-rail h3 {
    margin: 0;
    font-size: 1rem;
}

body.app-shell.app-shell--admin .events-detail-quick-list {
    margin-top: 0.625rem;
    display: grid;
    gap: 0.5rem;
}

body.app-shell.app-shell--admin .events-detail-quick-list .btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

body.app-shell.app-shell--admin .events-detail-hint {
    margin-top: 0.625rem;
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.625rem 0.75rem;
    color: #54658a;
    font-size: 0.84rem;
    line-height: 1.45;
}

body.app-shell.app-shell--admin .events-detail-hint code {
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #d8e3f4;
    background: #f7faff;
    color: #29406d;
    font-weight: 700;
}

.events-action-rail form {
    margin: 0;
}

.events-job-summary {
    min-height: 1.25rem;
}

.events-job-summary--error {
    color: #f87171;
}

.events-job-summary--success {
    color: #60a5fa;
}

.is-loading {
    opacity: 0.84;
    cursor: wait;
    pointer-events: none;
}

.checkin-page {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 0.75rem 0.75rem 1rem;
    display: grid;
    gap: 0.65rem;
}

.checkin-card {
    border: 1px solid #d8e3f4;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    min-width: 0;
}

.checkin-hero {
    border-radius: 18px;
    border: 1px solid #1f3362;
    background: linear-gradient(140deg, #0f1b38, #15284f);
    color: #ffffff;
    padding: 0.75rem;
}

.checkin-hero__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.checkin-hero h1 {
    margin: 0;
    color: #ffffff;
    font: 800 1.15rem/1.16 "Plus Jakarta Sans", Manrope, system-ui, sans-serif;
    word-break: break-word;
}

.checkin-hero p {
    margin: 0.3rem 0 0;
    color: #c6d2ea;
    font-size: 0.78rem;
    line-height: 1.4;
}

.checkin-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.42rem 0.6rem;
    white-space: nowrap;
}

.checkin-hero__status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #42d392;
    box-shadow: 0 0 0 5px rgba(66, 211, 146, 0.24);
    animation: checkin-status-pulse 1.35s ease-in-out infinite;
}

@keyframes checkin-status-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.18);
        opacity: 0.72;
    }
}

.checkin-scanner-wrap {
    padding: 0.65rem;
    display: grid;
    gap: 0.55rem;
}

.checkin-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.checkin-card__head h2 {
    margin: 0;
    font: 800 1rem/1.2 "Plus Jakarta Sans", Manrope, system-ui, sans-serif;
}

.checkin-card__hint {
    color: #5f6f92;
    font-size: 0.74rem;
    font-weight: 700;
}

.checkin-reader {
    width: 100%;
    min-height: 245px;
    border: 1px solid #c8d6ef;
    border-radius: 14px;
    background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
    overflow: hidden;
}

.checkin-reader video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkin-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.checkin-controls .btn {
    min-height: 42px;
}

.checkin-help {
    margin: 0;
    color: #4f628b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.checkin-status-card {
    padding: 0.65rem;
    display: grid;
    gap: 0.45rem;
}

.checkin-status-card h3 {
    margin: 0;
    font: 800 0.98rem/1.2 "Plus Jakarta Sans", Manrope, system-ui, sans-serif;
}

.checkin-status-card [data-checkin-status-message] {
    margin: 0;
}

.checkin-status-card--info {
    border-color: #bfd6fb;
    background: #eff5ff;
}

.checkin-status-card--success {
    border-color: #c8ebd9;
    background: #effcf5;
}

.checkin-status-card--warning {
    border-color: #fcd34d;
    background: #fffbeb;
}

.checkin-status-card--warning h3,
.checkin-status-card--warning [data-checkin-status-message],
.checkin-status-card--warning .checkin-status-meta dd {
    color: #92400e;
}

.checkin-status-card--error {
    border-color: #fca5a5;
    background: #fef2f2;
}

.checkin-status-card--error h3,
.checkin-status-card--error [data-checkin-status-message],
.checkin-status-card--error .checkin-status-meta dd {
    color: #991b1b;
}

.checkin-status-meta {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.checkin-status-meta div {
    border: 1px solid #d4dfef;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.45rem 0.5rem;
    min-width: 0;
}

.checkin-status-meta dt {
    display: block;
    margin: 0;
    color: #607197;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.checkin-status-meta dd {
    display: block;
    margin: 0.14rem 0 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: #12244a;
    word-break: break-word;
}

.checkin-history-card {
    padding: 0.65rem;
}

.checkin-history-card h3 {
    margin: 0;
    font: 800 0.98rem/1.2 "Plus Jakarta Sans", Manrope, system-ui, sans-serif;
}

.checkin-history-list {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.45rem;
}

.checkin-history-item {
    border: 1px solid #d5e0f1;
    border-radius: 11px;
    background: #ffffff;
    padding: 0.48rem 0.56rem;
    display: grid;
    gap: 0.16rem;
}

.checkin-history-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a2f58;
}

.checkin-history-meta {
    color: #61739a;
    font-size: 0.76rem;
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.checkin-history-chip {
    border-radius: 999px;
    border: 1px solid #bfe6ce;
    background: #ecfdf3;
    color: #0f6944;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.42rem;
}

.checkin-history-empty {
    margin: 0;
    color: #61739a;
    font-size: 0.8rem;
}

@media (min-width: 820px) {
    .checkin-page {
        width: min(980px, 96vw);
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: start;
    }

    .checkin-hero {
        grid-column: 1 / -1;
    }

    .checkin-scanner-wrap {
        min-height: 560px;
    }

    .checkin-reader {
        min-height: 380px;
    }
}

.admin-campaign-thumb-link {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #31415a;
    background: #0c131d;
}

.admin-campaign-thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    background: #0c131d;
}

.admin-campaign-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--muted);
}

.admin-campaign-meta {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.admin-campaign-title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.25;
}

.admin-campaign-title a {
    color: var(--text);
    text-decoration: none;
}

.admin-campaign-title a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.admin-campaign-subline {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--muted);
}

.visibility-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

.visibility-badge--public {
    color: #166534;
    background: #dcfce7;
    border-color: #86efac;
}

.visibility-badge--unlisted {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}

.visibility-badge--private {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}

.campaign-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

.campaign-type-badge--avatar {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #93c5fd;
}

.campaign-type-badge--card {
    color: #6b21a8;
    background: #f3e8ff;
    border-color: #d8b4fe;
}

.admin-campaign-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #3b495f;
    background: #182232;
    color: #e5ecff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    padding: 0;
}

.icon-btn--danger {
    border-color: #6b2e2e;
    background: #2a1414;
    color: #fecaca;
}

.admin-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 18, 0.78);
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.admin-modal[hidden] {
    display: none !important;
}

.admin-modal-card {
    width: min(520px, 100%);
    background: #0f1620;
    border: 1px solid #2f3c52;
    border-radius: 14px;
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
}

.admin-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.admin-modal-head h3 {
    margin: 0;
}

.campaign-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.campaign-title-link {
    margin-top: 0;
}

.campaign-qr-image {
    width: 180px;
    height: 180px;
    max-width: 100%;
    display: block;
    border-radius: 8px;
    border: 1px solid #344255;
    background: #0c131d;
}

.campaign-share-wrap {
    margin-top: 0.9rem;
    border: 1px dashed #3c4a60;
    border-radius: 12px;
    padding: 0.85rem;
    background: #0a111a;
}

.campaign-share-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
}

.campaign-share-qr {
    display: flex;
    justify-content: center;
}

.campaign-share-info {
    display: grid;
    gap: 0.55rem;
}

.campaign-share-title {
    margin: 0;
}

.campaign-share-subtitle {
    margin: 0;
}

.campaign-share-label {
    font-size: 0.88rem;
    color: var(--muted);
}

.campaign-share-link-input {
    width: 100%;
}

.campaign-share-actions {
    margin-top: 0.2rem;
}

@media (min-width: 920px) {
    .campaign-share-content {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .campaign-share-qr {
        justify-content: flex-start;
    }
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.card h2,
.card h3 {
    margin-top: 0;
}

.card-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.form-stack {
    display: grid;
    gap: 0.9rem;
}

label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.95rem;
}

input,
select,
textarea,
button {
    font: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.ui-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

input,
select,
textarea {
    width: 100%;
    color: var(--text);
    background: #0f1620;
    border: 1px solid #344255;
    border-radius: 10px;
    padding: 0.62rem 0.75rem;
}

textarea {
    resize: vertical;
}

.form-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 900px) {
    .form-inline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.form-actions,
.button-row {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pagination-label {
    color: var(--muted);
    font-size: 0.95rem;
}

.home-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.58rem 0.96rem;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 38px;
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.btn--small {
    min-height: 34px;
    padding: 0.38rem 0.72rem;
    font-size: 0.84rem;
    border-radius: 8px;
}

.btn--active {
    border-color: color-mix(in srgb, var(--primary) 72%, #ffffff 0%);
    background: color-mix(in srgb, var(--primary) 24%, #111a26 76%);
    color: #ffffff;
}

.btn--outline {
    background: transparent;
    border-color: #3b495f;
    color: var(--text);
}

.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}

.mask-preview-wrap,
.editor-canvas-wrap {
    width: 100%;
    overflow: auto;
    border: 1px dashed #3c4a60;
    border-radius: 12px;
    padding: 0.75rem;
    background: #0a111a;
}

.frame-upload-preview {
    border: 1px dashed #3c4a60;
    border-radius: 12px;
    padding: 0.75rem;
    background: #0a111a;
}

.frame-upload-preview__image {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #344255;
    background: #0c131d;
}

.avatar-variants-builder {
    display: grid;
    gap: 0.65rem;
}

.frame-variants-preview {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.frame-variant-item {
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 0.5rem;
    background: #0f1723;
}

.frame-variant-item__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #0c131d;
}

.frame-variant-item__label {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    text-align: center;
}

.frame-variants-selector {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.7rem;
}

.frame-variant-button {
    width: 100%;
    display: grid;
    gap: 0.42rem;
    justify-items: center;
    padding: 0.5rem;
}

.card-placeholder-builder {
    border: 1px dashed #3c4a60;
    background: #0a111a;
}

.creator-card-workspace {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1fr);
}

.creator-card-preview-wrap,
.creator-card-fields-wrap {
    display: grid;
    gap: 0.6rem;
}

.creator-card-preview {
    position: relative;
    border: 1px solid #334155;
    border-radius: 12px;
    background: #050b12;
    padding: 0.6rem;
    min-height: 220px;
    overflow: hidden;
}

#creator-card-canvas {
    display: block;
    margin-inline: auto;
    background: #101826;
}

.card-preview-empty {
    margin: 0;
    text-align: center;
    padding: 1.1rem 0.6rem;
}

@media (min-width: 1040px) {
    .creator-card-workspace {
        grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.9fr);
        align-items: start;
    }
}

.placeholder-list {
    display: grid;
    gap: 0.75rem;
}

.card-builder-section {
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 0.7rem;
    background: rgba(15, 23, 35, 0.8);
    display: grid;
    gap: 0.65rem;
}

.card-builder-section-toggle {
    justify-content: space-between;
    width: 100%;
}

.card-builder-section-toggle[aria-expanded="false"] {
    opacity: 0.85;
}

.card-builder-section-panel[hidden] {
    display: none !important;
}

.image-placeholder-list {
    margin-top: 0.55rem;
}

.image-placeholder-item {
    border-color: #2f5a3e;
    background: #0d1b14;
}

.image-placeholder-item .placeholder-toggle {
    border-color: #2f5a3e;
    background: #102319;
}

.image-placeholder-item .placeholder-toggle strong {
    color: #d1fae5;
}

.placeholder-item {
    border: 1px solid #324156;
    border-radius: 12px;
    background: #0f1723;
    padding: 0.65rem;
    display: grid;
    gap: 0.55rem;
}

.placeholder-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    flex-wrap: nowrap;
}

.placeholder-toggle {
    width: 100%;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #111c2a;
    color: #e5ecff;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.48rem 0.62rem;
    cursor: pointer;
    text-align: left;
}

.placeholder-toggle strong {
    font-size: 0.92rem;
    line-height: 1.2;
}

.placeholder-toggle-icon {
    font-size: 0.92rem;
    transition: transform 0.2s ease;
}

.placeholder-item--expanded .placeholder-toggle-icon {
    transform: rotate(180deg);
}

.placeholder-remove {
    flex: 0 0 auto;
    padding: 0.42rem 0.62rem;
    font-size: 0.84rem;
    white-space: nowrap;
}

.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.placeholder-grid label {
    font-size: 0.88rem;
}

@media (max-width: 760px) {
    .placeholder-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.creator-page {
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
    gap: 0.9rem;
}

.creator-hero {
    border-radius: 16px;
    border: 1px solid #1f3362;
    background: linear-gradient(140deg, #0f1b38, #15284f);
    color: #fff;
    padding: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.7rem;
}

.creator-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.05rem, 2.4vw, 1.28rem);
}

body.app-shell.app-shell--admin .admin-main .creator-hero h1 {
    color: #ffffff !important;
}

.creator-hero p {
    margin: 0.35rem 0 0;
    color: #c8d4ea;
    font-size: 0.82rem;
    line-height: 1.45;
}

.creator-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.42rem 0.62rem;
    white-space: nowrap;
}

.creator-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #42d392;
    box-shadow: 0 0 0 5px rgba(66, 211, 146, 0.24);
}

.creator-form {
    display: grid;
    gap: 0.8rem;
}

.creator-tabs-card {
    border: 1px solid #d6e1f3;
    border-radius: 12px;
    padding: 0.55rem;
    background: #f8fbff;
}

.creator-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.creator-tab-btn {
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid #c8d7f1;
    background: #fff;
    color: #223862;
    font-weight: 800;
    cursor: pointer;
}

.creator-tab-btn.is-active {
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #fff;
}

.creator-tab-panel {
    display: none;
    gap: 0.75rem;
}

.creator-tab-panel.is-active {
    display: grid;
}

.creator-section {
    border: 1px solid #d5e0f1;
    border-radius: 12px;
    background: #fff;
    padding: 0.65rem;
    display: grid;
    gap: 0.6rem;
    min-width: 0;
}

.creator-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.creator-section-head h3 {
    margin: 0;
    font-size: 0.97rem;
}

.creator-section-head .muted {
    font-size: 0.76rem;
    font-weight: 700;
}

.creator-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.creator-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.frame-upload-preview {
    border: 1px dashed #c8d6ef;
    border-radius: 12px;
    padding: 0.7rem;
    background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}

.frame-upload-preview__image {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #cad8f1;
    background: #f4f8ff;
}

.card-placeholder-builder {
    border: 1px solid #d5e0f1;
    background: #fff;
}

.creator-card-preview {
    border: 1px solid #cad8f0;
    background: #edf3ff;
}

#creator-card-canvas {
    background: #0f1b38;
}

.card-builder-section {
    border: 1px solid #cfdbef;
    background: #f8fbff;
}

.placeholder-item {
    border: 1px solid #d4deef;
    background: #fff;
}

.placeholder-toggle {
    border: 1px solid #cfdbef;
    background: #f8fbff;
    color: #1e355f;
}

.image-placeholder-item {
    border-color: #cce8da;
    background: #f2fbf6;
}

.image-placeholder-item .placeholder-toggle {
    border-color: #b9dfcb;
    background: #ebfaf3;
}

.image-placeholder-item .placeholder-toggle strong {
    color: #14532d;
}

@media (min-width: 800px) {
    .creator-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1100px) {
    .creator-tab-panel.is-active {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .creator-card-workspace {
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.95fr);
    }
}

#creator-canvas {
    max-width: 100%;
    display: block;
    margin-inline: auto;
    background: #111827;
}

#editor-canvas {
    display: block;
    margin-inline: auto;
    background: #111827;
}

.editor-screen {
    padding-bottom: 4.2rem;
}

.editor-layout {
    display: grid;
    gap: 0.85rem;
}

.editor-layout--card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.editor-layout--avatar {
    grid-template-columns: minmax(0, 1fr);
}

.editor-screen--card .editor-canvas-wrap {
    min-height: 320px;
}

.editor-screen--card .control-panel {
    position: static;
}

.control-panel--card {
    display: grid;
    gap: 0.7rem;
}

.editor-hero {
    border-radius: 16px;
    border: 1px solid #1d3260;
    background: linear-gradient(140deg, #0f1b38, #172c57);
    color: #fff;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.editor-hero h1 {
    margin: 0;
    color: #fff;
}

.editor-hero .muted {
    color: #c8d4eb;
}

.editor-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.1);
    color: #e8f6ef;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 7px 10px;
    white-space: nowrap;
}

.editor-hero-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #42d392;
    box-shadow: 0 0 0 5px rgba(66,211,146,.24);
    animation: editorStatusPulse 1.2s ease-in-out infinite;
}

.editor-hero-status[data-status="ready"]::before {
    background: #42d392;
    box-shadow: 0 0 0 5px rgba(66,211,146,.24);
}

.editor-hero-status[data-status="working"]::before {
    background: #facc15;
    box-shadow: 0 0 0 5px rgba(250,204,21,.22);
}

.editor-hero-status[data-status="success"]::before {
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34,197,94,.24);
}

.editor-hero-status[data-status="error"]::before {
    background: #f87171;
    box-shadow: 0 0 0 5px rgba(248,113,113,.24);
}

@keyframes editorStatusPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.92;
    }

    50% {
        transform: scale(1.22);
        opacity: 1;
    }
}

.editor-canvas-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.editor-canvas-head h3 {
    margin: 0;
    font-size: 0.98rem;
}

.card-placeholder-title {
    margin: 0;
}

.card-placeholder-subtitle {
    margin: 0;
    font-size: 0.92rem;
}

.card-placeholder-form {
    display: grid;
    gap: 0.7rem;
}

.card-image-placeholder-list {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.7rem;
}

.card-image-placeholder-label {
    border: 1px dashed #9bb1da;
    border-radius: 10px;
    padding: 0.6rem;
    background: #f8fbff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.card-image-placeholder-label--active {
    border-color: #ef4f2a;
    box-shadow: 0 0 0 1px rgba(239, 79, 42, 0.35);
    background: #fff6f3;
}

.card-image-placeholder-label--has-image {
    border-color: #42d392;
    background: #f3fff9;
}

.card-placeholder-label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
}

.editor-header {
    margin-bottom: -0.25rem;
}

.editor-share-wrap {
    margin-top: 0.65rem;
}

.editor-share-wrap .campaign-qr-image {
    width: min(220px, 100%);
    height: auto;
}

.control-panel {
    position: sticky;
    bottom: 0.45rem;
    z-index: 20;
    background: #ffffff;
    border: 1px solid #d7e2f3;
    border-radius: 14px;
    padding: 0.7rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    backdrop-filter: none;
}

.tool-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
}

.tool-tab {
    border: 1px solid #bfd2f2;
    border-radius: 10px;
    background: #ffffff;
    color: #44557a;
    padding: 0.48rem 0.62rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    min-height: 38px;
}

.tool-tab--extra {
    display: none;
}

.tool-tab.is-active {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #ffffff;
}

.tool-panels {
    margin-top: 0.75rem;
}

.tool-pane {
    display: grid;
    gap: 0.65rem;
}

.tool-pane[hidden] {
    display: none;
}

.tool-inline-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-tip {
    margin: 0;
    font-size: 0.86rem;
}

.editor-primary-actions {
    margin-top: 0.85rem;
}

.ios-save-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 18, 0.82);
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.ios-save-overlay[hidden] {
    display: none !important;
}

.ios-save-card {
    width: min(520px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: #0f1620;
    border: 1px solid #2f3c52;
    border-radius: 14px;
    padding: 1rem;
    display: grid;
    gap: 0.65rem;
}

.ios-save-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ios-save-card h3 {
    margin: 0;
}

.ios-close-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #3b495f;
    background: #182232;
    color: #ffffff;
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

#ios-save-preview {
    width: 100%;
    max-height: min(52vh, 420px);
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #31415a;
    background: #0c131d;
}

.flash {
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font-size: 0.92rem;
    border: 1px solid transparent;
}

.flash-toast-wrap {
    position: fixed;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 95;
    width: min(420px, calc(100vw - 1.6rem));
    pointer-events: none;
}

.flash-floating {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
    border-radius: 12px;
    pointer-events: auto;
}

.flash--success {
    border-color: #16a34a;
    background: color-mix(in srgb, #16a34a 22%, #0f1728 78%);
    color: #ecfdf5;
}

.flash--error {
    border-color: #dc2626;
    background: color-mix(in srgb, #dc2626 24%, #0f1728 76%);
    color: #fef2f2;
}

.flash--info {
    border-color: #93b4ee;
    background: #e8f1ff;
    color: #1f2a44;
}

.alert {
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
}

.alert--success {
    border-color: #16a34a;
    background: color-mix(in srgb, #16a34a 22%, #0f1728 78%);
    color: #ecfdf5;
}

.alert--danger {
    border-color: #dc2626;
    background: color-mix(in srgb, #dc2626 24%, #0f1728 76%);
    color: #fef2f2;
}

.btn--primary {
    border: 1px solid color-mix(in srgb, var(--primary) 68%, #ffffff 0%);
    background: color-mix(in srgb, var(--primary) 28%, #0f1728 72%);
    color: #ffffff;
}

.btn--primary:hover {
    background: color-mix(in srgb, var(--primary) 34%, #0f1728 66%);
}

.text-muted,
.muted {
    color: var(--muted);
}

body.app-shell:not(.app-shell--admin) .thp-auth-page {
    position: relative;
    padding-block: clamp(1.4rem, 3.6vw, 2.8rem);
    isolation: isolate;
}

body.app-shell:not(.app-shell--admin) .thp-auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

body.app-shell:not(.app-shell--admin) .thp-auth-page.noise::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .06;
    background-image: radial-gradient(#000 0.45px, transparent 0.45px);
    background-size: 3px 3px;
}

body.app-shell:not(.app-shell--admin) .thp-auth-grid {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}

body.app-shell:not(.app-shell--admin) .thp-auth-box,
body.app-shell:not(.app-shell--admin) .thp-auth-showcase {
    border-radius: 18px;
    border: 1px solid #d8e2f2;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 32px rgba(20, 35, 72, 0.09);
    backdrop-filter: blur(8px);
    padding: clamp(1rem, 2vw, 1.45rem);
}

body.app-shell:not(.app-shell--admin) .thp-auth-box {
    order: 2;
    position: relative;
}

body.app-shell:not(.app-shell--admin) .thp-auth-showcase {
    order: 1;
}

body.app-shell:not(.app-shell--admin) .thp-auth-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.32rem;
    border: 1px solid #dbe5f5;
    border-radius: 14px;
    padding: 0.28rem;
    background: #f4f7fd;
    margin-bottom: 0.95rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-tab {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #66769a;
    text-decoration: none;
    transition: .18s ease;
}

body.app-shell:not(.app-shell--admin) .thp-auth-tab.is-active {
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(16, 27, 50, 0.1);
    color: #0f1b38;
}

body.app-shell:not(.app-shell--admin) .thp-auth-head h1 {
    margin: 0;
    font-size: clamp(1.52rem, 3vw, 1.92rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0f1b38;
}

body.app-shell:not(.app-shell--admin) .thp-auth-head p {
    margin: 0.4rem 0 0;
    color: #5f6f92;
    font-size: 0.88rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.46rem;
    margin-top: 0.88rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-page .btn {
    border-radius: 10px;
    min-height: 38px;
}

body.app-shell:not(.app-shell--admin) .thp-auth-page .btn:not(.btn--outline) {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #ffffff;
}

body.app-shell:not(.app-shell--admin) .thp-auth-page .btn:not(.btn--outline):hover {
    background: #d5401f;
    border-color: #d5401f;
}

body.app-shell:not(.app-shell--admin) .thp-auth-page .btn--outline {
    background: #ffffff;
    border-color: #d3deef;
    color: #243a67;
}

body.app-shell:not(.app-shell--admin) .thp-auth-page .login-social-btn {
    width: 100%;
    justify-content: center;
    gap: 0.34rem;
    border-radius: 10px;
    min-height: 38px;
    font-size: 0.78rem;
    font-weight: 700;
}

body.app-shell:not(.app-shell--admin) .thp-auth-page .login-social-btn .ui-icon {
    width: 0.9rem;
    height: 0.9rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.46rem;
    margin-top: 0.72rem;
    margin-bottom: 0.25rem;
    color: #7a87a6;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.app-shell:not(.app-shell--admin) .thp-auth-divider::before,
body.app-shell:not(.app-shell--admin) .thp-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dbe5f5;
}

body.app-shell:not(.app-shell--admin) .thp-auth-form {
    display: grid;
    gap: 0.76rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-page input[type="text"],
body.app-shell:not(.app-shell--admin) .thp-auth-page input[type="email"],
body.app-shell:not(.app-shell--admin) .thp-auth-page input[type="password"] {
    height: 38px;
    border-radius: 10px;
    border: 1px solid #d5dff0;
    background: #ffffff;
}

body.app-shell:not(.app-shell--admin) .thp-auth-password-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.38rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-inline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-inline-link {
    color: #2a4a84;
    font-weight: 700;
    text-decoration: none;
}

body.app-shell:not(.app-shell--admin) .thp-auth-inline-link:hover {
    color: #1d3664;
    text-decoration: underline;
}

body.app-shell:not(.app-shell--admin) .thp-auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #4f5f82;
    font-size: 0.8rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #ef4f2a;
}

body.app-shell:not(.app-shell--admin) .thp-auth-submit {
    width: 100%;
    justify-content: center;
}

body.app-shell:not(.app-shell--admin) .thp-auth-note,
body.app-shell:not(.app-shell--admin) .thp-auth-hint {
    margin: 0;
    font-size: 0.8rem;
    color: #5d6a87;
}

body.app-shell:not(.app-shell--admin) .thp-auth-note a {
    color: #2a4a84;
    font-weight: 700;
    text-decoration: none;
}

body.app-shell:not(.app-shell--admin) .thp-auth-note a:hover {
    color: #1d3664;
    text-decoration: underline;
}

body.app-shell:not(.app-shell--admin) .thp-auth-social-grid--bottom {
    margin-top: 0.2rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-password-wrap .password-toggle-btn {
    min-width: 76px;
}

body.app-shell:not(.app-shell--admin) .thp-auth-password-wrap [data-password-toggle][aria-pressed="false"] .password-icon--hide {
    display: none;
}

body.app-shell:not(.app-shell--admin) .thp-auth-password-wrap [data-password-toggle][aria-pressed="true"] .password-icon--show {
    display: none;
}

body.app-shell:not(.app-shell--admin) .thp-auth-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.34rem;
    margin-top: 0.05rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-actions > * {
    flex: 1;
    justify-content: center;
    font-size: 0.76rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ffd5c7;
    background: #fff1ea;
    color: #b43b1f;
    border-radius: 999px;
    padding: 0.32rem 0.68rem;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
}

body.app-shell:not(.app-shell--admin) .thp-auth-showcase h2 {
    margin: 0.66rem 0 0.44rem;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: #0f1b38;
}

body.app-shell:not(.app-shell--admin) .thp-auth-showcase p {
    margin: 0;
    color: #5d6a87;
    font-size: 0.88rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.56rem;
    margin-top: 0.88rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-showcase-grid article {
    display: grid;
    gap: 0.25rem;
    border: 1px solid #dce5f4;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.66rem 0.7rem;
}

body.app-shell:not(.app-shell--admin) .thp-auth-showcase-grid strong {
    font-size: 0.79rem;
    color: #0f1b38;
}

body.app-shell:not(.app-shell--admin) .thp-auth-showcase-grid span {
    font-size: 0.73rem;
    color: #617090;
}

@media (min-width: 980px) {
    body.app-shell:not(.app-shell--admin) .thp-auth-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }
}

@media (max-width: 979px) {
    body.app-shell:not(.app-shell--admin) .thp-auth-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell:not(.app-shell--admin) .thp-auth-box {
        order: 1;
    }

    body.app-shell:not(.app-shell--admin) .thp-auth-showcase {
        order: 2;
    }

    body.app-shell:not(.app-shell--admin) .thp-auth-social-grid,
    body.app-shell:not(.app-shell--admin) .thp-auth-showcase-grid,
    body.app-shell:not(.app-shell--admin) .thp-auth-actions,
    body.app-shell:not(.app-shell--admin) .thp-auth-grid-2 {
        grid-template-columns: 1fr;
        flex-wrap: wrap;
    }

    body.app-shell:not(.app-shell--admin) .thp-auth-inline-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

body.app-shell .thp-profile-page {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 0.88rem;
    padding: 0.9rem;
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

body.app-shell .thp-profile-page > *,
body.app-shell .thp-profile-hero > *,
body.app-shell .thp-profile-grid > *,
body.app-shell .thp-profile-side-col > *,
body.app-shell .thp-profile-panel-grid > * {
    min-width: 0;
}

body.app-shell .thp-profile-hero,
body.app-shell .thp-profile-section,
body.app-shell .thp-profile-panel {
    border: 1px solid #d9e3f2;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    backdrop-filter: blur(10px);
}

body.app-shell .thp-profile-hero {
    padding: 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.88rem;
    align-items: center;
}

body.app-shell .thp-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #ff7b54, #ef4f2a);
    box-shadow: 0 10px 24px rgba(239, 79, 42, 0.35);
}

body.app-shell .thp-profile-hero h1,
body.app-shell .thp-profile-section h2,
body.app-shell .thp-profile-panel h2 {
    margin: 0;
    color: #0f1b38;
    letter-spacing: -0.02em;
}

body.app-shell .thp-profile-hero h1 {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
}

body.app-shell .thp-profile-hero p {
    margin: 0.24rem 0 0;
    color: #5f6f92;
}

body.app-shell .thp-profile-hero-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.app-shell .thp-profile-page .btn {
    min-height: 38px;
    border-radius: 11px;
    font-weight: 800;
    max-width: 100%;
}

body.app-shell .thp-profile-page .btn:not(.btn--outline) {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #ffffff;
}

body.app-shell .thp-profile-page .btn:not(.btn--outline):hover {
    border-color: #d8411f;
    background: #d8411f;
}

body.app-shell .thp-profile-page .btn--outline {
    border-color: #cedaf1;
    background: #ffffff;
    color: #243a67;
}

body.app-shell .thp-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 0.88rem;
}

body.app-shell .thp-profile-side-col,
body.app-shell .thp-profile-panel-grid {
    display: grid;
    gap: 0.88rem;
}

body.app-shell .thp-profile-section,
body.app-shell .thp-profile-panel {
    padding: 1rem;
}

body.app-shell .thp-profile-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.74rem;
}

body.app-shell .thp-profile-section-head span,
body.app-shell .thp-profile-panel-sub {
    color: #5f6f92;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

body.app-shell .thp-profile-form-grid,
body.app-shell .thp-profile-password-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.64rem;
}

body.app-shell .thp-profile-form-grid label,
body.app-shell .thp-profile-password-form label {
    display: grid;
    gap: 0.38rem;
    color: #4f5f84;
    font-size: 0.85rem;
    font-weight: 700;
}

body.app-shell .thp-profile-form-grid input,
body.app-shell .thp-profile-form-grid select,
body.app-shell .thp-profile-form-grid textarea,
body.app-shell .thp-profile-password-form input {
    width: 100%;
    border: 1px solid #cfdbf0;
    border-radius: 11px;
    min-height: 40px;
    padding: 0.56rem 0.7rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1c2e56;
    background: #ffffff;
    outline: none;
}

body.app-shell .thp-profile-form-grid textarea {
    min-height: 86px;
    resize: vertical;
}

body.app-shell .thp-profile-wide-field {
    grid-column: 1 / -1;
}

body.app-shell .thp-profile-social-list,
body.app-shell .thp-profile-security-list,
body.app-shell .thp-profile-social-actions {
    display: grid;
    gap: 0.5rem;
}

body.app-shell .thp-profile-social-item,
body.app-shell .thp-profile-security-item {
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    padding: 0.62rem 0.74rem;
    background: #ffffff;
}

body.app-shell .thp-profile-social-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

body.app-shell .thp-profile-social-item small,
body.app-shell .thp-profile-security-item p {
    margin: 0.2rem 0 0;
    color: #5f6f92;
    font-size: 0.84rem;
}

body.app-shell .thp-profile-social-actions {
    margin-top: 0.62rem;
}

body.app-shell .thp-profile-actions-end {
    margin-top: 0.62rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

body.app-shell .thp-profile-panel-sub {
    margin: 0.24rem 0 0.74rem;
}

body.app-shell .thp-profile-login-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #d6e0f1;
    background: #ffffff;
    font-size: 0.9rem;
}

body.app-shell .thp-profile-login-table th,
body.app-shell .thp-profile-login-table td {
    text-align: left;
    padding: 0.58rem 0.62rem;
    border-bottom: 1px solid #edf2fb;
}

body.app-shell .thp-profile-login-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #55678f;
    background: #f7faff;
}

body.app-shell .thp-profile-login-table tr:last-child td {
    border-bottom: 0;
}

body.app-shell .thp-profile-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.56rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    border: 1px solid #cfe0f8;
    background: #ecf4ff;
    color: #2f5fa7;
}

body.app-shell .thp-profile-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    margin-top: 0.74rem;
    color: #355792;
    font-weight: 800;
    text-decoration: none;
}

body.app-shell .thp-profile-back-link:hover {
    text-decoration: underline;
}

@media (max-width: 1200px) {
    body.app-shell .thp-profile-hero {
        grid-template-columns: auto 1fr;
    }

    body.app-shell .thp-profile-hero-actions {
        grid-column: 1 / -1;
    }

    body.app-shell .thp-profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    body.app-shell .thp-profile-page {
        padding: 0.7rem;
    }

    body.app-shell .thp-profile-hero,
    body.app-shell .thp-profile-section,
    body.app-shell .thp-profile-panel {
        border-radius: 15px;
    }

    body.app-shell .thp-profile-form-grid,
    body.app-shell .thp-profile-password-form {
        grid-template-columns: 1fr;
    }

    body.app-shell .thp-profile-actions-end {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    body.app-shell .thp-profile-page {
        padding: 0.56rem;
        gap: 0.64rem;
        overflow-x: clip;
    }

    body.app-shell .thp-profile-hero {
        grid-template-columns: 1fr;
        padding: 0.8rem;
    }

    body.app-shell .thp-profile-avatar {
        width: 54px;
        height: 54px;
        border-radius: 14px;
        font-size: 1rem;
    }

    body.app-shell .thp-profile-hero h1 {
        font-size: 1.1rem;
    }

    body.app-shell .thp-profile-hero p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    body.app-shell .thp-profile-page .btn {
        width: 100%;
        white-space: normal;
    }

    body.app-shell .thp-profile-section,
    body.app-shell .thp-profile-panel {
        padding: 0.78rem;
    }

    body.app-shell .thp-profile-section-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.58rem;
    }

    body.app-shell .thp-profile-panel h2 {
        font-size: 1rem;
        line-height: 1.25;
    }

    body.app-shell .thp-profile-panel-sub {
        font-size: 0.82rem;
        line-height: 1.4;
        margin: 0.16rem 0 0.56rem;
    }

    body.app-shell .thp-profile-login-table {
        width: 100%;
        border: 0;
        background: transparent;
    }

    body.app-shell .thp-profile-login-table thead {
        display: none;
    }

    body.app-shell .thp-profile-login-table tbody {
        display: grid;
        gap: 0.46rem;
    }

    body.app-shell .thp-profile-login-table tr {
        display: grid;
        gap: 0.28rem;
        border: 1px solid #d6e0f1;
        border-radius: 10px;
        background: #ffffff;
        padding: 0.46rem 0.52rem;
    }

    body.app-shell .thp-profile-login-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.5rem;
        padding: 0;
        border: 0;
        font-size: 0.8rem;
    }

    body.app-shell .thp-profile-login-table td::before {
        flex: 0 0 76px;
        color: #5f6f92;
        font-size: 0.74rem;
        font-weight: 700;
    }

    body.app-shell .thp-profile-login-table td:nth-child(1)::before { content: 'Thời gian'; }
    body.app-shell .thp-profile-login-table td:nth-child(2)::before { content: 'Thiết bị'; }
    body.app-shell .thp-profile-login-table td:nth-child(3)::before { content: 'IP'; }
    body.app-shell .thp-profile-login-table td:nth-child(4)::before { content: 'Vị trí'; }
    body.app-shell .thp-profile-login-table td:nth-child(5)::before { content: 'Trạng thái'; }

    body.app-shell .thp-profile-password-form {
        gap: 0.52rem;
    }

    body.app-shell .thp-profile-password-form input {
        min-height: 42px;
    }
}

@media (max-width: 560px) {
    body.app-shell .thp-profile-hero-actions,
    body.app-shell .thp-profile-actions-end,
    body.app-shell .thp-profile-social-item {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    body.app-shell .thp-profile-hero-actions > *,
    body.app-shell .thp-profile-actions-end > * {
        min-width: 0;
    }

    body.app-shell .thp-profile-social-item {
        align-items: flex-start;
    }

    body.app-shell .thp-profile-form-grid input,
    body.app-shell .thp-profile-form-grid select,
    body.app-shell .thp-profile-form-grid textarea,
    body.app-shell .thp-profile-password-form input {
        font-size: 16px;
    }
}

.setup-screen {
    max-width: 860px;
    margin-inline: auto;
}

.login-screen {
    gap: 1.1rem;
}

.login-screen__hero {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, #ffffff 0%);
}

.login-screen__hero h1 {
    margin-bottom: 0.45rem;
    letter-spacing: -0.01em;
}

.login-screen__card {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, #ffffff 0%);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.login-screen__form {
    gap: 1rem;
}

.password-field-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.password-field-wrap .password-toggle-btn {
    min-width: 82px;
}

.password-field-wrap [data-password-toggle][aria-pressed="false"] .password-icon--hide {
    display: none;
}

.password-field-wrap [data-password-toggle][aria-pressed="true"] .password-icon--show {
    display: none;
}

.login-social-row {
    margin-top: 0.2rem;
    gap: 0.6rem;
}

.login-social-btn {
    min-width: 185px;
    justify-content: flex-start;
    border-radius: 9px;
}

.login-social-btn .ui-icon {
    width: 1rem;
    height: 1rem;
}

.login-social-btn--google {
    border-color: #d9e3f7;
}

.login-social-btn--facebook {
    border-color: #bfccf7;
    color: #2f4ea8;
}

.login-social-btn--github {
    border-color: #c7d2e8;
}

@media (min-width: 992px) {
    .editor-layout--card,
    .editor-layout--avatar {
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
        align-items: start;
    }

    .editor-layout--card .editor-canvas-wrap,
    .editor-layout--card .control-panel--card,
    .editor-layout--avatar .editor-canvas-wrap,
    .editor-layout--avatar .control-panel {
        min-height: 560px;
    }

    .editor-layout--card .editor-canvas-wrap,
    .editor-layout--avatar .editor-canvas-wrap {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
    }

    .editor-layout--card .control-panel--card,
    .editor-layout--avatar .control-panel {
        position: sticky;
        top: 0.9rem;
        max-height: calc(100vh - 1.8rem);
        overflow: auto;
    }
}

@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .media-detail-layout {
        grid-template-columns: 1fr;
    }

    .media-detail-preview-wrap {
        min-height: 240px;
    }
}

@media (max-width: 1200px) {
    body.app-shell.app-shell--admin .events-detail-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-shell.app-shell--admin .events-detail-content-grid {
        grid-template-columns: minmax(0, 1fr) 330px;
    }

    body.app-shell.app-shell--admin .events-detail-rail {
        top: 0.75rem;
        max-width: 330px;
    }
}

@media (max-width: 980px) {
    .events-template-layout {
        grid-template-columns: 1fr;
    }

    .events-template-preview {
        position: static;
    }

    .events-template-hero__actions,
    .events-template-actions__row {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .admin-main .events-template-page {
        width: 100%;
        padding: 0.65rem 0.5rem;
    }
}

@media (max-width: 900px) {
    .events-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-shell.app-shell--admin .events-detail-content-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .events-detail-rail {
        position: static;
        top: auto;
        max-width: none;
    }

    body.app-shell.app-shell--admin .events-detail-quick-list .btn {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .events-detail-hero-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .events-detail-filters {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .events-detail-queue-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .events-detail-kpis {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .container,
    .admin-main .container {
        width: min(100%, 100% - 1rem);
    }

    .tool-tab--extra {
        display: inline-flex;
    }

    .header-inner,
    .admin-topbar {
        min-height: 56px;
        position: relative;
    }

    .admin-topbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.4rem;
        align-items: center;
    }

    .admin-topbar .brand {
        min-width: 0;
    }

    .admin-topbar .site-brand-logo {
        max-height: 28px;
    }

    .admin-topbar-meta {
        display: none;
    }

    .admin-topbar-actions {
        margin-left: 0;
        gap: 0.25rem;
        flex-wrap: nowrap;
    }

    .admin-topbar-actions .btn {
        min-height: 34px;
        padding: 0.32rem 0.46rem;
        border-radius: 10px;
    }

    .admin-topbar-actions .btn span {
        display: none;
    }

    .admin-topbar-actions .btn--home-quick {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .main-nav,
    .admin-sidebar[data-mobile-menu] {
        position: absolute;
        top: calc(100% + 0.4rem);
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        min-width: 190px;
        border-radius: 12px;
        padding: 0.45rem;
        z-index: 35;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    }

    body.app-shell:not(.app-shell--admin) .main-nav {
        background: #ffffff;
        border: 1px solid var(--line);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
    }

    body.app-shell.app-shell--admin .admin-sidebar[data-mobile-menu] {
        background: #101826;
        border: 1px solid #2f3f56;
    }

    .main-nav.is-open,
    .admin-sidebar.is-open {
        display: flex;
    }

    .main-nav a,
    .main-nav .nav-icon-link,
    .main-nav .nav-icon-btn,
    .main-nav .main-nav-submenu-toggle,
    .main-nav .main-nav-children-toggle,
    .admin-sidebar-link {
        width: 100%;
        justify-content: flex-start;
        padding: 0.5rem 0.6rem;
        font-size: 0.92rem;
    }

    .main-nav-submenu,
    .main-nav-item--has-children {
        display: grid;
        width: 100%;
    }

    .main-nav-children-toggle {
        border-radius: 10px;
    }

    .main-nav-submenu-panel,
    .main-nav-children {
        position: static;
        min-width: 0;
        margin-top: 0.2rem;
        box-shadow: none;
        border-radius: 10px;
    }

    body.app-shell:not(.app-shell--admin) .main-nav-submenu-panel,
    body.app-shell:not(.app-shell--admin) .main-nav-children {
        border-color: var(--line);
        background: #ffffff;
    }

    body.app-shell.app-shell--admin .main-nav-submenu-panel,
    body.app-shell.app-shell--admin .main-nav-children {
        border-color: #31415b;
        background: #111b2b;
    }

    .admin-shell {
        display: block;
        min-height: auto;
    }

    .admin-sidebar {
        border-right: none;
        min-height: auto;
        padding: 0;
        background: transparent;
        position: relative;
    }

    .admin-main {
        padding: 0.9rem 0 1rem;
    }

    .admin-main .container {
        width: min(100%, 100% - 1rem);
        margin-inline: auto;
    }

    .settings-sidebar {
        grid-template-columns: 1fr;
    }

    .site-brand-logo {
        height: 54px;
        max-width: min(170px, 52vw);
    }

    .card {
        padding: 0.85rem;
    }

    .admin-campaign-item {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 0.55rem;
        padding: 0.5rem 0.55rem;
    }

    .admin-campaign-thumb-link,
    .admin-campaign-thumb {
        width: 52px;
        height: 52px;
    }

    .admin-campaign-subline {
        gap: 0.4rem;
        font-size: 0.78rem;
    }

    .events-filter-form {
        grid-template-columns: 1fr;
    }

    .events-inline-actions {
        flex-wrap: wrap;
    }

    .settings-form-actions,
    .events-create-actions {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .editor-screen {
        gap: 0.75rem;
        padding-bottom: 5rem;
    }

    .editor-layout--card {
        gap: 0.65rem;
    }

    .editor-screen--card .editor-canvas-wrap {
        position: sticky;
        top: 0.45rem;
        z-index: 9;
        min-height: 240px;
        overflow-x: hidden;
    }

    .editor-screen--card .control-panel--card {
        position: static;
        max-height: none;
    }

    .editor-canvas-wrap {
        padding: 0.5rem;
    }

    .editor-share-wrap {
        display: block;
    }

    .editor-share-wrap .campaign-share-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .editor-share-wrap .campaign-share-qr {
        justify-content: center;
    }

    .editor-primary-actions .btn {
        flex: 1 1 140px;
        text-align: center;
    }

    .tool-inline-grid {
        grid-template-columns: 1fr;
    }
}


/* merged from theme public */
:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --panel-2: #f8faff;
    --text: #172134;
    --muted: #5b6785;
    --line: #d9e2f1;
    --line-strong: #c5d2e8;
    --primary: #2f6bff;
    --primary-2: #1946bc;
    --shadow-soft: 0 8px 24px rgba(12, 24, 52, 0.08);
    --shadow-hero: 0 20px 50px rgba(17, 31, 67, 0.14);
}

body.app-shell:not(.app-shell--admin) {
    background:
        radial-gradient(circle at 8% 8%, #fff3de 0, #fff3de 18%, transparent 50%),
        radial-gradient(circle at 92% 16%, #dce8ff 0, #dce8ff 22%, transparent 52%),
        #f6f8fc;
    color: var(--text);
}

body.app-shell:not(.app-shell--admin) .site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.app-shell:not(.app-shell--admin) .site-footer {
    background: #0b1016;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #d4d8e1;
}

body.app-shell:not(.app-shell--admin) .site-main .card:not(.thp-auth-card) {
    background: #ffffff;
    border: 1px solid var(--line);
}

body.app-shell:not(.app-shell--admin) .site-main .editor-screen .editor-hero {
    background: linear-gradient(140deg, #0f1b38, #172c57);
    border-color: #1d3260;
}

body.app-shell:not(.app-shell--admin) .main-nav a,
body.app-shell:not(.app-shell--admin) .main-nav .nav-icon-link,
body.app-shell:not(.app-shell--admin) .main-nav .nav-icon-btn {
    color: #3f4d6d;
}

body.app-shell:not(.app-shell--admin) .main-nav a:hover,
body.app-shell:not(.app-shell--admin) .main-nav .nav-icon-link:hover,
body.app-shell:not(.app-shell--admin) .main-nav .main-nav-submenu-toggle:hover {
    background: #edf2ff;
    color: #15203a;
}

body.app-shell:not(.app-shell--admin) .main-nav-submenu-panel,
body.app-shell:not(.app-shell--admin) .main-nav-children {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
}

body.app-shell:not(.app-shell--admin) .main-nav-submenu-panel a,
body.app-shell:not(.app-shell--admin) .main-nav-submenu-link,
body.app-shell:not(.app-shell--admin) .main-nav-children-link,
body.app-shell:not(.app-shell--admin) .main-nav-children-toggle {
    color: #3f4d6d;
}

body.app-shell:not(.app-shell--admin) .main-nav-submenu-panel a:hover,
body.app-shell:not(.app-shell--admin) .main-nav-submenu-link:hover,
body.app-shell:not(.app-shell--admin) .main-nav-children-link:hover,
body.app-shell:not(.app-shell--admin) .main-nav-children-toggle:hover {
    background: #edf2ff;
    color: #15203a;
}

.thp-home-page {
    gap: 20px;
    padding-top: 4px;
    padding-bottom: 0px;
}

.thp-home-page .card {
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}

.thp-home-hero {
    border: 1px solid #d4def0;
    background: linear-gradient(130deg, #ffffff 0%, #f8fbff 55%, #eef3ff 100%);
    overflow: hidden;
}

.thp-home-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: 28px;
    align-items: center;
}

.thp-home-hero-content {
    gap: 14px;
}

.thp-home-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.38rem 0.82rem;
    border: 1px solid #bfd2f2;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #2f6bff;
    background: #edf3ff;
}

.thp-home-hero h1 {
    margin: 0;
    font-size: clamp(1.65rem, 3.3vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.thp-home-hero .muted {
    max-width: 680px;
}

.thp-home-hero-metrics {
    margin: 2px 0 4px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.thp-home-hero-metrics li {
    border: 1px solid #d9e2f1;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.5rem 0.62rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thp-home-hero-metrics strong {
    font-size: 1.12rem;
    line-height: 1.2;
    color: #1d2f57;
}

.thp-home-hero-metrics span {
    font-size: 0.76rem;
    color: #5d6b89;
}

.thp-home-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thp-home-hero-image {
    width: min(100%, 420px);
    border-radius: 14px;
    border: 1px solid #cfdaee;
    box-shadow: var(--shadow-hero);
}

.thp-home-hero-placeholder {
    width: min(100%, 340px);
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    border: 1px dashed #b9cbeb;
    background: linear-gradient(180deg, #f7faff 0%, #edf3ff 100%);
    color: #2f6bff;
    font-size: 2.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thp-home-filter {
    border: 1px solid rgba(47, 107, 255, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.thp-home-filter-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.thp-home-filter-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.thp-home-filter .btn--active {
    border-color: var(--primary);
    color: #ffffff;
    background: linear-gradient(180deg, #2f6bff 0%, #2458d8 100%);
    box-shadow: 0 10px 18px rgba(47, 107, 255, 0.28);
}
@keyframes pulseRing {
  0%,
  100% {
    box-shadow:0 0 0 0 rgba(239,79,42,0)
  }
  50% {
    box-shadow:0 0 0 10px rgba(239,79,42,0.16)
  }
}
.animate-pulseRing {
  animation:pulseRing 2.4s ease-in-out infinite
}
.thp-home-categories,
.thp-home-trust,
.thp-home-faq,
.thp-home-cta {
    background: #ffffff;
}

.thp-home-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.thp-home-category {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fbfdff;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.thp-home-category:hover {
    transform: translateY(-1px);
    border-color: #b7caec;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    background: #ffffff;
}

.thp-home-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.thp-trust-logo {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 0.82rem;
    text-align: center;
    color: #7785a3;
    background: #fbfdff;
    filter: grayscale(100%);
    transition: filter .18s ease, color .18s ease, border-color .18s ease;
}

.thp-trust-logo:hover {
    filter: grayscale(0%);
    color: var(--primary);
    border-color: #b7caec;
}

.thp-home-trending {
    gap: 12px;
}

.thp-trending-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(268px, 338px);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}

.thp-trending-item {
    scroll-snap-align: start;
    border-radius: 14px;
}

.thp-home-section {
    gap: 12px;
}

.thp-home-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.thp-home-grid {
    align-items: stretch;
}

.thp-campaign-card {
    border-radius: 14px;
}

.thp-home-faq .thp-faq-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.62rem 0.82rem;
    background: #fbfdff;
}

.thp-home-faq .thp-faq-item summary {
    cursor: pointer;
    font-weight: 600;
}

.thp-home-cta {
    border: 1px solid #cfdaee;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}

@media (max-width: 1199.98px) {
    .thp-home-categories-grid,
    .thp-home-trust-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .thp-home-hero-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .thp-home-hero-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .thp-home-hero-visual {
        order: -1;
    }
}

@media (max-width: 575.98px) {
    .thp-home-categories-grid,
    .thp-home-trust-row,
    .thp-home-hero-metrics {
        grid-template-columns: 1fr;
    }

    .thp-home-page {
        gap: 14px;
    }

    .thp-trending-slider {
        grid-auto-columns: minmax(230px, 286px);
    }
}

body.app-shell:not(.app-shell--admin) .header-inner .mobile-menu-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    body.app-shell:not(.app-shell--admin) .header-inner .mobile-menu-toggle {
        display: inline-flex;
    }
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-campaign-title {
    margin-top: 0.7rem;
    margin-bottom: 0.28rem;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0;
}

body.app-shell:not(.app-shell--admin) .btn {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body.app-shell:not(.app-shell--admin) .btn--outline {
    border-color: var(--line);
    background: #ffffff;
    color: #44557a;
}

body.app-shell:not(.app-shell--admin) .btn--outline:hover {
    background: #edf3ff;
    border-color: #b7caec;
    color: #1f2a44;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-actions .btn {
    min-height: 34px;
    padding: 0.34rem 0.82rem;
    border-radius: 8px;
    font-size: 0.79rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-actions .btn--outline {
    border-color: var(--line);
    color: #44557a;
    background: #ffffff;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-actions .btn--outline:hover {
    background: #edf3ff;
    color: #1f2a44;
}

body.app-shell:not(.app-shell--admin) .editor-screen .editor-header {
    border: 1px solid #d7e2f3;
    border-radius: 14px;
    padding: 0.95rem;
}

body.app-shell:not(.app-shell--admin) .editor-screen .editor-hero {
    background: linear-gradient(140deg, #0f1b38, #172c57);
    border-color: #1d3260;
}

body.app-shell:not(.app-shell--admin) .editor-screen .editor-canvas-wrap,
body.app-shell:not(.app-shell--admin) .editor-screen .control-panel {
    background: #ffffff;
    border: 1px solid #d7e2f3;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

body.app-shell:not(.app-shell--admin) .editor-screen .control-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    backdrop-filter: none;
}

body.app-shell:not(.app-shell--admin) .editor-screen .tool-tab {
    border-color: #bfd2f2;
    background: #ffffff;
    color: #44557a;
}

body.app-shell:not(.app-shell--admin) .editor-screen .tool-tab.is-active {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #ffffff;
}

body.app-shell:not(.app-shell--admin) .editor-screen input[type="file"] {
    background: #ffffff;
    border-color: #d7e2f3;
    color: #1f2a44;
}

body.app-shell:not(.app-shell--admin) .editor-screen--card input[type="text"] {
    background: #ffffff;
    border-color: #d7e2f3;
    color: #1f2a44;
}

body.app-shell:not(.app-shell--admin) .editor-screen--card input[type="text"]::placeholder {
    color: #7d8dab;
}

body.app-shell:not(.app-shell--admin) .editor-screen .frame-variant-button {
    border-color: #d7e2f3;
    background: #ffffff;
    color: #1f2a44;
}

body.app-shell:not(.app-shell--admin) .editor-screen .frame-variant-button.btn--active {
    border-color: #2f6bff;
    background: #edf3ff;
}

body.app-shell:not(.app-shell--admin) .frame-variant-item__label {
    display: none;
}

body.app-shell:not(.app-shell--admin) .campaign-share-wrap {
    border: 1px solid #d7e2f3;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

body.app-shell:not(.app-shell--admin) .campaign-share-label,
body.app-shell:not(.app-shell--admin) .campaign-share-subtitle {
    color: #5d6b89;
}

body.app-shell:not(.app-shell--admin) .campaign-share-link-input {
    background: #f8fbff;
    border-color: #d7e2f3;
    color: #1f2a44;
}

body.app-shell:not(.app-shell--admin) .campaign-share-wrap .campaign-qr-image {
    border-color: #d7e2f3;
    background: #ffffff;
}

body.app-shell:not(.app-shell--admin) .editor-download-btn {
    background: linear-gradient(180deg, #2f6bff 0%, #2458d8 100%);
    border-color: #2458d8;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(47, 107, 255, 0.34);
}

body.app-shell:not(.app-shell--admin) .editor-download-btn:hover {
    background: linear-gradient(180deg, #275fdf 0%, #1f4fc8 100%);
    border-color: #1f4fc8;
    color: #ffffff;
}

/* Homepage clone pass 2: increase visual delta from legacy look */
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero {
    background: linear-gradient(145deg, #0f2a66 0%, #1b4fb8 52%, #2f6bff 100%);
    border-color: #1d4ea8;
    box-shadow: 0 26px 60px rgba(14, 36, 88, 0.35);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero h1,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .thp-home-badge,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .muted,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero strong,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero span {
    color: #ffffff;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .thp-home-badge {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .thp-home-hero-metrics li {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.26);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .btn {
    background: #ffffff;
    border-color: #ffffff;
    color: #1c3f94;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .btn.btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.72);
    color: #ffffff;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .btn.btn--outline:hover {
    background: rgba(255, 255, 255, 0.14);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-filter,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-trust,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-faq,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-cta,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-campaign-card,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-trending-item {
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(9, 30, 66, 0.1);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-category {
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-category:hover {
    transform: translateY(-2px);
}

body.app-shell:not(.app-shell--admin) .thp-home-hero-orb {
    position: relative;
    overflow: hidden;
}

body.app-shell:not(.app-shell--admin) .thp-home-hero-orb::after {
    content: '';
    position: absolute;
    right: -90px;
    top: -40px;
    width: 320px;
    height: 220px;
    border-radius: 120px;
    background: rgba(255, 211, 122, 0.32);
    pointer-events: none;
}

body.app-shell:not(.app-shell--admin) .thp-home-categories-grid .thp-tool-icon {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.6rem;
    background: linear-gradient(145deg, #eef3ff, #ffeef1);
    display: inline-block;
    margin-bottom: 0.55rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-trust-strip {
    background: #12264d;
    border-radius: 18px;
    padding: 0.85rem;
    overflow: hidden;
}

body.app-shell:not(.app-shell--admin) .thp-home-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

body.app-shell:not(.app-shell--admin) .thp-home-marquee-track {
    display: flex;
    gap: 0.65rem;
    width: max-content;
    will-change: transform;
}

body.app-shell:not(.app-shell--admin) .thp-home-trust-strip .thp-trust-logo {
    min-width: 140px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    filter: none;
}

body.app-shell:not(.app-shell--admin) .thp-home-featured {
    gap: 0.9rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-featured-grid {
    gap: 0.9rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-featured-grid .campaign-frame-thumb {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

body.app-shell:not(.app-shell--admin) .thp-home-featured .thp-feature-title {
    margin: 0;
    font-size: clamp(1.7rem, 3.8vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

body.app-shell:not(.app-shell--admin) .thp-home-faq-gradient {
    border: 0;
    padding: 1.2rem;
    background: linear-gradient(115deg, #6fe2db, #74b9ff 36%, #ffd36f 70%, #ff8fa8);
}

body.app-shell:not(.app-shell--admin) .thp-home-faq-gradient .thp-faq-item {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.65);
}

body.app-shell:not(.app-shell--admin) .thp-home-faq-gradient .thp-faq-question {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.72rem 0.2rem;
    font-weight: 700;
    color: #1d2b4f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

body.app-shell:not(.app-shell--admin) .thp-home-faq-gradient .thp-faq-answer {
    max-height: 0;
    overflow: hidden;
    color: #33415f;
    transition: max-height .28s ease, padding-bottom .28s ease;
}

/* Homepage approval mockup parity overrides */
body.app-shell:not(.app-shell--admin) .thp-home-page {
    font-family: "Manrope", "Segoe UI", sans-serif;
    overflow-x: clip;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

body.app-shell:not(.app-shell--admin) .thp-home-page h1,
body.app-shell:not(.app-shell--admin) .thp-home-page h2,
body.app-shell:not(.app-shell--admin) .thp-home-page h3,
body.app-shell:not(.app-shell--admin) .thp-home-page .brand,
body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav a {
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .header-inner {
    min-height: 74px;
    gap: 1rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .header-inner .mobile-menu-toggle {
    display: none;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
}

@media (max-width: 991.98px) {
    body.app-shell:not(.app-shell--admin) .thp-home-page .header-inner {
        position: relative;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .header-inner .mobile-menu-toggle {
        display: inline-flex;
        position: relative;
        z-index: 72;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: min(86vw, 340px);
        height: 100vh;
        gap: 0.85rem;
        margin-left: 0;
        padding: 5.2rem 1rem 1.2rem;
        border-left: 1px solid #d8e2f1;
        border-radius: 0;
        background: #ffffff;
        box-shadow: -18px 0 40px rgba(15, 23, 42, 0.18);
        overflow-y: auto;
        z-index: 70;
        opacity: 0;
        visibility: hidden;
        transform: translateX(22px);
        pointer-events: none;
        transition: opacity 220ms ease, transform 260ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 260ms;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
        transition: opacity 220ms ease, transform 260ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-mock-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-mock-nav a {
        display: block;
        width: 100%;
        padding: 0.95rem 0.2rem;
        border-radius: 0;
        border-bottom: 1px solid #edf2f7;
        font-size: 1.08rem;
        font-weight: 800;
        transform: translateY(6px);
        opacity: 0;
        transition: transform 220ms ease, opacity 200ms ease;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-mock-nav a:last-child {
        border-bottom: 0;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav.is-open .thp-home-mock-nav a {
        transform: translateY(0);
        opacity: 1;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav.is-open .thp-home-mock-nav a:nth-child(1) { transition-delay: 40ms; }
    body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav.is-open .thp-home-mock-nav a:nth-child(2) { transition-delay: 70ms; }
    body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav.is-open .thp-home-mock-nav a:nth-child(3) { transition-delay: 100ms; }
    body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav.is-open .thp-home-mock-nav a:nth-child(4) { transition-delay: 130ms; }
    body.app-shell:not(.app-shell--admin) .thp-home-page .main-nav.is-open .thp-home-mock-nav a:nth-child(5) { transition-delay: 160ms; }

    body.app-shell:not(.app-shell--admin) .main-nav .thp-home-locale-switch {
        width: 100%;
        margin-left: 0;
        order: 0;
    }

    body.app-shell:not(.app-shell--admin) .main-nav .thp-home-locale-switch .btn {
        width: 100%;
        justify-content: center;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page.overlay-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.48);
        opacity: 1;
        transition: opacity 220ms ease;
        z-index: 50;
    }
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-mock-nav {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-mock-nav a {
    color: #334155;
    font-weight: 700;
    text-decoration: none;
    padding: 0.15rem 0;
    border-radius: 0;
    background: transparent;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-mock-nav a:hover {
    color: #0f172a;
    background: transparent;
}

body.app-shell:not(.app-shell--admin) .main-nav .thp-home-locale-switch {
    order: 100;
    margin-left: 1rem;
}

body.app-shell:not(.app-shell--admin) .main-nav .thp-home-locale-switch .btn {
    border-radius: 999px;
    border-color: #e2e8f0;
    background: #fff;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
}

body.app-shell:not(.app-shell--admin) .thp-locale-pill {
    border-radius: 999px;
    padding: 0.36rem 0.85rem;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
}

body.app-shell:not(.app-shell--admin) .thp-locale-pill.is-active {
    background: #0f234c;
    color: #fff;
}

body.app-shell:not(.app-shell--admin) .thp-home-page.thp-home-main {
    position: relative;
}

body.app-shell:not(.app-shell--admin) .thp-home-page.thp-home-main.noise::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .06;
    background-image: radial-gradient(#000 0.45px, transparent 0.45px);
    background-size: 3px 3px;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-shell {
    gap: 1.5rem;
    padding-top: 1.3rem;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .card {
    border-radius: 1.05rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-filter {
    display: none !important;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero-orb::after {
    display: none;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero h1,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .thp-home-badge,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .muted,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero strong,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero span {
    color: #0f172a;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .thp-home-badge {
    border-color: #fecaca;
    background: #fff7ed;
    color: #b45309;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .btn {
    border-radius: 999px;
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #fff;
    box-shadow: 0 20px 45px rgba(239, 79, 42, 0.24);
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    transform: translateY(0);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .button-row .btn:first-child {
    animation: thpPulseRing 2.4s ease-in-out infinite;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .btn.btn--outline {
    background: #fff;
    color: #334155;
    border-color: #cbd5e1;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    transition: none;
    transform: none;
    animation: none;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .btn:hover,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .btn:focus {
    transform: none;
    filter: none;
    box-shadow: inherit;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .button-row .btn:first-child:hover,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .button-row .btn:first-child:focus {
    transform: translateY(-2px);
    background: #b53218;
    border-color: #b53218;
    box-shadow: 0 24px 54px rgba(239, 79, 42, 0.27);
    animation: thpPulseRing 2.4s ease-in-out infinite;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .btn.btn--outline:hover,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero .btn.btn--outline:focus {
    transform: translateY(-2px);
    background: #fff;
    border-color: #94a3b8;
    box-shadow: 0 16px 36px rgba(20, 36, 72, 0.14);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero-collage {
    min-height: 310px;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-hero-collage-blob {
    position: absolute;
    right: 12px;
    top: 0;
    width: 240px;
    height: 172px;
    border-radius: 42px;
    background: #f6e39b;
    z-index: 0;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-hero-collage-card {
    position: absolute;
    overflow: hidden;
    border-radius: 1rem;
    border: 8px solid #fff;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.14);
    width: 170px;
    height: 170px;
    animation: thpFloatA 5.4s ease-in-out infinite;
    z-index: 1;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-hero-collage-card .thp-home-hero-image,
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-hero-collage-card .thp-home-hero-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 0;
    object-fit: cover;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-hero-collage-card--a {
    left: 8px;
    top: 92px;
    transform: rotate(-8deg);
    animation-name: thpFloatA;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-hero-collage-card--b {
    left: 88px;
    top: 8px;
    transform: rotate(6deg);
    animation-name: thpFloatB;
    animation-duration: 6.2s;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-hero-collage-card--c {
    left: 166px;
    top: 100px;
    transform: rotate(12deg);
    animation-name: thpFloatC;
    animation-duration: 5.8s;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories > h2 {
    margin: 0 0 0.9rem;
    font-size: clamp(2.2rem, 3.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #0b1736;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-category {
    min-height: 108px;
    justify-content: flex-start;
    border-radius: 1rem;
    border: 1px solid #d9e2f1;
    background: #f8fafc;
    box-shadow: none;
    padding: 0.95rem 1rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-category h3 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.25;
    font-weight: 700;
    color: #1f2b43;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid .thp-tool-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    display: grid;
    place-items: center;
    color: #4f46e5;
    background: #e2e8f9;
    margin-bottom: 0.4rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid .thp-home-category:nth-child(2) .thp-tool-icon { background: #fbe4e9; color: #e11d48; }
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid .thp-home-category:nth-child(3) .thp-tool-icon { background: #d7f1f9; color: #0e7490; }
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid .thp-home-category:nth-child(4) .thp-tool-icon { background: #daf3d0; color: #0f766e; }
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid .thp-home-category:nth-child(5) .thp-tool-icon { background: #f8eecf; color: #ea580c; }
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid .thp-home-category:nth-child(6) .thp-tool-icon { background: #d8e6f7; color: #4f46e5; }
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid .thp-home-category:nth-child(7) .thp-tool-icon { background: #f3ddf6; color: #a21caf; }
body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid .thp-home-category:nth-child(8) .thp-tool-icon { background: #d3eff1; color: #0f766e; }

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid .thp-tool-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-trust-strip {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    border-radius: 0;
    padding: 0.95rem max(1rem, calc((100dvw - 1180px) / 2));
    background: #0f1b38;
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-trust-strip .thp-trust-logo {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.92);
    filter: none;
    min-width: 126px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-trust-logo-image {
    display: block;
    max-height: 24px;
    max-width: 104px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-featured-grid {
    gap: 1rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-featured-grid .thp-campaign-card {
    overflow: hidden;
    border-color: #d9e2f1;
    background: #fff;
    box-shadow: none;
    border-radius: 1rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-featured-grid .campaign-frame-thumb {
    border-radius: 0;
    display: block;
    width: 100%;
    background: #eef3fa;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-feature-card-body {
    padding: 0.85rem 1rem 0.95rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-feature-badge {
    display: inline-block;
    border-radius: 999px;
    background: #fff2e9;
    color: #ea580c;
    padding: 0.22rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-feature-time {
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    color: #64748b;
    font-size: 0.95rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-actions .btn {
    border-radius: 999px;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-actions .btn:not(.btn--outline) {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #fff;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-actions .thp-contract-only {
    display: none;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-faq-gradient {
    padding: 2rem;
    border-radius: 0;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
    margin-bottom: 0;
    width: 100dvw;
    background: linear-gradient(115deg, #6fe2db, #74b9ff 36%, #ffd36f 70%, #ff8fa8);
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-faq-gradient h2 {
    text-align: center;
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.2vw, 3rem);
    letter-spacing: -0.02em;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-faq-gradient .thp-faq-item {
    border-radius: 0.75rem;
    border-color: #fff;
    box-shadow: none;
    background: #fff;
    width: min(980px, calc(100% - 2rem));
    margin: 0 auto;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-faq-gradient .thp-faq-question {
    min-height: 56px;
    padding: 0.85rem 1rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-faq-gradient .thp-faq-answer {
    padding: 0 1rem;
}

body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-cta {
    display: none;
}

@keyframes thpFloatA {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50% { transform: rotate(-8deg) translateY(-10px); }
}

@keyframes thpFloatB {
    0%, 100% { transform: rotate(6deg) translateY(0); }
    50% { transform: rotate(6deg) translateY(-14px); }
}

@keyframes thpFloatC {
    0%, 100% { transform: rotate(12deg) translateY(0); }
    50% { transform: rotate(12deg) translateY(-8px); }
}

@media (max-width: 991.98px) {
    body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-hero-collage {
        min-height: 270px;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .thp-hero-collage-card {
        width: 145px;
        height: 145px;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .thp-hero-collage-card--c {
        left: 132px;
    }

    body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    body.app-shell:not(.app-shell--admin) .thp-home-page .thp-home-categories-grid {
        grid-template-columns: 1fr;
    }
}


/* merged from theme admin */

:root {
    --admin-bg: #eff1f3;
    --admin-sidebar-bg: #ffffff;
    --admin-topbar-bg: #ffffff;
    --admin-surface: #ffffff;
    --admin-surface-2: #f8f9fb;
    --admin-border: #e2e8f0;
    --text: #1f2a44;
    --muted: #5d6b89;
}

body.app-shell.app-shell--admin {
    background-color: #eff1f3;
    color: #1f2a44;
}

body.app-shell.app-shell--admin .site-header,
body.app-shell.app-shell--admin .site-footer {
    background: #ffffff;
    border-color: #d7e2f3;
}

body.app-shell.app-shell--admin .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(199, 214, 238, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

body.app-shell.app-shell--admin .admin-topbar {
    min-height: 74px;
    gap: 0.85rem;
}

body.app-shell.app-shell--admin .admin-topbar .brand {
    font-weight: 800;
    color: #0f172a;
}

body.app-shell.app-shell--admin .admin-topbar-actions .btn {
    border-radius: 999px;
}

body.app-shell.app-shell--admin .site-footer {
    margin-top: 0;
    background: #0f1b38;
    border-top: 0;
    color: #cbd5e1;
}

body.app-shell.app-shell--admin .site-footer .footer-links a {
    color: #dbe6fb;
}

body.app-shell.app-shell--admin .site-footer .footer-links a:hover {
    color: #ffffff;
}

body.app-shell.app-shell--admin .admin-sidebar-link {
    color: #3d4e74;
}

body.app-shell.app-shell--admin .admin-sidebar-link:hover,
body.app-shell.app-shell--admin .admin-sidebar-link.is-active {
    background: #eef3fb;
    border-color: #cfdaec;
    color: #1f2a44;
}

body.app-shell.app-shell--admin .admin-main .card,
body.app-shell.app-shell--admin .dashboard-kpi,
body.app-shell.app-shell--admin .dashboard-quick-action-item,
body.app-shell.app-shell--admin .admin-campaign-item {
    background: #ffffff;
    border-color: #d7e2f3;
}

body.app-shell.app-shell--admin .admin-topbar-meta .muted,
body.app-shell.app-shell--admin .dashboard-kpi-label,
body.app-shell.app-shell--admin .admin-campaign-subline,
body.app-shell.app-shell--admin .muted {
    color: #5d6b89;
}

.tha-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: calc(100vh - 64px);
}

.tha-sidebar {
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.tha-main {
    min-width: 0;
}

body.app-shell.app-shell--admin .admin-main .container {
    width: min(1340px, 100% - 2rem);
}

body.app-shell.app-shell--admin .maxton-welcome-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

body.app-shell.app-shell--admin .maxton-welcome-card {
    display: grid;
    gap: 0.9rem;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
}

body.app-shell.app-shell--admin .maxton-welcome-kicker {
    margin: 0;
    font-size: 0.84rem;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.05em;
}

body.app-shell.app-shell--admin .maxton-welcome-head h2 {
    margin: 0.2rem 0 0;
    font-size: 2rem;
    line-height: 1.1;
    color: #0f172a;
}

body.app-shell.app-shell--admin .maxton-welcome-metrics {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

body.app-shell.app-shell--admin .maxton-welcome-metrics p,
body.app-shell.app-shell--admin .maxton-mini-stat p {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.app-shell.app-shell--admin .maxton-welcome-metrics strong,
body.app-shell.app-shell--admin .maxton-mini-stat strong {
    color: #0f172a;
    font-size: 1.6rem;
    line-height: 1.1;
}

body.app-shell.app-shell--admin .maxton-mini-stat {
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    display: grid;
    align-content: center;
    gap: 0.45rem;
}

body.app-shell.app-shell--admin .dashboard-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

body.app-shell.app-shell--admin .dashboard-kpi {
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    padding: 0.78rem 0.9rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

body.app-shell.app-shell--admin .dashboard-kpi-label {
    color: #4b5d85;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

body.app-shell.app-shell--admin .dashboard-kpi-value {
    color: #0f172a;
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.app-shell.app-shell--admin .dashboard-quick-actions-grid {
    gap: 0.8rem;
}

body.app-shell.app-shell--admin .dashboard-quick-action-item {
    border: 1px solid #cfdcf3;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.85rem 0.9rem;
}

body.app-shell.app-shell--admin .dashboard-quick-action-link {
    color: #1f2a44;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body.app-shell.app-shell--admin .dashboard-quick-action-link:hover {
    color: #2f6bff;
}

body.app-shell.app-shell--admin .admin-topbar .mobile-menu-toggle {
    display: none !important;
}

body.app-shell.app-shell--admin .admin-main-dashboard {
    max-width: min(1280px, 100% - 2rem);
    margin-inline: auto;
    display: block;
    min-width: 0;
}

body.app-shell.app-shell--admin .admin-main-dashboard .dash-main {
    display: grid;
    gap: 20px;
    animation: adminDashRiseIn .65s ease both;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}

@keyframes adminDashRiseIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes adminDashFloatSoft {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

@keyframes adminDashShimmer {
    0% { background-position: -240px 0; }
    100% { background-position: calc(240px + 100%) 0; }
}

@keyframes adminDashPulseRing {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,79,42,0), 0 20px 45px rgba(239, 79, 42, 0.24); }
    50% { box-shadow: 0 0 0 10px rgba(239,79,42,0.16), 0 20px 45px rgba(239, 79, 42, 0.24); }
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero {
    background: linear-gradient(130deg, #0f1b38, #15284f 58%, #21457b 100%);
    color: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    display: grid;
    gap: 16px;
    grid-template-columns: 1.2fr .8fr;
    position: relative;
    overflow: hidden;
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -80px;
    top: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 72%);
    animation: adminDashFloatSoft 5.8s ease-in-out infinite;
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 70%);
    background-size: 240px 100%;
    animation: adminDashShimmer 3.8s linear infinite;
    pointer-events: none;
    opacity: .65;
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero h1 {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.22;
    color: #ffffff !important;
    position: relative;
    z-index: 1;
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.84) !important;
    max-width: 700px;
    position: relative;
    z-index: 1;
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #ef4f2a, #ff7b54);
    box-shadow: 0 20px 45px rgba(239, 79, 42, 0.24);
    width: max-content;
    position: relative;
    z-index: 1;
    animation: adminDashPulseRing 2.4s ease-in-out infinite;
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero-cta--ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,.42);
    box-shadow: none;
    animation: none;
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero-cta--ghost:hover {
    background: rgba(255,255,255,.14);
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    align-content: center;
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero-mini {
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
}

body.app-shell.app-shell--admin .admin-main-dashboard .hero-mini strong {
    display: block;
    font-size: 20px;
    margin-top: 6px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .kpi-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    border: 1px solid #edf2f7;
    display: grid;
    gap: 10px;
    transition: transform .2s ease, box-shadow .2s ease;
    animation: adminDashRiseIn .55s ease both;
}

body.app-shell.app-shell--admin .admin-main-dashboard .kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(20, 36, 72, 0.14);
}

body.app-shell.app-shell--admin .admin-main-dashboard .kpi-card .label {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

body.app-shell.app-shell--admin .admin-main-dashboard .kpi-card .value {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

body.app-shell.app-shell--admin .admin-main-dashboard .count-up {
    font-variant-numeric: tabular-nums;
}

body.app-shell.app-shell--admin .admin-main-dashboard .kpi-card .trend {
    font-size: 13px;
    font-weight: 700;
}

body.app-shell.app-shell--admin .admin-main-dashboard .trend.up { color: #0f9f6e; }
body.app-shell.app-shell--admin .admin-main-dashboard .trend.warn { color: #d97706; }
body.app-shell.app-shell--admin .admin-main-dashboard .trend.down { color: #dc2626; }

body.app-shell.app-shell--admin .admin-main-dashboard .content-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 16px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .panel {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    border: 1px solid #edf2f7;
    padding: 18px;
    animation: adminDashRiseIn .62s ease both;
}

body.app-shell.app-shell--admin .admin-main-dashboard .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .panel h2 {
    margin: 0;
    font-size: 18px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .panel .hint {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .qa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .qa-card {
    border: 1px solid #e8eef5;
    border-radius: 12px;
    padding: 12px;
    background: #fbfdff;
    transition: transform .18s ease, border-color .18s ease;
    text-decoration: none;
    color: inherit;
    display: grid;
    gap: 6px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .qa-card:hover {
    transform: translateY(-2px);
    border-color: rgba(239,79,42,.34);
}

body.app-shell.app-shell--admin .admin-main-dashboard .qa-card strong {
    display: block;
    margin-bottom: 0;
}

body.app-shell.app-shell--admin .admin-main-dashboard .qa-card--form .btn {
    justify-self: start;
}

body.app-shell.app-shell--admin .admin-main-dashboard .timeline {
    display: grid;
    gap: 12px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .event-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: start;
}

body.app-shell.app-shell--admin .admin-main-dashboard .event-dot {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #ef4f2a, #ff7b54);
}

body.app-shell.app-shell--admin .admin-main-dashboard .event-content {
    border: 1px solid #ebf1f7;
    background: #fcfdff;
    border-radius: 12px;
    padding: 10px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .event-content p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .table-wrap {
    overflow: auto;
    border: 1px solid #edf2f7;
    border-radius: 14px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .table-wrap table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    background: #fff;
}

body.app-shell.app-shell--admin .admin-main-dashboard .table-wrap th,
body.app-shell.app-shell--admin .admin-main-dashboard .table-wrap td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .table-wrap th {
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #f9fbff;
    font-weight: 800;
}

body.app-shell.app-shell--admin .admin-main-dashboard .status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

body.app-shell.app-shell--admin .admin-main-dashboard .status.ready { background: #dcfce7; color: #166534; }
body.app-shell.app-shell--admin .admin-main-dashboard .status.generating { background: #fef3c7; color: #92400e; }
body.app-shell.app-shell--admin .admin-main-dashboard .status.ended { background: #e2e8f0; color: #334155; }
body.app-shell.app-shell--admin .admin-main-dashboard .status.draft { background: #e0ecff; color: #1d4ed8; }

body.app-shell.app-shell--admin .admin-main-dashboard .asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .asset-list {
    display: grid;
    gap: 12px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .asset-card {
    border: 1px solid #e8eef5;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: adminDashRiseIn .58s ease both;
}

body.app-shell.app-shell--admin .admin-main-dashboard .asset-card--link {
    text-decoration: none;
    color: inherit;
}

body.app-shell.app-shell--admin .admin-main-dashboard .asset-card:hover {
    transform: translateY(-3px);
    border-color: rgba(239,79,42,.28);
    box-shadow: 0 14px 28px rgba(20, 36, 72, 0.12);
}

body.app-shell.app-shell--admin .admin-main-dashboard .asset-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff4ef, #f0f6ff);
    border: 1px solid #f0f2f7;
    position: relative;
    overflow: hidden;
}

body.app-shell.app-shell--admin .admin-main-dashboard .asset-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

body.app-shell.app-shell--admin .admin-main-dashboard .asset-meta strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

body.app-shell.app-shell--admin .admin-main-dashboard .asset-meta p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

@media (max-width: 1180px) {
    body.app-shell.app-shell--admin .admin-main-dashboard .asset-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .admin-main-dashboard .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-shell.app-shell--admin .admin-main-dashboard .content-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .admin-main-dashboard .hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.app-shell.app-shell--admin .admin-main-dashboard {
        max-width: 100%;
        width: min(100%, calc(100% - 1rem));
        margin-inline: auto;
    }

    body.app-shell.app-shell--admin .admin-main-dashboard .kpi-grid,
    body.app-shell.app-shell--admin .admin-main-dashboard .qa-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .admin-main-dashboard .hero,
    body.app-shell.app-shell--admin .admin-main-dashboard .panel {
        padding: 14px;
    }

    body.app-shell.app-shell--admin .admin-main-dashboard .table-wrap table {
        min-width: 580px;
    }

    body.app-shell.app-shell--admin .admin-main-dashboard .asset-card {
        grid-template-columns: 56px 1fr;
    }

}

@media (max-width: 980px) {
    body.app-shell.app-shell--admin .maxton-welcome-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .admin-topbar {
        min-height: 64px;
    }

    body.app-shell.app-shell--admin .admin-topbar .mobile-menu-toggle {
        display: inline-flex !important;
    }
}

body.app-shell.app-shell--admin input,
body.app-shell.app-shell--admin select,
body.app-shell.app-shell--admin textarea {
    background: #ffffff;
    color: #1f2a44;
    border: 1px solid #bfd2f2;
}

body.app-shell.app-shell--admin input::placeholder,
body.app-shell.app-shell--admin textarea::placeholder {
    color: #7b8aa8;
}

body.app-shell.app-shell--admin input:focus,
body.app-shell.app-shell--admin select:focus,
body.app-shell.app-shell--admin textarea:focus {
    border-color: #7da6f7;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.14);
    outline: none;
}

body.app-shell.app-shell--admin input[type="file"] {
    padding: 0.45rem 0.55rem;
}

body.app-shell.app-shell--admin input[type="file"]::file-selector-button {
    border: 1px solid #bfd2f2;
    background: #edf3ff;
    color: #1f2a44;
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    margin-right: 0.55rem;
    cursor: pointer;
}

body.app-shell.app-shell--admin .admin-users-table-wrap {
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #ffffff;
}

body.app-shell.app-shell--admin .admin-users-table {
    min-width: 860px;
}

body.app-shell.app-shell--admin .admin-users-table thead th {
    background: #f3f7ff;
    color: #3f5278;
    border-bottom: 1px solid #dbe3ef;
}

body.app-shell.app-shell--admin .admin-users-table th,
body.app-shell.app-shell--admin .admin-users-table td {
    border-bottom: 1px solid #e6edf7;
    color: #1f2a44;
}

body.app-shell.app-shell--admin .admin-users-table tbody tr:nth-child(even) {
    background: #f9fbff;
}

body.app-shell.app-shell--admin .admin-users-table tbody tr:hover {
    background: #eef4ff;
}

body.app-shell.app-shell--admin .admin-users-table code {
    color: #2f6bff;
    background: #edf3ff;
    border: 1px solid #cdddff;
    border-radius: 8px;
    padding: 0.15rem 0.35rem;
}

body.app-shell.app-shell--admin .admin-users-table .visibility-badge {
    color: #274e9b;
    background: #edf3ff;
    border-color: #bcd0f7;
}

body.app-shell.app-shell--admin .admin-users-table .button-row .btn--outline {
    border-color: #bfd2f2;
    background: #ffffff;
    color: #1f2a44;
}

body.app-shell.app-shell--admin .admin-users-table .button-row .btn--outline:hover {
    background: #edf3ff;
    color: #1f2a44;
}

body.app-shell.app-shell--admin .admin-main-settings {
    position: relative;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
    border-radius: 26px;
    padding: clamp(0.95rem, 1.8vw, 1.2rem);
}

body.app-shell.app-shell--admin .admin-main-settings::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .05;
    background-image: radial-gradient(#000 0.45px, transparent 0.45px);
    background-size: 3px 3px;
}

body.app-shell.app-shell--admin .admin-main-settings > * {
    position: relative;
    z-index: 1;
}

body.app-shell.app-shell--admin .admin-main-settings__hero {
    margin: 0;
    border-radius: 18px;
    padding: 1.15rem 1.15rem 0.25rem;
    background: transparent;
    border: 0;
}

body.app-shell.app-shell--admin .admin-main-settings__hero-inner h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #0f172a;
}

body.app-shell.app-shell--admin .admin-main-settings__hero-inner .muted {
    margin-top: 0.45rem;
    color: #334155;
    font-weight: 600;
}

body.app-shell.app-shell--admin .admin-main-settings__hero-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #fed7c7;
    background: #fff7f3;
    color: #b53218;
    padding: 0.34rem 0.72rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 0.65rem;
}

body.app-shell.app-shell--admin .admin-main-settings__toolbar {
    margin-top: 0;
    margin-bottom: 0.45rem;
}

body.app-shell.app-shell--admin .admin-main-settings__shell {
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 36px rgba(20, 36, 72, 0.08);
    backdrop-filter: blur(8px);
}

body.app-shell.app-shell--admin .admin-main-settings__shell-head {
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    background: linear-gradient(140deg, #0f1b38, #15284f);
    padding: 1.25rem 1.25rem 1.15rem;
}

body.app-shell.app-shell--admin .admin-main-settings .admin-main-settings__shell-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

body.app-shell.app-shell--admin .admin-main-settings__shell-head p {
    margin: 0.5rem 0 0;
    color: #cbd5e1;
    font-size: 0.9rem;
}

body.app-shell.app-shell--admin .admin-main-settings__shell-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 0.3rem 0.7rem;
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: 0.6rem;
}

body.app-shell.app-shell--admin .settings-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 1.3rem;
    align-items: start;
    padding: 1rem;
}

body.app-shell.app-shell--admin .settings-sidebar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(20, 36, 72, 0.08);
    padding: 0.75rem;
    position: sticky;
    top: 84px;
}

body.app-shell.app-shell--admin .settings-sidebar-title {
    margin: 0 0 .45rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #64748b;
}

body.app-shell.app-shell--admin .settings-tab-btn {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    border-radius: 12px;
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    font-weight: 700;
    font-size: 0.92rem;
    text-align: left;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

body.app-shell.app-shell--admin .settings-tab-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateY(-1px);
}

body.app-shell.app-shell--admin .settings-tab-btn.is-active {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(239, 79, 42, 0.24);
}

body.app-shell.app-shell--admin .settings-panels {
    gap: 1rem;
    max-height: min(78vh, 980px);
    overflow: auto;
    padding-right: 0.25rem;
}

body.app-shell.app-shell--admin .settings-panels::-webkit-scrollbar {
    width: 10px;
}

body.app-shell.app-shell--admin .settings-panels::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .45);
}

body.app-shell.app-shell--admin .settings-panel.card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0 12px 36px rgba(20, 36, 72, 0.08);
}

body.app-shell.app-shell--admin .settings-panel h2 {
    margin: 0 0 0.15rem;
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #0f172a;
}

body.app-shell.app-shell--admin .settings-panel .card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}

body.app-shell.app-shell--admin .settings-field-hint {
    color: #64748b;
}

body.app-shell.app-shell--admin .settings-field-ok {
    color: #15803d;
}

body.app-shell.app-shell--admin .settings-field-error {
    color: #b91c1c;
}

body.app-shell.app-shell--admin .settings-form.card,
body.app-shell.app-shell--admin .settings-form {
    background: transparent;
}

body.app-shell.app-shell--admin .settings-form-actions {
    margin: 0;
    border-top: 1px solid #e2e8f0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    background: #ffffff;
    padding: 0.95rem 1.25rem 1rem;
    box-shadow: none;
}

body.app-shell.app-shell--admin .settings-form-actions .muted {
    color: #64748b;
    font-weight: 700;
}

body.app-shell.app-shell--admin .settings-form-actions .btn {
    min-width: 140px;
    border-radius: 999px;
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 20px 45px rgba(239, 79, 42, 0.24);
}

body.app-shell.app-shell--admin .settings-menu-builder-list {
    gap: 0.65rem;
}

body.app-shell.app-shell--admin .settings-menu-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.3fr) minmax(120px, 1fr) minmax(160px, 0.9fr) auto;
    gap: 0.55rem;
    align-items: center;
}

body.app-shell.app-shell--admin .settings-menu-row .btn {
    white-space: nowrap;
}

@media (max-width: 980px) {
    body.app-shell.app-shell--admin .settings-menu-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    body.app-shell.app-shell--admin .admin-main-settings {
        border-radius: 20px;
        padding: 0.7rem;
    }

    body.app-shell.app-shell--admin .admin-main-settings__hero {
        padding: 0.85rem 0.85rem 0.2rem;
    }

    body.app-shell.app-shell--admin .admin-main-settings__shell {
        border-radius: 20px;
    }

    body.app-shell.app-shell--admin .admin-main-settings__shell-head {
        padding: 1rem 1rem 0.95rem;
    }

    body.app-shell.app-shell--admin .settings-layout {
        grid-template-columns: 1fr;
        padding: 0.85rem;
    }

    body.app-shell.app-shell--admin .settings-sidebar {
        position: static;
        top: auto;
        border-radius: 14px;
    }

    body.app-shell.app-shell--admin .settings-panels {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    body.app-shell.app-shell--admin .settings-form-actions {
        padding: 0.85rem 1rem 0.95rem;
    }
}

/* Global Maxton strict sync (all admin pages) */
body.app-shell.app-shell--admin .site-header {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

body.app-shell.app-shell--admin .admin-sidebar {
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
}

body.app-shell.app-shell--admin .admin-sidebar-nav {
    gap: 0.45rem;
}

body.app-shell.app-shell--admin .admin-sidebar-link {
    border-radius: 12px;
    font-weight: 500;
    padding: 0.62rem 0.78rem;
}

body.app-shell.app-shell--admin .admin-main .card,
body.app-shell.app-shell--admin .events-item,
body.app-shell.app-shell--admin .events-empty-state,
body.app-shell.app-shell--admin .checkin-status-card,
body.app-shell.app-shell--admin .admin-json-pre,
body.app-shell.app-shell--admin .admin-campaign-item {
    border-radius: 14px;
    border: 1px solid #dbe3ef;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

body.app-shell.app-shell--admin .admin-main h1,
body.app-shell.app-shell--admin .admin-main h2,
body.app-shell.app-shell--admin .admin-main h3 {
    color: #1f2937;
}

body.app-shell.app-shell--admin .admin-main .checkin-hero h1 {
    color: #ffffff;
}

body.app-shell.app-shell--admin .btn {
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

body.app-shell.app-shell--admin .btn--outline {
    border-color: #bfd2f2;
    background: #ffffff;
    color: #1f2a44;
}

body.app-shell.app-shell--admin .btn--outline:hover {
    background: #edf3ff;
    color: #1f2a44;
}

body.app-shell.app-shell--admin .btn:not(.btn--outline) {
    background: linear-gradient(180deg, #2f6bff 0%, #2558d6 100%);
    border-color: #2558d6;
    color: #ffffff;
}

body.app-shell.app-shell--admin .btn:not(.btn--outline):hover {
    filter: none;
    background: linear-gradient(180deg, #275de0 0%, #1f4fc8 100%);
}

/* Keep approved mockup primary CTA color on events create page */
body.app-shell.app-shell--admin .thp-events-create-page .btn.thp-events-btn-primary,
body.app-shell.app-shell--admin .thp-events-create-page .btn.thp-events-btn-primary:not(.btn--outline) {
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #ffffff;
    box-shadow: none;
}

body.app-shell.app-shell--admin .thp-events-create-page .btn.thp-events-btn-primary:hover,
body.app-shell.app-shell--admin .thp-events-create-page .btn.thp-events-btn-primary:not(.btn--outline):hover {
    background: #d8411f;
    border-color: #d8411f;
    color: #ffffff;
}

body.app-shell.app-shell--admin .flash,
body.app-shell.app-shell--admin .alert {
    border-radius: 12px;
}

body.app-shell.app-shell--admin .flash--info {
    border-color: #9fbef2;
    background: #edf4ff;
    color: #1f2a44;
    font-weight: 600;
}

body.app-shell.app-shell--admin .flash--success {
    border-color: #4ba176;
    background: #e9f9ef;
    color: #103b25;
    font-weight: 600;
}

body.app-shell.app-shell--admin .flash--error {
    border-color: #df6f6f;
    background: #fff0f0;
    color: #6b1212;
    font-weight: 600;
}

body.app-shell.app-shell--admin .admin-users-table thead th,
body.app-shell.app-shell--admin .events-preview-table th,
body.app-shell.app-shell--admin .events-admin-table th {
    background: #f3f7ff;
    color: #3f5278;
}

body.app-shell.app-shell--admin .events-preview-table,
body.app-shell.app-shell--admin .events-admin-table,
body.app-shell.app-shell--admin .events-guests-table,
body.app-shell.app-shell--admin .admin-users-table {
    border-radius: 12px;
    overflow: hidden;
}

body.app-shell.app-shell--admin .events-preview-table td,
body.app-shell.app-shell--admin .events-admin-table td,
body.app-shell.app-shell--admin .events-guests-table td,
body.app-shell.app-shell--admin .admin-users-table td {
    background: #ffffff;
    color: #1f2a44;
    border-bottom: 1px solid #e6edf7;
}

body.app-shell.app-shell--admin .events-preview-table tbody tr:nth-child(even) td,
body.app-shell.app-shell--admin .events-admin-table tbody tr:nth-child(even) td,
body.app-shell.app-shell--admin .events-guests-table tbody tr:nth-child(even) td {
    background: #f9fbff;
}

body.app-shell.app-shell--admin .events-preview-table tbody tr:hover td,
body.app-shell.app-shell--admin .events-admin-table tbody tr:hover td,
body.app-shell.app-shell--admin .events-guests-table tbody tr:hover td {
    background: #eef4ff;
}

body.app-shell.app-shell--admin #admin-user-actions-modal .admin-modal-card {
    width: min(560px, 100%);
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

body.app-shell.app-shell--admin #admin-user-actions-modal .admin-modal-head {
    border-bottom: 1px solid #e3eaf5;
    padding-bottom: 0.6rem;
}

body.app-shell.app-shell--admin #admin-user-actions-modal #admin-user-actions-title {
    color: #1f2937;
}

body.app-shell.app-shell--admin #admin-user-actions-modal .muted,
body.app-shell.app-shell--admin #admin-user-actions-modal label {
    color: #4b5d85;
}

body.app-shell.app-shell--admin #admin-user-actions-modal .form-stack {
    border: 1px solid #e3eaf5;
    border-radius: 12px;
    padding: 0.8rem;
    background: #fbfdff;
}

body.app-shell.app-shell--admin #admin-user-actions-modal .form-stack .button-row {
    justify-content: flex-start;
}

body.app-shell.app-shell--admin #admin-user-actions-modal .btn--danger {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    border-color: #b91c1c;
    color: #ffffff;
}

body.app-shell.app-shell--admin #admin-user-actions-modal .btn--danger:hover {
    background: linear-gradient(180deg, #c61f1f 0%, #991b1b 100%);
    border-color: #991b1b;
    color: #ffffff;
}

body.app-shell.app-shell--admin .admin-campaign-actions {
    gap: 0.55rem;
}

body.app-shell.app-shell--admin .admin-campaign-actions form {
    margin: 0;
}

body.app-shell.app-shell--admin .admin-campaign-actions .icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #bfd2f2;
    background: #ffffff;
    color: #1f2a44;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

body.app-shell.app-shell--admin .admin-campaign-actions .icon-btn .ui-icon {
    width: 16px;
    height: 16px;
}

body.app-shell.app-shell--admin .admin-campaign-actions .icon-btn:hover {
    background: #edf3ff;
    border-color: #9ab8ee;
    color: #1f2a44;
}

body.app-shell.app-shell--admin .admin-campaign-actions .icon-btn--danger {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

body.app-shell.app-shell--admin .admin-campaign-actions .icon-btn--danger:hover {
    background: #ffe4e6;
    border-color: #fda4af;
    color: #9f1239;
}

body.app-shell.app-shell--admin #admin-edit-modal .admin-modal-card {
    width: min(560px, 100%);
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

body.app-shell.app-shell--admin #admin-edit-modal .admin-modal-head {
    border-bottom: 1px solid #e3eaf5;
    padding-bottom: 0.6rem;
}

body.app-shell.app-shell--admin #admin-edit-modal #admin-edit-title {
    color: #1f2937;
}

body.app-shell.app-shell--admin #admin-edit-modal label,
body.app-shell.app-shell--admin #admin-edit-modal .muted {
    color: #4b5d85;
}

body.app-shell.app-shell--admin #admin-edit-modal .form-stack {
    border: 1px solid #e3eaf5;
    border-radius: 12px;
    padding: 0.8rem;
    background: #fbfdff;
}

body.app-shell.app-shell--admin #admin-edit-modal .icon-btn--neutral {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #bfd2f2;
    background: #ffffff;
    color: #1f2a44;
}

body.app-shell.app-shell--admin #admin-edit-modal .icon-btn--neutral .ui-icon {
    width: 16px;
    height: 16px;
}

body.app-shell.app-shell--admin #admin-edit-modal .icon-btn--neutral:hover {
    background: #edf3ff;
    border-color: #9ab8ee;
    color: #1f2a44;
}

/* Admin shell header + sidebar rollout (approved mockup sync) */
body.app-shell.app-shell--admin {
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

body.app-shell.app-shell--admin .site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    border-bottom: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 24px rgba(15, 34, 70, 0.08);
}

body.app-shell.app-shell--admin .admin-topbar {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body.app-shell.app-shell--admin .admin-topbar-kicker {
    margin: 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
    color: #64748b;
}

body.app-shell.app-shell--admin .admin-topbar-meta {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

body.app-shell.app-shell--admin .admin-topbar-meta strong {
    margin: 0;
    color: #0f1b38;
    font: 800 1.1rem/1.15 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.app-shell.app-shell--admin .admin-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

body.app-shell.app-shell--admin .admin-topbar-home {
    border-radius: 12px;
    border: 1px solid #d5dfef;
    background: #ffffff;
    color: #334155;
    font-weight: 800;
    box-shadow: none;
}

body.app-shell.app-shell--admin .admin-topbar-home:hover {
    background: #f8fafc;
    color: #0f172a;
}

body.app-shell.app-shell--admin .admin-locale-form {
    margin: 0;
}

body.app-shell.app-shell--admin .admin-locale-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border-radius: 999px;
    border: 1px solid #d4ddec;
    padding: 0.2rem;
    min-height: auto;
    background: #ffffff;
    box-shadow: none;
    white-space: nowrap;
}

body.app-shell.app-shell--admin .admin-locale-toggle .thp-locale-pill {
    min-width: 40px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.24rem 0.45rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #64748b;
    line-height: 1;
}

body.app-shell.app-shell--admin .admin-locale-toggle .thp-locale-pill.is-active {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #ffffff;
}

body.app-shell.app-shell--admin .admin-avatar-wrap {
    position: relative;
}

body.app-shell.app-shell--admin .admin-avatar-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #d8e0ee;
    background: #ffffff;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
}

body.app-shell.app-shell--admin .admin-avatar-btn:hover {
    background: #f8fafc;
}

body.app-shell.app-shell--admin .admin-avatar-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 120;
    width: min(220px, 82vw);
    border-radius: 14px;
    border: 1px solid #dde6f3;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    padding: 0.45rem;
    display: grid;
    gap: 0.15rem;
}

body.app-shell.app-shell--admin .admin-avatar-menu[hidden] {
    display: none !important;
}

body.app-shell.app-shell--admin .admin-avatar-menu-user {
    margin: 0;
    padding: 0.45rem 0.55rem;
    font-size: 0.76rem;
    color: #64748b;
    border-bottom: 1px solid #edf2f8;
}

body.app-shell.app-shell--admin .admin-avatar-menu a,
body.app-shell.app-shell--admin .admin-avatar-menu button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    display: block;
    padding: 0.5rem 0.55rem;
    border-radius: 10px;
    text-decoration: none;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .admin-avatar-menu a:hover,
body.app-shell.app-shell--admin .admin-avatar-menu button:hover {
    background: #f8fafc;
    color: #0f172a;
}

body.app-shell.app-shell--admin .admin-avatar-menu form {
    margin: 0;
}

body.app-shell.app-shell--admin .admin-shell {
    display: block;
    min-height: 100vh;
}

body.app-shell.app-shell--admin .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: 18rem;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    will-change: transform;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 34px rgba(15, 34, 70, 0.1);
    padding: 1rem;
    min-height: 100vh;
    overflow-y: auto;
}

body.app-shell.app-shell--admin .admin-sidebar.is-open {
    transform: translateX(0);
}

body.app-shell.app-shell--admin .admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.85rem;
}

body.app-shell.app-shell--admin .admin-sidebar-brand .brand {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #0f1b38;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 800;
    text-decoration: none;
    overflow: hidden;
}

body.app-shell.app-shell--admin .admin-sidebar-brand .site-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.app-shell.app-shell--admin .admin-sidebar-kicker {
    margin: 0;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #64748b;
    font-weight: 800;
}

body.app-shell.app-shell--admin .admin-sidebar-brand h2 {
    margin: 0.22rem 0 0;
    font-size: 1rem;
    color: #0f172a;
    font-weight: 800;
}

body.app-shell.app-shell--admin .admin-sidebar-nav {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.9rem;
}

body.app-shell.app-shell--admin .admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    padding: 0.58rem 0.72rem;
    font-size: 0.85rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .admin-sidebar-link:hover {
    background: #f8fafc;
    border-color: #d4deec;
    color: #0f172a;
}

body.app-shell.app-shell--admin .admin-sidebar-link.is-active {
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(239, 79, 42, 0.24);
}

body.app-shell.app-shell--admin .admin-sidebar-system {
    margin-top: 1rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.7rem 0.75rem;
}

body.app-shell.app-shell--admin .admin-sidebar-system p {
    margin: 0;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #64748b;
    font-weight: 800;
}

body.app-shell.app-shell--admin .admin-sidebar-system strong {
    margin-top: 0.28rem;
    display: block;
    font-size: 0.84rem;
    color: #334155;
}

body.app-shell.app-shell--admin .admin-main {
    padding: 1rem 0 1.2rem;
    margin-left: 0;
    min-width: 0;
}

body.app-shell.app-shell--admin .admin-shell-overlay {
    position: fixed;
    inset: 0;
    z-index: 115;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.app-shell.app-shell--admin .admin-shell-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

body.app-shell.app-shell--admin .admin-menu-toggle {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid #d8e0ee;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

body.app-shell.app-shell--admin .admin-menu-toggle-lines {
    width: 20px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.app-shell.app-shell--admin .admin-menu-toggle-line {
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

body.app-shell.app-shell--admin .admin-menu-toggle.is-open .admin-menu-toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.app-shell.app-shell--admin .admin-menu-toggle.is-open .admin-menu-toggle-line:nth-child(2) {
    opacity: 0;
}

body.app-shell.app-shell--admin .admin-menu-toggle.is-open .admin-menu-toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1024px) {
    body.app-shell.app-shell--admin .admin-menu-toggle,
    body.app-shell.app-shell--admin .admin-shell-overlay {
        display: none;
    }

    body.app-shell.app-shell--admin .admin-sidebar {
        inset: 0 auto 0 0;
        transform: translateX(0);
        width: 18rem;
        z-index: 120;
    }

    body.app-shell.app-shell--admin .admin-main {
        margin-left: 18rem;
        padding-top: 1rem;
    }
}

@media (max-width: 767.98px) {
    body.app-shell.app-shell--admin .admin-topbar {
        gap: 0.35rem;
        padding-inline: 0.2rem;
    }

    body.app-shell.app-shell--admin .admin-topbar-home {
        display: none;
    }

    body.app-shell.app-shell--admin .admin-topbar-meta {
        min-width: 0;
        flex: 1;
    }

    body.app-shell.app-shell--admin .admin-topbar-kicker {
        font-size: 0.6rem;
    }

    body.app-shell.app-shell--admin .admin-topbar-meta strong {
        font-size: 0.88rem;
    }

    body.app-shell.app-shell--admin .admin-topbar-actions {
        gap: 0.22rem;
    }

    body.app-shell.app-shell--admin .admin-locale-form {
        display: inline-flex;
    }

    body.app-shell.app-shell--admin .admin-topbar-actions .admin-locale-toggle span {
        display: inline-block;
    }

    body.app-shell.app-shell--admin .admin-locale-toggle {
        display: inline-flex;
        padding: 0.1rem;
        gap: 0.1rem;
    }

    body.app-shell.app-shell--admin .admin-locale-toggle .thp-locale-pill {
        min-width: 26px;
        font-size: 0.6rem;
        padding: 0.14rem 0.2rem;
    }

    body.app-shell.app-shell--admin .admin-avatar-btn,
    body.app-shell.app-shell--admin .admin-menu-toggle {
        width: 36px;
        height: 36px;
    }

    body.app-shell.app-shell--admin .admin-sidebar {
        width: min(18rem, 84vw);
        border: 0;
        border-radius: 0;
    }
}

/* Admin Users runtime rollout (approved mockup sync) */
body.app-shell.app-shell--admin .thp-admin-users-page {
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
    display: grid;
    gap: 14px;
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-admin-users-page > * {
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-admin-users-head {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    border-radius: 18px;
    border: 1px solid #d8e3f4;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    backdrop-filter: blur(10px);
}

body.app-shell.app-shell--admin .thp-admin-users-head h1 {
    margin: 0;
    font: 800 1.5rem/1.15 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-users-head .muted {
    margin: 6px 0 0;
    color: #5f6f92;
}

body.app-shell.app-shell--admin .thp-admin-users-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .btn.thp-btn-primary,
body.app-shell.app-shell--admin .btn.thp-btn-primary:not(.btn--outline) {
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #fff;
    box-shadow: none;
}

body.app-shell.app-shell--admin .btn.thp-btn-primary:hover,
body.app-shell.app-shell--admin .btn.thp-btn-primary:not(.btn--outline):hover {
    background: #d8411f;
    border-color: #d8411f;
    color: #fff;
}

body.app-shell.app-shell--admin .thp-admin-users-filters-card {
    border-radius: 18px;
    border: 1px solid #d8e3f4;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    backdrop-filter: blur(10px);
}

body.app-shell.app-shell--admin .thp-admin-users-filters {
    padding: 14px 16px;
    display: grid;
    gap: 10px;
    grid-template-columns: 1.2fr 1fr auto;
    align-items: end;
}

body.app-shell.app-shell--admin .thp-admin-users-filters .field {
    display: grid;
    gap: 6px;
}

body.app-shell.app-shell--admin .thp-admin-users-filters .field label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #2a3f6a;
}

body.app-shell.app-shell--admin .thp-admin-users-filters .input,
body.app-shell.app-shell--admin .thp-admin-users-filters .select {
    min-height: 40px;
    border: 1px solid #cedaf1;
    border-radius: 11px;
    padding: 0 12px;
    background: #fff;
    color: #1a2f58;
    font: 600 0.88rem/1 Manrope, sans-serif;
    width: 100%;
}

body.app-shell.app-shell--admin .thp-admin-users-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-users-kpi-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 16px 16px;
}

body.app-shell.app-shell--admin .thp-admin-users-kpi {
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}

body.app-shell.app-shell--admin .thp-admin-users-kpi small {
    font-size: 0.75rem;
    color: #5d7096;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-users-kpi strong {
    font: 800 1.12rem/1.1 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #203762;
}

body.app-shell.app-shell--admin .thp-admin-users-table-card {
    border-radius: 18px;
    border: 1px solid #d8e3f4;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    backdrop-filter: blur(10px);
}

body.app-shell.app-shell--admin .thp-admin-users-table-wrap {
    overflow: auto;
}

body.app-shell.app-shell--admin .thp-admin-users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

body.app-shell.app-shell--admin .thp-admin-users-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6f95;
    border-bottom: 1px solid #d8e3f4;
    background: rgba(247, 250, 255, 0.82);
}

body.app-shell.app-shell--admin .thp-admin-users-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #e4ebf8;
    vertical-align: middle;
    font-size: 0.87rem;
    color: #17305c;
}

body.app-shell.app-shell--admin .thp-admin-users-table tbody tr:hover {
    background: rgba(248, 251, 255, 0.75);
}

body.app-shell.app-shell--admin .thp-admin-users-actions-col {
    width: 36%;
}

body.app-shell.app-shell--admin .thp-admin-users-user-meta {
    display: grid;
    gap: 2px;
}

body.app-shell.app-shell--admin .thp-admin-users-user-meta strong {
    font-size: 0.9rem;
}

body.app-shell.app-shell--admin .thp-admin-users-user-meta small {
    color: #607197;
}

body.app-shell.app-shell--admin .thp-admin-users-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    border: 1px solid;
    white-space: nowrap;
}

body.app-shell.app-shell--admin .thp-admin-users-pill.is-admin {
    color: #153a77;
    background: #eaf2ff;
    border-color: #b8cef2;
}

body.app-shell.app-shell--admin .thp-admin-users-pill.is-creator {
    color: #614604;
    background: #fff5df;
    border-color: #efd49e;
}

body.app-shell.app-shell--admin .thp-admin-users-pill.is-banned {
    color: #7f1d1d;
    background: #fee2e2;
    border-color: #fecaca;
}

body.app-shell.app-shell--admin .thp-admin-users-pill.is-active {
    color: #157347;
    background: #e9f9ef;
    border-color: #b8e8cf;
}

body.app-shell.app-shell--admin .thp-admin-users-pill.is-suspended {
    color: #b54708;
    background: #fff4e5;
    border-color: #f5d3a9;
}

body.app-shell.app-shell--admin .thp-admin-users-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-users-btn-mini {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid #cedaf1;
    background: #fff;
    color: #1d3561;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

body.app-shell.app-shell--admin .thp-admin-users-btn-mini:hover {
    background: #f4f8ff;
    border-color: #bdd1f1;
}

body.app-shell.app-shell--admin .thp-admin-users-btn-mini.is-warn {
    border-color: #f2cf9a;
    color: #9b5d02;
    background: #fff8ec;
}

body.app-shell.app-shell--admin .thp-admin-users-btn-mini.is-danger {
    border-color: #f3b4b0;
    color: #a12b21;
    background: #fff1f0;
}

body.app-shell.app-shell--admin .thp-admin-users-foot {
    padding: 12px 16px 14px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    color: #5e7197;
    font-size: 0.82rem;
    border-top: 1px solid #e1e9f7;
}

body.app-shell.app-shell--admin .thp-admin-users-pager {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-users-modal {
    border: none;
    border-radius: 16px;
    width: min(560px, calc(100% - 24px));
    padding: 0;
    overflow: hidden;
    box-shadow: 0 24px 44px rgba(17, 34, 74, 0.22);
}

body.app-shell.app-shell--admin .thp-admin-users-modal::backdrop {
    background: rgba(7, 17, 38, 0.48);
    backdrop-filter: blur(3px);
}

body.app-shell.app-shell--admin .thp-admin-users-modal-card {
    background: #fff;
    border: 1px solid #dbe5f5;
}

body.app-shell.app-shell--admin .thp-admin-users-modal-head {
    padding: 14px 16px;
    border-bottom: 1px solid #e2e9f7;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

body.app-shell.app-shell--admin .thp-admin-users-modal-head h3 {
    margin: 0;
    font: 800 1.02rem/1.2 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #142f5b;
}

body.app-shell.app-shell--admin .thp-admin-users-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid #d3def3;
    background: #fff;
    color: #355180;
    font-weight: 800;
    cursor: pointer;
}

body.app-shell.app-shell--admin .thp-admin-users-modal-body {
    padding: 14px 16px;
    display: grid;
    gap: 10px;
}

body.app-shell.app-shell--admin .thp-admin-users-modal-body p {
    margin: 0;
    color: #4f628a;
    font-size: 0.88rem;
    line-height: 1.45;
}

body.app-shell.app-shell--admin .thp-admin-users-form-stack {
    display: grid;
    gap: 9px;
}

body.app-shell.app-shell--admin .thp-admin-users-modal-foot {
    padding: 12px 16px 14px;
    border-top: 1px solid #e2e9f7;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    body.app-shell.app-shell--admin .thp-admin-users-filters {
        grid-template-columns: 1fr 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-users-filter-actions {
        grid-column: 1 / -1;
    }

    body.app-shell.app-shell--admin .thp-admin-users-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-admin-users-page {
        width: min(1120px, 100% - 1rem);
    }

    body.app-shell.app-shell--admin .thp-admin-users-head-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-users-filters {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-users-kpi-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-users-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.app-shell.app-shell--admin .thp-admin-users-table {
        min-width: 860px;
    }

    body.app-shell.app-shell--admin .thp-admin-users-foot {
        align-items: flex-start;
    }
}

/* Admin Campaigns UI rollout (approval mockup sync) */
body.app-shell.app-shell--admin .thp-admin-campaigns-page {
    width: min(1140px, 100% - 2rem);
    margin-inline: auto;
    display: grid;
    gap: 14px;
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-page > * {
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-head,
body.app-shell.app-shell--admin .thp-admin-campaigns-filters-card,
body.app-shell.app-shell--admin .thp-admin-campaigns-table-card {
    border-radius: 18px;
    border: 1px solid #d8e3f4;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    backdrop-filter: blur(10px);
}

body.app-shell.app-shell--admin .thp-admin-campaigns-head {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-head h1 {
    margin: 0;
    font: 800 1.55rem/1.15 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-head .muted {
    margin: 6px 0 0;
    color: #5f6f92;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .btn.thp-admin-campaigns-btn-primary,
body.app-shell.app-shell--admin .btn.thp-admin-campaigns-btn-primary:not(.btn--outline) {
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #fff;
    box-shadow: none;
}

body.app-shell.app-shell--admin .btn.thp-admin-campaigns-btn-primary:hover,
body.app-shell.app-shell--admin .btn.thp-admin-campaigns-btn-primary:not(.btn--outline):hover {
    background: #d8411f;
    border-color: #d8411f;
    color: #fff;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-filters-head {
    padding: 16px 16px 0;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-filters-head h2 {
    margin: 0;
    font: 800 1.06rem/1.2 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-filters-sub {
    margin: 4px 0 0;
    color: #5f6f92;
    font-size: 0.84rem;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-filter-grid {
    padding: 12px 16px 16px;
    display: grid;
    gap: 10px;
    align-items: end;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.app-shell.app-shell--admin .thp-admin-campaigns-field {
    display: grid;
    gap: 5px;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-field label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #4f5f84;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-field input,
body.app-shell.app-shell--admin .thp-admin-campaigns-field select {
    width: 100%;
    border: 1px solid #cfdbf0;
    border-radius: 11px;
    min-height: 38px;
    padding: 9px 10px;
    font: 600 0.89rem/1.3 Manrope, sans-serif;
    color: #1c2e56;
    background: #fff;
    outline: none;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-kpis {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.app-shell.app-shell--admin .thp-admin-campaigns-kpi {
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: grid;
    gap: 4px;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-kpi small {
    color: #61739a;
    font-size: 0.78rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-kpi strong {
    font-size: 1.14rem;
    font-family: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #203762;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-table-card {
    padding: 16px;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-table-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-table-head h2 {
    margin: 0;
    font: 800 1.06rem/1.2 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-table-head p {
    margin: 4px 0 0;
    color: #5f6f92;
    font-size: 0.84rem;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-table-wrap {
    overflow: auto;
    border: 1px solid #d6e0f1;
    border-radius: 12px;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.88rem;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-table th,
body.app-shell.app-shell--admin .thp-admin-campaigns-table td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid #edf2fb;
    vertical-align: top;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-table th {
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #55678f;
    background: #f7faff;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-table tr:last-child td {
    border-bottom: 0;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-name {
    font-weight: 800;
    color: #112858;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-slug {
    margin-top: 3px;
    color: #5f7094;
    font-size: 0.78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-word;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    border: 1px solid transparent;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-chip-type-avatar {
    color: #1d4ed8;
    background: #e9f0ff;
    border-color: #c9dbff;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-chip-type-card {
    color: #7c3aed;
    background: #f3e8ff;
    border-color: #e6d0ff;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-chip-visibility-public {
    color: #0e5f43;
    background: #e9f9ef;
    border-color: #b8e8cf;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-chip-visibility-unlisted {
    color: #66510f;
    background: #fff8e0;
    border-color: #f2e4b3;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-chip-visibility-private {
    color: #334155;
    background: #eef2f8;
    border-color: #d4deec;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-row-actions form {
    margin: 0;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-btn-mini {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid #cedaf1;
    background: #fff;
    color: #243a67;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-btn-mini:hover {
    background: #f4f8ff;
    border-color: #bdd1f1;
    color: #243a67;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-btn-mini.is-danger {
    background: #fff1f2;
    color: #dc2626;
    border-color: #fecdd3;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-pagination {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-pagination p {
    margin: 0;
    color: #5f6f92;
    font-size: 0.82rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-campaigns-page-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

@media (max-width: 1180px) {
    body.app-shell.app-shell--admin .thp-admin-campaigns-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.app-shell.app-shell--admin .thp-admin-campaigns-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-admin-campaigns-page {
        width: min(1140px, 100% - 1rem);
    }

    body.app-shell.app-shell--admin .thp-admin-campaigns-filter-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-campaigns-kpis {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-campaigns-head-actions .btn,
    body.app-shell.app-shell--admin .thp-admin-campaigns-filter-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-campaigns-pagination {
        flex-direction: column;
        align-items: flex-start;
    }

    body.app-shell.app-shell--admin .thp-admin-campaigns-page-buttons {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-campaigns-page-buttons .btn {
        flex: 1;
    }
}

/* Campaign edit page uses creator layout as requested */
body.app-shell.app-shell--admin .thp-admin-campaign-edit-page {
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
}

body.app-shell.app-shell--admin .thp-admin-campaign-edit-page .creator-status {
    background: rgba(255, 255, 255, 0.12);
}

body.app-shell.app-shell--admin .thp-admin-campaign-edit-page .thp-admin-campaign-edit-hero-actions {
    margin-left: auto;
    align-items: flex-start;
}

body.app-shell.app-shell--admin .thp-admin-campaign-edit-page .thp-admin-campaign-edit-preview {
    border-style: solid;
    background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}

body.app-shell.app-shell--admin .thp-admin-campaign-edit-page .thp-admin-campaign-edit-form {
    gap: 0.9rem;
}

body.app-shell.app-shell--admin .thp-admin-campaign-edit-page #avatar-variants-builder input,
body.app-shell.app-shell--admin .thp-admin-campaign-edit-page #avatar-variants-builder .button-row {
    display: none;
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-admin-campaign-edit-page {
        width: min(1120px, 100% - 1rem);
    }

    body.app-shell.app-shell--admin .thp-admin-campaign-edit-page .thp-admin-campaign-edit-hero-actions {
        width: 100%;
        margin-left: 0;
    }

    body.app-shell.app-shell--admin .thp-admin-campaign-edit-page .thp-admin-campaign-edit-hero-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-campaign-edit-page .creator-actions {
        grid-template-columns: 1fr;
    }
}

body.app-shell.app-shell--admin .landing-pages-admin {
    position: relative;
    gap: 0.9rem;
}

body.app-shell.app-shell--admin .landing-pages-admin::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

body.app-shell.app-shell--admin .landing-pages-admin__hero {
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    padding: 1.1rem;
    border-radius: 16px;
    display: grid;
    gap: 0.55rem;
}

body.app-shell.app-shell--admin .landing-pages-admin__hero-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .landing-pages-admin__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(239, 79, 42, 0.2);
    background: rgba(239, 79, 42, 0.1);
    color: #b53218;
    padding: 0.28rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.app-shell.app-shell--admin .landing-pages-admin__hero h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .landing-pages-admin__hero-subtitle {
    margin: 0;
    font-size: 0.86rem;
    color: #607198;
}

body.app-shell.app-shell--admin .landing-pages-admin__create {
    margin-left: auto;
    border-radius: 999px;
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 20px 45px rgba(239, 79, 42, 0.24);
}

body.app-shell.app-shell--admin .landing-pages-admin__layout {
    display: grid;
    gap: 0.9rem;
}

body.app-shell.app-shell--admin .landing-pages-admin__filters {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.95rem;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

body.app-shell.app-shell--admin .landing-pages-admin__filters h2,
body.app-shell.app-shell--admin .landing-pages-admin__list-head h3,
body.app-shell.app-shell--admin .landing-pages-admin__kpi-card h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .landing-pages-admin__filters label {
    display: grid;
    gap: 0.38rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.app-shell.app-shell--admin .landing-pages-admin__filters input,
body.app-shell.app-shell--admin .landing-pages-admin__filters select {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.58rem 0.72rem;
    font-size: 0.86rem;
    color: #1f2937;
}

body.app-shell.app-shell--admin .landing-pages-admin__apply {
    border-radius: 12px;
    background: #0f1b38;
    border-color: #0f1b38;
    color: #fff;
    font-weight: 700;
}

body.app-shell.app-shell--admin .landing-pages-admin__content {
    display: grid;
    gap: 0.9rem;
}

body.app-shell.app-shell--admin .landing-pages-admin__list-card,
body.app-shell.app-shell--admin .landing-pages-admin__kpi-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.95rem;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
}

body.app-shell.app-shell--admin .landing-pages-admin__list-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .landing-pages-admin__count {
    display: inline-flex;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
}

body.app-shell.app-shell--admin .landing-pages-admin__list {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.65rem;
}

body.app-shell.app-shell--admin .landing-pages-admin__item {
    display: grid;
    gap: 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    padding: 0.65rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.app-shell.app-shell--admin .landing-pages-admin__item:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(20, 36, 72, 0.1);
}

body.app-shell.app-shell--admin .landing-pages-admin__thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

body.app-shell.app-shell--admin .landing-pages-admin__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .landing-pages-admin__sub {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

body.app-shell.app-shell--admin .landing-pages-admin__status {
    margin-top: 0.42rem;
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.2rem 0.52rem;
    font-size: 0.72rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .landing-pages-admin__status--published {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

body.app-shell.app-shell--admin .landing-pages-admin__status--draft {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

body.app-shell.app-shell--admin .landing-pages-admin__actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .landing-pages-admin__actions .btn {
    min-height: 34px;
    padding: 0.38rem 0.72rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .landing-pages-admin__kpis {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.app-shell.app-shell--admin .landing-pages-admin__kpi {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 0.62rem;
}

body.app-shell.app-shell--admin .landing-pages-admin__kpi p {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

body.app-shell.app-shell--admin .landing-pages-admin__kpi strong {
    margin-top: 0.3rem;
    display: block;
    font-size: 1.3rem;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .landing-pages-admin__kpi strong.is-ok {
    color: #16a34a;
}

body.app-shell.app-shell--admin .landing-pages-admin__kpi strong.is-warn {
    color: #ca8a04;
}

body.app-shell.app-shell--admin .landing-pages-admin__empty {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 0.8rem;
    text-align: center;
    color: #64748b;
    font-size: 0.88rem;
    background: #f8fafc;
}

@media (min-width: 1080px) {
    body.app-shell.app-shell--admin .landing-pages-admin__layout {
        grid-template-columns: 300px minmax(0, 1fr);
        align-items: start;
    }

    body.app-shell.app-shell--admin .landing-pages-admin__item {
        grid-template-columns: 220px minmax(0, 1fr) auto;
        align-items: center;
    }

    body.app-shell.app-shell--admin .landing-pages-admin__kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Admin posts runtime rollout (approved mockup sync) */
body.app-shell.app-shell--admin .thp-admin-posts-page {
    position: relative;
    gap: 0.95rem;
}

body.app-shell.app-shell--admin .thp-admin-posts-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

body.app-shell.app-shell--admin .thp-admin-posts-hero {
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    padding: 1.1rem;
    border-radius: 16px;
    display: grid;
    gap: 0.55rem;
}

body.app-shell.app-shell--admin .thp-admin-posts-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

body.app-shell.app-shell--admin .thp-admin-posts-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(239, 79, 42, 0.2);
    background: rgba(239, 79, 42, 0.1);
    color: #b53218;
    padding: 0.28rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.app-shell.app-shell--admin .thp-admin-posts-hero h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-posts-hero-subtitle {
    margin: 0;
    font-size: 0.86rem;
    color: #607198;
}

body.app-shell.app-shell--admin .thp-admin-posts-hero-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-posts-create {
    border-radius: 12px;
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 20px 45px rgba(239, 79, 42, 0.24);
}

body.app-shell.app-shell--admin .thp-admin-posts-layout {
    display: grid;
    gap: 0.9rem;
}

body.app-shell.app-shell--admin .thp-admin-posts-filters {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.95rem;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

body.app-shell.app-shell--admin .thp-admin-posts-filters h2,
body.app-shell.app-shell--admin .thp-admin-posts-summary-card h3,
body.app-shell.app-shell--admin .thp-admin-posts-list-head h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-posts-filters label {
    display: grid;
    gap: 0.38rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.app-shell.app-shell--admin .thp-admin-posts-filters input,
body.app-shell.app-shell--admin .thp-admin-posts-filters select {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.58rem 0.72rem;
    font-size: 0.86rem;
    color: #1f2937;
}

body.app-shell.app-shell--admin .thp-admin-posts-apply {
    border-radius: 12px;
    background: #0f1b38;
    border-color: #0f1b38;
    color: #fff;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-posts-content {
    display: grid;
    gap: 0.9rem;
}

body.app-shell.app-shell--admin .thp-admin-posts-summary-card,
body.app-shell.app-shell--admin .thp-admin-posts-list-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.95rem;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
}

body.app-shell.app-shell--admin .thp-admin-posts-kpis {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.app-shell.app-shell--admin .thp-admin-posts-kpi {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 0.62rem;
}

body.app-shell.app-shell--admin .thp-admin-posts-kpi p {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

body.app-shell.app-shell--admin .thp-admin-posts-kpi strong {
    margin-top: 0.3rem;
    display: block;
    font-size: 1.3rem;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-posts-kpi strong.is-ok {
    color: #16a34a;
}

body.app-shell.app-shell--admin .thp-admin-posts-kpi strong.is-warn {
    color: #ca8a04;
}

body.app-shell.app-shell--admin .thp-admin-posts-list-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-posts-count {
    display: inline-flex;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
}

body.app-shell.app-shell--admin .thp-admin-posts-list {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.65rem;
}

body.app-shell.app-shell--admin .thp-admin-posts-item {
    display: grid;
    gap: 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    padding: 0.65rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.app-shell.app-shell--admin .thp-admin-posts-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(20, 36, 72, 0.1);
}

body.app-shell.app-shell--admin .thp-admin-posts-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

body.app-shell.app-shell--admin .thp-admin-posts-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.app-shell.app-shell--admin .thp-admin-posts-thumb--slate {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

body.app-shell.app-shell--admin .thp-admin-posts-thumb--amber {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
}

body.app-shell.app-shell--admin .thp-admin-posts-thumb--indigo {
    background: linear-gradient(135deg, #e0e7ff 0%, #bae6fd 100%);
}

body.app-shell.app-shell--admin .thp-admin-posts-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-posts-sub {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

body.app-shell.app-shell--admin .thp-admin-posts-status {
    margin-top: 0.42rem;
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.2rem 0.52rem;
    font-size: 0.72rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-posts-status--published {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

body.app-shell.app-shell--admin .thp-admin-posts-status--draft {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

body.app-shell.app-shell--admin .thp-admin-posts-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

body.app-shell.app-shell--admin .thp-admin-posts-actions form {
    margin: 0;
}

body.app-shell.app-shell--admin .thp-admin-posts-actions .btn {
    min-height: 34px;
    padding: 0.38rem 0.72rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-posts-empty {
    margin-top: 0.8rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 0.8rem;
    text-align: center;
    color: #64748b;
    font-size: 0.88rem;
    background: #f8fafc;
}

body.app-shell.app-shell--admin .thp-admin-posts-foot {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.app-shell.app-shell--admin .thp-admin-posts-foot p {
    margin: 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 600;
}

body.app-shell.app-shell--admin .thp-admin-posts-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-posts-pagination button {
    min-height: 40px;
    border-radius: 11px;
    border: 1px solid #cedaf1;
    background: #fff;
    color: #243a67;
    padding: 0.3rem 0.72rem;
    font-size: 0.74rem;
    font-weight: 800;
}

body.app-shell.app-shell--admin .thp-admin-posts-pagination button.is-active {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #fff;
}

@media (min-width: 1080px) {
    body.app-shell.app-shell--admin .thp-admin-posts-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        align-items: start;
    }

    body.app-shell.app-shell--admin .thp-admin-posts-item {
        grid-template-columns: 170px minmax(0, 1fr) auto;
        align-items: center;
    }

    body.app-shell.app-shell--admin .thp-admin-posts-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-admin-posts-hero-actions {
        margin-left: 0;
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-posts-hero-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-posts-kpis {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-posts-foot {
        align-items: stretch;
    }
}

/* Admin performance runtime rollout (approved mockup sync) */
body.app-shell.app-shell--admin .thp-admin-performance-page {
    width: min(1140px, 100% - 2rem);
    margin-inline: auto;
    display: grid;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
}

body.app-shell.app-shell--admin .thp-admin-performance-page > * {
    min-width: 0;
    max-width: 100%;
}

body.app-shell.app-shell--admin .thp-admin-performance-head {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    border-radius: 18px;
    border: 1px solid #d8e3f4;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    backdrop-filter: blur(10px);
}

body.app-shell.app-shell--admin .thp-admin-performance-head h1 {
    margin: 0;
    font: 800 1.56rem/1.15 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-performance-head .muted {
    margin: 6px 0 0;
    color: #5f6f92;
    max-width: 700px;
}

body.app-shell.app-shell--admin .thp-admin-performance-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-performance-section {
    padding: 14px 16px;
    display: grid;
    gap: 12px;
    border-radius: 18px;
    border: 1px solid #d8e3f4;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    backdrop-filter: blur(10px);
}

body.app-shell.app-shell--admin .thp-admin-performance-section h2 {
    margin: 0;
    font: 800 1.06rem/1.2 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
}

body.app-shell.app-shell--admin .thp-admin-performance-section h3 {
    margin: 0;
    font-size: 0.92rem;
    color: #1f3258;
}

body.app-shell.app-shell--admin .thp-admin-performance-split {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
}

body.app-shell.app-shell--admin .thp-admin-performance-chart {
    border: 1px solid #d6e0f1;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 10px;
}

body.app-shell.app-shell--admin .thp-admin-performance-bars {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    min-height: 180px;
}

body.app-shell.app-shell--admin .thp-admin-performance-bar {
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #ffb19c, #ef4f2a);
    border: 1px solid #f39b85;
    position: relative;
}

body.app-shell.app-shell--admin .thp-admin-performance-bar::after {
    content: attr(data-ms);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.67rem;
    font-weight: 800;
    color: #2a3f6a;
    white-space: nowrap;
}

body.app-shell.app-shell--admin .thp-admin-performance-chart-note {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: #607197;
    font-size: 0.78rem;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-performance-kpi-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.app-shell.app-shell--admin .thp-admin-performance-kpi {
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}

body.app-shell.app-shell--admin .thp-admin-performance-kpi small {
    font-size: 0.75rem;
    color: #5d7096;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-performance-kpi strong {
    font: 800 1.1rem/1.1 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #203762;
}

body.app-shell.app-shell--admin .thp-admin-performance-kpi strong.is-ok {
    color: #157347;
}

body.app-shell.app-shell--admin .thp-admin-performance-kpi strong.is-warn {
    color: #b54708;
}

body.app-shell.app-shell--admin .thp-admin-performance-ops-grid {
    display: grid;
    gap: 8px;
}

body.app-shell.app-shell--admin .thp-admin-performance-op-card {
    border: 1px solid #d6e0f1;
    border-radius: 13px;
    background: #fff;
    padding: 10px 12px;
    display: grid;
    gap: 8px;
}

body.app-shell.app-shell--admin .thp-admin-performance-op-card p {
    margin: 0;
    color: #5f6f92;
    font-size: 0.82rem;
    line-height: 1.42;
}

body.app-shell.app-shell--admin .thp-admin-performance-op-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-performance-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid;
    white-space: nowrap;
}

body.app-shell.app-shell--admin .thp-admin-performance-pill.is-safe {
    color: #157347;
    background: #e9f9ef;
    border-color: #b8e8cf;
}

body.app-shell.app-shell--admin .thp-admin-performance-pill.is-warn {
    color: #b54708;
    background: #fff4e5;
    border-color: #f5d3a9;
}

body.app-shell.app-shell--admin .thp-admin-performance-pill.is-danger {
    color: #b42318;
    background: #ffebe9;
    border-color: #f5b8b2;
}

body.app-shell.app-shell--admin .thp-admin-performance-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

body.app-shell.app-shell--admin .thp-admin-performance-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

body.app-shell.app-shell--admin .thp-admin-performance-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6f95;
    border-bottom: 1px solid #d8e3f4;
    background: rgba(247, 250, 255, 0.82);
}

body.app-shell.app-shell--admin .thp-admin-performance-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #e4ebf8;
    vertical-align: middle;
    font-size: 0.86rem;
    color: #17305c;
}

body.app-shell.app-shell--admin .thp-admin-performance-table tbody tr:hover {
    background: rgba(248, 251, 255, 0.75);
}

body.app-shell.app-shell--admin .thp-admin-performance-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-performance-btn-mini {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid #cedaf1;
    background: #fff;
    color: #1d3561;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

body.app-shell.app-shell--admin .thp-admin-performance-btn-mini.is-warn {
    border-color: #f2cf9a;
    color: #9b5d02;
    background: #fff8ec;
}

body.app-shell.app-shell--admin .thp-admin-performance-btn-mini.is-danger {
    border-color: #f3b4b0;
    color: #a12b21;
    background: #fff1f0;
}

body.app-shell.app-shell--admin .thp-admin-performance-foot {
    padding: 12px 16px 14px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    color: #5e7197;
    font-size: 0.82rem;
    border-top: 1px solid #e1e9f7;
}

body.app-shell.app-shell--admin .thp-admin-performance-pager {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-performance-raw .admin-json-pre {
    margin-top: 0.45rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: #39ff14;
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.25);
}

body.app-shell.app-shell--admin dialog#thp-performance-modal-backup,
body.app-shell.app-shell--admin dialog#thp-performance-modal-cache,
body.app-shell.app-shell--admin dialog#thp-performance-modal-cleanup {
    border: none;
    border-radius: 16px;
    width: min(560px, calc(100% - 24px));
    padding: 0;
    overflow: hidden;
    box-shadow: 0 24px 44px rgba(17, 34, 74, 0.22);
}

body.app-shell.app-shell--admin dialog#thp-performance-modal-backup::backdrop,
body.app-shell.app-shell--admin dialog#thp-performance-modal-cache::backdrop,
body.app-shell.app-shell--admin dialog#thp-performance-modal-cleanup::backdrop {
    background: rgba(7, 17, 38, 0.48);
    backdrop-filter: blur(3px);
}

body.app-shell.app-shell--admin .thp-admin-performance-modal {
    background: #fff;
    border: 1px solid #dbe5f5;
}

body.app-shell.app-shell--admin .thp-admin-performance-modal-head {
    padding: 14px 16px;
    border-bottom: 1px solid #e2e9f7;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

body.app-shell.app-shell--admin .thp-admin-performance-modal-head h3 {
    margin: 0;
    font: 800 1.02rem/1.2 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #142f5b;
}

body.app-shell.app-shell--admin .thp-admin-performance-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid #d3def3;
    background: #fff;
    color: #355180;
    font-weight: 800;
    cursor: pointer;
}

body.app-shell.app-shell--admin .thp-admin-performance-modal-body {
    padding: 14px 16px;
    display: grid;
    gap: 10px;
}

body.app-shell.app-shell--admin .thp-admin-performance-modal-body p {
    margin: 0;
    color: #4f628a;
    font-size: 0.88rem;
    line-height: 1.45;
}

body.app-shell.app-shell--admin .thp-admin-performance-modal-foot {
    padding: 12px 16px 14px;
    border-top: 1px solid #e2e9f7;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    body.app-shell.app-shell--admin .thp-admin-performance-split {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-performance-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-admin-performance-page {
        width: min(1140px, 100% - 1rem);
    }

    body.app-shell.app-shell--admin .thp-admin-performance-head-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-performance-kpi-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-performance-row-actions {
        flex-direction: column;
    }

    body.app-shell.app-shell--admin .thp-admin-performance-row-actions .thp-admin-performance-btn-mini {
        width: 100%;
    }
}

/* Admin post create runtime rollout (approved mockup sync) */
body.app-shell.app-shell--admin .thp-admin-post-create-page {
    position: relative;
    gap: 0.95rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

body.app-shell.app-shell--admin .thp-admin-post-create-hero {
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    padding: 1.1rem;
    border-radius: 16px;
    display: grid;
    gap: 0.55rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-hero-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-post-create-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(239, 79, 42, 0.2);
    background: rgba(239, 79, 42, 0.1);
    color: #b53218;
    padding: 0.28rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.app-shell.app-shell--admin .thp-admin-post-create-hero h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-post-create-subtitle {
    margin: 0;
    font-size: 0.86rem;
    color: #607198;
}

body.app-shell.app-shell--admin .thp-admin-post-create-hero-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-post-create-draft,
body.app-shell.app-shell--admin .thp-admin-post-create-primary {
    border-radius: 12px;
    background: #ef4f2a;
    border-color: #ef4f2a;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 20px 45px rgba(239, 79, 42, 0.24);
}

body.app-shell.app-shell--admin .thp-admin-post-create-form {
    gap: 0.9rem;
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-admin-post-create-layout {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-admin-post-create-aside,
body.app-shell.app-shell--admin .thp-admin-post-create-main {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-admin-post-create-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.95rem;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
}

body.app-shell.app-shell--admin .thp-admin-post-create-card h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-post-create-fields,
body.app-shell.app-shell--admin .thp-admin-post-create-content-stack {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.65rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-fields label,
body.app-shell.app-shell--admin .thp-admin-post-create-main label,
body.app-shell.app-shell--admin .thp-admin-post-create-category-row label {
    display: grid;
    gap: 0.35rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-fields label span,
body.app-shell.app-shell--admin .thp-admin-post-create-main label span,
body.app-shell.app-shell--admin .thp-admin-post-create-category-row label span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.app-shell.app-shell--admin .thp-admin-post-create-fields input,
body.app-shell.app-shell--admin .thp-admin-post-create-fields select,
body.app-shell.app-shell--admin .thp-admin-post-create-main input,
body.app-shell.app-shell--admin .thp-admin-post-create-main select,
body.app-shell.app-shell--admin .thp-admin-post-create-main textarea {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.58rem 0.72rem;
    font-size: 0.86rem;
    color: #1f2937;
}

body.app-shell.app-shell--admin .thp-admin-post-create-inline-actions {
    display: grid;
    gap: 0.5rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-featured-preview {
    min-height: 110px;
}

body.app-shell.app-shell--admin .thp-admin-post-create-card [data-post-featured-name],
body.app-shell.app-shell--admin .thp-admin-post-create-card [data-post-featured-upload-message] {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

body.app-shell.app-shell--admin .thp-admin-post-create-tips {
    margin: 0.6rem 0 0;
    padding-left: 1rem;
    color: #64748b;
    font-size: 0.78rem;
    display: grid;
    gap: 0.2rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-post-create-card-head span {
    display: inline-flex;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-grid-two {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.65rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-slug-grid {
    margin-top: 0.65rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-inline-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
}

body.app-shell.app-shell--admin .thp-admin-post-create-category-row {
    margin-top: 0.65rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-lang-nav {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.35rem;
}

body.app-shell.app-shell--admin .thp-admin-post-create-lang-nav .post-lang-tab-btn {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #1f2937;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-post-create-lang-nav .post-lang-tab-btn.is-active {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #fff;
}

body.app-shell.app-shell--admin .thp-admin-post-create-template-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-post-create-submit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-post-create-submit-card p {
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
}

body.app-shell.app-shell--admin .thp-admin-post-create-submit-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-post-create-submit-actions .btn {
    min-height: 38px;
    border-radius: 10px;
}

@media (min-width: 1080px) {
    body.app-shell.app-shell--admin .thp-admin-post-create-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        align-items: start;
    }

    body.app-shell.app-shell--admin .thp-admin-post-create-grid-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-admin-post-create-hero-actions {
        margin-left: 0;
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-post-create-hero-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-post-create-submit-card {
        align-items: stretch;
    }

    body.app-shell.app-shell--admin .thp-admin-post-create-submit-actions {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-post-create-submit-actions .btn {
        width: 100%;
    }
}

/* Admin media runtime rollout (approved mockup sync) */
body.app-shell.app-shell--admin .thp-admin-media-page {
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
    display: grid;
    gap: 14px;
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-admin-media-page > * {
    min-width: 0;
}

body.app-shell.app-shell--admin .thp-admin-media-head {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    border-radius: 18px;
    border: 1px solid #d8e3f4;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    backdrop-filter: blur(10px);
}

body.app-shell.app-shell--admin .thp-admin-media-head h1 {
    margin: 0;
    font: 800 1.5rem/1.15 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #0f1b38;
}

body.app-shell.app-shell--admin .thp-admin-media-head .muted {
    margin: 6px 0 0;
    color: #5f6f92;
}

body.app-shell.app-shell--admin .thp-admin-media-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-media-filter-card,
body.app-shell.app-shell--admin .thp-admin-media-table-card {
    border-radius: 18px;
    border: 1px solid #d8e3f4;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(17, 34, 74, 0.08);
    backdrop-filter: blur(10px);
}

body.app-shell.app-shell--admin .thp-admin-media-filters {
    padding: 14px 16px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
}

body.app-shell.app-shell--admin .thp-admin-media-filters .field {
    display: grid;
    gap: 6px;
}

body.app-shell.app-shell--admin .thp-admin-media-filters .field label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #2a3f6a;
}

body.app-shell.app-shell--admin .thp-admin-media-filters .input,
body.app-shell.app-shell--admin .thp-admin-media-filters .select {
    min-height: 40px;
    border: 1px solid #cedaf1;
    border-radius: 11px;
    padding: 0 12px;
    background: #fff;
    color: #1a2f58;
    font: 600 0.88rem/1 Manrope, sans-serif;
    width: 100%;
}

body.app-shell.app-shell--admin .thp-admin-media-range-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

body.app-shell.app-shell--admin .thp-admin-media-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-media-chip {
    border: 1px solid #d8e3f4;
    border-radius: 999px;
    background: #fff;
    color: #2a3f6a;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

body.app-shell.app-shell--admin .thp-admin-media-chip.is-active {
    border-color: #f5b8aa;
    background: #fff0ec;
    color: #b53218;
}

body.app-shell.app-shell--admin .thp-admin-media-filter-actions {
    padding: 0 16px 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.app-shell.app-shell--admin .thp-admin-media-kpi-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 16px 16px;
}

body.app-shell.app-shell--admin .thp-admin-media-kpi {
    border: 1px solid #d6e0f1;
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}

body.app-shell.app-shell--admin .thp-admin-media-kpi small {
    font-size: 0.75rem;
    color: #5d7096;
    font-weight: 700;
}

body.app-shell.app-shell--admin .thp-admin-media-kpi strong {
    font: 800 1.12rem/1.1 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #203762;
}

body.app-shell.app-shell--admin .thp-admin-media-table-toolbar {
    padding: 12px 16px;
    border-bottom: 1px solid #e1e9f7;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-media-bulk-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-media-table-wrap {
    overflow: auto;
}

body.app-shell.app-shell--admin .thp-admin-media-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1080px;
}

body.app-shell.app-shell--admin .thp-admin-media-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6f95;
    border-bottom: 1px solid #d8e3f4;
    background: rgba(247, 250, 255, 0.82);
}

body.app-shell.app-shell--admin .thp-admin-media-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #e4ebf8;
    vertical-align: middle;
    font-size: 0.87rem;
    color: #17305c;
}

body.app-shell.app-shell--admin .thp-admin-media-table tbody tr:hover {
    background: rgba(248, 251, 255, 0.75);
}

body.app-shell.app-shell--admin .thp-admin-media-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid #d8e3f4;
    background: linear-gradient(135deg, #e8eefb, #f7faff);
    display: grid;
    place-items: center;
    color: #4e6694;
    font-size: 0.72rem;
    font-weight: 800;
    overflow: hidden;
}

body.app-shell.app-shell--admin .thp-admin-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.app-shell.app-shell--admin .thp-admin-media-file-meta {
    display: grid;
    gap: 2px;
}

body.app-shell.app-shell--admin .thp-admin-media-file-meta strong {
    font-size: 0.9rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.app-shell.app-shell--admin .thp-admin-media-file-meta small {
    color: #607197;
    word-break: break-all;
}

body.app-shell.app-shell--admin .thp-admin-media-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    border: 1px solid;
    white-space: nowrap;
}

body.app-shell.app-shell--admin .thp-admin-media-pill.is-image {
    color: #153a77;
    background: #eaf2ff;
    border-color: #b8cef2;
}

body.app-shell.app-shell--admin .thp-admin-media-pill.is-card {
    color: #614604;
    background: #fff5df;
    border-color: #efd49e;
}

body.app-shell.app-shell--admin .thp-admin-media-pill.is-zip {
    color: #23513a;
    background: #e8f8ef;
    border-color: #b5e3ca;
}

body.app-shell.app-shell--admin .thp-admin-media-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-media-btn-mini {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid #cedaf1;
    background: #fff;
    color: #1d3561;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

body.app-shell.app-shell--admin .thp-admin-media-btn-mini.is-warn {
    border-color: #f2cf9a;
    color: #9b5d02;
    background: #fff8ec;
}

body.app-shell.app-shell--admin .thp-admin-media-btn-mini.is-danger {
    border-color: #f3b4b0;
    color: #a12b21;
    background: #fff1f0;
}

body.app-shell.app-shell--admin .thp-admin-media-foot {
    padding: 12px 16px 14px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    color: #5e7197;
    font-size: 0.82rem;
    border-top: 1px solid #e1e9f7;
}

body.app-shell.app-shell--admin .thp-admin-media-pager {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-media-empty-state {
    padding: 1rem 1rem 1.1rem;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-modal-card {
    width: min(980px, calc(100% - 24px));
    padding: 0;
    border: 1px solid #d9e4f7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 48px rgba(16, 34, 76, 0.25);
    color: #102647;
}

body.app-shell.app-shell--admin .thp-admin-media-modal-head {
    border-bottom: 1px solid #e2e9f7;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
}

body.app-shell.app-shell--admin .thp-admin-media-modal-head h3 {
    margin: 0;
    font: 800 1.1rem/1.2 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #112d59;
}

body.app-shell.app-shell--admin .thp-admin-media-modal-subtitle {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: #5e7197;
}

body.app-shell.app-shell--admin .thp-admin-media-upload-modal-card {
    width: min(640px, calc(100% - 24px));
    padding: 0;
    border: 1px solid #d9e4f7;
    border-radius: 16px;
    background: #ffffff;
}

body.app-shell.app-shell--admin .thp-admin-media-upload-form {
    display: grid;
    gap: 12px;
}

body.app-shell.app-shell--admin .thp-admin-media-upload-dropzone {
    margin: 14px 16px 0;
    padding: 18px 14px;
    border: 2px dashed #b8ccef;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body.app-shell.app-shell--admin .thp-admin-media-upload-dropzone p {
    margin: 0;
    color: #23406f;
}

body.app-shell.app-shell--admin .thp-admin-media-upload-dropzone small {
    color: #5e7197;
    word-break: break-word;
}

body.app-shell.app-shell--admin .thp-admin-media-upload-dropzone.is-dragover {
    border-color: #2f6bff;
    background: linear-gradient(180deg, #eef4ff 0%, #e6efff 100%);
    box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.12);
}

body.app-shell.app-shell--admin .thp-admin-media-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 1rem;
    padding: 14px 16px 16px;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-preview {
    border: 1px solid #d8e3f4;
    border-radius: 12px;
    background: #f7faff;
    min-height: 360px;
    padding: 8px;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-preview .media-detail-image {
    width: 100%;
    height: 100%;
    max-height: min(65vh, 620px);
    object-fit: contain;
    border-radius: 10px;
    background: #ffffff;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-info {
    display: grid;
    gap: 12px;
    align-content: start;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-info h4 {
    margin: 0;
    font: 800 1.02rem/1.35 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    color: #112d59;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-meta {
    margin: 0;
    display: grid;
    gap: 10px;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-meta > div {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #dbe6f8;
    border-radius: 10px;
    background: #f8fbff;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-meta dt {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5e7197;
    font-weight: 800;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-meta dd {
    margin: 0;
    font-size: 0.92rem;
    color: #17305c;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.app-shell.app-shell--admin .thp-admin-media-detail-actions form {
    margin: 0;
}

@media (max-width: 1024px) {
    body.app-shell.app-shell--admin .thp-admin-media-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-shell.app-shell--admin .thp-admin-media-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.app-shell.app-shell--admin .thp-admin-media-page {
        width: min(1120px, 100% - 1rem);
    }

    body.app-shell.app-shell--admin .thp-admin-media-head-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-media-filters {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-media-kpi-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-media-filter-actions {
        justify-content: stretch;
    }

    body.app-shell.app-shell--admin .thp-admin-media-filter-actions .btn {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-media-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.app-shell.app-shell--admin .thp-admin-media-detail-layout {
        grid-template-columns: 1fr;
    }
}

/* Admin home settings runtime rollout (approved mockup sync) */
body.app-shell.app-shell--admin .thp-admin-home-settings-page {
    position: relative;
    gap: 0.95rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-page::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(15, 23, 42, 0.25) 0.45px, transparent 0.45px);
    background-size: 3px 3px;
    opacity: 0.05;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-hero {
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 20%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 24%, transparent 56%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 24%, transparent 56%),
        rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 42px rgba(20, 36, 72, 0.08);
    backdrop-filter: blur(14px);
    padding: 1.2rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-hero-top {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #fecfbf;
    background: #fff2ec;
    color: #b53218;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.34rem 0.72rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-hero h1 {
    margin: 0;
    color: #0f1b38;
    font: 800 clamp(1.46rem, 2.45vw, 1.95rem) / 1.12 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    letter-spacing: -0.02em;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-hero-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.52rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-save-top {
    border-radius: 12px;
    border: 1px solid #ef4f2a;
    background: #ef4f2a;
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(239, 79, 42, 0.28);
}

body.app-shell.app-shell--admin .thp-admin-home-settings-save-top:hover {
    border-color: #b53218;
    background: #b53218;
    color: #ffffff;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-hero-subtitle {
    margin: 0.62rem 0 0;
    color: #4f5f7d;
    font-size: 0.9rem;
    line-height: 1.56;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-form {
    margin: 0;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-sidebar,
body.app-shell.app-shell--admin .thp-admin-home-settings-content {
    min-width: 0;
    display: grid;
    gap: 0.85rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-panel {
    border-radius: 18px;
    border: 1px solid #dce6f5;
    background: #ffffff;
    box-shadow: 0 10px 34px rgba(15, 34, 70, 0.08);
    padding: 0.92rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-panel h2,
body.app-shell.app-shell--admin .thp-admin-home-settings-panel h3 {
    margin: 0;
    color: #0f1b38;
    font-family: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    font-weight: 800;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-panel h2 {
    font-size: 1rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-panel h3 {
    font-size: 1.05rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-stack {
    margin-top: 0.74rem;
    display: grid;
    gap: 0.66rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #607193;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-label input,
body.app-shell.app-shell--admin .thp-admin-home-settings-label textarea,
body.app-shell.app-shell--admin .thp-admin-home-settings-label select,
body.app-shell.app-shell--admin .thp-admin-home-settings-item input,
body.app-shell.app-shell--admin .thp-admin-home-settings-item textarea,
body.app-shell.app-shell--admin .thp-admin-home-settings-item select,
body.app-shell.app-shell--admin .thp-admin-home-settings-grid-roadmap input,
body.app-shell.app-shell--admin .thp-admin-home-settings-grid-trust input {
    width: 100%;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid #d5dfef;
    background: #ffffff;
    color: #142340;
    font-size: 0.88rem;
    line-height: 1.4;
    padding: 0.54rem 0.62rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-label textarea,
body.app-shell.app-shell--admin .thp-admin-home-settings-item textarea {
    resize: vertical;
    min-height: 86px;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-label input:focus,
body.app-shell.app-shell--admin .thp-admin-home-settings-label textarea:focus,
body.app-shell.app-shell--admin .thp-admin-home-settings-label select:focus,
body.app-shell.app-shell--admin .thp-admin-home-settings-item input:focus,
body.app-shell.app-shell--admin .thp-admin-home-settings-item textarea:focus,
body.app-shell.app-shell--admin .thp-admin-home-settings-grid-roadmap input:focus,
body.app-shell.app-shell--admin .thp-admin-home-settings-grid-trust input:focus {
    outline: none;
    border-color: #7fa8f9;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.14);
}

body.app-shell.app-shell--admin .thp-admin-home-settings-note {
    margin: 0;
    border-radius: 12px;
    border: 1px solid #dfe7f4;
    background: #f5f8fd;
    color: #506283;
    font-size: 0.76rem;
    line-height: 1.45;
    padding: 0.64rem 0.72rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-nav {
    margin-top: 0.74rem;
    display: grid;
    gap: 0.42rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-nav button {
    width: 100%;
    border-radius: 11px;
    border: 1px solid #d4def0;
    background: #ffffff;
    color: #415476;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: left;
    padding: 0.58rem 0.66rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-nav button.is-active {
    border-color: #ef4f2a;
    background: #ef4f2a;
    color: #ffffff;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-panel-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-panel-head span {
    display: inline-flex;
    border-radius: 999px;
    background: #f1f5fb;
    color: #5c6f90;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.26rem 0.6rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.58rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-grid-2 {
    margin-top: 0.76rem;
    display: grid;
    gap: 0.62rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.app-shell.app-shell--admin .thp-admin-home-settings-item-list {
    margin-top: 0.72rem;
    display: grid;
    gap: 0.62rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-item {
    border-radius: 12px;
    border: 1px solid #dce5f3;
    background: #f7faff;
    padding: 0.65rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-item--compact {
    padding: 0.5rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.46rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-item-head p {
    margin: 0;
    color: #1b2d4c;
    font-size: 0.82rem;
    font-weight: 800;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-grid-roadmap {
    display: grid;
    gap: 0.54rem;
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-grid-trust {
    display: grid;
    gap: 0.54rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-item-list--trust {
    gap: 0.46rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-info-box {
    margin-top: 0.72rem;
    border-radius: 12px;
    border: 1px solid #dce5f4;
    background: #f6f9fd;
    color: #546683;
    font-size: 0.76rem;
    line-height: 1.45;
    padding: 0.68rem 0.78rem;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-info-title {
    margin: 0;
    color: #243b63;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-info-box p {
    margin: 0.3rem 0 0;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.58rem;
    flex-wrap: wrap;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-foot p {
    margin: 0;
    color: #5c6f8d;
    font-size: 0.84rem;
    font-weight: 600;
}

body.app-shell.app-shell--admin .thp-admin-home-settings-foot-actions {
    display: flex;
    gap: 0.48rem;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    body.app-shell.app-shell--admin .thp-admin-home-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    body.app-shell.app-shell--admin .thp-admin-home-settings-grid-2 {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-home-settings-grid-roadmap,
    body.app-shell.app-shell--admin .thp-admin-home-settings-grid-trust {
        grid-template-columns: 1fr;
    }

    body.app-shell.app-shell--admin .thp-admin-home-settings-page {
        width: min(1120px, 100% - 1rem);
    }

    body.app-shell.app-shell--admin .thp-admin-home-settings-hero-actions,
    body.app-shell.app-shell--admin .thp-admin-home-settings-foot-actions {
        width: 100%;
    }

    body.app-shell.app-shell--admin .thp-admin-home-settings-hero-actions .btn,
    body.app-shell.app-shell--admin .thp-admin-home-settings-foot-actions .btn {
        width: 100%;
    }
}

/* Blog pages (runtime-safe, no Tailwind dependency) */
.blog-page {
    position: relative;
    z-index: 1;
    isolation: isolate;
    padding: 2.5rem 0 3rem;
    font-family: "Manrope", Inter, system-ui, sans-serif;
    color: #24334d;
    background:
        radial-gradient(circle at 8% 8%, #fff2d7 0, #fff2d7 18%, transparent 48%),
        radial-gradient(circle at 92% 20%, #dce9ff 0, #dce9ff 22%, transparent 50%),
        radial-gradient(circle at 64% 92%, #ffe6df 0, #ffe6df 22%, transparent 58%),
        #f8fafc;
}

.blog-noise::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image: radial-gradient(#000 0.45px, transparent 0.45px);
    background-size: 3px 3px;
    z-index: -1;
}

.blog-container {
    width: min(1180px, 94vw);
    margin: 0 auto;
}

.blog-hero-card {
    border-radius: 1.5rem;
    border: 1px solid #e9eef8;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    padding: 1.5rem;
}

.blog-hero-badge,
.blog-card-date,
.blog-detail-date,
.blog-sidebar-label {
    display: inline-flex;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.blog-hero-badge {
    border: 1px solid #bfd2f2;
    background: #edf3ff;
    color: #2458d8;
    padding: 0.5rem 0.9rem;
}

.blog-hero-title,
.blog-detail-title {
    margin: 0.75rem 0 0;
    color: #0f1b38;
    letter-spacing: -0.03em;
    line-height: 1.07;
    font-weight: 800;
    font-family: "Plus Jakarta Sans", "Manrope", Inter, system-ui, sans-serif;
}

.blog-hero-title {
    font-size: clamp(2.25rem, 3.2vw, 3rem);
}

.blog-hero-desc {
    margin: 0.75rem 0 0;
    max-width: 48rem;
    color: #5b6785;
    font-size: 1rem;
    line-height: 1.7;
}

.blog-category-pills {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.blog-pill {
    border-radius: 999px;
    border: 1px solid #d9e2f1;
    background: #ffffff;
    color: #3f4d6d;
    padding: 0.52rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.blog-pill--active {
    border-color: #bfd2f2;
    background: #edf3ff;
    color: #2458d8;
}

.blog-empty-state,
.blog-detail-shell {
    margin-top: 2rem;
    border: 1px solid #d9e2f1;
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(12, 24, 52, 0.08);
}

.blog-empty-state {
    padding: 1.2rem 1rem;
    color: #5b6785;
}

.blog-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dbe5f4;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(20, 36, 72, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(12, 24, 52, 0.14);
}

.blog-card-image-link {
    display: block;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #fee2e2, #ffedd5, #fff1f2);
}

.blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card-content {
    padding: 1.1rem;
}

.blog-card-date {
    color: #ef4f2a;
}

.blog-card-title {
    margin: 0.48rem 0 0;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-family: "Plus Jakarta Sans", "Manrope", Inter, system-ui, sans-serif;
}

.blog-card-title a {
    color: #172134;
    text-decoration: none;
}

.blog-card-title a:hover,
.blog-related-link:hover,
.blog-back-link:hover {
    color: #2458d8;
}

.blog-card-excerpt {
    margin: 0.55rem 0 0;
    color: #3f4d6d;
    font-size: 1.13rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-readmore,
.blog-page-link,
.blog-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
}

.blog-card-readmore {
    margin-top: 0.9rem;
    background: #ef4f2a;
    color: #ffffff;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.blog-card-readmore:hover {
    background: #b53218;
    color: #ffffff;
}

.blog-pagination-wrap {
    margin-top: 1.6rem;
    display: flex;
    justify-content: center;
}

.blog-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-page-link {
    border: 1px solid #d9e2f1;
    background: #ffffff;
    color: #3f4d6d;
    padding: 0.5rem 0.95rem;
}

.blog-page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: #2f6bff;
    color: #ffffff;
    font-weight: 800;
}

.blog-back-link {
    border: 1px solid #d9e2f1;
    background: #ffffff;
    color: #24334d;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.43rem 0.92rem;
}

.blog-detail-shell {
    padding: 1.4rem;
}

.blog-detail-date {
    color: #ef4f2a;
}

.blog-detail-title {
    font-size: clamp(2.35rem, 4vw, 3.6rem);
}

.blog-detail-excerpt {
    margin: 0.8rem 0 0;
    color: #3f4d6d;
    font-size: 1.06rem;
    line-height: 1.7;
}

.blog-detail-cover-wrap {
    margin-top: 1.1rem;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 16 / 8;
    background: linear-gradient(135deg, #fee2e2, #ffedd5, #fff1f2);
}

.blog-detail-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-detail-layout {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2rem;
}

.blog-detail-content {
    color: #3f4d6d;
    font-size: 1.07rem;
    line-height: 1.95;
}

.blog-detail-section + .blog-detail-section {
    margin-top: 1.2rem;
}

.blog-detail-section h2,
.blog-detail-conclusion h3,
.blog-sidebar-card h3 {
    margin: 0;
    color: #172134;
    font-weight: 900;
    letter-spacing: -0.01em;
    font-family: "Plus Jakarta Sans", "Manrope", Inter, system-ui, sans-serif;
}

.blog-detail-section h2 {
    font-size: 1.55rem;
}

.blog-detail-section p,
.blog-detail-conclusion p {
    margin: 0.5rem 0 0;
}

.blog-detail-conclusion {
    margin-top: 1.2rem;
    border: 1px solid #d9e2f1;
    border-radius: 1rem;
    background: #f8faff;
    padding: 1rem;
}

.blog-detail-sidebar {
    position: sticky;
    top: 6rem;
    align-self: start;
    display: grid;
    gap: 0.9rem;
}

.blog-sidebar-card {
    border: 1px solid #d9e2f1;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(12, 24, 52, 0.08);
    padding: 1rem;
}

.blog-sidebar-label {
    color: #6b778f;
    letter-spacing: 0.14em;
}

.blog-sidebar-card h3 {
    margin-top: 0.45rem;
    font-size: 1.35rem;
}

.blog-toc-list,
.blog-summary-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.blog-toc-list {
    display: grid;
    gap: 0.52rem;
}

.blog-toc-link,
.blog-related-link {
    text-decoration: none;
    color: #3f4d6d;
}

.blog-toc-link {
    display: flex;
    align-items: flex-start;
    gap: 0.58rem;
    border: 1px solid #d9e2f1;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 0.55rem 0.65rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.blog-toc-link:hover {
    border-color: #bfd2f2;
    color: #2458d8;
}

.blog-toc-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #edf3ff;
    color: #2458d8;
    font-size: 0.74rem;
    font-weight: 800;
}

.blog-related-list {
    margin-top: 0.65rem;
    display: grid;
    gap: 0.5rem;
}

.blog-related-link {
    display: block;
    border: 1px solid #e5ebf6;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 0.65rem;
    font-size: 0.92rem;
    font-weight: 700;
}

.blog-summary-list {
    display: grid;
    gap: 0.45rem;
    color: #5b6785;
    font-size: 0.92rem;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-detail-sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 760px) {
    .blog-page {
        padding: 1.55rem 0 2.1rem;
    }

    .blog-hero-card,
    .blog-detail-shell {
        padding: 1rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-card-title {
        font-size: 1.25rem;
    }

    .blog-detail-title {
        font-size: 2rem;
    }
}