:root {
    --color-primary: #1F4F8C;
    --color-secondary: #0F7F62;
    --color-accent: #4EBE72;
    --color-bg: #F2FAFF;
    --color-card: #FFFFFF;
    --color-text: #111827;
    --color-muted: #4B5563;
    --color-border: #D9E6F5;
    --color-projects: #1F4F8C;
    --color-expenses: #D9730D;
    --color-budget: #0F7F62;
    --color-documents: #6D28D9;
    --color-photos: #0EA5E9;
    --color-video: #BE185D;
    --color-contractors: #F59E0B;
    --color-phases: #22C55E;
}

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top left, rgba(30, 95, 160, 0.12), transparent 28%),
                linear-gradient(180deg, #F7FDFF 0%, #EAF7FC 40%, #FFFFFF 100%);
    color: var(--color-text);
    min-height: 100vh;
}

.navbar {
    min-height: 72px;
}

.navbar-brand {
    font-weight: 700;
    color: var(--color-primary);
}

.navbar-logo {
    display: block;
    width: auto;
    height: 42px;
}

.navbar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(12px);
    position: relative;
    z-index: 1100;
}

.dropdown-menu {
    z-index: 2100;
}

.navbar-brand:hover,
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--color-primary);
}

.navbar .nav-link {
    color: #4B5563;
}

.brand-mark {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(78, 143, 71, 0.12);
    color: var(--color-primary);
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(31, 58, 95, 0.06);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-secondary);
}

.dashboard-stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0.8rem rgba(31, 79, 140, 0.04);
    overflow: hidden;
}

.dashboard-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.9rem 1.2rem rgba(31, 79, 140, 0.06);
}

.dashboard-projects-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    background: transparent;
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0.8rem rgba(31, 79, 140, 0.04);
    overflow: hidden;
}

.dashboard-projects-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.9rem 1.2rem rgba(31, 79, 140, 0.06);
}

.dashboard-projects-card .card-header {
    background: rgba(31, 79, 140, 0.06);
    border-bottom: 1px solid rgba(31, 79, 140, 0.18);
    color: var(--color-projects);
    font-weight: 700;
}

.dashboard-projects-card .card-header i {
    color: var(--color-projects);
}

.dashboard-projects-card a:not(.btn) {
    color: var(--color-projects);
    font-weight: 600;
}

.dashboard-projects-card a:not(.btn):hover,
.dashboard-projects-card a:not(.btn):focus {
    color: #173e72;
}

.dashboard-stat-card .stat-icon {
    width: 3.2rem;
    height: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.1rem;
    box-shadow: 0 0.4rem 0.8rem rgba(31, 79, 140, 0.08);
}

.stat-title {
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}

.stat-value {
    color: var(--color-text);
}

.stat-title--projects,
.stat-icon--projects {
    color: var(--color-projects);
}

.stat-title--expenses,
.stat-icon--expenses {
    color: var(--color-expenses);
}

.stat-title--budget,
.stat-icon--budget {
    color: var(--color-budget);
}

.stat-title--documents,
.stat-icon--documents {
    color: var(--color-documents);
}

.stat-title--photos,
.stat-icon--photos {
    color: var(--color-photos);
}

.stat-title--video,
.stat-icon--video {
    color: var(--color-video);
}

.stat-title--contractors,
.stat-icon--contractors {
    color: var(--color-contractors);
}

.stat-title--phases,
.stat-icon--phases {
    color: var(--color-phases);
}

.stat-icon--expenses {
    color: var(--color-expenses);
    background: rgba(217, 115, 13, 0.10);
}

.stat-icon--budget {
    color: var(--color-budget);
    background: rgba(15, 127, 98, 0.10);
}

.stat-icon--documents {
    color: var(--color-documents);
    background: rgba(109, 40, 217, 0.10);
}

.stat-icon--photos {
    color: var(--color-photos);
    background: rgba(14, 165, 233, 0.10);
}

.stat-icon--video {
    color: var(--color-video);
    background: rgba(190, 24, 93, 0.10);
}

.stat-icon--contractors {
    color: var(--color-contractors);
    background: rgba(245, 158, 11, 0.10);
}

.stat-icon--phases {
    color: var(--color-phases);
    background: rgba(34, 197, 94, 0.10);
}

.border-projects {
    border: 1px solid rgba(31, 79, 140, 0.35) !important;
    border-left: 4px solid rgba(31, 79, 140, 0.35) !important;
}

.border-expenses {
    border: 1px solid rgba(217, 115, 13, 0.35) !important;
    border-left: 4px solid rgba(217, 115, 13, 0.35) !important;
}

.border-budget {
    border: 1px solid rgba(15, 127, 98, 0.35) !important;
    border-left: 4px solid rgba(15, 127, 98, 0.35) !important;
}

.border-documents {
    border: 1px solid rgba(109, 40, 217, 0.35) !important;
    border-left: 4px solid rgba(109, 40, 217, 0.35) !important;
}

.border-photos {
    border: 1px solid rgba(14, 165, 233, 0.35) !important;
    border-left: 4px solid rgba(14, 165, 233, 0.35) !important;
}

.border-video {
    border: 1px solid rgba(190, 24, 93, 0.35) !important;
    border-left: 4px solid rgba(190, 24, 93, 0.35) !important;
}

.border-contractors {
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-left: 4px solid rgba(245, 158, 11, 0.35) !important;
}

.border-phases {
    border: 1px solid rgba(34, 197, 94, 0.35) !important;
    border-left: 4px solid rgba(34, 197, 94, 0.35) !important;
}

.btn-success {
    border-radius: 0.85rem;
}

.btn-primary,
.btn-secondary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.btn-success {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    background: #173e72;
    border-color: #173e72;
}

.btn-success:hover,
.btn-success:focus {
    background: #3ba260;
    border-color: #3ba260;
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-success:hover,
.btn-outline-success:focus {
    background: rgba(31, 79, 140, 0.08);
    color: var(--color-primary);
}

.btn-secondary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #ffffff;
}

.btn-link {
    color: var(--color-secondary);
}

.btn-link:hover {
    color: var(--color-primary);
}

.hero-banner {
    background: linear-gradient(180deg, rgba(78, 143, 71, 0.12) 0%, rgba(255, 255, 255, 0.85) 100%);
    border: 1px solid rgba(78, 143, 71, 0.16);
}

.projects-home-card {
    background: transparent;
    border: 1px solid rgba(15, 127, 98, 0.28) !important;
    border-left: 4px solid rgba(15, 127, 98, 0.35) !important;
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0.8rem rgba(15, 127, 98, 0.04);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.projects-home-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.9rem 1.2rem rgba(15, 127, 98, 0.06);
}

.hero-banner.projects-home-card {
    background: linear-gradient(180deg, rgba(15, 127, 98, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.pricing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.62);
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0.8rem rgba(31, 79, 140, 0.04);
}

.pricing-eyebrow,
.pricing-plan-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(78, 143, 71, 0.1);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pricing-hero h1 {
    max-width: 760px;
    margin-bottom: 1rem;
    color: var(--color-secondary);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.12;
}

.pricing-hero p {
    max-width: 780px;
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.pricing-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pricing-summary > div {
    min-height: 148px;
    padding: 1.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.62);
}

.pricing-summary span,
.pricing-summary small {
    display: block;
    color: var(--color-muted);
}

.pricing-summary strong {
    display: block;
    margin: 0.4rem 0;
    color: var(--color-secondary);
    font-size: 2.25rem;
    line-height: 1;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    align-items: stretch;
}

.pricing-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.62);
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0.8rem rgba(31, 79, 140, 0.04);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-plan:hover,
.pricing-note:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.9rem 1.2rem rgba(31, 79, 140, 0.06);
}

.pricing-plan-featured {
    box-shadow: 0 0.4rem 0.8rem rgba(31, 79, 140, 0.04);
}

.pricing-badge {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.75rem;
    background: var(--color-accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.pricing-plan-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.pricing-plan h2 {
    margin-bottom: 0;
    color: var(--color-secondary);
    font-size: 1.45rem;
    font-weight: 700;
}

.pricing-page .border-projects .pricing-plan-label,
.pricing-page .border-projects .pricing-price strong,
.pricing-page .border-projects .pricing-list i,
.pricing-page .border-projects.pricing-note i {
    color: var(--color-projects);
}

.pricing-page .border-budget .pricing-plan-label,
.pricing-page .border-budget .pricing-price strong,
.pricing-page .border-budget .pricing-list i {
    color: var(--color-budget);
}

.pricing-page .border-expenses .pricing-plan-label,
.pricing-page .border-expenses .pricing-price strong,
.pricing-page .border-expenses .pricing-list i,
.pricing-page .border-expenses.pricing-note i {
    color: var(--color-expenses);
}

.pricing-page .border-video .pricing-plan-label,
.pricing-page .border-video .pricing-price strong,
.pricing-page .border-video .pricing-list i {
    color: var(--color-video);
}

.pricing-page .border-contractors.pricing-note i {
    color: var(--color-contractors);
}

.pricing-page .border-projects .pricing-plan-label {
    background: rgba(31, 79, 140, 0.08);
}

.pricing-page .border-budget .pricing-plan-label {
    background: rgba(15, 127, 98, 0.08);
}

.pricing-page .border-expenses .pricing-plan-label {
    background: rgba(217, 115, 13, 0.08);
}

.pricing-page .border-video .pricing-plan-label {
    background: rgba(190, 24, 93, 0.08);
}

.pricing-price {
    flex: 0 0 auto;
    min-width: 96px;
    text-align: right;
}

.pricing-price strong,
.pricing-price span {
    display: block;
}

.pricing-price strong {
    color: var(--color-primary);
    font-size: 1.8rem;
    line-height: 1.1;
}

.pricing-price span {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.pricing-description {
    margin: 1.25rem 0 1.5rem;
    color: var(--color-muted);
}

.pricing-plan h3 {
    margin-bottom: 0.9rem;
    color: var(--color-secondary);
    font-size: 0.95rem;
    font-weight: 700;
}

.pricing-list {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.pricing-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: #374151;
}

.pricing-list i {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: 1.05rem;
}

.pricing-limits {
    margin-top: auto;
    padding: 1.2rem;
    background: rgba(31, 58, 95, 0.05);
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 0.85rem;
}

.pricing-limits-pro {
    background: rgba(78, 143, 71, 0.08);
    border-color: rgba(78, 143, 71, 0.18);
}

.pricing-limits ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-muted);
}

.pricing-note {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.62);
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0.8rem rgba(31, 79, 140, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-note i {
    color: var(--color-primary);
    font-size: 1.4rem;
}

.pricing-note h2 {
    margin-bottom: 0.35rem;
    color: var(--color-secondary);
    font-size: 1.1rem;
    font-weight: 700;
}

.pricing-note p {
    margin-bottom: 0;
    color: var(--color-muted);
}

.plan-page .dashboard-projects-card .card-header {
    font-weight: 700;
}

.plan-page .border-projects .card-header {
    background: rgba(31, 79, 140, 0.06);
    border-bottom-color: rgba(31, 79, 140, 0.18);
    color: var(--color-projects);
}

.plan-page .border-budget .card-header {
    background: rgba(15, 127, 98, 0.06);
    border-bottom-color: rgba(15, 127, 98, 0.18);
    color: var(--color-budget);
}

.plan-page .border-expenses .card-header {
    background: rgba(217, 115, 13, 0.06);
    border-bottom-color: rgba(217, 115, 13, 0.18);
    color: var(--color-expenses);
}

.plan-info-tile {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(31, 79, 140, 0.10);
    border-radius: 0.9rem;
}

.plan-info-tile strong {
    color: var(--color-projects);
}

.about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem;
    padding: 3rem;
    background: linear-gradient(135deg, #f7fdff 0%, #e4f4fc 100%);
    border: 1px solid rgba(31, 79, 140, 0.14);
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 3rem rgba(31, 79, 140, 0.08);
}

.about-hero h1 {
    max-width: 760px;
    margin: 0.8rem 0 1rem;
    color: var(--color-secondary);
    font-size: clamp(2.2rem, 4vw, 3.75rem);
    line-height: 1.05;
    font-weight: 800;
}

.about-hero p {
    max-width: 680px;
    color: rgba(22, 50, 92, 0.76);
    font-size: 1.08rem;
    line-height: 1.75;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.about-panel {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(78, 143, 71, 0.16);
    border-radius: 1rem;
}

.about-logo {
    display: block;
    width: min(260px, 100%);
    height: auto;
    margin-bottom: 1.5rem;
}

.about-panel ul {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(22, 50, 92, 0.82);
    font-weight: 600;
}

.about-panel i,
.about-grid i {
    color: var(--color-primary);
}

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

.about-grid article {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(31, 58, 95, 0.05);
}

.about-grid i {
    font-size: 1.8rem;
}

.about-grid h2 {
    margin: 1rem 0 0.7rem;
    color: var(--color-secondary);
    font-size: 1.2rem;
    font-weight: 800;
}

.about-grid p {
    margin: 0;
    color: rgba(22, 50, 92, 0.72);
    line-height: 1.65;
}

.legal-page {
    max-width: 980px;
    margin: 0 auto;
}

.legal-card {
    padding: 3rem;
    background: #ffffff;
    border: 1px solid rgba(31, 79, 140, 0.12);
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 3rem rgba(31, 79, 140, 0.08);
}

.legal-card h1 {
    margin: 0.75rem 0 1rem;
    color: var(--color-secondary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
}

.legal-lead {
    margin-bottom: 2rem;
    color: rgba(22, 50, 92, 0.72);
    font-size: 1.05rem;
    line-height: 1.75;
}

.legal-card h2 {
    margin: 2rem 0 0.65rem;
    color: var(--color-secondary);
    font-size: 1.2rem;
    font-weight: 800;
}

.legal-card p {
    color: rgba(22, 50, 92, 0.76);
    line-height: 1.75;
}

.legal-list {
    color: rgba(22, 50, 92, 0.76);
    line-height: 1.75;
}

.legal-list li + li {
    margin-top: 0.4rem;
}

.legal-card a {
    color: var(--color-primary);
    font-weight: 700;
}

.projects-hero-logo {
    display: block;
    width: auto;
    max-width: min(340px, 78vw);
    height: auto;
}

.bg-soft-green {
    background: rgba(78, 143, 71, 0.08);
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.list-unstyled .bi {
    font-size: 1.1rem;
}

body.auth-background {
    background: url('/pics/background_2.png') center/cover no-repeat fixed;
}

body.auth-background::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(9, 30, 66, 0.32);
    pointer-events: none;
    z-index: 0;
}

body.auth-background {
    background: url('/pics/background_2.png') center/cover no-repeat fixed;
}

body.auth-background::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(9, 30, 66, 0.32);
    pointer-events: none;
    z-index: 0;
}

body.auth-background nav {
    display: none;
}

.auth-page {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 4rem);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 540px;
    border-radius: 2rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2rem 3rem rgba(31, 58, 95, 0.15);
}

.auth-welcome {
    max-width: 720px;
}

.auth-card-simple {
    max-width: 460px;
}

.auth-card-top {
    padding: 3rem 2.5rem 2rem;
    text-align: center;
}

.auth-welcome .auth-logo {
    display: block;
    width: auto;
    max-width: min(220px, 68vw);
    max-height: none;
    height: auto;
    margin: 0 auto 1.75rem;
}

.auth-logo-link {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.auth-card-top h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0.85rem;
}

.auth-card-top .hero-icon {
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    box-shadow: 0 1rem 1.5rem rgba(31, 58, 95, 0.08);
}

.hero-logo {
    max-width: 64px;
    max-height: 64px;
}

.auth-card-top h2 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.auth-card-top p {
    max-width: 34rem;
    margin: 0 auto 1.5rem;
    color: rgba(22, 50, 92, 0.78);
}

.auth-card-top .list-unstyled {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0;
}

.auth-card-top .list-unstyled li {
    min-width: 190px;
    font-size: 0.95rem;
    color: rgba(22, 50, 92, 0.8);
}

.auth-bullets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1rem;
    max-width: 580px;
    margin: 2rem auto 0;
    text-align: left;
}

.auth-bullets div {
    padding: 0.85rem 1rem;
    border: 1px solid rgba(78, 143, 71, 0.16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    color: rgba(22, 50, 92, 0.84);
    font-weight: 500;
}

.auth-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 430px;
    margin: 2rem auto 0;
}

.auth-actions .btn {
    border-radius: 1rem;
    font-weight: 700;
}

.auth-secondary-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    gap: 0.75rem;
    max-width: 520px;
    margin: 1rem auto 0;
    font-weight: 600;
}

.auth-secondary-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(78, 143, 71, 0.18);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-primary) !important;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.auth-secondary-links a:hover {
    border-color: rgba(78, 143, 71, 0.42);
    background: rgba(78, 143, 71, 0.08);
    color: var(--color-primary-dark) !important;
}

.auth-form {
    padding: 3rem 2.5rem 2.5rem;
}

.auth-form-standalone {
    padding-top: 2.5rem;
}

.auth-form-logo {
    display: block;
    width: auto;
    max-width: min(220px, 68vw);
    max-height: none;
    height: auto;
    margin: 0 auto 1.5rem;
}

.auth-form h1 {
    margin-bottom: 1.25rem;
    font-size: 1.85rem;
    text-align: center;
}

.auth-form .form-control,
.auth-form .btn {
    border-radius: 1rem;
}

.auth-form .form-control {
    border: 1px solid rgba(31, 58, 95, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.auth-form .btn-success {
    box-shadow: 0 0.75rem 1.75rem rgba(78, 143, 71, 0.18);
}

.auth-turnstile {
    display: flex;
    justify-content: center;
    text-align: center;
}

.terms-check {
    padding: 1rem 1rem 1rem 2.75rem;
    border: 1px solid rgba(78, 143, 71, 0.18);
    border-radius: 1rem;
    background: rgba(78, 143, 71, 0.06);
}

.terms-check .form-check-input {
    margin-left: -1.75rem;
}

.terms-check a {
    color: var(--color-primary);
    font-weight: 700;
}

.oauth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.oauth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 46px;
    border-color: rgba(31, 58, 95, 0.16);
    background: #ffffff;
    color: var(--color-secondary);
    font-weight: 600;
}

.oauth-button:hover,
.oauth-button:focus {
    background: rgba(31, 58, 95, 0.04);
    border-color: rgba(31, 58, 95, 0.28);
    color: var(--color-secondary);
}

.auth-divider {
    position: relative;
    margin: 1.5rem 0 1.25rem;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
}

.auth-divider span {
    position: relative;
    z-index: 1;
    padding: 0 0.75rem;
    background: rgba(255, 255, 255, 0.97);
}

.auth-hero .hero-icon {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: transparent;
    color: inherit;
    margin-bottom: 1.5rem;
}

.hero-logo {
    max-width: 44px;
    max-height: 44px;
}

.auth-brand {
    align-items: center;
}

.auth-logo {
    max-height: 56px;
    width: auto;
    display: block;
}

.auth-logo-alt {
    opacity: 0.8;
}

@media (max-width: 991px) {
    .auth-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .auth-card-top,
    .auth-form {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .auth-welcome .auth-logo {
        max-width: min(220px, 78vw);
    }

    .auth-card-top h1 {
        font-size: 1.85rem;
    }

    .auth-bullets,
    .auth-actions {
        grid-template-columns: 1fr;
    }
}

.table {
    margin-bottom: 0;
}


.dashboard-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 1.5rem 3rem rgba(31, 58, 95, 0.12);
}

.dashboard-tile .tile-icon {
    width: 56px;
    height: 56px;
}

.project-view-page .card-header {
    background: var(--bs-pagination-disabled-bg, var(--color-bg));
    border-bottom-color: var(--bs-pagination-disabled-border-color, var(--color-border));
    color: var(--color-secondary);
    font-weight: 700;
}

.project-view-page .project-module-card {
    background: transparent;
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0.8rem rgba(31, 79, 140, 0.04);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-view-page .project-module-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.9rem 1.2rem rgba(31, 79, 140, 0.06);
}

.project-view-page .project-module-card .card-header {
    font-weight: 700;
}

.project-view-page .project-module-card .card-body {
    background: rgba(255, 255, 255, 0.62);
}

.project-view-page .project-module-card .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: rgba(31, 79, 140, 0.035);
    --bs-table-border-color: rgba(31, 79, 140, 0.08);
}

.project-view-page .project-module-card .table th,
.project-view-page .project-module-card .table td {
    background-color: transparent;
    border-bottom-color: rgba(31, 79, 140, 0.08);
}

.project-view-page .project-module-card .table thead th {
    color: rgba(17, 24, 39, 0.72);
    font-weight: 700;
}

.project-view-page .project-module-card .table-hover > tbody > tr:hover > * {
    background-color: var(--bs-table-hover-bg);
}

.project-view-page .border-projects .card-header {
    background: rgba(31, 79, 140, 0.06);
    border-bottom-color: rgba(31, 79, 140, 0.18);
    color: var(--color-projects);
}

.project-view-page .border-projects .table {
    --bs-table-hover-bg: rgba(31, 79, 140, 0.035);
    --bs-table-border-color: rgba(31, 79, 140, 0.08);
}

.project-view-page .border-expenses .card-header {
    background: rgba(217, 115, 13, 0.06);
    border-bottom-color: rgba(217, 115, 13, 0.18);
    color: var(--color-expenses);
}

.project-view-page .border-expenses .table {
    --bs-table-hover-bg: rgba(217, 115, 13, 0.035);
    --bs-table-border-color: rgba(217, 115, 13, 0.08);
}

.project-view-page .border-documents .card-header {
    background: rgba(109, 40, 217, 0.06);
    border-bottom-color: rgba(109, 40, 217, 0.18);
    color: var(--color-documents);
}

.project-view-page .border-documents .table {
    --bs-table-hover-bg: rgba(109, 40, 217, 0.035);
    --bs-table-border-color: rgba(109, 40, 217, 0.08);
}

.project-view-page .border-photos .card-header {
    background: rgba(14, 165, 233, 0.06);
    border-bottom-color: rgba(14, 165, 233, 0.18);
    color: var(--color-photos);
}

.project-view-page .border-video .card-header {
    background: rgba(190, 24, 93, 0.06);
    border-bottom-color: rgba(190, 24, 93, 0.18);
    color: var(--color-video);
}

.project-view-page .border-contractors .card-header {
    background: rgba(245, 158, 11, 0.06);
    border-bottom-color: rgba(245, 158, 11, 0.18);
    color: var(--color-contractors);
}

.project-view-page .border-contractors .table {
    --bs-table-hover-bg: rgba(245, 158, 11, 0.045);
    --bs-table-border-color: rgba(245, 158, 11, 0.10);
}

.project-view-page .border-phases .card-header {
    background: rgba(34, 197, 94, 0.06);
    border-bottom-color: rgba(34, 197, 94, 0.18);
    color: var(--color-phases);
}

.project-view-page .border-phases .table {
    --bs-table-hover-bg: rgba(34, 197, 94, 0.04);
    --bs-table-border-color: rgba(34, 197, 94, 0.09);
}

.project-view-page .project-title-bar {
    background: rgba(31, 79, 140, 0.06);
    border-bottom: 1px solid rgba(31, 79, 140, 0.18);
    color: var(--color-projects);
    flex-wrap: wrap;
    margin: -1rem -1rem 1rem;
    padding: 1rem;
}

.project-view-page .project-title-bar .card-title {
    color: var(--color-projects);
}

.project-view-page .project-summary-card .card-body {
    padding-top: 1rem;
}

.project-summary-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.project-summary-metric {
    background: rgba(31, 79, 140, 0.035);
    border: 1px solid rgba(31, 79, 140, 0.10);
    border-radius: 0.85rem;
    padding: 0.75rem;
}

.project-summary-metric span {
    display: block;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.project-summary-metric strong {
    display: block;
    color: var(--color-projects);
    font-size: 1rem;
    margin-top: 0.15rem;
}

@media (max-width: 991.98px) {
    .project-summary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .project-summary-metrics {
        grid-template-columns: 1fr;
    }
}

.project-cover-thumb {
    width: 96px;
    height: 64px;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    object-fit: cover;
}

.project-list-cover,
.project-table-cover {
    width: 56px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    object-fit: cover;
}

.project-cover-preview img {
    width: min(360px, 100%);
    aspect-ratio: 16 / 9;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    object-fit: cover;
}

.phase-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.phase-photo-thumb {
    display: block;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    background: #ffffff;
}

.phase-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

.photo-list-item {
    display: grid;
    grid-template-columns: 76px minmax(130px, 0.7fr) minmax(180px, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    background: #ffffff;
}

.photo-list-thumb {
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: rgba(78, 143, 71, 0.06);
}

.photo-list-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-list-date {
    color: var(--color-muted);
    font-size: 0.86rem;
}

.photo-list-description {
    color: rgba(22, 50, 92, 0.86);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.photo-list-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.photo-pagination,
.expense-pagination,
.timeline-pagination,
.documents-pagination,
.phases-pagination,
.contractors-pagination {
    margin-top: 1rem;
}

.expenses-table {
    table-layout: auto;
    min-width: 1280px;
}

.expenses-date-col {
    width: 7.5rem;
}

.expenses-amount-col {
    width: 8.5rem;
}

.expenses-category-col {
    width: 8.5rem;
}

.expenses-phase-col {
    width: 10rem;
}

.expenses-contractor-col {
    width: 12rem;
}

.expenses-description-col {
    min-width: 24rem;
}

.expenses-document-col {
    width: 11.5rem;
}

.expenses-actions-col {
    width: 8.5rem;
}

.expenses-table td,
.expenses-table th {
    overflow-wrap: normal;
    vertical-align: middle;
}

.expenses-description-cell {
    min-width: 24rem;
    overflow-wrap: break-word;
}

.documents-table {
    table-layout: auto;
    min-width: 760px;
}

.documents-attachments-col {
    width: 12rem;
}

.documents-actions-col {
    width: 16rem;
}

.documents-table td,
.documents-table th {
    overflow-wrap: break-word;
    vertical-align: middle;
}

.phases-table {
    table-layout: auto;
    min-width: 900px;
}

.phases-order-col {
    width: 7rem;
}

.phases-progress-col {
    width: 7rem;
}

.phases-photos-col {
    width: 16rem;
}

.phases-actions-col {
    width: 7rem;
}

.phases-table td,
.phases-table th {
    overflow-wrap: break-word;
    vertical-align: middle;
}

.contractors-table {
    table-layout: auto;
    min-width: 1180px;
}

.contractors-name-col {
    min-width: 16rem;
}

.contractors-phone-col {
    width: 9rem;
}

.contractors-email-col {
    width: 15rem;
}

.contractors-website-col {
    width: 15rem;
}

.contractors-notes-col {
    min-width: 22rem;
}

.contractors-actions-col {
    width: 12rem;
}

.contractors-table td,
.contractors-table th {
    overflow-wrap: normal;
    vertical-align: middle;
}

.contractors-name-cell,
.contractors-notes-cell {
    overflow-wrap: break-word;
}

.expense-filter-link {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.expense-filter-link:hover,
.expense-filter-link:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

#project-expenses-card.fragment-loading,
#project-timeline-card.fragment-loading,
#project-documents-card.fragment-loading,
#project-phases-card.fragment-loading,
#project-contractors-card.fragment-loading {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.timeline-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.timeline-event-meta span + span::before {
    content: "-";
    margin-right: 0.4rem;
    color: var(--color-muted);
}

.pagination .page-link {
    color: var(--color-primary);
    border-color: rgba(78, 143, 71, 0.22);
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    color: var(--color-primary-dark);
    background: rgba(78, 143, 71, 0.08);
    border-color: rgba(78, 143, 71, 0.38);
    box-shadow: 0 0 0 0.2rem rgba(78, 143, 71, 0.12);
}

.pagination .page-item.active .page-link {
    color: #ffffff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.pagination .page-item.disabled .page-link {
    color: var(--color-muted);
}

.list-group-item {
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    margin-bottom: 0.75rem;
}

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

.password-strength {
    width: 100%;
    height: 8px;
    overflow: hidden;
    background: #E5E7EB;
    border-radius: 999px;
}

.password-strength-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #DC2626;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.password-strength-bar[data-strength="medium"] {
    background: #D97706;
}

.password-strength-bar[data-strength="good"] {
    background: #65A30D;
}

.password-strength-bar[data-strength="strong"] {
    background: var(--color-primary);
}

[data-password-label][data-strength="weak"] {
    color: #B91C1C;
}

[data-password-label][data-strength="medium"] {
    color: #B45309;
}

[data-password-label][data-strength="good"],
[data-password-label][data-strength="strong"] {
    color: var(--color-primary);
}

.password-requirements {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0;
    padding-left: 1.1rem;
    color: var(--color-muted);
    font-size: 0.86rem;
}

.password-requirements li[data-valid="true"] {
    color: var(--color-primary);
}

.password-requirements li[data-valid="false"] {
    color: #B91C1C;
}

.password-generator-button {
    flex-shrink: 0;
    white-space: nowrap;
}

.password-generator-spacer {
    display: block;
    width: 98px;
    min-height: 31px;
    flex-shrink: 0;
}

.password-toggle {
    width: 46px;
}

@media (max-width: 991.98px) {
    .pricing-hero,
    .pricing-grid,
    .about-hero,
    .about-grid {
        grid-template-columns: 1fr;
    }

    .pricing-badge {
        max-width: none;
    }

    .photo-list-item {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .photo-list-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .auth-secondary-links {
        grid-template-columns: 1fr;
    }

    .pricing-hero,
    .pricing-plan,
    .pricing-note,
    .about-hero,
    .about-grid article,
    .legal-card {
        padding: 1.25rem;
    }

    .pricing-hero h1,
    .about-hero h1 {
        font-size: 2rem;
    }

    .pricing-summary,
    .pricing-plan-header {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pricing-price {
        text-align: left;
    }

    .photo-list-item {
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: start;
    }

    .photo-list-description,
    .photo-list-actions {
        grid-column: 1 / -1;
    }
}