: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;
}

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

.app-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.app-nav { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; gap: 12px; align-items: center; }
.app-nav__link { color: var(--c-primary); text-decoration: none; }
.app-user-menu { margin-left: auto; position: relative; }
.app-user-menu__summary { cursor: pointer; color: var(--c-primary); }
.app-user-menu__panel { position: absolute; right: 0; top: calc(100% + 6px); background: var(--c-surface); border: 1px solid var(--c-border); min-width: 170px; padding: 8px; display: grid; gap: 6px; z-index: 10; }
.app-user-menu__link { color: var(--c-text); text-decoration: none; }
.app-main { max-width: 1100px; margin: 20px auto; padding: 0 16px; }

.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--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 form { margin: 0; display: inline-flex; }
.table { width: 100%; border-collapse: collapse; background: var(--c-surface); }
.table th, .table td { border: 1px solid var(--c-border); padding: 8px; text-align: left; vertical-align: top; }
.form { display: grid; gap: 12px; max-width: 620px; }
.form--inline { max-width: 100%; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.form__field { display: grid; gap: 6px; }
.form input, .form select, .form textarea { border: 1px solid var(--c-border); padding: 8px; background: var(--c-surface); }
.form__topic-list { display: grid; gap: 8px; }
.form__topic-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.flash { padding: 10px; background: #ecfeff; border: 1px solid #67e8f9; }
.error { color: var(--c-danger); margin: 4px 0 0; }
.required { color: var(--c-danger); }
.text-muted { color: #6b7280; font-size: 0.9rem; }

.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;
}


.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;
}

.dashboard-tile--admin .btn {
    margin-top: auto;
    width: fit-content;
}

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

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

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

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