:root {
            --ink: #202842;
            --muted: #8590a6;
            --line: #e9edf5;
            --paper: #f7f8fc;
            --white: #fff;
            --primary: #6658d3;
            --primary-dark: #5042bd;
            --mint: #20a982;
            --rose: #e66a91;
            --blue: #4a91dd;
            --shadow: 0 8px 28px rgba(32, 40, 66, .055);
            font-family: 'DM Sans', Arial, sans-serif;
            color: var(--ink);
            background: var(--paper)
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0
        }

        a {
            color: var(--primary);
            text-decoration: none
        }

        aside {
            position: fixed;
            z-index: 5;
            width: 244px;
            inset: 0 auto 0 0;
            background: #fff;
            border-right: 1px solid var(--line);
            padding: 22px 15px;
            overflow: auto
        }

             .brand {
            text-align: center;
            font-weight: 800 !important;
            font-size: 40px;
            color: #2859db;
            margin-bottom: 8px;
            font-family: Segoe UI, Arial, sans-serif;
        }

        .brand span {
            color: #1b2941
        }

        .nav-label {
            padding: 8px 13px;
            color: #a3aabd;
            text-transform: uppercase;
            letter-spacing: .1em;
            font-size: 10px;
            font-weight: 700
        }

        nav a {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #68738b;
            padding: 11px 13px;
            border-radius: 10px;
            margin: 3px 0;
            font-size: 14px;
            font-weight: 600;
            transition: .18s
        }

        nav a:hover,
        nav a.active {
            background: #f0efff;
            color: var(--primary)
        }

        .nav-icon {
            width: 19px;
            height: 19px;
            display: inline-grid;
            place-items: center;
            font-size: 17px
        }

        .sidebar-bottom {
            margin: 26px 8px 0;
            padding: 14px;
            border-radius: 14px;
            background: linear-gradient(135deg, #f4f2ff, #fafaff);
            font-size: 12px;
            color: #747e95
        }

        .sidebar-bottom strong {
            display: block;
            color: #5145b7;
            margin-bottom: 4px
        }

        main {
            margin-left: 244px;
            padding: 25px 32px;
            max-width: 1680px;
            min-height: 100vh
        }

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

        .welcome h1 {
            font: 700 23px Manrope, sans-serif;
            margin: 0 0 4px
        }

        .welcome p {
            margin: 0;
            color: var(--muted);
            font-size: 13px
        }

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

        .icon-button {
            position: relative;
            border: 1px solid var(--line);
            background: #fff;
            color: #606c83;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            cursor: pointer;
            font-size: 18px
        }

        .bell-count {
            position: absolute;
            right: -4px;
            top: -4px;
            background: #e95e79;
            color: white;
            border: 2px solid #fff;
            border-radius: 20px;
            min-width: 18px;
            height: 18px;
            font-size: 10px;
            display: grid;
            place-items: center
        }

        .bell-count.zero {
            background: #edf0f7;
            color: #59667e;
            border-color: #fff
        }

        .profile-chip {
            display: flex;
            align-items: center;
            gap: 9px;
            padding-left: 4px
        }

        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #e9e6ff;
            color: #6559c6;
            display: grid;
            place-items: center;
            font-weight: 700
        }

        .profile-chip strong {
            font-size: 13px;
            display: block
        }

        .profile-chip small {
            font-size: 11px;
            color: var(--muted)
        }

        .page-heading {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            margin: 0 0 20px
        }

        .page-heading h2,
        .section-title {
            font: 700 19px Manrope, sans-serif;
            margin: 0
        }

        .muted {
            color: var(--muted)
        }

        .card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 20px;
            margin: 0 0 18px;
            box-shadow: var(--shadow)
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
            gap: 16px
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr);
            gap: 17px
        }

        .metric-card {
            position: relative;
            overflow: hidden;
            padding: 19px 20px
        }

        .metric-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--muted);
            font-size: 13px;
            font-weight: 600
        }

        .metric-icon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            font-size: 17px
        }

        .metric-icon.purple {
            background: #f0eeff;
            color: #6b5dd5
        }

        .metric-icon.green {
            background: #e8f8f2;
            color: #20a982
        }

        .metric-icon.orange {
            background: #fff3e8;
            color: #ea974c
        }

        .metric-icon.blue {
            background: #eaf4ff;
            color: #4a91dd
        }

        .metric-value {
            font: 800 27px Manrope, sans-serif;
            margin: 14px 0 3px
        }

        .metric-foot {
            font-size: 12px;
            color: var(--muted)
        }

        .badge {
            display: inline-flex;
            align-items: center;
            background: #f0efff;
            color: #6658d3;
            padding: 5px 9px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700
        }

        .badge.green {
            background: #e8f8f2;
            color: #16976f
        }

        .badge.orange {
            background: #fff3e8;
            color: #d68232
        }

        .badge.red {
            background: #fff0f2;
            color: #d85872
        }

        .btn,
        button {
            background: var(--primary);
            border: 0;
            color: #fff;
            padding: 10px 15px;
            border-radius: 9px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            font: 600 13px 'DM Sans', sans-serif;
            transition: .15s
        }

        .btn:hover,
        button:hover {
            background: var(--primary-dark);
            color: #fff
        }

        .btn.secondary {
            background: #f0efff;
            color: var(--primary)
        }

        .btn.secondary:hover {
            background: #e5e2ff
        }

        .btn.ghost {
            background: #fff;
            border: 1px solid var(--line);
            color: #5d6880
        }

        .btn.danger {
            background: #fff0f2;
            color: #cf4864
        }

        .btn.small {
            font-size: 12px;
            padding: 7px 10px
        }

        .actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap
        }

        .card-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 0 16px
        }

        .card-head h3 {
            font: 700 15px Manrope, sans-serif;
            margin: 0
        }

        .card-head a {
            font-size: 12px;
            font-weight: 700
        }

        .notice {
            padding: 12px 15px;
            background: #eaf8f1;
            color: #237f62;
            border-radius: 10px;
            margin-bottom: 15px
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0 18px
        }

        .field {
            margin: 0 0 17px
        }

        label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: #58647b;
            margin-bottom: 7px
        }

        input,
        select,
        textarea {
            font: 14px 'DM Sans', sans-serif;
            width: 100%;
            padding: 11px 12px;
            border: 1px solid #dfe4ee;
            border-radius: 9px;
            background: #fff;
            color: var(--ink);
            outline: none
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: #988ee7;
            box-shadow: 0 0 0 3px #6658d315
        }

        textarea {
            min-height: 95px;
            resize: vertical
        }

        .row {
            display: flex;
            gap: 12px;
            align-items: flex-end
        }

        .row>* {
            flex: 1
        }

        table {
            width: 100%;
            border-collapse: collapse
        }

        th,
        td {
            padding: 12px 11px;
            text-align: left;
            border-bottom: 1px solid #edf0f6;
            font-size: 13px
        }

        th {
            font-size: 11px;
            color: #8c96aa;
            text-transform: uppercase;
            letter-spacing: .045em;
            white-space: nowrap
        }

        td {
            overflow-wrap: anywhere
        }

        .scroll {
            overflow: auto
        }

        .small {
            font-size: 12px
        }

        .tag {
            display: inline-flex;
            background: #f1f3f8;
            color: #657089;
            padding: 5px 9px;
            border-radius: 20px;
            font-size: 11px
        }

        .empty {
            padding: 25px;
            text-align: center;
            color: var(--muted);
            font-size: 13px
        }

        .toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px
        }

        .searchbox {
            position: relative;
            max-width: 420px;
            flex: 1
        }

        .searchbox input {
            padding-left: 38px
        }

        .searchbox span {
            position: absolute;
            left: 13px;
            top: 10px;
            color: #9ba4b5
        }

        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 2px 0;
            color: var(--muted);
            font-size: 12px
        }

        .pagination .pages {
            display: flex;
            gap: 5px
        }

        .pagination button {
            padding: 7px 10px;
            background: #f0efff;
            color: #6658d3
        }

        .pagination button:disabled {
            opacity: .4;
            cursor: default
        }

        .bell-wrap {
            position: fixed;
            right: 27px;
            bottom: 27px;
            z-index: 24
        }

        .notification-panel {
            display: none;
            position: absolute;
            right: 0;
            top: auto;
            bottom: 54px;
            width: min(380px, 90vw);
            max-height: 65vh;
            overflow: auto;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 16px 45px #21294424;
            z-index: 20
        }

        .notification-panel.open {
            display: block
        }

        .notification-row {
            padding: 11px 3px;
            border-bottom: 1px solid #edf0f5;
            font-size: 12px
        }

        .notification-row:last-child {
            border: 0
        }

        .notification-row strong {
            display: block;
            color: var(--ink);
            font-size: 13px;
            margin-bottom: 3px
        }

        .notification-row .actions {
            margin-top: 8px
        }

        .calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px
        }

        .calendar-day {
            min-height: 61px;
            border: 1px solid #eff1f6;
            border-radius: 9px;
            padding: 6px;
            font-size: 11px;
            cursor: pointer;
            color: #536078;
            background: #fff
        }

        .calendar-day:hover {
            border-color: #a59be9;
            background: #f8f7ff
        }

        .calendar-day.today {
            background: #f2f0ff;
            border-color: #a69ce9;
            color: #5a4dc1;
            font-weight: 700
        }

        .calendar-day.has-appt:after {
            content: '';
            display: block;
            width: 5px;
            height: 5px;
            background: #e86e93;
            border-radius: 50%;
            margin: 6px auto 0
        }

        .calendar-day.outside {
            opacity: .35
        }

        .calendar-labels {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            color: #9ba4b5;
            font-size: 10px;
            padding: 0 0 7px
        }

        .modal-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: #1c25455c;
            z-index: 30;
            align-items: center;
            justify-content: center;
            padding: 18px
        }

        .modal-backdrop.open {
            display: flex
        }

        .modal {
            background: #fff;
            width: min(600px, 100%);
            max-height: 90vh;
            overflow: auto;
            border-radius: 18px;
            padding: 22px;
            box-shadow: 0 24px 70px #14203f45
        }

        .modal-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 17px
        }

        .modal-head h3 {
            font: 700 18px Manrope;
            margin: 0
        }

        .close {
            border: 0;
            background: #f2f3f8;
            color: #626d82;
            border-radius: 9px;
            width: 34px;
            height: 34px
        }

        .modal-event {
            padding: 11px;
            border: 1px solid var(--line);
            border-radius: 10px;
            margin: 8px 0;
            font-size: 13px
        }

        .modal-event strong {
            display: block;
            margin-bottom: 4px
        }

        .dashboard-list {
            display: flex;
            flex-direction: column
        }

        .list-item {
            display: flex;
            gap: 11px;
            align-items: flex-start;
            padding: 12px 0;
            border-bottom: 1px solid #eef0f5
        }

        .list-item:last-child {
            border: 0
        }

        .list-mark {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #766be0;
            margin-top: 5px;
            flex: none
        }

        .list-item strong {
            font-size: 13px;
            display: block
        }

        .list-item small {
            color: var(--muted);
            font-size: 11px
        }

        .footer-note {
            font-size: 11px;
            color: #9ba4b5
        }

        @media(max-width:1000px) {
            .dashboard-grid {
                grid-template-columns: 1fr
            }
        }

        @media(max-width:780px) {
            aside {
                position: relative;
                width: 100%;
                height: auto;
                padding: 13px
            }

            .brand {
                padding: 3px 8px 13px
            }

            .nav-label,
            .sidebar-bottom {
                display: none
            }

            nav {
                display: flex;
                overflow: auto
            }

            nav a {
                white-space: nowrap;
                padding: 9px 11px
            }

            main {
                margin: 0;
                padding: 16px
            }

            .topbar {
                margin-bottom: 19px
            }

            .profile-chip div:last-child {
                display: none
            }

            .row {
                display: block
            }

            .grid {
                grid-template-columns: repeat(2, minmax(0, 1fr))
            }

            .card {
                padding: 16px
            }

            .toolbar {
                flex-wrap: wrap
            }
        }

        .offix-wordmark {
            display: inline-block;
            font: 800 34px/1 Manrope, Arial, sans-serif;
            letter-spacing: -.085em;
            color: #2855db;
            padding-right: 6px
        }

        .offix-i {
            color: #152a5d;
            letter-spacing: -.07em
        }

        .brand {
            padding: 4px 12px 15px
        }

        .form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2px 20px
        }

        .form-grid .field textarea {
            min-height: 106px
        }

        .form-grid .field-wide {
            grid-column: 1/-1
        }

        .form-panel {
            max-width: 970px;
            margin: auto;
            padding: 28px 32px
        }

        .form-section-title {
            font: 700 14px Manrope, sans-serif;
            margin: 8px 0 20px;
            color: #2d3855;
            border-bottom: 1px solid var(--line);
            padding-bottom: 12px
        }

        .form-actions {
            display: flex;
            align-items: center;
            gap: 9px;
            border-top: 1px solid var(--line);
            padding-top: 20px;
            margin-top: 8px
        }

        .field label {
            font-size: 12px;
            color: #55617a
        }

        .field input,
        .field select,
        .field textarea {
            background: #fbfcff;
            min-height: 44px
        }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            background: #fff
        }

        .appointment-calendar-card {
            max-width: 970px
        }

        .appointment-calendar-card .calendar-day {
            min-height: 74px;
            text-align: left
        }

        .appointment-calendar-card .calendar-labels {
            padding-bottom: 10px
        }

        .appointment-calendar-card .calendar-labels span {
            font-weight: 700;
            font-size: 12px
        }

        .btn.danger:hover {
            background: #fbe0e6;
            color: #a42d4a
        }

        @media(max-width:640px) {
            .form-grid {
                grid-template-columns: 1fr
            }

            .form-panel {
                padding: 18px
            }

            .appointment-calendar-card .calendar-day {
                min-height: 50px;
                padding: 4px;
                font-size: 10px
            }
        }
    
.calendar-day{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;min-height:76px;padding:10px;color:#334155;background:#fff;transition:border-color .15s,background .15s}
.calendar-day.has-appt:after{display:none}.calendar-day.today{background:#faf9ff;color:#5145b5;border-color:#8c80dc}.calendar-date{display:grid;place-items:center;width:26px;height:26px;font-size:12px;font-weight:600}.calendar-day.today .calendar-date{border-radius:50%;background:#6958d5;color:#fff}.calendar-count{display:block;border-radius:6px;padding:4px 6px;background:#eeebff;color:#6252bf;font-size:10px;font-weight:600;line-height:1.3;max-width:100%;white-space:nowrap}.calendar-day.outside{opacity:.45}
.modal-backdrop{background:rgba(24,32,52,.36);backdrop-filter:blur(4px)}.modal{padding:0;background:#fff;border:1px solid #e8ebf2;border-radius:20px;box-shadow:0 24px 80px #18203430}.modal-head{margin:0;padding:22px 24px;border-bottom:1px solid #edf0f5}.modal-head h3{color:#25324b}.modal-head .close{width:32px;height:32px;border-radius:50%;background:#f4f5f9;border:0;color:#778198;padding:0;font-size:22px}#modalBody{padding:22px 24px}.modal-event{padding:18px;margin:12px 0;background:#fff;border:1px solid #e7eaf2;border-radius:12px;box-shadow:0 3px 10px #24334c05}.modal-event strong{display:block;font-size:14px;margin-bottom:8px;color:#24334c}.modal-event .muted{font-size:12px;line-height:1.7}.modal .empty{background:#fafbfe;border:1px dashed #e2e6ef;border-radius:12px;margin:14px 0;padding:28px 15px}
@media(max-width:1100px){.calendar-count-label{display:none}.calendar-count{min-width:20px;text-align:center}}@media(max-width:600px){.calendar-day{padding:5px;min-height:65px}.modal-head,#modalBody{padding:18px}}