/**
 * Dashboards, account & Control Center (§21-§27, §41, §42).
 * Professional operational surfaces — not wp-admin skins, not SaaS clones.
 *//* App surfaces: main has no vertical padding — the shell owns layout. */
body.msi-app-surface .msi-main { padding: 0; min-height: 0; }

.msi-appshell {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 0;
        min-height: calc(100vh - var(--msi-header-h));
}
@media (max-width: 960px) { .msi-appshell { grid-template-columns: 1fr; } }
/* Sidebar */
.msi-appsidebar {
        border-inline-end: 1px solid var(--msi-border);
        background: var(--msi-sunken);
        padding: var(--msi-space-5) var(--msi-space-4);
        position: sticky;
        inset-block-start: var(--msi-header-h);
        align-self: start;
        min-height: calc(100vh - var(--msi-header-h));
}
body.msi-admin-bar .msi-appsidebar { inset-block-start: calc(var(--msi-header-h) + 32px); min-height: calc(100vh - var(--msi-header-h) - 32px); }
@media (max-width: 960px) {
        .msi-appsidebar {
                position: static;
                min-height: 0;
                border-inline-end: 0;
                border-block-end: 1px solid var(--msi-border);
        }
}

.msi-appnav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.msi-appnav__link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-radius: var(--msi-radius);
        color: var(--msi-text-2);
        font-size: var(--msi-fs-meta);
        font-weight: 500;
        transition: background var(--msi-dur-fast) var(--msi-ease), color var(--msi-dur-fast) var(--msi-ease);
}
.msi-appnav__link:hover { background: var(--msi-surface); color: var(--msi-text); }
.msi-appnav__link[aria-current="page"] {
        background: var(--msi-surface-2);
        color: var(--msi-gold);
        box-shadow: inset 2px 0 0 var(--msi-gold);
}
html[dir="rtl"] .msi-appnav__link[aria-current="page"] { box-shadow: inset -2px 0 0 var(--msi-gold); }
.msi-appnav__icon {
        display: inline-grid;
        place-items: center;
        width: 20px;
        color: var(--ms-color-text-quaternary);
        flex-shrink: 0;
}
.msi-appnav__link[aria-current="page"] .msi-appnav__icon { color: var(--msi-gold); }

.msi-appnav__group { margin-block-start: var(--msi-space-5); }
.msi-appnav__grouptitle {
        font-size: 10.5px;
        text-transform: uppercase;
        color: var(--ms-color-text-quaternary);
        padding-inline: 14px;
        margin-block: 0 var(--msi-space-2);
}
/* Main area */
.msi-appmain { padding: var(--msi-space-6) var(--msi-space-6) var(--msi-space-8); min-width: 0; }
@media (max-width: 640px) { .msi-appmain { padding-inline: var(--msi-space-4); } }

.msi-apphead {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--msi-space-4);
        flex-wrap: wrap;
        margin-block-end: var(--msi-space-5);
        padding-block-end: var(--msi-space-4);
        border-block-end: 1px solid var(--msi-border);
}
.msi-apphead__title { margin: 0; font-size: var(--msi-fs-h1); }
.msi-apphead__desc { margin: 4px 0 0; color: var(--msi-text-2); font-size: var(--msi-fs-meta); max-inline-size: 64ch; }
.msi-apphead__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.msi-appgrid { display: grid; gap: var(--msi-space-5); }
.msi-appgrid--stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.msi-appgrid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .msi-appgrid--2 { grid-template-columns: 1fr; } }
/* Control Center header strip (§27) */
.msi-cc-top {
        display: flex;
        align-items: center;
        gap: var(--msi-space-3);
        padding: 10px 16px;
        background: var(--msi-sunken);
        border: 1px solid var(--msi-border);
        border-radius: var(--msi-radius-lg);
        margin-block-end: var(--msi-space-5);
        font-size: var(--msi-fs-caption);
        color: var(--ms-color-text-quaternary);
        flex-wrap: wrap;
}
.msi-cc-top__dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--msi-green);
        box-shadow: 0 0 0 3px var(--msi-green-soft);
}
.msi-cc-top__dot.is-off { background: var(--msi-red); box-shadow: 0 0 0 3px var(--msi-red-soft); }

.msi-ccgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--msi-space-4);
}
.msi-cccard {
        display: grid;
        gap: 6px;
        padding: var(--msi-space-4) var(--msi-space-5);
        background: var(--msi-surface);
        border: 1px solid var(--msi-border);
        border-radius: var(--msi-radius-lg);
        color: var(--msi-text);
        transition: border-color var(--msi-dur-fast) var(--msi-ease), transform var(--msi-dur-fast) var(--msi-ease);
}
.msi-cccard:hover { border-color: var(--msi-border-strong); transform: translateY(-1px); color: var(--msi-text); }
.msi-cccard__icon { color: var(--msi-gold); font-size: 1.1rem; }
.msi-cccard__label { font-weight: 600; font-family: var(--msi-font-display); }
.msi-cccard__desc { font-size: var(--msi-fs-caption); color: var(--ms-color-text-quaternary); }
/* Section nav inside app pages (pill tabs) */
.msi-segpills { display: flex; gap: 6px; flex-wrap: wrap; margin-block-end: var(--msi-space-5); }
.msi-segpill {
        padding: 7px 14px;
        border-radius: var(--msi-radius-pill);
        border: 1px solid var(--msi-border);
        background: transparent;
        color: var(--msi-text-2);
        font-size: var(--msi-fs-meta);
        font-weight: 500;
}
.msi-segpill:hover { color: var(--msi-text); border-color: var(--msi-border-strong); }
.msi-segpill.is-active { background: var(--msi-gold-soft); border-color: var(--msi-gold); color: var(--msi-gold); }
/* Row lists in dashboards */
.msi-rows { display: grid; gap: var(--msi-space-3); }
.msi-rowcard {
        display: flex;
        align-items: center;
        gap: var(--msi-space-4);
        padding: var(--msi-space-3) var(--msi-space-4);
        background: var(--msi-surface);
        border: 1px solid var(--msi-border);
        border-radius: var(--msi-radius);
        flex-wrap: wrap;
}
.msi-rowcard__main { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.msi-rowcard__title { font-weight: 600; font-size: var(--msi-fs-meta); }
.msi-rowcard__sub { font-size: var(--msi-fs-caption); color: var(--ms-color-text-quaternary); }
.msi-rowcard__aside { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Activity feed */
.msi-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.msi-activity__item {
        display: flex;
        gap: 12px;
        padding: 10px 0;
        border-block-end: 1px solid var(--msi-border);
        font-size: var(--msi-fs-meta);
        align-items: baseline;
}
.msi-activity__time { font-family: var(--msi-font-data); color: var(--ms-color-text-quaternary); font-size: var(--msi-fs-caption); flex-shrink: 0; min-width: 92px; }
.msi-activity__text { color: var(--msi-text-2); }
.msi-activity__text strong { color: var(--msi-text); font-weight: 600; }
/* Auth screens (§41) */
.msi-auth {
        min-height: calc(100vh - var(--msi-header-h));
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--msi-space-8);
        padding-block: var(--msi-space-8);
}
@media (max-width: 900px) { .msi-auth { grid-template-columns: 1fr; padding-block: var(--msi-space-6); } }
.msi-auth__panel {
        width: min(440px, 100%);
        margin-inline: auto;
        background: var(--msi-surface);
        border: 1px solid var(--msi-border);
        border-radius: var(--msi-radius-lg);
        padding: var(--msi-space-6);
        box-shadow: var(--msi-shadow-soft);
}
.msi-auth__title { margin: 0 0 6px; font-size: var(--msi-fs-h1); }
.msi-auth__sub { color: var(--msi-text-2); font-size: var(--msi-fs-meta); margin: 0 0 var(--msi-space-5); }
.msi-auth__foot { margin-block-start: var(--msi-space-5); font-size: var(--msi-fs-meta); color: var(--msi-text-2); text-align: center; }
.msi-auth__aside { display: grid; gap: var(--msi-space-5); align-content: center; }
.msi-auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--msi-space-3); }
.msi-auth__points li { display: flex; gap: 12px; align-items: flex-start; color: var(--msi-text-2); font-size: var(--msi-fs-meta); }
.msi-auth__points .msi-icon { color: var(--msi-green); flex-shrink: 0; margin-block-start: 2px; }

.msi-oauthbtn {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 12px;
        border-radius: var(--msi-radius);
        border: 1px solid var(--msi-border-strong);
        background: var(--msi-surface-2);
        color: var(--msi-text);
        font-weight: 500;
        cursor: pointer;
        margin-block-end: var(--msi-space-4);
        transition: border-color var(--msi-dur-fast) var(--msi-ease);
}
.msi-oauthbtn:hover { border-color: var(--msi-text-2); }
.msi-auth__divider {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--ms-color-text-quaternary);
        font-size: var(--msi-fs-caption);
        margin-block: var(--msi-space-4);
        text-transform: uppercase;
}
.msi-auth__divider::before, .msi-auth__divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--msi-border);
}
/* Membership (§40) */
.msi-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--msi-space-5); align-items: stretch; }
.msi-plan {
        display: grid;
        gap: var(--msi-space-4);
        align-content: start;
        background: var(--msi-surface);
        border: 1px solid var(--msi-border);
        border-radius: var(--msi-radius-lg);
        padding: var(--msi-space-5);
        position: relative;
}
.msi-plan--current { border-color: var(--msi-gold); box-shadow: 0 0 0 1px var(--msi-gold), var(--msi-shadow-soft); }
.msi-plan__badge { position: absolute; inset-block-start: -10px; inset-inline-start: 18px; }
.msi-plan__name { margin: 0; font-size: var(--msi-fs-h3); }
.msi-plan__price { font-family: var(--msi-font-display); font-size: 1.9rem; font-weight: 700; }
.msi-plan__price small { font-size: var(--msi-fs-meta); color: var(--ms-color-text-quaternary); font-weight: 400; }
.msi-plan__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--msi-fs-meta); color: var(--msi-text-2); }
.msi-plan__features li { display: flex; gap: 8px; align-items: flex-start; }
.msi-plan__features .msi-icon { color: var(--msi-green); flex-shrink: 0; margin-block-start: 3px; }
/* Settings/rows forms in dashboards */
.msi-settingrow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--msi-space-4);
        padding: var(--msi-space-4) 0;
        border-block-end: 1px solid var(--msi-border);
        flex-wrap: wrap;
}
.msi-settingrow__info { flex: 1; min-width: 220px; }
.msi-settingrow__title { font-weight: 600; font-size: var(--msi-fs-meta); margin: 0 0 2px; }
.msi-settingrow__desc { font-size: var(--msi-fs-caption); color: var(--ms-color-text-quaternary); margin: 0; }
/* Notifications center */
.msi-notiflist { display: grid; gap: 8px; }
.msi-notif {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: var(--msi-space-4);
        background: var(--msi-surface);
        border: 1px solid var(--msi-border);
        border-radius: var(--msi-radius-lg);
}
.msi-notif.is-read { opacity: 0.62; }
.msi-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--msi-gold); margin-block-start: 7px; flex-shrink: 0; }
.msi-notif.is-read .msi-notif__dot { background: var(--msi-border-strong); }
.msi-notif__body { flex: 1; }
.msi-notif__text { margin: 0 0 2px; font-weight: 500; font-size: var(--msi-fs-meta); }
.msi-notif__desc { margin: 0 0 4px; color: var(--msi-text-2); font-size: var(--msi-fs-meta); }
.msi-notif__time { font-size: var(--msi-fs-caption); color: var(--ms-color-text-quaternary); font-family: var(--msi-font-data); }
.msi-notif-panel .msi-notif { border: 0; border-radius: 0; padding: 12px; background: transparent; }
.msi-notif-panel .msi-notif:hover { background: var(--msi-surface-2); }
/* Library (§25) */
.msi-libraryfilters {
        display: flex;
        gap: var(--msi-space-3);
        flex-wrap: wrap;
        margin-block-end: var(--msi-space-5);
}
/* Editor (§28) *//* Data viz (§30) — charts render via msi-charts.js */
.msi-chart { width: 100%; }
.msi-chart svg { display: block; width: 100%; height: auto; }
.msi-chart__label { font-family: var(--msi-font-data); font-size: 9px; fill: var(--ms-color-text-quaternary); }
.msi-chart__axis { stroke: var(--msi-border); stroke-width: 1; }
.msi-sparkline { stroke: var(--msi-gold); stroke-width: 1.6; fill: none; }
.msi-sparkline-area { fill: var(--msi-gold-soft); stroke: none; }