@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --ink: #172329;
    --muted: #718087;
    --line: #e3e9e7;
    --paper: #f8faf8;
    --orange: #ee6b3b;
    --teal: #176d6b;
    --pale: #e8f0ed
}

* {
    box-sizing: border-box
}

a {
    text-decoration: none
}

body {
    margin: 0;
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    background: var(--paper)
}

button,
input {
    font: inherit
}

.eyebrow {
    margin: 0;
    color: #899694;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px
}

.brand-mark {
    display: flex;
    position: relative;
    width: 39px;
    height: 39px;
    align-items: center;
    justify-content: center;
    background: var(--orange);
    color: #fff;
    font-family: 'Space Grotesk';
    font-weight: 700;
    letter-spacing: -1px;
    transform: rotate(-5deg)
}

.brand-mark span {
    transform: rotate(5deg)
}

.brand-mark i {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #f6c247;
    right: -3px;
    top: -3px
}

.login-page {
    min-height: 100vh;
    background: #f4f7f3
}

.login-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    max-width: 1440px;
    margin: auto
}

.login-intro {
    position: relative;
    overflow: hidden;
    padding: 8vh 9vw;
    background: #176d6b;
    color: #f6fbf7
}

.login-intro:after {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    right: -170px;
    bottom: -170px;
    box-shadow: 0 0 0 55px rgba(255, 255, 255, .04), 0 0 0 110px rgba(255, 255, 255, .03)
}

.login-intro .brand-stack {
    margin-bottom: 16vh
}

.brand-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px
}

.login-card > .eyebrow,
.login-card > h2,
.login-card > .form-subtitle {
    text-align: center
}

.login-intro h1 {
    font: 600 clamp(42px, 5vw, 72px)/.98 'Space Grotesk';
    letter-spacing: -2px;
    margin: 16px 0 24px
}

.login-intro h1 em {
    font-style: normal;
    color: #f6c247
}

.intro-copy {
    max-width: 370px;
    color: #bdd5d0;
    line-height: 1.7;
    font-size: 15px
}

.route-line {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 17vh;
    color: #f6c247;
    font: 700 12px 'Space Grotesk';
    letter-spacing: 1px
}

.route-line b {
    width: 90px;
    height: 1px;
    background: #8db8ae;
    position: relative
}

.route-line b:after {
    content: '›';
    position: absolute;
    right: -2px;
    top: -10px;
    font-size: 18px
}

.intro-note {
    color: #bdd5d0;
    font-size: 12px;
    margin-top: 14px
}

.login-card-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px
}

.login-card {
    width: 100%;
    max-width: 410px
}

.login-card h2 {
    font: 600 34px 'Space Grotesk';
    margin: 12px 0 8px;
    letter-spacing: -1px
}

.form-subtitle {
    color: var(--muted);
    margin: 0 0 35px;
    font-size: 14px
}

.login-card form>label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin: 19px 0 8px
}

.login-card input[type=email],
.login-card input[type=password] {
    width: 100%;
    border: 1px solid #dbe3df;
    background: #fff;
    border-radius: 3px;
    padding: 14px 15px;
    color: var(--ink);
    outline: none
}

.login-card input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(23, 109, 107, .1)
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 17px 0 25px;
    font-size: 12px
}

.form-options a,
.login-footer a {
    color: var(--teal);
    font-weight: 700;
    text-decoration: none
}

.check-label {
    display: flex;
    gap: 7px;
    align-items: center;
    color: var(--muted)
}

.check-label input {
    accent-color: var(--teal)
}

.primary-button,
.new-button {
    border: 0;
    background: var(--orange);
    color: white;
    font-weight: 700;
    cursor: pointer
}

.primary-button {
    width: 100%;
    padding: 15px;
    border-radius: 3px;
    text-align: left;
    padding-left: 18px
}

.primary-button span {
    float: right;
    font-size: 20px;
    line-height: 14px
}

.login-footer {
    text-align: center;
    margin-top: 32px;
    font-size: 12px;
    color: var(--muted)
}

.legal-note {
    text-align: center;
    color: #9ba7a4;
    font-size: 11px;
    margin-top: 34px
}

.legal-note span {
    padding: 0 8px
}

.form-alert {
    background: #fff0ed;
    color: #b34b34;
    border: 1px solid #f3cec5;
    padding: 11px;
    font-size: 12px
}

.mobile-brand {
    display: none
}

.app-page {
    display: flex;
    min-height: 100vh;
    background: #f7f9f7
}

.sidebar {
    width: 245px;
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 29px 18px 20px;
    display: flex;
    flex-direction: column
}

.side-brand {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 0 10px 47px
}

.side-brand strong {
    font: 700 16px 'Space Grotesk';
    display: block
}

.side-brand small,
.user-chip small {
    display: block;
    color: #94a09e;
    font-size: 10px;
    margin-top: 3px
}

.nav-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #9da8a5;
    font-weight: 700;
    padding: 0 12px;
    margin: 0 0 10px
}

.sidebar nav {
    margin-bottom: 29px
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #687775;
    text-decoration: none;
    font-size: 13px;
    padding: 11px 12px;
    border-radius: 3px;
    margin: 3px 0
}

.sidebar nav a span {
    font-size: 17px;
    width: 18px;
    text-align: center
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: var(--pale);
    color: var(--teal);
    font-weight: 700
}

.side-bottom {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding: 18px 10px 0
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 9px
}

.avatar {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    background: #f7d9c9;
    color: #a54b29;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%
}

.user-chip strong {
    font-size: 12px
}

.dot {
    width: 7px;
    height: 7px;
    background: #53aa7c;
    border-radius: 50%;
    margin-left: auto
}

.logout-button {
    border: 0;
    background: none;
    color: #9aa6a2;
    font-size: 11px;
    padding: 20px 0 0;
    cursor: pointer
}

.main-content {
    flex: 1;
    max-width: 1250px;
    padding: 49px 5vw
}

.topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 38px
}

.topbar h1 {
    font: 600 31px 'Space Grotesk';
    margin: 9px 0 0;
    letter-spacing: -1px
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 18px
}

.icon-button {
    background: white;
    border: 1px solid var(--line);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: relative;
    color: #768681;
    font-size: 20px
}

.icon-button span {
    position: absolute;
    background: var(--orange);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 8px;
    right: 8px
}

.new-button {
    padding: 12px 16px;
    border-radius: 3px;
    font-size: 12px
}

.summary-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 17px;
    margin-bottom: 24px
}

.stat-card,
.panel-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 22px
}

.stat-card.accent {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal)
}

.stat-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #77847f
}

.accent .stat-top {
    color: #acd0c7
}

.stat-top b {
    color: #4fa37a;
    font-size: 11px
}

.stat-top b.warn {
    color: var(--orange)
}

.stat-card.accent .stat-top b {
    color: #f6c247
}

.stat-card>strong {
    font: 600 28px 'Space Grotesk';
    display: block;
    margin: 17px 0 7px
}

.stat-card small {
    color: #93a09b;
    font-size: 11px
}

.accent small {
    color: #acd0c7
}

.spark {
    height: 29px;
    display: flex;
    align-items: end;
    gap: 5px;
    margin-top: 12px
}

.spark i {
    display: block;
    width: 8px;
    background: #f6c247;
    height: 40%;
    border-radius: 2px
}

.spark i:nth-child(2),
.spark i:nth-child(7) {
    height: 62%
}

.spark i:nth-child(3),
.spark i:nth-child(8) {
    height: 48%
}

.spark i:nth-child(4),
.spark i:nth-child(9) {
    height: 80%
}

.spark i:nth-child(5) {
    height: 67%
}

.spark i:nth-child(6) {
    height: 95%
}

.progress {
    height: 5px;
    background: #edf1ee;
    margin-top: 19px
}

.progress i {
    display: block;
    height: 100%;
    background: var(--orange)
}

.mini-bars {
    height: 29px;
    display: flex;
    align-items: end;
    gap: 8px;
    margin-top: 12px
}

.mini-bars i {
    width: 17px;
    background: #cfe2dd;
    height: 38%
}

.mini-bars i:nth-child(2),
.mini-bars i:nth-child(5) {
    height: 65%
}

.mini-bars i:nth-child(3),
.mini-bars i:nth-child(7) {
    height: 90%
}

.mini-bars i:nth-child(4) {
    height: 50%
}

.content-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 17px
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px
}

.panel-card h2 {
    font: 600 20px 'Space Grotesk';
    margin: 8px 0 0
}

.panel-heading a {
    font-size: 11px;
    color: var(--teal);
    font-weight: 700;
    text-decoration: none
}

.table-wrap {
    overflow: auto
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    min-width: 560px
}

th {
    text-align: left;
    color: #9ba5a2;
    font-size: 10px;
    font-weight: 600;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--line)
}

td {
    padding: 15px 12px;
    border-bottom: 1px solid #edf1ef;
    color: #667571
}

td:first-child {
    color: var(--ink)
}

td strong {
    display: block;
    font-weight: 700
}

td small {
    display: block;
    color: #a0aaa7;
    font-size: 10px;
    margin-top: 3px
}

.status {
    font-size: 10px;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 2px
}

.paid {
    background: #e5f3e9;
    color: #3b8a5c
}

.pending {
    background: #fff2d9;
    color: #b7771b
}

.overdue {
    background: #ffebe6;
    color: #c65d43
}

.quick-panel {
    padding: 22px
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--ink);
    padding: 16px 0;
    border-bottom: 1px solid var(--line)
}

.quick-action:last-child {
    border-bottom: 0
}

.action-icon {
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px
}

.action-icon.orange {
    background: #fff0e9;
    color: var(--orange)
}

.action-icon.teal {
    background: #e5f2ee;
    color: var(--teal)
}

.action-icon.blue {
    background: #e7eef5;
    color: #497399
}

.quick-action strong {
    display: block;
    font-size: 12px
}

.quick-action small {
    display: block;
    color: #93a09c;
    font-size: 10px;
    margin-top: 4px
}

.quick-action b {
    margin-left: auto;
    color: #98a5a1;
    font-weight: 400;
    font-size: 18px
}

.app-page {
    background: radial-gradient(circle at 88% 8%, rgba(238, 107, 59, .06), transparent 28%), #f5f8f5
}

.sidebar {
    box-shadow: 8px 0 28px rgba(23, 35, 41, .035)
}

.main-content {
    animation: panel-arrive .35s ease-out both
}

@keyframes panel-arrive {
    from {
        opacity: 0;
        transform: translateY(7px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.panel-card,
.stat-card,
.chart-panel,
.chart-card {
    box-shadow: 0 8px 25px rgba(23, 35, 41, .045)
}

.panel-card:hover,
.stat-card:hover {
    border-color: #cbdcd5
}

.topbar h1 {
    letter-spacing: -.8px
}

.table-wrap {
    border: 1px solid #edf1ef;
    border-radius: 4px
}

tbody tr {
    transition: background .15s ease
}

tbody tr:hover {
    background: #f7faf8
}

th {
    background: #f6f9f7;
    padding-top: 12px
}

.login-card {
    padding: 35px;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(219, 227, 223, .85);
    box-shadow: 0 20px 55px rgba(23, 35, 41, .08)
}

.primary-button,
.new-button {
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease
}

.primary-button:hover,
.new-button:hover {
    background: #d9572e;
    box-shadow: 0 8px 18px rgba(238, 107, 59, .2);
    transform: translateY(-1px)
}

.logout-button {
    display: block;
    width: 100%;
    padding: 11px 0 0;
    text-align: left;
    font-weight: 700;
    cursor: pointer
}

@media (min-width: 721px) and (max-width: 900px) {
    .login-shell {
        grid-template-columns: 1fr 1fr
    }

    .login-intro {
        display: block;
        padding: 35px 34px
    }

    .login-intro .brand-stack {
        margin-bottom: 12vh
    }

    .login-intro h1 {
        font-size: 42px
    }

    .login-card-wrap {
        padding: 28px
    }

    .login-card {
        max-width: 350px
    }
}

@media (max-width: 900px) {
    .login-intro {
        display: none !important
    }

    .login-shell {
        display: flex;
        justify-content: center
    }

    .login-card-wrap {
        width: 100%;
        max-width: 560px;
        margin: auto
    }

    .login-card {
        max-width: 410px
    }
}

@media(max-width:900px) {
    .login-shell {
        grid-template-columns: 1fr
    }

    .login-intro {
        display: none
    }

    .login-card-wrap {
        padding: 28px
    }

    .mobile-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        margin-bottom: 65px
    }

    .mobile-brand strong {
        font: 600 17px 'Space Grotesk'
    }

    .summary-grid,
    .content-grid {
        grid-template-columns: 1fr
    }

    .sidebar {
        width: 205px
    }

    .main-content {
        padding: 35px 25px
    }
}

@media(max-width:620px) {
    .sidebar {
        display: none
    }

    .main-content {
        padding: 25px 17px
    }

    .topbar {
        align-items: flex-start
    }

    .topbar h1 {
        font-size: 24px
    }

    .top-actions {
        gap: 8px
    }

    .new-button {
        font-size: 0;
        padding: 12px;
        width: 40px
    }

    .new-button:first-letter {
        font-size: 18px
    }

    .summary-grid {
        gap: 10px
    }

    .stat-card {
        padding: 17px
    }

    .stat-card>strong {
        font-size: 24px
    }

    .login-card-wrap {
        padding: 24px 21px
    }
}

@media (min-width: 721px) and (max-width: 900px) {
    .login-shell {
        grid-template-columns: 1fr 1fr
    }

    .login-intro {
        display: block;
        padding: 35px 34px
    }

    .login-intro .brand-stack {
        margin-bottom: 12vh
    }

    .login-intro h1 {
        font-size: 42px
    }

    .login-card-wrap {
        padding: 28px
    }

    .login-card {
        max-width: 350px
    }
}

/* Premium workspace layer */
:root {
    --ink: #132b2c;
    --muted: #718487;
    --line: #dfe9e5;
    --paper: #f3f7f5;
    --orange: #e9683b;
    --teal: #125f62;
    --teal-deep: #0b444a;
    --pale: #e3f0ed;
    --gold: #e9b957;
    --shadow-sm: 0 8px 24px rgba(15, 50, 50, .055);
    --shadow-lg: 0 22px 55px rgba(15, 50, 50, .09);
}

body { -webkit-font-smoothing: antialiased; }
html, body { max-width: 100%; overflow-x: hidden; }

.app-page {
    background: radial-gradient(circle at 88% 5%, rgba(233,104,59,.11), transparent 23rem), radial-gradient(circle at 36% 90%, rgba(18,95,98,.06), transparent 26rem), var(--paper);
}

.sidebar {
    width: 258px;
    background: rgba(255,255,255,.88);
    border-right-color: rgba(210,225,220,.8);
    box-shadow: 12px 0 42px rgba(12,45,46,.04);
    backdrop-filter: blur(18px);
}

.side-brand { padding-bottom: 52px; }
.brand-mark { border-radius: 11px; box-shadow: 7px 7px 0 rgba(233,185,87,.24); }

.sidebar nav a {
    border-radius: 10px;
    padding: 12px 13px;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: linear-gradient(100deg, #e1f0eb, #f0f7f4);
    box-shadow: inset 3px 0 var(--teal);
    transform: translateX(2px);
}

.main-content { max-width: 1500px; padding: 52px clamp(24px,5vw,76px); }
.topbar { margin-bottom: 30px; }
.topbar h1 { font-size: clamp(28px,3vw,38px); letter-spacing: -1.35px; }
.page-subtitle, .management-copy { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }

.new-button, .primary-button, .report-print {
    border-radius: 10px !important;
    background: linear-gradient(135deg, #ed7545, #dc5934) !important;
    box-shadow: 0 8px 18px rgba(220,89,52,.19);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.new-button:hover, .primary-button:hover, .report-print:hover {
    filter: saturate(1.08) brightness(1.03);
    box-shadow: 0 13px 25px rgba(220,89,52,.24);
    transform: translateY(-2px);
}

.secondary-button { background: rgba(255,255,255,.78) !important; color: var(--teal) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm) !important; }
.stat-card, .panel-card, .chart-panel, .chart-card, .report-card { border: 1px solid rgba(215,228,223,.9) !important; border-radius: 16px !important; box-shadow: var(--shadow-sm) !important; }
.stat-card { padding: 25px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.stat-card:hover, .panel-card:hover, .chart-panel:hover, .report-card:hover { border-color: #bed8cf !important; box-shadow: 0 16px 35px rgba(15,50,50,.09) !important; transform: translateY(-2px); }
.stat-card.accent { background: linear-gradient(140deg, #126267, #0d4d54) !important; box-shadow: 0 18px 40px rgba(13,77,84,.2) !important; }
.panel-card, .chart-panel, .report-card { padding: 25px; }
.panel-card h2, .chart-panel h2, .report-card h2 { color: var(--ink); letter-spacing: -.45px; }
.table-wrap { border-radius: 12px; border-color: #e6efeb; }
th { background: #f3f8f6; color: #82948f; letter-spacing: .7px; text-transform: uppercase; }
td { padding: 17px 13px; }
tbody tr:hover { background: #f3faf7; }
.quick-action { border-bottom-color: #e8efec; padding: 18px 4px; transition: transform .18s ease, padding-left .18s ease; }
.quick-action:hover { padding-left: 8px; transform: translateX(2px); }
.action-icon { border-radius: 10px; }

.success-alert, .page-alert, .form-success, .form-alert { border-radius: 12px; }
.success-alert, .page-alert { display: flex; align-items: flex-start; gap: 12px; max-width: 760px; line-height: 1.45; }
.success-alert div, .page-alert div { display: grid; gap: 3px; }
.alert-icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.55); font-weight: 800; }

.security-layout { display: grid; grid-template-columns: minmax(0,680px) minmax(240px,330px); gap: 22px; align-items: start; }
.password-card { max-width: none; }
.security-heading { display: flex; align-items: center; gap: 14px; }
.security-heading h2 { margin: 8px 0 0; font: 600 23px 'Space Grotesk'; }
.security-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(145deg,var(--teal),var(--teal-deep)); font-size: 25px; box-shadow: 0 9px 18px rgba(18,95,98,.2); }
.security-copy { max-width: 480px; color: var(--muted); font-size: 13px; line-height: 1.65; margin: 19px 0 27px; }
.password-form { max-width: 500px; }
.password-form label { display: block; color: #526a67; font-size: 11px; font-weight: 700; margin: 0 0 17px; }
.password-input { display: flex; align-items: center; margin-top: 7px; border: 1px solid #d6e4df; border-radius: 10px; background: #fbfdfc; transition: border-color .18s ease, box-shadow .18s ease; }
.password-input:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(18,95,98,.1); background: #fff; }
.password-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; padding: 13px 14px; color: var(--ink); }
.password-toggle { border: 0; background: transparent; color: var(--teal); padding: 10px 13px; font-size: 10px; font-weight: 800; cursor: pointer; }
.password-meter { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: -7px 0 20px; }
.password-meter > span { height: 4px; border-radius: 5px; background: #e6eeeb; }
.password-meter small { grid-column: 1 / -1; color: #94a29f; font-size: 10px; font-weight: 400; margin-top: 3px; }
.password-meter[data-score="1"] > span:first-child { background: #e9683b; }
.password-meter[data-score="2"] > span:nth-child(-n+2) { background: var(--gold); }
.password-meter[data-score="3"] > span:nth-child(-n+3) { background: #55a779; }
.security-tips { padding: 10px 5px; }
.security-tips h2 { font: 600 24px/1.1 'Space Grotesk'; letter-spacing: -.65px; margin: 12px 0 27px; }
.tip { display: flex; gap: 12px; padding: 15px 0; border-top: 1px solid #dfeae5; }
.tip span { color: var(--orange); font: 700 10px 'Space Grotesk'; letter-spacing: .7px; }
.tip p { color: #607572; font-size: 12px; line-height: 1.55; margin: -2px 0 0; }
.security-status { display: flex; gap: 10px; align-items: center; border: 1px solid #d9ebe2; border-radius: 12px; background: #eef8f2; padding: 14px; margin-top: 24px; }
.status-pulse, .secure-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #4fa978; box-shadow: 0 0 0 5px rgba(79,169,120,.12); }
.security-status strong { display: block; font-size: 11px; color: #2f7e5a; }
.security-status small { display: block; color: #6c8d7d; font-size: 10px; line-height: 1.4; margin-top: 3px; }

.login-page { background: radial-gradient(circle at 20% 10%, rgba(233,185,87,.13), transparent 20rem), #f1f6f3; }
.login-shell { max-width: 1480px; padding: 20px; gap: 20px; }
.login-intro { border-radius: 24px; padding: clamp(35px,6vw,88px); background: radial-gradient(circle at 82% 18%, rgba(233,185,87,.18), transparent 16rem), linear-gradient(145deg,#0d6266,#083f47); box-shadow: 0 22px 60px rgba(8,63,71,.18); }
.login-intro:before { content: ''; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: 13%; top: 10%; }
.login-intro .brand-stack { margin-bottom: 15vh; }
.login-card-wrap { border-radius: 24px; background: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); }
.login-card { max-width: 440px; padding: 38px; border-radius: 20px; background: rgba(255,255,255,.8); border: 1px solid rgba(215,228,223,.9); box-shadow: 0 20px 55px rgba(15,50,50,.09); }
.login-card h2 { font-size: 36px; letter-spacing: -1.45px; }
.login-card input[type=email], .login-card input[type=password] { border-radius: 10px; background: #fbfdfc; padding: 15px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.login-card input:focus { background: #fff; }
.form-options { color: #80908d; margin: 17px 0 25px; }
.secure-note { display: inline-flex; align-items: center; gap: 7px; color: #82918e; font-size: 10px; }
.form-success { background: #ecf8f1; color: #337b58; border: 1px solid #cce9d9; padding: 11px; font-size: 12px; }
.primary-button { padding: 16px 18px; }
.legal-note { display: none !important; }

/* Collapsible sidebar + responsive navigation */
.app-page { position: relative; overflow-x: hidden; }
.sidebar { position: relative; transition: width .25s ease, transform .25s ease, box-shadow .25s ease; }
.sidebar-toggle,
.mobile-menu-toggle {
    display: grid;
    place-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    border: 1px solid #d8e8e2;
    border-radius: 10px;
    background: rgba(255,255,255,.92);
    color: var(--teal);
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(15,50,50,.09);
}
.sidebar-toggle { position: absolute; z-index: 3; top: 21px; right: -17px; }
.sidebar-toggle span,
.mobile-menu-toggle span { display: block; width: 13px; height: 1.5px; border-radius: 3px; background: currentColor; }
.mobile-menu-toggle { display: none; }
.sidebar-collapsed .sidebar { width: 84px; }
.sidebar-collapsed .side-brand { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .sidebar-copy,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-copy { display: none; }
.sidebar-collapsed .sidebar nav a { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .sidebar nav a span:first-child { margin: 0; }
.sidebar-collapsed .sidebar .user-chip { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .dot { display: none; }
.sidebar-collapsed .logout-button { justify-content: center; padding-inline: 0 !important; }
.sidebar-collapsed .logout-button::before { margin: 0; }
.sidebar-overlay { display: none; }

@media(max-width:900px) {
    .app-page .sidebar {
        position: fixed;
        z-index: 20;
        inset: 0 auto 0 0;
        width: min(82vw, 292px);
        min-height: 100vh;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: 18px 0 50px rgba(10,44,47,.17);
    }
    .app-page.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-toggle { display: none; }
    .mobile-menu-toggle { display: grid; position: fixed; z-index: 15; top: 16px; left: 16px; }
    .sidebar-overlay { position: fixed; inset: 0; z-index: 19; display: block; padding: 0; border: 0; background: rgba(8,35,39,.38); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
    .app-page.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }
    .main-content { width: 100%; max-width: none; padding-top: 72px; }
    .sidebar-collapsed .sidebar { width: min(82vw, 292px); }
}

@media(max-width:620px) {
    .topbar { flex-wrap: wrap; align-items: flex-start; }
    .top-actions { margin-left: auto; }
    .topbar .new-button { font-size: 11px; width: auto; }
    .topbar .new-button:first-letter { font-size: inherit; }
    .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 620px; }
    .dashboard-filter, .filter, .credit-filter { width: 100%; }
    .dashboard-filter label, .filter label, .credit-filter label { flex: 1 1 135px; }
    .dashboard-filter button, .filter button, .credit-filter button { flex: 1 0 auto; }
    .form-grid, .settings-grid, .report-grid { min-width: 0; }
}

/* Executive KPI treatment */
.summary-grid { gap: 20px; }
.stat-card { position: relative; min-height: 188px; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; width: 150px; height: 150px; right: -58px; top: -65px; border: 1px solid rgba(18,95,98,.1); border-radius: 50%; box-shadow: 0 0 0 18px rgba(18,95,98,.025), 0 0 0 36px rgba(18,95,98,.018); }
.stat-card::after { content: '₹'; position: absolute; right: 23px; top: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #e8f3ef; color: var(--teal); font: 700 15px 'Space Grotesk'; }
.stat-card:nth-child(2)::after { content: '↗'; background: #fff0e9; color: var(--orange); }
.stat-card:nth-child(3)::after { content: '#'; background: #fff7df; color: #bd8c2e; }
.stat-card > * { position: relative; z-index: 1; }
.stat-top { padding-right: 48px; align-items: center; }
.stat-top b { padding: 5px 8px; border-radius: 999px; background: #edf7f1; font-size: 9px; letter-spacing: .3px; }
.stat-top b.warn { background: #fff1e7; }
.stat-card.accent .stat-top b { background: rgba(255,255,255,.12); }
.stat-card > strong { font-size: 34px; letter-spacing: -1.2px; margin: 24px 0 8px; }
.stat-card small { font-size: 11px; }
.stat-card.accent small { color: #b5d6d0; }
.stat-card .progress { height: 7px; border-radius: 99px; background: rgba(18,95,98,.1); }
.stat-card .progress i { border-radius: 99px; background: linear-gradient(90deg, #e9683b, #f2b34f); }
.stat-card .spark, .stat-card .mini-bars { opacity: .95; }

/* Chart surface treatment */
.chart-panel { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,251,249,.88)) !important; }
.chart-panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--teal), #65afa0 68%, var(--gold)); opacity: .9; }
.chart-panel:nth-child(2)::before { background: linear-gradient(90deg, var(--orange), var(--gold)); }
.chart-panel .chart-box { margin-top: 12px; }
.chart-badge { box-shadow: inset 0 0 0 1px rgba(18,95,98,.08); letter-spacing: .5px; }

/* Keep sign-out directly below the final Settings item. */
.sidebar .side-bottom { display: contents; }
.sidebar nav:last-of-type { margin-bottom: 0; }
.sidebar .side-bottom > form { order: 1; width: 100%; padding: 0; }
.sidebar .side-bottom > .user-chip { order: 2; margin-top: auto; border-top: 1px solid var(--line); padding: 18px 10px 0; }
.sidebar .side-bottom .logout-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 13px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #687775;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    margin: 3px 0;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.sidebar .side-bottom .logout-button::before { content: '↪'; width: 18px; font-size: 17px; text-align: center; }
.sidebar .side-bottom .logout-button:hover { background: linear-gradient(100deg, #e1f0eb, #f0f7f4); color: var(--teal); font-weight: 700; transform: translateX(2px); }

@media(max-width:900px) {
    .security-layout { grid-template-columns: 1fr; }
    .security-tips { max-width: 680px; padding: 5px; }
    .login-shell { padding: 0; }
    .login-card-wrap { border-radius: 0; border: 0; box-shadow: none; }
    .login-page { min-height: 100svh; }
    .login-shell { width: 100%; min-height: 100svh; }
    .login-card-wrap { min-height: 100svh; width: 100%; padding: 32px 20px; }
    .login-card { width: min(100%, 440px); margin: auto; }
    .mobile-brand { margin-bottom: 42px; }
}

@media(max-width:620px) {
    .main-content { padding: 28px 17px; }
    .panel-card, .chart-panel, .report-card { padding: 19px; border-radius: 14px !important; }
    .topbar { gap: 16px; }
    .page-subtitle { max-width: 230px; }
    .login-card { padding: 27px 22px; border-radius: 16px; }
    .login-card h2 { font-size: 30px; }
    .login-shell { display: flex; width: 100%; max-width: none; min-height: 100vh; margin: 0; }
    .login-card-wrap { width: 100%; min-height: 100vh; padding: 22px 17px; align-items: center; justify-content: center; }
    .login-card { width: min(100%, 440px); margin: 0 auto; }
    .login-card-wrap { padding: 24px 14px; }
    .mobile-brand { margin-bottom: 34px; }
    .login-footer { margin-top: 24px; }
}