:root {
    --green:#245d4c;
    --dark:#183f35;
    --mint:#d7eadf;
    --ink:#243830;
    --muted:#738078;
    --border:#e2e8e2;
    --bg:#f6f8f5
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:Segoe UI,Arial,sans-serif;
    color:var(--ink);
    background:var(--bg);
    font-size:14px
}
a {
    color:inherit;
    text-decoration:none
}
button,input {
    font:inherit
}
button,a,input {
    outline-offset:4px
}
button {
    cursor:pointer
}
h1,h2,h3,p {
    margin:0
}
h1 {
    font-size:34px;
    line-height:1.25;
    letter-spacing:-1.1px
}
h2 {
    font-size:21px;
    letter-spacing:-.5px
}
h3 {
    font-size:17px
}
p {
    line-height:1.7
}
.muted {
    color:var(--muted)
}
.eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:1.8px;
    color:var(--green)
}
.eyebrow.light {
    color:#bcdacb
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    font-weight:700;
    letter-spacing:-1px
}
.brand img {
    width:36px
}
.brand span {
    font-weight:400;
    margin-left:-9px
}
.button {
    min-height:46px;
    border:0;
    border-radius:8px;
    padding:13px 20px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    font-weight:600
}
.primary {
    background:var(--green);
    color:#fff
}
.primary:hover {
    background:var(--dark)
}
.white {
    background:#fff;
    color:var(--green)
}
.notice {
    background:#fff0ed;
    color:#8b3424;
    padding:14px;
    border-radius:8px;
    margin:20px 0;
    line-height:1.5
}
.login-page {
    min-height:100vh;
    display:grid;
    grid-template-columns:46% 54%;
    background:#fff
}
.login-story {
    background:var(--dark);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:48px 12%;
    overflow:hidden
}
.story-content {
    margin:70px 0 10px
}
.story-content h1 {
    font-size:43px;
    letter-spacing:-1.6px;
    margin:22px 0
}
.story-content p {
    color:#bfd1c7;
    max-width:360px;
    font-size:15px
}
.story-footer {
    color:#a8c1b3;
    font-size:11px
}
.story-illustration {
    height:235px;
    position:relative;
    display:grid;
    place-items:center;
    margin:25px 0
}
.orbit {
    position:absolute;
    border:1px solid #456b5b;
    border-radius:50%;
    width:260px;
    height:260px
}
.orbit-two {
    width:340px;
    height:340px;
    border-style:dashed;
    opacity:.45
}
.illustration-card {
    position:relative;
    width:250px;
    border:1px solid #587766;
    background:#345747;
    border-radius:16px;
    padding:23px;
    transform:rotate(-7deg);
    box-shadow:0 25px 50px #102e2a66;
    font-size:16px;
    line-height:1.5
}
.mini-icon {
    display:block;
    font-size:34px;
    color:#cee9b5;
    margin-bottom:12px
}
.mini-lines {
    display:flex;
    gap:5px;
    margin-top:20px
}
.mini-lines i {
    height:5px;
    background:#7fa28b;
    width:33px;
    border-radius:3px
}
.mini-lines i:first-child {
    width:65px;
    background:#c1dcae
}
.floating-dot {
    position:absolute;
    border-radius:50%;
    background:#ceddac
}
.dot-one {
    width:16px;
    height:16px;
    right:5%;
    top:35px
}
.dot-two {
    width:9px;
    height:9px;
    left:4%;
    bottom:25px
}
.login-form-panel {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:80px 35px
}
.login-form-wrap {
    width:100%;
    max-width:370px
}
.login-form-wrap h2 {
    font-size:28px;
    margin:16px 0 10px;
    letter-spacing:-.8px
}
.login-form {
    display:flex;
    flex-direction:column;
    margin-top:35px
}
.login-form label {
    font-size:12px;
    font-weight:600;
    margin-bottom:9px
}
.login-form input {
    border:1px solid #d6dfd7;
    background:#fff;
    border-radius:8px;
    height:48px;
    width:100%;
    padding:0 14px;
    color:var(--ink)
}
.login-form>input {
    margin-bottom:22px
}
.login-form input:focus {
    border-color:var(--green);
    outline:2px solid #d7eadf
}
.password-field {
    position:relative;
    margin-bottom:28px
}
.password-field input {
    padding-right:80px
}
.password-toggle {
    position:absolute;
    right:8px;
    top:10px;
    background:none;
    border:0;
    color:var(--muted);
    font-size:11px;
    padding:7px
}
.login-help {
    font-size:12px;
    text-align:center;
    color:var(--muted);
    margin-top:24px
}
.login-security {
    border-top:1px solid var(--border);
    margin-top:35px;
    padding-top:22px;
    font-size:11px;
    color:var(--muted);
    text-align:center
}
.login-security span {
    margin-right:6px
}
.login-footer {
    position:absolute;
    bottom:24px;
    font-size:10px;
    color:#8b958e
}
.app-shell {
    display:flex;
    min-height:100vh
}
.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:248px;
    background:#fff;
    border-right:1px solid var(--border);
    padding:33px 23px;
    display:flex;
    flex-direction:column;
    z-index:20
}
.sidebar .brand {
    font-size:23px;
    margin:0 5px
}
.workspace {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:36px;
    padding:16px 0 23px;
    border-bottom:1px solid var(--border)
}
.workspace img {
    width:38px
}
.workspace strong {
    font-size:12px;
    display:block
}
.workspace small {
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:4px
}
.nav-label {
    font-size:9px;
    color:#96a199;
    letter-spacing:1.5px;
    margin:28px 12px 12px
}
nav a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px;
    border-radius:7px;
    font-size:12px;
    font-weight:600
}
nav .nav-active {
    background:#eaf2ec;
    color:var(--green)
}
nav span {
    font-size:18px
}
.sidebar-bottom {
    margin-top:auto;
    font-size:11px;
    color:var(--muted);
    padding:14px 10px
}
.sidebar-bottom small {
    display:block;
    margin:9px 0 0 13px;
    font-size:9px
}
.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:100%;
    background:#78a48a;
    margin-right:6px
}
.main-shell {
    margin-left:248px;
    width:calc(100% - 248px)
}
.topbar {
    height:83px;
    border-bottom:1px solid var(--border);
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 42px
}
.breadcrumb {
    display:flex;
    align-items:center;
    gap:16px;
    font-size:11px;
    color:var(--muted)
}
.breadcrumb strong {
    font-weight:500;
    color:var(--ink)
}
.separator {
    color:#c0c9c1
}
.account {
    display:flex;
    align-items:center;
    gap:11px
}
.avatar {
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e6eee2;
    color:var(--green);
    font-weight:600
}
.account-name strong,.account-name small {
    display:block;
    font-size:11px
}
.account-name small {
    font-size:9px;
    color:var(--muted);
    margin-top:3px
}
.logout {
    border:1px solid var(--border);
    background:white;
    border-radius:6px;
    padding:8px 12px;
    font-size:11px;
    color:var(--muted);
    margin-left:16px
}
.dashboard {
    max-width:1250px;
    margin:auto;
    padding:38px 42px 22px
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:27px
}
.page-heading h1 {
    font-size:30px;
    margin:10px 0
}
.wave {
    font-size:24px;
    color:#79a178;
    margin-left:6px
}
.page-heading p {
    font-size:12px
}
.date-chip {
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:6px;
    background:white;
    color:var(--muted);
    font-size:10px
}
.demo-banner {
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px 18px;
    border:1px solid #dce7cc;
    border-radius:8px;
    background:#f0f5e9;
    margin-bottom:23px;
    color:#536641
}
.demo-banner>span:first-child {
    font-size:20px
}
.demo-banner strong,.demo-banner div span {
    display:block;
    font-size:11px
}
.demo-banner div span {
    font-size:10px;
    margin-top:4px
}
.badge {
    font-size:8px;
    letter-spacing:1px;
    background:#e0e9d3;
    padding:5px 8px;
    border-radius:4px;
    margin-left:auto
}
.welcome-card {
    background:var(--green);
    color:white;
    border-radius:13px;
    padding:33px 36px;
    display:flex;
    position:relative;
    overflow:hidden;
    min-height:260px
}
.welcome-card h2 {
    font-size:31px;
    margin:15px 0;
    line-height:1.2;
    letter-spacing:-.7px
}
.welcome-card p {
    max-width:380px;
    color:#c2d6cb;
    font-size:12px;
    margin-bottom:21px
}
.welcome-card .button {
    font-size:10px;
    min-height:38px;
    padding:11px 15px
}
.welcome-art {
    flex:1;
    position:relative;
    min-width:200px
}
.art-ring {
    position:absolute;
    width:240px;
    height:240px;
    border:1px solid #5b8570;
    border-radius:50%;
    right:0;
    top:0
}
.art-ring:after {
    content:'';
    position:absolute;
    inset:25px;
    border:1px dashed #5b8570;
    border-radius:50%
}
.art-tile {
    position:absolute;
    width:110px;
    height:120px;
    border:1px solid #81a18d;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-size:55px
}
.tile-back {
    background:#b5cba3;
    color:#3e664d;
    right:21px;
    top:20px;
    transform:rotate(15deg)
}
.tile-front {
    background:#e1ebcb;
    color:#476943;
    right:100px;
    top:83px;
    transform:rotate(-12deg);
    box-shadow:0 18px 30px #173b3544
}
.art-spark {
    position:absolute;
    right:4px;
    top:173px;
    color:#c4d8b0;
    font-size:36px
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:30px 0 15px;
    gap:10px
}
.section-heading h2 {
    font-size:16px
}
.section-heading>span {
    font-size:10px
}
.overview-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:20px
}
.card {
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px
}
.empty-card {
    padding:25px;
    text-align:center;
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:center
}
.empty-icon {
    background:#f0f5ec;
    border-radius:13px;
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    color:#64856a;
    font-size:30px;
    margin-bottom:15px
}
.empty-card h3 {
    font-size:15px
}
.empty-card p {
    font-size:11px;
    color:var(--muted);
    max-width:360px;
    margin:9px 0 18px
}
.soft-tag {
    background:#f4f6f1;
    color:#86917e;
    font-size:9px;
    padding:7px 10px;
    border-radius:5px
}
.company-card {
    padding:24px
}
.company-card>.eyebrow {
    font-size:9px;
    color:var(--muted)
}
.company-title {
    display:flex;
    gap:11px;
    align-items:center;
    margin:17px 0
}
.company-title img {
    width:37px
}
.company-title h3 {
    font-size:14px
}
dl {
    margin:0
}
dl div {
    display:flex;
    justify-content:space-between;
    border-top:1px solid #f0f3ed;
    padding:11px 0;
    font-size:10px;
    gap:10px
}
dt {
    color:var(--muted)
}
dd {
    margin:0;
    text-align:right
}
.next-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px
}
.next-card {
    padding:20px;
    border:1px solid var(--border);
    border-radius:9px;
    background:#fafbf8
}
.next-card>span {
    font-size:10px;
    color:#7d937c
}
.next-card h3 {
    font-size:12px;
    margin:11px 0 7px
}
.next-card p {
    font-size:10px;
    color:var(--muted)
}
.dashboard-footer {
    display:flex;
    justify-content:space-between;
    margin-top:30px;
    padding-top:17px;
    border-top:1px solid var(--border);
    font-size:9px;
    color:#8c988c
}
.menu-button {
    display:none
}
.error-page {
    max-width:500px;
    margin:15vh auto;
    padding:36px;
    text-align:center
}
.error-page h1 {
    font-size:27px;
    margin:20px 0
}
.error-page p {
    margin-bottom:24px
}
.error-page .button {
    font-size:12px
}
@media(min-width:1500px) {
    .dashboard {
        padding-top:48px
    }
    .welcome-card {
        min-height:280px
    }
}
@media(max-width:1050px) {
    .sidebar {
        width:215px;
        padding:30px 18px
    }
    .main-shell {
        margin-left:215px;
        width:calc(100% - 215px)
    }
    .dashboard {
        padding:30px 25px
    }
    .topbar {
        padding:0 25px
    }
    .welcome-art {
        min-width:140px;
        opacity:.8
    }
    .art-ring {
        right:-90px
    }
    .tile-back {
        right:-25px
    }
    .tile-front {
        right:35px
    }
    .welcome-card {
        padding:28px
    }
    .login-story {
        padding:40px 9%
    }
    .story-content h1 {
        font-size:36px
    }
    .overview-grid {
        grid-template-columns:1.2fr 1fr
    }
}
@media(max-width:760px) {
    .login-page {
        display:block
    }
    .login-story {
        display:none
    }
    .login-form-panel {
        min-height:100vh;
        padding:70px 25px
    }
    .login-form-wrap:before {
        content:'meucrm';
        display:block;
        color:var(--green);
        font-size:28px;
        letter-spacing:-1px;
        font-weight:700;
        margin-bottom:55px
    }
    .sidebar {
        transform:translateX(-100%);
        transition:transform .2s;
        width:240px;
        box-shadow:10px 0 30px #183f3515
    }
    .sidebar.is-open {
        transform:translateX(0)
    }
    .main-shell {
        margin-left:0;
        width:100%
    }
    .topbar {
        height:72px;
        padding:0 18px;
        position:relative;
        z-index:30
    }
    .menu-button {
        display:block;
        background:none;
        border:0;
        font-size:18px;
        color:var(--green);
        padding:5px
    }
    .breadcrumb {
        gap:9px
    }
    .breadcrumb>span:first-of-type,.separator {
        display:none
    }
    .account-name {
        display:block;
        max-width:90px
    }
    .account-name strong {
        font-size:9px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis
    }
    .account {
        gap:4px
    }
    .logout {
        margin-left:5px
    }
    .dashboard {
        padding:27px 18px 20px
    }
    .page-heading h1 {
        font-size:26px
    }
    .page-heading .eyebrow {
        font-size:8px
    }
    .date-chip {
        font-size:9px;
        padding:8px
    }
    .demo-banner {
        padding:13px 12px;
        gap:9px
    }
    .demo-banner div span {
        line-height:1.5
    }
    .badge {
        display:none
    }
    .welcome-card {
        padding:26px;
        min-height:285px
    }
    .welcome-card h2 {
        font-size:27px
    }
    .welcome-card p {
        max-width:250px;
        position:relative;
        z-index:1
    }
    .welcome-art {
        position:absolute;
        right:-85px;
        top:80px;
        width:160px;
        opacity:.15
    }
    .overview-grid {
        grid-template-columns:1fr
    }
    .empty-card {
        min-height:230px
    }
    .section-heading {
        align-items:flex-start
    }
    .section-heading h2 {
        font-size:14px
    }
    .section-heading>span {
        max-width:130px;
        text-align:right;
        line-height:1.5
    }
    .next-grid {
        grid-template-columns:1fr;
        gap:10px
    }
    .next-card {
        padding:17px
    }
    .next-card>span {
        float:left;
        margin:3px 14px 30px 0
    }
    .next-card h3 {
        margin:0 0 5px
    }
    .dashboard-footer {
        font-size:8px;
        gap:12px
    }
    .error-page {
        margin:15vh 20px
    }
}