:root {
    --bg-dark: #040a24;
    --bg-dark-2: #091233;
    --panel: #ffffff;
    --panel-soft: rgba(255, 255, 255, 0.08);
    --text: #15162c;
    --text-soft: #667085;
    --white: #ffffff;
    --line: #e9e8f4;
    --primary: #18a566;
    --primary-dark: #0f7f4c;
    --primary-soft: rgba(24, 165, 102, 0.14);
    --success: #14b86c;
    --warning: #de8a1f;
    --shadow-xl: 0 30px 60px rgba(9, 18, 51, 0.32);
    --shadow-lg: 0 20px 40px rgba(17, 24, 39, 0.12);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --container: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: #f5f6fb;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

.container {
    width: min(calc(100% - 48px), var(--container));
    margin: 0 auto;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    font-weight: 600;
}

.button:hover,
.icon-button:hover,
.template-card:hover {
    transform: translateY(-1px);
}

.button.primary {
    background: linear-gradient(135deg, #24b877, #118856);
    color: var(--white);
    box-shadow: 0 12px 24px rgba(17, 136, 86, 0.24);
}

.button.ghost {
    border-color: rgba(255, 255, 255, 0.2);
    background: transparent;
    color: inherit;
}

.button.dark {
    background: #151629;
    color: var(--white);
}

.button.subtle {
    background: #fff;
    border-color: var(--line);
    color: var(--text);
}

.button.danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #dc2626;
    color: #fff;
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.22);
}

.button.dark-outline {
    background: #fff;
    border-color: #cfeedd;
    color: var(--primary-dark);
}

.button.large {
    padding-inline: 28px;
    min-width: 190px;
}

.button.wide,
.button.wide-mobile {
    width: 100%;
}

.text-link {
    opacity: 0.9;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.45rem;
    font-weight: 800;
    min-height: 44px;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8f77ff, #5b3ff3);
    color: #0a0d23;
    font-size: 1.15rem;
}

.brand-mark svg,
.button-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.frog-brand-mark {
    background: rgba(64, 178, 101, 0.12);
    color: #2cad61;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.brand-logo img {
    display: block;
    width: auto;
    max-width: min(100%, 260px);
    max-height: 52px;
    object-fit: contain;
}

.button-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
}

.landing-page {
    background:
        radial-gradient(circle at top right, rgba(95, 68, 245, 0.25), transparent 28%),
        linear-gradient(180deg, #020817 0%, #040a24 65%, #020817 100%);
    color: var(--white);
    min-height: 100vh;
}

.landing-shell {
    padding: 28px 0 64px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topnav,
.topbar-actions,
.hero-actions,
.feature-list,
.social-row,
.public-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.topnav {
    color: rgba(255, 255, 255, 0.84);
    font-weight: 500;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;
    gap: 48px;
    align-items: center;
    padding: 70px 0 56px;
}

.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-copy h1 {
    font-size: clamp(3.2rem, 5vw, 5.2rem);
    line-height: 1.02;
    margin: 24px 0 22px;
    max-width: 700px;
}

.hero-copy h1 span {
    color: #8b6bff;
}

.hero-copy p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.3rem;
    line-height: 1.75;
}

.feature-list {
    margin-top: 54px;
    gap: 30px;
}

.feature-chip {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
}

.feature-chip span {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-preview {
    position: relative;
}

.browser-bar {
    position: absolute;
    top: -34px;
    left: 40px;
    right: 40px;
    padding: 18px;
    text-align: center;
    border-radius: 20px 20px 0 0;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.profile-card {
    background: linear-gradient(135deg, #ffffff, #f8f7fe 55%, #f1ebff 100%);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.profile-card-large {
    padding: 36px 36px 0;
}

.profile-card-main {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: center;
}

.avatar-frame {
    background: linear-gradient(180deg, #e6ecf6, #c9d4ea);
    padding: 10px;
    border-radius: 20px;
}

.avatar-placeholder,
.profile-badge-avatar,
.mini-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.avatar-placeholder {
    min-height: 240px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.6), transparent 24%),
        linear-gradient(180deg, #8094b7, #4e5f88);
    color: rgba(255, 255, 255, 0.9);
    font-size: 4rem;
}

.profile-card-copy h2 {
    margin: 6px 0;
    font-size: 2.1rem;
}

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

.role {
    font-weight: 600;
    margin: 0 0 10px;
}

.summary {
    line-height: 1.7;
    color: #4d5467;
    max-width: 360px;
}

.hero-card-actions {
    display: flex;
    gap: 14px;
    margin-top: 20px;
}

.stats-row {
    margin-top: 34px;
    padding: 24px 30px;
    border-top: 1px solid rgba(20, 23, 42, 0.08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stats-row strong {
    display: block;
    color: var(--primary);
    font-size: 2rem;
}

.stats-row span {
    color: var(--text-soft);
    font-size: 0.93rem;
}

.landing-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding-bottom: 24px;
}

.floating-card,
.panel,
.metric-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(233, 232, 244, 0.9);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.floating-card {
    padding: 28px;
    color: var(--text);
}

.floating-card h3 {
    margin: 0 0 12px;
}

.floating-card p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.75;
}

.landing-metric-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
    max-width: 660px;
}

.landing-metric-card {
    padding: 20px 22px;
}

.landing-profile-card {
    position: relative;
}

.landing-profile-image {
    display: block;
    width: 100%;
    min-height: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 18px;
}

.landing-preview-float {
    position: absolute;
    right: -18px;
    bottom: 36px;
}

.floating-badge-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 250px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(233, 232, 244, 0.9);
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(10, 20, 48, 0.18);
    color: var(--text);
}

.floating-badge-card strong,
.floating-badge-card small {
    display: block;
}

.floating-badge-card small {
    margin-top: 4px;
    color: var(--text-soft);
}

.floating-badge-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 165, 102, 0.14);
    color: var(--primary-dark);
    flex-shrink: 0;
}

.floating-badge-icon svg,
.landing-feature-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

.landing-showcase,
.landing-cta {
    padding: 18px 0 8px;
}

.landing-showcase-grid,
.landing-template-grid,
.landing-workflow-grid {
    display: grid;
    gap: 22px;
}

.landing-showcase-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-feature-card {
    padding: 26px;
}

.landing-feature-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 18px;
    background: rgba(24, 165, 102, 0.12);
    color: var(--primary-dark);
}

.landing-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 24px;
}

.landing-section-head.compact {
    margin-bottom: 20px;
}

.landing-section-head h2,
.landing-cta-card h2 {
    margin: 10px 0 8px;
    color: var(--text);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.08;
}

.landing-section-head p,
.landing-cta-card p {
    color: var(--text-soft);
    max-width: 640px;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(24, 165, 102, 0.1);
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.landing-templates-panel,
.landing-workflow-panel,
.landing-dashboard-band {
    padding-top: 18px;
}

.landing-template-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.landing-template-card {
    padding: 18px;
}

.landing-template-card .template-thumb {
    width: 100%;
    margin-bottom: 16px;
}

.landing-workflow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workflow-card {
    padding: 28px;
}

.workflow-count {
    display: inline-flex;
    margin-bottom: 16px;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
}

.dashboard-band-card,
.landing-cta-card {
    padding: 28px;
}

.dashboard-band-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 26px;
    align-items: center;
}

.landing-mini-card {
    min-height: 100%;
    box-shadow: inset 0 0 0 1px rgba(233, 232, 244, 0.9);
}

.landing-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-page {
    background:
        radial-gradient(circle at top right, rgba(24, 165, 102, 0.08), transparent 25%),
        #f7f7fb;
}

.dashboard-page .button {
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 244px 1fr;
    min-height: 100vh;
}

.dashboard-layout,
.dashboard-main,
.dashboard-columns,
.dashboard-primary,
.dashboard-side,
.panel,
.panel-header,
.dashboard-header,
.editor-form,
.editor-section-card,
.editor-dual-grid,
.profile-editor-hero,
.profile-image-panel,
.profile-highlight-card,
.repeatable-item,
.mobile-app-header,
.mobile-app-header-top {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.sidebar {
    padding: 22px 16px;
    border-right: 1px solid rgba(32, 54, 47, 0.08);
    background:
        radial-gradient(circle at top left, rgba(36, 184, 119, 0.18), transparent 28%),
        linear-gradient(180deg, #fbfffd 0%, #f2faf6 52%, #eef7f3 100%);
    backdrop-filter: blur(14px);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.7);
}

.mobile-bottom-nav {
    display: none;
}

.mobile-app-header {
    display: none;
}

.sidebar-brand {
    color: var(--text);
    margin-bottom: 26px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.05);
}

.sidebar-section + .sidebar-section {
    margin-top: 22px;
}

.sidebar-section {
    padding: 14px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(224, 233, 228, 0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.sidebar-label {
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9aa0b5;
    font-size: 0.68rem;
    font-weight: 700;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    color: #4a5164;
    border-radius: 14px;
    margin-bottom: 6px;
    font-size: 0.93rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-item.active,
.nav-item:hover {
    background: linear-gradient(135deg, rgba(36, 184, 119, 0.12), rgba(59, 130, 246, 0.08));
    color: var(--primary-dark);
    transform: translateX(2px);
    box-shadow: 0 12px 22px rgba(17, 136, 86, 0.1);
}

.nav-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.mobile-bottom-nav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.mobile-bottom-nav-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.mobile-app-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #dce6f3, #c8d4e6);
    color: #334155;
    font-weight: 800;
    font-size: 1rem;
    flex: 0 0 44px;
}

.mobile-app-avatar-image {
    object-fit: cover;
}

.nav-icon svg,
.rich-icon-button svg,
.quick-link-card span svg,
.check-mark svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.dashboard-main {
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(36, 184, 119, 0.08), transparent 22%),
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.06), transparent 18%),
        linear-gradient(180deg, #f7fbf8 0%, #f3f8f5 100%);
}

@media (min-width: 801px) {
    .dashboard-page .dashboard-layout {
        height: 100vh;
        overflow: hidden;
    }

    .dashboard-page .dashboard-columns {
        align-items: start;
    }

    .dashboard-page .sidebar {
        height: 100vh;
        overflow: hidden;
        position: sticky;
        top: 0;
    }

    .dashboard-page .dashboard-main {
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 28px;
    }

    .dashboard-page .dashboard-side {
        position: sticky;
        top: 22px;
        align-self: start;
        max-height: calc(100vh - 44px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .dashboard-page.discover-page .dashboard-header,
    .dashboard-page.profile-app-page .dashboard-header {
        position: static;
        top: auto;
        z-index: auto;
    }
}

.dashboard-header,
.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.panel-header {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(224, 233, 228, 0.9);
}

.panel-header h2 {
    position: relative;
    margin: 0 0 6px;
    padding-left: 14px;
}

.panel-header h2::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 5px;
    height: 1.05em;
    border-radius: 999px;
    background: linear-gradient(180deg, #24b877, #38bdf8);
}

.dashboard-header h1 {
    font-size: 2rem;
    margin: 0 0 6px;
}

.dashboard-header p,
.panel-header p,
.metric-card small,
.panel p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 20px 0;
}

.dashboard-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0 16px;
}

.dashboard-profile-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 16px;
}

.dashboard-profile-strip > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(220, 228, 236, 0.95);
    color: #526071;
    font-size: 0.83rem;
    font-weight: 700;
}

.dashboard-profile-strip-icon,
.dashboard-profile-strip-icon svg {
    width: 14px;
    height: 14px;
    color: #148558;
    fill: currentColor;
}

.premium-overview .metric-card {
    position: relative;
    overflow: hidden;
}

.metric-card {
    padding: 18px;
    min-height: 118px;
}

.dashboard-home-card {
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    border-color: rgba(214, 229, 223, 0.92);
}

.dashboard-home-card::after {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    opacity: 0.9;
}

.dashboard-home-card.is-pending-metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 255, 0.98));
}

.dashboard-home-card.is-pending-metric::after {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.dashboard-home-card.is-approved-metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(236, 253, 245, 0.98));
}

.dashboard-home-card.is-approved-metric::after {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.dashboard-home-card.is-verified-metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 249, 255, 0.98));
}

.dashboard-home-card.is-verified-metric::after {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.dashboard-home-card.is-users-metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 247, 237, 0.98));
}

.dashboard-home-card.is-users-metric::after {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.dashboard-home-card.is-live-metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 243, 255, 0.98));
}

.dashboard-home-card.is-live-metric::after {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.dashboard-home-card.is-trust-metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(236, 253, 245, 0.98));
}

.dashboard-home-card.is-trust-metric::after {
    background: linear-gradient(90deg, #14b8a6, #2dd4bf);
}

.dashboard-home-card .metric-card-head span:last-child {
    font-size: 0.82rem;
}

.dashboard-home-card strong {
    font-size: 1.15rem;
}

.dashboard-home-card small {
    font-size: 0.8rem;
}

.dashboard-home-card-action {
    display: grid;
    align-content: start;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 1px solid rgba(220, 228, 236, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 248, 252, 0.98));
}

.dashboard-home-card-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.dashboard-home-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(24, 165, 102, 0.08);
    color: #148558;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.dashboard-home-card-off {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(254, 242, 242, 0.98));
}

.dashboard-home-card-off .metric-wave {
    background:
        linear-gradient(180deg, rgba(248, 113, 113, 0.18), transparent),
        radial-gradient(circle at 10% 80%, #fecaca 0 6px, transparent 7px),
        radial-gradient(circle at 40% 45%, #fca5a5 0 6px, transparent 7px),
        radial-gradient(circle at 70% 60%, #f87171 0 6px, transparent 7px),
        radial-gradient(circle at 95% 25%, #dc2626 0 6px, transparent 7px);
}

.dashboard-home-toggle-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.dashboard-home-toggle-switch {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(20, 184, 108, 0.22);
    box-shadow: inset 0 0 0 1px rgba(20, 184, 108, 0.16);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-home-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
    transition: transform 0.2s ease;
}

.dashboard-home-toggle-input:not(:checked) + .dashboard-home-toggle-switch {
    background: rgba(239, 68, 68, 0.18);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.14);
}

.dashboard-home-toggle-input:checked + .dashboard-home-toggle-switch .dashboard-home-toggle-knob {
    transform: translateX(16px);
}

.dashboard-home-toggle-input:focus-visible + .dashboard-home-toggle-switch {
    outline: 2px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}

.dashboard-home-toggle-text {
    line-height: 1;
}

.metric-card span {
    color: var(--text-soft);
    font-size: 0.84rem;
}

.metric-card strong {
    display: block;
    margin: 8px 0 6px;
    font-size: 1.65rem;
}

.metric-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.metric-icon svg,
.section-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.metric-icon-purple {
    background: rgba(24, 165, 102, 0.12);
    color: #18a566;
}

.metric-icon-green {
    background: rgba(20, 184, 108, 0.12);
    color: #14b86c;
}

.metric-icon-red {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.metric-icon-soft {
    background: rgba(24, 165, 102, 0.09);
    color: #12925b;
}

.success {
    color: var(--success);
}

.warning {
    color: var(--warning);
}

.account-action-error-text {
    margin: 0 0 18px;
    color: #dc2626 !important;
    font-weight: 700;
    font-size: 0.96rem;
    line-height: 1.6;
}

.link-text {
    font-size: 1.03rem;
    line-height: 1.35;
}

.icon-button {
    margin-top: 8px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #f8f8fc;
    cursor: pointer;
}

.rich-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.rich-icon-button span {
    width: 17px;
    height: 17px;
}

.metric-wave {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 74px;
    height: 28px;
    background:
        linear-gradient(180deg, rgba(24, 165, 102, 0.18), transparent),
        radial-gradient(circle at 10% 80%, #8fe3bc 0 6px, transparent 7px),
        radial-gradient(circle at 40% 45%, #61d29d 0 6px, transparent 7px),
        radial-gradient(circle at 70% 60%, #3fbe83 0 6px, transparent 7px),
        radial-gradient(circle at 95% 25%, #14945c 0 6px, transparent 7px);
    border-radius: 18px;
    opacity: 0.9;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: 1fr 292px;
    gap: 16px;
}

.dashboard-primary,
.dashboard-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel {
    padding: 18px;
}

.panel h2,
.panel h3 {
    margin: 0 0 6px;
    font-size: 1.16rem;
}

.section-title-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 165, 102, 0.1);
    color: #18a566;
    flex: 0 0 28px;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 16px;
}

.template-grid.three-templates {
    grid-template-columns: repeat(3, 1fr);
}

.cv-download-list {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.cv-dashboard-entry {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(220, 228, 236, 0.95);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 244, 0.98));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.cv-dashboard-entry-copy {
    display: grid;
    gap: 6px;
}

.cv-dashboard-entry-copy strong {
    color: #111827;
    font-size: 1rem;
}

.cv-dashboard-entry-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.7;
}

.cv-dashboard-entry-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-available-panel .panel-header {
    margin-bottom: 14px;
}

.dashboard-available-cv-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(220, 228, 236, 0.95);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(239, 248, 243, 0.98));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.dashboard-available-cv-card.is-ready {
    border-color: rgba(24, 165, 102, 0.24);
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.95));
    box-shadow: 0 16px 30px rgba(20, 148, 92, 0.12);
}

.dashboard-available-cv-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dashboard-available-cv-copy strong {
    display: block;
    color: #111827;
    font-size: 1rem;
}

.dashboard-available-cv-copy p {
    margin: 3px 0 0;
    color: var(--text-soft);
    font-size: 0.88rem;
}

.dashboard-available-cv-icon,
.dashboard-available-cv-download {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-available-cv-icon {
    background: rgba(24, 165, 102, 0.11);
    color: #14945c;
    flex: 0 0 46px;
}

.dashboard-available-cv-download {
    border: 1px solid rgba(24, 165, 102, 0.18);
    background: linear-gradient(135deg, #18a566, #14945c);
    color: #fff;
    text-decoration: none;
    flex: 0 0 46px;
    box-shadow: 0 12px 22px rgba(20, 148, 92, 0.22);
}

.dashboard-available-cv-icon svg,
.dashboard-available-cv-download svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.dashboard-available-footer {
    margin-top: 12px;
}

.cv-color-panel {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(var(--cv-accent-rgb), 0.16);
    background: linear-gradient(135deg, rgba(var(--cv-accent-rgb), 0.08), #ffffff 58%);
}

.cv-color-panel-copy h3 {
    margin: 0;
    color: var(--cv-accent-dark);
    font-size: 1rem;
}

.cv-color-panel-copy p {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.65;
}

.cv-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cv-color-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(203, 213, 225, 0.92);
    background: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cv-color-option:hover,
.cv-color-option.is-active {
    border-color: rgba(var(--cv-accent-rgb), 0.34);
    background: rgba(var(--cv-accent-rgb), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--cv-accent-rgb), 0.12);
}

.cv-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch-color);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 8px 14px rgba(15, 23, 42, 0.12);
}

.cv-download-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(var(--cv-accent-rgb), 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(var(--cv-accent-rgb), 0.04), #fbfefd 22%, #fff);
}

.cv-download-card.is-active {
    border-color: rgba(var(--cv-accent-rgb), 0.32);
    box-shadow: 0 14px 28px rgba(var(--cv-accent-rgb), 0.12);
}

.cv-download-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.cv-download-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cv-download-title-row h3 {
    margin: 0;
    font-size: 1rem;
}

.cv-download-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.cv-download-preview-block {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.cv-download-preview-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 248px;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(var(--cv-accent-rgb), 0.08), #eef2f8);
    border: 1px solid rgba(var(--cv-accent-rgb), 0.12);
}

.cv-mini-paper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 168px;
    aspect-ratio: 210 / 297;
    border-radius: 10px;
    background: transparent;
}

.cv-mini-sheet {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.cv-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 7px;
    border-bottom: 1px solid rgba(221, 226, 235, 0.9);
}

.cv-mini-title {
    min-width: 0;
    color: #1f2937;
    font-size: 0.38rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-mini-badge {
    flex: 0 0 auto;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.08);
    color: #475569;
    font-size: 0.28rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.cv-mini-content {
    display: grid;
    gap: 7px;
    padding: 8px 10px 10px;
}

.cv-mini-aurora-layout {
    display: grid;
    grid-template-columns: 50px 1fr;
    min-height: 0;
    flex: 1 1 auto;
}

.cv-mini-aurora-side {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 8px 6px 10px;
    background: linear-gradient(180deg, #f7faff, #f1f4fb);
    border-right: 1px solid rgba(224, 229, 238, 0.95);
}

.cv-mini-aurora-main {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 8px 8px 10px;
}

.cv-mini-aurora-profile {
    display: grid;
    gap: 5px;
}

.cv-mini-aurora-name {
    color: #203660;
    font-size: 0.28rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-mini-aurora-profile .cv-mini-avatar-wrap {
    width: 26px;
    height: 26px;
}

.cv-mini-section-no-border {
    padding-top: 0;
    border-top: 0;
}

.cv-mini-profile {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.cv-mini-avatar-wrap {
    width: 28px;
    height: 28px;
    display: inline-flex;
}

.cv-mini-avatar {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    background: #dbe3ed;
}

.cv-mini-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.42rem;
    font-weight: 800;
    background: linear-gradient(135deg, #64748b, #334155);
}

.cv-mini-identity {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.cv-mini-identity strong,
.cv-mini-identity span,
.cv-mini-line,
.cv-mini-section-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-mini-identity strong {
    color: #111827;
    font-size: 0.3rem;
    font-weight: 800;
    line-height: 1.1;
}

.cv-mini-identity span,
.cv-mini-line {
    color: #6b7280;
    font-size: 0.245rem;
    line-height: 1.15;
}

.cv-mini-section {
    display: grid;
    gap: 3px;
    padding-top: 6px;
    border-top: 1px solid rgba(229, 231, 235, 0.9);
}

.cv-mini-section-label {
    color: #374151;
    font-size: 0.22rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-mini-line-strong {
    color: #1f2937;
    font-weight: 700;
}

.cv-mini-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cv-mini-skills span {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
    font-size: 0.21rem;
    font-weight: 700;
    line-height: 1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-mini-paper-minimal .cv-mini-sheet {
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto 1fr;
}

.cv-mini-paper-minimal .cv-mini-sheet::before {
    content: "";
    grid-row: 1 / -1;
    grid-column: 1;
    background: linear-gradient(180deg, #4a6287, #7d97be);
}

.cv-mini-paper-minimal .cv-mini-header,
.cv-mini-paper-minimal .cv-mini-content {
    grid-column: 2;
}

.cv-mini-paper-executive .cv-mini-header {
    background: linear-gradient(90deg, #111827, #334155);
}

.cv-mini-paper-executive .cv-mini-title,
.cv-mini-paper-executive .cv-mini-badge {
    color: #fff;
}

.cv-mini-paper-executive .cv-mini-badge {
    background: rgba(255, 255, 255, 0.14);
}

.cv-mini-paper-modern .cv-mini-header {
    border-top: 6px solid #475569;
}

.cv-mini-paper-monochrome .cv-mini-sheet {
    border: 1px solid rgba(17, 24, 39, 0.16);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.cv-mini-paper-monochrome .cv-mini-header {
    background: linear-gradient(180deg, #f4f4f5, #ffffff);
    border-top: 6px solid #111827;
}

.cv-mini-paper-monochrome .cv-mini-badge,
.cv-mini-paper-monochrome .cv-mini-skills span {
    background: rgba(17, 24, 39, 0.08);
    color: #111827;
}

.cv-mini-paper-aurora .cv-mini-header {
    background: linear-gradient(90deg, #4c1d95, #2563eb);
}

.cv-mini-paper-aurora .cv-mini-sheet {
    display: grid;
    grid-template-rows: auto 1fr;
}

.cv-mini-paper-aurora .cv-mini-title,
.cv-mini-paper-aurora .cv-mini-badge {
    color: #fff;
}

.cv-mini-paper-aurora .cv-mini-badge {
    background: rgba(255, 255, 255, 0.16);
}

.cv-mini-paper-aurora .cv-mini-header {
    padding: 7px 9px 6px;
}

.cv-mini-paper-aurora .cv-mini-line,
.cv-mini-paper-aurora .cv-mini-identity span {
    line-height: 1.2;
}

.cv-mini-paper-summit .cv-mini-sheet {
    border-left: 6px solid #6f4f2b;
}

.cv-mini-paper-summit .cv-mini-header {
    background: linear-gradient(180deg, #fffdf8, #f5eee2);
}

.cv-download-palette {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cv-download-palette span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 8px 16px rgba(15, 23, 42, 0.08);
}

.cv-download-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cv-download-direct {
    min-width: 108px;
    height: 46px;
    padding: 0 16px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--cv-accent-rgb), 0.18);
    background: linear-gradient(135deg, var(--cv-accent), var(--cv-accent-dark));
    color: #fff;
    box-shadow: 0 12px 22px rgba(var(--cv-accent-rgb), 0.22);
}

.cv-download-direct span {
    color: currentColor;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
}

.cv-preview-embed-canvas {
    display: block;
    width: 168px;
    height: 238px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.cv-preview-embed {
    width: 794px;
    height: 1123px;
    border: 0;
    background: #fff;
    transform: scale(0.212);
    transform-origin: top left;
    pointer-events: none;
}

.cv-toolbar {
    padding: 18px;
    display: flex;
    justify-content: center;
}

.cv-page {
    background: #f3f5f8;
}

.cv-preview-topbar,
.cv-preview-next {
    width: min(794px, calc(100vw - 40px));
    margin: 0 auto 18px;
    box-sizing: border-box;
    border-radius: 24px;
    border: 1px solid rgba(var(--cv-accent-rgb), 0.16);
    background: linear-gradient(135deg, rgba(var(--cv-accent-rgb), 0.12), #ffffff 68%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.cv-preview-topbar {
    margin-top: 22px;
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.cv-preview-topbar-copy {
    display: grid;
    gap: 8px;
}

.cv-preview-kicker,
.cv-preview-next-copy span {
    color: var(--cv-accent-dark);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cv-preview-topbar-copy h1,
.cv-preview-next-copy h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.05;
}

.cv-preview-topbar-copy p,
.cv-preview-next-copy p {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.65;
}

.cv-preview-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.cv-preview-download-button,
.cv-preview-next-button {
    min-height: 48px;
    padding-inline: 18px;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}

.cv-preview-topbar-actions .button.ghost.dark-outline {
    border-color: rgba(var(--cv-accent-rgb), 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: #1e293b;
}

.cv-preview-next {
    margin-top: 18px;
    margin-bottom: 28px;
    padding: 14px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cv-preview-next-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cv-preview-next-actions .button.ghost.dark-outline {
    border-color: rgba(var(--cv-accent-rgb), 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: #1e293b;
}

.cv-mobile-download-panel {
    display: none;
    width: min(794px, calc(100vw - 40px));
    margin: 14px auto 18px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(var(--cv-accent-rgb), 0.16);
    background: linear-gradient(135deg, rgba(var(--cv-accent-rgb), 0.1), #ffffff 72%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.cv-mobile-download-brand {
    display: grid;
    gap: 14px;
}

.cv-mobile-download-logo {
    width: fit-content;
}

.cv-mobile-download-copy {
    display: grid;
    gap: 6px;
}

.cv-mobile-download-copy strong {
    color: #0f172a;
    font-size: 1.05rem;
}

.cv-mobile-download-copy p {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.65;
}

.cv-mobile-download-button {
    width: 100%;
    margin-top: 16px;
    min-height: 50px;
    border-radius: 999px;
    font-weight: 800;
}

.cv-page .resume-stage {
    padding: 0 0 32px;
}

.cv-page .resume-stage-embed {
    padding: 0;
}

.cv-page .cv-template-sheet {
    width: 794px;
    height: 1123px;
    min-height: 1123px;
    max-width: calc(100vw - 40px);
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 22px;
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.1);
    overflow: hidden;
}

@media (max-width: 800px) {
    .cv-page:not(.cv-embed-mode) .cv-preview-topbar {
        display: none;
    }

    .cv-page:not(.cv-embed-mode) .resume-stage {
        position: absolute;
        left: -99999px;
        top: 0;
        width: 794px;
        height: 1123px;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .cv-page:not(.cv-embed-mode) .cv-preview-next {
        display: none;
    }
    .cv-page:not(.cv-embed-mode) .cv-mobile-download-panel {
        display: block;
        width: min(calc(100vw - 20px), 520px);
        margin-top: 16px;
    }
}

.cv-page.pdf-export-mode {
    background: #fff;
}

.cv-page.pdf-export-mode .resume-stage {
    padding: 0;
}

.cv-page.pdf-export-mode .cv-template-sheet {
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.cv-page.pdf-export-mode .cv-section {
    margin-bottom: 18px;
}

.cv-page.pdf-export-mode .cv-section-title {
    margin-bottom: 10px;
    padding-bottom: 6px;
    font-size: 0.82rem;
}

.cv-page.pdf-export-mode .cv-about-copy,
.cv-page.pdf-export-mode .cv-entry-item p,
.cv-page.pdf-export-mode .cv-education-item p {
    font-size: 0.8rem;
    line-height: 1.55;
}

.cv-page.pdf-export-mode .cv-skills-list li {
    margin-bottom: 6px;
    font-size: 0.8rem;
    line-height: 1.45;
}

.cv-page.pdf-export-mode .cv-reference-card {
    margin-bottom: 12px;
}

.cv-page.pdf-export-mode .cv-reference-card h3 {
    font-size: 0.84rem;
}

.cv-page.pdf-export-mode .cv-reference-card p,
.cv-page.pdf-export-mode .cv-entry-subtitle {
    font-size: 0.75rem;
    line-height: 1.45;
}

.cv-page.pdf-export-mode .cv-entry-item {
    margin-bottom: 16px;
}

.cv-page.pdf-export-mode .cv-entry-header h3,
.cv-page.pdf-export-mode .cv-education-item h4 {
    font-size: 0.88rem;
}

.cv-page.pdf-export-mode .cv-entry-header span {
    font-size: 0.72rem;
}

.cv-page.pdf-export-mode .cv-education-item {
    padding: 8px 0;
}

.cv-page.pdf-export-mode .cv-standard-header {
    padding: 26px 28px;
    gap: 16px;
}

.cv-page.pdf-export-mode .cv-standard-avatar {
    width: 92px;
    height: 92px;
    font-size: 2rem;
}

.cv-page.pdf-export-mode .cv-standard-name {
    font-size: 1.8rem;
}

.cv-page.pdf-export-mode .cv-standard-designation {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
}

.cv-page.pdf-export-mode .cv-standard-contact p {
    margin: 4px 0;
    font-size: 0.76rem;
}

.cv-page.pdf-export-mode .cv-standard-body {
    padding: 16px 18px 18px;
}

.cv-page.pdf-export-mode .cv-standard-summary {
    margin-bottom: 12px;
    padding: 12px 14px;
}

.cv-page.pdf-export-mode .cv-standard-summary span {
    margin-bottom: 6px;
    font-size: 0.7rem;
}

.cv-page.pdf-export-mode .cv-standard-summary p {
    font-size: 0.72rem;
    line-height: 1.45;
}

.cv-page.pdf-export-mode .cv-standard-content {
    grid-template-columns: minmax(0, 1.58fr) minmax(205px, 0.78fr);
    gap: 10px;
}

.cv-page.pdf-export-mode .cv-standard-main,
.cv-page.pdf-export-mode .cv-standard-side {
    gap: 10px;
}

.cv-page.pdf-export-mode .cv-standard-section {
    padding: 10px 11px;
    border-radius: 10px;
}

.cv-page.pdf-export-mode .cv-standard-section h2 {
    margin-bottom: 8px;
    font-size: 0.7rem;
}

.cv-page.pdf-export-mode .cv-standard-stack {
    gap: 6px;
}

.cv-page.pdf-export-mode .cv-standard-line-item {
    gap: 8px;
    padding-bottom: 6px;
}

.cv-page.pdf-export-mode .cv-standard-line-item strong {
    font-size: 0.72rem;
}

.cv-page.pdf-export-mode .cv-standard-line-item span,
.cv-page.pdf-export-mode .cv-standard-line-item small,
.cv-page.pdf-export-mode .cv-standard-reference-line span {
    font-size: 0.64rem;
}

.cv-page.pdf-export-mode .cv-standard-skill-list {
    gap: 4px;
    font-size: 0.68rem;
    line-height: 1.3;
}

.cv-page.pdf-export-mode .cv-modern-header {
    padding: 22px 24px 16px;
}

.cv-page.pdf-export-mode .cv-modern-identity {
    gap: 14px;
    padding: 10px 12px;
    border-radius: 16px;
}

.cv-page.pdf-export-mode .cv-modern-avatar {
    width: 88px;
    height: 88px;
    font-size: 2rem;
}

.cv-page.pdf-export-mode .cv-modern-identity-copy h1 {
    font-size: 1.82rem;
}

.cv-page.pdf-export-mode .cv-modern-identity-copy p {
    margin-top: 6px;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
}

.cv-page.pdf-export-mode .cv-modern-contact-strip {
    gap: 6px;
    margin-top: 14px;
}

.cv-page.pdf-export-mode .cv-modern-contact-strip span {
    padding: 5px 8px;
    font-size: 0.68rem;
}

.cv-page.pdf-export-mode .cv-modern-content {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
}

.cv-page.pdf-export-mode .cv-modern-sidebar,
.cv-page.pdf-export-mode .cv-modern-main {
    gap: 12px;
}

.cv-page.pdf-export-mode .cv-modern-panel,
.cv-page.pdf-export-mode .cv-modern-section {
    padding: 11px 13px;
    border-radius: 10px;
}

.cv-page.pdf-export-mode .cv-modern-panel h2,
.cv-page.pdf-export-mode .cv-modern-section h2 {
    margin-bottom: 6px;
    font-size: 0.74rem;
}

.cv-page.pdf-export-mode .cv-modern-panel p {
    font-size: 0.7rem;
    line-height: 1.4;
}

.cv-page.pdf-export-mode .cv-modern-skill-list {
    font-size: 0.76rem;
    line-height: 1.5;
}

.cv-page.pdf-export-mode .cv-modern-skill-list-inline {
    gap: 8px;
}

.cv-page.pdf-export-mode .cv-modern-skill-list-inline li {
    padding: 6px 9px;
    font-size: 0.72rem;
}

.cv-page.pdf-export-mode .cv-modern-skill-list-plain {
    gap: 4px 10px;
    font-size: 0.7rem;
    line-height: 1.35;
}

.cv-page.pdf-export-mode .cv-modern-side-item {
    gap: 3px;
    margin-bottom: 6px;
}

.cv-page.pdf-export-mode .cv-modern-side-item-row {
    padding-bottom: 6px;
}

.cv-page.pdf-export-mode .cv-modern-side-item strong {
    font-size: 0.74rem;
}

.cv-page.pdf-export-mode .cv-modern-side-item span,
.cv-page.pdf-export-mode .cv-modern-side-item small {
    font-size: 0.66rem;
}

.cv-page.pdf-export-mode .cv-modern-project-grid,
.cv-page.pdf-export-mode .cv-modern-reference-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.cv-page.pdf-export-mode .cv-modern-project-card,
.cv-page.pdf-export-mode .cv-modern-reference-card {
    padding: 10px 11px;
    border-radius: 12px;
}

.cv-page.pdf-export-mode .cv-modern-project-card h3,
.cv-page.pdf-export-mode .cv-modern-reference-card h3 {
    margin-bottom: 4px;
    font-size: 0.78rem;
}

.cv-page.pdf-export-mode .cv-modern-project-card p,
.cv-page.pdf-export-mode .cv-modern-reference-card p,
.cv-page.pdf-export-mode .cv-modern-reference-card span {
    font-size: 0.72rem;
    line-height: 1.45;
}

.cv-page.pdf-export-mode .cv-monochrome-header {
    padding: 22px 24px 16px;
    gap: 14px;
}

.cv-page.pdf-export-mode .cv-monochrome-profile {
    gap: 14px;
    padding: 10px 12px;
    border-radius: 16px;
}

.cv-page.pdf-export-mode .cv-monochrome-avatar {
    width: 84px;
    height: 84px;
    font-size: 1.8rem;
}

.cv-page.pdf-export-mode .cv-monochrome-profile-copy h1 {
    font-size: 1.74rem;
}

.cv-page.pdf-export-mode .cv-monochrome-role {
    margin-top: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

.cv-page.pdf-export-mode .cv-monochrome-contact-strip span {
    font-size: 0.68rem;
}

.cv-page.pdf-export-mode .cv-monochrome-main {
    padding: 14px 16px 16px;
    gap: 12px;
}

.cv-page.pdf-export-mode .cv-monochrome-summary {
    padding: 12px 14px;
}

.cv-page.pdf-export-mode .cv-monochrome-summary span {
    margin-bottom: 6px;
    font-size: 0.7rem;
}

.cv-page.pdf-export-mode .cv-monochrome-summary p {
    font-size: 0.72rem;
    line-height: 1.45;
}

.cv-page.pdf-export-mode .cv-monochrome-content {
    grid-template-columns: minmax(0, 1.58fr) minmax(198px, 0.78fr);
    gap: 10px;
}

.cv-page.pdf-export-mode .cv-monochrome-section-wide {
    grid-column: 1;
}

.cv-page.pdf-export-mode .cv-monochrome-side {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    gap: 10px;
}

.cv-page.pdf-export-mode .cv-monochrome-section {
    padding: 10px 11px;
}

.cv-page.pdf-export-mode .cv-monochrome-section h2 {
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-size: 0.7rem;
}

.cv-page.pdf-export-mode .cv-monochrome-stack {
    gap: 6px;
}

.cv-page.pdf-export-mode .cv-monochrome-line-item {
    gap: 8px;
    padding-bottom: 6px;
}

.cv-page.pdf-export-mode .cv-monochrome-line-item strong {
    font-size: 0.72rem;
}

.cv-page.pdf-export-mode .cv-monochrome-line-item span,
.cv-page.pdf-export-mode .cv-monochrome-line-item small,
.cv-page.pdf-export-mode .cv-monochrome-reference-line span {
    font-size: 0.64rem;
}

.cv-page.pdf-export-mode .cv-monochrome-skill-list {
    gap: 4px;
    font-size: 0.68rem;
    line-height: 1.3;
}

.cv-page.pdf-export-mode .cv-template-advanced-classic {
    padding: 26px 28px 22px;
}

.cv-page.pdf-export-mode .cv-advanced-classic-header {
    gap: 16px;
    padding-bottom: 14px;
}

.cv-page.pdf-export-mode .cv-advanced-classic-profile {
    gap: 14px;
}

.cv-page.pdf-export-mode .cv-advanced-classic-avatar {
    width: 80px;
    height: 80px;
    font-size: 1.7rem;
}

.cv-page.pdf-export-mode .cv-advanced-classic-title h1 {
    font-size: 1.74rem;
}

.cv-page.pdf-export-mode .cv-advanced-classic-title p,
.cv-page.pdf-export-mode .cv-advanced-classic-contact span,
.cv-page.pdf-export-mode .cv-classic-reference-line span {
    font-size: 0.76rem;
}

.cv-page.pdf-export-mode .cv-da-layout {
    grid-template-columns: 222px minmax(0, 1fr);
}

.cv-page.pdf-export-mode .cv-da-sidebar {
    padding: 22px 18px;
    gap: 14px;
}

.cv-page.pdf-export-mode .cv-da-profile-card {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cv-page.pdf-export-mode .cv-da-avatar {
    width: 98px;
    height: 98px;
    margin-bottom: 6px;
}

.cv-page.pdf-export-mode .cv-da-profile-card h1 {
    font-size: 1.45rem;
}

.cv-page.pdf-export-mode .cv-da-profile-card p,
.cv-page.pdf-export-mode .cv-da-contact-list span,
.cv-page.pdf-export-mode .cv-da-skill-list li {
    font-size: 0.66rem;
}

.cv-page.pdf-export-mode .cv-da-block {
    padding-top: 12px;
    gap: 6px;
}

.cv-page.pdf-export-mode .cv-da-block h2,
.cv-page.pdf-export-mode .cv-da-section h2,
.cv-page.pdf-export-mode .cv-da-hero span {
    font-size: 0.7rem;
}

.cv-page.pdf-export-mode .cv-da-main {
    padding: 18px 18px 16px;
    gap: 12px;
}

.cv-page.pdf-export-mode .cv-da-hero,
.cv-page.pdf-export-mode .cv-da-section {
    padding: 11px 12px;
    border-radius: 12px;
}

.cv-page.pdf-export-mode .cv-da-hero p,
.cv-page.pdf-export-mode .cv-da-entry p {
    font-size: 0.7rem;
    line-height: 1.42;
}

.cv-page.pdf-export-mode .cv-da-stack {
    gap: 6px;
}

.cv-page.pdf-export-mode .cv-da-entry,
.cv-page.pdf-export-mode .cv-da-line-item,
.cv-page.pdf-export-mode .cv-da-reference-line {
    padding-bottom: 6px;
}

.cv-page.pdf-export-mode .cv-da-entry strong,
.cv-page.pdf-export-mode .cv-da-line-item strong {
    font-size: 0.72rem;
}

.cv-page.pdf-export-mode .cv-da-entry span,
.cv-page.pdf-export-mode .cv-da-entry small,
.cv-page.pdf-export-mode .cv-da-line-item span,
.cv-page.pdf-export-mode .cv-da-line-item small,
.cv-page.pdf-export-mode .cv-da-reference-line span {
    font-size: 0.64rem;
}

.cv-embed-mode {
    background: #fff;
    overflow: hidden;
}

.cv-embed-mode .cv-template-sheet {
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.cv-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cv-section {
    margin-bottom: 26px;
}

.cv-section:last-child {
    margin-bottom: 0;
}

.cv-section-title {
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid currentColor;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-about-copy {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.8;
}

.cv-skills-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-skills-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1.6;
}

.cv-skills-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 0;
    color: currentColor;
    font-size: 0.55rem;
}

.cv-reference-card {
    margin-bottom: 18px;
}

.cv-reference-card:last-child {
    margin-bottom: 0;
}

.cv-reference-card h3 {
    margin: 0 0 4px;
    font-size: 0.94rem;
    color: #111827;
}

.cv-reference-card p {
    margin: 0;
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.65;
}

.cv-entry-item {
    margin-bottom: 24px;
}

.cv-entry-item:last-child {
    margin-bottom: 0;
}

.cv-entry-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: baseline;
}

.cv-entry-header h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
}

.cv-entry-header span {
    color: #6b7280;
    font-size: 0.78rem;
    white-space: nowrap;
}

.cv-entry-subtitle {
    display: block;
    margin-top: 5px;
    color: #374151;
    font-size: 0.86rem;
}

.cv-entry-item p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 0.88rem;
    line-height: 1.8;
}

.cv-education-item {
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.cv-education-item:last-child {
    border-bottom: 0;
}

.cv-education-item h4 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 0.94rem;
}

.cv-education-item p {
    margin: 0;
    color: #6b7280;
    font-size: 0.84rem;
    line-height: 1.65;
}

.cv-template-standard {
    color: #111827;
    background:
        radial-gradient(circle at top right, rgba(var(--cv-accent-rgb), 0.1), transparent 24%),
        linear-gradient(180deg, #ffffff, #f8fbff);
}

.cv-standard-header {
    padding: 34px 38px;
    border-bottom: 3px solid var(--cv-accent-dark);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}

.cv-standard-profile {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cv-standard-avatar {
    width: 116px;
    height: 116px;
    border-radius: 12px;
    object-fit: cover;
    background: #e5e7eb;
    color: #111827;
    font-size: 2.6rem;
    font-weight: 800;
}

.cv-standard-name {
    margin: 0;
    color: #111827;
    font-size: 2.2rem;
    font-weight: 800;
}

.cv-standard-designation {
    margin: 6px 0 0;
    color: var(--cv-accent-dark);
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cv-standard-contact {
    text-align: right;
}

.cv-standard-contact p {
    margin: 6px 0;
    color: #4b5563;
    font-size: 0.84rem;
}

.cv-standard-body {
    padding: 24px 28px 26px;
}

.cv-standard-summary {
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--cv-accent-rgb), 0.08), #ffffff 68%);
    border: 1px solid rgba(var(--cv-accent-rgb), 0.14);
}

.cv-standard-summary span {
    display: block;
    margin-bottom: 8px;
    color: var(--cv-accent-dark);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-standard-summary p {
    margin: 0;
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.6;
}

.cv-standard-content {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(220px, 0.78fr);
    gap: 16px;
    align-items: start;
}

.cv-standard-main,
.cv-standard-side {
    display: grid;
    gap: 14px;
}

.cv-standard-section {
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(var(--cv-accent-rgb), 0.16);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
}

.cv-standard-section h2 {
    margin: 0 0 10px;
    color: var(--cv-accent-dark);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-standard-stack {
    display: grid;
    gap: 8px;
}

.cv-standard-line-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--cv-accent-rgb), 0.14);
}

.cv-standard-line-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cv-standard-line-item > div {
    display: grid;
    gap: 2px;
}

.cv-standard-line-item strong {
    color: var(--cv-accent-dark);
    font-size: 0.8rem;
}

.cv-standard-line-item span,
.cv-standard-line-item small {
    color: #64748b;
    font-size: 0.72rem;
}

.cv-standard-line-copy {
    color: #475569;
}

.cv-standard-skill-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: #334155;
    font-size: 0.76rem;
    line-height: 1.45;
}

.cv-standard-reference-line {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--cv-accent-rgb), 0.14);
}

.cv-standard-reference-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cv-standard-reference-line span {
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.5;
}

.cv-template-standard .cv-section-title,
.cv-template-standard .cv-entry-header h3,
.cv-template-standard .cv-education-item h4,
.cv-template-standard .cv-reference-card h3 {
    color: var(--cv-accent-dark);
}

.cv-template-standard .cv-skills-list li::before {
    color: var(--cv-accent);
}

.cv-template-standard .cv-education-item {
    border-bottom-color: rgba(var(--cv-accent-rgb), 0.18);
}

.cv-template-modern {
    background:
        radial-gradient(circle at top right, rgba(var(--cv-accent-rgb), 0.12), transparent 24%),
        linear-gradient(180deg, #fbfcff, #f6f8fc);
}

.cv-modern-header {
    padding: 28px 30px 22px;
    background: linear-gradient(135deg, var(--cv-accent-dark), var(--cv-accent) 88%);
    color: #fff;
}

.cv-modern-identity {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.cv-modern-header-side {
    display: grid;
    justify-items: end;
    gap: 12px;
}

.cv-modern-avatar {
    width: 108px;
    height: 108px;
    border-radius: 16px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 2.4rem;
    font-weight: 800;
    border: 2px solid rgba(255, 255, 255, 0.14);
}

.cv-modern-identity-copy h1 {
    margin: 0;
    font-size: 2.2rem;
    line-height: 1.04;
}

.cv-modern-identity-copy p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cv-modern-contact-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.cv-modern-contact-strip span {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.78rem;
}

.cv-modern-content {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 22px;
    padding: 24px;
}

.cv-modern-content-single {
    grid-template-columns: 1fr;
    gap: 12px;
}

.cv-modern-sidebar {
    display: grid;
    gap: 14px;
}

.cv-modern-panel {
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.96);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.cv-modern-panel h2,
.cv-modern-section h2 {
    margin: 0 0 8px;
    color: var(--cv-accent-dark);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-modern-panel p {
    margin: 0;
    color: #4b5563;
    font-size: 0.8rem;
    line-height: 1.55;
}

.cv-modern-skill-list {
    margin: 0;
    padding-left: 18px;
    color: #374151;
    font-size: 0.84rem;
    line-height: 1.7;
}

.cv-modern-skill-list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 0;
    list-style: none;
}

.cv-modern-skill-list-inline li {
    padding: 9px 12px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1e3a8a;
    font-weight: 600;
    line-height: 1.2;
}

.cv-modern-side-item {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.cv-modern-stacked-list {
    display: grid;
    gap: 8px;
}

.cv-modern-side-item-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    margin-bottom: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--cv-accent-rgb), 0.18);
}

.cv-modern-side-item-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cv-modern-side-item:last-child {
    margin-bottom: 0;
}

.cv-modern-side-item strong {
    color: #111827;
    font-size: 0.82rem;
}

.cv-modern-side-item span,
.cv-modern-side-item small {
    color: #6b7280;
    font-size: 0.74rem;
}

.cv-modern-side-item > div {
    display: grid;
    gap: 2px;
}

.cv-modern-line-row {
    align-items: center;
}

.cv-modern-line-copy {
    color: #475569;
}

.cv-modern-skill-list-plain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    margin: 0;
    padding-left: 18px;
    color: var(--cv-accent-dark);
    font-size: 0.78rem;
    line-height: 1.45;
}

.cv-modern-main {
    display: grid;
    gap: 18px;
}

.cv-modern-summary-panel {
    background: linear-gradient(180deg, rgba(var(--cv-accent-rgb), 0.06), #ffffff 78%);
}

.cv-modern-section {
    padding: 15px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(var(--cv-accent-rgb), 0.16);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
}

.cv-modern-project-grid,
.cv-modern-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cv-modern-project-grid-compact,
.cv-modern-reference-grid-stack {
    grid-template-columns: 1fr;
}

.cv-modern-project-card,
.cv-modern-reference-card {
    padding: 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.96);
}

.cv-modern-project-card h3,
.cv-modern-reference-card h3 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 0.88rem;
}

.cv-modern-project-card p,
.cv-modern-reference-card p,
.cv-modern-reference-card span {
    margin: 0;
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.65;
}

.cv-template-monochrome {
    background: #fff;
}

.cv-template-classic {
    padding: 34px 38px 30px;
    background: #fff;
    color: #111827;
}

.cv-classic-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cv-accent-line);
}

.cv-classic-title h1 {
    margin: 0;
    font-size: 2.05rem;
    font-weight: 700;
    line-height: 1.08;
}

.cv-classic-title p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 0.9rem;
}

.cv-classic-contact {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.cv-classic-contact span {
    color: #4b5563;
    font-size: 0.82rem;
    line-height: 1.5;
}

.cv-classic-section {
    margin-top: 22px;
}

.cv-classic-section h2 {
    margin: 0 0 12px;
    color: var(--cv-accent-dark);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cv-classic-section > p {
    margin: 0;
    color: #374151;
    font-size: 0.88rem;
    line-height: 1.8;
}

.cv-classic-entry {
    margin-bottom: 18px;
}

.cv-classic-entry:last-child {
    margin-bottom: 0;
}

.cv-classic-entry-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: baseline;
}

.cv-classic-entry-head h3,
.cv-classic-list-item h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--cv-accent-dark);
}

.cv-classic-entry-head strong {
    display: block;
    margin-top: 4px;
    color: #4b5563;
    font-size: 0.82rem;
    font-weight: 600;
}

.cv-classic-entry-head span,
.cv-classic-list-item span,
.cv-classic-reference-line span {
    color: #6b7280;
    font-size: 0.78rem;
}

.cv-classic-entry p,
.cv-classic-list-item p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 0.84rem;
    line-height: 1.7;
}

.cv-classic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cv-classic-list-item {
    margin-bottom: 14px;
}

.cv-classic-list-item:last-child {
    margin-bottom: 0;
}

.cv-classic-skill-list {
    margin: 0;
    padding-left: 18px;
    color: #374151;
    font-size: 0.84rem;
    line-height: 1.75;
}

.cv-classic-reference-list {
    display: grid;
    gap: 10px;
}

.cv-classic-reference-line {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--cv-accent-rgb), 0.16);
}

.cv-classic-reference-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cv-template-advanced-classic {
    padding: 34px 38px 30px;
    background:
        radial-gradient(circle at top right, rgba(var(--cv-accent-rgb), 0.08), transparent 22%),
        #fff;
    color: #111827;
}

.cv-advanced-classic-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cv-accent-line);
}

.cv-advanced-classic-profile {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cv-advanced-classic-avatar {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    object-fit: cover;
    background: rgba(var(--cv-accent-rgb), 0.08);
    color: var(--cv-accent-dark);
    font-size: 2rem;
    font-weight: 800;
    border: 1px solid rgba(var(--cv-accent-rgb), 0.18);
}

.cv-advanced-classic-title h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.08;
}

.cv-advanced-classic-title p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 0.9rem;
}

.cv-advanced-classic-contact {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.cv-advanced-classic-contact span {
    color: #4b5563;
    font-size: 0.82rem;
    line-height: 1.5;
}

.cv-template-da {
    background:
        radial-gradient(circle at top right, rgba(var(--cv-accent-rgb), 0.14), transparent 24%),
        linear-gradient(180deg, #f9fbff, #ffffff);
}

.cv-da-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    height: 100%;
}

.cv-da-sidebar {
    padding: 28px 22px;
    display: grid;
    align-content: start;
    gap: 18px;
    background: linear-gradient(180deg, var(--cv-accent-dark), var(--cv-accent) 90%);
    color: #fff;
}

.cv-da-profile-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    text-align: center;
}

.cv-da-avatar {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 2.3rem;
    font-weight: 800;
    border: 3px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 16px 28px rgba(3, 7, 18, 0.22);
}

.cv-da-profile-card h1 {
    margin: 6px 0 0;
    font-size: 1.72rem;
    line-height: 1.06;
}

.cv-da-profile-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cv-da-block {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cv-da-block h2 {
    margin: 0;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-da-contact-list {
    display: grid;
    gap: 8px;
}

.cv-da-contact-list span {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.76rem;
    line-height: 1.55;
}

.cv-da-skill-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.76rem;
    line-height: 1.45;
}

.cv-da-main {
    padding: 28px 28px 24px;
    display: grid;
    align-content: start;
    gap: 16px;
}

.cv-da-hero {
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--cv-accent-rgb), 0.08), #ffffff 72%);
    border: 1px solid rgba(var(--cv-accent-rgb), 0.14);
}

.cv-da-hero span {
    display: block;
    margin-bottom: 8px;
    color: var(--cv-accent-dark);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-da-hero p {
    margin: 0;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.62;
}

.cv-da-section {
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(var(--cv-accent-rgb), 0.14);
    box-shadow: 0 12px 20px rgba(15, 23, 42, 0.04);
}

.cv-da-section h2 {
    margin: 0 0 10px;
    color: var(--cv-accent-dark);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-da-stack {
    display: grid;
    gap: 8px;
}

.cv-da-entry,
.cv-da-line-item,
.cv-da-reference-line {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--cv-accent-rgb), 0.12);
}

.cv-da-entry:last-child,
.cv-da-line-item:last-child,
.cv-da-reference-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cv-da-entry-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.cv-da-entry-head > div,
.cv-da-line-item {
    display: grid;
    gap: 2px;
}

.cv-da-entry strong,
.cv-da-line-item strong {
    color: var(--cv-accent-dark);
    font-size: 0.82rem;
}

.cv-da-entry span,
.cv-da-entry small,
.cv-da-line-item span,
.cv-da-line-item small,
.cv-da-reference-line span {
    color: #64748b;
    font-size: 0.72rem;
}

.cv-da-entry p {
    margin: 7px 0 0;
    color: #475569;
    font-size: 0.78rem;
    line-height: 1.5;
}

.cv-da-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cv-template-monochrome {
    background:
        linear-gradient(180deg, #fafafa, #ffffff);
}

.cv-monochrome-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 28px 30px 22px;
    background: linear-gradient(135deg, #090909, #1a1a1a 78%, #2a2a2a);
    color: #fff;
}

.cv-monochrome-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--cv-accent-dark), var(--cv-accent) 92%);
    box-shadow: 0 16px 32px rgba(var(--cv-accent-rgb), 0.24);
}

.cv-monochrome-avatar {
    width: 102px;
    height: 102px;
    border-radius: 18px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.cv-monochrome-profile-copy h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.04;
}

.cv-monochrome-role {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cv-monochrome-contact-strip {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.cv-monochrome-contact-strip span {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.78rem;
}

.cv-monochrome-main {
    padding: 22px 24px 24px;
    display: grid;
    gap: 16px;
}

.cv-monochrome-summary {
    padding: 16px 18px;
    border: 1.5px solid #161616;
    background: linear-gradient(180deg, #ffffff, #f8f8f8);
}

.cv-monochrome-summary span {
    display: block;
    margin-bottom: 8px;
    color: #111111;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-monochrome-summary p {
    margin: 0;
    color: #374151;
    font-size: 0.84rem;
    line-height: 1.6;
}

.cv-monochrome-content {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(210px, 0.78fr);
    gap: 16px;
    align-items: start;
}

.cv-monochrome-section-wide {
    grid-column: 1;
}

.cv-monochrome-side {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    display: grid;
    gap: 12px;
}

.cv-monochrome-section {
    padding: 14px 16px;
    border: 1px solid #d6d6d6;
    background: #fff;
}

.cv-monochrome-section h2 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #111111;
    color: #111111;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-monochrome-stack {
    display: grid;
    gap: 8px;
}

.cv-monochrome-line-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding-bottom: 8px;
    border-bottom: 1px solid #dedede;
}

.cv-monochrome-line-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cv-monochrome-line-item > div {
    display: grid;
    gap: 2px;
}

.cv-monochrome-line-item strong {
    color: #111111;
    font-size: 0.8rem;
}

.cv-monochrome-line-item span,
.cv-monochrome-line-item small {
    color: #6b7280;
    font-size: 0.72rem;
}

.cv-monochrome-line-copy {
    color: #475569;
}

.cv-monochrome-skill-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: #1f2937;
    font-size: 0.76rem;
    line-height: 1.45;
}

.cv-monochrome-reference-line {
    padding-bottom: 8px;
    border-bottom: 1px solid #dedede;
}

.cv-monochrome-reference-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cv-monochrome-reference-line span {
    color: #4b5563;
    font-size: 0.72rem;
    line-height: 1.5;
}

.template-card {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #fcfffd);
    border-radius: 16px;
    padding: 12px;
    cursor: pointer;
    text-align: left;
    display: grid;
    gap: 10px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.template-card:hover {
    transform: translateY(-2px);
    border-color: rgba(24, 165, 102, 0.28);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.05);
}

.template-card.selected {
    border-color: #80d7ab;
    box-shadow: inset 0 0 0 1px rgba(24, 165, 102, 0.24);
}

.template-card-meta {
    display: grid;
    gap: 4px;
}

.template-card-meta strong {
    font-size: 0.98rem;
}

.template-card-meta small {
    color: #7c879b;
    font-size: 0.8rem;
}

.template-thumb {
    display: block;
    height: 142px;
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    position: relative;
    overflow: hidden;
}

.template-lines {
    position: absolute;
    inset: 18px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0 16%, transparent 16% 22%, rgba(255, 255, 255, 0.9) 22% 30%, transparent 30% 38%, rgba(255, 255, 255, 0.9) 38% 46%, transparent 46% 54%, rgba(255, 255, 255, 0.9) 54% 62%, transparent 62%);
    opacity: 0.92;
}

.template-thumb.template-minimal {
    background: linear-gradient(180deg, #f8f9fb, #eef3fb);
}

.template-thumb.template-modern {
    background: linear-gradient(180deg, #fbfbfb, #efefef);
}

.template-thumb.template-creative {
    background: linear-gradient(180deg, #ffffff, #effff6);
}

.template-thumb.template-executive {
    background: linear-gradient(180deg, #f6f6f6, #ececec);
}

.template-thumb.template-aurora {
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.34), transparent 30%),
        linear-gradient(180deg, #11192f, #1d2849);
}

.template-thumb.template-ledger {
    background: linear-gradient(180deg, #fbfcff, #f2f6fb);
}

.template-thumb.template-nova {
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 30%),
        linear-gradient(180deg, #ffffff, #f4fbff);
}

.template-thumb.template-portfolio {
    background: linear-gradient(135deg, #10241b, #173228 55%, #1f4f39);
}

.template-thumb.template-summit {
    background: linear-gradient(180deg, #fffdf7, #f7f0e6);
}

.template-thumb.template-minimal::before,
.template-thumb.template-modern::before,
.template-thumb.template-executive::before,
.template-thumb.template-minimal::after,
.template-thumb.template-modern::after,
.template-thumb.template-executive::after {
    content: "";
    position: absolute;
}

.template-thumb.template-minimal::before {
    inset: 0 auto 0 0;
    width: 33%;
    background: #eff1f4;
}

.template-thumb.template-minimal::after {
    top: 0;
    left: 0;
    border-top: 72px solid #6b8fc0;
    border-right: 72px solid transparent;
}

.template-thumb.template-minimal .template-lines {
    inset: 16px 14px 16px 42%;
    background:
        linear-gradient(180deg, rgba(103, 136, 189, 0.95) 0 4px, transparent 4px 18px, rgba(130, 130, 130, 0.8) 18px 22px, transparent 22px 32px, rgba(160, 160, 160, 0.7) 32px 36px, transparent 36px 52px, rgba(180, 180, 180, 0.7) 52px 56px, transparent 56px 70px, rgba(180, 180, 180, 0.7) 70px 74px, transparent 74px);
}

.template-thumb.template-modern::before {
    left: 16px;
    right: 16px;
    top: 18px;
    height: 4px;
    background: #171717;
}

.template-thumb.template-modern::after {
    left: 16px;
    top: 28px;
    width: 45%;
    height: 12px;
    background: #2a2a2a;
    box-shadow: 0 18px 0 #686868;
}

.template-thumb.template-modern .template-lines {
    inset: 62px 18px 18px;
    background:
        linear-gradient(90deg, rgba(20, 20, 20, 0.1) 0 35%, transparent 35% 40%, rgba(20, 20, 20, 0.08) 40% 100%),
        linear-gradient(180deg, rgba(90, 90, 90, 0.85) 0 4px, transparent 4px 18px, rgba(170, 170, 170, 0.75) 18px 22px, transparent 22px 36px, rgba(160, 160, 160, 0.75) 36px 40px, transparent 40px 56px, rgba(160, 160, 160, 0.75) 56px 60px, transparent 60px);
}

.template-thumb.template-executive::before {
    left: 12px;
    top: 16px;
    width: 34%;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(180deg, #d7dde5, #acb8ca);
}

.template-thumb.template-executive::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: linear-gradient(90deg, #f25656, #6e0000);
}

.template-thumb.template-executive .template-lines {
    inset: 20px 18px 22px 44%;
    background:
        linear-gradient(180deg, rgba(25, 25, 25, 0.9) 0 8px, transparent 8px 24px, rgba(100, 100, 100, 0.8) 24px 28px, transparent 28px 40px, rgba(170, 170, 170, 0.8) 40px 44px, transparent 44px 62px, rgba(170, 170, 170, 0.8) 62px 66px, transparent 66px);
}

.template-thumb.template-aurora::before {
    content: "";
    position: absolute;
    inset: 10px 14px auto;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.template-thumb.template-aurora .template-lines {
    inset: 42px 14px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0 6px, transparent 6px 16px, rgba(170, 189, 255, 0.86) 16px 20px, transparent 20px 34px, rgba(255, 255, 255, 0.88) 34px 38px, transparent 38px 52px, rgba(255, 255, 255, 0.88) 52px 56px, transparent 56px 72px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 32%, transparent 32% 36%, rgba(255, 255, 255, 0.08) 36% 100%);
}

.template-thumb.template-ledger::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 28%;
    background: linear-gradient(180deg, #163126, #21453d);
}

.template-thumb.template-ledger .template-lines {
    inset: 16px 14px 16px 38%;
    background:
        linear-gradient(180deg, rgba(22, 49, 38, 0.88) 0 6px, transparent 6px 18px, rgba(111, 130, 124, 0.8) 18px 22px, transparent 22px 34px, rgba(176, 185, 191, 0.82) 34px 38px, transparent 38px 52px, rgba(176, 185, 191, 0.82) 52px 56px, transparent 56px);
}

.template-thumb.template-nova::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 14px;
    height: 30px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
}

.template-thumb.template-nova .template-lines {
    inset: 52px 14px 14px;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0 48%, transparent 48% 52%, rgba(15, 23, 42, 0.08) 52% 100%),
        linear-gradient(180deg, rgba(34, 74, 171, 0.82) 0 5px, transparent 5px 16px, rgba(129, 150, 192, 0.75) 16px 20px, transparent 20px 32px, rgba(129, 150, 192, 0.75) 32px 36px, transparent 36px 48px, rgba(129, 150, 192, 0.75) 48px 52px, transparent 52px);
}

.template-thumb.template-portfolio::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 34%;
    bottom: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
}

.template-thumb.template-portfolio .template-lines {
    inset: 18px 16px 18px 42%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0 6px, transparent 6px 20px, rgba(169, 228, 198, 0.88) 20px 24px, transparent 24px 38px, rgba(255, 255, 255, 0.88) 38px 42px, transparent 42px 56px, rgba(255, 255, 255, 0.88) 56px 60px, transparent 60px);
}

.template-thumb.template-summit::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 18px;
    height: 3px;
    background: #1f2937;
}

.template-thumb.template-summit::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 28px;
    width: 40%;
    height: 10px;
    background: #3f3f46;
    box-shadow: 0 18px 0 rgba(120, 120, 120, 0.9);
}

.template-thumb.template-summit .template-lines {
    inset: 64px 16px 16px;
    background:
        linear-gradient(90deg, rgba(58, 58, 58, 0.08) 0 42%, transparent 42% 48%, rgba(58, 58, 58, 0.08) 48% 100%),
        linear-gradient(180deg, rgba(58, 58, 58, 0.82) 0 4px, transparent 4px 18px, rgba(155, 155, 155, 0.76) 18px 22px, transparent 22px 36px, rgba(155, 155, 155, 0.76) 36px 40px, transparent 40px 54px, rgba(155, 155, 155, 0.76) 54px 58px, transparent 58px);
}

.panel-form {
    scroll-margin-top: 30px;
}

.subscription-page .dashboard-main {
    background:
        radial-gradient(circle at top right, rgba(36, 184, 119, 0.1), transparent 26%),
        linear-gradient(180deg, rgba(246, 250, 248, 0.92) 0%, rgba(255, 255, 255, 1) 42%);
}

.subscription-simple-shell {
    display: grid;
    gap: 22px;
}

.subscription-simple-head {
    display: grid;
    gap: 10px;
    padding: 26px 28px;
    border-radius: 30px;
    border: 1px solid rgba(214, 229, 223, 0.96);
    background:
        radial-gradient(circle at top right, rgba(17, 136, 86, 0.12), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #f6fbf8 100%);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.07);
}

.subscription-simple-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(17, 136, 86, 0.08);
    color: #118856;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.subscription-simple-head h1,
.subscription-request-card strong {
    margin: 0;
}

.subscription-simple-head p,
.subscription-request-card p {
    margin: 0;
}

.subscription-request-message {
    margin-bottom: 0;
}

.subscription-request-card {
    display: grid;
    gap: 8px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(36, 184, 119, 0.22);
    background: linear-gradient(135deg, rgba(36, 184, 119, 0.1), rgba(17, 136, 86, 0.04));
    box-shadow: 0 14px 28px rgba(17, 136, 86, 0.08);
}

.subscription-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.subscription-request-card .status-badge {
    width: fit-content;
}

.subscription-request-card small {
    color: #64748b;
}

.subscription-plans-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.subscription-plan-premium-card {
    display: grid;
    gap: 14px;
    padding: 24px 22px;
    border-radius: 28px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
}

.subscription-plan-premium-card.is-live-plan {
    background:
        radial-gradient(circle at top right, rgba(17, 136, 86, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.1), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f6fbf8 100%);
}

.subscription-plan-premium-card.is-verified-plan {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.1), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
}

.subscription-plan-premium-card.is-premium-plan {
    background:
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.2), transparent 28%),
        radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.1), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #fbf7ff 100%);
}

.subscription-plan-premium-card::after {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(17, 136, 86, 0.8), rgba(59, 130, 246, 0.8), rgba(168, 85, 247, 0.8));
}

.subscription-plan-premium-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.subscription-plan-premium-icon svg {
    width: 26px;
    height: 26px;
}

.subscription-plan-premium-card h3,
.subscription-pay-modal h2 {
    margin: 0;
}

.subscription-plan-premium-card strong {
    font-size: 1.42rem;
    line-height: 1;
}

.subscription-plan-premium-card p {
    margin: 0;
    color: #475569;
}

.subscription-plan-premium-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subscription-plan-premium-meta span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

.subscription-plan-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.subscription-plan-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(214, 229, 223, 0.92);
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
}

.subscription-plan-benefits svg {
    width: 15px;
    height: 15px;
}

.subscription-select-plan {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    border-radius: 16px;
    box-shadow: 0 16px 28px rgba(17, 136, 86, 0.18);
}

.subscription-pay-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(8px);
}

.subscription-pay-modal-backdrop[hidden] {
    display: none !important;
}

.subscription-pay-modal {
    position: relative;
    width: min(100%, 520px);
    display: grid;
    gap: 16px;
    max-height: min(calc(100vh - 48px), 760px);
    overflow-y: auto;
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(17, 136, 86, 0.12), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #f7fbf8 100%);
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.18);
}

.subscription-pay-form {
    display: grid;
    gap: 18px;
}

.subscription-pay-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    font-size: 1.4rem;
    cursor: pointer;
}

.subscription-pay-modal-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(17, 136, 86, 0.08);
    color: #118856;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.subscription-pay-detail-list {
    display: grid;
    gap: 12px;
}

.subscription-pay-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(214, 229, 223, 0.95);
}

.subscription-pay-detail-row span {
    color: #64748b;
    font-weight: 700;
}

.subscription-pay-detail-row strong {
    color: #0f172a;
}

.subscription-pay-upload {
    position: relative;
    display: grid;
    gap: 10px;
}

.subscription-pay-upload-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 700;
}

.subscription-pay-upload-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px dashed rgba(17, 136, 86, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 245, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 14px 30px rgba(17, 136, 86, 0.1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.subscription-pay-upload:hover .subscription-pay-upload-box,
.subscription-pay-upload:focus-within .subscription-pay-upload-box {
    border-color: rgba(17, 136, 86, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 18px 34px rgba(17, 136, 86, 0.16);
    transform: translateY(-1px);
}

.subscription-pay-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(36, 184, 119, 0.18), rgba(17, 136, 86, 0.08));
    color: #118856;
}

.subscription-pay-upload-icon svg {
    width: 22px;
    height: 22px;
}

.subscription-pay-upload-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.subscription-pay-upload-copy strong {
    color: #0f172a;
}

.subscription-pay-upload-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subscription-pay-upload-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 11px 15px;
    border-radius: 14px;
    background: linear-gradient(135deg, #24b877, #118856);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(17, 136, 86, 0.22);
}

.subscription-pay-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.subscription-pay-upload small,
.subscription-pay-footnote {
    color: #64748b;
}

.subscription-pay-footnote {
    margin: 0;
}

.subscription-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 320px);
    gap: 22px;
    align-items: stretch;
    padding: 26px 28px;
    border-radius: 30px;
    border: 1px solid rgba(214, 229, 223, 0.96);
    background:
        radial-gradient(circle at top right, rgba(17, 136, 86, 0.14), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f4fbf7 100%);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.subscription-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(17, 136, 86, 0.08);
    color: #118856;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.subscription-hero h1 {
    margin: 14px 0 10px;
}

.subscription-hero p {
    margin: 0;
}

.subscription-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.subscription-hero-pills span {
    padding: 9px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(214, 229, 223, 0.94);
    color: #1f2937;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.subscription-hero-highlight {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
}

.subscription-hero-highlight .status-badge {
    width: fit-content;
}

.subscription-hero-highlight strong {
    font-size: 1.18rem;
}

.subscription-hero-highlight p {
    color: rgba(255, 255, 255, 0.8);
}

.status-badge {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eaf8f1;
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 0.84rem;
}

.status-badge.is-saving {
    background: #ebfbf2;
    color: #188f5a;
}

.status-badge.is-success {
    background: #eafaf1;
    color: #118150;
}

.status-badge.is-pending {
    background: #eff6ff;
    color: #1d4ed8;
}

.status-badge.is-error {
    background: #fff0ef;
    color: #cb4a39;
}

.editor-form {
    margin-top: 20px;
}

.subscription-summary-grid,
.subscription-package-grid,
.subscription-history-list {
    display: grid;
    gap: 16px;
}

.subscription-summary-grid,
.subscription-package-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.subscription-summary-card,
.subscription-package-card,
.subscription-cart-card,
.subscription-history-card,
.subscription-payment-note {
    border: 1px solid rgba(214, 229, 223, 0.95);
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.subscription-panel {
    border-radius: 28px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

.subscription-summary-card,
.subscription-package-card,
.subscription-history-card {
    display: grid;
    gap: 10px;
}

.subscription-package-card.is-active {
    border-color: rgba(17, 136, 86, 0.36);
    box-shadow: 0 16px 34px rgba(17, 136, 86, 0.12);
}

.subscription-package-card.is-verified-plan {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
}

.subscription-package-card.is-live-plan {
    background:
        radial-gradient(circle at top right, rgba(17, 136, 86, 0.1), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #f6fbf8 100%);
}

.subscription-package-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.subscription-package-picked {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(17, 136, 86, 0.1);
    color: #118856;
    font-size: 0.78rem;
    font-weight: 800;
}

.subscription-package-card strong,
.subscription-summary-card strong,
.subscription-cart-card strong,
.subscription-history-card strong {
    font-size: 1.05rem;
}

.subscription-package-card h3,
.subscription-payment-note h3 {
    margin: 0;
}

.subscription-package-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subscription-package-meta span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

.subscription-cart-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.subscription-cart-price {
    text-align: right;
    display: grid;
    gap: 6px;
}

.subscription-payment-note {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(36, 184, 119, 0.08), rgba(17, 136, 86, 0.04));
}

.subscription-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.subscription-steps span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(17, 136, 86, 0.12);
    color: #166534;
    font-size: 0.76rem;
    font-weight: 800;
}

.subscription-history-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.subscription-history-head p,
.subscription-summary-card p,
.subscription-package-card p,
.subscription-history-card p,
.subscription-payment-note p {
    margin: 0;
}

.admin-payment-card .editor-form {
    margin-top: 4px;
}

.admin-hero {
    padding: 28px 30px;
    border-radius: 28px;
    border: 1px solid rgba(214, 229, 223, 0.96);
    background:
        radial-gradient(circle at top right, rgba(17, 136, 86, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 247, 0.98));
    box-shadow: 0 24px 52px rgba(15, 23, 42, 0.1);
}

.admin-hero h1 {
    margin: 10px 0 8px;
    max-width: 720px;
}

.admin-hero p {
    max-width: 720px;
}

.admin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-panel {
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(36, 184, 119, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 248, 0.99));
    border: 1px solid rgba(220, 231, 225, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 24px 50px rgba(15, 23, 42, 0.08);
}

.admin-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.admin-package-settings-panel {
    margin-bottom: 18px;
}

.admin-plan-toggle-row {
    margin-top: 2px;
    margin-bottom: 8px;
    gap: 18px;
}

.admin-plan-toggle-copy {
    display: grid;
    gap: 4px;
}

.admin-plan-toggle-copy strong {
    color: #0f172a;
    font-size: 0.98rem;
}

.admin-plan-toggle-copy small {
    color: #64748b;
    line-height: 1.6;
}

.admin-plan-mode-options {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-plan-mode-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    color: #334155;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.admin-plan-mode-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.admin-plan-mode-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-plan-mode-option.is-active,
.admin-plan-mode-option:has(input:checked) {
    border-color: rgba(17, 136, 86, 0.28);
    background: linear-gradient(135deg, rgba(36, 184, 119, 0.14), rgba(17, 136, 86, 0.08));
    color: #0f172a;
    box-shadow: 0 14px 28px rgba(17, 136, 86, 0.12);
}

.admin-package-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.admin-plan-manager-head {
    margin: 10px 0 14px;
}

.admin-package-settings-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-plan-delete-button {
    color: #b91c1c;
    border-color: rgba(248, 113, 113, 0.28);
    background: rgba(254, 242, 242, 0.92);
}

.admin-plan-delete-button:hover {
    background: rgba(254, 226, 226, 0.98);
}

.admin-package-settings-empty {
    padding: 22px;
    border-radius: 22px;
    border: 1px dashed rgba(203, 213, 225, 0.95);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.94));
    color: #475569;
}

.admin-package-settings-empty strong {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 1rem;
}

.admin-package-settings-empty p {
    margin: 0;
    line-height: 1.7;
}

.admin-package-settings-empty.hidden {
    display: none;
}

.admin-package-settings-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 251, 248, 0.99));
}

.admin-package-settings-card h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
}

.admin-package-settings-card label {
    display: grid;
    gap: 8px;
}

.admin-package-settings-card label.full {
    grid-column: 1 / -1;
}

.admin-package-settings-card span {
    color: #344256;
    font-size: 0.88rem;
    font-weight: 700;
}

.site-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.site-settings-card,
.site-settings-mock-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 251, 248, 0.99));
}

.site-settings-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.site-settings-card p,
.site-settings-card small,
.site-settings-mock-card small {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

.site-settings-preview-surface {
    min-height: 112px;
    display: grid;
    place-items: center;
    padding: 16px;
    border-radius: 18px;
    border: 1px dashed rgba(17, 136, 86, 0.22);
    background: rgba(255, 255, 255, 0.92);
}

.site-settings-preview-surface.is-favicon-surface {
    min-height: 96px;
}

.site-settings-brand-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}

.site-settings-brand-display img {
    display: block;
    width: auto;
    max-width: min(100%, 220px);
    max-height: 52px;
    object-fit: contain;
}

.site-settings-brand-display.is-mobile-brand img {
    max-width: min(100%, 160px);
    max-height: 40px;
}

.site-settings-brand-fallback {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-weight: 800;
}

.site-settings-upload-field {
    width: 100%;
}

.site-settings-upload-field span {
    text-align: center;
}

.site-settings-mock-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.site-settings-mock-card {
    display: grid;
    gap: 12px;
}

.site-settings-navbar-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(223, 229, 238, 0.92);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.site-settings-navbar-preview.is-mobile-preview {
    max-width: 290px;
    border-radius: 22px;
}

.site-settings-navbar-links {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
}

.site-settings-mobile-menu-button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(223, 229, 238, 0.95);
    background: rgba(255, 255, 255, 0.98);
    color: #475569;
}

.site-settings-mobile-menu-button svg {
    width: 18px;
    height: 18px;
}

.site-settings-favicon-tab {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(223, 229, 238, 0.92);
    background: rgba(255, 255, 255, 0.98);
    color: #0f172a;
    font-weight: 700;
}

.site-settings-favicon-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(241, 245, 249, 0.98);
}

.site-settings-favicon-icon img,
.site-settings-favicon-icon .brand-mark {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 10px;
}

.admin-plan-feature-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-plan-feature-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-plan-feature-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(17, 136, 86, 0.26);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.admin-plan-feature-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #118856;
}

.admin-plan-feature-toggle span {
    color: inherit;
    font-size: 0.84rem;
    font-weight: 800;
}

.admin-search-input-wrap {
    position: relative;
    flex: 1 1 340px;
}

.admin-search-input-wrap input {
    padding-left: 44px;
}

.admin-search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    display: inline-flex;
    color: #64748b;
    pointer-events: none;
}

.admin-search-icon svg {
    width: 18px;
    height: 18px;
}

.admin-request-list {
    display: grid;
    gap: 14px;
}

.admin-request-card,
.admin-request-row {
    border: 1px solid rgba(214, 229, 223, 0.95);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 250, 246, 0.98));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.admin-tabs {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.admin-page-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 22px;
    padding: 12px;
    border-radius: 28px;
    border: 1px solid rgba(214, 229, 223, 0.92);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(241, 249, 245, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 22px 46px rgba(15, 23, 42, 0.08);
}

.admin-filter-tabs {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(221, 231, 226, 0.96);
    background:
        radial-gradient(circle at top right, rgba(36, 184, 119, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 250, 246, 0.98));
    color: #476171;
    text-decoration: none;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 14px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.admin-tab::after {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.28), rgba(203, 213, 225, 0.18));
}

.admin-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(17, 136, 86, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 18px 34px rgba(15, 23, 42, 0.1);
}

.admin-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(236, 253, 245, 0.9));
    color: #118856;
    box-shadow:
        inset 0 0 0 1px rgba(214, 229, 223, 0.95),
        0 10px 18px rgba(17, 136, 86, 0.08);
    flex-shrink: 0;
}

.admin-tab-icon svg {
    width: 19px;
    height: 19px;
}

.admin-tab-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.admin-tab-copy span {
    color: #0f172a;
    line-height: 1.25;
}

.admin-tab-copy small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.admin-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(214, 229, 223, 0.92);
    color: #0f172a;
    font-size: 0.98rem;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.admin-tab.active {
    border-color: rgba(17, 136, 86, 0.26);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(36, 184, 119, 0.14), rgba(59, 130, 246, 0.1));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 22px 42px rgba(17, 136, 86, 0.14);
}

.admin-tab.active::after {
    background: linear-gradient(90deg, #24b877, #118856, #38bdf8);
}

.admin-tab.active .admin-tab-icon {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(220, 252, 231, 0.92));
    color: #118856;
    box-shadow: inset 0 0 0 1px rgba(17, 136, 86, 0.16);
}

.admin-tab.active .admin-tab-count {
    background: linear-gradient(135deg, rgba(36, 184, 119, 0.14), rgba(59, 130, 246, 0.1));
    border-color: rgba(17, 136, 86, 0.16);
    color: #118856;
}

.admin-filter-tabs .admin-tab:nth-child(1):not(.active)::after {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.45), rgba(139, 92, 246, 0.26));
}

.admin-filter-tabs .admin-tab:nth-child(2):not(.active)::after {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.45), rgba(34, 197, 94, 0.22));
}

.admin-filter-tabs .admin-tab:nth-child(3):not(.active)::after {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.45), rgba(249, 115, 22, 0.22));
}

.admin-filter-tabs .admin-tab:nth-child(4):not(.active)::after {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.4), rgba(250, 204, 21, 0.2));
}

.admin-blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 18px;
    align-items: start;
}

.admin-blog-list {
    display: grid;
    gap: 16px;
}

.admin-blog-list.is-empty {
    align-content: start;
}

.admin-blog-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(220, 231, 225, 0.96);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 251, 248, 0.99));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.admin-blog-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-blog-card-statuses {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-blog-card-head strong {
    color: #0f172a;
}

.admin-blog-card-head p,
.admin-blog-excerpt {
    margin: 4px 0 0;
    color: #64748b;
}

.admin-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.admin-blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 0.87rem;
}

.admin-blog-meta svg {
    width: 16px;
    height: 16px;
    color: #118856;
}

.admin-blog-card-cover {
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg, rgba(36, 184, 119, 0.16), rgba(59, 130, 246, 0.14)),
        #f8fafc;
}

.admin-blog-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-blog-tags span {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 700;
}

.blog-editor-form {
    display: grid;
    gap: 18px;
}

.blog-field {
    gap: 10px;
}

.blog-field-note {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.6;
}

.blog-switch-card {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 251, 248, 0.99));
}

.blog-switch-card input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: 0 0 auto;
}

.blog-switch-copy {
    display: grid;
    gap: 4px;
}

.blog-switch-copy strong {
    color: #0f172a;
}

.blog-switch-copy small {
    color: #64748b;
    line-height: 1.6;
}

.blog-editor-form input,
.blog-editor-form textarea,
.blog-editor-form select {
    border: 1px solid #d9e5df;
    border-radius: 16px;
    padding: 13px 15px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 249, 0.99));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.blog-editor-form input:focus,
.blog-editor-form textarea:focus,
.blog-editor-form select:focus {
    border-color: rgba(17, 136, 86, 0.45);
    box-shadow:
        0 0 0 4px rgba(17, 136, 86, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.blog-cover-picker {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 251, 248, 0.99));
}

.blog-cover-preview {
    min-height: 220px;
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(37, 99, 235, 0.12)),
        #eef4ff;
    border: 1px dashed rgba(37, 99, 235, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-cover-preview.has-image {
    border-style: solid;
    border-color: rgba(214, 229, 223, 0.95);
}

.blog-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-cover-empty {
    display: grid;
    gap: 8px;
    padding: 22px;
    color: #0f172a;
}

.blog-cover-empty strong,
.blog-upload-meta strong {
    font-size: 1rem;
}

.blog-cover-empty p,
.blog-upload-meta p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.blog-cover-copy {
    display: grid;
    gap: 14px;
    align-content: center;
}

.blog-upload-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(17, 136, 86, 0.34);
    background: rgba(17, 136, 86, 0.05);
    cursor: pointer;
    overflow: hidden;
}

.blog-upload-drop input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.blog-upload-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #24b877, #118856);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.blog-upload-drop strong,
.blog-upload-drop small {
    display: block;
}

.blog-upload-drop small {
    margin-top: 4px;
    color: #64748b;
}

/* Public blog pages */
.blog-shell {
    padding-bottom: 70px;
}

.blog-hero {
    padding: 54px 0 18px;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 42%),
        radial-gradient(circle at bottom left, rgba(36, 184, 119, 0.14), transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 246, 251, 0.92));
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.blog-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 18px;
    align-items: end;
}

.blog-hero-copy h1 {
    margin: 16px 0 10px;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: -0.02em;
    color: #0f172a;
}

.blog-hero-copy p {
    margin: 0;
    max-width: 56ch;
    color: #475569;
    line-height: 1.65;
}

.blog-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.blog-search .button.subtle {
    padding-inline: 18px;
}

.blog-search .button {
    padding: 12px 18px;
    border-radius: 16px;
}

.blog-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: 18px;
    padding: 10px 12px;
    background: rgba(248, 250, 252, 0.9);
}

.blog-search-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.95rem;
}

.blog-search-icon svg {
    width: 18px;
    height: 18px;
    color: #118856;
}

.blog-section {
    padding: 30px 0 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.blog-card {
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 52px rgba(15, 23, 42, 0.12);
}

.blog-card-link {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
}

.blog-card-cover {
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg, rgba(36, 184, 119, 0.18), rgba(59, 130, 246, 0.14)),
        #f8fafc;
}

.blog-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card-cover-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, 0.42);
}

.blog-card-cover-fallback svg {
    width: 44px;
    height: 44px;
}

.blog-card-body {
    display: grid;
    gap: 12px;
    padding: 18px 18px 20px;
}

.blog-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-card-tags span {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 700;
}

.blog-card-body h2,
.blog-card-body h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #0f172a;
    line-height: 1.35;
}

.blog-card-body p {
    margin: 0;
    color: #64748b;
    line-height: 1.65;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-size: 0.9rem;
}

.blog-card-meta svg {
    width: 16px;
    height: 16px;
    color: #118856;
}

.blog-card-meta-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(24, 165, 102, 0.12);
    color: #0f7f4c;
    font-weight: 800;
}

/* Blog post page */
.blog-post-shell {
    padding-bottom: 80px;
}

.blog-post-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: rgba(15, 23, 42, 0.55);
    font-size: 0.88rem;
    font-weight: 700;
}

.blog-post-breadcrumbs a {
    color: rgba(17, 136, 86, 0.92);
}

.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(15, 23, 42, 0.75);
    font-weight: 700;
    margin-bottom: 14px;
}

.blog-back-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(17, 136, 86, 0.12);
    color: #118856;
    font-size: 1rem;
    line-height: 1;
}

.blog-post-hero {
    position: relative;
    padding: 56px 0 30px;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 50%),
        radial-gradient(circle at bottom left, rgba(36, 184, 119, 0.16), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 246, 251, 0.92));
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    overflow: hidden;
}

.blog-post-hero.has-cover {
    padding-top: 36px;
}

.blog-post-hero-cover {
    position: absolute;
    inset: 0;
    opacity: 0.22;
}

.blog-post-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
}

.blog-post-hero-inner {
    position: relative;
    display: grid;
    gap: 14px;
}

.blog-post-hero h1 {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(2.3rem, 3.8vw, 3.4rem);
    color: #0f172a;
    letter-spacing: -0.03em;
}

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    color: rgba(15, 23, 42, 0.72);
    font-weight: 650;
}

.blog-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.blog-post-meta svg {
    width: 16px;
    height: 16px;
    color: #118856;
}

.blog-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.blog-post-tags span {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
    font-size: 0.92rem;
    font-weight: 800;
}

.blog-post-body {
    padding: 34px 0 0;
}

.blog-post-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 30px;
    align-items: start;
}

.blog-post-sidebar {
    order: 2;
    display: grid;
    gap: 18px;
    position: sticky;
    top: 100px;
}

.blog-post-article {
    order: 1;
}

.blog-post-sidebar-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.blog-post-sidebar-card > strong {
    font-size: 1.15rem;
    color: #0f172a;
}

.blog-post-sidebar-list {
    display: grid;
    gap: 12px;
}

.blog-post-sidebar-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.blog-post-sidebar-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.blog-post-sidebar-list span {
    color: #667085;
    font-size: 1rem;
}

.blog-post-sidebar-list strong {
    color: #0f172a;
    text-align: right;
    font-size: 1rem;
}

.blog-post-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-post-sidebar-tags span {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(17, 136, 86, 0.08);
    color: #118856;
    font-size: 0.9rem;
    font-weight: 800;
}

.blog-post-sidebar-actions {
    display: grid;
    gap: 10px;
}

.blog-post-sidebar-actions .button {
    width: 100%;
}

.blog-post-article {
    width: 100%;
    min-width: 0;
    padding: 38px 38px 34px;
    border-radius: 28px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
    line-height: 1.9;
    color: #0f172a;
}

.blog-post-article h1,
.blog-post-article h2,
.blog-post-article h3 {
    margin: 24px 0 12px;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.blog-post-article h2 {
    font-size: clamp(1.85rem, 2.2vw, 2.2rem);
}

.blog-post-article h3 {
    font-size: 1.35rem;
}

.blog-post-article p {
    margin: 0 0 16px;
    color: #334155;
    font-size: 1.12rem;
}

.blog-post-article ul,
.blog-post-article ol {
    margin: 0 0 18px;
    padding-left: 22px;
    color: #334155;
    font-size: 1.08rem;
}

.blog-post-article li + li {
    margin-top: 8px;
}

.blog-post-article blockquote {
    margin: 18px 0;
    padding: 18px 20px;
    border-left: 4px solid rgba(17, 136, 86, 0.55);
    background: rgba(24, 165, 102, 0.08);
    border-radius: 18px;
    color: #0f172a;
}

.blog-post-article a {
    color: #118856;
    text-decoration: underline;
    text-decoration-color: rgba(17, 136, 86, 0.35);
    text-underline-offset: 3px;
}

/* Blog card actions */
.blog-card-meta-stats {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.blog-card-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(15, 23, 42, 0.72);
    font-weight: 700;
}

.blog-card-actions {
    display: flex;
    gap: 10px;
    padding: 0 18px 18px;
}

.blog-card-actions .button {
    flex: 1;
    padding: 12px 14px;
    border-radius: 16px;
}

.blog-like-button.is-liked {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}

.blog-post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.blog-post-actions .button {
    padding: 12px 16px;
    border-radius: 16px;
}

.blog-post-suggested {
    padding: 42px 0 0;
}

.blog-post-suggested-head {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
    padding: 0 4px;
}

.blog-post-suggested-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.8rem, 2.9vw, 2.3rem);
    letter-spacing: -0.03em;
}

.blog-post-suggested-head p {
    margin: 0;
    max-width: 720px;
    color: #64748b;
    line-height: 1.7;
    font-size: 1.02rem;
}

.blog-post-suggested-grid .blog-card-link {
    height: 100%;
}

.blog-post-suggested-grid .blog-card {
    border-radius: 28px;
}

.blog-post-suggested-grid .blog-card-body {
    gap: 14px;
    padding: 20px 20px 22px;
}

.blog-post-suggested-grid .blog-card-body h3 {
    font-size: 1.22rem;
    line-height: 1.42;
}

.blog-post-suggested-grid .blog-card-body p {
    font-size: 1rem;
    line-height: 1.75;
}

.blog-post-suggested-grid .blog-card-meta {
    font-size: 0.98rem;
}

.blog-post-suggested-grid .blog-card-meta-cta {
    padding: 10px 14px;
    font-size: 0.92rem;
}

@media (max-width: 980px) {
    .blog-hero-inner {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .blog-search {
        grid-template-columns: 1fr;
    }

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

    .blog-post-content {
        grid-template-columns: 1fr;
    }

    .blog-post-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-post-hero {
        padding: 34px 0 24px;
    }

    .blog-post-hero h1 {
        max-width: 100%;
    }

    .blog-post-article {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .blog-post-sidebar-card {
        padding: 18px;
        border-radius: 20px;
    }

    .blog-post-sidebar {
        display: none;
    }

    .blog-post-meta span,
    .blog-post-tags span,
    .blog-post-sidebar-list span,
    .blog-post-sidebar-list strong,
    .blog-post-sidebar-tags span,
    .blog-post-suggested-grid .blog-card-body p {
        font-size: 0.96rem;
    }

    .blog-post-article p,
    .blog-post-article ul,
    .blog-post-article ol {
        font-size: 1.02rem;
    }
}

.blog-tag-editor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 62px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid #d9e5df;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 249, 0.99));
    cursor: text;
}

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

.blog-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 0.85rem;
    font-weight: 700;
}

.blog-tag-chip button {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 999px;
    background: rgba(29, 78, 216, 0.12);
    color: inherit;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 800;
}

.blog-tag-input {
    flex: 1 1 180px;
    min-width: 180px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
}

.blog-tag-input:focus {
    box-shadow: none !important;
}

.blog-editor-shell {
    border-radius: 22px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 251, 248, 0.99));
}

.blog-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid rgba(214, 229, 223, 0.95);
    background: rgba(255, 255, 255, 0.86);
}

.blog-tool-button {
    min-width: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-tool-button:hover,
.blog-tool-button:focus {
    transform: translateY(-1px);
    border-color: rgba(17, 136, 86, 0.28);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.blog-editor-surface {
    min-height: 340px;
    padding: 20px 18px;
    outline: none;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.8;
}

.blog-editor-surface:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
}

.blog-editor-surface h1,
.blog-editor-surface h2,
.blog-editor-surface h3 {
    margin: 0 0 0.7em;
    line-height: 1.2;
    color: #0f172a;
}

.blog-editor-surface h1 {
    font-size: 2.1rem;
}

.blog-editor-surface h2 {
    font-size: 1.55rem;
}

.blog-editor-surface h3 {
    font-size: 1.22rem;
}

.blog-editor-surface p,
.blog-editor-surface ul,
.blog-editor-surface ol,
.blog-editor-surface blockquote {
    margin: 0 0 1rem;
}

.blog-editor-surface ul,
.blog-editor-surface ol {
    padding-left: 1.35rem;
}

.blog-editor-surface blockquote {
    padding: 14px 16px;
    border-left: 4px solid #24b877;
    border-radius: 0 16px 16px 0;
    background: rgba(17, 136, 86, 0.06);
    color: #0f172a;
}

.blog-editor-surface a {
    color: #1d4ed8;
    text-decoration: underline;
}

@media (max-width: 860px) {
    .blog-cover-picker {
        grid-template-columns: 1fr;
    }

    .blog-cover-preview {
        min-height: 180px;
    }

    .blog-editor-toolbar {
        gap: 8px;
    }

    .blog-tool-button {
        min-width: 44px;
        padding: 9px 10px;
    }

    .blog-editor-surface {
        min-height: 260px;
        padding: 16px;
    }
}

.admin-request-list.simple {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(214, 229, 223, 0.95);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

.admin-request-item {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(228, 235, 241, 0.9);
}

.admin-request-item:last-child {
    border-bottom: none;
}

.admin-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

.admin-request-list.compact .admin-request-row {
    border-radius: 24px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.07);
}

.admin-request-row.is-approved {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(236, 253, 245, 0.98));
    border-color: rgba(167, 243, 208, 0.95);
}

.admin-request-row.is-rejected {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(254, 242, 242, 0.98));
    border-color: rgba(254, 202, 202, 0.95);
}

.admin-request-row.is-pending {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 243, 255, 0.98));
    border-color: rgba(221, 214, 254, 0.95);
}

.admin-request-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    min-width: 0;
}

.admin-request-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #24b877, #118856);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(17, 136, 86, 0.16);
}

.admin-request-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-request-main strong {
    color: #0f172a;
    font-size: 0.98rem;
}

.admin-request-main span {
    color: #64748b;
    font-size: 0.86rem;
    white-space: nowrap;
}

.admin-request-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.admin-request-note {
    margin: 0;
    color: #64748b;
}

.admin-request-form {
    padding-top: 2px;
}

.admin-users-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.admin-user-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 246, 0.98));
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
}

.admin-user-card::after {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
}

.admin-user-card.is-active-card::after {
    background: linear-gradient(90deg, #24b877, #118856, #38bdf8);
}

.admin-user-card.is-blocked-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(254, 242, 242, 0.98));
    border-color: rgba(254, 202, 202, 0.92);
}

.admin-user-card.is-blocked-card::after {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.admin-user-card-empty {
    grid-column: 1 / -1;
}

.admin-user-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.admin-user-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #24b877, #118856);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 0 16px 28px rgba(17, 136, 86, 0.2);
}

.admin-user-verified-tick {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(14%, 14%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.24);
}

.admin-user-verified-tick[hidden] {
    display: none !important;
}

.admin-user-verified-tick svg {
    width: 11px;
    height: 11px;
}

.admin-user-avatar.large .admin-user-verified-tick {
    width: 28px;
    height: 28px;
    right: 2px;
    bottom: 2px;
    transform: none;
    border-width: 3px;
}

.admin-user-avatar.large .admin-user-verified-tick svg {
    width: 14px;
    height: 14px;
}

.admin-user-avatar.large {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    font-size: 1.25rem;
}

.admin-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-user-meta {
    min-width: 0;
}

.admin-user-meta strong,
.admin-user-modal-meta h2 {
    margin: 0;
    color: #0f172a;
}

.admin-user-meta p,
.admin-user-modal-meta p {
    margin: 4px 0 0;
    color: #64748b;
}

.admin-user-meta p:empty,
.admin-user-modal-meta p:empty {
    display: none;
}

.admin-user-detail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-user-detail-list span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: fit-content;
    max-width: 100%;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.35;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(220, 230, 225, 0.9);
}

.admin-user-detail-list svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #118856;
}

.admin-user-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-user-plan-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-user-plan-strip span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(240, 249, 244, 0.9);
    border: 1px solid rgba(204, 231, 216, 0.92);
    color: #245a47;
    font-size: 0.86rem;
}

.admin-user-plan-strip svg {
    width: 16px;
    height: 16px;
    color: #118856;
    flex-shrink: 0;
}

.admin-user-block-reason-pill {
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(254, 242, 242, 0.92);
    border: 1px solid rgba(254, 202, 202, 0.92);
    color: #b91c1c;
    font-size: 0.86rem;
    line-height: 1.45;
}

.admin-user-block-panel {
    display: grid;
    gap: 12px;
    margin-top: 8px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(254, 202, 202, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(254, 242, 242, 0.98));
}

.admin-user-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 18px;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(10px);
}

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

.admin-user-modal {
    position: relative;
    width: min(100%, 1180px);
    min-height: 0;
    max-height: min(calc(100vh - 36px), 860px);
    margin: auto;
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 16px 18px;
    padding: 20px;
    overflow: auto;
    border-radius: 30px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background:
        radial-gradient(circle at top right, rgba(17, 136, 86, 0.12), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(244, 251, 247, 0.98));
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.22);
}

.admin-user-modal > .subscription-pay-modal-kicker {
    grid-column: 1 / -1;
    width: fit-content;
    margin: 0 42px 0 0;
}

.admin-user-modal-overview {
    grid-column: 1;
    display: grid;
    gap: 12px;
    align-self: start;
}

.admin-user-modal-main {
    grid-column: 2;
    display: grid;
    gap: 18px;
}

.admin-user-modal-head {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 26px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 249, 244, 0.98));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.admin-user-modal-meta {
    min-width: 0;
    width: 100%;
}

.admin-user-modal-meta h2 {
    font-size: 1.45rem;
    margin: 0 0 4px;
}

.admin-user-modal-meta p {
    margin: 0;
}

.admin-user-modal-quick-list {
    display: grid;
    gap: 10px;
}

.admin-user-modal-quick-list span {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background: rgba(255, 255, 255, 0.9);
    color: #334155;
    font-size: 0.88rem;
    line-height: 1.45;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.admin-user-modal-quick-list span strong {
    color: #0f172a;
    font-size: 0.94rem;
    line-height: 1.45;
    word-break: break-word;
}

.admin-user-modal-quick-list svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #118856;
    margin-top: 2px;
}

.admin-user-modal-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
}

.admin-user-modal-details .subscription-pay-detail-row {
    min-height: 110px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.06);
}

.admin-user-modal-details .subscription-pay-detail-row:nth-child(1) {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.9));
}

.admin-user-modal-details .subscription-pay-detail-row:nth-child(2) {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(187, 247, 208, 0.82));
}

.admin-user-modal-details .subscription-pay-detail-row:nth-child(3) {
    background: linear-gradient(180deg, rgba(254, 249, 195, 0.98), rgba(253, 224, 71, 0.58));
}

.admin-user-modal-details .subscription-pay-detail-row:nth-child(4) {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 202, 202, 0.74));
}

.admin-user-modal-details .subscription-pay-detail-row.is-wide {
    grid-column: 1 / -1;
    min-height: 0;
}

.admin-user-modal-details .subscription-pay-detail-row span {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.72);
}

.admin-user-modal-details .subscription-pay-detail-row span svg {
    width: 14px;
    height: 14px;
}

.admin-user-modal-details .subscription-pay-detail-row strong {
    font-size: 1rem;
    line-height: 1.55;
    word-break: break-word;
}

.admin-user-modal-status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background: rgba(255, 255, 255, 0.92);
}

.admin-user-modal-actions {
    display: grid;
    gap: 12px;
}

.admin-user-modal-actions form {
    margin: 0;
}

.admin-user-modal-primary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-user-modal-primary-actions .button,
.admin-user-modal-primary-actions form,
.admin-user-modal-primary-actions form .button {
    width: 100%;
}

.admin-user-modal-status .status-badge {
    width: fit-content;
}

.admin-user-modal-status .button {
    flex: 1 1 100%;
}

.admin-user-modal .subscription-pay-modal-close {
    top: 18px;
    right: 18px;
}

.admin-verify-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.admin-verify-toggle:hover:not(:disabled) {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.admin-verify-toggle.is-on {
    border-color: rgba(37, 99, 235, 0.28);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.99), rgba(219, 234, 254, 0.94));
}

.admin-verify-toggle:disabled {
    opacity: 0.72;
    cursor: wait;
}

.admin-verify-toggle-track {
    position: relative;
    width: 54px;
    height: 30px;
    border-radius: 999px;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.admin-verify-toggle.is-on .admin-verify-toggle-track {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.admin-verify-toggle-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease;
}

.admin-verify-toggle.is-on .admin-verify-toggle-thumb {
    transform: translateX(24px);
}

.admin-verify-toggle-copy {
    display: grid;
    gap: 2px;
}

.admin-verify-toggle-copy strong {
    color: #0f172a;
}

.admin-verify-toggle-copy small {
    color: #64748b;
}

.admin-user-modal-section {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(214, 229, 223, 0.95);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 248, 0.98));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.admin-user-modal-section-head {
    display: grid;
    gap: 4px;
}

.admin-user-block-panel .form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-user-block-panel > form:last-child .button {
    border-radius: 18px;
}

.admin-user-modal-section-head strong {
    color: #0f172a;
    font-size: 1.02rem;
}

.admin-user-modal-section-head span {
    color: #64748b;
    font-size: 0.9rem;
}

.admin-user-modal-section.admin-user-block-panel {
    margin-top: 0;
}

@media (max-width: 1000px) {
    .subscription-hero {
        grid-template-columns: 1fr;
    }

    .admin-blog-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-modal-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .subscription-pay-modal-backdrop {
        align-items: flex-end;
        padding: 12px;
    }

    .subscription-pay-modal {
        width: 100%;
        max-height: min(calc(100vh - 24px), 100%);
        gap: 14px;
        padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 20px 20px;
    }

    .subscription-request-grid {
        grid-template-columns: 1fr;
    }

    .subscription-pay-detail-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .subscription-pay-upload-box {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .subscription-pay-upload-copy {
        justify-items: center;
    }

    .subscription-pay-upload-action {
        width: 100%;
    }

    .subscription-pay-form .form-actions {
        display: flex;
        margin-top: 0;
        position: sticky;
        bottom: 0;
        padding-top: 10px;
        padding-bottom: 2px;
        background: linear-gradient(180deg, rgba(247, 251, 248, 0), rgba(247, 251, 248, 0.96) 34%, rgba(247, 251, 248, 1) 100%);
    }

    .subscription-pay-form .form-actions .button {
        width: 100%;
        justify-content: center;
    }

    .admin-hero {
        padding: 22px 18px;
    }

    .admin-user-card {
        padding: 18px;
    }

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

    .admin-user-detail-list {
        gap: 8px;
    }

    .admin-search-form {
        align-items: stretch;
    }

    .admin-package-settings-grid {
        grid-template-columns: 1fr;
    }

    .admin-plan-feature-options {
        grid-template-columns: 1fr;
    }

    .admin-search-input-wrap {
        flex-basis: 100%;
    }

    .admin-tabs {
        gap: 8px;
    }

    .admin-page-tabs,
    .admin-filter-tabs {
        grid-template-columns: 1fr;
        padding: 10px;
        border-radius: 24px;
    }

    .admin-tab {
        width: 100%;
        justify-content: space-between;
        padding: 14px 15px;
    }

    .admin-request-row {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-request-actions {
        justify-content: flex-start;
    }

    .admin-user-modal {
        width: 100%;
        min-height: 0;
        max-height: calc(100vh - 24px);
        grid-template-columns: 1fr;
        padding: 22px 18px;
        border-radius: 24px;
    }

    .admin-user-modal-details {
        grid-template-columns: 1fr;
    }

    .admin-user-modal-head {
        grid-column: 1;
        align-items: flex-start;
    }

    .admin-user-modal-quick-list,
    .admin-user-modal-details {
        grid-template-columns: 1fr;
    }

    .admin-user-modal-overview,
    .admin-user-modal-main,
    .admin-user-modal-status,
    .admin-user-modal-actions,
    .admin-user-block-panel,
    .admin-user-modal-details {
        grid-column: 1;
    }

    .admin-user-modal-actions {
        grid-template-columns: 1fr;
    }

    .admin-user-modal-primary-actions,
    .admin-user-block-panel .form-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .admin-users-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.compact-editor-form {
    margin-top: 10px;
}

.editor-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.editor-section-nav a,
.editor-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(20, 133, 88, 0.14);
    background: rgba(20, 133, 88, 0.06);
    color: #148558;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.editor-tab-button {
    appearance: none;
}

.editor-tab-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.editor-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.editor-tab-icon svg {
    width: 16px;
    height: 16px;
}

.editor-tab-button::after {
    content: '+';
    display: none;
}

.editor-tab-button.is-active {
    background: linear-gradient(135deg, #24b877, #118856);
    border-color: transparent;
    color: #fff;
}

.editor-section-nav a.is-active {
    background: linear-gradient(135deg, #24b877, #118856);
    border-color: transparent;
    color: #fff;
}

.settings-config-list {
    display: grid;
    gap: 12px;
}

.settings-config-row {
    gap: 14px;
    min-height: 74px;
    padding: 18px 18px 18px 20px;
    align-items: center;
}

.settings-config-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.settings-config-copy strong {
    color: #111827;
    font-size: 0.96rem;
}

.settings-config-copy small {
    color: #6b7280;
    font-size: 0.84rem;
    line-height: 1.55;
}

.settings-config-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: #148558;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.settings-config-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-config-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 50px;
    height: 28px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(203, 213, 225, 0.95);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.14);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.settings-config-knob {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
    transition: transform 0.2s ease;
}

.settings-config-state {
    min-width: 68px;
    text-align: right;
}

.settings-config-toggle input:checked + .settings-config-switch {
    background: linear-gradient(135deg, #24b877, #118856);
    box-shadow: inset 0 1px 3px rgba(17, 136, 86, 0.28);
}

.settings-config-toggle input:checked + .settings-config-switch .settings-config-knob {
    transform: translateX(22px);
}

.editor-save-button.is-saved {
    background: linear-gradient(135deg, #24b877, #118856);
    border-color: transparent;
    color: #fff;
}

.editor-section-card {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #fcfdff);
}

.editor-accordion-toggle {
    display: none;
}

.editor-section-body {
    display: contents;
}

@media (min-width: 801px) {
    .editor-section-card {
        display: none;
    }

    .editor-section-card.is-active {
        display: grid;
    }
}

.editor-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.editor-section-head h3 {
    margin: 0;
    font-size: 1.02rem;
}

.editor-section-head p {
    margin: 4px 0 0;
    max-width: 58ch;
    font-size: 0.88rem;
    color: #768198;
}

.editor-dual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.editor-add-row {
    flex-shrink: 0;
}

.editor-section-mobile-actions {
    display: none;
}

.editor-repeatable-add {
    width: 100%;
    justify-content: center;
}

.profile-editor-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
    margin-bottom: 22px;
}

.profile-image-panel,
.profile-highlight-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #fbfaff);
}

.profile-image-panel {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    padding: 18px;
}

.profile-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image-preview {
    width: 140px;
    height: 140px;
    border-radius: 22px;
    object-fit: cover;
    background: linear-gradient(135deg, #d7deea, #aeb8c8);
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.12);
}

.profile-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    color: #54617d;
}

.profile-image-copy {
    display: grid;
    gap: 10px;
    align-content: start;
}

.profile-image-copy h3,
.profile-highlight-card h3 {
    margin: 0;
    font-size: 1.1rem;
}

.upload-field {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 146px;
    padding: 11px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #24b877, #118856);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
}

.upload-field input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.remove-image-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: #667085;
}

.remove-image-toggle input {
    width: 16px;
    height: 16px;
}

.profile-image-copy small {
    color: #8b93a7;
}

.profile-highlight-card {
    padding: 18px;
    display: grid;
    gap: 12px;
    align-content: start;
    background:
        radial-gradient(circle at top right, rgba(24, 165, 102, 0.18), transparent 35%),
        linear-gradient(180deg, #10241b, #163126);
    color: #fff;
}

.profile-highlight-top,
.profile-highlight-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-highlight-badge,
.profile-highlight-status {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.profile-highlight-badge {
    background: rgba(255, 255, 255, 0.12);
}

.profile-highlight-status {
    background: rgba(123, 255, 179, 0.12);
    color: #9af3b3;
}

.profile-highlight-card p {
    color: rgba(255, 255, 255, 0.78);
}

.profile-highlight-meta span {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.86);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.form-grid.two {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid.stats-grid {
    grid-template-columns: repeat(4, 1fr);
}

.form-grid label,
.editor-form > label {
    display: grid;
    gap: 8px;
}

.form-grid span,
.editor-form > label span,
.section-title {
    font-weight: 600;
}

.editor-form label > span {
    color: #344256;
    font-size: 0.84rem;
}

.section-title {
    margin: 28px 0 14px;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid #dfdfef;
    border-radius: 12px;
    padding: 11px 13px;
    background: #fcfdfd;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.92rem;
}

input::placeholder,
textarea::placeholder {
    color: #a0a9bb;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #74cfa2;
    box-shadow: 0 0 0 3px rgba(24, 165, 102, 0.12);
}

textarea {
    resize: vertical;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 42px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #6b7280 50%),
        linear-gradient(135deg, #6b7280 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.field-required {
    color: #dc2626;
    font-weight: 800;
}

label.field-invalid > span,
.field-invalid .tag-editor-head h3,
.field-invalid + .button,
.field-invalid strong {
    color: #dc2626;
}

input.field-invalid,
textarea.field-invalid,
select.field-invalid,
.tag-editor-card.field-invalid,
.repeatable-block.field-invalid {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12) !important;
}

.tag-editor-card.field-invalid,
.repeatable-block.field-invalid {
    border-radius: 18px;
    background: rgba(254, 242, 242, 0.72);
}

.full {
    grid-column: 1 / -1;
}

.toggle-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dfdfef;
    border-radius: 14px;
    padding: 0 16px;
    background: #fbfbfe;
}

.toggle-row input {
    width: 22px;
    height: 22px;
    box-shadow: none;
}

.repeatable-block {
    display: grid;
    gap: 14px;
}

.repeatable-item {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fcfcff;
}

.repeatable-item-experience {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border-color: #dce9f3;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.repeatable-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.repeatable-item-top strong {
    color: #182231;
    font-size: 0.92rem;
}

.repeatable-remove {
    min-width: 102px;
}

.repeatable-remove-icon {
    width: 34px;
    height: 34px;
    border: 1px solid #f2c7cf;
    border-radius: 12px;
    background: #fff5f7;
    color: #c13f59;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 34px;
}

.add-row {
    margin-top: 14px;
}

.form-actions {
    margin-top: 28px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.panel-footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.template-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.compact {
    padding: 18px;
}

.completion-ring {
    width: 112px;
    height: 112px;
    margin: 14px auto;
    border-radius: 50%;
    background: conic-gradient(var(--primary) calc(var(--completion, 85) * 1%), #ecebfb 0);
    display: grid;
    place-items: center;
}

.completion-value {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    font-weight: 800;
}

.check-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.check-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.check-item.done strong {
    color: var(--success);
}

.check-mark {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.premium-card {
    background: linear-gradient(180deg, #ffffff, #f4f0ff);
}

.premium-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(111, 76, 255, 0.12);
    color: var(--primary-dark);
    font-size: 0.74rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.mini-public-card {
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #10241b, #173228);
    color: #fff;
    display: grid;
    gap: 8px;
}

.mini-avatar {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #30c584, #0f8d57);
}

.mini-avatar-image {
    object-fit: cover;
}

.recent-list {
    margin-top: 12px;
}

.recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
}

.quick-link-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.quick-link-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #faf9ff);
    font-weight: 700;
    color: var(--text);
    font-size: 0.94rem;
}

.quick-link-card span {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.live-people-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.live-people-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #fafcff);
    color: var(--text);
}

.live-people-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #30c584, #0f8d57);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.live-people-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.live-people-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.live-people-copy strong,
.live-people-copy span,
.live-people-copy small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-people-copy span {
    color: var(--muted);
    font-size: 0.88rem;
}

.live-people-copy small {
    color: var(--muted);
    font-size: 0.78rem;
}

.live-people-open {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.live-profile-summary-list {
    margin-top: 18px;
}

.live-profile-action-row {
    margin-top: 18px;
}

.discover-owner-panel .editor-form {
    margin-top: 16px;
}

.discover-live-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    gap: 18px;
    align-items: stretch;
}

.discover-profile-spotlight,
.discover-live-controls {
    border-radius: 24px;
    border: 1px solid rgba(220, 228, 236, 0.95);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}

.discover-profile-spotlight {
    display: grid;
    gap: 16px;
    padding: 20px;
    background:
        linear-gradient(180deg, rgba(9, 14, 28, 0.08), rgba(9, 14, 28, 0)),
        radial-gradient(circle at top right, rgba(129, 140, 248, 0.18), transparent 26%),
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.18), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.98));
    position: relative;
    overflow: hidden;
}

.discover-profile-spotlight::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 88px;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.82), rgba(79, 70, 229, 0.45)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%);
    pointer-events: none;
}

.discover-profile-spotlight > * {
    position: relative;
    z-index: 1;
}

.discover-profile-spotlight-top {
    display: flex;
    gap: 16px;
    align-items: center;
}

.discover-profile-spotlight-avatar {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, #dce6f3, #c8d4e6);
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    flex: 0 0 84px;
    border: 4px solid rgba(255, 255, 255, 0.96);
    box-shadow:
        0 16px 30px rgba(15, 23, 42, 0.18),
        0 0 0 4px rgba(244, 114, 182, 0.22),
        0 0 0 8px rgba(129, 140, 248, 0.12);
}

.discover-profile-spotlight-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.discover-profile-spotlight-copy {
    display: grid;
    gap: 6px;
}

.discover-profile-spotlight-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
}

.discover-profile-spotlight-copy p,
.discover-profile-spotlight-summary {
    margin: 0;
    color: #647082;
    line-height: 1.75;
}

.discover-profile-spotlight-pills {
    padding: 0;
}

.discover-profile-spotlight-pills .profile-directory-pill {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

.discover-story-kicker,
.profile-directory-story-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
    color: #111827;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.discover-story-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
    box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.12);
}

.discover-story-stats,
.profile-directory-story-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.discover-story-stat,
.profile-directory-story-stat,
.discover-story-detail-item,
.profile-directory-detail-item {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.discover-story-stat strong,
.profile-directory-story-stat strong,
.discover-story-detail-item strong,
.profile-directory-detail-item strong {
    color: #111827;
    font-size: 0.88rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.discover-story-stat span,
.profile-directory-story-stat span,
.discover-story-detail-item span,
.profile-directory-detail-item span {
    color: #7b8798;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.discover-story-detail-list,
.profile-directory-detail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.discover-profile-spotlight-actions .button {
    min-height: 46px;
}

.discover-profile-spotlight-actions,
.discover-owner-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.discover-live-controls {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 20px;
}

.discover-toggle-row {
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.95);
}

.discover-toggle-row span {
    font-weight: 700;
    color: #111827;
}

.discover-live-controls p {
    margin: 0;
    color: #647082;
    font-size: 0.9rem;
    line-height: 1.75;
}

.discover-owner-links a {
    color: #148558;
    font-size: 0.9rem;
    font-weight: 700;
}

.profiles-search-form-embedded {
    margin-top: 16px;
}

@media (min-width: 801px) {
    .dashboard-page.discover-page .dashboard-layout {
        height: 100vh;
        overflow: hidden;
    }

    .dashboard-page.discover-page .sidebar {
        height: 100vh;
        overflow: hidden;
    }

    .dashboard-page.discover-page .dashboard-main {
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 28px;
    }

    .dashboard-page.discover-page .discover-results-panel {
        overflow: visible;
    }

    .dashboard-page.discover-page .profiles-search-form-embedded {
        position: static;
        top: auto;
        z-index: auto;
        margin-top: 0;
        margin-bottom: 14px;
        padding: 14px;
        border: 1px solid rgba(219, 227, 237, 0.95);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
        backdrop-filter: none;
    }
}

.tag-editor-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #fbfefd);
    padding: 16px;
}

.tag-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tag-editor-head h3 {
    margin: 0 0 4px;
    font-size: 1.02rem;
}

.tag-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    min-height: 56px;
    border: 1px solid #dbe8e1;
    border-radius: 14px;
    padding: 10px;
    background: #fcfefd;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ccebd8;
    background: #ebfbf2;
    color: #0f7f4c;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.tag-chip strong {
    font-size: 0.95rem;
    line-height: 1;
}

.tag-empty {
    color: #94a3b8;
    font-size: 0.88rem;
}

.tag-input {
    border: 0;
    box-shadow: none !important;
    background: transparent;
    min-width: 180px;
    flex: 1 1 180px;
    padding: 6px 4px;
}

.tag-hidden-textarea {
    display: none;
}

.helper-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.helper-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid #e4efe9;
    border-radius: 14px;
    background: #f9fdfb;
}

.helper-card strong {
    color: #1d7f52;
    font-size: 0.9rem;
}

.helper-card span {
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.55;
}

.no-print {
    display: block;
}

.public-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.public-page {
    --cv-accent: #25a96b;
    --cv-accent-dark: #118856;
    --cv-accent-line: #b8e3cb;
    --cv-accent-rgb: 37, 169, 107;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(var(--cv-accent-rgb), 0.1), transparent 20%),
        linear-gradient(180deg, #f7fcf9 0%, #f3f8f5 100%);
}

.public-page.template-minimal {
    --cv-accent: #6b8fc0;
    --cv-accent-dark: #456a9d;
    --cv-accent-line: #cedcf0;
    --cv-accent-rgb: 107, 143, 192;
}

.public-page.template-executive {
    --cv-accent: #d9485d;
    --cv-accent-dark: #172026;
    --cv-accent-line: #d8dde3;
    --cv-accent-rgb: 217, 72, 93;
}

.public-page.template-modern {
    --cv-accent: #4b5563;
    --cv-accent-dark: #111827;
    --cv-accent-line: #d6d9de;
    --cv-accent-rgb: 75, 85, 99;
}

.public-page.template-monochrome {
    --cv-accent: #4b5563;
    --cv-accent-dark: #111111;
    --cv-accent-line: #d9d9d9;
    --cv-accent-rgb: 75, 85, 99;
}

.public-page.template-aurora {
    --cv-accent: #7c3aed;
    --cv-accent-dark: #2f3f86;
    --cv-accent-line: #d9ddfb;
    --cv-accent-rgb: 124, 58, 237;
}

.public-page.template-summit {
    --cv-accent: #8b5e34;
    --cv-accent-dark: #4f3a24;
    --cv-accent-line: #eadfce;
    --cv-accent-rgb: 139, 94, 52;
}

.cv-accent-blue {
    --cv-accent: #2563eb;
    --cv-accent-dark: #1d4ed8;
    --cv-accent-line: #bfdbfe;
    --cv-accent-rgb: 37, 99, 235;
}

.cv-accent-black {
    --cv-accent: #111827;
    --cv-accent-dark: #020617;
    --cv-accent-line: #cbd5e1;
    --cv-accent-rgb: 17, 24, 39;
}

.cv-accent-red {
    --cv-accent: #dc2626;
    --cv-accent-dark: #b91c1c;
    --cv-accent-line: #fecaca;
    --cv-accent-rgb: 220, 38, 38;
}

.cv-accent-green {
    --cv-accent: #16a34a;
    --cv-accent-dark: #15803d;
    --cv-accent-line: #bbf7d0;
    --cv-accent-rgb: 22, 163, 74;
}

.cv-accent-pink {
    --cv-accent: #ec4899;
    --cv-accent-dark: #db2777;
    --cv-accent-line: #fbcfe8;
    --cv-accent-rgb: 236, 72, 153;
}

.public-profile-page {
    min-height: 100vh;
}

.profile-app-panel {
    padding: 0;
    overflow: hidden;
}

.public-profile-page-app .public-profile-hero {
    padding: 22px 0 10px;
}

.public-profile-page-app .public-profile-main-wrap {
    padding-bottom: 22px;
}

.profile-app-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(223, 229, 238, 0.92);
}

.profile-app-pagination .button {
    min-width: 180px;
    justify-content: center;
}

.public-site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
    background: rgba(247, 252, 249, 0.84);
    border-bottom: 1px solid rgba(214, 232, 222, 0.9);
}

.public-site-header-inner,
.public-site-header-actions,
.public-profile-hero-actions,
.public-profile-socials {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.public-site-header-inner {
    justify-content: space-between;
    min-height: 78px;
}

.public-profile-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.public-profile-hero {
    padding: 34px 0 14px;
}

.public-profile-hero-card {
    display: grid;
    gap: 24px;
    padding: 28px;
    border-radius: 30px;
    border: 1px solid rgba(220, 233, 226, 0.95);
    background:
        radial-gradient(circle at top right, rgba(79, 70, 229, 0.1), transparent 28%),
        radial-gradient(circle at top left, rgba(24, 165, 102, 0.11), transparent 30%),
        rgba(255, 255, 255, 0.97);
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.08);
}

.public-profile-hero-main {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.public-profile-avatar-wrap {
    width: 172px;
    height: 172px;
    padding: 8px;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(24, 165, 102, 0.18), rgba(79, 70, 229, 0.2)),
        #f4f8fc;
    box-shadow:
        0 22px 42px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.72) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.public-profile-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    background: #eef2f7;
}

.public-profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #6ea789, #465b9f);
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.public-profile-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(24, 165, 102, 0.1);
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.public-verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.public-verification-badge.is-verified {
    background: rgba(24, 165, 102, 0.1);
    color: #0f7f4c;
    border: 1px solid rgba(184, 227, 203, 0.95);
}

.public-verification-badge.is-unverified {
    background: rgba(245, 158, 11, 0.12);
    color: #a16207;
    border: 1px solid rgba(253, 230, 138, 0.95);
}

.public-visibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.public-visibility-badge.is-live {
    background: rgba(14, 165, 164, 0.12);
    color: #0f766e;
    border: 1px solid rgba(153, 246, 228, 0.95);
}

.public-visibility-badge.is-private {
    background: rgba(148, 163, 184, 0.16);
    color: #334155;
    border: 1px solid rgba(203, 213, 225, 0.95);
}

.public-verification-icon,
.public-fact-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.public-fact-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(24, 165, 102, 0.1);
    border: 1px solid rgba(184, 227, 203, 0.95);
    color: #148558;
    flex: 0 0 22px;
}

.public-verification-icon svg,
.public-fact-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.public-fact-icon svg {
    width: 14px;
    height: 14px;
}

.public-profile-copy h1 {
    margin: 14px 0 6px;
    color: #111827;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.public-profile-copy {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 10px;
}

.public-profile-role {
    margin: 0;
    color: #2f4a3d;
    font-size: 1rem;
    font-weight: 700;
}

.public-profile-about {
    max-width: 68ch;
    margin: 0;
    color: #617082;
    font-size: 0.97rem;
    line-height: 1.85;
    text-align: justify;
    text-justify: inter-word;
    text-wrap: pretty;
    hyphens: auto;
}

.public-profile-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 760px);
    align-items: stretch;
}

.public-profile-facts .public-fact-pill,
.public-profile-socials a,
.public-info-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(223, 229, 238, 0.95);
    color: #526173;
    font-size: 0.8rem;
    font-weight: 600;
}

.public-profile-facts .public-fact-pill {
    gap: 10px;
    padding: 10px 14px 10px 11px;
    min-height: 54px;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.public-fact-text {
    display: grid;
    gap: 2px;
    line-height: 1.2;
    min-width: 0;
}

.public-fact-text small {
    color: #7a8596;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.public-fact-text span {
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.public-profile-socials a {
    text-decoration: none;
    justify-content: flex-start;
    line-height: 1.1;
    min-height: 48px;
    padding-inline: 14px;
    flex: 0 1 auto;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.public-profile-socials-rich a {
    background: #fff;
}

.public-profile-social-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    color: #364152;
}

.public-profile-social-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.public-profile-main-wrap {
    padding-bottom: 34px;
}

.public-profile-hero-actions {
    align-items: stretch;
    gap: 12px;
    justify-content: flex-start;
    padding-top: 4px;
    border-top: 1px solid rgba(223, 229, 238, 0.9);
}

.public-profile-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    flex: 1 1 340px;
    min-width: min(100%, 340px);
}

.public-profile-search-top {
    width: 100%;
    margin-bottom: 2px;
}

.public-profile-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.public-profile-search-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 0.95rem;
}

.public-profile-search-field input::placeholder {
    color: #64748b;
}

.public-profile-search-icon {
    color: #118856;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.public-profile-search-icon svg {
    width: 18px;
    height: 18px;
}

.public-profile-search-button {
    min-width: 108px;
}

.public-profile-hero-actions .button,
.public-profile-hero-actions button {
    min-height: 48px;
    padding-inline: 16px;
    justify-content: center;
    flex: 0 1 auto;
}

.public-profile-content-grid {
    display: block;
}

.public-profile-content-grid.has-banner-ads {
    display: grid;
    grid-template-columns: minmax(0, 820px) minmax(260px, 300px);
    justify-content: center;
    gap: 24px;
    align-items: start;
}

.public-profile-main {
    min-width: 0;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.public-profile-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 24px;
    align-self: start;
}

.public-profile-banner-ad {
    display: grid;
    gap: 12px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(220, 228, 236, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 248, 252, 0.97));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.public-profile-banner-ad-primary {
    background:
        radial-gradient(circle at top right, rgba(36, 184, 119, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 252, 245, 0.98));
}

.public-profile-banner-ad-secondary {
    background:
        radial-gradient(circle at top right, rgba(91, 63, 243, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 255, 0.98));
}

.public-profile-banner-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.06);
    color: #475569;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-profile-banner-ad strong {
    color: #111827;
    font-size: 1.1rem;
    line-height: 1.25;
}

.public-profile-banner-ad p {
    margin: 0;
    color: #647082;
    font-size: 0.92rem;
    line-height: 1.7;
}

.public-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.public-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(243, 249, 246, 0.99));
    border: 1px solid rgba(220, 228, 236, 0.95);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

.public-stat-icon,
.public-section-icon,
.public-inline-icon,
.public-contact-icon,
.public-timeline-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.public-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: rgba(24, 165, 102, 0.1);
    color: #148558;
}

.public-stat-icon svg,
.public-section-icon svg,
.public-inline-icon svg,
.public-contact-icon svg,
.public-timeline-dot svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.public-stat-card strong {
    display: block;
    color: #111827;
    font-size: 1.15rem;
}

.public-stat-card span:last-child {
    color: #647082;
    font-size: 0.84rem;
    font-weight: 600;
}

.public-profile-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-content-card {
    display: grid;
    gap: 16px;
    min-width: 0;
    border-radius: 24px;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 253, 0.98));
    border: 1px solid rgba(220, 228, 236, 0.95);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

.public-content-card-wide {
    grid-column: 1 / -1;
}

.public-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.public-content-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #111827;
    font-size: 1.08rem;
}

.public-section-icon {
    color: #148558;
}

.public-content-card p {
    margin: 0;
    max-width: 72ch;
    color: #647082;
    line-height: 1.82;
    text-align: justify;
    text-justify: inter-word;
    text-wrap: pretty;
    hyphens: auto;
}

.public-list-stack,
.public-mini-list {
    display: grid;
    gap: 12px;
}

.public-contact-grid {
    display: grid;
    gap: 12px;
}

.public-contact-card,
.public-reference-card {
    display: flex;
    gap: 14px;
    padding: 15px 16px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.95);
}

.public-contact-card strong,
.public-reference-card strong {
    display: block;
    color: #1f2937;
    font-size: 0.92rem;
}

.public-contact-card span,
.public-reference-card span,
.public-reference-card p {
    color: #647082;
}

.public-contact-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 14px;
    background: rgba(24, 165, 102, 0.1);
    color: #148558;
}

.public-list-item,
.public-mini-list div,
.public-project-card {
    display: grid;
    gap: 4px;
    padding: 14px 15px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.95);
}

.public-list-item strong,
.public-project-card strong {
    color: #1f2937;
    font-size: 0.96rem;
}

.public-list-item span,
.public-list-item small,
.public-mini-list div,
.public-project-card p {
    color: #647082;
    line-height: 1.75;
}

.public-mini-list div,
.public-reference-card p {
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-chip-cloud,
.public-project-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-chip-cloud span {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(24, 165, 102, 0.08);
    border: 1px solid rgba(184, 227, 203, 0.95);
    color: #215f45;
    font-size: 0.84rem;
    font-weight: 700;
}

.public-project-card {
    width: calc(50% - 5px);
    min-width: min(100%, 220px);
}

.public-timeline {
    position: relative;
    display: grid;
    gap: 16px;
}

.public-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 16px;
    width: 2px;
    background: linear-gradient(180deg, rgba(20, 133, 88, 0.25), rgba(100, 116, 139, 0.15));
}

.public-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.public-timeline-dot {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #24b877, #118856);
    color: #fff;
    box-shadow: 0 10px 18px rgba(17, 136, 86, 0.18);
}

.public-timeline-card {
    padding: 18px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.95);
}

.public-timeline-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

.public-timeline-top strong {
    display: block;
    color: #111827;
    font-size: 0.98rem;
}

.public-timeline-top span,
.public-timeline-top small,
.public-timeline-card p {
    color: #647082;
    line-height: 1.75;
}

.public-timeline-top small {
    white-space: nowrap;
    font-weight: 700;
}

.public-timeline-card p {
    margin: 10px 0 0;
}

.public-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.public-reference-card {
    flex-direction: column;
}

.public-inline-icon {
    color: #148558;
}

.public-like-button {
    gap: 8px;
}

.public-like-button strong {
    min-width: 24px;
    text-align: center;
}

.public-action-button {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.public-action-button .button-icon {
    width: 16px;
    height: 16px;
}

.public-action-button .button-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.public-like-button,
.public-share-button {
    background: #ffffff;
    border-color: rgba(252, 204, 214, 0.9);
    color: #be123c;
}

.public-like-button.is-liked {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border-color: rgba(254, 205, 211, 0.95);
    color: #be123c;
}

.public-share-button {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: rgba(147, 197, 253, 0.95);
    color: #1d4ed8;
}

.public-download-button {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    border-color: rgba(17, 24, 39, 0.92);
    color: #ffffff;
}

.public-action-button:hover,
.public-action-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
}

.public-download-button:hover,
.public-download-button:focus-visible {
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
    color: #ffffff;
}

.public-download-label-full {
    display: none;
}

.public-download-label-short {
    display: inline;
}

@media (min-width: 801px) {
    .public-profile-hero-actions {
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .public-profile-hero-actions .button,
    .public-profile-hero-actions button {
        min-height: 40px;
        padding-inline: 12px;
        flex: 0 0 auto;
        white-space: nowrap;
        border-radius: 12px;
    }

    .public-profile-search {
        flex: 1 0 320px;
        min-width: 320px;
    }

    .public-action-button {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 0.8rem;
        letter-spacing: 0.01em;
        gap: 6px;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
        white-space: nowrap;
    }

    .public-action-button .button-icon {
        width: 14px;
        height: 14px;
    }

    .public-like-button strong {
        min-width: 24px;
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(190, 24, 93, 0.1);
        color: inherit;
        font-size: 0.74rem;
    }

    .public-owner-action,
    .public-share-button {
        box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
    }

    .public-download-button {
        padding-inline: 11px;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
    }

    .public-profile-hero-actions .public-download-button {
        width: auto;
        min-width: 0;
        max-width: max-content;
        flex: 0 0 auto;
    }

    .public-profile-hero-actions::-webkit-scrollbar {
        display: none;
    }
}

.public-dashboard-layout {
    height: 100vh;
    overflow: hidden;
}

.public-dashboard-main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.public-dashboard-layout .sidebar {
    overflow-y: auto;
}

.public-theme-panel {
    position: sticky;
    top: 24px;
    z-index: 8;
    display: grid;
    gap: 12px;
    padding: 16px 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(214, 232, 222, 0.95);
    box-shadow: 0 18px 36px rgba(18, 24, 39, 0.08);
    width: 280px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.public-theme-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #688071;
    text-align: left;
}

.template-switch-label {
    margin-top: 2px;
}

.public-panel-section {
    display: grid;
    gap: 10px;
}

.public-panel-head {
    display: grid;
    gap: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(214, 232, 222, 0.95);
}

.public-panel-head strong {
    color: #1d2e27;
    font-size: 0.98rem;
}

.public-panel-head span {
    color: #708278;
    font-size: 0.78rem;
    line-height: 1.45;
}

.public-panel-actions {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 2px 0 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
}

.public-download-button {
    width: 100%;
    justify-content: center;
    font-size: 0.88rem;
    min-height: 42px;
}

.public-open-dashboard {
    width: 100%;
    justify-content: center;
    min-height: 40px;
}

.public-panel-section-scroll {
    min-height: 0;
}

.public-color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.theme-swatch {
    width: 100%;
    height: 34px;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    appearance: none;
    background: linear-gradient(135deg, #25a96b, #118856);
    box-shadow: 0 10px 18px rgba(17, 136, 86, 0.16);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.theme-swatch.is-active {
    border-color: #163126;
    transform: scale(1.06);
}

.theme-swatch-blue {
    background: linear-gradient(135deg, #2f80ed, #1d4ed8);
    box-shadow: 0 10px 18px rgba(29, 78, 216, 0.18);
}

.theme-swatch-violet {
    background: linear-gradient(135deg, #8b5cf6, #5b21b6);
    box-shadow: 0 10px 18px rgba(91, 33, 182, 0.18);
}

.theme-swatch-amber {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    box-shadow: 0 10px 18px rgba(180, 83, 9, 0.18);
}

.theme-swatch-rose {
    background: linear-gradient(135deg, #fb7185, #be123c);
    box-shadow: 0 10px 18px rgba(190, 18, 60, 0.18);
}

.theme-swatch-slate {
    background: linear-gradient(135deg, #64748b, #1e293b);
    box-shadow: 0 10px 18px rgba(30, 41, 59, 0.18);
}

.theme-swatch-cyan {
    background: linear-gradient(135deg, #06b6d4, #155e75);
    box-shadow: 0 10px 18px rgba(21, 94, 117, 0.18);
}

.theme-swatch-plum {
    background: linear-gradient(135deg, #a855f7, #6b21a8);
    box-shadow: 0 10px 18px rgba(107, 33, 168, 0.18);
}

.public-template-switch {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}

.public-template-switch::-webkit-scrollbar {
    width: 8px;
}

.public-template-switch::-webkit-scrollbar-thumb {
    background: rgba(17, 136, 86, 0.18);
    border-radius: 999px;
}

.template-switch-chip {
    display: grid;
    grid-template-columns: 86px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px;
    min-width: 0;
    border-radius: 18px;
    border: 1px solid rgba(214, 232, 222, 0.95);
    background: linear-gradient(180deg, #fff, #fbfefc);
    color: #465463;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: left;
    transition: all 0.2s ease;
}

.template-switch-chip:hover,
.template-switch-chip.active {
    border-color: rgba(var(--cv-accent-rgb), 0.38);
    background: rgba(var(--cv-accent-rgb), 0.1);
    color: var(--cv-accent-dark);
    box-shadow: inset 0 0 0 1px rgba(var(--cv-accent-rgb), 0.12);
}

.template-switch-preview {
    height: 66px;
    margin-bottom: 0;
    border-radius: 10px;
}

.template-switch-preview .template-lines {
    inset: 10px;
    border-radius: 8px;
}

.template-switch-copy {
    display: grid;
    gap: 4px;
}

.template-switch-text {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: left;
}

.template-switch-copy small {
    color: #7b8794;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.35;
}

.public-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(14px);
    background: rgba(247, 252, 249, 0.8);
    border-bottom: 1px solid rgba(209, 231, 219, 0.9);
}

.public-topbar-inner {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.public-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
}

.public-brand-mark {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #24b877, #118856);
    color: #fff;
    box-shadow: 0 10px 20px rgba(17, 136, 86, 0.18);
}

.public-resume-shell::-webkit-scrollbar,
.public-dashboard-layout .sidebar::-webkit-scrollbar {
    width: 10px;
}

.public-resume-shell::-webkit-scrollbar-thumb,
.public-dashboard-layout .sidebar::-webkit-scrollbar-thumb {
    background: rgba(17, 136, 86, 0.24);
    border-radius: 999px;
}

.public-page:not(.print-mode) {
    overflow-x: hidden;
    overflow-y: auto;
}

.pdf-export-mode .public-theme-panel,
.pdf-export-mode .sidebar {
    visibility: hidden;
}

.pdf-export-mode .dashboard-layout,
.print-mode .dashboard-layout {
    grid-template-columns: 1fr;
}

.pdf-export-mode .dashboard-main,
.pdf-export-mode .public-dashboard-main,
.pdf-export-mode .resume-stage,
.pdf-export-mode .public-resume-shell,
.print-mode .dashboard-main,
.print-mode .public-dashboard-main,
.print-mode .resume-stage,
.print-mode .public-resume-shell {
    padding: 0;
    margin: 0;
    overflow: visible;
}

.pdf-export-mode .resume-sheet,
.print-mode .resume-sheet {
    width: 794px;
    height: 1123px;
    min-height: 1123px;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.pdf-export-mode .resume-block + .resume-block,
.print-mode .resume-block + .resume-block {
    margin-top: 22px;
}

.pdf-export-mode .resume-copy,
.pdf-export-mode .resume-bullet-list,
.pdf-export-mode .entry-bullets,
.pdf-export-mode .contact-item,
.pdf-export-mode .reference-card span,
.print-mode .resume-copy,
.print-mode .resume-bullet-list,
.print-mode .entry-bullets,
.print-mode .contact-item,
.print-mode .reference-card span {
    font-size: 0.76rem;
    line-height: 1.32;
}

.pdf-export-mode .resume-bullet-list,
.pdf-export-mode .entry-bullets,
.print-mode .resume-bullet-list,
.print-mode .entry-bullets {
    padding-left: 14px;
}

.pdf-export-mode .entry-top span,
.pdf-export-mode .modern-education-item span,
.pdf-export-mode .stack-period,
.print-mode .entry-top span,
.print-mode .modern-education-item span,
.print-mode .stack-period {
    font-size: 0.68rem;
}

.pdf-export-mode .reference-grid,
.print-mode .reference-grid {
    gap: 10px;
}

.pdf-export-mode .resume-avatar-circle,
.print-mode .resume-avatar-circle {
    width: 108px;
    height: 108px;
    border-width: 3px;
}

.pdf-export-mode .resume-avatar-square,
.print-mode .resume-avatar-square {
    width: 94px;
    height: 94px;
    border-radius: 18px;
    font-size: 2.1rem;
}

.pdf-export-mode .resume-minimal,
.print-mode .resume-minimal {
    min-height: 1123px;
    grid-template-columns: 31% 69%;
}

.pdf-export-mode .minimal-side,
.print-mode .minimal-side {
    padding: 20px 16px 18px;
}

.pdf-export-mode .resume-name-block,
.print-mode .resume-name-block {
    margin-bottom: 14px;
}

.pdf-export-mode .resume-name-block h1,
.print-mode .resume-name-block h1 {
    font-size: 1.68rem;
}

.pdf-export-mode .resume-name-block p,
.print-mode .resume-name-block p {
    font-size: 0.8rem;
}

.pdf-export-mode .minimal-side .resume-block h2,
.pdf-export-mode .resume-heading-line,
.print-mode .minimal-side .resume-block h2,
.print-mode .resume-heading-line {
    font-size: 1rem;
}

.pdf-export-mode .minimal-main,
.print-mode .minimal-main {
    padding: 20px 18px;
}

.pdf-export-mode .resume-modern,
.print-mode .resume-modern {
    min-height: 1123px;
    padding: 20px 22px 22px;
}

.pdf-export-mode .modern-header,
.print-mode .modern-header {
    grid-template-columns: 92px 1fr;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom-width: 3px;
}

.pdf-export-mode .modern-header h1,
.print-mode .modern-header h1 {
    font-size: 1.72rem;
    letter-spacing: 0.09em;
}

.pdf-export-mode .modern-header p,
.print-mode .modern-header p {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

.pdf-export-mode .spaced-heading,
.print-mode .spaced-heading {
    font-size: 0.94rem;
}

.pdf-export-mode .modern-summary,
.print-mode .modern-summary {
    margin-top: 10px;
}

.pdf-export-mode .modern-grid,
.print-mode .modern-grid {
    gap: 14px;
    margin-top: 10px;
}

.pdf-export-mode .resume-executive,
.print-mode .resume-executive {
    min-height: 1123px;
    padding: 22px 24px 14px;
}

.pdf-export-mode .executive-header,
.print-mode .executive-header {
    grid-template-columns: 94px 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.pdf-export-mode .executive-name h1,
.print-mode .executive-name h1 {
    font-size: 2rem;
    color: #182129;
}

.pdf-export-mode .executive-name p,
.print-mode .executive-name p {
    font-size: 0.82rem;
}

.pdf-export-mode .executive-accent,
.print-mode .executive-accent {
    width: 92px;
    height: 6px;
    margin-top: 16px;
}

.pdf-export-mode .executive-grid,
.print-mode .executive-grid {
    grid-template-columns: 28% 72%;
    gap: 14px;
}

.pdf-export-mode .executive-side,
.print-mode .executive-side {
    padding-right: 8px;
}

.pdf-export-mode .resume-heading-rule,
.print-mode .resume-heading-rule {
    font-size: 0.96rem;
    color: #182129;
}

.pdf-export-mode .executive-timeline,
.print-mode .executive-timeline {
    gap: 10px;
}

.pdf-export-mode .plain-reference,
.print-mode .plain-reference {
    padding-top: 8px;
}

.pdf-export-mode .resume-aurora,
.print-mode .resume-aurora {
    padding: 12px;
}

.pdf-export-mode .aurora-identity,
.pdf-export-mode .aurora-summary-card,
.pdf-export-mode .aurora-panel,
.pdf-export-mode .aurora-stat-card,
.print-mode .aurora-identity,
.print-mode .aurora-summary-card,
.print-mode .aurora-panel,
.print-mode .aurora-stat-card {
    border-radius: 16px;
    box-shadow: none;
}

.pdf-export-mode .aurora-identity,
.print-mode .aurora-identity {
    grid-template-columns: 82px 1fr;
    gap: 10px;
    padding: 12px;
}

.pdf-export-mode .aurora-avatar,
.print-mode .aurora-avatar {
    width: 82px;
    height: 82px;
    border-radius: 16px;
}

.pdf-export-mode .aurora-identity h1,
.pdf-export-mode .ledger-side h1,
.pdf-export-mode .nova-profile-card h1,
.pdf-export-mode .portfolio-brand-card h1,
.pdf-export-mode .summit-header h1,
.print-mode .aurora-identity h1,
.print-mode .ledger-side h1,
.print-mode .nova-profile-card h1,
.print-mode .portfolio-brand-card h1,
.print-mode .summit-header h1 {
    font-size: 1.48rem;
}

.pdf-export-mode .aurora-identity p,
.pdf-export-mode .ledger-side p,
.pdf-export-mode .nova-profile-card p,
.pdf-export-mode .portfolio-brand-card p,
.pdf-export-mode .summit-header p,
.print-mode .aurora-identity p,
.print-mode .ledger-side p,
.print-mode .nova-profile-card p,
.print-mode .portfolio-brand-card p,
.print-mode .summit-header p {
    font-size: 0.76rem;
}

.pdf-export-mode .aurora-summary-card,
.print-mode .aurora-summary-card {
    padding: 12px;
}

.pdf-export-mode .aurora-stats,
.print-mode .aurora-stats {
    gap: 6px;
    margin: 8px 0;
}

.pdf-export-mode .aurora-stat-card,
.print-mode .aurora-stat-card {
    padding: 8px;
}

.pdf-export-mode .aurora-stat-card strong,
.print-mode .aurora-stat-card strong {
    font-size: 0.95rem;
}

.pdf-export-mode .aurora-grid,
.print-mode .aurora-grid {
    gap: 10px;
}

.pdf-export-mode .aurora-main,
.pdf-export-mode .aurora-side,
.print-mode .aurora-main,
.print-mode .aurora-side {
    gap: 10px;
}

.pdf-export-mode .aurora-panel,
.print-mode .aurora-panel {
    padding: 12px;
}

.pdf-export-mode .resume-ledger,
.print-mode .resume-ledger {
    min-height: 1123px;
    grid-template-columns: 228px 1fr;
}

.pdf-export-mode .ledger-side-inner,
.print-mode .ledger-side-inner {
    padding: 24px 18px;
    gap: 16px;
}

.pdf-export-mode .ledger-avatar,
.pdf-export-mode .portfolio-avatar,
.print-mode .ledger-avatar,
.print-mode .portfolio-avatar {
    width: 104px;
    height: 104px;
    border-radius: 20px;
}

.pdf-export-mode .ledger-main,
.print-mode .ledger-main {
    padding: 22px;
    gap: 14px;
}

.pdf-export-mode .ledger-panel,
.print-mode .ledger-panel {
    padding: 16px;
    border-radius: 16px;
    box-shadow: none;
}

.pdf-export-mode .ledger-panel h2,
.print-mode .ledger-panel h2 {
    font-size: 1.22rem;
}

.pdf-export-mode .resume-nova,
.print-mode .resume-nova {
    padding: 18px;
}

.pdf-export-mode .nova-profile-card,
.pdf-export-mode .nova-summary-panel,
.pdf-export-mode .nova-panel,
.print-mode .nova-profile-card,
.print-mode .nova-summary-panel,
.print-mode .nova-panel {
    border-radius: 16px;
    box-shadow: none;
}

.pdf-export-mode .nova-profile-card,
.print-mode .nova-profile-card {
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 16px;
}

.pdf-export-mode .nova-avatar,
.print-mode .nova-avatar {
    width: 96px;
    height: 96px;
    border-radius: 18px;
}

.pdf-export-mode .nova-summary-panel,
.pdf-export-mode .nova-panel,
.print-mode .nova-summary-panel,
.print-mode .nova-panel {
    padding: 16px;
}

.pdf-export-mode .nova-grid,
.print-mode .nova-grid {
    gap: 14px;
}

.pdf-export-mode .resume-portfolio,
.print-mode .resume-portfolio {
    min-height: 1123px;
    grid-template-columns: 236px 1fr;
}

.pdf-export-mode .portfolio-side,
.print-mode .portfolio-side {
    padding: 22px 16px;
    gap: 14px;
}

.pdf-export-mode .portfolio-brand-card,
.pdf-export-mode .portfolio-block,
.print-mode .portfolio-brand-card,
.print-mode .portfolio-block {
    border-radius: 16px;
}

.pdf-export-mode .portfolio-brand-card,
.pdf-export-mode .portfolio-block,
.pdf-export-mode .portfolio-project-card,
.pdf-export-mode .portfolio-panel,
.print-mode .portfolio-brand-card,
.print-mode .portfolio-block,
.print-mode .portfolio-project-card,
.print-mode .portfolio-panel {
    padding: 16px;
    box-shadow: none;
}

.pdf-export-mode .portfolio-main,
.print-mode .portfolio-main {
    padding: 22px;
}

.pdf-export-mode .portfolio-intro h2,
.print-mode .portfolio-intro h2 {
    font-size: 1.5rem;
}

.pdf-export-mode .portfolio-showcase,
.print-mode .portfolio-showcase {
    gap: 12px;
    margin-bottom: 14px;
}

.pdf-export-mode .resume-summit,
.print-mode .resume-summit {
    min-height: 1123px;
    padding: 18px 18px;
}

.pdf-export-mode .summit-header,
.print-mode .summit-header {
    padding-bottom: 10px;
}

.pdf-export-mode .summit-meta,
.print-mode .summit-meta {
    margin: 8px 0 10px;
    gap: 5px;
}

.pdf-export-mode .summit-summary,
.print-mode .summit-summary {
    padding: 6px 0 10px;
}

.pdf-export-mode .summit-grid,
.print-mode .summit-grid {
    gap: 10px;
}

.print-mode .sidebar,
.print-mode .public-theme-panel {
    display: none;
}

.print-mode .dashboard-layout {
    grid-template-columns: 1fr;
}

.print-mode .dashboard-main,
.print-mode .public-dashboard-main,
.print-mode .resume-stage,
.print-mode .public-resume-shell {
    padding: 0;
    margin: 0;
    overflow: visible;
}

.resume-sheet {
    width: min(100%, 1120px);
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(214, 232, 222, 0.9);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(18, 24, 39, 0.09);
}

.resume-block + .resume-block {
    margin-top: 34px;
}

.resume-block h2,
.resume-heading-line,
.resume-heading-rule,
.spaced-heading {
    margin: 0 0 14px;
    color: #4b4b4b;
}

.resume-copy {
    color: #707070;
    line-height: 1.7;
}

.resume-bullet-list,
.entry-bullets {
    margin: 0;
    padding-left: 20px;
    color: #505050;
    line-height: 1.6;
}

.reference-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.reference-card {
    display: grid;
    gap: 6px;
}

.reference-card h3,
.entry-top h3,
.modern-education-item h3,
.stack-entry h3 {
    margin: 0;
    color: #4e4e4e;
}

.reference-card p,
.entry-subtitle,
.modern-education-item p,
.stack-entry p {
    margin: 0;
    color: #666;
}

.reference-card span {
    color: #5f5f5f;
    font-size: 0.95rem;
}

.entry-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.entry-top span,
.modern-education-item span,
.stack-period {
    color: #8b8b8b;
    font-size: 0.95rem;
}

.contact-list {
    display: grid;
    gap: 12px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #646464;
}

.contact-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cv-accent);
    font-size: 0.9rem;
    flex: 0 0 20px;
}

.contact-icon::before {
    display: block;
}

.contact-icon.tel::before {
    content: "\260E";
}

.contact-icon.mail::before {
    content: "\2709";
}

.contact-icon.web::before {
    content: "\25CE";
}

.contact-icon.pin::before {
    content: "\25CF";
    font-size: 0.62rem;
}

.resume-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
}

.resume-avatar-image {
    object-fit: cover;
}

.resume-avatar-circle {
    width: 162px;
    height: 162px;
    border-radius: 50%;
    border: 6px solid #fff;
    background: linear-gradient(180deg, #d8dee5, #aeb8c5);
    box-shadow: 0 5px 16px rgba(32, 51, 80, 0.12);
}

.resume-avatar-square {
    width: 140px;
    height: 140px;
    border-radius: 24px;
    background: linear-gradient(180deg, #d6dbe2, #a9b5c7);
    color: #39465b;
    font-size: 3.2rem;
}

.resume-name-block h1,
.executive-name h1,
.modern-header h1 {
    margin: 0;
}

.resume-minimal {
    display: grid;
    grid-template-columns: 34% 66%;
    min-height: 1440px;
    background: #f7fbf8;
}

.minimal-side {
    position: relative;
    background: linear-gradient(180deg, #f1f7f3, #edf5f0);
    padding: 38px 30px 50px;
    overflow: hidden;
}

.minimal-side .resume-avatar {
    position: relative;
    margin: 0 auto 26px;
    z-index: 1;
    color: #2e5f46;
    font-size: 3.6rem;
}

.resume-name-block {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 34px;
}

.resume-name-block h1 {
    color: var(--cv-accent-dark);
    font-size: 3.2rem;
    line-height: 1.02;
}

.resume-name-block p {
    margin: 8px 0 0;
    color: #7a7a7a;
    font-size: 1.4rem;
}

.minimal-side .resume-block h2 {
    font-size: 1.8rem;
}

.resume-divider {
    width: 100%;
    height: 2px;
    background: var(--cv-accent-line);
    margin-bottom: 18px;
}

.minimal-main {
    padding: 60px 42px;
}

.resume-heading-line {
    position: relative;
    padding-bottom: 10px;
    font-size: 1.85rem;
    font-weight: 700;
}

.resume-heading-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--cv-accent-line);
}

.resume-timeline {
    display: grid;
    gap: 24px;
}

.resume-entry {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 14px;
}

.entry-dot {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--cv-accent);
    box-shadow: 0 0 0 4px rgba(var(--cv-accent-rgb), 0.14);
}

.entry-body {
    border-left: 2px solid var(--cv-accent-line);
    padding-left: 18px;
}

.resume-modern {
    padding: 56px 52px 64px;
    background: #f8fbf9;
    min-height: 1440px;
}

.modern-header {
    padding-bottom: 22px;
    border-bottom: 5px solid var(--cv-accent-dark);
}

.modern-header h1 {
    font-size: 3.4rem;
    letter-spacing: 0.14em;
    color: #2f2c31;
}

.modern-header p {
    margin: 10px 0 0;
    font-size: 1.55rem;
    letter-spacing: 0.18em;
    color: #537160;
}

.spaced-heading {
    font-size: 1.85rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 500;
    color: #333;
}

.modern-summary {
    margin-top: 46px;
}

.modern-grid {
    display: grid;
    grid-template-columns: 34% 66%;
    gap: 38px;
    margin-top: 26px;
}

.modern-education-item + .modern-education-item,
.stack-entry + .stack-entry,
.modern-entry + .modern-entry {
    margin-top: 22px;
}

.modern-timeline {
    display: grid;
    gap: 22px;
}

.modern-entry-top {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    margin-bottom: 10px;
}

.entry-circle {
    width: 10px;
    height: 10px;
    border: 2px solid var(--cv-accent-dark);
    border-radius: 50%;
    margin-top: 8px;
}

.resume-executive {
    padding: 48px 54px 0;
    background: #f7fbf8;
    min-height: 1440px;
}

.executive-header {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 38px;
    align-items: center;
    margin-bottom: 26px;
}

.executive-name h1 {
    font-size: 4rem;
    font-weight: 800;
    color: var(--cv-accent-dark);
}

.executive-name p {
    margin: 6px 0 0;
    font-size: 1.6rem;
    color: #6f6f6f;
}

.executive-accent {
    width: 120px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cv-accent), var(--cv-accent-dark));
    margin-top: 24px;
}

.executive-grid {
    display: grid;
    grid-template-columns: 31% 69%;
    gap: 34px;
}

.executive-side {
    padding-right: 18px;
}

.resume-heading-rule {
    position: relative;
    padding-bottom: 8px;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cv-accent-dark);
}

.resume-heading-rule::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--cv-accent-line);
}

.executive-timeline {
    position: relative;
    display: grid;
    gap: 22px;
}

.executive-entry {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 14px;
}

.entry-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cv-accent);
    margin-top: 8px;
    box-shadow: 0 34px 0 -3px rgba(var(--cv-accent-rgb), 0.55);
}

.executive-entry-body {
    border-left: 2px solid var(--cv-accent-line);
    padding-left: 18px;
}

.plain-reference {
    border-top: 2px solid var(--cv-accent-line);
    padding-top: 10px;
}

.compact-contact .contact-icon {
    color: var(--cv-accent-dark);
}

.dense-bullets li,
.resume-bullet-list li {
    margin-bottom: 7px;
}

.skill-pill-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skill-pill-cloud span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(var(--cv-accent-rgb), 0.1);
    color: var(--cv-accent-dark);
    border: 1px solid rgba(var(--cv-accent-rgb), 0.18);
    font-size: 0.86rem;
    font-weight: 600;
}

.compact-pill-cloud span {
    padding: 7px 10px;
    font-size: 0.8rem;
}

.resume-aurora {
    padding: 30px;
    background:
        radial-gradient(circle at top right, rgba(var(--cv-accent-rgb), 0.16), transparent 24%),
        linear-gradient(180deg, #0f172a 0%, #121d38 22%, #f7fbf8 22%, #f7fbf8 100%);
}

.aurora-hero {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 20px;
    align-items: stretch;
}

.aurora-identity,
.aurora-summary-card,
.aurora-panel,
.aurora-stat-card {
    border: 1px solid rgba(214, 232, 222, 0.9);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 24px;
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
}

.aurora-identity {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: 18px;
    padding: 24px;
}

.aurora-avatar {
    width: 148px;
    height: 148px;
    border-radius: 28px;
}

.aurora-kicker,
.ledger-kicker,
.nova-kicker,
.portfolio-kicker,
.summit-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(var(--cv-accent-rgb), 0.12);
    color: var(--cv-accent-dark);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.aurora-identity h1,
.ledger-side h1,
.nova-profile-card h1,
.portfolio-brand-card h1,
.summit-header h1 {
    margin: 12px 0 8px;
    font-size: 3rem;
    line-height: 1;
    color: var(--cv-accent-dark);
}

.aurora-identity p,
.ledger-side p,
.nova-profile-card p,
.portfolio-brand-card p,
.summit-header p {
    margin: 0;
    font-size: 1.2rem;
    color: #667085;
}

.aurora-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.aurora-contact-row span,
.summit-meta span {
    padding: 8px 12px;
    border-radius: 999px;
    background: #f4f7f5;
    color: #52616d;
    font-size: 0.84rem;
}

.aurora-summary-card {
    padding: 24px;
    background: rgba(255, 255, 255, 0.92);
}

.aurora-summary-card h2,
.nova-panel h2,
.portfolio-panel h2,
.summit-summary h2,
.summit-side h2,
.summit-main h2 {
    margin: 0 0 12px;
    color: #1f2937;
}

.aurora-summary-card p,
.aurora-project-card p,
.ledger-panel p,
.nova-project-card p,
.portfolio-project-card p,
.summit-project-card p,
.summit-summary p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.aurora-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 0;
}

.aurora-stat-card {
    padding: 18px;
    text-align: center;
}

.aurora-stat-card strong {
    display: block;
    color: var(--cv-accent-dark);
    font-size: 1.55rem;
}

.aurora-stat-card span {
    color: #64748b;
    font-size: 0.88rem;
}

.aurora-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 18px;
}

.aurora-main,
.aurora-side {
    display: grid;
    gap: 18px;
}

.aurora-panel {
    padding: 22px;
}

.aurora-heading {
    margin: 0 0 14px;
    color: var(--cv-accent-dark);
    font-size: 1.3rem;
}

.aurora-entry + .aurora-entry,
.ledger-entry + .ledger-entry,
.portfolio-entry + .portfolio-entry,
.summit-entry + .summit-entry {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.aurora-project-grid,
.nova-project-list,
.summit-project-grid {
    display: grid;
    gap: 14px;
}

.aurora-project-card,
.nova-project-card,
.summit-project-card {
    padding: 16px;
    border-radius: 18px;
    background: #f8fbfa;
    border: 1px solid rgba(214, 232, 222, 0.9);
}

.resume-ledger {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 1320px;
    background: linear-gradient(180deg, #fbfcff, #f6f9fc);
}

.ledger-side {
    background: linear-gradient(180deg, #163126, #21453d);
    color: #fff;
}

.ledger-side-inner {
    padding: 34px 24px;
    display: grid;
    gap: 24px;
}

.ledger-avatar {
    width: 132px;
    height: 132px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.18);
}

.ledger-side h1,
.ledger-side p,
.ledger-side h2,
.portfolio-side h1,
.portfolio-side p,
.portfolio-side h2 {
    color: #fff;
}

.ledger-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
}

.ledger-side .contact-item,
.portfolio-side .contact-item {
    color: rgba(255, 255, 255, 0.82);
}

.ledger-side .contact-icon,
.portfolio-side .contact-icon {
    color: #fff;
}

.ledger-main {
    padding: 34px;
    display: grid;
    gap: 18px;
}

.ledger-panel {
    padding: 22px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(214, 232, 222, 0.9);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.05);
}

.ledger-panel h2 {
    margin: 10px 0 12px;
    color: #1f2937;
    font-size: 1.6rem;
}

.ledger-split,
.portfolio-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.resume-nova {
    padding: 28px;
    background:
        radial-gradient(circle at top left, rgba(var(--cv-accent-rgb), 0.14), transparent 22%),
        linear-gradient(180deg, #f8fbff, #f7fbf8);
}

.nova-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
    margin-bottom: 18px;
}

.nova-profile-card,
.nova-summary-panel,
.nova-panel {
    border-radius: 24px;
    border: 1px solid rgba(214, 232, 222, 0.9);
    background: #fff;
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.05);
}

.nova-profile-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
}

.nova-avatar {
    width: 120px;
    height: 120px;
    border-radius: 24px;
}

.nova-profile-card small {
    display: block;
    margin-top: 10px;
    color: #94a3b8;
}

.nova-summary-panel,
.nova-panel {
    padding: 22px;
}

.nova-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.nova-entry + .nova-entry {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(203, 213, 225, 0.8);
}

.nova-entry strong {
    display: block;
    color: #0f172a;
    font-size: 1.05rem;
}

.nova-entry span {
    color: var(--cv-accent-dark);
    font-size: 0.85rem;
}

.nova-entry > p:first-of-type {
    margin: 6px 0 10px;
    font-weight: 600;
    color: #475569;
}

.resume-portfolio {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 1340px;
    background: #f7fbf8;
}

.portfolio-side {
    padding: 28px 22px;
    background: linear-gradient(180deg, #10241b, #173228 58%, #1f4f39);
    display: grid;
    gap: 18px;
}

.portfolio-brand-card,
.portfolio-block {
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.portfolio-brand-card {
    padding: 22px;
}

.portfolio-avatar {
    width: 132px;
    height: 132px;
    border-radius: 28px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.14);
}

.portfolio-block {
    padding: 20px;
}

.portfolio-skill-cloud span {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.14);
}

.portfolio-main {
    padding: 30px;
}

.portfolio-intro {
    margin-bottom: 20px;
}

.portfolio-intro h2 {
    margin: 12px 0 10px;
    font-size: 2rem;
    color: var(--cv-accent-dark);
}

.portfolio-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.portfolio-project-card {
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(214, 232, 222, 0.9);
    background: #fff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.portfolio-project-card.featured {
    background: linear-gradient(135deg, rgba(var(--cv-accent-rgb), 0.1), #ffffff 58%);
}

.portfolio-project-number {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--cv-accent-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.portfolio-panel {
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(214, 232, 222, 0.9);
    background: #fff;
}

.resume-summit {
    padding: 48px 56px;
    background: linear-gradient(180deg, #fffdf7, #f8f4eb);
    min-height: 1360px;
}

.summit-header {
    text-align: center;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.18);
}

.summit-header h1 {
    margin: 14px 0 8px;
    font-size: 3.3rem;
    color: #111827;
}

.summit-header p {
    color: #6b7280;
    font-size: 1.2rem;
}

.summit-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 28px;
}

.summit-summary {
    padding: 24px 0 28px;
}

.summit-grid {
    display: grid;
    grid-template-columns: 33% 67%;
    gap: 28px;
}

.summit-side {
    padding-right: 10px;
}

.summit-main .resume-block + .resume-block,
.summit-side .resume-block + .resume-block {
    margin-top: 26px;
}

.summit-project-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* One-page premium preview and export alignment */
.public-resume-shell {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 20px;
    padding: 8px 0 28px;
}

.resume-stage {
    min-height: 100%;
    display: block;
    padding: 0;
}

.public-profile-page .resume-sheet {
    grid-column: 1;
    width: min(794px, 100%);
    max-width: 100%;
}

.public-profile-page .public-theme-panel {
    grid-column: 2;
}

.resume-sheet {
    width: 794px;
    max-width: calc(100vw - 420px);
    height: 1123px;
    min-height: 1123px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 26px;
    border: 1px solid rgba(218, 229, 223, 0.92);
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.09);
    overflow: hidden;
}

.pdf-export-mode .resume-sheet,
.print-mode .resume-sheet {
    width: 794px;
    height: 1123px;
    max-width: none;
    min-height: 1123px;
}

.resume-sheet .resume-copy,
.resume-sheet .resume-bullet-list,
.resume-sheet .entry-bullets,
.resume-sheet .contact-item,
.resume-sheet .reference-card span,
.pdf-export-mode .resume-copy,
.pdf-export-mode .resume-bullet-list,
.pdf-export-mode .entry-bullets,
.pdf-export-mode .contact-item,
.pdf-export-mode .reference-card span,
.print-mode .resume-copy,
.print-mode .resume-bullet-list,
.print-mode .entry-bullets,
.print-mode .contact-item,
.print-mode .reference-card span {
    font-size: 0.88rem;
    line-height: 1.5;
}

.resume-sheet .resume-block + .resume-block,
.pdf-export-mode .resume-block + .resume-block,
.print-mode .resume-block + .resume-block {
    margin-top: 18px;
}

.resume-sheet .entry-top span,
.resume-sheet .modern-education-item span,
.resume-sheet .stack-period,
.pdf-export-mode .entry-top span,
.pdf-export-mode .modern-education-item span,
.pdf-export-mode .stack-period,
.print-mode .entry-top span,
.print-mode .modern-education-item span,
.print-mode .stack-period {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.resume-sheet .reference-grid,
.pdf-export-mode .reference-grid,
.print-mode .reference-grid {
    gap: 12px;
}

.resume-sheet .resume-avatar-circle,
.pdf-export-mode .resume-avatar-circle,
.print-mode .resume-avatar-circle {
    width: 124px;
    height: 124px;
    border-width: 4px;
}

.resume-sheet .resume-avatar-square,
.pdf-export-mode .resume-avatar-square,
.print-mode .resume-avatar-square {
    width: 106px;
    height: 106px;
    border-radius: 22px;
    font-size: 2.4rem;
}

.resume-minimal,
.pdf-export-mode .resume-minimal,
.print-mode .resume-minimal {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 1123px;
    background:
        radial-gradient(circle at top left, rgba(var(--cv-accent-rgb), 0.18), transparent 26%),
        linear-gradient(180deg, #fbfdfc, #f6fbf8 100%);
}

.minimal-side,
.pdf-export-mode .minimal-side,
.print-mode .minimal-side {
    position: relative;
    padding: 28px 22px 28px;
    background: linear-gradient(180deg, #eff6f2, #e9f3ed);
    border-right: 1px solid rgba(183, 207, 192, 0.65);
}

.minimal-side::before,
.pdf-export-mode .minimal-side::before,
.print-mode .minimal-side::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 118px;
    background: linear-gradient(135deg, rgba(var(--cv-accent-rgb), 0.72), rgba(var(--cv-accent-rgb), 0.24));
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.minimal-side .resume-avatar,
.pdf-export-mode .minimal-side .resume-avatar,
.print-mode .minimal-side .resume-avatar {
    margin: 0 auto 18px;
    position: relative;
    z-index: 1;
}

.resume-name-block,
.pdf-export-mode .resume-name-block,
.print-mode .resume-name-block {
    margin-bottom: 22px;
}

.resume-name-block h1,
.pdf-export-mode .resume-name-block h1,
.print-mode .resume-name-block h1 {
    font-size: 2.2rem;
    color: #254538;
}

.resume-name-block p,
.pdf-export-mode .resume-name-block p,
.print-mode .resume-name-block p {
    font-size: 0.98rem;
    color: #667a70;
}

.minimal-side .resume-block h2,
.resume-heading-line,
.pdf-export-mode .minimal-side .resume-block h2,
.pdf-export-mode .resume-heading-line,
.print-mode .minimal-side .resume-block h2,
.print-mode .resume-heading-line {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.minimal-main,
.pdf-export-mode .minimal-main,
.print-mode .minimal-main {
    padding: 30px 28px;
}

.resume-timeline,
.pdf-export-mode .resume-timeline,
.print-mode .resume-timeline {
    gap: 16px;
}

.resume-modern,
.pdf-export-mode .resume-modern,
.print-mode .resume-modern {
    min-height: 1123px;
    padding: 32px 34px 34px;
    background: linear-gradient(180deg, #fcfdfd, #f7faf8);
}

.modern-header,
.pdf-export-mode .modern-header,
.print-mode .modern-header {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 24px;
    align-items: center;
    padding: 0 0 18px;
    border-bottom: 3px solid #1f2937;
}

.modern-header-media {
    display: flex;
    justify-content: center;
}

.modern-avatar {
    width: 112px;
    height: 112px;
    border-radius: 28px;
    border: 4px solid rgba(var(--cv-accent-rgb), 0.12);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
}

.modern-header-copy h1,
.pdf-export-mode .modern-header-copy h1,
.print-mode .modern-header-copy h1 {
    font-size: 2.35rem;
    letter-spacing: 0.1em;
    color: #111827;
}

.modern-header-copy p,
.pdf-export-mode .modern-header-copy p,
.print-mode .modern-header-copy p {
    margin: 8px 0 0;
    font-size: 1.08rem;
    letter-spacing: 0.14em;
    color: #5b6471;
}

.modern-contact-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.modern-contact-strip span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(var(--cv-accent-rgb), 0.08);
    color: var(--cv-accent-dark);
    font-size: 0.75rem;
    font-weight: 700;
}

.spaced-heading,
.pdf-export-mode .spaced-heading,
.print-mode .spaced-heading {
    font-size: 1.12rem;
    letter-spacing: 0.22em;
    font-weight: 700;
}

.modern-summary,
.pdf-export-mode .modern-summary,
.print-mode .modern-summary {
    margin-top: 18px;
}

.modern-grid,
.pdf-export-mode .modern-grid,
.print-mode .modern-grid {
    grid-template-columns: 30% 70%;
    gap: 24px;
    margin-top: 18px;
}

.modern-side {
    border-right: 1px solid rgba(203, 213, 225, 0.8);
    padding-right: 18px;
}

.resume-monochrome,
.pdf-export-mode .resume-monochrome,
.print-mode .resume-monochrome {
    background: linear-gradient(180deg, #ffffff, #f4f4f5);
}

.resume-monochrome .modern-header,
.pdf-export-mode .resume-monochrome .modern-header,
.print-mode .resume-monochrome .modern-header {
    border-bottom-color: #111111;
}

.resume-monochrome .modern-avatar,
.pdf-export-mode .resume-monochrome .modern-avatar,
.print-mode .resume-monochrome .modern-avatar {
    border-color: rgba(17, 17, 17, 0.12);
    box-shadow: none;
    filter: grayscale(1);
}

.resume-monochrome .modern-contact-strip span,
.pdf-export-mode .resume-monochrome .modern-contact-strip span,
.print-mode .resume-monochrome .modern-contact-strip span {
    background: rgba(17, 17, 17, 0.06);
    color: #111111;
}

.resume-monochrome .spaced-heading,
.resume-monochrome .modern-header-copy h1,
.pdf-export-mode .resume-monochrome .spaced-heading,
.pdf-export-mode .resume-monochrome .modern-header-copy h1,
.print-mode .resume-monochrome .spaced-heading,
.print-mode .resume-monochrome .modern-header-copy h1 {
    color: #111111;
}

.resume-executive,
.pdf-export-mode .resume-executive,
.print-mode .resume-executive {
    min-height: 1123px;
    padding: 36px 38px 24px;
    background: linear-gradient(180deg, #fcfcfc, #f4f5f4);
}

.executive-header,
.pdf-export-mode .executive-header,
.print-mode .executive-header {
    grid-template-columns: 118px 1fr;
    gap: 28px;
    margin-bottom: 20px;
}

.executive-name h1,
.pdf-export-mode .executive-name h1,
.print-mode .executive-name h1 {
    font-size: 2.85rem;
    color: #172026;
}

.executive-name p,
.pdf-export-mode .executive-name p,
.print-mode .executive-name p {
    font-size: 1.04rem;
    color: #6b7280;
}

.executive-accent,
.pdf-export-mode .executive-accent,
.print-mode .executive-accent {
    width: 96px;
    height: 6px;
    margin-top: 16px;
}

.executive-grid,
.pdf-export-mode .executive-grid,
.print-mode .executive-grid {
    grid-template-columns: 28% 72%;
    gap: 22px;
}

.executive-side,
.pdf-export-mode .executive-side,
.print-mode .executive-side {
    padding-right: 10px;
}

.resume-heading-rule,
.pdf-export-mode .resume-heading-rule,
.print-mode .resume-heading-rule {
    font-size: 1.18rem;
    color: #1f2937;
}

.executive-timeline,
.pdf-export-mode .executive-timeline,
.print-mode .executive-timeline {
    gap: 14px;
}

.plain-reference,
.pdf-export-mode .plain-reference,
.print-mode .plain-reference {
    padding-top: 8px;
}

.resume-aurora,
.pdf-export-mode .resume-aurora,
.print-mode .resume-aurora {
    padding: 18px;
    min-height: 1123px;
    background:
        radial-gradient(circle at top right, rgba(var(--cv-accent-rgb), 0.16), transparent 24%),
        linear-gradient(180deg, #10192d 0%, #16223f 18%, #f7fbf8 18%, #f7fbf8 100%);
}

.aurora-hero,
.pdf-export-mode .aurora-hero,
.print-mode .aurora-hero {
    grid-template-columns: 1.25fr 0.95fr;
    gap: 14px;
}

.aurora-identity,
.aurora-summary-card,
.aurora-panel,
.aurora-stat-card,
.pdf-export-mode .aurora-identity,
.pdf-export-mode .aurora-summary-card,
.pdf-export-mode .aurora-panel,
.pdf-export-mode .aurora-stat-card,
.print-mode .aurora-identity,
.print-mode .aurora-summary-card,
.print-mode .aurora-panel,
.print-mode .aurora-stat-card {
    border-radius: 18px;
    box-shadow: none;
}

.aurora-identity,
.pdf-export-mode .aurora-identity,
.print-mode .aurora-identity {
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 18px;
}

.aurora-avatar {
    width: 110px;
    height: 110px;
    border-radius: 22px;
}

.aurora-identity h1,
.ledger-side h1,
.nova-profile-card h1,
.portfolio-brand-card h1,
.summit-header h1,
.pdf-export-mode .aurora-identity h1,
.pdf-export-mode .ledger-side h1,
.pdf-export-mode .nova-profile-card h1,
.pdf-export-mode .portfolio-brand-card h1,
.pdf-export-mode .summit-header h1,
.print-mode .aurora-identity h1,
.print-mode .ledger-side h1,
.print-mode .nova-profile-card h1,
.print-mode .portfolio-brand-card h1,
.print-mode .summit-header h1 {
    font-size: 2.08rem;
    letter-spacing: -0.03em;
}

.aurora-identity p,
.ledger-side p,
.nova-profile-card p,
.portfolio-brand-card p,
.summit-header p,
.pdf-export-mode .aurora-identity p,
.pdf-export-mode .ledger-side p,
.pdf-export-mode .nova-profile-card p,
.pdf-export-mode .portfolio-brand-card p,
.pdf-export-mode .summit-header p,
.print-mode .aurora-identity p,
.print-mode .ledger-side p,
.print-mode .nova-profile-card p,
.print-mode .portfolio-brand-card p,
.print-mode .summit-header p {
    font-size: 0.98rem;
}

.aurora-summary-card,
.pdf-export-mode .aurora-summary-card,
.print-mode .aurora-summary-card {
    padding: 18px;
}

.aurora-stats,
.pdf-export-mode .aurora-stats,
.print-mode .aurora-stats {
    gap: 10px;
    margin: 12px 0;
}

.aurora-stat-card,
.pdf-export-mode .aurora-stat-card,
.print-mode .aurora-stat-card {
    padding: 12px;
}

.aurora-grid,
.pdf-export-mode .aurora-grid,
.print-mode .aurora-grid {
    gap: 14px;
}

.aurora-main,
.aurora-side,
.pdf-export-mode .aurora-main,
.pdf-export-mode .aurora-side,
.print-mode .aurora-main,
.print-mode .aurora-side {
    gap: 14px;
}

.aurora-panel,
.pdf-export-mode .aurora-panel,
.print-mode .aurora-panel {
    padding: 16px;
}

.aurora-heading,
.pdf-export-mode .aurora-heading,
.print-mode .aurora-heading {
    font-size: 1.08rem;
}

.resume-ledger,
.pdf-export-mode .resume-ledger,
.print-mode .resume-ledger {
    grid-template-columns: 230px 1fr;
    min-height: 1123px;
    background: linear-gradient(180deg, #fbfcff, #f5f8fb);
}

.ledger-side-inner,
.pdf-export-mode .ledger-side-inner,
.print-mode .ledger-side-inner {
    padding: 24px 18px;
    gap: 16px;
}

.ledger-avatar,
.portfolio-avatar,
.pdf-export-mode .ledger-avatar,
.pdf-export-mode .portfolio-avatar,
.print-mode .ledger-avatar,
.print-mode .portfolio-avatar {
    width: 104px;
    height: 104px;
    border-radius: 22px;
}

.ledger-main,
.pdf-export-mode .ledger-main,
.print-mode .ledger-main {
    padding: 22px;
    gap: 14px;
}

.ledger-panel,
.pdf-export-mode .ledger-panel,
.print-mode .ledger-panel {
    padding: 16px;
    border-radius: 18px;
    box-shadow: none;
}

.ledger-panel h2,
.pdf-export-mode .ledger-panel h2,
.print-mode .ledger-panel h2 {
    font-size: 1.16rem;
}

.resume-nova,
.pdf-export-mode .resume-nova,
.print-mode .resume-nova {
    min-height: 1123px;
    padding: 18px;
    background:
        radial-gradient(circle at top left, rgba(var(--cv-accent-rgb), 0.16), transparent 22%),
        linear-gradient(180deg, #f8fbff, #f6faf8);
}

.nova-hero,
.pdf-export-mode .nova-hero,
.print-mode .nova-hero {
    gap: 14px;
    margin-bottom: 14px;
}

.nova-profile-card,
.nova-summary-panel,
.nova-panel,
.pdf-export-mode .nova-profile-card,
.pdf-export-mode .nova-summary-panel,
.pdf-export-mode .nova-panel,
.print-mode .nova-profile-card,
.print-mode .nova-summary-panel,
.print-mode .nova-panel {
    border-radius: 18px;
    box-shadow: none;
}

.nova-profile-card,
.pdf-export-mode .nova-profile-card,
.print-mode .nova-profile-card {
    grid-template-columns: 104px 1fr;
    gap: 14px;
    padding: 16px;
}

.nova-avatar {
    width: 104px;
    height: 104px;
    border-radius: 22px;
}

.nova-summary-panel,
.nova-panel,
.pdf-export-mode .nova-summary-panel,
.pdf-export-mode .nova-panel,
.print-mode .nova-summary-panel,
.print-mode .nova-panel {
    padding: 16px;
}

.nova-grid,
.pdf-export-mode .nova-grid,
.print-mode .nova-grid {
    gap: 14px;
}

.resume-portfolio,
.pdf-export-mode .resume-portfolio,
.print-mode .resume-portfolio {
    grid-template-columns: 236px 1fr;
    min-height: 1123px;
    background: linear-gradient(180deg, #f9fbfa, #f4f8f6);
}

.portfolio-side,
.pdf-export-mode .portfolio-side,
.print-mode .portfolio-side {
    padding: 22px 16px;
    gap: 14px;
    background: linear-gradient(180deg, #10241b, #173228 58%, #20543d);
}

.portfolio-brand-card,
.portfolio-block,
.portfolio-project-card,
.portfolio-panel,
.pdf-export-mode .portfolio-brand-card,
.pdf-export-mode .portfolio-block,
.pdf-export-mode .portfolio-project-card,
.pdf-export-mode .portfolio-panel,
.print-mode .portfolio-brand-card,
.print-mode .portfolio-block,
.print-mode .portfolio-project-card,
.print-mode .portfolio-panel {
    border-radius: 18px;
    box-shadow: none;
}

.portfolio-brand-card,
.portfolio-block,
.portfolio-project-card,
.portfolio-panel,
.pdf-export-mode .portfolio-brand-card,
.pdf-export-mode .portfolio-block,
.pdf-export-mode .portfolio-project-card,
.pdf-export-mode .portfolio-panel,
.print-mode .portfolio-brand-card,
.print-mode .portfolio-block,
.print-mode .portfolio-project-card,
.print-mode .portfolio-panel {
    padding: 16px;
}

.portfolio-main,
.pdf-export-mode .portfolio-main,
.print-mode .portfolio-main {
    padding: 22px;
}

.portfolio-intro h2,
.pdf-export-mode .portfolio-intro h2,
.print-mode .portfolio-intro h2 {
    font-size: 1.42rem;
}

.portfolio-showcase,
.pdf-export-mode .portfolio-showcase,
.print-mode .portfolio-showcase {
    gap: 12px;
    margin-bottom: 14px;
}

.resume-summit,
.pdf-export-mode .resume-summit,
.print-mode .resume-summit {
    min-height: 1123px;
    padding: 30px 32px;
    background: linear-gradient(180deg, #fffcf7, #f6f1e8);
}

.summit-header,
.pdf-export-mode .summit-header,
.print-mode .summit-header {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 22px;
    align-items: center;
    text-align: left;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.18);
}

.summit-hero-media {
    display: flex;
    justify-content: center;
}

.summit-avatar {
    width: 118px;
    height: 118px;
    border-radius: 26px;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 18px 34px rgba(100, 71, 0, 0.12);
}

.summit-header-copy {
    display: grid;
    gap: 6px;
}

.summit-meta,
.pdf-export-mode .summit-meta,
.print-mode .summit-meta {
    justify-content: flex-start;
    gap: 8px;
    margin: 14px 0 18px;
}

.summit-summary,
.pdf-export-mode .summit-summary,
.print-mode .summit-summary {
    padding: 10px 0 18px;
}

.summit-grid,
.pdf-export-mode .summit-grid,
.print-mode .summit-grid {
    gap: 18px;
}

.summit-project-card,
.pdf-export-mode .summit-project-card,
.print-mode .summit-project-card {
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
}

/* Full CV templates aligned with My CVs preview cards */
.public-page.template-minimal .resume-minimal,
.public-page.template-minimal.pdf-export-mode .resume-minimal,
.public-page.template-minimal.print-mode .resume-minimal {
    background: #f7f9fc;
}

.public-page.template-minimal .minimal-side {
    background: linear-gradient(180deg, #e8eef8, #edf3fb);
    border-right: 1px solid rgba(156, 178, 211, 0.5);
}

.public-page.template-minimal .minimal-side::before {
    background: linear-gradient(135deg, rgba(69, 106, 157, 0.9), rgba(107, 143, 192, 0.32));
}

.public-page.template-minimal .resume-name-block h1,
.public-page.template-minimal .minimal-side .resume-block h2,
.public-page.template-minimal .resume-heading-line {
    color: #2c4f7a;
}

.public-page.template-executive .resume-executive,
.public-page.template-executive.pdf-export-mode .resume-executive,
.public-page.template-executive.print-mode .resume-executive {
    background: linear-gradient(180deg, #ffffff, #f5f5f5);
}

.public-page.template-executive .executive-header {
    padding-bottom: 18px;
    border-bottom: 4px solid #172026;
}

.public-page.template-executive .executive-accent {
    background: linear-gradient(135deg, #d9485d, #172026);
}

.public-page.template-executive .resume-heading-rule,
.public-page.template-executive .executive-name h1 {
    color: #172026;
}

.public-page.template-modern .resume-modern,
.public-page.template-modern.pdf-export-mode .resume-modern,
.public-page.template-modern.print-mode .resume-modern {
    background: linear-gradient(180deg, #ffffff, #f6f7f8);
}

.public-page.template-modern .modern-header {
    border-bottom: 4px solid #111827;
}

.public-page.template-modern .modern-contact-strip span {
    background: rgba(17, 24, 39, 0.06);
    color: #111827;
}

.public-page.template-modern .modern-side {
    border-right: 1px solid rgba(17, 24, 39, 0.16);
}

.public-page.template-aurora .resume-aurora,
.public-page.template-aurora.pdf-export-mode .resume-aurora,
.public-page.template-aurora.print-mode .resume-aurora {
    position: relative;
    padding: 22px;
    background: linear-gradient(180deg, #f7f8fc, #f4f6fb);
}

.public-page.template-aurora .resume-aurora::before,
.public-page.template-aurora.pdf-export-mode .resume-aurora::before,
.public-page.template-aurora.print-mode .resume-aurora::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 22px;
    height: 18px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #7c3aed, #2563eb);
}

.public-page.template-aurora .aurora-hero,
.public-page.template-aurora.pdf-export-mode .aurora-hero,
.public-page.template-aurora.print-mode .aurora-hero {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 18px;
}

.public-page.template-aurora .aurora-identity,
.public-page.template-aurora .aurora-summary-card,
.public-page.template-aurora .aurora-panel,
.public-page.template-aurora .aurora-stat-card {
    background: #fff;
    border-color: rgba(210, 218, 241, 0.95);
}

.public-page.template-aurora .aurora-identity {
    border-radius: 0;
    border-top: 0;
}

.public-page.template-aurora .aurora-summary-card {
    border-top: 0;
    border-radius: 0 0 18px 18px;
}

.public-page.template-aurora .aurora-kicker {
    background: rgba(124, 58, 237, 0.12);
    color: #4c1d95;
}

.public-page.template-aurora .aurora-identity h1,
.public-page.template-aurora .aurora-heading,
.public-page.template-aurora .aurora-stat-card strong {
    color: #2f3f86;
}

.public-page.template-aurora .resume-aurora::before,
.public-page.template-aurora.pdf-export-mode .resume-aurora::before,
.public-page.template-aurora.print-mode .resume-aurora::before {
    content: none;
}

.public-page.template-aurora .resume-aurora,
.public-page.template-aurora.pdf-export-mode .resume-aurora,
.public-page.template-aurora.print-mode .resume-aurora {
    padding: 18px;
    background: linear-gradient(180deg, #f5f7fb, #eef2f8);
}

.aurora-card-sheet {
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 10px;
    height: calc(1123px - 36px);
    min-height: calc(1123px - 36px);
    padding: 0;
    background: #ffffff;
    border: 1px solid rgba(184, 196, 219, 0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.aurora-card-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 0;
    height: 100%;
    min-height: 0;
}

.aurora-card-side {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 0;
    padding: 0 0 14px;
    background: linear-gradient(180deg, #f8faff, #f2f5fb);
    border-right: 1px solid rgba(221, 227, 236, 0.95);
}

.aurora-card-main {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 0;
    padding: 0 0 14px;
}

.aurora-card-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 14px;
    background: linear-gradient(90deg, #2b5fd7, #3a74ef);
    color: #fff;
}

.aurora-card-topname {
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.1;
}

.aurora-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.aurora-card-profile {
    display: grid;
    justify-items: start;
    gap: 10px;
    align-items: start;
    padding: 2px 18px 0;
}

.aurora-card-avatar {
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffb74d, #ff7043);
    color: #fff;
    font-size: 1.36rem;
    font-weight: 800;
    object-fit: cover;
    box-shadow: 0 12px 24px rgba(32, 52, 98, 0.16);
}

.aurora-card-avatar-image {
    background: #d9deea;
}

.aurora-card-profile-copy {
    display: grid;
    gap: 4px;
    width: 100%;
}

.aurora-card-name {
    color: #1f2f4f;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.12;
}

.aurora-card-profile-copy strong {
    color: #18243d;
    font-size: 0.88rem;
    line-height: 1.2;
}

.aurora-card-contact-lines {
    display: grid;
    gap: 2px;
}

.aurora-card-profile-copy span {
    color: #6b7280;
    font-size: 0.78rem;
    line-height: 1.32;
}

.aurora-card-section {
    display: grid;
    gap: 6px;
    padding: 0 18px;
}

.aurora-card-side-section h2 {
    border-top: 0;
    padding-top: 0;
}

.aurora-card-main-section:first-child h2 {
    border-top: 0;
    padding-top: 0;
}

.aurora-card-section h2 {
    margin: 0;
    padding-top: 3px;
    border-top: 1px solid rgba(222, 226, 232, 0.95);
    color: #374151;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.aurora-card-entry {
    display: grid;
    gap: 3px;
}

.aurora-card-entry-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
}

.aurora-card-entry strong {
    color: #111827;
    font-size: 0.84rem;
    line-height: 1.24;
}

.aurora-card-entry-head span {
    color: #8a93a3;
    font-size: 0.68rem;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
}

.aurora-card-entry p,
.aurora-card-entry span {
    color: #7c8798;
    font-size: 0.76rem;
    line-height: 1.28;
    margin: 0;
}

.aurora-card-skill-list {
    margin: 0;
    padding-left: 16px;
    color: #4b5563;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
}

.aurora-card-skill-list li + li {
    margin-top: 4px;
}

.aurora-card-reference {
    min-height: 40px;
    padding-bottom: 10px;
}

.pdf-export-mode .aurora-card-sheet,
.print-mode .aurora-card-sheet {
    height: calc(1123px - 24px);
    min-height: calc(1123px - 24px);
    gap: 8px;
    border-radius: 0;
    box-shadow: none;
}

.pdf-export-mode .aurora-card-layout,
.print-mode .aurora-card-layout {
    grid-template-columns: 208px minmax(0, 1fr);
}

.pdf-export-mode .aurora-card-topbar,
.print-mode .aurora-card-topbar {
    min-height: 38px;
    padding: 6px 12px;
}

.pdf-export-mode .aurora-card-profile,
.print-mode .aurora-card-profile,
.pdf-export-mode .aurora-card-section,
.print-mode .aurora-card-section {
    padding-left: 14px;
    padding-right: 14px;
}

.pdf-export-mode .aurora-card-avatar,
.print-mode .aurora-card-avatar {
    width: 66px;
    height: 66px;
    border-radius: 16px;
    font-size: 1.12rem;
}

.pdf-export-mode .aurora-card-topname,
.print-mode .aurora-card-topname {
    font-size: 0.82rem;
}

.pdf-export-mode .aurora-card-name,
.print-mode .aurora-card-name {
    font-size: 0.86rem;
}

.pdf-export-mode .aurora-card-profile-copy strong,
.print-mode .aurora-card-profile-copy strong {
    font-size: 0.76rem;
}

.pdf-export-mode .aurora-card-profile-copy span,
.print-mode .aurora-card-profile-copy span,
.pdf-export-mode .aurora-card-entry p,
.print-mode .aurora-card-entry p,
.pdf-export-mode .aurora-card-entry span,
.print-mode .aurora-card-entry span {
    font-size: 0.74rem;
}

.pdf-export-mode .aurora-card-entry strong,
.print-mode .aurora-card-entry strong {
    font-size: 0.78rem;
}

.pdf-export-mode .aurora-card-entry-head span,
.print-mode .aurora-card-entry-head span {
    font-size: 0.66rem;
}

.pdf-export-mode .aurora-card-skill-list,
.print-mode .aurora-card-skill-list {
    font-size: 0.68rem;
    line-height: 1.34;
}

.public-page.template-summit .resume-summit,
.public-page.template-summit.pdf-export-mode .resume-summit,
.public-page.template-summit.print-mode .resume-summit {
    background: linear-gradient(180deg, #fffdf8, #f5efe6);
    border-left: 8px solid #4f3a24;
}

.public-page.template-summit .summit-header {
    border-bottom: 1px solid rgba(79, 58, 36, 0.18);
}

.public-page.template-summit .summit-kicker {
    background: rgba(139, 94, 52, 0.12);
    color: #6a4724;
}

/* Richer template chooser previews */
.template-card {
    padding: 14px;
    border-radius: 18px;
}

.template-thumb {
    height: 158px;
    border-radius: 16px;
    margin-bottom: 12px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}

.template-thumb::before,
.template-thumb::after {
    content: "";
    position: absolute;
}

.template-thumb .template-lines {
    border-radius: 12px;
}

.template-thumb.template-minimal {
    background: linear-gradient(180deg, #fbfcff, #edf4f1);
}

.template-thumb.template-minimal::before {
    inset: 0 auto 0 0;
    width: 33%;
    background: linear-gradient(180deg, #eef4f1, #e3eee8);
}

.template-thumb.template-minimal::after {
    left: 18px;
    top: 14px;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(180deg, #dfe8e6, #b7c9c2);
    box-shadow: 0 82px 0 -60px rgba(37, 69, 56, 0.34);
}

.template-thumb.template-minimal .template-lines {
    inset: 16px 16px 16px 41%;
    background:
        linear-gradient(180deg, rgba(37, 69, 56, 0.9) 0 6px, transparent 6px 18px, rgba(120, 120, 120, 0.8) 18px 22px, transparent 22px 34px, rgba(170, 170, 170, 0.8) 34px 38px, transparent 38px 54px, rgba(170, 170, 170, 0.75) 54px 58px, transparent 58px);
}

.template-thumb.template-modern {
    background: linear-gradient(180deg, #ffffff, #f2f4f6);
}

.template-thumb.template-modern::before {
    left: 16px;
    top: 16px;
    width: 58px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(180deg, #d9e2dd, #b8c8c0);
}

.template-thumb.template-modern::after {
    left: 96px;
    right: 16px;
    top: 22px;
    height: 4px;
    background: #141414;
    box-shadow: 0 16px 0 #6b7280;
}

.template-thumb.template-modern .template-lines {
    inset: 58px 16px 16px;
    background:
        linear-gradient(90deg, rgba(17, 24, 39, 0.08) 0 34%, transparent 34% 39%, rgba(17, 24, 39, 0.08) 39% 100%),
        linear-gradient(180deg, rgba(92, 92, 92, 0.84) 0 4px, transparent 4px 18px, rgba(164, 164, 164, 0.78) 18px 22px, transparent 22px 36px, rgba(164, 164, 164, 0.78) 36px 40px, transparent 40px 55px, rgba(164, 164, 164, 0.78) 55px 59px, transparent 59px);
}

.template-thumb.template-executive {
    background: linear-gradient(180deg, #f6f6f6, #efefef);
}

.template-thumb.template-executive::before {
    left: 18px;
    top: 14px;
    width: 62px;
    height: 74px;
    border-radius: 18px;
    background: linear-gradient(180deg, #d7dde5, #b2bbc8);
}

.template-thumb.template-executive::after {
    left: 96px;
    right: 16px;
    top: 22px;
    height: 8px;
    background: #131c21;
    box-shadow: 0 20px 0 #7a7a7a;
}

.template-thumb.template-executive .template-lines {
    inset: 60px 16px 16px 92px;
    background:
        linear-gradient(180deg, rgba(34, 34, 34, 0.9) 0 5px, transparent 5px 18px, rgba(128, 128, 128, 0.8) 18px 22px, transparent 22px 36px, rgba(170, 170, 170, 0.8) 36px 40px, transparent 40px 54px, rgba(170, 170, 170, 0.8) 54px 58px, transparent 58px);
}

.template-thumb.template-aurora,
.template-thumb.template-nova {
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.2), transparent 26%),
        linear-gradient(180deg, #10192d, #f6fbf8 40%, #f6fbf8);
}

.template-thumb.template-aurora::before,
.template-thumb.template-nova::before {
    left: 14px;
    top: 14px;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: linear-gradient(180deg, #d7e2e6, #afbec9);
}

.template-thumb.template-aurora::after,
.template-thumb.template-nova::after {
    left: 88px;
    right: 16px;
    top: 18px;
    height: 30px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
}

.template-thumb.template-aurora .template-lines,
.template-thumb.template-nova .template-lines {
    inset: 56px 16px 16px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 52%, transparent 52% 56%, rgba(255, 255, 255, 0.12) 56% 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0 5px, transparent 5px 16px, rgba(180, 194, 228, 0.9) 16px 20px, transparent 20px 34px, rgba(255, 255, 255, 0.88) 34px 38px, transparent 38px 52px, rgba(255, 255, 255, 0.88) 52px 56px, transparent 56px);
}

.template-thumb.template-ledger,
.template-thumb.template-portfolio {
    background: linear-gradient(135deg, #10241b, #173228 58%, #20543d);
}

.template-thumb.template-ledger::before,
.template-thumb.template-portfolio::before {
    left: 14px;
    top: 14px;
    width: 34%;
    bottom: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
}

.template-thumb.template-ledger::after,
.template-thumb.template-portfolio::after {
    left: 24px;
    top: 20px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.24);
}

.template-thumb.template-ledger .template-lines,
.template-thumb.template-portfolio .template-lines {
    inset: 20px 16px 16px 42%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0 6px, transparent 6px 20px, rgba(169, 228, 198, 0.88) 20px 24px, transparent 24px 38px, rgba(255, 255, 255, 0.88) 38px 42px, transparent 42px 56px, rgba(255, 255, 255, 0.88) 56px 60px, transparent 60px);
}

.template-thumb.template-summit {
    background: linear-gradient(180deg, #fffdf7, #f4eee4);
}

.template-thumb.template-summit::before {
    left: 18px;
    top: 18px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ded7cc, #c1b5a0);
}

.template-thumb.template-summit::after {
    left: 92px;
    right: 16px;
    top: 24px;
    height: 4px;
    background: #1f2937;
    box-shadow: 0 18px 0 rgba(120, 120, 120, 0.9);
}

.template-thumb.template-summit .template-lines {
    inset: 60px 16px 16px;
    background:
        linear-gradient(90deg, rgba(58, 58, 58, 0.08) 0 40%, transparent 40% 46%, rgba(58, 58, 58, 0.08) 46% 100%),
        linear-gradient(180deg, rgba(58, 58, 58, 0.82) 0 4px, transparent 4px 18px, rgba(155, 155, 155, 0.76) 18px 22px, transparent 22px 36px, rgba(155, 155, 155, 0.76) 36px 40px, transparent 40px 54px, rgba(155, 155, 155, 0.76) 54px 58px, transparent 58px);
}

.public-hero {
    position: relative;
    min-height: 330px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 70% 15%, rgba(255, 185, 130, 0.48), transparent 12%),
        radial-gradient(circle at 72% 16%, rgba(255, 132, 86, 0.55), transparent 6%),
        linear-gradient(180deg, rgba(15, 18, 37, 0.18), rgba(15, 18, 37, 0.5)),
        linear-gradient(135deg, rgba(111, 76, 255, 0.5), rgba(12, 16, 46, 0.75)),
        linear-gradient(180deg, #5f76b2 0%, #34406e 45%, #18203d 100%);
}

.public-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(3, 7, 18, 0.42));
}

.public-hero-content {
    position: relative;
    z-index: 1;
    padding: 40px 20px 90px;
}

.profile-badge-avatar {
    width: 114px;
    height: 114px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: linear-gradient(180deg, #e8eef8, #c5d1e4);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    color: #445068;
    font-size: 3rem;
    border: 4px solid rgba(255, 255, 255, 0.72);
}

.public-hero-content h1 {
    margin: 0 0 6px;
    font-size: 2.7rem;
}

.public-hero-content p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.88);
}

.social-row {
    justify-content: center;
}

.social-row a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.14);
    display: grid;
    place-items: center;
    backdrop-filter: blur(8px);
}

.public-card-wrap {
    position: relative;
    margin-top: -70px;
    padding: 0 20px 60px;
}

.public-card {
    width: min(100%, 820px);
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(233, 232, 244, 0.9);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    padding: 34px 30px;
}

.content-section + .content-section {
    margin-top: 36px;
}

.content-section h2 {
    margin: 0 0 14px;
    font-size: 1.5rem;
}

.content-section p {
    color: #4e5568;
    line-height: 1.8;
    margin: 0;
}

.skill-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skill-cloud span {
    padding: 10px 14px;
    border-radius: 999px;
    background: #f4efff;
    color: #6b55dc;
    border: 1px solid #e6defd;
    font-weight: 600;
    font-size: 0.92rem;
}

.timeline {
    display: grid;
    gap: 20px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 16px;
}

.timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3ecff;
    color: #7a5cff;
    display: grid;
    place-items: center;
    font-weight: 700;
    margin-top: 2px;
}

.timeline-content {
    border-left: 1px solid #eee8ff;
    padding-left: 18px;
}

.timeline-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.timeline-top h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.timeline-top span {
    color: #8f94a8;
    font-size: 0.92rem;
}

.public-actions {
    justify-content: space-between;
    margin-top: 34px;
}

.status-card-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}

.status-card {
    width: min(100%, 520px);
    padding: 36px;
    border-radius: 22px;
    background: #fff;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.template-modern .public-card {
    background: linear-gradient(180deg, #ffffff, #f7f9ff);
}

.template-creative .public-card {
    background: linear-gradient(180deg, #ffffff, #f7fff9);
}

.template-executive .public-card {
    background: linear-gradient(180deg, #ffffff, #f2f7ff);
}

.print-mode .public-card-wrap {
    margin-top: -30px;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    html,
    body {
        background: #fff;
        width: 210mm;
        min-height: 297mm;
    }

    .no-print {
        display: none;
    }

    .sidebar,
    .public-dashboard-header,
    .public-theme-panel {
        display: none;
    }

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

    .dashboard-main {
        padding: 0;
    }

    .resume-stage {
        padding: 0;
    }

    .resume-sheet {
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        padding: 12mm;
        box-sizing: border-box;
        box-shadow: none;
        border-radius: 0;
        border: 0;
        overflow: hidden;
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (max-width: 1100px) {
    .hero-grid,
    .dashboard-columns,
    .landing-panels,
    .landing-showcase-grid,
    .landing-template-grid,
    .landing-workflow-grid,
    .dashboard-band-grid,
    .landing-cta-card,
    .profile-card-main,
    .overview-grid,
    .template-grid,
    .stats-row,
    .quick-link-grid,
    .helper-grid,
    .reference-grid,
    .modern-grid,
    .resume-minimal,
    .aurora-hero,
    .aurora-grid,
    .ledger-split,
    .nova-hero,
    .nova-grid,
    .portfolio-showcase,
    .portfolio-columns,
    .summit-grid,
    .summit-project-grid,
    .executive-grid,
    .executive-header,
    .profile-editor-hero,
    .profile-image-panel {
        grid-template-columns: 1fr;
    }

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

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .dashboard-main {
        padding-top: 20px;
    }

    .public-theme-panel {
        position: static;
        margin: 0 18px 8px auto;
        grid-auto-flow: column;
        align-items: center;
    }

    .public-profile-hero-main,
    .public-resume-shell,
    .public-profile-content-grid.has-banner-ads,
    .public-profile-sections,
    .public-profile-stats,
    .public-reference-grid {
        grid-template-columns: 1fr;
    }

    .public-profile-page .public-theme-panel,
    .public-profile-page .resume-sheet {
        grid-column: auto;
    }

    .public-profile-hero-card {
        padding: 22px;
    }

    .public-profile-sidebar {
        display: none;
    }

    .public-profile-avatar-wrap {
        width: 156px;
        height: 156px;
    }

    .resume-sheet {
        width: 100%;
        max-width: 100%;
    }

    .resume-ledger,
    .resume-portfolio {
        grid-template-columns: 1fr;
    }

    .aurora-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .landing-preview-float {
        position: static;
        margin-top: 18px;
    }

    .landing-section-head,
    .landing-cta-card {
        align-items: flex-start;
    }
}

@media (max-width: 800px) {
    .public-profile-hero .container,
    .public-profile-main-wrap .container {
        width: min(calc(100% - 20px), var(--container));
    }

    .dashboard-page.profile-app-page .profile-app-panel {
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    .dashboard-page.profile-app-page .public-profile-page-app .public-profile-hero {
        padding-top: 0;
    }

    .dashboard-page.profile-app-page .public-profile-page-app .public-profile-main-wrap {
        padding-bottom: 12px;
    }

    .dashboard-page,
    .dashboard-layout,
    .dashboard-main,
    .dashboard-columns,
    .dashboard-primary,
    .dashboard-header,
    .panel,
    .panel-form,
    .editor-form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .container {
        width: min(calc(100% - 32px), var(--container));
    }

    .public-site-header-inner,
    .public-site-header-actions,
    .public-profile-hero-actions,
    .public-profile-hero-main,
    .public-profile-badge-row {
        align-items: stretch;
    }

    .public-profile-hero-card {
        gap: 18px;
        padding: 16px;
        border-radius: 22px;
    }

    .public-profile-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .public-profile-search {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .public-profile-hero-main {
        grid-template-columns: 1fr;
        justify-items: start;
        align-items: start;
        text-align: left;
        gap: 12px;
    }

    .public-profile-avatar-wrap {
        width: 112px;
        height: 112px;
        margin-inline: 0;
    }

    .public-profile-copy h1 {
        margin: 8px 0 4px;
        font-size: 1.55rem;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .public-profile-copy {
        display: grid;
        justify-items: stretch;
        width: 100%;
        gap: 8px;
        min-width: 0;
    }

    .public-profile-sidebar {
        display: none;
    }

    .public-profile-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .public-profile-about,
    .public-content-card p {
        text-align: left;
        max-width: none;
        overflow-wrap: anywhere;
    }

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

    .public-profile-facts .public-fact-pill,
    .public-profile-socials a {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        min-width: 0;
    }

    .public-profile-hero-actions .button,
    .public-profile-hero-actions button {
        width: 100%;
    }

    .public-download-label-full {
        display: inline;
    }

    .public-download-label-short {
        display: none;
    }

    .public-project-card {
        width: 100%;
    }

    .public-profile-main {
        max-width: 100%;
        margin: 0;
    }

    .public-content-card,
    .public-stat-card {
        padding: 16px;
        border-radius: 20px;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    }

    .public-profile-copy,
    .public-profile-about,
    .public-profile-role,
    .public-profile-socials a,
    .public-contact-card span,
    .public-contact-card strong {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 560px) {
    .dashboard-page.profile-app-page .dashboard-main {
        padding-inline: 10px;
    }

    .public-profile-hero-card {
        padding: 14px;
        border-radius: 20px;
    }

    .public-profile-hero-main {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .public-profile-avatar-wrap {
        width: 108px;
        height: 108px;
        margin-inline: 0;
    }

    .public-profile-copy {
        justify-items: stretch;
        text-align: left;
    }

    .public-profile-badge-row {
        justify-content: flex-start;
    }

    .public-profile-facts {
        grid-template-columns: 1fr;
    }

    .public-profile-about,
    .public-content-card p {
        text-align: left;
    }

    .public-contact-grid,
    .public-profile-hero-actions {
        grid-template-columns: 1fr;
    }

    .public-content-card,
    .public-stat-card {
        padding: 14px;
        border-radius: 18px;
    }


    .public-timeline-top {
        flex-direction: column;
        gap: 6px;
    }

    .topbar,
    .dashboard-header,
    .panel-header,
    .timeline-top,
    .panel-footer,
    .entry-top,
    .public-toolbar {
        flex-direction: column;
    }

    .topnav {
        display: none;
    }

    .hero-copy h1 {
        font-size: 2.75rem;
    }

    .hero-copy p {
        font-size: 1.05rem;
    }

    .landing-metric-strip,
    .landing-template-grid,
    .landing-showcase-grid,
    .landing-workflow-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .public-profile-hero .container,
    .public-profile-main-wrap .container {
        width: min(calc(100% - 16px), var(--container));
    }

    .landing-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .floating-badge-card {
        min-width: 0;
    }

    .profile-card-large,
    .public-card,
    .panel {
        padding: 22px;
    }

    .dashboard-main {
        padding: 0 12px 118px;
    }

    .dashboard-columns {
        gap: 12px;
    }

    .dashboard-header {
        padding: 4px 2px 0;
    }

    .dashboard-header h1,
    .dashboard-header p,
    .panel-header > div,
    .section-title-icon {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .panel.panel-form {
        padding: 16px;
    }

    .panel-header {
        gap: 10px;
    }

    .status-badge {
        align-self: flex-start;
        width: auto;
        max-width: 100%;
    }

    .editor-form {
        margin-top: 16px;
    }

    .form-grid.two,
    .form-grid.stats-grid {
        grid-template-columns: 1fr;
    }

    .editor-dual-grid {
        grid-template-columns: 1fr;
    }

    .profile-editor-hero {
        gap: 14px;
        margin-bottom: 16px;
    }

    .profile-image-panel,
    .profile-highlight-card {
        padding: 14px;
        border-radius: 16px;
    }

    .profile-image-panel {
        gap: 14px;
    }

    .profile-highlight-card {
        display: none;
    }

    .profile-image-frame,
    .profile-image-copy,
    .profile-highlight-top,
    .profile-highlight-meta,
    .repeatable-block,
    .repeatable-item,
    .repeatable-item > .form-grid,
    .editor-section-card > * {
        min-width: 0;
        max-width: 100%;
    }

    .profile-highlight-meta {
        display: grid;
        grid-template-columns: 1fr;
    }

    .profile-highlight-meta span {
        width: 100%;
    }

    .editor-section-nav {
        display: none;
    }

    .settings-tab-nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 16px;
    }

    .settings-tab-nav a {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 13px 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(223, 229, 238, 0.95);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    }

    .editor-section-nav::-webkit-scrollbar {
        display: none;
    }

    .editor-section-nav a,
    .editor-tab-button {
        width: 100%;
        flex: 1 1 100%;
        white-space: normal;
        text-align: left;
        justify-content: space-between;
        padding: 12px 14px;
        font-size: 0.78rem;
    }

    .editor-tab-button::after {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(20, 133, 88, 0.14);
        color: currentColor;
        font-size: 0.95rem;
        font-weight: 800;
        line-height: 1;
        flex: 0 0 18px;
    }

    .editor-tab-button.is-active::after {
        content: '-';
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    .editor-section-card {
        display: grid;
        gap: 0;
        margin-bottom: 10px;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(214, 223, 235, 0.95);
        border-radius: 14px;
        background: #fff;
        box-shadow: none;
    }

    .editor-accordion-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 14px;
        border: 0;
        background: transparent;
        color: #17324c;
        font-size: 0.9rem;
        font-weight: 800;
        text-align: left;
        cursor: pointer;
    }

    .editor-accordion-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .editor-accordion-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 10px;
        background: #edf7f1;
        color: #148558;
        flex: 0 0 28px;
    }

    .editor-accordion-icon svg {
        width: 16px;
        height: 16px;
    }

    .editor-accordion-text {
        min-width: 0;
    }

    .editor-accordion-toggle::after {
        content: '+';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: rgba(20, 133, 88, 0.1);
        color: #148558;
        font-size: 1rem;
        font-weight: 800;
        line-height: 1;
        flex: 0 0 22px;
    }

    .editor-accordion-toggle.is-active::after {
        content: '-';
        background: rgba(20, 133, 88, 0.16);
    }

    .editor-section-body {
        display: none;
        padding: 0 14px 14px;
        border-top: 1px solid rgba(225, 232, 241, 0.92);
    }

    .editor-section-card.is-active .editor-section-body {
        display: grid;
        gap: 14px;
    }

    .editor-section-head,
    .repeatable-item-top {
        flex-direction: column;
        align-items: stretch;
    }

    .editor-section-head p {
        font-size: 0.8rem;
        margin-top: 0;
    }

    .editor-section-head h3 {
        display: none;
    }

    .editor-repeatable-add,
    .editor-add-row {
        width: 100%;
        justify-content: center;
    }

    .repeatable-item-top {
        flex-direction: row;
        align-items: center;
    }

    .upload-field,
    .remove-image-toggle {
        width: 100%;
        justify-content: center;
    }

    .profile-image-copy small {
        text-align: center;
    }

    #profileForm input,
    #profileForm textarea {
        min-height: 46px;
        padding: 11px 12px;
        font-size: 0.9rem;
        border-radius: 10px;
        border-color: #d7deea;
        background: #fff;
        box-shadow: none;
    }

    #profileForm textarea {
        min-height: 120px;
        line-height: 1.55;
    }

    .tag-editor-card,
    .repeatable-item {
        padding: 12px;
        border-radius: 12px;
        border: 1px solid rgba(219, 227, 237, 0.92);
        background: #fff;
        box-shadow: none;
    }

    .editor-section-card-experience .repeatable-block {
        gap: 12px;
    }

    .editor-section-card-experience .repeatable-item {
        padding: 12px;
        border-radius: 12px;
    }

    .editor-section-card-experience label > span {
        font-size: 0.82rem;
        font-weight: 700;
    }

    .editor-section-card-experience textarea {
        min-height: 132px;
    }

    .editor-form > .form-actions {
        display: none;
    }

    .subscription-pay-form.editor-form > .form-actions {
        display: flex;
    }

    .editor-section-mobile-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 8px;
        z-index: 6;
    }

    .editor-section-mobile-actions .button {
        width: 100%;
        justify-content: center;
    }

    .editor-section-mobile-actions .button:only-child {
        grid-column: 1 / -1;
    }

    .editor-section-next {
        background: #f6f8fb;
        border-color: #dde5ee;
        color: #203247;
    }

    .editor-repeatable-add {
        border-style: dashed;
        background: #f7f9fc;
        border-color: #d7e0ea;
        color: #203247;
    }

    .repeatable-item-top strong {
        font-size: 0.86rem;
        font-weight: 700;
    }

    .repeatable-remove-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        background: #fff7f8;
        flex-basis: 30px;
    }

    .mobile-app-header {
        width: 100%;
        max-width: 100%;
        margin: 0 0 12px;
        padding: 10px 0 12px;
        overflow: visible;
    }

    .mobile-app-header-top {
        width: 100%;
        min-width: 0;
    }

    .mobile-app-brand {
        min-width: 0;
        max-width: calc(100% - 50px);
    }

    .public-card-wrap {
        margin-top: -46px;
    }

    .resume-modern,
    .resume-executive,
    .resume-aurora,
    .resume-nova,
    .resume-summit,
    .minimal-main,
    .minimal-side {
        padding: 26px 22px;
    }

    .profile-image-preview {
        width: 120px;
        height: 120px;
    }

    .resume-name-block h1,
    .executive-name h1,
    .modern-header h1,
    .aurora-identity h1,
    .ledger-side h1,
    .nova-profile-card h1,
    .portfolio-brand-card h1,
    .summit-header h1 {
        font-size: 2.2rem;
    }

    .aurora-identity,
    .nova-profile-card {
        grid-template-columns: 1fr;
    }

    .aurora-avatar,
    .nova-avatar,
    .ledger-avatar,
    .portfolio-avatar {
        width: 112px;
        height: 112px;
    }

    .aurora-stats {
        grid-template-columns: 1fr;
    }


    .modern-header p,
    .executive-name p {
        font-size: 1.15rem;
        letter-spacing: 0.08em;
    }

    .public-toolbar {
        align-items: stretch;
    }
}

@media (max-width: 520px) {
    .dashboard-main {
        padding: 0 10px 120px;
    }

    .panel.panel-form {
        padding: 14px;
        border-radius: 18px;
    }

    .dashboard-header h1 {
        font-size: 1.38rem;
        line-height: 1.14;
    }

    .dashboard-header p,
    .panel-header p {
        font-size: 0.84rem;
    }

    .profile-image-preview {
        width: 104px;
        height: 104px;
        border-radius: 18px;
    }

    .profile-image-copy h3,
    .profile-highlight-card h3,
    .editor-section-head h3 {
        font-size: 0.98rem;
    }

    .profile-highlight-badge,
    .profile-highlight-status,
    .profile-highlight-meta span,
    .editor-tab-button,
    .editor-section-nav a {
        font-size: 0.74rem;
    }

    .profile-highlight-card {
        display: none;
    }

    .editor-section-mobile-actions {
        grid-template-columns: 1fr;
    }

}

.landing-page-v2 {
    background:
        radial-gradient(circle at top left, rgba(24, 165, 102, 0.09), transparent 28%),
        radial-gradient(circle at top right, rgba(95, 68, 245, 0.08), transparent 24%),
        #f5f7fb;
    color: var(--text);
}

.landing-page-v2 .landing-shell {
    padding: 0 0 72px;
}

.home-shell {
    min-height: 100vh;
}

.home-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
    background: rgba(245, 247, 251, 0.82);
    border-bottom: 1px solid rgba(223, 229, 238, 0.9);
}

.home-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 76px;
}

.home-brand {
    color: var(--text);
    font-size: 1.1rem;
}

.home-menu-toggle,
.home-mobile-menu {
    display: none;
}

.home-nav,
.home-header-actions,
.home-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.home-nav a {
    color: #5b6475;
    font-size: 0.92rem;
    font-weight: 600;
}

.home-login-link {
    color: #4e5668;
    font-size: 0.92rem;
    font-weight: 600;
}

.home-header-button {
    padding: 10px 16px;
    font-size: 0.92rem;
}

.home-menu-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(223, 229, 238, 0.95);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    align-items: center;
    justify-content: center;
    color: #475569;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.home-menu-toggle-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.home-menu-toggle-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.home-mobile-menu {
    padding: 0 0 14px;
}

.home-mobile-menu[hidden],
.mobile-app-menu[hidden] {
    display: none !important;
}

.home-mobile-menu-links,
.home-mobile-menu-actions {
    display: grid;
    gap: 10px;
}

.home-mobile-menu-links {
    padding: 14px;
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(223, 229, 238, 0.95);
    border-bottom: none;
}

.home-mobile-menu-links a,
.home-mobile-menu-actions a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-weight: 700;
}

.home-mobile-menu-links a {
    justify-content: flex-start;
    padding: 0 14px;
    color: #475569;
    background: #f8fafc;
}

.home-mobile-menu-actions {
    padding: 12px 14px 14px;
    border-radius: 0 0 22px 22px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(223, 229, 238, 0.95);
    border-top: 1px solid rgba(237, 242, 247, 0.95);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
}

.home-hero {
    padding: 58px 0 36px;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
    gap: 34px;
    align-items: center;
}

.home-badge,
.home-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(24, 165, 102, 0.11);
    color: var(--primary-dark);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-badge-icon,
.home-card-icon,
.home-check-item span:first-child {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-badge-icon svg,
.home-card-icon svg,
.home-check-item span:first-child svg,
.home-proof-list span:first-child svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.home-hero-copy h1 {
    margin: 16px 0 14px;
    max-width: 640px;
    color: #111827;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.home-hero-copy p {
    max-width: 600px;
    margin: 0;
    color: #5f6b7c;
    font-size: 1rem;
    line-height: 1.8;
}

.home-hero-actions {
    margin-top: 22px;
}

.home-hero-actions .button {
    padding: 12px 18px;
    border-radius: 13px;
    font-size: 0.94rem;
}

.home-proof-list {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.home-proof-list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #4f5a6a;
    font-size: 0.92rem;
    font-weight: 600;
}

.home-proof-list span:first-child {
    width: 18px;
    height: 18px;
    display: inline-flex;
    color: var(--primary-dark);
}

.home-hero-preview {
    position: relative;
    overflow: hidden;
}

.home-preview-card,
.home-card,
.home-band,
.home-cta {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(224, 230, 239, 0.95);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.home-preview-card {
    overflow: hidden;
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home-preview-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

.home-preview-card:focus-visible {
    outline: 3px solid rgba(24, 165, 102, 0.25);
    outline-offset: 3px;
}

.home-preview-carousel {
    position: relative;
    overflow: hidden;
}

.home-preview-controls {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.home-preview-control {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(209, 218, 232, 0.95);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.home-preview-control:hover {
    transform: translateY(-1px);
    background: #fff;
    border-color: rgba(24, 165, 102, 0.35);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
}

.home-preview-control:focus-visible {
    outline: 3px solid rgba(24, 165, 102, 0.22);
    outline-offset: 2px;
}

.home-preview-track {
    display: flex;
    width: 100%;
    transition: transform 560ms ease;
    will-change: transform;
}

.home-preview-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.home-preview-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid rgba(224, 230, 239, 0.95);
}

.home-window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c4ccd8;
}

.home-preview-url {
    margin-left: 6px;
    color: #7b8493;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-preview-main {
    padding: 24px;
}

.home-preview-profile {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 18px;
    align-items: center;
}

.home-preview-avatar-wrap {
    border-radius: 20px;
    background: linear-gradient(180deg, #e9eef6, #d8e1ef);
    padding: 8px;
}

.home-preview-avatar {
    width: 100%;
    height: 132px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.home-preview-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #8aa0bf, #5a6f90);
    color: #fff;
    font-size: 2.3rem;
    font-weight: 800;
}

.home-kicker {
    display: inline-block;
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.home-preview-like-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 236, 240, 0.96);
    border: 1px solid rgba(252, 204, 214, 0.95);
    color: #be123c;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.home-preview-like-icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e11d48;
    flex: 0 0 12px;
    overflow: hidden;
}

.home-preview-like-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

.home-preview-like-icon svg path {
    fill: currentColor;
}

.home-preview-copy h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 1.5rem;
}

.home-preview-role,
.home-preview-location {
    margin: 0;
    font-size: 0.92rem;
}

.home-preview-role {
    color: #344054;
    font-weight: 600;
}

.home-preview-location {
    color: #7a8698;
}

.home-preview-summary {
    margin-top: 10px;
    color: #5f6b7c;
    font-size: 0.92rem;
    line-height: 1.75;
    text-align: left;
    text-justify: auto;
    hyphens: none;
    word-break: normal;
    overflow-wrap: anywhere;
}

.home-preview-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.home-preview-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #fff;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
}

.home-preview-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.66);
    flex: 0 0 auto;
}

.home-preview-stat-card svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.home-preview-stat-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.home-preview-stat-copy strong {
    color: #0f172a;
    font-size: 1rem;
    line-height: 1;
}

.home-preview-stat-copy small {
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-preview-open {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #118856;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-preview-open::after {
    content: '\2192';
    font-size: 0.96rem;
}

.home-preview-stat-card.icon-briefcase {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(147, 197, 253, 0.9);
    color: #2563eb;
}

.home-preview-stat-card.icon-spark {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(253, 230, 138, 0.92);
    color: #d97706;
}

.home-preview-stat-card.icon-folder {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(221, 214, 254, 0.94);
    color: #7c3aed;
}

.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.home-stat-box {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 14px 12px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.95);
    text-align: center;
}

.home-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(20, 133, 88, 0.1);
    color: #148558;
}

.home-stat-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.home-stat-box strong {
    display: block;
    color: #0f172a;
    font-size: 1.15rem;
}

.home-stat-label {
    display: block;
    margin-top: 4px;
    color: #7b8493;
    font-size: 0.78rem;
    font-weight: 600;
}

.home-top-liked-marquee {
    position: relative;
    margin-top: 16px;
    overflow: hidden;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
}

.home-top-liked-track {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    animation: home-top-liked-marquee 36s linear infinite;
}

.home-top-liked-marquee:hover .home-top-liked-track {
    animation-play-state: paused;
}

.home-top-liked-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(247, 250, 252, 0.98);
    border: 1px solid rgba(226, 232, 240, 0.92);
    color: #0f172a;
    text-decoration: none;
}

.home-top-liked-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(20, 133, 88, 0.1);
    color: #148558;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.home-top-liked-name {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.home-top-liked-pill-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
    color: #be123c;
    font-size: 0.82rem;
    line-height: 1;
}

.home-top-liked-pill-like strong {
    font-size: 0.85rem;
}

.home-top-liked-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #e11d48;
}

.home-top-liked-pill-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

@keyframes home-top-liked-marquee {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.home-section {
    padding: 28px 0;
}

.home-section-soft {
    padding: 36px 0;
}

.home-section-heading {
    max-width: 760px;
    margin-bottom: 22px;
}

.home-section-heading-inline {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.home-section-heading h2,
.home-band h2,
.home-cta h2 {
    margin: 12px 0 10px;
    color: #111827;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.home-section-heading p,
.home-band p,
.home-cta p {
    margin: 0;
    color: #5f6b7c;
    font-size: 0.98rem;
    line-height: 1.8;
}

.home-feature-grid,
.home-template-grid,
.home-step-grid,
.home-faq-list,
.home-blog-grid,
.home-contact-shell {
    display: grid;
    gap: 18px;
}

.home-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-template-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-card {
    padding: 22px;
}

.home-card h3 {
    margin: 14px 0 8px;
    color: #111827;
    font-size: 1.02rem;
}

.home-card p {
    margin: 0;
    color: #647082;
    font-size: 0.92rem;
    line-height: 1.75;
}

.home-empty-card {
    max-width: 420px;
}

.home-contact-shell {
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.95fr);
    align-items: start;
}

.home-contact-card {
    padding: 24px;
}

.home-contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.home-contact-form label {
    display: grid;
    gap: 8px;
}

.home-contact-form label.full {
    grid-column: 1 / -1;
}

.home-contact-form label > span {
    font-weight: 700;
    color: #344256;
    font-size: 0.9rem;
}

.home-contact-form input,
.home-contact-form textarea {
    width: 100%;
    border: 1px solid #dbe4ee;
    border-radius: 16px;
    padding: 13px 15px;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-contact-form input:focus,
.home-contact-form textarea:focus {
    border-color: rgba(17, 136, 86, 0.4);
    box-shadow: 0 0 0 4px rgba(17, 136, 86, 0.08);
}

.home-contact-form textarea {
    resize: vertical;
    min-height: 150px;
}

.home-template-card {
    position: relative;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(217, 226, 236, 0.95);
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 249, 252, 0.98));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-template-card:hover {
    transform: translateY(-3px);
    border-color: rgba(24, 165, 102, 0.24);
    box-shadow: 0 22px 38px rgba(15, 23, 42, 0.09);
}

.home-template-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(24, 165, 102, 0.09);
    color: var(--primary-dark);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(24, 165, 102, 0.11);
    color: var(--primary-dark);
}

.home-template-card .template-thumb {
    width: 100%;
    margin-bottom: 16px;
    height: 168px;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        0 14px 24px rgba(15, 23, 42, 0.08);
}

.home-template-card .template-lines {
    border-radius: 14px;
}

.home-template-card h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.home-template-card p {
    font-size: 0.88rem;
    line-height: 1.68;
}

.home-template-card .template-thumb.template-modern {
    background:
        radial-gradient(circle at top right, rgba(24, 165, 102, 0.18), transparent 28%),
        linear-gradient(180deg, #ffffff, #edf6f2);
}

.home-template-card .template-thumb.template-modern::before {
    content: "";
    position: absolute;
    inset: 14px 16px auto;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f172a, #244c3f);
}

.home-template-card .template-thumb.template-modern .template-lines {
    inset: 52px 16px 16px;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0 36%, transparent 36% 40%, rgba(24, 165, 102, 0.08) 40% 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0 5px, transparent 5px 18px, rgba(100, 116, 139, 0.7) 18px 22px, transparent 22px 35px, rgba(100, 116, 139, 0.7) 35px 39px, transparent 39px 52px, rgba(100, 116, 139, 0.7) 52px 56px, transparent 56px);
}

.home-template-card .template-thumb.template-da {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 30%),
        linear-gradient(135deg, #0f172a, #1d4ed8 56%, #f8fafc 56%, #eff6ff 100%);
}

.home-template-card .template-thumb.template-da::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(180deg, #dbeafe, #93c5fd);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18);
}

.home-template-card .template-thumb.template-da .template-lines {
    inset: 20px 16px 18px 44%;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0 8px, transparent 8px 24px, rgba(71, 85, 105, 0.75) 24px 28px, transparent 28px 42px, rgba(120, 136, 160, 0.72) 42px 46px, transparent 46px 62px, rgba(120, 136, 160, 0.72) 62px 66px, transparent 66px);
}

.home-template-card .template-thumb.template-classic {
    background: linear-gradient(180deg, #fffefc, #f6f2ea);
}

.home-template-card .template-thumb.template-classic::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 18px;
    height: 3px;
    background: #1f2937;
}

.home-template-card .template-thumb.template-classic .template-lines {
    inset: 34px 18px 16px;
    background:
        linear-gradient(180deg, rgba(17, 24, 39, 0.82) 0 4px, transparent 4px 18px, rgba(107, 114, 128, 0.76) 18px 22px, transparent 22px 34px, rgba(156, 163, 175, 0.74) 34px 38px, transparent 38px 50px, rgba(156, 163, 175, 0.74) 50px 54px, transparent 54px 68px, rgba(156, 163, 175, 0.74) 68px 72px, transparent 72px);
}

.home-template-card .template-thumb.template-advanced-classic {
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.18), transparent 28%),
        linear-gradient(180deg, #ffffff, #eef2f7);
}

.home-template-card .template-thumb.template-advanced-classic::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    width: 42px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(180deg, #d8dee9, #b8c2d1);
}

.home-template-card .template-thumb.template-advanced-classic .template-lines {
    inset: 18px 16px 18px 38%;
    background:
        linear-gradient(180deg, rgba(17, 24, 39, 0.84) 0 6px, transparent 6px 20px, rgba(100, 116, 139, 0.72) 20px 24px, transparent 24px 38px, rgba(156, 163, 175, 0.72) 38px 42px, transparent 42px 56px, rgba(156, 163, 175, 0.72) 56px 60px, transparent 60px);
}

.home-template-card .template-thumb.template-standard {
    background:
        radial-gradient(circle at top right, rgba(79, 70, 229, 0.14), transparent 24%),
        linear-gradient(180deg, #ffffff, #eef4ff);
}

.home-template-card .template-thumb.template-standard::before {
    content: "";
    position: absolute;
    inset: 14px 16px auto;
    height: 30px;
    border-radius: 16px;
    background: linear-gradient(90deg, #1e3a8a, #3b82f6);
}

.home-template-card .template-thumb.template-standard .template-lines {
    inset: 56px 16px 16px;
    background:
        linear-gradient(90deg, rgba(30, 58, 138, 0.08) 0 50%, transparent 50% 54%, rgba(59, 130, 246, 0.08) 54% 100%),
        linear-gradient(180deg, rgba(30, 58, 138, 0.8) 0 5px, transparent 5px 18px, rgba(100, 116, 139, 0.72) 18px 22px, transparent 22px 36px, rgba(100, 116, 139, 0.72) 36px 40px, transparent 40px 54px, rgba(100, 116, 139, 0.72) 54px 58px, transparent 58px);
}

.home-template-card .template-thumb.template-monochrome {
    background: linear-gradient(180deg, #ffffff, #f1f5f9);
}

.home-template-card .template-thumb.template-monochrome::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 32%;
    background: linear-gradient(180deg, #111827, #334155);
}

.home-template-card .template-thumb.template-monochrome .template-lines {
    inset: 16px 14px 16px 40%;
    background:
        linear-gradient(180deg, rgba(17, 24, 39, 0.92) 0 6px, transparent 6px 18px, rgba(100, 116, 139, 0.76) 18px 22px, transparent 22px 34px, rgba(156, 163, 175, 0.74) 34px 38px, transparent 38px 50px, rgba(156, 163, 175, 0.74) 50px 54px, transparent 54px);
}

.home-step-number {
    display: inline-flex;
    margin-bottom: 2px;
    color: var(--primary);
    font-size: 1.45rem;
    font-weight: 800;
}

.home-band,
.home-cta {
    padding: 28px;
}

.home-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: center;
}

.home-check-grid {
    display: grid;
    gap: 14px;
}

.home-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.95);
    color: #435063;
    font-size: 0.92rem;
    font-weight: 600;
}

.home-check-item span:first-child {
    color: var(--primary-dark);
    flex-shrink: 0;
}

.home-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

@media (max-width: 1100px) {
    .home-hero-grid,
    .home-feature-grid,
    .home-template-grid,
    .home-step-grid,
    .home-band,
    .home-cta,
    .home-faq-list,
    .home-blog-grid,
    .home-contact-shell {
        grid-template-columns: 1fr;
    }

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

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

    .home-section-heading-inline,
    .home-cta {
        align-items: flex-start;
    }
}

@media (max-width: 800px) {
    .home-section-heading-inline,
    .home-cta,
    .home-preview-profile {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .home-nav {
        display: none;
    }

    .home-header {
        background: rgba(245, 247, 251, 0.96);
    }

    .home-header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-height: 72px;
        padding: 10px 0;
    }

    .home-brand {
        min-width: 0;
        align-self: center;
    }

    .home-header-actions {
        display: none;
    }

    .home-menu-toggle {
        display: inline-flex;
    }

    .home-mobile-menu {
        display: block;
    }

    .home-preview-avatar-wrap,
    .profile-directory-avatar {
        background: linear-gradient(180deg, #eef3f9, #dde6f2);
    }

    .home-preview-avatar,
    .profile-directory-avatar img {
        object-fit: contain;
        object-position: center top;
        background: #eef3f9;
    }

    .home-preview-url {
        display: none;
    }

    .home-preview-profile {
        grid-template-columns: 76px 1fr;
        gap: 14px;
        align-items: center;
    }

    .home-preview-avatar-wrap {
        width: 76px;
        height: 76px;
        padding: 4px;
        border-radius: 999px;
        overflow: hidden;
    }

    .home-preview-avatar {
        height: 100%;
        border-radius: 999px;
        object-fit: cover;
        object-position: center;
        background: #eef3f9;
    }

    .home-preview-avatar-fallback {
        border-radius: 999px;
        font-size: 1.5rem;
    }

    .home-hero {
        padding-top: 34px;
    }

    .home-preview-main,
    .home-card,
    .home-band,
    .home-cta {
        padding: 18px;
    }

    .home-stats-grid,
    .home-feature-grid,
    .home-template-grid,
    .home-step-grid,
    .home-faq-list,
    .home-blog-grid,
    .home-contact-form {
        grid-template-columns: 1fr;
    }

    .home-template-card {
        padding: 16px;
    }

    .home-template-card .template-thumb {
        height: 156px;
        margin-bottom: 12px;
    }

    .home-preview-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
    }

    .home-preview-controls {
        top: 12px;
        right: 12px;
        gap: 8px;
    }

    .home-preview-control {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .home-preview-stat-card {
        justify-content: flex-start;
        padding: 8px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .home-preview-stat-icon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.06);
    }

    .home-preview-stat-card svg {
        width: 16px;
        height: 16px;
    }

    .home-preview-stat-copy strong {
        font-size: 0.88rem;
    }

    .home-preview-stat-copy small {
        display: block;
        font-size: 0.66rem;
    }

    .home-preview-open {
        margin-top: 16px;
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 14px;
        background: linear-gradient(135deg, #16a34a, #118856);
        color: #fff;
        box-shadow: 0 14px 28px rgba(17, 136, 86, 0.24);
    }

    .home-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 16px;
    }

    .home-stat-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 48px;
        padding: 10px 8px;
        border-radius: 14px;
    }

    .home-stat-icon {
        width: 26px;
        height: 26px;
        border-radius: 9px;
        flex: 0 0 26px;
    }

    .home-stat-icon svg {
        width: 14px;
        height: 14px;
    }

    .home-stat-box strong {
        font-size: 0.92rem;
        line-height: 1;
    }

    .home-stat-label {
        display: none;
    }

    .home-top-liked-marquee {
        margin-top: 12px;
        padding: 10px;
        border-radius: 16px;
    }

    .home-top-liked-track {
        gap: 8px;
        animation-duration: 28s;
    }

    .home-top-liked-pill {
        gap: 8px;
        padding: 8px 12px;
    }

    .home-top-liked-rank {
        min-width: 30px;
        height: 30px;
        padding: 0 8px;
        font-size: 0.76rem;
    }

    .home-top-liked-name {
        font-size: 0.82rem;
    }

    .home-top-liked-pill-like,
    .home-top-liked-pill-like strong {
        font-size: 0.76rem;
    }

    .home-hero-copy h1 {
        font-size: 2rem;
    }

    .home-hero-copy p,
    .home-section-heading p,
    .home-card p,
    .home-band p,
    .home-cta p {
        font-size: 0.92rem;
    }
}

.sidebar-user-card {
    display: grid;
    gap: 4px;
    margin-bottom: 18px;
    padding: 14px;
    border-radius: 16px;
    background: #f6fbf8;
    border: 1px solid #d9eee2;
}

.sidebar-user-card strong {
    color: #1f2937;
    font-size: 0.94rem;
}

.sidebar-user-card span {
    color: #6b7280;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.dashboard-user-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe7df;
    color: #4b5563;
    font-size: 0.86rem;
    font-weight: 600;
}

.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(24, 165, 102, 0.11), transparent 24%),
        radial-gradient(circle at top right, rgba(95, 68, 245, 0.12), transparent 20%),
        #f4f7fb;
    color: var(--text);
}

.auth-shell {
    width: min(calc(100% - 40px), 1120px);
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.85fr);
    gap: 24px;
    align-items: center;
    padding: 40px 0;
}

.auth-panel {
    border-radius: 30px;
    border: 1px solid rgba(225, 232, 240, 0.95);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
}

.auth-panel-brand {
    padding: 40px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 20%),
        linear-gradient(135deg, #0d1a34, #132347 56%, #153c3a);
    color: #fff;
}

.auth-brand {
    color: #fff;
    margin-bottom: 32px;
}

.auth-kicker,
.welcome-modal-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.auth-panel-brand h1 {
    margin: 18px 0 14px;
    font-size: clamp(2rem, 3vw, 2.9rem);
    line-height: 1.08;
}

.auth-panel-brand p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.8;
}

.auth-feature-list {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.auth-feature-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-feature-list span {
    width: 18px;
    height: 18px;
    display: inline-flex;
    color: #9ff1c6;
    flex-shrink: 0;
}

.auth-feature-list span svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.auth-panel-form {
    background: rgba(255, 255, 255, 0.97);
    padding: 34px;
}

.auth-card-head h2 {
    margin: 14px 0 8px;
    font-size: 2rem;
    color: #111827;
}

.auth-card-head p {
    margin: 0;
    color: #6b7280;
    line-height: 1.75;
}

.auth-alert {
    margin-top: 18px;
    padding: 13px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-alert-error {
    background: #fff2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.auth-alert-success {
    background: #eefcf4;
    border: 1px solid #b8e3cb;
    color: #0f7f4c;
}

.auth-form {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.auth-form label {
    display: grid;
    gap: 8px;
}

.auth-form label span {
    color: #374151;
    font-size: 0.88rem;
    font-weight: 700;
}

.auth-form input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid #dce4ec;
    background: #fff;
    color: #111827;
}

.auth-form input:focus {
    outline: none;
    border-color: #9fd8b7;
    box-shadow: 0 0 0 4px rgba(24, 165, 102, 0.08);
}

.auth-reactivate-box {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(245, 158, 11, 0.24);
    background: linear-gradient(180deg, #fffaf0, #fff7ed);
}

.auth-reactivate-box > strong {
    display: block;
    color: #92400e;
    font-size: 0.98rem;
}

.auth-reactivate-box > p {
    margin: 8px 0 0;
    color: #9a3412;
    line-height: 1.7;
}

.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #dbe2ea;
    background: #f8fafc;
}

.auth-checkbox input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #18a566;
    flex: 0 0 auto;
}

.auth-checkbox span {
    color: #334155;
    font-size: 0.94rem;
    line-height: 1.65;
    font-weight: 600;
}

.auth-checkbox a,
.auth-footer-note-links a {
    color: #118856;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-form-note {
    margin: -6px 0 0;
    color: #64748b;
    font-size: 0.87rem;
    line-height: 1.6;
}

.auth-footer-note-links {
    margin-top: 10px;
}

.terms-page {
    min-height: 100vh;
}

.terms-hero {
    padding: 30px 0 26px;
}

.terms-hero-inner {
    display: grid;
    gap: 18px;
}

.terms-hero-inner h1 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.08;
}

.terms-hero-inner p {
    margin: 0;
    max-width: 860px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.02rem;
    line-height: 1.85;
}

.terms-hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

.terms-section {
    padding: 0 0 72px;
}

.terms-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.terms-summary-card,
.terms-card {
    border-radius: 26px;
    border: 1px solid rgba(225, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.terms-summary-card {
    position: sticky;
    top: 108px;
    padding: 24px;
}

.terms-summary-card strong {
    display: block;
    font-size: 1.08rem;
    margin-bottom: 10px;
}

.terms-summary-card p {
    margin: 0 0 16px;
    color: #475569;
    line-height: 1.75;
}

.terms-summary-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: #334155;
    line-height: 1.65;
}

.terms-content {
    display: grid;
    gap: 18px;
}

.terms-card {
    padding: 24px 26px;
}

.terms-card h2 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 1.08rem;
}

.terms-card p {
    margin: 0;
    color: #475569;
    line-height: 1.85;
}

.auth-submit {
    margin-top: 6px;
    width: 100%;
    padding: 13px 18px;
}

.auth-footer-note {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: #6b7280;
    font-size: 0.92rem;
}

.auth-footer-note a {
    color: var(--primary-dark);
    font-weight: 700;
}

.modal-open {
    overflow: hidden;
    height: 100vh;
}

html.modal-open,
body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.modal-open {
    position: fixed;
    inset: 0;
    width: 100%;
}

.welcome-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 12px;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(6px);
    overscroll-behavior: contain;
}

.welcome-modal {
    position: relative;
    width: min(100%, 540px);
    padding: 30px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(225, 232, 240, 0.95);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

.welcome-modal.welcome-modal-form {
    width: min(calc(100vw - 28px), 1080px) !important;
    height: calc(100vh - 28px);
    max-width: 1080px;
    max-height: calc(100vh - 28px);
    border-radius: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 18px clamp(16px, 2.2vw, 26px);
}

.welcome-modal-header {
    position: sticky;
    top: -18px;
    z-index: 2;
    margin: -18px clamp(-16px, -2.2vw, -26px) 0;
    padding: 18px clamp(16px, 2.2vw, 26px) 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff);
    border-bottom: 1px solid rgba(225, 232, 240, 0.95);
}

.welcome-modal-kicker {
    background: rgba(24, 165, 102, 0.1);
    color: var(--primary-dark);
}

.welcome-modal h2 {
    margin: 10px 0 8px;
    color: #111827;
    font-size: 1.35rem;
    line-height: 1.15;
}

.welcome-modal p {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.6;
}

.welcome-modal-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 12px;
    position: sticky;
    bottom: -18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), #ffffff 38%);
}

.welcome-modal-editor {
    margin-top: 12px;
}

.welcome-form-section {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(225, 232, 240, 0.95);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.welcome-form-section-head {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
}

.welcome-form-section-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
}

.welcome-form-section-head .section-title-icon {
    gap: 0;
}

.welcome-form-section-head .section-icon {
    display: none;
}

.welcome-form-section-head p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.45;
}

.welcome-profile-hero {
    margin-bottom: 0;
}

.welcome-profile-stack {
    display: grid;
    gap: 10px;
}

.welcome-modal-form .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.welcome-modal-form label {
    display: grid;
    gap: 6px;
    font-size: 0.84rem;
}

.welcome-modal-form input,
.welcome-modal-form textarea,
.welcome-modal-form select {
    min-height: 40px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 0.88rem;
}

.welcome-modal-form select {
    padding-right: 38px;
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 10px) calc(50% - 2px);
}

.welcome-modal-form textarea {
    min-height: 92px;
}

.welcome-modal-form .repeatable-item {
    position: relative;
    padding: 14px;
    border-radius: 12px;
}

.welcome-stats-grid {
    margin-bottom: 12px;
}

.welcome-modal-form .social-label-with-icon {
    min-height: 20px;
}

.welcome-modal-form .add-row {
    margin-top: 12px;
}

.welcome-modal-form .button {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 0.88rem;
    border-radius: 10px;
}

.welcome-modal-form .repeatable-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
}

.welcome-modal-form .repeatable-remove-compact {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 999px;
    background: #fff5f5;
    border-color: rgba(248, 113, 113, 0.24);
    color: #dc2626;
    font-size: 1rem;
    line-height: 1;
}

.welcome-modal-form .repeatable-remove-compact:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.welcome-modal-status {
    width: fit-content;
    margin-bottom: 10px;
}

.welcome-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    font-size: 1.15rem;
}

.social-label-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.social-label-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #374151;
}

.social-label-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.editor-form label span small {
    color: #9aa0b5;
    font-size: 0.78rem;
    font-weight: 600;
}

.profiles-directory-hero {
    padding-top: 48px;
}

.profiles-directory-heading h1 {
    margin: 12px 0 10px;
    color: #111827;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.profiles-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(224, 230, 239, 0.95);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.profiles-search-field {
    display: grid;
    gap: 8px;
}

.profiles-search-field span {
    color: #374151;
    font-size: 0.86rem;
    font-weight: 700;
}

.profiles-search-field input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid #dce4ec;
    background: #fff;
    color: #111827;
}

.profiles-search-field input:focus {
    outline: none;
    border-color: #9fd8b7;
    box-shadow: 0 0 0 4px rgba(24, 165, 102, 0.08);
}

.profiles-search-button {
    align-self: end;
    min-height: 50px;
    padding-inline: 22px;
}

.profiles-directory-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
    color: #5f6b7c;
}

.profiles-directory-summary strong {
    color: #111827;
    font-size: 1.4rem;
}

.discover-mobile-helper {
    display: none;
}

.discover-featured-desktop {
    margin: 0 0 18px;
}

.discover-featured-mobile {
    display: none;
}

.discover-mobile-sections {
    display: none;
}

.discover-top-viewed-card {
    padding: 24px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, 0.16), transparent 26%),
        radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.18), transparent 30%),
        linear-gradient(180deg, #ffffff, #f7f9fc);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 26px 52px rgba(15, 23, 42, 0.1);
}

.discover-top-viewed-main {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    gap: 22px;
    align-items: center;
}

.discover-top-viewed-copy {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.discover-top-viewed-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
    color: #111827;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.discover-top-viewed-copy h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.discover-top-viewed-role {
    margin: 0;
    color: #374151;
    font-size: 1.04rem;
    font-weight: 700;
}

.discover-top-viewed-summary {
    margin: 0;
    color: #647082;
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 62ch;
}

.discover-top-viewed-meta,
.discover-top-viewed-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.discover-top-viewed-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    color: #445164;
    font-size: 0.84rem;
    font-weight: 700;
}

.discover-top-viewed-meta span svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex: 0 0 16px;
}

.discover-top-viewed-side {
    display: grid;
    gap: 16px;
}

.discover-top-viewed-avatar {
    width: 148px;
    height: 148px;
    margin-left: auto;
    border-radius: 999px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.95);
    background: linear-gradient(180deg, #dce6f3, #c8d4e6);
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 800;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
}

.discover-top-viewed-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.discover-top-viewed-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.discover-top-viewed-insights span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
    color: #526173;
    font-size: 0.8rem;
    font-weight: 800;
}

.discover-featured-card {
    position: relative;
    overflow: hidden;
}

.discover-featured-status {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(254, 202, 202, 0.92);
    backdrop-filter: blur(10px);
    color: #b91c1c;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.discover-featured-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.discover-featured-copy h2 {
    color: inherit;
}

.discover-featured-copy p {
    color: inherit;
}

.discover-featured-actions {
    padding-top: 0;
}

.discover-mobile-section {
    display: grid;
    gap: 12px;
}

.discover-mobile-section h3 {
    margin: 0;
    color: #111827;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.discover-compact-list {
    display: grid;
    gap: 12px;
}

.discover-compact-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    position: relative;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(228, 234, 241, 0.96);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.discover-compact-like-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(254, 205, 211, 0.95);
    color: #be123c;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.discover-compact-like-badge.is-liked {
    background: rgba(255, 241, 242, 0.98);
    border-color: rgba(251, 113, 133, 0.32);
}

.discover-compact-like-badge strong {
    font-size: 0.76rem;
    line-height: 1;
}

.discover-compact-like-badge-icon,
.discover-compact-like-badge-icon svg {
    width: 13px;
    height: 13px;
    display: block;
    fill: currentColor;
}

.discover-compact-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.discover-compact-avatar {
    width: 62px;
    height: 62px;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid rgba(190, 214, 83, 0.9);
    background: linear-gradient(180deg, #dce6f3, #c8d4e6);
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    flex: 0 0 62px;
}

.discover-compact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.discover-compact-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.discover-compact-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.discover-compact-copy p {
    margin: 0;
    color: #4b5563;
    font-size: 0.82rem;
    line-height: 1.3;
}

.discover-compact-copy span {
    color: #7b8798;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.discover-compact-share {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(228, 234, 241, 0.96);
    background: #fff;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.discover-compact-share span {
    width: 16px;
    height: 16px;
    display: inline-flex;
}

.discover-compact-share span svg {
    width: 100%;
    height: 100%;
    display: block;
}

.discover-compact-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
}

.discover-compact-stat {
    display: grid;
    justify-items: center;
    gap: 4px;
}

.discover-compact-stat strong {
    color: #111827;
    font-size: 0.88rem;
}

.discover-compact-stat span {
    color: #7b8798;
    font-size: 0.64rem;
    font-weight: 700;
    text-align: center;
}

.discover-compact-like {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 8px 6px;
    border-radius: 16px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    background: rgba(248, 250, 252, 0.96);
    color: #64748b;
    font: inherit;
    appearance: none;
}

.discover-compact-like.is-liked {
    background: rgba(255, 241, 242, 0.96);
    border-color: rgba(251, 113, 133, 0.34);
    color: #be123c;
}

.discover-compact-like-icon,
.discover-compact-like-icon svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}

.discover-compact-like strong {
    font-size: 0.88rem;
    line-height: 1;
}

.discover-compact-like [data-like-label] {
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.discover-compact-view {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
}

.discover-compact-view svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.profiles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.discover-cards-viewport {
    min-width: 0;
    max-width: 100%;
}

.profile-directory-card {
    display: grid;
    gap: 18px;
    position: relative;
    overflow: hidden;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.profile-directory-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 15, 31, 0.06), transparent 28%),
        radial-gradient(circle at top right, rgba(129, 140, 248, 0.12), transparent 28%),
        radial-gradient(circle at top left, rgba(244, 114, 182, 0.12), transparent 24%);
    pointer-events: none;
}

.profile-directory-cover {
    height: 112px;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(79, 70, 229, 0.45)),
        radial-gradient(circle at top left, rgba(244, 114, 182, 0.3), transparent 34%),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.28), transparent 28%),
        linear-gradient(135deg, #eef7f2, #eef3fb);
}

.profile-directory-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    margin-top: -34px;
}

.profile-directory-avatar {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, #dce6f3, #c8d4e6);
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 0.96);
    box-shadow:
        0 16px 28px rgba(15, 23, 42, 0.16),
        0 0 0 4px rgba(244, 114, 182, 0.18),
        0 0 0 8px rgba(99, 102, 241, 0.1);
}

.profile-directory-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-directory-copy h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 1.12rem;
}

.profile-directory-email {
    display: block;
    margin-bottom: 4px;
    color: #8b97a8;
    font-size: 0.8rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.profile-directory-copy p {
    margin: 0;
    color: #647082;
    font-size: 0.9rem;
    line-height: 1.7;
}

.profile-directory-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 22px;
}

.profile-directory-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(221, 229, 238, 0.72);
    color: #516073;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.profile-directory-pill.is-live {
    background: rgba(24, 165, 102, 0.1);
    border-color: rgba(184, 227, 203, 0.95);
    color: #0f7f4c;
}

.profile-directory-pill.is-draft {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(253, 230, 138, 0.95);
    color: #a16207;
}

.profile-directory-like-pill {
    gap: 6px;
    color: #64748b;
    background: rgba(248, 250, 252, 0.96);
    border-color: rgba(203, 213, 225, 0.95);
    cursor: pointer;
    font: inherit;
    appearance: none;
}

.profile-directory-like-pill.is-liked {
    color: #be123c;
    background: rgba(255, 241, 242, 0.96);
    border-color: rgba(251, 113, 133, 0.34);
}

.profile-directory-like-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.profile-directory-like-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.profile-directory-summary {
    margin: 0;
    padding: 0 22px;
    color: #647082;
    font-size: 0.92rem;
    line-height: 1.78;
}

.profile-directory-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 22px 22px;
}

.profile-directory-actions .button {
    min-width: 138px;
    justify-content: center;
}

.profile-directory-share-button {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(220, 228, 236, 0.95);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

.profile-directory-share-button span {
    width: 16px;
    height: 16px;
    display: inline-flex;
}

.profile-directory-share-button span svg {
    width: 100%;
    height: 100%;
    display: block;
}

.profile-directory-more {
    white-space: nowrap;
}

.profile-directory-story-kicker {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

.profile-directory-mobile-like-indicator {
    display: none;
}

.profiles-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 24px;
}

@media (max-width: 1100px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .profiles-search-form {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 800px) {
    .site-settings-grid,
    .site-settings-mock-grid {
        grid-template-columns: 1fr;
    }

    .site-settings-card,
    .site-settings-mock-panel {
        padding: 16px;
    }

    .site-settings-card-head,
    .site-settings-navbar-preview {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-settings-navbar-preview.is-mobile-preview {
        max-width: 100%;
    }

    .site-settings-navbar-links {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    .brand-logo img {
        max-height: 42px;
        max-width: 210px;
    }

    .settings-config-row {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .settings-config-copy strong {
        font-size: 0.94rem;
    }

    .settings-config-copy small {
        font-size: 0.82rem;
    }

    .settings-config-toggle {
        width: 100%;
        justify-content: space-between;
        margin-top: 2px;
        padding-top: 10px;
        border-top: 1px solid rgba(223, 229, 238, 0.9);
    }

    .settings-config-state {
        text-align: right;
    }

    .discover-page {
        overflow-x: hidden;
    }

    .discover-page,
    .discover-page .dashboard-layout,
    .discover-page .dashboard-main,
    .discover-page .dashboard-columns,
    .discover-page .dashboard-primary,
    .discover-page .discover-results-panel,
    .discover-page .discover-cards-viewport {
        min-width: 0;
        max-width: 100%;
    }

    .dashboard-page {
        background:
            radial-gradient(circle at top, rgba(24, 165, 102, 0.08), transparent 26%),
            #f5f7fb;
    }

    .dashboard-page .button {
        padding: 9px 14px;
        border-radius: 12px;
        font-size: 0.82rem;
    }

    .mobile-app-header {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        margin: 0 0 14px;
        padding: 10px 2px 12px;
        background: linear-gradient(180deg, rgba(245, 247, 251, 0.98), rgba(245, 247, 251, 0.9));
        backdrop-filter: blur(14px);
    }

    .mobile-app-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }

    .mobile-app-brand {
        font-size: 1rem;
        gap: 8px;
    }

    .mobile-app-menu-button {
        width: 38px;
        height: 38px;
        border: 1px solid rgba(223, 229, 238, 0.95);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.98);
        color: #4b5563;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .mobile-app-menu-icon {
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: currentColor;
    }

    .mobile-app-menu-icon svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor;
    }

    .mobile-app-menu {
        position: absolute;
        top: calc(100% - 2px);
        right: 0;
        min-width: 160px;
        padding: 7px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(223, 229, 238, 0.95);
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    }

    .mobile-app-menu a {
        display: block;
        padding: 9px 11px;
        border-radius: 10px;
        color: #465264;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .mobile-app-menu a:hover {
        background: rgba(24, 165, 102, 0.08);
        color: var(--primary-dark);
    }

    .sidebar {
        display: none;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        padding: 6px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(223, 229, 238, 0.95);
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
        backdrop-filter: blur(18px);
    }

    .mobile-bottom-nav-item {
        display: grid;
        justify-items: center;
        gap: 4px;
        padding: 8px 4px 7px;
        border-radius: 14px;
        color: #657185;
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
    }

    .mobile-bottom-nav-icon {
        width: 16px;
        height: 16px;
    }

    .mobile-bottom-nav-item.active {
        background: rgba(24, 165, 102, 0.12);
        color: var(--primary-dark);
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .dashboard-main {
        padding: 18px 14px 104px;
    }

    .dashboard-header {
        padding: 6px 2px 0;
    }

    .dashboard-header h1 {
        font-size: 1.5rem;
        line-height: 1.12;
    }

    .dashboard-header-actions {
        display: none;
    }

    .panel,
    .metric-card,
    .home-card,
    .profile-directory-card {
        border-radius: 20px;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    }

    .overview-grid,
    .dashboard-columns,
    .helper-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 16px 0 12px;
    }

    .panel-header,
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-side {
        display: none;
    }

    .quick-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .quick-link-card {
        border-radius: 18px;
        min-height: 74px;
    }

    .form-actions .button,
    .template-action-row .button {
        width: 100%;
        justify-content: center;
    }

    .template-action-row,
    .cv-download-actions,
    .cv-download-card,
    .cv-dashboard-entry,
    .cv-dashboard-entry-actions,
    .discover-live-shell,
    .discover-profile-spotlight-top,
    .discover-profile-spotlight-actions,
    .discover-owner-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .cv-download-card {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cv-download-preview-frame {
        min-height: 220px;
        padding: 12px;
    }

    .cv-preview-embed-canvas {
        width: 148px;
        height: 210px;
    }


    .discover-live-shell,
    .public-profile-sections {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        width: min(calc(100% - 20px), 520px);
        min-height: auto;
        grid-template-columns: 1fr;
        align-items: start;
        padding: 8px 0 20px;
    }

    .auth-panel-form,
    .welcome-modal {
        padding: 18px;
    }

    .welcome-modal.welcome-modal-form {
        width: min(calc(100vw - 16px), 100%);
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
        padding: 16px 14px;
    }

    .auth-panel-brand {
        display: none;
    }

    .auth-panel-form {
        border-radius: 24px;
    }

    .auth-card-head h2 {
        margin: 10px 0 6px;
        font-size: 1.68rem;
    }

    .auth-card-head p {
        line-height: 1.55;
    }

    .auth-form {
        gap: 14px;
        margin-top: 18px;
    }

    .auth-submit {
        margin-top: 2px;
        padding: 12px 16px;
    }

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

    .terms-summary-card {
        position: static;
    }

    .terms-card,
    .terms-summary-card {
        border-radius: 22px;
    }


    .auth-footer-note,
    .welcome-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .welcome-modal-actions {
        bottom: -16px;
    }

    .dashboard-available-cv-copy {
        align-items: center;
    }

    .dashboard-available-cv-card {
        flex-direction: row;
        align-items: center;
        padding: 12px 14px;
        border-radius: 16px;
    }

    .dashboard-home-card {
        min-height: 100px;
        padding: 14px;
        border-radius: 18px;
    }

    .dashboard-home-card strong {
        font-size: 1rem;
    }

    .dashboard-home-card small,
    .dashboard-home-card .metric-card-head span:last-child {
        font-size: 0.74rem;
    }

    .dashboard-home-toggle {
        margin-top: 8px;
        padding: 6px 8px;
        font-size: 0.72rem;
    }

    .dashboard-home-toggle-switch {
        width: 34px;
        height: 20px;
    }

    .dashboard-home-toggle-knob {
        width: 14px;
        height: 14px;
    }

    .dashboard-home-toggle-input:checked + .dashboard-home-toggle-switch .dashboard-home-toggle-knob {
        transform: translateX(14px);
    }

    .dashboard-profile-strip {
        gap: 8px;
        margin-bottom: 12px;
    }

    .dashboard-profile-strip > span {
        padding: 7px 10px;
        font-size: 0.74rem;
    }

    .dashboard-available-cv-copy strong {
        font-size: 0.9rem;
    }

    .dashboard-available-cv-copy p {
        font-size: 0.78rem;
    }

    .dashboard-available-cv-icon,
    .dashboard-available-cv-download {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    .cv-color-option {
        width: 34px;
        height: 34px;
    }

    .cv-color-swatch {
        width: 16px;
        height: 16px;
    }

    .cv-download-direct {
        min-width: 96px;
        height: 40px;
        border-radius: 14px;
    }

    .profiles-search-form {
        padding: 16px;
        border-radius: 20px;
        gap: 12px;
    }

    .discover-live-controls,
    .discover-profile-spotlight {
        padding: 16px;
    }

    .discover-toggle-row {
        padding: 14px 15px;
    }

    .discover-owner-panel-mobile .panel-header p,
    .discover-results-panel .panel-header p,
    .discover-profile-spotlight-summary,
    .discover-live-controls p {
        font-size: 0.84rem;
        line-height: 1.6;
    }

    .discover-profile-spotlight {
        gap: 14px;
        border-radius: 20px;
        padding-top: 54px;
    }

    .discover-profile-spotlight-avatar {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
        border-radius: 999px;
        font-size: 1.45rem;
    }

    .discover-profile-spotlight-copy h3 {
        font-size: 1.05rem;
    }

    .discover-owner-links {
        gap: 8px;
    }

    .discover-owner-links a {
        font-size: 0.84rem;
    }

    .discover-story-stats,
    .discover-story-detail-list,
    .profile-directory-detail-list,
    .profile-directory-story-footer {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .home-header-actions,
    .home-hero-actions,
    .profile-directory-actions {
        width: 100%;
    }

    .home-header-actions .button,
    .profile-directory-actions .button,
    .profiles-search-button {
        width: 100%;
    }

    .profiles-directory-heading h1 {
        font-size: clamp(1.7rem, 7vw, 2.35rem);
    }

    .discover-featured-mobile {
        display: block;
        margin: 0 0 18px;
    }

    .discover-featured-desktop {
        display: none;
    }

    .discover-mobile-sections {
        display: none;
    }

    .discover-mobile-helper {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 14px;
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(227, 233, 241, 0.95);
        color: #6b7280;
        font-size: 0.74rem;
        font-weight: 700;
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
    }

    .discover-mobile-helper-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(135deg, #10b981, #6366f1);
    }

    .discover-page .discover-cards-viewport {
        display: block;
        overflow: visible;
    }

    .discover-page .discover-profiles-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        overflow: visible;
        padding: 2px 0 8px;
        scroll-snap-type: none;
        touch-action: auto;
    }

    .profiles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .profile-directory-card {
        gap: 0;
        padding: 14px 14px 16px;
        border-radius: 24px;
        width: 100%;
        min-width: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.98));
        border: 1px solid rgba(230, 236, 244, 0.95);
        box-shadow:
            0 24px 48px rgba(15, 23, 42, 0.1),
            0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    }

    .profile-directory-cover {
        display: block;
        height: 82px;
        margin: -14px -14px 0;
        border-radius: 24px 24px 16px 16px;
        position: relative;
    }

    .profile-directory-top,
    .profile-directory-pill-row,
    .profile-directory-summary,
    .profile-directory-actions {
        padding-inline: 0;
    }

    .profile-directory-top {
        align-items: center;
        margin-top: -14px;
        gap: 10px;
        min-width: 0;
        position: relative;
        z-index: 1;
    }

    .profile-directory-avatar {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .profile-directory-story-kicker {
        top: 14px;
        left: 14px;
        padding: 7px 11px;
        font-size: 0.66rem;
    }

    .profile-directory-avatar {
        width: 62px;
        height: 62px;
        border-radius: 999px;
        border-width: 3px;
        box-shadow:
            0 14px 22px rgba(15, 23, 42, 0.16),
            0 0 0 3px rgba(244, 114, 182, 0.12),
            0 0 0 7px rgba(99, 102, 241, 0.06);
    }

    .profile-directory-copy h2 {
        font-size: 1.02rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .profile-directory-email {
        font-size: 0.75rem;
        margin-bottom: 3px;
        overflow-wrap: anywhere;
    }

    .profile-directory-copy p {
        font-size: 0.84rem;
        line-height: 1.48;
        overflow-wrap: anywhere;
    }

    .profile-directory-detail-list {
        margin-top: 14px;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .profile-directory-detail-item {
        padding: 12px 14px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid rgba(231, 236, 243, 0.96);
        backdrop-filter: none;
        box-shadow: none;
    }

    .profile-directory-pill-row {
        margin-top: 12px;
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        max-width: 100%;
    }

    .profile-directory-pill-row::-webkit-scrollbar {
        display: none;
    }

    .profile-directory-pill {
        padding: 7px 10px;
        font-size: 0.7rem;
    }

    .profile-directory-summary,
    .profile-directory-download {
        display: block;
        padding-inline: 0;
        margin-top: 12px;
        font-size: 0.8rem;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #667085;
    }

    .profile-directory-story-footer {
        margin-top: 14px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .profile-directory-story-stat {
        padding: 11px 10px;
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff, #f8fafc);
        border: 1px solid rgba(231, 236, 243, 0.96);
        backdrop-filter: none;
        box-shadow: none;
        text-align: center;
    }

    .profile-directory-actions {
        margin-top: 16px;
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        gap: 8px;
        align-items: center;
        max-width: 100%;
    }

    .profile-directory-actions .button {
        min-width: 0;
    }

    .profile-directory-share-button,
    .profile-directory-more,
    .profile-directory-actions .button.primary {
        width: 100%;
    }

    .profile-directory-more,
    .profile-directory-actions .button.primary {
        padding-inline: 12px;
    }

    .profile-directory-more {
        background: #f8fafc;
        border-color: rgba(228, 234, 241, 0.96);
        color: #475467;
    }

    .profile-directory-actions .button.primary {
        box-shadow: 0 12px 24px rgba(24, 165, 102, 0.22);
    }

    .profile-directory-mobile-like-indicator {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 68px;
        height: 68px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        color: #fff;
        background: radial-gradient(circle, rgba(244, 63, 94, 0.95), rgba(225, 29, 72, 0.85));
        box-shadow: 0 18px 30px rgba(225, 29, 72, 0.24);
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.65);
        pointer-events: none;
        z-index: 3;
    }

    .profile-directory-mobile-like-indicator span {
        width: 28px;
        height: 28px;
        display: inline-flex;
    }

    .profile-directory-mobile-like-indicator span svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor;
    }

    .profile-directory-mobile-like-indicator.is-animating {
        animation: mobile-like-pop 0.56s ease;
    }

    .profile-directory-card.is-liked {
        box-shadow:
            0 18px 36px rgba(15, 23, 42, 0.1),
            0 0 0 1px rgba(251, 113, 133, 0.14);
    }

    .public-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .public-stat-card {
        padding: 14px;
        border-radius: 18px;
    }

    .dashboard-template-panel {
        display: none;
    }
}

@media (max-width: 560px) {
    .discover-featured-cover {
        height: 176px;
    }

    .discover-featured-head {
        gap: 14px;
        margin-top: -58px;
        padding-inline: 16px;
    }

    .discover-featured-avatar {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
        font-size: 1.8rem;
    }

    .discover-featured-copy h2 {
        font-size: 1.42rem;
    }

    .discover-featured-copy p {
        font-size: 0.92rem;
    }

    .discover-featured-meta {
        gap: 6px 12px;
        font-size: 0.8rem;
    }

    .discover-featured-actions {
        padding: 0 16px 16px;
    }

    .discover-compact-card {
        padding: 13px;
        border-radius: 20px;
    }

    .discover-compact-avatar {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .discover-page .dashboard-main {
        padding-inline: 12px;
    }

    .discover-owner-panel-mobile,
    .discover-results-panel {
        border-radius: 18px;
    }

    .discover-owner-panel-mobile .panel-header,
    .discover-results-panel .panel-header {
        gap: 10px;
    }

    .discover-live-shell {
        gap: 12px;
    }

    .discover-profile-spotlight,
    .discover-live-controls,
    .profiles-search-form {
        padding: 14px;
    }

    .profiles-directory-summary {
        display: grid;
        gap: 2px;
        margin-bottom: 16px;
    }

    .profile-directory-card {
        padding: 14px 14px 16px;
        border-radius: 24px;
    }

    .profile-directory-cover {
        margin: -14px -14px 0;
        height: 156px;
        border-radius: 24px 24px 20px 20px;
    }

    .profile-directory-story-kicker {
        top: 12px;
        left: 12px;
    }

    .profile-directory-top {
        gap: 10px;
        margin-top: -40px;
    }

    .profile-directory-avatar {
        width: 68px;
        height: 68px;
    }

    .profile-directory-copy h2 {
        font-size: 0.96rem;
    }

    .profile-directory-email,
    .profile-directory-copy p {
        font-size: 0.78rem;
    }

    .profile-directory-actions {
        grid-template-columns: 38px 1fr 1fr;
        gap: 7px;
    }

    .profile-directory-share-button {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}

@media (max-width: 640px) {
    .cv-preview-topbar,
    .cv-preview-next {
        width: calc(100vw - 24px);
        margin-inline: auto;
        border-radius: 20px;
    }

    .cv-preview-topbar,
    .cv-preview-next,
    .cv-preview-topbar-actions,
    .cv-preview-next-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cv-preview-topbar {
        margin-top: 12px;
        padding: 18px;
    }

    .cv-preview-next {
        padding: 14px 16px;
        margin-top: 12px;
        margin-bottom: 20px;
    }

    .cv-preview-topbar-actions .button,
    .cv-preview-next-button {
        width: 100%;
        justify-content: center;
    }

    .cv-mobile-download-panel {
        width: calc(100vw - 24px);
        margin-inline: auto;
        padding: 16px;
        border-radius: 20px;
    }

    .cv-mobile-download-copy strong {
        font-size: 1rem;
    }

    .cv-mobile-download-copy p {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .cv-page .cv-template-sheet {
        max-width: 100%;
        border-radius: 0;
    }

    .cv-standard-header,
    .cv-modern-header,
    .cv-monochrome-header {
        padding-inline: 18px;
    }

    .cv-standard-content,
    .cv-da-layout,
    .cv-da-grid,
    .cv-modern-content,
    .cv-monochrome-content,
    .cv-classic-grid {
        grid-template-columns: 1fr;
    }

    .cv-standard-body,
    .cv-da-sidebar,
    .cv-da-main,
    .cv-monochrome-main {
        padding: 18px;
    }

    .cv-standard-header,
    .cv-modern-identity,
    .cv-monochrome-header,
    .cv-monochrome-profile,
    .cv-advanced-classic-header,
    .cv-advanced-classic-profile,
    .cv-classic-header,
    .cv-entry-header,
    .cv-modern-entry-head,
    .cv-classic-entry-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .cv-standard-contact {
        text-align: left;
    }

    .cv-monochrome-contact-strip {
        justify-items: start;
    }

    .cv-monochrome-section-wide,
    .cv-monochrome-side {
        grid-column: auto;
        grid-row: auto;
    }

    .cv-classic-contact {
        justify-items: start;
    }

    .cv-advanced-classic-contact {
        justify-items: start;
    }

    .cv-modern-project-grid,
    .cv-modern-reference-grid {
        grid-template-columns: 1fr;
    }
}

.public-site-footer {
    margin-top: 48px;
    padding: 56px 0 24px;
    background:
        radial-gradient(circle at top left, rgba(36, 184, 119, 0.16), transparent 30%),
        linear-gradient(180deg, #0b1436, #060c24);
    color: rgba(255, 255, 255, 0.92);
}

.public-site-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.public-site-footer-brand-block {
    display: grid;
    gap: 16px;
    max-width: 560px;
}

.public-site-footer-logo-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
}

.public-site-footer-logo {
    display: block;
    max-width: min(320px, 100%);
    max-height: 104px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.public-site-footer-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-site-footer-brand-block h2 {
    margin: 0;
    font-size: clamp(1.6rem, 2vw, 2.2rem);
    line-height: 1.18;
    color: #ffffff;
}

.public-site-footer-brand-block p,
.public-site-footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
}

.public-site-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 6px;
}

.public-site-footer-secondary-button {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.public-site-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.public-site-footer-column {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 24px 22px;
    min-height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 40px rgba(4, 10, 36, 0.22);
}

.public-site-footer-column h2 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #ffffff;
}

.public-site-footer-column a {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.public-site-footer-column a:hover {
    color: #ffffff;
    transform: translateX(2px);
}

.public-site-footer-bottom {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 960px) {
    .public-site-footer-inner {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .public-site-footer {
        margin-top: 32px;
        padding-top: 36px;
    }

    .public-site-footer-column {
        padding: 18px;
        border-radius: 18px;
    }

    .public-site-footer-brand-block h2 {
        font-size: 1.45rem;
    }

    .public-site-footer-actions {
        flex-direction: column;
    }

    .public-site-footer-actions .button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .discover-featured-cover {
        height: 166px;
    }

    .discover-featured-head {
        flex-direction: column;
        align-items: flex-start;
        margin-top: -50px;
        padding-inline: 14px;
    }

    .discover-featured-avatar {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
    }

    .discover-featured-copy h2 {
        font-size: 1.22rem;
    }

    .discover-featured-icon-row,
    .discover-featured-actions {
        padding-inline: 14px;
    }


    .discover-compact-main {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .discover-compact-share {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .discover-compact-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .discover-page .dashboard-main {
        padding-inline: 10px;
    }

    .profile-directory-card {
        padding: 13px 13px 15px;
    }

    .profile-directory-cover {
        margin: -13px -13px 0;
        height: 146px;
    }

    .discover-story-kicker,
    .profile-directory-story-kicker {
        width: auto;
        max-width: calc(100% - 26px);
    }

    .profile-directory-top {
        align-items: flex-start;
    }

    .profile-directory-copy {
        min-width: 0;
    }

    .profile-directory-copy h2,
    .profile-directory-email,
    .profile-directory-copy p {
        overflow-wrap: anywhere;
    }

    .profile-directory-actions {
        grid-template-columns: 1fr 1fr;
    }

    .profile-directory-share-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@keyframes mobile-like-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.65);
    }

    35% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.24);
    }
}

/* Discover redesign */
.discover-page .dashboard-main,
.discover-page .home-section {
    position: relative;
}

.discover-page .discover-overview-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    gap: 18px;
    padding: 26px;
    border-radius: 30px;
    border: 1px solid rgba(224, 230, 239, 0.96);
    background:
        radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(24, 165, 102, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.discover-page .discover-overview-copy {
    display: grid;
    gap: 10px;
    align-content: start;
}

.discover-page .discover-overview-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.06);
    color: #1f2937;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.discover-page .discover-overview-copy h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.discover-page .discover-overview-copy p {
    margin: 0;
    color: #647082;
    font-size: 0.98rem;
    line-height: 1.85;
    max-width: 62ch;
}

.discover-page .discover-overview-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}

.discover-page .discover-overview-stat {
    display: grid;
    gap: 6px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.96);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.discover-page .discover-overview-stat strong {
    color: #111827;
    font-size: clamp(1.2rem, 2.4vw, 1.65rem);
    line-height: 1;
}

.discover-page .discover-overview-stat span {
    color: #7b8798;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.discover-page .discover-results-panel {
    padding: 22px;
    border-radius: 30px;
    border: 1px solid rgba(224, 230, 239, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.98));
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.discover-page .discover-results-panel .panel-header {
    margin-bottom: 4px;
}

.discover-page .profiles-search-form {
    border-radius: 22px;
    padding: 18px;
    border-color: rgba(224, 230, 239, 0.96);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

/* Site ads */
.site-ad-admin-sections {
    display: grid;
    gap: 22px;
}

.site-ad-admin-help {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.site-ad-admin-help-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.site-ad-admin-help-card strong {
    color: #111827;
    font-size: 0.98rem;
}

.site-ad-admin-help-card p {
    margin: 0;
    color: #64748b;
    font-size: 0.91rem;
    line-height: 1.7;
}

.site-ad-admin-section {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.site-ad-admin-section-head,
.site-ad-admin-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.site-ad-admin-section-head h4,
.site-ad-admin-item-head strong {
    margin: 0;
    color: #111827;
}

.site-ad-admin-section-head p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
}

.site-ad-admin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: #1f2937;
    font-size: 0.86rem;
    font-weight: 700;
}

.site-ad-admin-toggle input {
    margin: 0;
}

.site-ad-admin-list {
    display: grid;
    gap: 16px;
}

.site-ad-admin-guide {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.site-ad-admin-guide-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    color: #4338ca;
    font-size: 0.79rem;
    font-weight: 700;
}

.site-ad-admin-guide-chip.is-dark {
    background: rgba(17, 24, 39, 0.08);
    color: #111827;
}

.site-ad-admin-guide-text,
.site-ad-admin-guide-tip {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.65;
}

.site-ad-admin-guide-tip {
    color: #475569;
    font-weight: 600;
}

.site-ad-admin-item {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(226, 232, 240, 0.98);
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.site-ad-admin-remove {
    min-width: auto;
}

.site-ad-admin-preview-surface {
    display: grid;
    place-items: center;
    min-height: 220px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.94));
}

.site-ad-admin-preview-surface img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.site-ad-admin-preview-empty {
    display: grid;
    gap: 12px;
    justify-items: center;
    color: #64748b;
    text-align: center;
    font-size: 0.92rem;
}

.site-ad-admin-preview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(79, 70, 229, 0.08);
    color: #4f46e5;
}

.site-ad-admin-preview-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.site-ad-slot {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 26px;
    border: 1px solid rgba(226, 232, 240, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.site-ad-slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.site-ad-slot-head strong {
    color: #111827;
    font-size: 1rem;
}

.site-ad-slot-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.08);
    color: #111827;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-ad-slides {
    position: relative;
    display: grid;
    min-height: 220px;
}

.site-ad-slide {
    grid-area: 1 / 1;
    display: block;
    color: inherit;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(28px) scale(0.985);
    transition:
        opacity 0.5s ease,
        transform 0.6s ease,
        visibility 0s linear 0.6s;
    will-change: opacity, transform;
}

.site-ad-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    transition-delay: 0s;
}

.site-ad-card {
    display: grid;
    gap: 14px;
}

.site-ad-media {
    overflow: hidden;
    border-radius: 20px;
    background: #e2e8f0;
}

.site-ad-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
}

.site-ad-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.site-ad-body h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    line-height: 1.5;
}

.site-ad-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.site-ad-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-ad-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.5);
    cursor: pointer;
}

.site-ad-dot.is-active {
    width: 28px;
    background: #111827;
}

.dashboard-banner-ad-slot {
    margin-bottom: 18px;
    padding: 10px;
    overflow: hidden;
    min-height: 0;
}

.dashboard-banner-ad-slot .site-ad-slides {
    min-height: 0;
}

.dashboard-banner-ad-slot .site-ad-card {
    gap: 0;
}

.dashboard-banner-ad-slot .site-ad-media {
    border-radius: 18px;
    background: #f8fafc;
}

.dashboard-banner-ad-slot .site-ad-media img {
    display: block;
    width: 100%;
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    object-fit: fill;
}

.dashboard-banner-ad-slot .site-ad-body {
    display: none;
}

.blog-post-sidebar-ad-slot {
    padding: 0;
    overflow: hidden;
    min-height: 520px;
}

.blog-post-sidebar-ad-slot .site-ad-slides,
.blog-post-sidebar-ad-slot .site-ad-slide,
.blog-post-sidebar-ad-slot .site-ad-card,
.blog-post-sidebar-ad-slot .site-ad-media {
    height: 100%;
    min-height: 520px;
}

.blog-post-sidebar-ad-slot .site-ad-card {
    position: relative;
    gap: 0;
}

.blog-post-sidebar-ad-slot .site-ad-media {
    border-radius: 0;
}

.blog-post-sidebar-ad-slot .site-ad-media img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
}

.blog-post-sidebar-ad-slot .site-ad-body {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.84);
    backdrop-filter: blur(6px);
}

.blog-post-sidebar-ad-slot .site-ad-body h3 {
    color: #fff;
    font-size: 1.18rem;
    line-height: 1.45;
}

.blog-post-sidebar-ad-slot .site-ad-cta {
    background: #fff;
    color: #111827;
}

.blog-post-mobile-ad-slot {
    display: none;
    max-width: 1120px;
    margin: 0 auto 28px;
    padding-left: 20px;
    padding-right: 20px;
}

.site-popup-ad-open {
    overflow: hidden;
}

.site-popup-ad-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.64);
    backdrop-filter: blur(6px);
}

.site-popup-ad-dialog {
    position: relative;
    width: min(100%, 620px);
}

.site-popup-ad-kicker {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
}

.site-popup-ad-close {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.28);
}

.site-popup-ad-slot {
    padding: 20px;
    border-radius: 28px;
}

.site-popup-ad-slot .site-ad-media img {
    min-height: 260px;
}

@media (max-width: 900px) {
    .site-ad-admin-help {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-ad-admin-section-head,
    .site-ad-admin-item-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .site-popup-ad-backdrop {
        padding: 16px;
    }

    .site-popup-ad-close {
        top: 10px;
        right: 10px;
    }

    .site-popup-ad-kicker {
        top: 14px;
        left: 14px;
    }

    .site-popup-ad-slot .site-ad-media img {
        min-height: 180px;
    }

    .dashboard-banner-ad-slot {
        position: relative;
        padding: 8px;
        border-radius: 18px;
    }

    .dashboard-banner-ad-slot::before {
        content: 'Ads';
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.9);
        color: #fff;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .dashboard-banner-ad-slot .site-ad-media {
        border-radius: 14px;
    }

    .dashboard-banner-ad-slot .site-ad-media img {
        height: auto;
        min-height: 0;
        max-height: 96px;
        width: 100%;
        object-fit: contain;
    }

    .blog-post-mobile-ad-slot {
        display: block;
    }

    .blog-post-sidebar-ad-slot {
        display: none;
    }

    .site-ad-slot {
        padding: 16px;
        border-radius: 22px;
    }

    .site-ad-admin-help {
        grid-template-columns: 1fr;
    }

    .site-ad-body {
        align-items: flex-start;
        flex-direction: column;
    }
}

.discover-page .discover-top-viewed-card {
    padding: 28px;
    border-radius: 30px;
    border: 1px solid rgba(224, 230, 239, 0.96);
    background:
        radial-gradient(circle at top right, rgba(236, 72, 153, 0.16), transparent 24%),
        radial-gradient(circle at bottom left, rgba(79, 70, 229, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 249, 252, 0.98));
    box-shadow: 0 24px 52px rgba(15, 23, 42, 0.1);
}

.discover-page .discover-top-viewed-main {
    grid-template-columns: minmax(0, 1.25fr) 220px;
    gap: 24px;
    align-items: center;
}

.discover-page .discover-top-viewed-copy {
    gap: 12px;
}

.discover-page .discover-top-viewed-meta span,
.discover-page .discover-top-viewed-insights span {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(226, 232, 240, 0.96);
}

.discover-page .discover-top-viewed-side {
    gap: 14px;
    justify-items: end;
}

.discover-page .discover-top-viewed-avatar {
    width: 164px;
    height: 164px;
    margin-left: 0;
}

.discover-page .discover-top-viewed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.discover-page .discover-card-shell {
    position: relative;
    display: grid;
    gap: 14px;
    overflow: hidden;
    padding: 18px 0 20px;
    border-radius: 28px;
    border: 1px solid rgba(224, 230, 239, 0.96);
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.12), transparent 24%),
        radial-gradient(circle at top left, rgba(244, 114, 182, 0.09), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.discover-page .discover-card-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 88px;
    background:
        radial-gradient(circle at 12% 18%, rgba(244, 114, 182, 0.14), transparent 26%),
        radial-gradient(circle at 88% 8%, rgba(99, 102, 241, 0.14), transparent 24%);
    pointer-events: none;
}

.discover-page .discover-card-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04));
    pointer-events: none;
}

.discover-page .discover-card-shell-featured {
    border-color: rgba(252, 165, 165, 0.34);
    background:
        radial-gradient(circle at top right, rgba(248, 113, 113, 0.14), transparent 24%),
        radial-gradient(circle at top left, rgba(251, 113, 133, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(255, 250, 250, 0.99), rgba(255, 245, 245, 0.98));
}

.discover-page .discover-card-shell-featured::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(248, 113, 113, 0.18), transparent 26%),
        radial-gradient(circle at 88% 8%, rgba(239, 68, 68, 0.22), transparent 24%);
}

.discover-page .discover-card-shell-featured .discover-featured-status {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
}

.discover-page .discover-card-shell-featured .discover-featured-top {
    padding-top: 54px;
}

.discover-page .discover-card-shell-featured .discover-featured-avatar {
    box-shadow:
        0 16px 28px rgba(239, 68, 68, 0.12),
        0 0 0 4px rgba(255, 255, 255, 0.92);
}

.discover-page .discover-card-shell-featured .discover-featured-meta > span {
    color: #6b7280;
}

.discover-page .profile-directory-story-kicker {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
}

.discover-page .discover-card-like {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    min-height: 38px;
    padding-inline: 12px;
}

.discover-page .profile-directory-top {
    padding: 22px 20px 0;
    margin-top: 0;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.discover-page .profile-directory-avatar {
    width: 72px;
    height: 72px;
    box-shadow:
        0 16px 28px rgba(15, 23, 42, 0.12),
        0 0 0 4px rgba(255, 255, 255, 0.92);
}

.discover-page .profile-directory-copy h2 {
    font-size: 1.1rem;
}

.discover-page .profile-directory-copy p {
    margin: 2px 0 0;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discover-page .profile-directory-summary {
    padding: 0 20px;
    font-size: 0.92rem;
    line-height: 1.72;
}

.discover-page .discover-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 0 20px;
}

.discover-page .discover-card-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #516073;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.discover-page .discover-card-meta-icon,
.discover-page .discover-card-meta-icon svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
    flex: 0 0 14px;
}

.discover-page .discover-card-actions {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 10px;
    padding: 0 20px;
}

.discover-page .discover-card-actions .button {
    min-width: 0;
}

.discover-page .discover-card-action-like.is-liked {
    background: linear-gradient(135deg, #e11d48, #f43f5e);
    border-color: rgba(225, 29, 72, 0.9);
    box-shadow: 0 14px 26px rgba(225, 29, 72, 0.22);
}

.discover-page .discover-compact-card {
    position: relative;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(224, 230, 239, 0.96);
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.discover-page .discover-compact-like-badge {
    top: 14px;
    right: 14px;
}

.discover-page .discover-compact-main {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}

.discover-page .discover-compact-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.discover-page .discover-compact-like {
    border-radius: 18px;
}

@media (max-width: 1100px) {
    .discover-page .discover-overview-panel {
        grid-template-columns: 1fr;
    }

    .discover-page .discover-top-viewed-main {
        grid-template-columns: 1fr;
    }

    .discover-page .discover-top-viewed-side {
        justify-items: start;
    }
}

@media (max-width: 800px) {
    .discover-page .discover-overview-panel {
        display: none;
    }

    .discover-page .discover-card-shell {
        border-radius: 24px;
        padding: 14px 14px 16px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.98));
        box-shadow:
            0 20px 40px rgba(15, 23, 42, 0.08),
            0 0 0 1px rgba(255, 255, 255, 0.35) inset;
    }

    .discover-page .discover-card-shell::before,
    .discover-page .discover-card-shell::after {
        display: none;
    }

    .discover-page .discover-card-shell-featured {
        background:
            radial-gradient(circle at top right, rgba(248, 113, 113, 0.12), transparent 24%),
            linear-gradient(180deg, rgba(255, 250, 250, 0.99), rgba(255, 245, 245, 0.98));
    }

    .discover-page .profile-directory-top,
    .discover-page .profile-directory-summary,
    .discover-page .discover-card-meta,
    .discover-page .discover-card-actions {
        padding-inline: 0;
    }

    .discover-page .profile-directory-top {
        padding-top: 0;
        gap: 10px;
    }

    .discover-page .discover-card-shell-featured .discover-featured-top {
        padding-top: 42px;
    }

    .discover-page .discover-card-actions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

@media (max-width: 420px) {
    .discover-page .discover-card-meta {
        flex-direction: column;
    }

    .live-people-grid {
        grid-template-columns: 1fr;
    }
}