* {
    box-sizing: border-box;
}

:root {
    --bg: #f3f5f8;
    --card: #ffffff;
    --text: #253140;
    --muted: #6f7e8d;
    --primary: #34495e;
    --primary-dark: #263849;
    --line: #dbe2e9;
    --success: #167c4b;
    --success-bg: #e9f8f0;
    --danger: #b42318;
    --danger-bg: #fff0ef;
    --shadow: 0 5px 18px rgba(32, 47, 62, .07);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Tahoma, Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(39, 55, 77, .97), rgba(76, 96, 120, .94));
}

.login-card {
    width: min(440px, 100%);
    padding: 34px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .24);
}

.logo {
    font-size: 52px;
    text-align: center;
}

.login-card h1 {
    margin: 12px 0 8px;
    font-size: 24px;
    text-align: center;
}

.muted {
    color: #718096;
    text-align: center;
    line-height: 1.9;
}

.alert {
    margin-top: 18px;
    padding: 12px;
    border-radius: 10px;
    background: var(--danger-bg);
    color: var(--danger);
    text-align: center;
}

.topbar {
    min-height: 74px;
    padding: 12px 26px;
    display: flex;
    align-items: center;
    gap: 24px;
    background: #283848;
    color: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 275px;
}

.brand-icon {
    font-size: 30px;
}

.brand strong,
.brand small {
    display: block;
}

.brand small {
    margin-top: 4px;
    color: #b9c5d1;
    font-size: 11px;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.topnav a {
    padding: 10px 13px;
    border-radius: 9px;
    color: #dbe5ee;
}

.topnav a:hover {
    background: rgba(255, 255, 255, .1);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logout-link {
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;
}

.container {
    max-width: 1240px;
    margin: 28px auto;
    padding: 0 18px 40px;
}

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

.page-heading h1 {
    margin: 0 0 8px;
    font-size: 28px;
}

.page-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

.breadcrumb {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
}

.breadcrumb a {
    color: var(--primary);
    font-weight: bold;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
}

.primary-button {
    background: var(--primary);
    color: #fff;
}

.primary-button:hover {
    background: var(--primary-dark);
}

.secondary-button {
    background: #edf2f6;
    color: #435467;
    border: 1px solid #d7e0e8;
}

.block-button {
    width: 100%;
}

.inline-button {
    align-self: end;
    min-width: 120px;
}

.panel,
.search-panel {
    background: var(--card);
    border-radius: 17px;
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 20px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.panel-header h2 {
    margin: 0;
    font-size: 20px;
}

.count-badge {
    display: inline-flex;
    min-width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    background: #edf2f6;
    color: #516273;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

.stats-grid,
.menu-grid,
.class-grid,
.profile-grid {
    display: grid;
    gap: 16px;
}

.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 20px;
}

.stat-card {
    padding: 20px;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow);
}

.stat-card span,
.stat-card small {
    display: block;
    color: var(--muted);
}

.stat-card strong {
    display: block;
    margin: 10px 0 6px;
    font-size: 30px;
}

.stat-card a {
    display: inline-block;
    margin-top: 7px;
    color: var(--primary);
    font-size: 13px;
    font-weight: bold;
}

.money-value {
    font-size: 24px !important;
}

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

.menu-card {
    position: relative;
    min-height: 190px;
    padding: 23px;
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow);
    border: 1px solid transparent;
}

.active-card:hover {
    border-color: #aebcca;
    transform: translateY(-2px);
    transition: .18s ease;
}

.menu-icon {
    font-size: 34px;
}

.menu-card h2 {
    margin: 13px 0 8px;
    font-size: 19px;
}

.menu-card p {
    color: var(--muted);
    line-height: 1.8;
}

.soon,
.ready {
    display: inline-block;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.soon {
    background: #edf2f6;
    color: #617383;
}

.ready {
    background: var(--success-bg);
    color: var(--success);
}

.two-column-layout {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr);
    gap: 20px;
    align-items: start;
}

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

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

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

.field {
    min-width: 0;
}

.field.full {
    grid-column: 1 / -1;
}

.field.grow {
    flex: 1;
}

label {
    display: block;
    margin-bottom: 7px;
    color: #405164;
    font-weight: bold;
    font-size: 13px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #cbd5df;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    outline: none;
}

input,
select {
    height: 46px;
    padding: 0 13px;
}

textarea {
    padding: 12px 13px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #526d82;
    box-shadow: 0 0 0 3px rgba(82, 109, 130, .14);
}

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

.inline-form .field {
    min-width: 180px;
}

.school-list {
    display: grid;
    gap: 10px;
}

.school-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.school-item:hover {
    border-color: #aebcca;
    background: #fafcfd;
}

.school-item strong,
.school-item small {
    display: block;
}

.school-item small {
    margin-top: 7px;
    color: var(--muted);
}

.mini-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mini-stats span {
    padding: 5px 9px;
    border-radius: 20px;
    background: #edf2f6;
    color: #57697b;
    font-size: 11px;
}

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

.class-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-height: 170px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.class-card h3 {
    margin: 0 0 8px;
}

.class-card p,
.class-card span {
    color: var(--muted);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 20px 0;
}

.profile-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.detail-list {
    margin: 0;
}

.detail-list div {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f4;
}

.detail-list div:last-child {
    border-bottom: 0;
}

.detail-list dt {
    color: var(--muted);
}

.detail-list dd {
    margin: 0;
    font-weight: bold;
}

.note-box {
    margin-top: 14px;
    padding: 13px;
    border-radius: 10px;
    background: #fff9e9;
    color: #725510;
    line-height: 1.8;
}

.orders-list {
    display: grid;
    gap: 15px;
}

.order-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.order-card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.order-card h3 {
    margin: 0 0 7px;
}

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

.order-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
}

.order-stats > div {
    padding: 12px;
    border-radius: 10px;
    background: #f7f9fb;
}

.order-stats span,
.order-stats small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.order-stats strong {
    display: block;
    margin: 6px 0 3px;
}

.debt-box {
    background: var(--danger-bg) !important;
    color: var(--danger);
}

.settled-box {
    background: var(--success-bg) !important;
    color: var(--success);
}

.measurements {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
}

.measurements span {
    padding: 5px 9px;
    border-radius: 20px;
    background: #edf2f6;
    color: #536577;
    font-size: 12px;
}

.order-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
}

.search-form {
    display: flex;
    gap: 10px;
}

.search-form input {
    flex: 1;
    height: 50px;
    font-size: 16px;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

th,
td {
    padding: 13px 11px;
    text-align: right;
    border-bottom: 1px solid #e7ecf0;
    vertical-align: middle;
}

th {
    color: #5e6e7e;
    background: #f7f9fb;
    font-size: 12px;
}

td {
    font-size: 13px;
}

.table-link {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 8px;
    background: #edf2f6;
    color: #40566b;
    font-weight: bold;
    white-space: nowrap;
}

.table-subtitle {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.debt {
    color: var(--danger);
    font-weight: bold;
}

.settled {
    color: var(--success);
    font-weight: bold;
}

.empty-state {
    padding: 34px 18px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed #cbd5df;
    border-radius: 12px;
    background: #fafcfd;
}

@media (max-width: 980px) {
    .stats-grid,
    .menu-grid,
    .class-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-column-layout,
    .profile-grid {
        grid-template-columns: 1fr;
    }

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

    .order-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .topbar {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    .brand {
        min-width: 0;
        flex: 1;
    }

    .topnav {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .inline-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .inline-form .field {
        min-width: 0;
    }

    .order-card-head {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .stats-grid,
    .menu-grid,
    .class-grid,
    .form-grid,
    .three-columns,
    .five-columns,
    .order-stats {
        grid-template-columns: 1fr;
    }

    .search-form {
        flex-direction: column;
    }

    .login-card {
        padding: 24px;
    }

    .user-menu {
        gap: 7px;
        flex-direction: column;
        align-items: flex-end;
    }

    .detail-list div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* v0.4 users, permissions and safe delete */
.flash{margin:18px 0;padding:14px 18px;border-radius:12px;background:#e8f7ed;color:#176b37;font-weight:700}.flash.error{background:#fff0f0;color:#b42318}.flash.warning{background:#fff7df;color:#8a5b00}.role-chip{display:block;margin-top:3px;color:#c7d2dc;font-size:11px}.narrow-panel{max-width:620px;margin-inline:auto}.permissions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.permission-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #d8e0e7;border-radius:10px;background:#f9fbfc}.permission-item input,.check-line input{width:auto;height:auto}.action-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.action-row form{margin:0}.action-column{display:flex;flex-direction:column;gap:7px;align-items:stretch}.small{padding:7px 10px!important;min-height:auto!important;font-size:12px!important}.danger-button{border:0;border-radius:10px;padding:11px 16px;background:#b42318;color:#fff;font:inherit;font-weight:700;cursor:pointer}.danger-button:hover{background:#8f1c14}.status-pill{display:inline-block;padding:5px 9px;border-radius:20px;font-size:12px;font-weight:700}.status-pill.active{background:#e6f7ec;color:#1c7139}.status-pill.inactive{background:#fdeceb;color:#a02820}.void-row{opacity:.65;text-decoration:none;background:#fff5f5}.full-span{grid-column:1/-1}.alert.warning{background:#fff7df;color:#8a5b00}.user-menu>span{display:flex;flex-direction:column}.user-menu>a{white-space:nowrap}
@media(max-width:700px){.permissions-grid{grid-template-columns:1fr}.topnav{display:none}.user-menu{font-size:12px;gap:6px}.topbar{flex-wrap:wrap}}

/* v0.5 personal orders, receipts and delivery */
.filter-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.filter-form .grow{flex:1;min-width:240px}.align-end{align-self:flex-end}.section-title{margin-top:6px;padding:10px 12px;border-radius:10px;background:#eef3f7;color:#314659;font-weight:800}.success-callout{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding:16px 18px;border:1px solid #b6dec3;border-radius:14px;background:#eefaf2;color:#176b37}.status-pill.info{background:#eaf2fb;color:#245b91}.ready-row{background:#f1fbf4}.delivered-row{opacity:.72}.order-ready{border-right-color:#1f8a4c!important}.order-delivered{border-right-color:#7b8794!important;background:#f8fafb}.delivery-summary{margin-top:12px;padding:10px 12px;border-radius:10px;background:#eef6f1;color:#24633b}.checkbox-field label{display:flex;align-items:center;gap:9px}.checkbox-field input{width:auto;height:auto}.link-button{border:0;background:none;padding:0;font:inherit;cursor:pointer}.danger-text{color:#b42318}.money-value{font-size:25px!important}.form-grid textarea{width:100%;min-height:90px;padding:12px 14px;border:1px solid #cbd5df;border-radius:11px;font:inherit;resize:vertical}.form-grid textarea:focus{outline:none;border-color:#526d82;box-shadow:0 0 0 3px rgba(82,109,130,.14)}code{direction:ltr;display:inline-block;font-family:Consolas,monospace;background:#eef2f5;padding:3px 6px;border-radius:6px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media(max-width:700px){.filter-form{display:grid;grid-template-columns:1fr}.success-callout{align-items:flex-start;flex-direction:column}}


/* v0.6 bulk projects, production and payroll */
.bulk-grid{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;align-items:end}.bulk-grid button{width:auto}.panel[id]{scroll-margin-top:90px}.stat-card small{display:block;color:var(--muted);margin-top:4px}.table-wrap a:not(.table-link){color:#275b86;font-weight:700}.panel+.panel{margin-top:18px}.inline-form input[name=reason]{min-width:180px}.print-button{cursor:pointer}.action-row select{min-width:140px}@media(max-width:1100px){.bulk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.bulk-grid{grid-template-columns:1fr}.inline-form input[name=reason]{min-width:0}}


/* v0.7 inventory, expenses, cashbook and reports */
.stock-low{background:#fff3e8!important}.profit-positive{color:#167443!important;font-weight:800}.profit-negative{color:#b42318!important;font-weight:800}.table-wrap td small{display:block;color:var(--muted);margin-top:4px}.numeric{direction:ltr;text-align:right}.topnav{max-width:58vw;overflow-x:auto;white-space:nowrap}.panel h2{margin-top:0}

/* v0.8 settings, logo and export controls */
.brand-logo{width:44px;height:44px;object-fit:contain;border-radius:10px;background:#fff;padding:3px}.form-grid.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.full-span{grid-column:1/-1}.form-card textarea,.form-card select{width:100%;border:1px solid #cbd5df;border-radius:10px;padding:11px;font-family:inherit;background:#fff}.logo-preview{margin:16px 0;padding:14px;border:1px dashed #aab7c4;border-radius:12px;background:#f8fafc}.logo-preview img{max-width:180px;max-height:100px;object-fit:contain}.info-banner{margin:14px 0;padding:13px 16px;border-radius:12px;background:#eef7ff;border:1px solid #b7d9f5;color:#244a68}.ltr{direction:ltr;text-align:left}.table-card{background:#fff;border-radius:15px;box-shadow:0 5px 18px rgba(32,47,62,.06);overflow:auto}.table-card table{width:100%;border-collapse:collapse}.table-card th,.table-card td{padding:12px;border-bottom:1px solid #edf0f3;text-align:right}.small-button{display:inline-block;width:auto!important;padding:7px 11px!important;margin:0!important;font-size:13px!important}.danger-button{background:#b42318!important;color:#fff!important;border:0;border-radius:8px}.flash.error{background:#fff1f1;color:#b42318;border:1px solid #f0b7b2}@media(max-width:720px){.form-grid.two-col{grid-template-columns:1fr}.full-span{grid-column:auto}.page-heading .action-row{width:100%;flex-wrap:wrap}.page-heading .action-row a{flex:1 1 140px;text-align:center}}
.login-logo{max-width:110px;max-height:80px;object-fit:contain}

/* v0.8.1 visual cleanup: compact header, grouped dashboard and improved schools */
.modern-topbar{
    position:sticky;
    top:0;
    z-index:1000;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    min-height:72px;
    padding:10px 24px;
}
.modern-topbar .brand{min-width:235px;max-width:310px}
.modern-topbar .brand strong{font-size:16px;line-height:1.45}
.modern-topbar .brand small{font-size:10px}
.desktop-nav{
    max-width:none!important;
    overflow:visible!important;
    white-space:normal!important;
    justify-content:flex-start;
    min-width:0;
}
.desktop-nav>a,.nav-dropdown>summary{font-size:14px}
.nav-dropdown{position:relative}
.nav-dropdown>summary{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    padding:0 12px;
    border-radius:9px;
    color:#dbe5ee;
    cursor:pointer;
    list-style:none;
    user-select:none;
}
.nav-dropdown>summary::-webkit-details-marker{display:none}
.nav-dropdown>summary:hover,.nav-dropdown[open]>summary{background:rgba(255,255,255,.1)}
.nav-dropdown-panel{
    position:absolute;
    inset-inline-end:0;
    top:calc(100% + 10px);
    z-index:1200;
    display:grid;
    grid-template-columns:repeat(2,minmax(165px,1fr));
    gap:5px;
    width:390px;
    padding:10px;
    border:1px solid #dbe2e9;
    border-radius:14px;
    background:#fff;
    color:#253140;
    box-shadow:0 18px 45px rgba(20,34,48,.22);
}
.nav-dropdown-panel a{display:block;padding:10px 12px;border-radius:9px;color:#34495e!important;font-size:13px}
.nav-dropdown-panel a:hover{background:#edf3f7}
.account-menu>summary{min-width:175px;justify-content:flex-start;padding:5px 8px}
.account-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#526a80;color:#fff;font-weight:800}
.account-name{display:flex;flex:1;flex-direction:column;line-height:1.4;font-size:13px}
.account-name small{color:#bdc9d4;font-size:10px}
.account-panel{grid-template-columns:1fr;width:210px}
.account-panel .logout-item{color:#b42318!important}
.mobile-menu{display:none;position:relative}
.mobile-menu>summary{padding:9px 12px;border:1px solid rgba(255,255,255,.28);border-radius:9px;cursor:pointer;list-style:none}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-menu-panel{position:absolute;inset-inline-end:0;top:48px;z-index:1200;display:grid;width:min(310px,85vw);padding:10px;border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(20,34,48,.25)}
.mobile-menu-panel a{padding:11px 12px;border-bottom:1px solid #edf1f4;color:#34495e}

.dashboard-heading{margin-bottom:16px}
.quick-actions .primary-button,.quick-actions .secondary-button{min-height:42px}
.dashboard-section{margin-bottom:24px}
.dashboard-section-title{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.dashboard-section-title h2{margin:0 0 4px;font-size:19px}
.dashboard-section-title p{margin:0;color:var(--muted);font-size:12px}
.dashboard-stats{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}
.dashboard-stats .stat-card{position:relative;min-height:115px;padding:16px;border:1px solid #edf1f4;box-shadow:0 3px 12px rgba(32,47,62,.05)}
.dashboard-stats .stat-card:before{content:"";position:absolute;inset-inline-start:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:#9aabba}
.dashboard-stats .accent-success:before{background:#1c8b52}
.dashboard-stats .accent-danger:before{background:#c4473c}
.dashboard-stats .accent-warning:before{background:#d59428}
.dashboard-stats .stat-card strong{font-size:25px;margin:8px 0 5px}
.dashboard-stats .money-value{font-size:20px!important}
.dashboard-menu-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px}
.compact-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:125px;padding:18px}
.compact-card .menu-icon{font-size:31px}
.compact-card h2{margin:0 0 7px;font-size:17px}
.compact-card p{margin:0;font-size:12px;line-height:1.8}
.card-arrow{align-self:end;color:#526d82;font-size:12px;font-weight:800;white-space:nowrap}
.admin-section{padding-top:4px}
.admin-tools-grid{display:flex;gap:9px;flex-wrap:wrap}
.admin-tools-grid a{padding:10px 13px;border:1px solid #dbe3ea;border-radius:10px;background:#fff;color:#40556a;font-size:13px;font-weight:700;box-shadow:0 2px 8px rgba(32,47,62,.04)}
.admin-tools-grid a:hover{border-color:#9fb0bf;background:#f7fafc}

.schools-layout{display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);gap:20px;align-items:start}
.create-school-panel{padding:0;overflow:hidden}
.create-school-panel>summary{list-style:none}
.create-school-panel>summary::-webkit-details-marker{display:none}
.create-panel-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 21px;cursor:pointer;font-weight:800;font-size:18px}
.create-panel-summary:hover{background:#f7fafc}
.create-panel-summary small{color:var(--muted);font-size:11px;font-weight:400}
.create-school-panel[open] .create-panel-summary{border-bottom:1px solid #edf1f4}
.create-panel-body{padding:20px}
.compact-form-grid textarea{min-height:72px}
.schools-list-panel{min-height:240px}
.schools-panel-header>div>small{display:block;margin-top:5px;color:var(--muted)}
.schools-panel-header{align-items:flex-end}
.mini-search{width:min(280px,100%);height:42px}
.school-item{padding:17px 18px;transition:.16s ease}
.school-item:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(32,47,62,.07)}
.school-main-info{min-width:0}
.school-main-info strong{font-size:15px}
.school-main-info small{line-height:1.8}
.mini-stats b{align-self:center;color:#526d82;font-size:11px;white-space:nowrap}
.rich-empty-state{display:grid;place-items:center;min-height:190px}
.rich-empty-state .empty-icon{font-size:38px}
.rich-empty-state strong{margin-top:6px;color:#34495e;font-size:16px}
.rich-empty-state p{max-width:440px;margin:6px auto 0;line-height:1.9}

@media(max-width:1100px){
    .modern-topbar{grid-template-columns:auto 1fr auto;padding-inline:16px}
    .modern-topbar .brand{min-width:200px}
    .desktop-nav>a,.nav-dropdown>summary{font-size:13px;padding-inline:9px}
    .account-menu>summary{min-width:auto}
    .account-name{display:none}
}
@media(max-width:860px){
    .modern-topbar{display:flex;flex-wrap:nowrap}
    .desktop-nav{display:none!important}
    .mobile-menu{display:block;margin-inline-start:auto}
    .account-menu{margin-inline-start:0}
    .schools-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
    .modern-topbar{padding:9px 12px;gap:8px}
    .modern-topbar .brand{min-width:0;max-width:none;flex:1}
    .modern-topbar .brand small{display:none}
    .modern-topbar .brand strong{font-size:13px}
    .brand-logo{width:38px;height:38px}
    .account-menu{display:none}
    .compact-card{grid-template-columns:auto 1fr;min-height:112px}
    .card-arrow{display:none}
    .dashboard-menu-grid{grid-template-columns:1fr}
    .schools-panel-header{align-items:stretch;flex-direction:column}
    .mini-search{width:100%}
}

/* v0.8.1 visual cleanup: compact header, grouped dashboard and improved schools */
.modern-topbar{
    position:sticky;
    top:0;
    z-index:1000;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    min-height:72px;
    padding:10px 24px;
}
.modern-topbar .brand{min-width:235px;max-width:310px}
.modern-topbar .brand strong{font-size:16px;line-height:1.45}
.modern-topbar .brand small{font-size:10px}
.desktop-nav{
    max-width:none!important;
    overflow:visible!important;
    white-space:normal!important;
    justify-content:flex-start;
    min-width:0;
}
.desktop-nav>a,.nav-dropdown>summary{font-size:14px}
.nav-dropdown{position:relative}
.nav-dropdown>summary{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    padding:0 12px;
    border-radius:9px;
    color:#dbe5ee;
    cursor:pointer;
    list-style:none;
    user-select:none;
}
.nav-dropdown>summary::-webkit-details-marker{display:none}
.nav-dropdown>summary:hover,.nav-dropdown[open]>summary{background:rgba(255,255,255,.1)}
.nav-dropdown-panel{
    position:absolute;
    inset-inline-end:0;
    top:calc(100% + 10px);
    z-index:1200;
    display:grid;
    grid-template-columns:repeat(2,minmax(165px,1fr));
    gap:5px;
    width:390px;
    padding:10px;
    border:1px solid #dbe2e9;
    border-radius:14px;
    background:#fff;
    color:#253140;
    box-shadow:0 18px 45px rgba(20,34,48,.22);
}
.nav-dropdown-panel a{display:block;padding:10px 12px;border-radius:9px;color:#34495e!important;font-size:13px}
.nav-dropdown-panel a:hover{background:#edf3f7}
.account-menu>summary{min-width:175px;justify-content:flex-start;padding:5px 8px}
.account-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#526a80;color:#fff;font-weight:800}
.account-name{display:flex;flex:1;flex-direction:column;line-height:1.4;font-size:13px}
.account-name small{color:#bdc9d4;font-size:10px}
.account-panel{grid-template-columns:1fr;width:210px}
.account-panel .logout-item{color:#b42318!important}
.mobile-menu{display:none;position:relative}
.mobile-menu>summary{padding:9px 12px;border:1px solid rgba(255,255,255,.28);border-radius:9px;cursor:pointer;list-style:none}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-menu-panel{position:absolute;inset-inline-end:0;top:48px;z-index:1200;display:grid;width:min(310px,85vw);padding:10px;border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(20,34,48,.25)}
.mobile-menu-panel a{padding:11px 12px;border-bottom:1px solid #edf1f4;color:#34495e}

.dashboard-heading{margin-bottom:16px}
.quick-actions .primary-button,.quick-actions .secondary-button{min-height:42px}
.dashboard-section{margin-bottom:24px}
.dashboard-section-title{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.dashboard-section-title h2{margin:0 0 4px;font-size:19px}
.dashboard-section-title p{margin:0;color:var(--muted);font-size:12px}
.dashboard-stats{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}
.dashboard-stats .stat-card{position:relative;min-height:115px;padding:16px;border:1px solid #edf1f4;box-shadow:0 3px 12px rgba(32,47,62,.05)}
.dashboard-stats .stat-card:before{content:"";position:absolute;inset-inline-start:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:#9aabba}
.dashboard-stats .accent-success:before{background:#1c8b52}
.dashboard-stats .accent-danger:before{background:#c4473c}
.dashboard-stats .accent-warning:before{background:#d59428}
.dashboard-stats .stat-card strong{font-size:25px;margin:8px 0 5px}
.dashboard-stats .money-value{font-size:20px!important}
.dashboard-menu-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px}
.compact-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:125px;padding:18px}
.compact-card .menu-icon{font-size:31px}
.compact-card h2{margin:0 0 7px;font-size:17px}
.compact-card p{margin:0;font-size:12px;line-height:1.8}
.card-arrow{align-self:end;color:#526d82;font-size:12px;font-weight:800;white-space:nowrap}
.admin-section{padding-top:4px}
.admin-tools-grid{display:flex;gap:9px;flex-wrap:wrap}
.admin-tools-grid a{padding:10px 13px;border:1px solid #dbe3ea;border-radius:10px;background:#fff;color:#40556a;font-size:13px;font-weight:700;box-shadow:0 2px 8px rgba(32,47,62,.04)}
.admin-tools-grid a:hover{border-color:#9fb0bf;background:#f7fafc}

.schools-layout{display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);gap:20px;align-items:start}
.create-school-panel{padding:0;overflow:hidden}
.create-school-panel>summary{list-style:none}
.create-school-panel>summary::-webkit-details-marker{display:none}
.create-panel-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 21px;cursor:pointer;font-weight:800;font-size:18px}
.create-panel-summary:hover{background:#f7fafc}
.create-panel-summary small{color:var(--muted);font-size:11px;font-weight:400}
.create-school-panel[open] .create-panel-summary{border-bottom:1px solid #edf1f4}
.create-panel-body{padding:20px}
.compact-form-grid textarea{min-height:72px}
.schools-list-panel{min-height:240px}
.schools-panel-header>div>small{display:block;margin-top:5px;color:var(--muted)}
.schools-panel-header{align-items:flex-end}
.mini-search{width:min(280px,100%);height:42px}
.school-item{padding:17px 18px;transition:.16s ease}
.school-item:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(32,47,62,.07)}
.school-main-info{min-width:0}
.school-main-info strong{font-size:15px}
.school-main-info small{line-height:1.8}
.mini-stats b{align-self:center;color:#526d82;font-size:11px;white-space:nowrap}
.rich-empty-state{display:grid;place-items:center;min-height:190px}
.rich-empty-state .empty-icon{font-size:38px}
.rich-empty-state strong{margin-top:6px;color:#34495e;font-size:16px}
.rich-empty-state p{max-width:440px;margin:6px auto 0;line-height:1.9}

@media(max-width:1100px){
    .modern-topbar{grid-template-columns:auto 1fr auto;padding-inline:16px}
    .modern-topbar .brand{min-width:200px}
    .desktop-nav>a,.nav-dropdown>summary{font-size:13px;padding-inline:9px}
    .account-menu>summary{min-width:auto}
    .account-name{display:none}
}
@media(max-width:860px){
    .modern-topbar{display:flex;flex-wrap:nowrap}
    .desktop-nav{display:none!important}
    .mobile-menu{display:block;margin-inline-start:auto}
    .account-menu{margin-inline-start:0}
    .schools-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
    .modern-topbar{padding:9px 12px;gap:8px}
    .modern-topbar .brand{min-width:0;max-width:none;flex:1}
    .modern-topbar .brand small{display:none}
    .modern-topbar .brand strong{font-size:13px}
    .brand-logo{width:38px;height:38px}
    .account-menu{display:none}
    .compact-card{grid-template-columns:auto 1fr;min-height:112px}
    .card-arrow{display:none}
    .dashboard-menu-grid{grid-template-columns:1fr}
    .schools-panel-header{align-items:stretch;flex-direction:column}
    .mini-search{width:100%}
}
/* === v0.8.2 unified form system === */
.form-page-panel,
.app-form-card,
form.panel.form-grid,
form.panel.app-form-grid {
    max-width: 1080px;
    margin-inline: auto;
}
.form-page-panel {
    padding: 0;
    overflow: hidden;
}
.form-page-panel > form,
.form-page-panel form.ui-form {
    padding: 24px;
}
.ui-form .field,
.ui-form > label,
.app-form-grid .field {
    position: relative;
}
.app-form-grid,
.ui-form.form-grid,
.ui-form .form-grid {
    gap: 18px 16px;
}
.ui-form label,
.form-card label {
    color: #35495c;
    font-size: 13px;
    line-height: 1.6;
}
.required-mark {
    color: #c0392b;
    font-weight: 900;
}
.ui-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ui-form select,
.ui-form textarea,
.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-card select,
.form-card textarea {
    border-color: #cbd6df;
    background: #fbfcfd;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ui-form input:not([type="checkbox"]):not([type="radio"]),
.ui-form select,
.form-card input:not([type="checkbox"]):not([type="radio"]),
.form-card select {
    min-height: 50px;
}
.ui-form textarea,
.form-card textarea {
    min-height: 96px;
    line-height: 1.9;
}
.ui-form input:hover,
.ui-form select:hover,
.ui-form textarea:hover,
.form-card input:hover,
.form-card select:hover,
.form-card textarea:hover {
    border-color: #aebdca;
    background: #fff;
}
.ui-form input:focus,
.ui-form select:focus,
.ui-form textarea:focus,
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
    border-color: #4e6b83;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(78,107,131,.12);
}
.ui-form input:disabled,
.ui-form select:disabled,
.ui-form textarea:disabled {
    background: #eef2f5;
    color: #7b8794;
    cursor: not-allowed;
}
.ui-form input:invalid:not(:placeholder-shown),
.ui-form select:invalid:not(:focus) {
    border-color: #d98279;
}
.ltr-input {
    direction: ltr;
    text-align: left;
}
.money-preview {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    color: #60758a;
    font-size: 11px;
}
.section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 2px;
    padding: 10px 0;
    border-bottom: 1px solid #e7edf2;
    color: #2f4355;
    font-size: 16px;
    font-weight: 900;
}
.section-title::before {
    content: "";
    width: 4px;
    height: 22px;
    border-radius: 4px;
    background: #526d82;
}
.form-actions,
.dialog-actions {
    align-items: center;
    gap: 10px;
}
.form-page-panel .form-actions,
.multi-section-form > .form-actions,
form.panel.form-grid > .form-actions,
form.panel.app-form-grid > .form-actions {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    margin: 22px -10px -10px;
    padding: 12px;
    border: 1px solid #dfe6ec;
    border-radius: 13px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 30px rgba(32,47,62,.12);
    backdrop-filter: blur(8px);
}
button.is-submitting,
input.is-submitting {
    opacity: .75;
    cursor: wait;
}
button.is-submitting::before {
    content: "◌";
    display: inline-block;
    margin-inline-end: 7px;
    animation: ui-spin .8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* compact filters and searches */
.ui-filter-form,
.filter-form,
.search-form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}
.ui-filter-form .field,
.filter-form .field,
.search-form .field {
    min-width: 180px;
    flex: 0 1 260px;
}
.ui-filter-form .field.grow,
.filter-form .field.grow {
    flex: 1 1 320px;
}
.ui-filter-form button,
.filter-form button,
.search-form button {
    min-height: 46px;
}

/* checkbox / permission forms */
.check-line,
.permission-item {
    border: 1px solid #dfe6ec;
    border-radius: 11px;
    background: #f9fbfc;
}
.check-line { padding: 12px 14px; }
.check-line label,
.permission-item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
}
.check-line input,
.permission-item input {
    width: 18px;
    height: 18px;
    accent-color: #34495e;
}
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    gap: 9px;
}
.permission-item { padding: 11px 12px; }
.permission-item:hover { border-color: #aab9c6; background: #fff; }

/* full-width school directory */
.page-heading-toolbar { align-items: flex-end; }
.full-width-list-panel { padding: 0; overflow: hidden; }
.list-toolbar {
    display: grid;
    grid-template-columns:minmax(260px,1fr) minmax(170px,240px) auto;
    gap: 14px;
    align-items:end;
    padding: 18px 20px;
    border-bottom: 1px solid #e7edf2;
    background: #fbfcfd;
}
.list-toolbar label { margin-bottom: 6px; }
.toolbar-count {
    display: grid;
    place-items:center;
    min-width: 84px;
    min-height: 50px;
    padding: 5px 12px;
    border:1px solid #dce5ec;
    border-radius:11px;
    background:#fff;
}
.toolbar-count span { font-size:20px; font-weight:900; }
.toolbar-count small { color:var(--muted); }
.school-card-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    gap:14px;
    padding:18px;
}
.school-card {
    display:flex;
    flex-direction:column;
    min-height:250px;
    border:1px solid #dfe6ec;
    border-radius:15px;
    background:#fff;
    overflow:hidden;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.school-card:hover { transform:translateY(-2px); border-color:#aebdca; box-shadow:0 10px 25px rgba(32,47,62,.09); }
.school-card-main { display:flex; align-items:center; gap:12px; padding:17px 18px; border-bottom:1px solid #edf1f4; }
.school-card-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:13px; background:#edf3f7; font-size:26px; }
.school-card-title h2 { margin:0 0 6px; font-size:17px; }
.school-card-title p { margin:0; color:var(--muted); font-size:12px; }
.school-card-meta { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; padding:8px 18px 12px; }
.school-card-meta div { padding:10px 0; border-bottom:1px dashed #e6ebef; }
.school-card-meta div:nth-child(odd) { padding-inline-end:12px; }
.school-card-meta div:nth-child(even) { padding-inline-start:12px; }
.school-card-meta dt { color:var(--muted); font-size:11px; }
.school-card-meta dd { margin:5px 0 0; font-weight:800; }
.school-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding:13px 18px; background:#f8fafb; }
.compact-action-form { display:inline-flex; margin:0; }
.school-empty-state { min-height:330px; }
.school-empty-state .primary-button { margin-top:12px; }

/* dialog forms */
.app-dialog {
    width:min(720px,calc(100vw - 28px));
    max-height:calc(100vh - 28px);
    padding:0;
    border:0;
    border-radius:18px;
    background:#fff;
    color:var(--text);
    box-shadow:0 30px 90px rgba(12,25,38,.35);
    overflow:hidden;
}
.app-dialog::backdrop { background:rgba(20,32,43,.58); backdrop-filter:blur(3px); }
.dialog-form { display:flex; flex-direction:column; max-height:calc(100vh - 28px); }
.dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 22px; border-bottom:1px solid #e7edf2; }
.dialog-header h2 { margin:0 0 6px; font-size:20px; }
.dialog-header p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.dialog-close { width:38px; height:38px; border:0; border-radius:10px; background:#eef3f6; color:#394f61; font-size:25px; cursor:pointer; }
.dialog-body { padding:20px 22px; overflow:auto; }
.dialog-actions { display:flex; justify-content:flex-end; padding:14px 22px; border-top:1px solid #e7edf2; background:#f8fafb; }

/* multi-section long forms */
.multi-section-form { display:grid; gap:18px; }
.multi-section-form > .panel { margin-bottom:0; }
.multi-section-form > .panel .panel-header { padding-bottom:12px; border-bottom:1px solid #edf1f4; }
.form-card.app-form-card { padding:24px; border-radius:17px; background:#fff; box-shadow:var(--shadow); }

@media(max-width:820px){
    .form-grid.three-columns,
    .form-grid.five-columns,
    .three-columns,
    .five-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .list-toolbar { grid-template-columns:1fr 1fr; }
    .toolbar-search { grid-column:1/-1; }
    .toolbar-count { min-width:0; }
}
@media(max-width:600px){
    .page-heading-toolbar { align-items:stretch; }
    .page-heading-toolbar .primary-button { width:100%; }
    .form-grid,
    .form-grid.three-columns,
    .form-grid.five-columns,
    .three-columns,
    .five-columns { grid-template-columns:1fr; }
    .field.full,
    .field.full-span,
    .full-span { grid-column:1; }
    .ui-filter-form,
    .filter-form,
    .search-form { display:grid; grid-template-columns:1fr; }
    .ui-filter-form .field,
    .filter-form .field,
    .search-form .field { min-width:0; width:100%; }
    .ui-filter-form button,
    .filter-form button,
    .search-form button { width:100%; }
    .list-toolbar { grid-template-columns:1fr; }
    .toolbar-search { grid-column:auto; }
    .school-card-grid { grid-template-columns:1fr; padding:12px; }
    .school-card-meta { grid-template-columns:1fr; }
    .school-card-meta div:nth-child(n) { padding-inline:0; }
    .school-card-actions > * { flex:1 1 auto; }
    .school-card-actions .small { width:100%; }
    .form-page-panel > form,
    .form-page-panel form.ui-form,
    .form-card.app-form-card { padding:17px; }
    .form-page-panel .form-actions,
    .multi-section-form > .form-actions,
    form.panel.form-grid > .form-actions,
    form.panel.app-form-grid > .form-actions {
        position:static;
        margin:18px 0 0;
        padding:0;
        border:0;
        box-shadow:none;
        background:transparent;
    }
    .form-actions { display:grid; grid-template-columns:1fr; }
    .form-actions > * { width:100%; }
    .dialog-body { padding:17px; }
    .dialog-actions { display:grid; grid-template-columns:1fr 1fr; }
}
/* === MERAKI_UI_V086_START === */

:root {
    --meraki-bg: #f7f1e8;
    --meraki-bg-soft: #fbf7f0;
    --meraki-paper: rgba(255, 252, 246, .94);
    --meraki-paper-solid: #fffaf3;
    --meraki-olive: #898967;
    --meraki-olive-dark: #68694f;
    --meraki-olive-light: #b6b392;
    --meraki-mauve: #b89a9c;
    --meraki-blush: #dcc2b0;
    --meraki-gold: #aa8f68;
    --meraki-text: #4f4b42;
    --meraki-muted: #81796e;
    --meraki-line: #e1d5c5;
    --meraki-shadow:
        0 16px 45px rgba(98, 82, 59, .09);

    --bg: var(--meraki-bg);
    --card: var(--meraki-paper);
    --text: var(--meraki-text);
    --muted: var(--meraki-muted);
    --primary: var(--meraki-olive);
    --primary-dark: var(--meraki-olive-dark);
    --line: var(--meraki-line);
    --shadow: var(--meraki-shadow);
}

html {
    background: var(--meraki-bg);
}

body {
    color: var(--meraki-text);
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(217, 194, 176, .20),
            transparent 24%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(137, 137, 103, .10),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #fbf7f0,
            #f5eee4
        );
    font-family:
        Tahoma,
        "Segoe UI",
        Arial,
        sans-serif;
    min-height: 100vh;
}

body:not(.login-body)::before,
body:not(.login-body)::after {
    content: "❀";
    position: fixed;
    z-index: -1;
    color: rgba(137, 137, 103, .09);
    font-size: 170px;
    pointer-events: none;
}

body:not(.login-body)::before {
    top: 90px;
    left: -42px;
    transform: rotate(-20deg);
}

body:not(.login-body)::after {
    right: -38px;
    bottom: -24px;
    transform: rotate(18deg);
}

.topbar {
    background:
        linear-gradient(
            100deg,
            rgba(255, 251, 244, .98),
            rgba(247, 239, 227, .98)
        );
    color: var(--meraki-text);
    border-bottom: 1px solid var(--meraki-line);
    box-shadow:
        0 5px 24px rgba(96, 78, 53, .08);
    backdrop-filter: blur(12px);
}

.brand {
    min-width: 260px;
}

.brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    padding: 5px;
    background: transparent;
    box-shadow: none;
}

.brand strong {
    color: var(--meraki-olive-dark);
    font-size: 16px;
}

.brand small {
    color: var(--meraki-muted);
}

.brand-icon {
    color: var(--meraki-olive);
}

.topnav a {
    color: #6d685f;
    border: 1px solid transparent;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.topnav a:hover {
    color: var(--meraki-olive-dark);
    background: rgba(137, 137, 103, .11);
    border-color: rgba(137, 137, 103, .14);
    transform: translateY(-1px);
}

.logout-link {
    color: #8c5b57;
    border-color: rgba(140, 91, 87, .25);
    background: rgba(255, 255, 255, .48);
}

.container {
    max-width: 1380px;
    margin-top: 32px;
}

.page-heading {
    position: relative;
    padding: 19px 22px;
    border: 1px solid rgba(225, 213, 197, .86);
    border-radius: 19px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 252, 246, .90),
            rgba(248, 240, 229, .84)
        );
    box-shadow: var(--meraki-shadow);
    overflow: hidden;
}

.page-heading::after {
    content: "✦";
    position: absolute;
    left: 22px;
    bottom: 8px;
    color: rgba(184, 154, 156, .42);
    font-size: 23px;
}

.page-heading h1 {
    color: var(--meraki-olive-dark);
    font-weight: 800;
}

.breadcrumb a {
    color: var(--meraki-olive-dark);
}

.panel,
.search-panel,
.form-card,
.table-card,
.stat-card,
.class-card,
.order-card {
    border: 1px solid rgba(225, 213, 197, .88);
    background:
        linear-gradient(
            145deg,
            rgba(255, 253, 248, .96),
            rgba(252, 247, 239, .93)
        );
    box-shadow: var(--meraki-shadow);
}

.panel,
.search-panel {
    border-radius: 20px;
}

.panel-header h2 {
    color: var(--meraki-olive-dark);
}

.count-badge {
    color: var(--meraki-olive-dark);
    background: rgba(137, 137, 103, .13);
}

.primary-button,
.meraki-login-button {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #989873,
            #777858
        );
    border:
        1px solid rgba(104, 105, 79, .25);
    box-shadow:
        0 8px 20px rgba(104, 105, 79, .18);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.primary-button:hover,
.meraki-login-button:hover {
    background:
        linear-gradient(
            135deg,
            #858663,
            #66674d
        );
    transform: translateY(-1px);
    box-shadow:
        0 12px 26px rgba(104, 105, 79, .24);
}

.secondary-button {
    color: #69634f;
    background: #f6efe5;
    border-color: #dfd1bf;
}

.danger-button {
    background:
        linear-gradient(
            135deg,
            #b77c78,
            #975b58
        ) !important;
}

input,
select,
textarea {
    color: var(--meraki-text);
    background: rgba(255, 253, 249, .96);
    border-color: #d9cdbd !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--meraki-olive) !important;
    box-shadow:
        0 0 0 4px rgba(137, 137, 103, .12);
}

table {
    overflow: hidden;
    border-radius: 14px;
}

table thead th {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #989873,
            #7c7d5d
        );
    border-color: rgba(255, 255, 255, .14);
}

table tbody tr {
    transition: background .16s ease;
}

table tbody tr:hover {
    background: rgba(218, 200, 177, .15);
}

.table-link {
    color: var(--meraki-olive-dark);
    font-weight: 700;
}

.status-pill.active,
.settled,
.profit-positive {
    color: #587054;
}

.status-pill.info {
    color: #756d55;
    background: #f2eadc;
}

.debt,
.profit-negative {
    color: #a0605d;
}

.flash,
.alert,
.success-callout,
.info-banner,
.note-box {
    border-radius: 14px;
}


/* Dashboard hero */

.meraki-dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(250px, .6fr);
    min-height: 250px;
    margin-bottom: 22px;
    padding: 38px 44px;
    overflow: hidden;
    border: 1px solid rgba(225, 213, 197, .92);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 16% 22%,
            rgba(184, 154, 156, .17),
            transparent 20%
        ),
        radial-gradient(
            circle at 88% 76%,
            rgba(137, 137, 103, .15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fffaf3,
            #f4eadc
        );
    box-shadow: var(--meraki-shadow);
}

.meraki-dashboard-hero::before {
    content: "❀";
    position: absolute;
    top: -26px;
    right: 18px;
    color: rgba(137, 137, 103, .08);
    font-size: 190px;
}

.meraki-dashboard-hero::after {
    content: "✦";
    position: absolute;
    left: 7%;
    bottom: 18px;
    color: rgba(184, 154, 156, .55);
    font-size: 22px;
}

.hero-eyebrow {
    margin-bottom: 13px;
    color: var(--meraki-mauve);
    direction: ltr;
    text-align: right;
    letter-spacing: 2px;
    font-family: Georgia, serif;
}

.meraki-hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
}

.meraki-hero-copy h1 {
    margin: 0 0 15px;
    color: var(--meraki-olive-dark);
    font-size: clamp(28px, 3.1vw, 48px);
    line-height: 1.6;
}

.meraki-hero-copy p {
    margin: 0;
    color: #746d61;
    font-size: 16px;
    line-height: 2;
}

.meraki-hero-art {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
}

.meraki-hero-art img {
    max-width: 260px;
    max-height: 145px;
    object-fit: contain;
    filter:
        drop-shadow(
            0 10px 18px rgba(81, 74, 57, .10)
        );
}

.hero-tools {
    display: flex;
    gap: 21px;
    margin-top: 20px;
    color: var(--meraki-olive);
    font-size: 28px;
}

.hero-divider {
    width: min(360px, 90%);
    margin: 22px 0 0 auto;
}


/* Login page */

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 34px;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 8% 14%,
            rgba(184, 154, 156, .18),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 84%,
            rgba(137, 137, 103, .14),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #fbf6ee,
            #efe5d8
        );
}

.login-body::before,
.login-body::after {
    content: "❀";
    position: fixed;
    color: rgba(137, 137, 103, .10);
    font-size: 230px;
    pointer-events: none;
}

.login-body::before {
    top: -65px;
    left: -75px;
    transform: rotate(-20deg);
}

.login-body::after {
    right: -75px;
    bottom: -85px;
    transform: rotate(24deg);
}

.meraki-login-shell {
    position: relative;
    z-index: 2;
    width: min(1220px, 100%);
    min-height: 690px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    overflow: hidden;
    border:
        1px solid rgba(220, 204, 182, .86);
    border-radius: 30px;
    background: rgba(255, 251, 244, .92);
    box-shadow:
        0 28px 90px rgba(93, 78, 58, .17);
    backdrop-filter: blur(16px);
}

.meraki-login-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 62px 48px;
    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(184, 154, 156, .17),
            transparent 25%
        ),
        radial-gradient(
            circle at 75% 78%,
            rgba(137, 137, 103, .15),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f8f0e5,
            #fffaf3
        );
}

.meraki-login-art::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .46;
    background-image:
        linear-gradient(
            rgba(181, 162, 139, .06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(181, 162, 139, .05) 1px,
            transparent 1px
        );
    background-size: 36px 36px;
}

.meraki-art-content {
    position: relative;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.meraki-main-logo {
    width: min(430px, 88%);
    max-height: 190px;
    object-fit: contain;
    filter:
        drop-shadow(
            0 12px 24px rgba(92, 82, 62, .08)
        );
}

.meraki-fallback-logo,
.meraki-brand-title {
    color: var(--meraki-olive);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

.meraki-fallback-logo {
    font-size: clamp(56px, 7vw, 106px);
}

.meraki-brand-title {
    margin-top: 8px;
    font-size: 22px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.meraki-typewriter {
    min-height: 43px;
    margin-top: 20px;
    color: #726b5d;
    font-size: clamp(15px, 1.7vw, 21px);
    line-height: 2;
}

.meraki-typewriter::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.2em;
    margin-right: 7px;
    vertical-align: middle;
    background: var(--meraki-mauve);
    animation: meraki-cursor .8s infinite;
}

.meraki-typewriter.typing-complete::after {
    opacity: 0;
}

@keyframes meraki-cursor {
    50% {
        opacity: 0;
    }
}

.meraki-divider,
.small-floral-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--meraki-mauve);
}

.meraki-divider {
    width: min(430px, 90%);
    margin: 20px auto;
}

.meraki-divider span,
.small-floral-divider span {
    height: 1px;
    flex: 1;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--meraki-line),
            transparent
        );
}

.sewing-scene {
    position: relative;
    height: 190px;
    margin-top: 18px;
}

.fabric-shape {
    position: absolute;
    right: 4%;
    bottom: 0;
    width: 62%;
    height: 90px;
    border-radius:
        60% 42% 14% 16% /
        50% 60% 20% 25%;
    background:
        linear-gradient(
            145deg,
            #a6a589,
            #77785d
        );
    opacity: .75;
    transform: rotate(-4deg);
    box-shadow:
        inset 0 10px 24px rgba(255, 255, 255, .16);
}

.thread-spool {
    position: absolute;
    left: 17%;
    bottom: 30px;
    width: 67px;
    height: 104px;
    border-radius: 8px;
    background:
        repeating-linear-gradient(
            0deg,
            #8c8c6b 0 3px,
            #999979 3px 6px
        );
    box-shadow:
        0 12px 24px rgba(75, 68, 55, .16);
}

.thread-spool::before,
.thread-spool::after {
    content: "";
    position: absolute;
    right: -8px;
    width: 83px;
    height: 15px;
    border-radius: 50%;
    background: #b99369;
}

.thread-spool::before {
    top: -7px;
}

.thread-spool::after {
    bottom: -7px;
}

.tape-measure {
    position: absolute;
    right: 14%;
    bottom: 9px;
    width: 63%;
    padding: 7px 14px;
    overflow: hidden;
    border-radius: 18px;
    color: #7d6e5e;
    background:
        repeating-linear-gradient(
            90deg,
            #f7ead7 0 23px,
            #ddc8a9 23px 24px
        );
    box-shadow:
        0 8px 18px rgba(85, 72, 54, .10);
    transform: rotate(5deg);
    direction: ltr;
    white-space: nowrap;
    font-family: Georgia, serif;
}

.sewing-symbol {
    position: absolute;
    color: #8d765b;
    filter:
        drop-shadow(
            0 7px 10px rgba(85, 72, 54, .15)
        );
}

.scissors-symbol {
    right: 26%;
    bottom: 16px;
    font-size: 67px;
    transform: rotate(-13deg);
}

.needle-symbol {
    left: 8%;
    top: 13px;
    font-size: 41px;
}

.login-flower {
    position: absolute;
    z-index: 1;
    color: rgba(184, 154, 156, .25);
}

.flower-one {
    top: 28px;
    right: 30px;
    font-size: 90px;
}

.flower-two {
    left: 42px;
    top: 80px;
    font-size: 38px;
}

.meraki-login-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 58px 64px;
    background:
        linear-gradient(
            150deg,
            rgba(255, 253, 249, .98),
            rgba(249, 241, 231, .96)
        );
}

.login-panel-decoration {
    width: 180px;
    margin: 0 auto 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--meraki-mauve);
}

.login-panel-decoration span {
    flex: 1;
    height: 1px;
    background: var(--meraki-line);
}

.login-panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.login-panel-header h1 {
    margin: 0;
    color: var(--meraki-olive-dark);
    font-size: clamp(27px, 3vw, 41px);
}

.login-sparkles {
    color: var(--meraki-mauve);
}

.login-welcome {
    margin: 14px 0 16px;
    color: var(--meraki-muted);
    text-align: center;
    line-height: 1.9;
}

.small-floral-divider {
    width: 210px;
    margin: 0 auto 26px;
}

.meraki-login-form label {
    display: block;
    margin: 18px 0 9px;
    color: #625d53;
    font-weight: 700;
}

.meraki-input-wrap {
    position: relative;
}

.meraki-input-wrap input {
    width: 100%;
    height: 58px;
    padding:
        0 51px
        0 15px;
    border: 1px solid #d8cbbb;
    border-radius: 13px;
    background: rgba(255, 255, 255, .70);
}

.input-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 18px;
    color: var(--meraki-olive);
    font-size: 24px;
    transform: translateY(-50%);
}

.meraki-login-button {
    width: 100%;
    height: 58px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 13px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 800;
}

.button-arrow {
    font-size: 22px;
    transition: transform .2s ease;
}

.meraki-login-button:hover .button-arrow {
    transform: translateX(-5px);
}

.meraki-login-footer {
    margin-top: 33px;
    color: #9b9184;
    text-align: center;
    font-size: 12px;
}

.meraki-login-footer .small-floral-divider {
    margin-bottom: 12px;
}

.meraki-login-footer p {
    margin: 0;
}


/* Responsive */

@media (max-width: 980px) {
    .meraki-login-shell {
        width: min(650px, 100%);
        grid-template-columns: 1fr;
    }

    .meraki-login-art {
        min-height: 320px;
        padding: 40px 32px;
    }

    .sewing-scene {
        display: none;
    }

    .meraki-main-logo {
        max-height: 140px;
    }

    .meraki-login-panel {
        padding: 45px 40px;
    }

    .meraki-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .meraki-hero-art {
        margin-top: 20px;
    }
}

@media (max-width: 720px) {
    .login-body {
        display: block;
        padding: 0;
    }

    .meraki-login-shell {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .meraki-login-art {
        min-height: 265px;
        padding: 30px 22px;
    }

    .meraki-login-panel {
        padding: 38px 23px 42px;
    }

    .meraki-brand-title {
        font-size: 16px;
        letter-spacing: 5px;
    }

    .meraki-typewriter {
        font-size: 14px;
    }

    .meraki-dashboard-hero {
        padding: 28px 23px;
        border-radius: 19px;
    }

    .meraki-hero-copy h1 {
        font-size: 27px;
    }

    .topbar {
        background: #fffaf3;
    }

    .container {
        margin-top: 18px;
    }

    .page-heading {
        padding: 17px;
    }
}

/* === MERAKI_UI_V086_END === */

/* === MERAKI_FONT_MENU_V087_START === */

@font-face {
    font-family: "Estedad";
    src:
        url("/static/fonts/estedad.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src:
        url("/static/fonts/cormorant-garamond.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

html,
body,
button,
input,
select,
textarea,
table,
label {
    font-family:
        "Estedad",
        Tahoma,
        "Segoe UI",
        Arial,
        sans-serif !important;
}

body {
    font-weight: 450;
    line-height: 1.75;
}

h1,
h2,
h3,
h4,
.panel-header h2,
.page-heading h1 {
    color: #55563f;
    font-weight: 750;
    letter-spacing: -.25px;
}

.meraki-brand-title,
.meraki-fallback-logo,
.hero-eyebrow {
    font-family:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif !important;
}

.meraki-brand-title {
    color: #68694f;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 7px;
}

.hero-eyebrow {
    color: #8a6e71;
    font-size: 18px;
    font-weight: 600;
}

.meraki-typewriter,
.meraki-hero-copy p,
.login-welcome {
    color: #5c584e;
    font-weight: 500;
}

/* خوانایی کامل نوار بالای سامانه */

.topbar {
    min-height: 86px;
    padding: 13px 24px;
    color: #39392f !important;
    background:
        linear-gradient(
            105deg,
            #fffdf8,
            #f4eadc
        ) !important;
    border-bottom:
        1px solid #d2c3af !important;
    box-shadow:
        0 6px 25px rgba(79, 65, 47, .13);
}

.brand {
    color: #454536 !important;
}

.brand strong {
    color: #56573f !important;
    font-size: 16px;
    font-weight: 800;
}

.brand small {
    color: #6f695f !important;
    font-size: 12px;
    font-weight: 550;
}

.topnav {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: 1;
    overflow: visible;
}

.topnav a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px !important;
    color: #3f4032 !important;
    background:
        rgba(255, 252, 246, .92) !important;
    border:
        1px solid #d5c6b3 !important;
    border-radius: 11px !important;
    box-shadow:
        0 3px 10px rgba(83, 69, 50, .07);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap;
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.topnav a:hover {
    color: #fff !important;
    background:
        linear-gradient(
            135deg,
            #929271,
            #747557
        ) !important;
    border-color: #747557 !important;
    box-shadow:
        0 7px 17px rgba(91, 91, 65, .20);
    transform: translateY(-1px);
}

.topnav a.is-active,
.topnav a[aria-current="page"] {
    color: #fff !important;
    background:
        linear-gradient(
            135deg,
            #858665,
            #66674d
        ) !important;
    border-color: #66674d !important;
    box-shadow:
        0 8px 20px rgba(84, 85, 60, .24);
}

.user-menu {
    color: #414134 !important;
    font-weight: 650;
}

.user-menu a,
.user-menu button {
    color: #414134 !important;
    opacity: 1 !important;
}

.logout-link,
.account-panel .logout-item {
    color: #8a4846 !important;
    font-weight: 700;
}

.account-panel {
    color: #3f3c34 !important;
    background: #fffaf3 !important;
    border:
        1px solid #d7c8b4 !important;
    box-shadow:
        0 16px 42px rgba(73, 61, 44, .17);
}

.account-panel a {
    color: #3f3c34 !important;
    font-weight: 650;
}

.account-panel a:hover {
    color: #fff !important;
    background: #858665 !important;
}

.primary-button,
.secondary-button,
.danger-button,
.small-button {
    font-weight: 700 !important;
}

.panel,
.search-panel,
.table-card,
.form-card {
    color: #403d35;
}

table th {
    font-weight: 750;
    letter-spacing: -.1px;
}

table td {
    color: #49453d;
    font-weight: 480;
}

input,
select,
textarea {
    color: #37342e !important;
    font-weight: 500;
}

input::placeholder,
textarea::placeholder {
    color: #8a8176;
    opacity: 1;
}

label {
    color: #514c41;
    font-weight: 650;
}

/* تبلت و مانیتورهای کوچک */

@media (max-width: 1180px) {
    .topbar {
        flex-wrap: wrap;
        gap: 11px;
    }

    .brand {
        min-width: 210px;
    }

    .topnav {
        order: 3;
        width: 100%;
        flex-basis: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 3px 2px 9px;
        scrollbar-width: thin;
        scrollbar-color:
            #979776
            #eee4d6;
    }

    .topnav a {
        flex: 0 0 auto;
    }
}

/* موبایل */

@media (max-width: 720px) {
    .topbar {
        padding: 10px 13px;
    }

    .brand {
        min-width: 0;
        flex: 1;
    }

    .brand-logo {
        width: 45px;
        height: 45px;
    }

    .topnav {
        margin: 0 -2px;
    }

    .topnav a {
        min-height: 42px;
        padding: 9px 13px !important;
        font-size: 13px;
    }

    .meraki-brand-title {
        font-size: 23px;
        letter-spacing: 5px;
    }
}

/* === MERAKI_FONT_MENU_V087_END === */

/* === GARMENT_TYPES_STYLE_V088A_START === */

.garment-settings-panel {
    margin-top: 22px;
}

.garment-settings-description {
    margin: 7px 0 0;
    color: var(--muted);
    line-height: 1.9;
}

.garment-add-form {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 20px;
    padding: 17px;
    border: 1px solid var(--meraki-line);
    border-radius: 16px;
    background: rgba(255, 252, 246, .7);
}

.garment-type-list {
    display: grid;
    gap: 10px;
}

.garment-type-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--meraki-line);
    border-radius: 14px;
    background: rgba(255, 253, 249, .9);
}

.garment-rename-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.garment-rename-form input {
    flex: 1;
    min-width: 150px;
}

.garment-type-inactive {
    opacity: .62;
    background: rgba(238, 230, 220, .65);
}

@media (max-width: 720px) {
    .garment-add-form,
    .garment-type-item,
    .garment-rename-form {
        align-items: stretch;
        flex-direction: column;
    }

    .garment-add-form button,
    .garment-type-item button {
        width: 100%;
    }
}

/* === GARMENT_TYPES_STYLE_V088A_END === */