:root {
    --c-primary: #0575e3;
    --c-primary-strong: #035fc2;
    --c-primary-soft: #e6f0fc;
    --c-border: #cbd5e1;
    --c-bg: #f3f7fd;
    --c-surface: #ffffff;
    --c-text: #0f172a;
    --c-danger: #b91c1c;
    --c-sidebar: #d7e8ff;
    --c-sidebar-border: #b4cdef;
}

body.app-layout {
    font-family: Arial, sans-serif;
    color: var(--c-text);
    background: var(--c-bg);
    margin: 0;
}

.app-layout--shell {
    min-height: 100vh;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.app-shell__content {
    min-width: 0;
}

.app-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.app-nav { max-width: 1440px; margin: 0 auto; padding: 12px 24px; display: flex; gap: 12px; align-items: center; }
.app-nav__link { color: var(--c-primary); text-decoration: none; }

.app-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 20px;
    background: linear-gradient(180deg, var(--c-sidebar) 0%, #c9dffd 100%);
    border-right: 1px solid var(--c-sidebar-border);
}

.app-sidebar__top {
    display: grid;
    gap: 28px;
}

.app-sidebar__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--c-text);
    padding: 8px 0 4px;
}

.app-sidebar__brand-icon {
    width: 156px;
    height: 156px;
    object-fit: contain;
}

.app-sidebar__nav,
.app-sidebar__account-links {
    display: grid;
    gap: 10px;
}

.app-sidebar__link,
.app-sidebar__account-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--c-text);
    text-decoration: none;
    font-weight: 600;
    border: 1px solid transparent;
}

.app-sidebar__link-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 22px;
}

.app-sidebar__link:hover,
.app-sidebar__account-link:hover {
    background: rgba(255, 255, 255, 0.52);
    border-color: rgba(71, 97, 126, 0.15);
}

.app-sidebar__link--active,
.app-sidebar__account-link--active {
    background: #ffffff;
    border-color: rgba(5, 117, 227, 0.16);
    box-shadow: 0 10px 24px rgba(5, 117, 227, 0.12);
}

.app-sidebar__footer {
    display: grid;
    gap: 18px;
}

.app-sidebar__user-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.app-sidebar__user-label,
.app-sidebar__user-role {
    margin: 0;
    color: #47617e;
}

.app-sidebar__user-name {
    margin: 6px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.app-sidebar__logout {
    width: 100%;
}

.app-main { max-width: 1440px; margin: 20px auto; padding: 0 24px; }
.app-main--shell {
    max-width: none;
    margin: 0;
    padding: 32px 40px;
}
.app-main--standalone { margin-top: 0; min-height: 100vh; display: flex; align-items: center; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-primary-strong);
    background: var(--c-primary);
    color: #fff;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    font: inherit;
    line-height: 1.2;
    white-space: nowrap;
}
.btn:hover { background: var(--c-primary-strong); }
.btn--secondary { background: #fff; color: var(--c-primary-strong); }
.btn--secondary:hover { background: #f8fafc; }
.btn--ghost { background: transparent; color: var(--c-primary-strong); border-color: rgba(3, 95, 194, 0.22); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.42); }
.btn--small { padding: 5px 10px; font-size: 0.9rem; border-radius: 999px; }
.btn--danger { background: var(--c-danger); border-color: var(--c-danger); }
.btn--danger:hover { background: #991b1b; }
.btn--link { width: 100%; text-align: left; background: transparent; border: none; padding: 0; color: var(--c-text); }
.link-action { color: var(--c-primary-strong); text-decoration: none; font-weight: 600; }
.link-action:hover { text-decoration: underline; }
.action-group { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.action-group--nowrap { flex-wrap: nowrap; }
.action-group--compact { gap: 6px; }
.action-group form { margin: 0; display: inline-flex; }
.table { width: 100%; border-collapse: collapse; background: var(--c-surface); table-layout: auto; }
.table th, .table td { border: 1px solid var(--c-border); padding: 12px 14px; text-align: left; vertical-align: top; }
.table th { color: var(--c-primary-strong); }
.table__actions { white-space: nowrap; width: 1%; }
.form { display: grid; gap: 12px; max-width: 900px; }
.form--inline { max-width: 100%; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.form__field { display: grid; gap: 6px; }
.form__two-column { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.form__layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.9fr); align-items: start; }
.form__layout--debug-preview { grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); }
.form__layout-main { display: grid; gap: 12px; }
.form__layout-preview { min-width: 0; }
.form input, .form select, .form textarea { border: 1px solid var(--c-border); padding: 8px; background: var(--c-surface); }
.form__field--preview { align-items: start; }
.document-preview { width: 100%; max-width: 480px; }
.form__layout--debug-preview .document-preview { max-width: none; }
.document-preview--large { max-width: 720px; }
.form__layout--debug-preview .document-preview--large { max-width: none; min-height: 100%; }
.document-preview__frame { width: 100%; height: 320px; border: 1px solid var(--c-border); background: var(--c-surface); }
.document-preview__frame--large { height: 520px; }
.form__layout--debug-preview .document-preview__frame--large { height: min(72vh, 920px); min-height: 640px; }
.form__topic-list { display: grid; gap: 8px; }
.form__topic-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.form__field--checkbox {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 12px;
}
.form__field--checkbox label { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.form__field--checkbox input[type="checkbox"] { width: 18px; height: 18px; }
.settings-group {
    display: grid;
    gap: 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 18px;
}

.settings-group__header { display: grid; gap: 4px; }
.settings-group__header h2 { margin: 0; }
.status { padding: 10px; background: #ecfdf5; border: 1px solid #86efac; border-radius: 6px; }
.flash { padding: 10px; background: #ecfeff; border: 1px solid #67e8f9; }
.flash.flash--warning { background: #fffbeb; border: 1px solid #f59e0b; }
.flash.flash--danger { background: #fee2e2; border: 1px solid #ef4444; color: #7f1d1d; }
.error { color: var(--c-danger); margin: 4px 0 0; }
.required { color: var(--c-danger); }
.text-muted { color: #6b7280; font-size: 0.9rem; }
.page-header { display: grid; gap: 16px; margin-bottom: 16px; }
.page-header--split { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.info-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.info-card--compact { max-width: 420px; justify-self: end; }
.info-card p { margin: 0; }
.info-card p + p { margin-top: 8px; }
.info-card code { white-space: nowrap; }

.login-page {
    max-width: 100%;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(280px, 420px) minmax(280px, 1fr);
    align-items: stretch;
}

.login-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 20px;
}

.login-visual {
    min-height: 360px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    background-color: var(--c-primary-soft);
    background-image: linear-gradient(to bottom right, rgba(5, 117, 227, 0.35), rgba(3, 95, 194, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.login-visual__image {
    max-height: 320px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.signature-thumbnail {
    height: 150px;
    width: auto;
    border: 1px solid var(--c-border);
    background: #fff;
}

.signature-preview { display: grid; gap: 8px; justify-items: start; }
.signature-preview--hidden { display: none; }


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

.dashboard-tile {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 16px;
    text-decoration: none;
    color: var(--c-text);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-tile:hover {
    border-color: var(--c-primary);
    box-shadow: 0 10px 22px rgba(5, 117, 227, 0.12);
}

.dashboard-tile__icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.dashboard-tile__count {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 4px 0 0;
}

.dashboard-tile--admin {
    justify-content: flex-start;
}

@media (max-width: 960px) { .form__layout { grid-template-columns: 1fr; } }

@media (max-width: 800px) {
    .login-page {
        grid-template-columns: 1fr;
    }

    .page-header--split {
        grid-template-columns: 1fr;
    }

    .info-card--compact {
        max-width: none;
        justify-self: stretch;
    }

    .login-visual {
        min-height: 220px;
    }

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

.action-group .action-group__danger { margin-left: 14px; }

@media (max-width: 960px) {
    .document-preview,
    .document-preview--large {
        max-width: 100%;
    }

    .document-preview__frame--large {
        height: 420px;
    }
}


.certificate-portal {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: stretch;
}

.certificate-portal--standalone {
    width: 100%;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: stretch;
}

.certificate-portal__panel,
.certificate-portal__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 24px;
}

.certificate-portal__panel {
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
    min-height: 520px;
}

.certificate-portal__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--c-primary-strong);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.certificate-portal__intro {
    max-width: 60ch;
    margin-bottom: 18px;
}

.certificate-portal__fieldset {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.certificate-portal__fieldset[disabled] {
    opacity: 0.65;
}

.certificate-portal__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.certificate-portal__info {
    display: grid;
    gap: 16px;
    min-height: 520px;
}

.certificate-portal__info-inner {
    width: 100%;
    display: grid;
    gap: 20px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    justify-items: center;
    text-align: left;
}

.certificate-portal__feedback {
    min-height: 1.5rem;
    margin: 0;
    color: transparent;
}

.certificate-portal__feedback--visible {
    color: var(--c-text);
}

.certificate-portal__brand {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.certificate-portal__brand-image {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.certificate-portal__brand-copy {
    margin: 0;
}

.certificate-portal__hero-image {
    justify-self: center;
    max-height: 220px;
}

.certificate-portal__mini-guide {
    width: 100%;
    max-width: 340px;
    align-self: end;
    margin: 0 auto;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.certificate-portal__mini-guide h2,
.certificate-portal__mini-guide p,
.certificate-portal__mini-guide li {
    overflow-wrap: anywhere;
}

.certificate-portal__mini-guide h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

.certificate-portal__admin-access {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.certificate-portal__actions {
    justify-content: flex-start;
}

.certificate-portal__contact-line {
    grid-column: 1 / -1;
    margin: -2px 0 0;
    text-align: center;
    color: #47617e;
    font-size: 0.95rem;
}

.certificate-portal__card--accent {
    background: linear-gradient(135deg, var(--c-primary-soft), #ffffff);
}

.certificate-portal__list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}

@media (max-width: 960px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        gap: 18px;
        padding: 18px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--c-sidebar-border);
    }

    .app-sidebar__nav,
    .app-sidebar__account-links {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .app-sidebar__brand {
        justify-content: flex-start;
    }

    .app-sidebar__brand-icon {
        width: 110px;
        height: 110px;
    }

    .app-main--shell {
        padding: 24px 18px 32px;
    }

    .certificate-portal {
        grid-template-columns: 1fr;
    }

    .certificate-portal--standalone {
        grid-template-columns: 1fr;
    }

    .certificate-portal__panel {
        order: 1;
        min-height: 0;
    }

    .certificate-portal__info {
        order: 2;
        min-height: 0;
    }

    .certificate-portal__fields {
        grid-template-columns: 1fr;
    }

    .certificate-portal__brand {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .certificate-portal__admin-access {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .app-main {
        padding: 0 16px;
    }

    .app-main--standalone {
        align-items: stretch;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .login-page {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .login-panel,
    .certificate-portal__card,
    .certificate-portal__panel {
        padding: 18px;
    }

    .login-visual {
        min-height: 180px;
        padding: 20px;
    }

    .certificate-portal__hero-image {
        max-height: 180px;
    }

    .certificate-portal__mini-guide {
        max-width: none;
    }

    .certificate-portal__list {
        padding-left: 18px;
    }
}