:root {
    --cr-ink: #18323a;
    --cr-muted: #60747a;
    --cr-primary: #173f49;
    --cr-primary-strong: #102f37;
    --cr-primary-soft: #e8f2f2;
    --cr-accent: #c69a47;
    --cr-accent-soft: #f7efdF;
    --cr-surface: #ffffff;
    --cr-canvas: #f4f7f6;
    --cr-border: #dce5e3;
    --cr-success: #217a57;
    --cr-warning: #a46308;
    --cr-danger: #a53838;
    --cr-shadow: 0 16px 44px rgba(25, 57, 64, .08);
    --cr-radius: 1rem;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--cr-ink);
    background: var(--cr-canvas);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cr-primary); }
a:hover { color: var(--cr-primary-strong); }

:focus-visible {
    outline: 3px solid rgba(198, 154, 71, .55) !important;
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: .75rem;
    left: .75rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    color: #fff;
    background: var(--cr-primary-strong);
    transform: translateY(-160%);
    transition: transform .15s ease;
}
.skip-link:focus { color: #fff; transform: translateY(0); }

.app-header {
    z-index: 1025;
    border-bottom: 1px solid rgba(220, 229, 227, .9);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
}
.app-header .navbar { min-height: 74px; }
.app-header .navbar-brand { color: var(--cr-ink); margin-right: 2rem; }
.app-header .navbar-brand:hover { color: var(--cr-ink); }
.navbar-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.08; }
.navbar-brand strong { font-size: 1rem; letter-spacing: -.01em; }
.navbar-brand small { color: var(--cr-muted); font-size: .7rem; margin-top: .2rem; font-weight: 500; }
.brand-mark {
    display: inline-grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: .78rem;
    color: #fff;
    background: linear-gradient(145deg, var(--cr-primary), #27616d);
    box-shadow: 0 8px 18px rgba(23, 63, 73, .2);
    font-family: Georgia, serif;
    font-size: .83rem;
    letter-spacing: .08em;
}
.app-header .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 .1rem;
    padding: .65rem .76rem !important;
    border-radius: .65rem;
    color: #52686e;
    font-size: .9rem;
    font-weight: 600;
}
.app-header .nav-link:hover { color: var(--cr-primary); background: var(--cr-primary-soft); }
.app-header .nav-link.active { color: var(--cr-primary); background: var(--cr-primary-soft); }

.navbar-toggler { border-color: var(--cr-border); }
.navbar-toggler:focus { box-shadow: none; }
.navbar-actions { margin-left: auto; }
.icon-button {
    display: inline-grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    border: 1px solid var(--cr-border);
    border-radius: 50%;
    color: var(--cr-ink);
    background: #fff;
    text-decoration: none;
}
.icon-button:hover { color: var(--cr-primary); background: var(--cr-primary-soft); }
.notification-dot {
    position: absolute;
    top: .25rem;
    right: .25rem;
    width: .55rem;
    height: .55rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #d54848;
}
.user-menu {
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 0;
    color: var(--cr-ink);
    background: transparent;
    text-align: left;
}
.user-menu::after { color: var(--cr-muted); }
.user-avatar {
    display: inline-grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    border-radius: 50%;
    color: var(--cr-primary);
    background: var(--cr-primary-soft);
}
.user-copy { flex-direction: column; line-height: 1.1; }
.user-copy strong { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.user-copy small { margin-top: .2rem; color: var(--cr-muted); font-size: .7rem; }

.app-main { min-height: calc(100vh - 144px); padding-bottom: 3rem; }
.page-shell { padding-top: 2rem; }
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.55rem;
}
.page-eyebrow {
    margin-bottom: .38rem;
    color: var(--cr-primary);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.page-title { margin: 0; color: var(--cr-ink); font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 750; letter-spacing: -.035em; }
.page-description { max-width: 48rem; margin: .55rem 0 0; color: var(--cr-muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.app-card {
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    background: var(--cr-surface);
    box-shadow: 0 5px 18px rgba(25, 57, 64, .035);
}
.app-card.hover-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.app-card.hover-card:hover { transform: translateY(-2px); border-color: #c5d5d2; box-shadow: var(--cr-shadow); }
.card-section { padding: 1.35rem; }
.card-divider { border-top: 1px solid var(--cr-border); }
.section-heading { margin-bottom: 1rem; font-size: 1.05rem; font-weight: 750; letter-spacing: -.015em; }
.section-subtitle { color: var(--cr-muted); font-size: .88rem; }

.hero-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    border: 0;
    border-radius: 1.25rem;
    color: #fff;
    background: linear-gradient(128deg, #123841 0%, #1e5662 67%, #2b6972 100%);
    box-shadow: 0 18px 50px rgba(23, 63, 73, .16);
}
.hero-panel::after {
    position: absolute;
    width: 18rem;
    height: 18rem;
    right: -7rem;
    bottom: -10rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 3rem rgba(255,255,255,.035), 0 0 0 6rem rgba(255,255,255,.025);
    content: "";
}
.hero-panel > * { position: relative; z-index: 1; }
.hero-panel .page-eyebrow { color: #d9c18e; }
.hero-panel h1 { max-width: 45rem; font-size: clamp(1.65rem, 4vw, 2.55rem); font-weight: 750; letter-spacing: -.04em; }
.hero-panel p { max-width: 43rem; margin: .7rem 0 0; color: rgba(255,255,255,.78); }

.stat-card { height: 100%; padding: 1.2rem; }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.stat-label { margin: 0; color: var(--cr-muted); font-size: .79rem; font-weight: 650; }
.stat-icon {
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: .7rem;
    color: var(--cr-primary);
    background: var(--cr-primary-soft);
}
.stat-value { display: block; margin-top: .65rem; font-size: clamp(1.35rem, 3vw, 1.72rem); font-weight: 780; letter-spacing: -.035em; }
.stat-note { display: block; margin-top: .25rem; color: var(--cr-muted); font-size: .74rem; }

.metric-label { color: var(--cr-muted); font-size: .74rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.metric-value { display: block; margin-top: .18rem; color: var(--cr-ink); font-size: 1rem; font-weight: 720; }
.money-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-positive { color: var(--cr-success) !important; }

.opportunity-card { display: flex; flex-direction: column; height: 100%; }
.opportunity-card .card-section { flex: 1; }
.opportunity-kicker { display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin-bottom: .9rem; }
.opportunity-code { color: var(--cr-muted); font-size: .75rem; font-weight: 650; }
.opportunity-title { margin-bottom: .55rem; font-size: 1.12rem; font-weight: 750; letter-spacing: -.02em; }
.opportunity-description { min-height: 2.75rem; color: var(--cr-muted); font-size: .88rem; }
.opportunity-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.15rem 0; }
.opportunity-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.3rem; border-top: 1px solid var(--cr-border); }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    width: max-content;
    padding: .34rem .58rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 750;
    line-height: 1;
}
.status-dot { width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.status-success { color: #176747; background: #e5f4ed; }
.status-warning { color: #8b5604; background: #fff2d8; }
.status-danger { color: #973737; background: #fdeaea; }
.status-neutral { color: #54686d; background: #edf2f1; }

.btn { border-radius: .68rem; font-weight: 650; }
.btn-primary { border-color: var(--cr-primary); background: var(--cr-primary); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--cr-primary-strong); background: var(--cr-primary-strong); }
.btn-outline-primary { border-color: #9fb5b7; color: var(--cr-primary); }
.btn-outline-primary:hover { border-color: var(--cr-primary); background: var(--cr-primary); }
.btn-accent { border-color: var(--cr-accent); color: #142d32; background: var(--cr-accent); }
.btn-accent:hover { border-color: #b88a35; color: #142d32; background: #b88a35; }
.btn-light-soft { border: 1px solid rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.1); }
.btn-light-soft:hover { color: #fff; background: rgba(255,255,255,.18); }

.app-alert { display: flex; align-items: flex-start; gap: .65rem; border-radius: .8rem; }
.alert-soft-info { border: 1px solid #cde0e4; color: #244c56; background: #eef7f8; }
.alert-soft-warning { border: 1px solid #ebd6aa; color: #704b0e; background: #fff8e8; }

.app-form .form-label { margin-bottom: .38rem; color: #29464d; font-size: .82rem; font-weight: 700; }
.app-form input:not([type="checkbox"]):not([type="radio"]),
.app-form select,
.app-form textarea,
.filter-form input,
.filter-form select {
    display: block;
    width: 100%;
    min-height: 2.8rem;
    padding: .65rem .78rem;
    border: 1px solid #cfdcda;
    border-radius: .66rem;
    color: var(--cr-ink);
    background: #fff;
}
.app-form textarea { min-height: 7rem; resize: vertical; }
.app-form input:focus, .app-form select:focus, .app-form textarea:focus,
.filter-form input:focus, .filter-form select:focus {
    border-color: #709aa0;
    outline: 0;
    box-shadow: 0 0 0 .22rem rgba(38, 105, 115, .12);
}
.app-form input[disabled], .app-form select[disabled] { color: #68797d; background: #edf2f1; }
.app-form .errorlist { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--cr-danger); font-size: .82rem; }
.required-mark { margin-left: .2rem; color: var(--cr-danger); }
.form-text { color: var(--cr-muted); font-size: .76rem; }
.app-check { padding: 1rem 1rem 1rem 2.8rem; border: 1px solid var(--cr-border); border-radius: .75rem; background: #fafcfc; }
.app-check .form-check-input { margin-top: .2rem; }
.app-check .form-check-label { font-size: .9rem; font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--cr-border); }

.table-card { overflow: hidden; }
.app-table { margin: 0; }
.app-table thead th {
    padding: .8rem 1rem;
    border-bottom-color: var(--cr-border);
    color: var(--cr-muted);
    background: #f8faf9;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.app-table tbody td { padding: .95rem 1rem; border-bottom-color: #e7edec; vertical-align: middle; font-size: .86rem; }
.app-table tbody tr:last-child td { border-bottom: 0; }
.table-primary-text { color: var(--cr-ink); font-weight: 700; text-decoration: none; }
.table-secondary-text { display: block; margin-top: .18rem; color: var(--cr-muted); font-size: .74rem; }

.detail-list { margin: 0; }
.detail-row { display: grid; grid-template-columns: minmax(9rem, 38%) 1fr; gap: 1rem; padding: .82rem 0; border-bottom: 1px solid #e8eeed; }
.detail-row:last-child { border-bottom: 0; }
.detail-row dt { color: var(--cr-muted); font-size: .79rem; font-weight: 600; }
.detail-row dd { margin: 0; text-align: right; font-size: .88rem; font-weight: 680; }

.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { position: absolute; top: .7rem; bottom: .7rem; left: .48rem; width: 2px; background: var(--cr-border); content: ""; }
.timeline-item { position: relative; padding: 0 0 1.2rem 2rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker { position: absolute; top: .28rem; left: .15rem; width: .7rem; height: .7rem; border: 2px solid #fff; border-radius: 50%; background: var(--cr-primary); box-shadow: 0 0 0 2px var(--cr-primary-soft); }
.timeline-title { margin: 0; font-size: .87rem; font-weight: 700; }
.timeline-meta { margin-top: .18rem; color: var(--cr-muted); font-size: .72rem; }
.timeline-copy { margin: .35rem 0 0; color: #50666b; font-size: .83rem; }

.empty-state { padding: 3rem 1.5rem; color: var(--cr-muted); text-align: center; }
.empty-state-icon { display: inline-grid; width: 3.4rem; height: 3.4rem; margin-bottom: 1rem; place-items: center; border-radius: 1rem; color: var(--cr-primary); background: var(--cr-primary-soft); font-size: 1.3rem; }
.empty-state h2 { color: var(--cr-ink); }
.empty-state p { max-width: 29rem; margin: .4rem auto 0; }

.terms-document { color: #2d4146; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.75; }
.terms-document h1, .terms-document h2, .terms-document h3 { color: var(--cr-ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.terms-document h2 { margin-top: 1.7rem; font-size: 1.15rem; }
.document-meta { padding: 1rem; border: 1px dashed #c6d5d3; border-radius: .75rem; color: var(--cr-muted); background: #f8faf9; font-size: .79rem; }

.payment-box { padding: 1.15rem; border: 1px solid #d5c08f; border-radius: .9rem; background: #fffaee; }
.payment-key { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .75rem; padding: .7rem .8rem; border: 1px solid #ead8ad; border-radius: .65rem; background: #fff; }
.payment-key code { overflow-wrap: anywhere; color: var(--cr-ink); font-size: .88rem; }

.notification-item { display: flex; gap: 1rem; padding: 1.1rem; border-bottom: 1px solid var(--cr-border); }
.notification-item:last-child { border-bottom: 0; }
.notification-item.unread { background: #f3f9f8; }
.notification-icon { display: inline-grid; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .75rem; color: var(--cr-primary); background: var(--cr-primary-soft); }
.notification-body { min-width: 0; flex: 1; }
.notification-body h2 { margin: 0; font-size: .91rem; font-weight: 730; }
.notification-body p { margin: .28rem 0 0; color: var(--cr-muted); font-size: .82rem; }
.notification-meta { color: var(--cr-muted); font-size: .7rem; }

.conversation-layout { display: grid; grid-template-columns: minmax(14rem, 29%) 1fr; min-height: 32rem; overflow: hidden; }
.conversation-list { border-right: 1px solid var(--cr-border); background: #fafcfc; }
.conversation-link { display: block; padding: 1rem; border-bottom: 1px solid var(--cr-border); color: var(--cr-ink); text-decoration: none; }
.conversation-link:hover, .conversation-link.active { color: var(--cr-ink); background: var(--cr-primary-soft); }
.conversation-link strong { display: block; font-size: .85rem; }
.conversation-link small { display: block; margin-top: .25rem; overflow: hidden; color: var(--cr-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-main { display: flex; min-width: 0; flex-direction: column; }
.message-stream { height: 26rem; padding: 1.25rem; overflow-y: auto; }
.message-bubble { max-width: 76%; margin-bottom: .8rem; padding: .7rem .85rem; border-radius: .85rem .85rem .85rem .22rem; color: #354b50; background: #edf2f1; font-size: .85rem; }
.message-bubble.mine { margin-left: auto; border-radius: .85rem .85rem .22rem .85rem; color: #fff; background: var(--cr-primary); }
.message-bubble time { display: block; margin-top: .3rem; color: inherit; font-size: .65rem; opacity: .7; }
.message-compose { padding: 1rem; border-top: 1px solid var(--cr-border); background: #fafcfc; }

.auth-main { min-height: 100vh; background: #eef3f2; }
.auth-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.05fr) minmax(25rem, .95fr); }
.auth-visual { position: relative; display: flex; min-height: 100%; overflow: hidden; align-items: flex-end; padding: clamp(2rem, 6vw, 5.5rem); color: #fff; background: linear-gradient(145deg, #102f37, #1c515d 65%, #2a6973); }
.auth-visual::before { position: absolute; top: -12rem; left: -10rem; width: 30rem; height: 30rem; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(255,255,255,.025), 0 0 0 10rem rgba(255,255,255,.02); content: ""; }
.auth-copy { position: relative; max-width: 35rem; z-index: 1; }
.auth-copy .brand-mark { margin-bottom: 2rem; background: rgba(255,255,255,.13); box-shadow: none; }
.auth-copy h1 { font-size: clamp(2rem, 5vw, 3.7rem); font-weight: 720; letter-spacing: -.055em; line-height: 1.02; }
.auth-copy p { max-width: 29rem; margin-top: 1.2rem; color: rgba(255,255,255,.73); }
.auth-features { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; padding: 0; list-style: none; }
.auth-features li { display: flex; align-items: center; gap: .42rem; color: rgba(255,255,255,.84); font-size: .8rem; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fff; }
.auth-card { width: 100%; max-width: 26rem; }
.auth-card h2 { font-size: 1.65rem; font-weight: 750; letter-spacing: -.035em; }
.auth-card > p { color: var(--cr-muted); }

.error-page { display: grid; min-height: calc(100vh - 144px); place-items: center; padding: 2rem; text-align: center; }
.error-code { color: var(--cr-primary); font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; letter-spacing: -.08em; line-height: .9; opacity: .16; }
.error-page h1 { margin-top: -1rem; font-weight: 750; letter-spacing: -.03em; }
.error-page p { max-width: 34rem; color: var(--cr-muted); }

.app-footer { padding: 1.35rem 0; border-top: 1px solid var(--cr-border); color: var(--cr-muted); background: #fff; font-size: .75rem; }
.page-link { border-color: var(--cr-border); color: var(--cr-primary); }
.page-link:hover { color: var(--cr-primary-strong); background: var(--cr-primary-soft); }
.breadcrumb { font-size: .78rem; }
.breadcrumb-item + .breadcrumb-item::before { color: #91a3a6; }

.swal2-popup { border-radius: 1.05rem !important; }
.swal2-title { color: var(--cr-ink) !important; font-size: 1.45rem !important; }
.payment-modal-content { text-align: left; }
.payment-modal-content .payment-highlight { margin: 1rem 0; padding: 1rem; border-radius: .8rem; background: #f4f8f7; text-align: center; }
.payment-modal-content .payment-highlight strong { display: block; margin-top: .2rem; color: var(--cr-primary); font-size: 1.45rem; }
.payment-modal-content dl { margin-bottom: 0; }
.payment-modal-content dt { margin-top: .75rem; color: var(--cr-muted); font-size: .7rem; text-transform: uppercase; }
.payment-modal-content dd { margin: .15rem 0 0; color: var(--cr-ink); font-weight: 680; overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
    .app-header .navbar-collapse { margin-top: .8rem; padding: .8rem 0 1rem; border-top: 1px solid var(--cr-border); }
    .navbar-actions { margin-top: .8rem; margin-left: 0; padding-top: .8rem; border-top: 1px solid var(--cr-border); }
    .auth-layout { grid-template-columns: 1fr; }
    .auth-visual { min-height: 20rem; padding: 2.5rem; }
    .auth-copy h1 { font-size: 2.25rem; }
    .auth-panel { padding: 3rem 1.25rem; }
}

@media (max-width: 767.98px) {
    .page-shell { padding-top: 1.35rem; }
    .page-header { flex-direction: column; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1; }
    .opportunity-metrics { grid-template-columns: repeat(2, 1fr); }
    .conversation-layout { grid-template-columns: 1fr; }
    .conversation-list { max-height: 13rem; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--cr-border); }
    .message-bubble { max-width: 88%; }
    .detail-row { grid-template-columns: 1fr; gap: .2rem; }
    .detail-row dd { text-align: left; }
}

@media (max-width: 575.98px) {
    .hero-panel { border-radius: 0; margin-right: -.75rem; margin-left: -.75rem; }
    .card-section { padding: 1rem; }
    .opportunity-metrics { grid-template-columns: 1fr 1fr; }
    .opportunity-footer { align-items: stretch; flex-direction: column; }
    .opportunity-footer .btn { width: 100%; }
    .auth-visual { min-height: 17rem; padding: 2rem 1.25rem; }
    .auth-features { display: none; }
    .auth-panel { align-items: flex-start; padding-top: 2rem; }
    .table-responsive { margin-right: -1rem; margin-left: -1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
    .app-header, .app-footer, .page-actions, .btn, .no-print { display: none !important; }
    body, .app-main { background: #fff; }
    .app-card { border: 0; box-shadow: none; }
    .page-shell { padding: 0; }
    .terms-document { font-size: 11pt; }
}