:root {
    --rc-ink: #10283f;
    --rc-muted: #687687;
    --rc-bg: #f4f7fa;
    --rc-line: #dde5ec;
    --rc-primary: #126d73;
    --rc-primary-dark: #0b5257;
    --rc-accent: #d5a84f;
    --rc-card: #fff;
    --rc-shadow: 0 14px 40px rgba(16, 40, 63, .08);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { color: var(--rc-ink); background: var(--rc-bg); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.btn-primary { --bs-btn-bg: var(--rc-primary); --bs-btn-border-color: var(--rc-primary); --bs-btn-hover-bg: var(--rc-primary-dark); --bs-btn-hover-border-color: var(--rc-primary-dark); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--rc-ink); text-decoration: none; }
.brand:hover { color: var(--rc-ink); }
.brand-mark { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--rc-primary), #1b8d92); border-radius: .72rem; box-shadow: 0 7px 18px rgba(18, 109, 115, .24); }
.brand strong, .brand small, .user-menu strong, .user-menu small { display: block; }
.brand strong { font-size: 1.02rem; letter-spacing: -.02em; }
.brand small, .user-menu small { color: var(--rc-muted); font-size: .68rem; line-height: 1.15; }
.brand-light { color: #fff; }
.brand-light:hover { color: #fff; }
.brand-light small { color: rgba(255,255,255,.65); }

.app-header { min-height: 4.5rem; padding: .75rem 0; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--rc-line); position: sticky; top: 0; z-index: 1025; }
.app-header .nav-link { color: #34485c; display: flex; gap: .45rem; align-items: center; border: 0; background: transparent; }
.app-header .nav-link:hover, .app-header .nav-link:focus { color: var(--rc-primary); }
.dropdown-menu { --bs-dropdown-border-color: var(--rc-line); padding: .55rem; min-width: 14rem; border-radius: .8rem; }
.dropdown-item { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border-radius: .55rem; }
.dropdown-item i { color: var(--rc-primary); width: 1.15rem; text-align: center; }
.dropdown-item:hover { background: #edf7f7; color: var(--rc-primary-dark); }
.user-avatar { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: #e7f3f3; color: var(--rc-primary-dark); border-radius: 50%; font-weight: 750; }
.app-main { min-height: calc(100vh - 4.5rem); }

.madi-tabbar { background: #fff; border-bottom: 1px solid var(--rc-line); padding: 0 1rem; }
.madi-tab-list { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin; }
.madi-tab-button { min-width: max-content; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--rc-muted); padding: .9rem .8rem .72rem; font-size: .88rem; font-weight: 650; }
.madi-tab-button:hover { color: var(--rc-primary); }
.madi-tab-button.active { color: var(--rc-primary-dark); border-bottom-color: var(--rc-accent); }
.madi-tab-close { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-left: .45rem; color: #82909e; border-radius: 50%; font-size: 1.05rem; }
.madi-tab-close:hover { background: #e9eef2; color: #b02a37; }
.madi-tab-panel { padding: 1.25rem; }
.module-loading { min-height: 15rem; display: grid; place-content: center; gap: .6rem; color: var(--rc-muted); text-align: center; }
.module-error, .empty-state { min-height: 14rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; color: var(--rc-muted); text-align: center; padding: 2rem; }
.module-error i, .empty-state > i { font-size: 2rem; color: var(--rc-primary); }
.module-error strong, .empty-state strong { color: var(--rc-ink); }

.module-page { max-width: 1600px; margin: 0 auto; }
.module-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
.module-heading h1 { display: flex; align-items: center; gap: .65rem; margin: .15rem 0 .2rem; font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -.035em; }
.module-heading h1 i { color: var(--rc-primary); }
.module-heading p { margin: 0; color: var(--rc-muted); }
.eyebrow { color: var(--rc-primary); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.metric-card, .content-card { background: var(--rc-card); border: 1px solid var(--rc-line); border-radius: 1rem; box-shadow: var(--rc-shadow); }
.metric-card { display: flex; align-items: center; gap: .9rem; padding: 1.1rem; }
.metric-card small, .metric-card strong { display: block; }
.metric-card small { color: var(--rc-muted); font-size: .75rem; }
.metric-card strong { font-size: 1.7rem; letter-spacing: -.04em; }
.metric-icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .8rem; font-size: 1.15rem; }
.metric-icon.blue { color: #245ea8; background: #e7f0fb; }
.metric-icon.teal { color: #126d73; background: #e3f3f3; }
.metric-icon.amber { color: #8b661d; background: #fbf1dc; }
.metric-icon.violet { color: #7251a3; background: #f0eafa; }
.content-card { padding: 1.1rem; min-height: 100%; }
.error-card { max-width: 32rem; }
.installer-card { max-width: 48rem; }
.content-card h2 { margin: 0; font-size: 1rem; }
.status-list { list-style: none; padding: .35rem 0 0; margin: 0; }
.status-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--rc-line); font-size: .82rem; }
.status-list li:last-child { border: 0; }
.status-list span { color: var(--rc-muted); }
.status-list i { margin-right: .4rem; }
.table-card { padding: 0; overflow: hidden; }
.table-card th { color: var(--rc-muted); background: #f8fafc; border-bottom-color: var(--rc-line); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.table-card td { border-bottom-color: #edf1f4; font-size: .85rem; }
.table-card th, .table-card td { padding: .85rem 1rem; }
.table-card code { color: var(--rc-primary-dark); }
.status-pill { display: inline-block; padding: .25rem .5rem; color: var(--rc-primary-dark); background: #e7f3f3; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; min-height: 5.4rem; }
.gallery-thumb { position: relative; min-width: 0; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: .65rem; background: #eef3f6; }
.gallery-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gallery-thumb figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: .3rem .45rem; color: #fff; background: linear-gradient(transparent, rgba(16,40,63,.8)); font-size: .68rem; }
.gallery-empty { min-height: 5.4rem; grid-column: 1 / -1; display: grid; place-content: center; gap: .25rem; color: var(--rc-muted); text-align: center; background: #f7f9fb; border: 1px dashed var(--rc-line); border-radius: .65rem; font-size: .76rem; }
.gallery-empty i { font-size: 1.3rem; color: var(--rc-primary); }
.gallery-upload { padding-top: .75rem; border-top: 1px solid var(--rc-line); }

.login-body { margin: 0; background: #fff; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(20rem, 1.05fr) minmax(22rem, .95fr); }
.login-intro { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 6vw, 5.5rem); color: #fff; background: radial-gradient(circle at 78% 20%, rgba(213,168,79,.25), transparent 28%), linear-gradient(145deg, #0d2539, #164d58); }
.login-intro h1 { max-width: 11ch; margin: .5rem 0 1rem; font-size: clamp(2.35rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.055em; }
.login-intro p { max-width: 36rem; color: rgba(255,255,255,.72); font-size: 1.05rem; }
.login-intro > small { color: rgba(255,255,255,.55); }
.login-panel { display: grid; place-items: center; padding: 2rem; }
.login-card { width: min(100%, 27rem); }
.login-icon { width: 3rem; height: 3rem; display: grid; place-items: center; margin-bottom: 1.2rem; color: var(--rc-primary); background: #e7f3f3; border-radius: .9rem; font-size: 1.3rem; }
.login-card h2 { margin-bottom: .25rem; font-size: 2rem; letter-spacing: -.04em; }
.login-card > p { color: var(--rc-muted); margin-bottom: 2rem; }
.login-card .input-group-text { background: #f7f9fb; border-right: 0; color: var(--rc-muted); }
.login-card .form-control { border-left: 0; padding-block: .72rem; }
.login-card .form-control:focus { border-color: #dee2e6; box-shadow: none; }
.login-card .btn { padding: .78rem 1rem; }

@media (max-width: 991.98px) {
    .app-header .navbar-collapse { padding-top: 1rem; }
    .user-menu { padding-top: 1rem; border-top: 1px solid var(--rc-line); }
    .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .login-shell { grid-template-columns: 1fr; }
    .login-intro { min-height: 20rem; }
    .login-intro h1 { font-size: clamp(2.3rem, 8vw, 3.5rem); }
}

@media (max-width: 575.98px) {
    .madi-tab-panel { padding: .9rem; }
    .module-heading { align-items: flex-start; flex-direction: column; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card strong { font-size: 1.45rem; }
    .login-intro { min-height: 17rem; padding: 1.5rem; }
    .login-intro > div:nth-child(2) p { display: none; }
    .login-panel { padding: 2.2rem 1.25rem; place-items: start center; }
}