@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --navy-950: #103527;
    --navy-900: #14553e;
    --navy-800: #1a6f52;
    --blue-600: #1f7a55;
    --blue-500: #2b9a6c;
    --blue-100: #dcf2e6;
    --surface: #edf6f0;
    --ink-950: #0d1730;
    --ink-700: #4c5b79;
    --ink-500: #7b89a5;
    --line: #d6e6dc;
    --card: rgba(255, 255, 255, 0.96);
    --success-bg: #dff5e8;
    --success-text: #157347;
    --shadow-lg: 0 24px 50px rgba(20, 85, 62, 0.14);
    --radius-lg: 28px;
    --radius-md: 18px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--ink-950);
    background:
        radial-gradient(circle at top left, rgba(43, 154, 108, 0.12), transparent 32%),
        radial-gradient(circle at top right, rgba(31, 122, 85, 0.08), transparent 24%),
        linear-gradient(180deg, #f8fcf9 0%, var(--surface) 100%);
}

body {
    min-height: 100vh;
}

.caj-site-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f7f2;
    color: #102239;
}

a {
    color: inherit;
}

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

.btn {
    appearance: none;
    border: 0;
    border-radius: 16px;
    padding: 0.95rem 1.25rem;
    cursor: pointer;
    font-weight: 700;
    transition: transform 0.18s ease, opacity 0.18s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

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

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.btn-full {
    width: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
    color: #fff;
    box-shadow: 0 14px 24px rgba(31, 122, 85, 0.25);
}

.btn-muted {
    background: #eef3fb;
    color: var(--ink-700);
    border: 1px solid var(--line);
}

.btn-outline {
    background: #fff;
    color: #a87a10;
    border: 1px solid #f0d99a;
}

.feedback-banner {
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin: 1rem 0 0;
    font-weight: 600;
    border: 1px solid transparent;
}

.feedback-banner.is-success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: #b9e6cb;
}

.feedback-banner.is-error {
    background: #fde8ea;
    color: #a61e24;
    border-color: #f6c4c8;
}

.eyebrow {
    display: inline-flex;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--blue-100);
    color: var(--blue-600);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue-500), var(--navy-900));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(219, 227, 242, 0.9);
}

.site-brand,
.auth-brand,
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.site-brand strong,
.auth-brand strong,
.sidebar-brand strong {
    display: block;
    font-size: 1.05rem;
}

.site-brand-logo {
    align-items: center;
}

.brand-image {
    width: 88px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.sidebar-brand-logo .brand-image {
    width: 74px;
}

.site-brand span,
.auth-brand span,
.sidebar-brand span {
    display: block;
    color: var(--ink-500);
    font-size: 0.8rem;
}

.site-search input {
    width: 100%;
    padding: 1rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-weight: 600;
}

.site-nav a {
    text-decoration: none;
    color: var(--ink-700);
}

.site-nav a.is-active,
.site-link-cta {
    color: var(--navy-900);
}

.site-link-cta {
    font-weight: 800;
}

.caj-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e8e3d6;
}

.caj-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.caj-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    min-width: 0;
}

.caj-brand img {
    width: 122px;
    height: auto;
    display: block;
    flex: 0 0 auto;
}

.caj-brand-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.caj-brand-copy strong {
    font-size: 1.15rem;
    line-height: 1.1;
}

.caj-brand-copy span {
    color: #66758e;
    font-size: 0.82rem;
    line-height: 1.35;
}

.caj-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: nowrap;
    font-weight: 700;
    justify-content: flex-end;
}

.caj-nav a,
.caj-nav button {
    color: #102239;
    text-decoration: none;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.caj-nav a.is-active {
    color: #ad7a17;
}

.caj-nav a.caj-aula-btn,
.caj-aula-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: #1f7a55;
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(31, 122, 85, 0.2);
}

.caj-nav a.caj-aula-btn:hover,
.caj-nav a.caj-aula-btn:focus-visible,
.caj-aula-btn:hover,
.caj-aula-btn:focus-visible {
    background: #14553e;
    color: #fff !important;
}

.caj-main {
    max-width: 1120px;
    margin: 0 auto;
    width: min(1120px, calc(100% - 2rem));
    padding: 1.5rem 0;
    flex: 1 0 auto;
}

.caj-main-stretch {
    display: grid;
    align-content: start;
}

.caj-hero {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    min-height: 520px;
    box-shadow: 0 18px 40px rgba(9, 23, 45, 0.12);
}

.caj-hero-media,
.caj-hero-image {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    display: block;
    filter: brightness(0.82);
}

.caj-hero-overlay {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 16%;
    background: rgba(15, 79, 54, 0.88);
    color: #fff;
    padding: 2rem 2.2rem;
    border-radius: 24px;
    text-align: center;
}

.caj-hero-overlay h1 {
    margin: 0 0 0.8rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.caj-hero-overlay p {
    margin: 0;
    line-height: 1.7;
    font-size: 1.05rem;
}

.caj-section {
    margin-top: 2.5rem;
}

.caj-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.caj-section h2,
.caj-page-banner h1 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.8rem);
}

.caj-inline-link {
    color: #1f7a55;
    text-decoration: none;
    font-weight: 800;
}

.caj-filters {
    background: #fff;
    border: 1px solid #e3e7ef;
    border-radius: 22px;
    padding: 0.8rem;
    display: grid;
    grid-template-columns: 150px 120px 140px 1fr auto;
    gap: 0.8rem;
    box-shadow: 0 14px 26px rgba(12, 25, 48, 0.06);
}

.caj-filters select,
.caj-filters input {
    width: 100%;
    border: 1px solid #d7deea;
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    background: #fff;
}

.caj-filters button,
.caj-card-btn,
.caj-primary-btn,
.caj-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    text-decoration: none;
    font-weight: 800;
}

.caj-filters button,
.caj-card-btn,
.caj-primary-btn {
    background: #1f7a55;
    color: #fff;
}

.caj-secondary-btn {
    background: #fff;
    color: #1f7a55;
    border: 1px solid #1f7a55;
}

.caj-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.2rem;
}

.caj-empty-state {
    margin-top: 1.2rem;
    background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
    border: 1px solid #d8e8dd;
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 16px 30px rgba(14, 26, 49, 0.06);
}

.caj-empty-state strong {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.65rem;
}

.caj-empty-state p {
    margin: 0 auto 1.2rem;
    max-width: 640px;
    line-height: 1.7;
    color: #55637c;
}

.caj-course-card {
    background: #fff;
    border: 1px solid #e1e7ef;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(14, 26, 49, 0.08);
}

.caj-course-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.caj-course-body {
    padding: 1.35rem;
}

.caj-course-body h3 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.caj-course-body p {
    margin: 0 0 1rem;
    line-height: 1.65;
    color: #55637c;
}

.caj-video-section {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 1.5rem;
    align-items: center;
}

.caj-kicker {
    display: inline-block;
    color: #ad7a17;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.7rem;
}

.caj-actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

.caj-video-placeholder {
    position: relative;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(14, 26, 49, 0.08);
}

.caj-video-placeholder video,
.caj-video-placeholder img {
    width: 100%;
    display: block;
    min-height: 320px;
    object-fit: cover;
}

.caj-video-placeholder video {
    background: #0d1730;
}

.caj-video-placeholder span {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    color: #fff;
    background: rgba(10, 27, 48, 0.78);
    padding: 0.75rem 1rem;
    border-radius: 14px;
    font-weight: 800;
}

.caj-footer {
    margin-top: auto;
    background: #115936;
    color: #fff;
}

.caj-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
}

.caj-footer-inner h3 {
    margin: 0 0 0.7rem;
    font-size: 1.05rem;
}

.caj-footer-inner p {
    margin: 0.32rem 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
}

.caj-footer-inner img {
    width: 140px;
    height: auto;
}

.caj-footer-copy {
    text-align: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.caj-page-banner {
    background: #fff;
    border: 1px solid #e2e7ef;
    border-radius: 26px;
    padding: 2rem;
    box-shadow: 0 14px 26px rgba(12, 25, 48, 0.06);
}

.caj-page-banner p {
    margin: 0.85rem 0 0;
    color: #5f6d84;
    line-height: 1.7;
}

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

.site-main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.hero-card,
.result-card,
.auth-card,
.admin-card {
    background: var(--card);
    border: 1px solid rgba(219, 227, 242, 0.92);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.hero-card {
    padding: 3rem;
    display: grid;
    gap: 2rem;
}

.hero-copy h1 {
    margin: 0.85rem 0 0.75rem;
    font-size: clamp(2rem, 5vw, 3rem);
}

.hero-copy p {
    max-width: 760px;
    color: var(--ink-700);
    font-size: 1.05rem;
    line-height: 1.7;
}

.certificate-search-form,
.auth-form {
    display: grid;
    gap: 0.85rem;
}

.certificate-search-form label,
.auth-form label,
.grid-form label {
    font-weight: 700;
    color: var(--navy-950);
}

.certificate-search-form input,
.auth-form input,
.grid-form input,
.grid-form select,
.grid-form textarea,
.toolbar input,
.per-page select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem 1rem;
    background: rgba(255, 255, 255, 0.98);
    color: var(--ink-950);
}

.form-actions {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.result-card {
    margin-top: 1.35rem;
    padding: 2rem;
}

.result-status {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: var(--success-bg);
    color: var(--success-text);
    margin-bottom: 1rem;
}

.status-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #2ab56b;
}

.result-lead {
    color: var(--ink-700);
    line-height: 1.7;
}

.verified-person {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.6rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 1.5rem 0;
}

.verified-avatar {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
}

.verified-person h2 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.verified-person p {
    margin: 0.18rem 0;
    color: var(--ink-700);
}

.verified-copy {
    min-width: 0;
}

.certificate-download-box {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
}

.certificate-download-box p {
    color: var(--ink-500);
}

.download-actions {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: min(100%, 520px);
    padding: 2.4rem;
}

.auth-copy {
    margin: 1.3rem 0 1.8rem;
}

.auth-copy h1 {
    margin: 0.85rem 0 0.7rem;
    font-size: 2rem;
}

.auth-copy p {
    margin: 0;
    color: var(--ink-700);
    line-height: 1.7;
}

.auth-footer {
    margin-top: 1.1rem;
    text-align: center;
}

.auth-footer a {
    color: var(--blue-600);
    font-weight: 700;
    text-decoration: none;
}

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

.admin-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f2f9f4 100%);
    border-right: 1px solid var(--line);
    padding: 1.4rem 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar-group {
    display: grid;
    gap: 0.4rem;
}

.sidebar-label {
    padding: 0 0.7rem;
    color: var(--ink-500);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.sidebar-link {
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    text-decoration: none;
    color: var(--ink-700);
    font-weight: 700;
}

.sidebar-link:hover,
.sidebar-link.is-active {
    background: #e7f4ec;
    color: var(--navy-900);
}

.sidebar-logout {
    margin-top: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0.9rem 1rem;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}

.admin-main {
    padding: 2rem;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.4rem;
}

.admin-header h1 {
    margin: 0.6rem 0 0.5rem;
    font-size: clamp(2rem, 4vw, 2.7rem);
}

.admin-header p {
    margin: 0;
    color: var(--ink-700);
    max-width: 680px;
}

.admin-user-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-pill {
    background: var(--blue-100);
    color: var(--blue-600);
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    font-weight: 800;
}

.admin-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--blue-500), var(--navy-900));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.admin-card {
    padding: 1.8rem;
}

.section-head {
    display: flex;
    justify-content: space-between;
    gap: 1.4rem;
    align-items: center;
    margin-bottom: 1rem;
}

.section-head h2 {
    margin: 0 0 0.45rem;
    font-size: 1.75rem;
}

.section-head p {
    margin: 0;
    color: var(--ink-700);
}

.segmented-tabs {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.segmented-btn {
    border: 0;
    border-radius: 16px;
    background: #e9f5ee;
    color: var(--blue-600);
    font-weight: 800;
    padding: 0.8rem 1rem;
    cursor: pointer;
}

.segmented-btn.is-active {
    background: linear-gradient(135deg, var(--blue-600), var(--navy-900));
    color: #fff;
}

.admin-tab {
    display: none;
    margin-top: 1.3rem;
}

.admin-tab.is-active {
    display: block;
}

.toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.8rem;
    align-items: center;
}

.per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-700);
    font-weight: 700;
}

.results-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0.8rem;
    color: var(--ink-700);
    font-weight: 600;
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 880px;
    background: #fff;
}

.admin-table.compact {
    min-width: 100%;
}

.admin-table th,
.admin-table td {
    padding: 1rem 0.95rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    font-size: 0.85rem;
    color: var(--ink-500);
    font-weight: 800;
    background: #f6fbf8;
}

.empty-state {
    text-align: center;
    color: var(--ink-500);
}

.status-badge {
    display: inline-flex;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

.status-badge.active {
    background: var(--success-bg);
    color: var(--success-text);
}

.status-badge.revoked {
    background: #fde8ea;
    color: #a61e24;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.table-link {
    color: var(--blue-600);
    font-weight: 800;
    text-decoration: none;
}

.table-btn {
    border: 0;
    border-radius: 14px;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    font-weight: 800;
}

.table-btn.edit {
    background: #e8f6ee;
    color: var(--blue-600);
}

.table-btn.delete {
    background: #fde8ea;
    color: #a61e24;
}

.pagination-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 1rem;
}

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

.grid-form .full {
    grid-column: 1 / -1;
}

.grid-form textarea {
    resize: vertical;
    min-height: 110px;
}

.grid-form small {
    display: block;
    margin-top: 0.45rem;
    color: var(--ink-500);
}

.preview-grid {
    margin-top: 1.35rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.placement-toolbar,
.placement-workspace {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
    margin-top: 0.2rem;
}

.placement-title {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy-900);
}

.placement-toolbar p {
    margin: 0;
    color: var(--ink-700);
}

.placement-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.placement-workspace {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.placement-sidebar,
.placement-stage-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 1rem;
}

.placement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.placement-hint {
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: #ecf7f0;
    color: var(--ink-700);
    line-height: 1.55;
}

.placement-stage {
    display: grid;
    gap: 1rem;
}

.placement-page {
    background: #f7fbf8;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0.9rem;
}

.placement-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--ink-700);
    font-weight: 700;
}

.placement-canvas-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #d1dbeb;
}

.placement-canvas-wrap canvas,
.placement-overlay {
    display: block;
    width: 100%;
}

.placement-overlay {
    position: absolute;
    inset: 0;
}

.placement-box {
    position: absolute;
    border: 2px solid #1f7a55;
    background: rgba(31, 122, 85, 0.14);
    color: #14553e;
    border-radius: 12px;
    display: block;
    text-align: center;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: grab;
    user-select: none;
    touch-action: none;
    overflow: hidden;
    white-space: nowrap;
}

.placement-box-label {
    position: absolute;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

.placement-box.is-name {
    border-color: #b54a2f;
    background: rgba(181, 74, 47, 0.14);
    color: #7a2f1c;
}

.placement-box.is-active {
    box-shadow: 0 0 0 4px rgba(43, 154, 108, 0.16);
}

.preview-panel {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
}

.panel-title {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line);
    font-weight: 800;
}

.pdf-preview-placeholder {
    min-height: 480px;
    display: grid;
    place-items: center;
    padding: 1rem;
    color: var(--ink-500);
    background: linear-gradient(180deg, #f7fbf8 0%, #ecf7f0 100%);
}

.pdf-preview-placeholder iframe {
    width: 100%;
    height: 480px;
    border: 0;
}

.course-shell {
    display: grid;
    gap: 1.35rem;
}

.course-shell-head {
    margin-bottom: 0;
}

.course-shell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
}

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

.course-metric-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 1.1rem 1.2rem;
    background: linear-gradient(180deg, #ffffff 0%, #f5faf7 100%);
    box-shadow: 0 12px 24px rgba(12, 25, 48, 0.05);
}

.course-metric-card span {
    display: block;
    color: var(--ink-700);
    margin-bottom: 0.45rem;
    font-weight: 700;
}

.course-metric-card strong {
    font-size: 2rem;
    color: var(--navy-950);
}

.course-published-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: #f3faf5;
    border: 1px solid #d7e8dd;
    font-weight: 700;
    color: var(--navy-900);
}

.course-published-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--blue-600);
}

.course-search-box {
    width: min(100%, 360px);
    min-width: 280px;
    flex: 1 1 320px;
}

.course-search-box input,
.course-search-actions input,
.course-inline-add input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.98);
    color: var(--ink-950);
}

.course-admin-panel {
    display: none;
}

.course-admin-panel.is-active {
    display: block;
}

.course-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}

.course-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
    box-shadow: 0 18px 34px rgba(14, 26, 49, 0.08);
    padding: 1.15rem;
    display: grid;
    gap: 1rem;
}

.course-card-cover {
    min-height: 152px;
    border-radius: 20px;
    padding: 1rem;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 35%),
        linear-gradient(135deg, #14553e, #2b9a6c);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.course-card-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 800;
    font-size: 0.78rem;
}

.course-card-cover strong {
    font-size: 1.2rem;
    line-height: 1.3;
}

.course-card-meta {
    display: grid;
    gap: 0.45rem;
    color: var(--ink-700);
}

.course-card-meta strong {
    color: var(--navy-950);
    font-size: 1.75rem;
}

.course-card-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.course-card-actions .table-btn {
    flex: 1 1 120px;
}

.course-admin-empty {
    display: grid;
    place-items: center;
    gap: 0.8rem;
    min-height: 300px;
    padding: 2rem;
    border: 1px dashed #bfd6c8;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbf7 100%);
}

.course-admin-empty p {
    max-width: 600px;
    margin: 0;
    color: var(--ink-700);
    line-height: 1.7;
}

.course-editor-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.2rem;
}

.course-editor-top h3 {
    margin: 0.65rem 0 0.45rem;
    font-size: 2rem;
}

.course-editor-top p {
    margin: 0;
    color: var(--ink-700);
    line-height: 1.6;
}

.course-builder-block {
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 1rem;
    background: #fff;
}

.course-builder-head,
.course-shell-card-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.course-builder-head h4,
.course-shell-card-head h4 {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
}

.course-builder-head p,
.course-shell-card-head p {
    margin: 0;
    color: var(--ink-700);
    line-height: 1.6;
}

.course-shell-card-head.compact {
    margin-bottom: 0.85rem;
}

.course-inline-add,
.course-search-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.course-inline-add {
    min-width: min(100%, 360px);
}

.course-chip-list {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.course-chip,
.participant-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    background: #edf7f1;
    color: var(--navy-900);
    font-weight: 700;
}

.course-chip button,
.participant-inline button {
    border: 0;
    background: transparent;
    color: #a61e24;
    font-weight: 800;
    cursor: pointer;
}

.course-publish-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border-radius: 20px;
    background: #f3faf5;
    border: 1px solid #d7e8dd;
}

.course-publish-row small {
    margin: 0;
}

.course-participants-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
    gap: 1rem;
}

.course-shell-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 14px 26px rgba(12, 25, 48, 0.05);
    display: grid;
    gap: 1rem;
}

.participant-list,
.participant-search-results {
    display: grid;
    gap: 0.75rem;
}

.participant-item,
.participant-search-card {
    display: flex;
    justify-content: space-between;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f9fcfa;
}

.participant-item strong,
.participant-search-card strong {
    display: block;
    margin-bottom: 0.25rem;
}

.participant-item p,
.participant-search-card p {
    margin: 0;
    color: var(--ink-700);
}

.participant-empty {
    padding: 1.25rem;
    border-radius: 18px;
    border: 1px dashed #bfd6c8;
    color: var(--ink-700);
    background: #f8fcf9;
    text-align: center;
}

.course-import-block {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.course-import-block input[type="file"] {
    display: block;
    width: 100%;
}

.aula-shell {
    display: grid;
    gap: 1.5rem;
}

.aula-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
    gap: 1.25rem;
}

.aula-hero-copy,
.aula-profile-card,
.aula-card,
.aula-side-card,
.aula-feature-card {
    background: #fff;
    border: 1px solid #dfe9e2;
    border-radius: 26px;
    box-shadow: 0 18px 34px rgba(14, 26, 49, 0.08);
}

.aula-hero-copy {
    padding: 2rem;
    display: grid;
    gap: 1rem;
    background:
        radial-gradient(circle at top right, rgba(43, 154, 108, 0.1), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f5faf7 100%);
}

.aula-hero-copy h1 {
    margin: 0;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.aula-hero-copy p,
.aula-card p,
.aula-side-card p {
    margin: 0;
    color: var(--ink-700);
    line-height: 1.7;
}

.aula-hero-actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.aula-profile-card {
    padding: 1.4rem;
    display: grid;
    gap: 1.15rem;
    align-content: start;
    background: linear-gradient(180deg, #174f39 0%, #103527 100%);
    color: #fff;
}

.aula-profile-top {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.aula-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 800;
}

.aula-profile-top strong,
.aula-profile-top span {
    display: block;
}

.aula-profile-top span {
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.8);
}

.aula-profile-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.aula-profile-metrics div {
    padding: 0.9rem 0.75rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    text-align: center;
}

.aula-profile-metrics strong,
.aula-profile-metrics span {
    display: block;
}

.aula-profile-metrics strong {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.aula-profile-metrics span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
}

.aula-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr);
    gap: 1.25rem;
}

.aula-card,
.aula-side-card {
    padding: 1.5rem;
}

.aula-card-highlight {
    display: grid;
    gap: 1rem;
}

.aula-card-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.aula-card-kicker {
    display: inline-flex;
    margin-bottom: 0.45rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1f7a55;
}

.aula-card-head h2,
.aula-section-head h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.aula-progress-pill {
    display: inline-flex;
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    background: #e8f6ee;
    color: #1f7a55;
    font-weight: 800;
    white-space: nowrap;
}

.aula-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.aula-course-meta span {
    display: inline-flex;
    padding: 0.65rem 0.8rem;
    border-radius: 999px;
    background: #f1f7f3;
    color: #38536b;
    font-weight: 700;
}

.aula-side-panel {
    display: grid;
    gap: 1rem;
}

.aula-side-card h3 {
    margin: 0 0 0.9rem;
    font-size: 1.15rem;
}

.aula-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}

.aula-timeline li {
    display: grid;
    gap: 0.18rem;
    padding-left: 1rem;
    border-left: 3px solid #2b9a6c;
}

.aula-timeline strong {
    font-size: 0.95rem;
}

.aula-timeline span {
    color: var(--ink-700);
    line-height: 1.6;
}

.aula-section {
    display: grid;
    gap: 1rem;
}

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

.aula-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.aula-feature-card {
    overflow: hidden;
    display: grid;
}

.aula-feature-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.aula-feature-card div {
    padding: 1.2rem;
    display: grid;
    gap: 0.75rem;
}

.aula-feature-card h3 {
    margin: 0;
    font-size: 1.3rem;
}

.aula-feature-card p {
    margin: 0;
    color: var(--ink-700);
    line-height: 1.7;
}

.aula-feature-card a {
    color: #1f7a55;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1120px) {
    .site-header {
        grid-template-columns: 1fr;
    }

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

    .admin-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .caj-header-inner {
        align-items: center;
    }

    .caj-nav {
        flex-wrap: wrap;
    }

    .caj-video-section,
    .aula-hero,
    .aula-grid {
        grid-template-columns: 1fr;
    }

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

    .course-participants-layout {
        grid-template-columns: 1fr;
    }

    .course-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 840px) {
    .site-main,
    .admin-main {
        padding: 1.2rem;
    }

    .caj-main {
        width: min(100%, calc(100% - 1.5rem));
        padding: 1rem 0;
    }

    .hero-card,
    .result-card,
    .auth-card,
    .admin-card {
        padding: 1.35rem;
        border-radius: 22px;
    }

    .toolbar,
    .grid-form,
    .preview-grid {
        grid-template-columns: 1fr;
    }

    .caj-filters,
    .caj-course-grid,
    .caj-contact-grid,
    .aula-feature-grid {
        grid-template-columns: 1fr;
    }

    .caj-header-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .caj-nav {
        justify-content: flex-start;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .caj-nav a:not(.caj-aula-btn),
    .caj-nav button:not(.caj-aula-btn) {
        flex: 0 1 auto;
    }

    .caj-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .caj-hero {
        min-height: 380px;
    }

    .caj-hero-media,
    .caj-hero-image {
        min-height: 380px;
    }

    .caj-hero-overlay {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        padding: 1.3rem;
    }

    .placement-workspace,
    .placement-grid {
        grid-template-columns: 1fr;
    }

    .section-head,
    .certificate-download-box,
    .admin-header,
    .aula-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .course-shell-actions,
    .course-editor-top,
    .course-builder-head,
    .course-inline-add,
    .course-search-actions,
    .course-publish-row {
        flex-direction: column;
        align-items: stretch;
    }

    .course-search-box {
        min-width: 100%;
    }

    .verified-person {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-sidebar {
        gap: 1rem;
    }

    .sidebar-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .sidebar-label {
        width: 100%;
        padding: 0;
    }

    .sidebar-link {
        flex: 1 1 160px;
    }

    .sidebar-logout {
        margin-top: 0;
        width: 100%;
    }

    .results-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .aula-hero-copy,
    .aula-profile-card,
    .aula-card,
    .aula-side-card {
        padding: 1.25rem;
    }
}

@media (max-width: 640px) {
    .caj-main,
    .admin-main {
        padding: 0.9rem;
    }

    .caj-header-inner {
        padding: 0.85rem 1rem;
        gap: 1rem;
    }

    .caj-brand {
        gap: 0.7rem;
        align-items: center;
    }

    .caj-brand img {
        width: 88px;
    }

    .caj-brand-copy strong {
        font-size: 1rem;
    }

    .caj-brand-copy span {
        font-size: 0.74rem;
    }

    .caj-page-banner,
    .caj-empty-state,
    .admin-card {
        padding: 1.25rem;
        border-radius: 22px;
    }

    .caj-filters {
        grid-template-columns: 1fr;
        padding: 0.75rem;
    }

    .caj-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .caj-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .caj-nav a,
    .caj-nav button {
        text-align: center;
    }

    .caj-nav .caj-aula-btn {
        grid-column: 1 / -1;
    }

    .course-admin-grid,
    .caj-course-grid {
        grid-template-columns: 1fr;
    }

    .course-card-actions .table-btn {
        flex: 1 1 100%;
    }

    .participant-item,
    .participant-search-card {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar {
        gap: 0.65rem;
    }

    .toolbar .btn,
    .toolbar .per-page {
        width: 100%;
    }

    .per-page {
        justify-content: space-between;
    }

    .pagination-actions,
    .download-actions,
    .aula-hero-actions {
        flex-direction: column;
    }

    .pagination-actions .btn,
    .download-actions .btn,
    .aula-hero-actions a {
        width: 100%;
    }

    .certificate-download-box {
        padding-top: 0.4rem;
    }

    .aula-profile-metrics {
        grid-template-columns: 1fr;
    }

    .aula-feature-card div {
        padding: 1rem;
    }

    .admin-header h1,
    .caj-section h2,
    .caj-page-banner h1,
    .aula-hero-copy h1 {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
    }
}