:root {
    --ms-layout-font-family:
        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ms-layout-heading-font-family:
        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ms-layout-base-font-size: 14px;
    --ms-layout-heading-scale: 1;
    --ms-layout-line-height: 1.45;
    --ms-layout-letter-spacing: 0px;
    --ms-layout-form-radius: 10px;
    --ms-layout-card-radius: 14px;
    --ms-layout-button-radius: 9px;
    --ms-layout-modal-radius: 16px;
    --ms-layout-image-radius: 12px;
    --ms-layout-sidebar-width: 252px;
    --ms-layout-topbar-height: 70px;
    --ms-layout-content-max-width: 1920px;
    --ms-layout-density: 1;
    --ms-layout-icon-size: 20px;
    --ms-layout-image-scale: 1;
    --ms-layout-logo-width: 132px;
    --ms-layout-logo-height: 42px;
    --ms-layout-logo-object-fit: contain;
    --ms-layout-animation-factor: 1;

    --ms-theme-bg: #f5f8fc;
    --ms-theme-surface: #ffffff;
    --ms-theme-surface-soft: #eef4fb;
    --ms-theme-text: #122033;
    --ms-theme-muted: #64748b;
    --ms-theme-border: #d6e0ec;
    --ms-theme-accent: #8fb8ff;
    --ms-theme-sidebar: #fbfdff;
    --ms-theme-topbar: #ffffff;
}

html[data-ms-layout-studio="active"],
html[data-ms-layout-studio="active"] body {
    font-family: var(--ms-layout-font-family);
    font-size: var(--ms-layout-base-font-size);
    line-height: var(--ms-layout-line-height);
    letter-spacing: var(--ms-layout-letter-spacing);
}

html[data-ms-layout-studio="active"] h1,
html[data-ms-layout-studio="active"] h2,
html[data-ms-layout-studio="active"] h3,
html[data-ms-layout-studio="active"] h4,
html[data-ms-layout-studio="active"] h5,
html[data-ms-layout-studio="active"] h6 {
    font-family: var(--ms-layout-heading-font-family);
}

html[data-ms-layout-studio="active"] .sidebar {
    width: var(--ms-layout-sidebar-width);
    background: var(--ms-theme-sidebar);
}

html[data-ms-layout-studio="active"] .topbar {
    min-height: var(--ms-layout-topbar-height);
    background: var(--ms-theme-topbar);
}

html[data-ms-layout-studio="active"] input,
html[data-ms-layout-studio="active"] select,
html[data-ms-layout-studio="active"] textarea {
    border-radius: var(--ms-layout-form-radius);
}

html[data-ms-layout-studio="active"] button {
    border-radius: var(--ms-layout-button-radius);
}

html[data-ms-layout-studio="active"] img {
    border-radius: var(--ms-layout-image-radius);
}

html[data-ms-layout-studio="active"] .nav-icon {
    font-size: var(--ms-layout-icon-size);
}

html[data-ms-layout-studio="active"] .sidebar .brand img,
html[data-ms-layout-studio="active"] .sidebar .logo img,
html[data-ms-layout-studio="active"] .sidebar img.logo,
html[data-ms-layout-studio="active"] .brand-logo img {
    width: var(--ms-layout-logo-width);
    height: var(--ms-layout-logo-height);
    object-fit: var(--ms-layout-logo-object-fit);
}

html[data-ms-layout-studio="active"] body,
html[data-ms-layout-studio="active"] .content,
html[data-ms-layout-studio="active"] .main,
html[data-ms-layout-studio="active"] .main-content,
html[data-ms-layout-studio="active"] .workspace {
    background-color: var(--ms-theme-bg);
    color: var(--ms-theme-text);
}

html[data-ms-layout-studio="active"] .card,
html[data-ms-layout-studio="active"] .panel,
html[data-ms-layout-studio="active"] .widget,
html[data-ms-layout-studio="active"] article {
    border-radius: var(--ms-layout-card-radius);
}

.ms-theme-layout-route .main-content,
.ms-theme-layout-route .content,
.ms-theme-layout-route main,
.ms-theme-layout-route .workspace {
    overflow: auto;
}

.ms-theme-layout-studio {
    width: min(100%, var(--ms-layout-content-max-width));
    min-height: 100%;
    margin: 0 auto;
    padding:
        calc(24px * var(--ms-layout-density))
        calc(28px * var(--ms-layout-density))
        calc(52px * var(--ms-layout-density));
    color: var(--ms-theme-text);
}

.ms-tl-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.ms-tl-header h1 {
    margin: 5px 0 8px;
    font-size: calc(32px * var(--ms-layout-heading-scale));
    line-height: 1.1;
}

.ms-tl-header p {
    max-width: 720px;
    margin: 0;
    color: var(--ms-theme-muted);
    font-size: 14px;
}

.ms-tl-kicker,
.ms-tl-section-kicker {
    color: var(--ms-c-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.ms-tl-current-theme {
    min-width: 210px;
    padding: 14px 18px;
    border: 1px solid var(--ms-theme-border);
    border-radius: var(--ms-layout-card-radius);
    background: var(--ms-theme-surface);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.ms-tl-current-theme small,
.ms-tl-current-theme strong {
    display: block;
}

.ms-tl-current-theme small {
    margin-bottom: 4px;
    color: var(--ms-theme-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.ms-tl-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 24px;
    padding: 4px;
    border: 1px solid var(--ms-theme-border);
    border-radius: calc(var(--ms-layout-button-radius) + 4px);
    background: var(--ms-theme-surface);
}

.ms-tl-tabs button {
    min-width: 150px;
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    color: var(--ms-theme-muted);
    font-weight: 700;
    cursor: pointer;
}

.ms-tl-tabs button[aria-selected="true"] {
    background: var(--ms-c-primary);
    color: #fff;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--ms-c-primary) 28%, transparent);
}

.ms-tl-mode-panel,
.ms-tl-theme-section,
.ms-tl-layout-controls > section,
.ms-tl-live-preview {
    border: 1px solid var(--ms-theme-border);
    border-radius: var(--ms-layout-card-radius);
    background: var(--ms-theme-surface);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.055);
}

.ms-tl-mode-panel {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 22px;
    padding: 22px;
}

.ms-tl-mode-panel h2,
.ms-tl-theme-section h2,
.ms-tl-layout-controls h2,
.ms-tl-live-preview h2 {
    margin: 4px 0 6px;
    font-size: calc(19px * var(--ms-layout-heading-scale));
}

.ms-tl-mode-panel p,
.ms-tl-live-preview p {
    margin: 0;
    color: var(--ms-theme-muted);
    font-size: 13px;
}

.ms-tl-segmented {
    align-self: center;
    display: flex;
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--ms-theme-border);
    border-radius: calc(var(--ms-layout-button-radius) + 3px);
    background: var(--ms-theme-surface-soft);
}

.ms-tl-segmented button {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--ms-theme-muted);
    font-weight: 700;
    cursor: pointer;
}

.ms-tl-segmented button.is-active {
    background: var(--ms-theme-surface);
    color: var(--ms-c-primary);
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.1);
}

.ms-tl-auto-settings {
    grid-column: 1 / -1;
    display: none;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--ms-theme-border);
}

.ms-tl-auto-settings.is-visible {
    display: grid;
}

.ms-tl-auto-settings label {
    display: grid;
    gap: 7px;
    color: var(--ms-theme-muted);
    font-size: 11px;
    font-weight: 700;
}

.ms-tl-auto-settings input,
.ms-tl-auto-settings select {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--ms-theme-border);
    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
}

.ms-tl-theme-section {
    margin-top: 18px;
    padding: 22px;
}

.ms-tl-theme-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.ms-tl-theme-section > header > strong {
    color: var(--ms-theme-muted);
    font-size: 12px;
}

.ms-tl-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 14px;
}

.ms-tl-theme-card {
    position: relative;
    display: grid;
    gap: 12px;
    min-height: 245px;
    padding: 12px;
    border: 1px solid var(--ms-theme-border);
    border-radius: var(--ms-layout-card-radius);
    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    text-align: left;
    cursor: pointer;
    transition:
        transform calc(160ms * var(--ms-layout-animation-factor)),
        border-color calc(160ms * var(--ms-layout-animation-factor)),
        box-shadow calc(160ms * var(--ms-layout-animation-factor));
}

.ms-tl-theme-card:hover {
    transform: translateY(-3px);
    border-color: var(--ms-c-primary);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.ms-tl-theme-card.is-active {
    border-color: var(--ms-c-primary);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--ms-c-primary) 22%, transparent),
        0 15px 32px rgba(15, 23, 42, 0.1);
}

.ms-tl-theme-preview {
    position: relative;
    display: block;
    height: 124px;
    overflow: hidden;
    border: 1px solid var(--preview-border);
    border-radius: calc(var(--ms-layout-card-radius) - 3px);
    background: var(--preview-bg);
}

.ms-tl-preview-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 27%;
    background: var(--preview-surface);
    border-right: 1px solid var(--preview-border);
}

.ms-tl-preview-topbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 27%;
    height: 25%;
    background: var(--preview-surface);
    border-bottom: 1px solid var(--preview-border);
}

.ms-tl-preview-card {
    position: absolute;
    top: 39%;
    height: 40%;
    border: 1px solid var(--preview-border);
    border-radius: 6px;
    background: var(--preview-surface);
}

.ms-tl-preview-card-a {
    left: 34%;
    width: 25%;
}

.ms-tl-preview-card-b {
    left: 64%;
    width: 28%;
}

.ms-tl-preview-line {
    position: absolute;
    bottom: 10%;
    left: 34%;
    width: 57%;
    height: 5px;
    border-radius: 10px;
    background: var(--preview-primary);
}

.ms-tl-theme-info {
    display: grid;
    gap: 4px;
}

.ms-tl-theme-info strong {
    font-size: 14px;
}

.ms-tl-theme-info small {
    min-height: 32px;
    color: var(--ms-theme-muted);
    font-size: 11px;
    line-height: 1.4;
}

.ms-tl-palette {
    display: flex;
    gap: 5px;
    margin-top: 4px;
}

.ms-tl-palette i {
    width: 18px;
    height: 18px;
    border: 1px solid color-mix(in srgb, var(--palette-color) 60%, #808080);
    border-radius: 50%;
    background: var(--palette-color);
}

.ms-tl-theme-action {
    justify-self: start;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ms-c-primary) 11%, transparent);
    color: var(--ms-c-primary);
    font-size: 10px;
    font-weight: 800;
}

.ms-tl-layout-panel {
    display: grid;
    grid-template-columns: minmax(320px, 430px) minmax(520px, 1fr);
    gap: 18px;
    align-items: start;
}

.ms-tl-layout-controls {
    display: grid;
    gap: 14px;
}

.ms-tl-layout-controls > section {
    padding: 19px;
}

.ms-tl-layout-controls > section > header {
    margin-bottom: 16px;
}

.ms-tl-control {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}

.ms-tl-control > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ms-theme-muted);
    font-size: 11px;
}

.ms-tl-control > span strong {
    color: var(--ms-theme-text);
}

.ms-tl-control output {
    color: var(--ms-c-primary);
    font-weight: 800;
}

.ms-tl-control input[type="range"] {
    width: 100%;
    accent-color: var(--ms-c-primary);
}

.ms-tl-control select,
.ms-tl-control-text input {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--ms-theme-border);
    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
}

.ms-tl-reset-actions button {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ms-theme-border);
    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    font-weight: 750;
    cursor: pointer;
}

.ms-tl-live-preview {
    position: sticky;
    top: 18px;
    padding: 22px;
}

.ms-tl-demo-window {
    display: grid;
    grid-template-columns: 180px 1fr;
    min-height: 520px;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid var(--ms-theme-border);
    border-radius: var(--ms-layout-card-radius);
    background: var(--ms-theme-bg);
}

.ms-tl-demo-window > aside {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px 13px;
    border-right: 1px solid var(--ms-theme-border);
    background: var(--ms-theme-sidebar);
}

.ms-tl-demo-window > aside strong {
    margin-bottom: 20px;
    color: var(--ms-c-primary);
    font-size: 13px;
}

.ms-tl-demo-window > aside span {
    padding: 9px 10px;
    border-radius: var(--ms-layout-button-radius);
    color: var(--ms-theme-muted);
    font-size: 11px;
}

.ms-tl-demo-window > aside span.is-active {
    background: color-mix(in srgb, var(--ms-c-primary) 12%, transparent);
    color: var(--ms-c-primary);
    font-weight: 800;
}

.ms-tl-demo-window > div > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid var(--ms-theme-border);
    background: var(--ms-theme-topbar);
}

.ms-tl-demo-window > div > header button,
.ms-tl-demo-window main section > button {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    background: var(--ms-c-primary);
    color: #fff;
    font-weight: 750;
}

.ms-tl-demo-window main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
    padding: 17px;
}

.ms-tl-demo-window article,
.ms-tl-demo-window main section {
    padding: 16px;
    border: 1px solid var(--ms-theme-border);
    border-radius: var(--ms-layout-card-radius);
    background: var(--ms-theme-surface);
}

.ms-tl-demo-window article small,
.ms-tl-demo-window article strong,
.ms-tl-demo-window article span {
    display: block;
}

.ms-tl-demo-window article small {
    color: var(--ms-theme-muted);
    font-size: 9px;
}

.ms-tl-demo-window article strong {
    margin: 10px 0 4px;
    color: var(--ms-c-primary);
    font-size: 28px;
}

.ms-tl-demo-window article span {
    color: var(--ms-theme-muted);
    font-size: 10px;
}

.ms-tl-demo-window main section {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
}

.ms-tl-demo-window main section label {
    display: grid;
    gap: 6px;
    color: var(--ms-theme-muted);
    font-size: 10px;
}

.ms-tl-demo-window main section input,
.ms-tl-demo-window main section select {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--ms-theme-border);
    background: var(--ms-theme-surface-soft);
    color: var(--ms-theme-text);
}

@media (max-width: 1180px) {
    .ms-tl-layout-panel {
        grid-template-columns: 1fr;
    }

    .ms-tl-live-preview {
        position: static;
    }
}

@media (max-width: 860px) {
    .ms-theme-layout-studio {
        padding: 18px;
    }

    .ms-tl-header,
    .ms-tl-mode-panel {
        grid-template-columns: 1fr;
        display: grid;
    }

    .ms-tl-current-theme {
        width: 100%;
    }

    .ms-tl-auto-settings {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .ms-tl-tabs,
    .ms-tl-tabs button {
        width: 100%;
    }

    .ms-tl-theme-grid,
    .ms-tl-auto-settings {
        grid-template-columns: 1fr;
    }

    .ms-tl-demo-window {
        grid-template-columns: 1fr;
    }

    .ms-tl-demo-window > aside {
        display: none;
    }
}

/* =====================================================================
   THEME-012A — Native Color Studio
   ===================================================================== */

.ms-tl-color-panel {
    display: grid;
    gap: 18px;
}

.ms-tl-color-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 18px;
    border: 1px solid var(--ms-border-default, rgba(137, 166, 202, .22));
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-color-header h2,
.ms-tl-color-group h3 {
    margin: 4px 0 5px;
}

.ms-tl-color-header p {
    max-width: 740px;
    margin: 0;
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-color-theme-status {
    display: grid;
    min-width: 260px;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--ms-bg-control, #0b2035);
}

.ms-tl-color-theme-status small {
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-color-theme-status span {
    color: var(--ms-state-success, #27b46e);
    font-size: 11px;
    font-weight: 800;
}

.ms-tl-color-theme-status span.is-protected {
    color: var(--ms-state-warning, #f4bd2b);
}

.ms-tl-color-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ms-tl-color-toolbar button,
.ms-tl-color-control-heading button {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--ms-border-default, rgba(137, 166, 202, .22));
    border-radius: var(--ms-layout-button-radius, 9px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    cursor: pointer;
}

.ms-tl-color-toolbar button.is-primary {
    border-color: var(--ms-c-primary, #2d8cff);
    background: var(--ms-c-primary, #2d8cff);
    color: #fff;
    font-weight: 800;
}

.ms-tl-color-groups {
    display: grid;
    gap: 14px;
}

.ms-tl-color-group {
    padding: 16px;
    border: 1px solid var(--ms-border-default, rgba(137, 166, 202, .22));
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-color-group > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.ms-tl-color-group > header small {
    color: var(--ms-text-muted, #8394aa);
}

.ms-tl-color-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(250px, 1fr)
    );
    gap: 10px;
}

.ms-tl-color-control {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ms-divider, rgba(137, 166, 202, .16));
    border-radius: 11px;
    background: var(--ms-bg-control, #0b2035);
}

.ms-tl-color-control-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ms-tl-color-control-heading > div {
    display: grid;
    gap: 3px;
}

.ms-tl-color-control-heading small {
    color: var(--ms-text-muted, #8394aa);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}

.ms-tl-color-control-heading button {
    min-height: 27px;
    padding: 4px 7px;
    font-size: 10px;
}

.ms-tl-color-input-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px;
}

.ms-tl-color-input-row input[type="color"] {
    width: 44px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--ms-border-default, rgba(137, 166, 202, .22));
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.ms-tl-color-input-row input[type="text"] {
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--ms-border-default, rgba(137, 166, 202, .22));
    border-radius: 8px;
    background: var(--ms-bg-panel, #10263d);
    color: var(--ms-text-primary, #f5f8ff);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 900px) {
    .ms-tl-color-header {
        flex-direction: column;
    }

    .ms-tl-color-theme-status {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =====================================================================
   THEME-012B — Native Typography Studio
   ===================================================================== */

.ms-tl-typography-panel {
    display: grid;
    gap: 18px;
}

.ms-tl-typography-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 18px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-typography-header h2,
.ms-tl-typography-presets h3,
.ms-tl-typography-controls h3,
.ms-tl-typography-preview h3 {
    margin: 4px 0 5px;
}

.ms-tl-typography-header p,
.ms-tl-typography-preview > header p {
    max-width: 760px;
    margin: 0;
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-typography-header > button {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-button-radius, 9px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    cursor: pointer;
}

.ms-tl-typography-presets {
    padding: 16px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-typography-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 9px;
    margin-top: 13px;
}

.ms-tl-typography-preset {
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 12px;
    border: 1px solid var(--ms-divider, rgba(137,166,202,.16));
    border-radius: 10px;
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    text-align: left;
    cursor: pointer;
}

.ms-tl-typography-preset:hover {
    border-color: var(--ms-c-primary, #2d8cff);
    background: var(--ms-bg-control-hover, #14304d);
}

.ms-tl-typography-preset small {
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-typography-workbench {
    display: grid;
    grid-template-columns: minmax(320px, 430px) minmax(420px, 1fr);
    gap: 14px;
    align-items: start;
}

.ms-tl-typography-controls {
    display: grid;
    gap: 14px;
}

.ms-tl-typography-controls > section,
.ms-tl-typography-preview {
    padding: 16px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-typography-controls .ms-tl-control {
    margin-top: 12px;
}

.ms-tl-typography-preview {
    position: sticky;
    top: 82px;
}

.ms-tl-type-sample {
    display: grid;
    gap: 13px;
    margin-top: 15px;
    padding: 22px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-workspace, #0a1d31);
    font-family: var(--ms-layout-font-family);
    font-size: var(--ms-layout-base-font-size);
    line-height: var(--ms-layout-line-height);
    letter-spacing: var(--ms-layout-letter-spacing);
}

.ms-tl-type-sample h1,
.ms-tl-type-sample h2 {
    margin: 0;
    font-family: var(--ms-layout-heading-font-family);
}

.ms-tl-type-sample h1 {
    font-size: calc(30px * var(--ms-layout-heading-scale));
}

.ms-tl-type-sample h2 {
    font-size: calc(20px * var(--ms-layout-heading-scale));
}

.ms-tl-type-sample p {
    margin: 0;
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-type-eyebrow {
    color: var(--ms-theme-accent, #f4bd2b);
    font-size: .72em;
    font-weight: 850;
    letter-spacing: .12em;
}

.ms-tl-type-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.ms-tl-type-kpis article {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-type-kpis small,
.ms-tl-type-kpis span {
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-type-kpis strong {
    font-size: 1.35em;
}

.ms-tl-type-sample label {
    display: grid;
    gap: 6px;
    font-weight: 750;
}

.ms-tl-type-sample input {
    height: 39px;
    padding: 0 11px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-form-radius, 10px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    font: inherit;
}

.ms-tl-type-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ms-tl-type-actions button {
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-button-radius, 9px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    font: inherit;
}

.ms-tl-type-actions button.is-primary {
    border-color: var(--ms-c-primary, #2d8cff);
    background: var(--ms-c-primary, #2d8cff);
    color: #fff;
    font-weight: 800;
}

@media (max-width: 1050px) {
    .ms-tl-typography-workbench {
        grid-template-columns: 1fr;
    }

    .ms-tl-typography-preview {
        position: static;
    }

    .ms-tl-typography-preset-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .ms-tl-typography-header {
        flex-direction: column;
    }

    .ms-tl-typography-preset-grid,
    .ms-tl-type-kpis {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   THEME-012C — Native Component Studio
   ===================================================================== */

.ms-tl-component-panel {
    display: grid;
    gap: 18px;
}

.ms-tl-component-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 18px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-component-header h2,
.ms-tl-component-presets h3,
.ms-tl-component-controls h3,
.ms-tl-component-preview h3 {
    margin: 4px 0 5px;
}

.ms-tl-component-header p,
.ms-tl-component-preview > header p {
    max-width: 760px;
    margin: 0;
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-component-header > button {
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-button-radius, 9px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    cursor: pointer;
}

.ms-tl-component-presets {
    padding: 16px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-component-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 9px;
    margin-top: 13px;
}

.ms-tl-component-preset {
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 12px;
    border: 1px solid var(--ms-divider, rgba(137,166,202,.16));
    border-radius: var(--ms-component-card-radius, 14px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--ms-component-card-shadow);
}

.ms-tl-component-preset:hover {
    transform: translateY(
        calc(var(--ms-component-hover-lift, 2px) * -1)
    );
    filter: brightness(
        var(--ms-component-hover-brightness, 1.06)
    );
}

.ms-tl-component-preset small {
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-component-workbench {
    display: grid;
    grid-template-columns: minmax(330px, 440px) minmax(430px, 1fr);
    gap: 14px;
    align-items: start;
}

.ms-tl-component-controls {
    display: grid;
    gap: 14px;
}

.ms-tl-component-controls > section,
.ms-tl-component-preview {
    padding: 16px;
    border:
        var(--ms-component-card-border-width, 1px)
        solid
        var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
    box-shadow: var(--ms-component-card-shadow);
    opacity: var(--ms-component-card-opacity, 1);
}

.ms-tl-component-controls .ms-tl-control {
    margin-top: 12px;
}

.ms-tl-component-preview {
    position: sticky;
    top: 82px;
}

.ms-tl-component-demo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
    padding: 18px;
    border-radius: var(--ms-component-card-radius, 14px);
    background: var(--ms-bg-workspace, #0a1d31);
}

.ms-tl-component-demo-card {
    display: grid;
    gap: 5px;
    padding: 15px;
    border:
        var(--ms-component-card-border-width, 1px)
        solid
        var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
    box-shadow: var(--ms-component-card-shadow);
    opacity: var(--ms-component-card-opacity, 1);
    transition:
        transform .18s ease,
        filter .18s ease;
}

.ms-tl-component-demo-card:hover {
    transform: translateY(
        calc(var(--ms-component-hover-lift, 2px) * -1)
    );
    filter: brightness(
        var(--ms-component-hover-brightness, 1.06)
    );
}

.ms-tl-component-demo-card small,
.ms-tl-component-demo-card span {
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-component-demo-card strong {
    font-size: 1.45em;
}

.ms-tl-component-demo-form {
    display: grid;
    grid-column: 1 / -1;
    gap: 12px;
    padding: 15px;
    border:
        var(--ms-component-card-border-width, 1px)
        solid
        var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
    box-shadow: var(--ms-component-card-shadow);
}

.ms-tl-component-demo-form label {
    display: grid;
    gap: 6px;
    font-weight: 750;
}

.ms-tl-component-demo-form input,
.ms-tl-component-demo-form select,
.ms-tl-component-demo-form textarea {
    min-width: 0;
    min-height: var(--ms-component-input-height, 40px);
    padding: 8px 11px;
    border:
        var(--ms-component-input-border-width, 1px)
        solid
        var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-input-radius, 10px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    font: inherit;
}

.ms-tl-component-demo-form textarea {
    min-height: 76px;
    resize: vertical;
}

.ms-tl-component-demo-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ms-tl-component-demo-actions button {
    min-height: var(--ms-component-button-height, 38px);
    padding: 7px 14px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-button-radius, 9px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    box-shadow: var(--ms-component-button-shadow);
    cursor: pointer;
}

.ms-tl-component-demo-actions button.is-primary {
    border-color: var(--ms-c-primary, #2d8cff);
    background: var(--ms-c-primary, #2d8cff);
    color: #fff;
    font-weight: 800;
}

.ms-tl-component-demo-badges {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 8px;
}

.ms-tl-component-demo-badges span {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.ms-tl-component-demo-badges .is-success {
    background: rgba(39,180,110,.16);
    color: var(--ms-state-success, #27b46e);
}

.ms-tl-component-demo-badges .is-warning {
    background: rgba(244,189,43,.16);
    color: var(--ms-state-warning, #f4bd2b);
}

.ms-tl-component-demo-badges .is-danger {
    background: rgba(228,88,88,.16);
    color: var(--ms-state-danger, #e45858);
}

@media (max-width: 1050px) {
    .ms-tl-component-workbench {
        grid-template-columns: 1fr;
    }

    .ms-tl-component-preview {
        position: static;
    }

    .ms-tl-component-preset-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .ms-tl-component-header {
        flex-direction: column;
    }

    .ms-tl-component-preset-grid,
    .ms-tl-component-demo {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   THEME-012D1 — Native Master Icon Center Viewer
   ===================================================================== */

.ms-tl-icon-panel {
    display: grid;
    gap: 18px;
}

.ms-tl-icon-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 18px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-icon-header h2 {
    margin: 4px 0 5px;
}

.ms-tl-icon-header p {
    max-width: 760px;
    margin: 0;
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-icon-status {
    display: grid;
    min-width: 220px;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--ms-bg-control, #0b2035);
}

.ms-tl-icon-status small {
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-icon-status span {
    color: var(--ms-state-success, #27b46e);
    font-size: 11px;
    font-weight: 800;
}

.ms-tl-icon-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-icon-search {
    display: grid;
    grid-template-columns: 25px minmax(180px, 1fr);
    align-items: center;
    flex: 1;
    min-width: 220px;
    min-height: 40px;
    padding: 0 10px;
    border:
        var(--ms-component-input-border-width, 1px)
        solid
        var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-input-radius, 10px);
    background: var(--ms-bg-control, #0b2035);
}

.ms-tl-icon-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ms-text-primary, #f5f8ff);
    font: inherit;
}

.ms-tl-icon-filters {
    display: flex;
    gap: 5px;
}

.ms-tl-icon-filters button {
    min-height: 36px;
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: var(--ms-component-button-radius, 9px);
    background: transparent;
    color: var(--ms-text-secondary, #b9c7da);
    cursor: pointer;
}

.ms-tl-icon-filters button.is-active {
    border-color: rgba(45,140,255,.38);
    background: rgba(45,140,255,.14);
    color: var(--ms-c-primary, #2d8cff);
}

.ms-tl-icon-result-count {
    color: var(--ms-text-muted, #8394aa);
    font-size: 11px;
    white-space: nowrap;
}

.ms-tl-icon-workbench {
    display: grid;
    grid-template-columns:
        minmax(520px, 1fr)
        minmax(270px, 340px);
    gap: 14px;
    align-items: start;
}

.ms-tl-icon-library,
.ms-tl-icon-preview {
    min-width: 0;
    padding: 15px;
    border:
        var(--ms-component-card-border-width, 1px)
        solid
        var(--ms-border-default, rgba(137,166,202,.22));
    border-radius: var(--ms-component-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-icon-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(145px, 1fr)
    );
    gap: 10px;
}

.ms-tl-icon-card {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--ms-divider, rgba(137,166,202,.16));
    border-radius: var(--ms-component-card-radius, 12px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    text-align: left;
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        filter .16s ease;
}

.ms-tl-icon-card:hover {
    transform: translateY(-2px);
    border-color: rgba(45,140,255,.48);
    filter: brightness(1.06);
}

.ms-tl-icon-card.is-selected {
    border-color: var(--ms-c-primary, #2d8cff);
    box-shadow:
        0 0 0 2px rgba(45,140,255,.14);
}

.ms-tl-icon-card-image {
    display: grid;
    place-items: center;
    min-height: 105px;
    overflow: hidden;
    border-radius: 9px;
    background:
        linear-gradient(45deg, #d9dde3 25%, transparent 25%),
        linear-gradient(-45deg, #d9dde3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d9dde3 75%),
        linear-gradient(-45deg, transparent 75%, #d9dde3 75%),
        #f2f4f7;
    background-position:
        0 0,
        0 8px,
        8px -8px,
        -8px 0;
    background-size: 16px 16px;
}

.ms-tl-icon-card-image img {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.ms-tl-icon-card-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.ms-tl-icon-card-copy strong,
.ms-tl-icon-card-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-tl-icon-card-copy small {
    color: var(--ms-text-muted, #8394aa);
    font-size: 9px;
}

.ms-tl-icon-preview {
    position: sticky;
    top: 82px;
}

.ms-tl-icon-preview h3 {
    margin: 4px 0 10px;
}

.ms-tl-icon-preview-stage {
    display: grid;
    place-items: center;
    min-height: 250px;
    overflow: hidden;
    border-radius: 12px;
    background:
        linear-gradient(45deg, #d9dde3 25%, transparent 25%),
        linear-gradient(-45deg, #d9dde3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d9dde3 75%),
        linear-gradient(-45deg, transparent 75%, #d9dde3 75%),
        #f2f4f7;
    background-position:
        0 0,
        0 12px,
        12px -12px,
        -12px 0;
    background-size: 24px 24px;
}

.ms-tl-icon-preview-stage img {
    width: min(230px, 82%);
    height: 230px;
    object-fit: contain;
}

.ms-tl-icon-metadata {
    display: grid;
    gap: 0;
    margin: 13px 0 0;
}

.ms-tl-icon-metadata > div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ms-divider, rgba(137,166,202,.16));
}

.ms-tl-icon-metadata dt {
    color: var(--ms-text-muted, #8394aa);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.ms-tl-icon-metadata dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.ms-tl-icon-metadata code {
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 9px;
}

.ms-tl-icon-readonly {
    margin-top: 13px;
    padding: 9px 11px;
    border: 1px solid rgba(39,180,110,.25);
    border-radius: 9px;
    background: rgba(39,180,110,.08);
    color: var(--ms-state-success, #27b46e);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.ms-tl-icon-empty {
    display: grid;
    place-items: center;
    min-height: 250px;
    padding: 30px;
    text-align: center;
}

.ms-tl-icon-empty p {
    color: var(--ms-text-secondary, #b9c7da);
}

@media (max-width: 1050px) {
    .ms-tl-icon-workbench {
        grid-template-columns: 1fr;
    }

    .ms-tl-icon-preview {
        position: static;
    }
}

@media (max-width: 760px) {
    .ms-tl-icon-header,
    .ms-tl-icon-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ms-tl-icon-status {
        width: 100%;
        box-sizing: border-box;
    }

    .ms-tl-icon-filters {
        flex-wrap: wrap;
    }
}

/* =====================================================================
   THEME-012E1 — Enterprise Layout Controls
   ===================================================================== */

:root {
    --ms-layout-workspace-max-width: 1680px;
    --ms-layout-page-padding: 24px;
    --ms-layout-widget-gap: 16px;
    --ms-layout-table-row-height: 44px;
    --ms-layout-avatar-size: 36px;
    --ms-layout-dashboard-columns: 4;
    --ms-layout-dashboard-gap: 16px;
}

html[data-ms-layout-studio="active"] .workspace {
    box-sizing: border-box;
    padding-right: var(--ms-layout-page-padding);
    padding-left: var(--ms-layout-page-padding);
}

html[data-ms-layout-studio="active"][data-ms-workspace-mode="boxed"]
.workspace {
    width: min(
        100%,
        var(--ms-layout-workspace-max-width)
    );
    margin-right: auto;
    margin-left: auto;
}

html[data-ms-layout-studio="active"][data-ms-workspace-mode="full"]
.workspace {
    width: 100%;
    max-width: none;
}

html[data-ms-layout-studio="active"] :is(
    .dashboard-grid,
    .widget-grid,
    .widgets-grid,
    .cards-grid,
    .kpi-grid,
    [data-dashboard-grid]
) {
    gap: var(--ms-layout-dashboard-gap);
}

html[data-ms-layout-studio="active"] :is(
    .dashboard-grid,
    [data-dashboard-grid]
) {
    grid-template-columns: repeat(
        var(--ms-layout-dashboard-columns),
        minmax(0, 1fr)
    );
}

html[data-ms-layout-studio="active"] :is(
    .widget,
    .dashboard-widget,
    .workspace-card,
    .kpi-card
) {
    margin-bottom: var(--ms-layout-widget-gap);
}

html[data-ms-layout-studio="active"] :is(
    table tbody tr,
    .data-grid-row,
    .table-row
) {
    min-height: var(--ms-layout-table-row-height);
    height: var(--ms-layout-table-row-height);
}

html[data-ms-layout-studio="active"] :is(
    .avatar,
    .user-avatar,
    .contact-avatar,
    [data-avatar]
) {
    width: var(--ms-layout-avatar-size);
    height: var(--ms-layout-avatar-size);
    min-width: var(--ms-layout-avatar-size);
}

.ms-tl-layout-enterprise-header {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(520px, 1.6fr);
    gap: 20px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(
        --ms-border-default,
        rgba(137, 166, 202, .22)
    );
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-layout-enterprise-header h2 {
    margin: 4px 0 5px;
}

.ms-tl-layout-enterprise-header p {
    margin: 0;
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-layout-preset-grid {
    display: grid;
    grid-template-columns: repeat(
        5,
        minmax(105px, 1fr)
    );
    gap: 8px;
}

.ms-tl-layout-preset {
    display: grid;
    gap: 4px;
    min-height: 68px;
    padding: 10px;
    border: 1px solid var(
        --ms-divider,
        rgba(137, 166, 202, .16)
    );
    border-radius: var(--ms-component-card-radius, 11px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    text-align: left;
    cursor: pointer;
}

.ms-tl-layout-preset:hover {
    border-color: var(--ms-c-primary, #2d8cff);
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.ms-tl-layout-preset small {
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 9px;
}

.ms-tl-demo-avatar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--ms-layout-widget-gap);
}

.ms-tl-demo-avatar-row > div {
    display: grid;
    gap: 2px;
}

.ms-tl-demo-avatar-row small {
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-demo-avatar {
    display: grid;
    place-items: center;
    width: var(--ms-layout-avatar-size);
    height: var(--ms-layout-avatar-size);
    min-width: var(--ms-layout-avatar-size);
    border-radius: 50%;
    background: var(--ms-c-primary, #2d8cff);
    color: #fff;
    font-size: calc(
        var(--ms-layout-avatar-size) * .32
    );
    font-weight: 850;
}

.ms-tl-demo-table {
    display: grid;
    overflow: hidden;
    margin-bottom: var(--ms-layout-widget-gap);
    border: 1px solid var(
        --ms-border-default,
        rgba(137, 166, 202, .22)
    );
    border-radius: var(--ms-layout-form-radius, 10px);
}

.ms-tl-demo-table > div {
    display: grid;
    grid-template-columns: 1fr 120px;
    align-items: center;
    min-height: var(--ms-layout-table-row-height);
    padding: 0 10px;
    border-bottom: 1px solid var(
        --ms-divider,
        rgba(137, 166, 202, .16)
    );
}

.ms-tl-demo-table > div:last-child {
    border-bottom: 0;
}

.ms-tl-demo-table .is-header {
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

@media (max-width: 1150px) {
    .ms-tl-layout-enterprise-header {
        grid-template-columns: 1fr;
    }

    .ms-tl-layout-preset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .ms-tl-layout-preset-grid {
        grid-template-columns: 1fr 1fr;
    }

    html[data-ms-layout-studio="active"] :is(
        .dashboard-grid,
        [data-dashboard-grid]
    ) {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   THEME-012E1 — Enterprise Layout Controls
   ===================================================================== */

:root {
    --ms-layout-workspace-max-width: 1680px;
    --ms-layout-page-padding: 24px;
    --ms-layout-widget-gap: 16px;
    --ms-layout-table-row-height: 44px;
    --ms-layout-avatar-size: 36px;
    --ms-layout-dashboard-columns: 4;
    --ms-layout-dashboard-gap: 16px;
}

html[data-ms-layout-studio="active"] .workspace {
    box-sizing: border-box;
    padding-right: var(--ms-layout-page-padding);
    padding-left: var(--ms-layout-page-padding);
}

html[data-ms-layout-studio="active"][data-ms-workspace-mode="boxed"]
.workspace {
    width: min(
        100%,
        var(--ms-layout-workspace-max-width)
    );
    margin-right: auto;
    margin-left: auto;
}

html[data-ms-layout-studio="active"][data-ms-workspace-mode="full"]
.workspace {
    width: 100%;
    max-width: none;
}

html[data-ms-layout-studio="active"] :is(
    .dashboard-grid,
    .widget-grid,
    .widgets-grid,
    .cards-grid,
    .kpi-grid,
    [data-dashboard-grid]
) {
    gap: var(--ms-layout-dashboard-gap);
}

html[data-ms-layout-studio="active"] :is(
    .dashboard-grid,
    [data-dashboard-grid]
) {
    grid-template-columns: repeat(
        var(--ms-layout-dashboard-columns),
        minmax(0, 1fr)
    );
}

html[data-ms-layout-studio="active"] :is(
    .widget,
    .dashboard-widget,
    .workspace-card,
    .kpi-card
) {
    margin-bottom: var(--ms-layout-widget-gap);
}

html[data-ms-layout-studio="active"] :is(
    table tbody tr,
    .data-grid-row,
    .table-row
) {
    min-height: var(--ms-layout-table-row-height);
    height: var(--ms-layout-table-row-height);
}

html[data-ms-layout-studio="active"] :is(
    .avatar,
    .user-avatar,
    .contact-avatar,
    [data-avatar]
) {
    width: var(--ms-layout-avatar-size);
    height: var(--ms-layout-avatar-size);
    min-width: var(--ms-layout-avatar-size);
}

.ms-tl-layout-enterprise-header {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(520px, 1.6fr);
    gap: 20px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(
        --ms-border-default,
        rgba(137, 166, 202, .22)
    );
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-tl-layout-enterprise-header h2 {
    margin: 4px 0 5px;
}

.ms-tl-layout-enterprise-header p {
    margin: 0;
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-layout-preset-grid {
    display: grid;
    grid-template-columns: repeat(
        5,
        minmax(105px, 1fr)
    );
    gap: 8px;
}

.ms-tl-layout-preset {
    display: grid;
    gap: 4px;
    min-height: 68px;
    padding: 10px;
    border: 1px solid var(
        --ms-divider,
        rgba(137, 166, 202, .16)
    );
    border-radius: var(--ms-component-card-radius, 11px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    text-align: left;
    cursor: pointer;
}

.ms-tl-layout-preset:hover {
    border-color: var(--ms-c-primary, #2d8cff);
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.ms-tl-layout-preset small {
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 9px;
}

.ms-tl-demo-avatar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--ms-layout-widget-gap);
}

.ms-tl-demo-avatar-row > div {
    display: grid;
    gap: 2px;
}

.ms-tl-demo-avatar-row small {
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-tl-demo-avatar {
    display: grid;
    place-items: center;
    width: var(--ms-layout-avatar-size);
    height: var(--ms-layout-avatar-size);
    min-width: var(--ms-layout-avatar-size);
    border-radius: 50%;
    background: var(--ms-c-primary, #2d8cff);
    color: #fff;
    font-size: calc(
        var(--ms-layout-avatar-size) * .32
    );
    font-weight: 850;
}

.ms-tl-demo-table {
    display: grid;
    overflow: hidden;
    margin-bottom: var(--ms-layout-widget-gap);
    border: 1px solid var(
        --ms-border-default,
        rgba(137, 166, 202, .22)
    );
    border-radius: var(--ms-layout-form-radius, 10px);
}

.ms-tl-demo-table > div {
    display: grid;
    grid-template-columns: 1fr 120px;
    align-items: center;
    min-height: var(--ms-layout-table-row-height);
    padding: 0 10px;
    border-bottom: 1px solid var(
        --ms-divider,
        rgba(137, 166, 202, .16)
    );
}

.ms-tl-demo-table > div:last-child {
    border-bottom: 0;
}

.ms-tl-demo-table .is-header {
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

@media (max-width: 1150px) {
    .ms-tl-layout-enterprise-header {
        grid-template-columns: 1fr;
    }

    .ms-tl-layout-preset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .ms-tl-layout-preset-grid {
        grid-template-columns: 1fr 1fr;
    }

    html[data-ms-layout-studio="active"] :is(
        .dashboard-grid,
        [data-dashboard-grid]
    ) {
        grid-template-columns: 1fr;
    }
}

/* THEME-003C — THEME LAYOUT STUDIO FULL SURFACE CONTRACT
   Tutti i tab e pannelli del Theme Layout Studio seguono i token runtime.
   Light => superfici chiare / testo scuro.
   Dark  => superfici scure / testo chiaro. */

/* Root / shell / tab strip */
body [class*="ms-tl-"] {
    color: var(--ms-theme-text);
}

body .ms-tl-segmented,
body .ms-tl-tabs,
body .ms-tl-toolbar,
body .ms-tl-toolbar-row,
body .ms-tl-section,
body .ms-tl-panel,
body .ms-tl-card,
body .ms-tl-group,
body .ms-tl-color-group,
body .ms-tl-color-section,
body .ms-tl-editor-section,
body .ms-tl-settings-section,
body .ms-tl-preview-section {
    background: var(--ms-theme-surface) !important;
    background-image: none !important;
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
}

/* Template cards / Color cards / Component cards / Icon cards / Brand cards */
body .ms-tl-theme-card,
body .ms-tl-token-card,
body .ms-tl-color-card,
body .ms-tl-component-card,
body .ms-tl-icon-card,
body .ms-tl-accessibility-card,
body .ms-tl-assignment-card,
body .ms-tl-brand-card,
body .ms-tl-profile-card,
body .ms-tl-option-card,
body .ms-tl-control-card {
    background: var(--ms-theme-surface) !important;
    background-image: none !important;
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
    box-shadow: none !important;
}

/* Header/banner interni che oggi rimangono navy */
body .ms-tl-hero,
body .ms-tl-section-header,
body .ms-tl-editor-header,
body .ms-tl-color-studio,
body .ms-tl-color-studio-header,
body .ms-tl-banner,
body .ms-tl-callout,
body .ms-tl-summary {
    background: var(--ms-theme-surface) !important;
    background-image: none !important;
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
}

/* Qualsiasi box interno tipico del Theme Studio */
body .ms-tl-field,
body .ms-tl-control,
body .ms-tl-row,
body .ms-tl-item,
body .ms-tl-grid > *,
body .ms-tl-form-row,
body .ms-tl-setting-row,
body .ms-tl-preview-card {
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
}

/* Testi */
body [class*="ms-tl-"] h1,
body [class*="ms-tl-"] h2,
body [class*="ms-tl-"] h3,
body [class*="ms-tl-"] h4,
body [class*="ms-tl-"] h5,
body [class*="ms-tl-"] strong,
body [class*="ms-tl-"] label,
body [class*="ms-tl-"] span,
body [class*="ms-tl-"] p,
body [class*="ms-tl-"] small,
body [class*="ms-tl-"] b {
    color: var(--ms-theme-text) !important;
}

/* Input / select / textarea / number / color */
body [class*="ms-tl-"] input:not([type="color"]),
body [class*="ms-tl-"] select,
body [class*="ms-tl-"] textarea {
    background: var(--ms-theme-surface-soft) !important;
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
}

body [class*="ms-tl-"] input::placeholder,
body [class*="ms-tl-"] textarea::placeholder {
    color: var(--ms-theme-muted) !important;
    opacity: 1 !important;
}

/* Pulsanti standard */
body [class*="ms-tl-"] button {
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
}

body [class*="ms-tl-"] button:not(.is-active):not([data-primary="true"]) {
    background: var(--ms-theme-surface-soft) !important;
    background-image: none !important;
}

body [class*="ms-tl-"] button:hover {
    background: var(--ms-theme-surface-soft) !important;
    color: var(--ms-theme-text) !important;
}

/* Tab / card attiva */
body .ms-tl-segmented button.is-active,
body .ms-tl-tabs button.is-active,
body .ms-tl-theme-card.is-active,
body [class*="ms-tl-"] .is-active {
    background: var(--ms-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-accent) !important;
}

/* Mantiene i colori semantici puri (success/warning/error) non sovrascritti */
body [class*="ms-tl-"] [data-status="success"],
body [class*="ms-tl-"] .is-success {
    color: inherit;
}

/* THEME-003C-R1 — FULL STUDIO LIGHT/DARK SURFACE CONTRACT */

/* Tutti i pannelli principali del Theme & Layout Studio */
html[data-master-suite-route="settings/theme-layout"] .ms-tl-hero,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-panel,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-section,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-group,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-theme-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-token-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-color-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-component-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-icon-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-accessibility-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-assignment-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-brand-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-layout-card,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-preview-card,
html[data-master-suite-route="settings/theme-layout"] [class*="studio-card"],
html[data-master-suite-route="settings/theme-layout"] [class*="studio-panel"] {
    background: var(--ms-theme-surface) !important;
    background-image: none !important;
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
    box-shadow: none !important;
}

/* Superfici interne */
html[data-master-suite-route="settings/theme-layout"] .ms-tl-row,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-item,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-control,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-field,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-preview,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-preview-panel,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-preset,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-preset-card {
    background: var(--ms-theme-surface-soft) !important;
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
}

/* Testi */
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] h1,
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] h2,
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] h3,
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] h4,
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] p,
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] span,
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] label,
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] strong,
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] small {
    color: var(--ms-theme-text) !important;
}

/* Input/select/textarea */
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] input:not([type="color"]),
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] select,
html[data-master-suite-route="settings/theme-layout"] [class*="ms-tl-"] textarea {
    background: var(--ms-theme-surface-soft) !important;
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
}

/* Tab strip */
html[data-master-suite-route="settings/theme-layout"] .ms-tl-segmented,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-tabs {
    background: var(--ms-theme-surface) !important;
    border-color: var(--ms-theme-border) !important;
}

html[data-master-suite-route="settings/theme-layout"] .ms-tl-segmented button,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-tabs button {
    background: var(--ms-theme-surface-soft) !important;
    color: var(--ms-theme-text) !important;
    border-color: var(--ms-theme-border) !important;
}

/* Tab selezionato più evidente in Light e coerente in Dark */
html[data-master-suite-route="settings/theme-layout"] .ms-tl-segmented button.is-active,
html[data-master-suite-route="settings/theme-layout"] .ms-tl-tabs button.is-active,
html[data-master-suite-route="settings/theme-layout"] [role="tab"][aria-selected="true"] {
    background: color-mix(in srgb, var(--ms-theme-text) 18%, var(--ms-theme-surface)) !important;
    color: var(--ms-theme-text) !important;
    border-color: color-mix(in srgb, var(--ms-theme-text) 28%, var(--ms-theme-border)) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ms-theme-text) 12%, transparent) !important;
}

/* THEME-003C-R2 — REAL PANEL OWNERSHIP LIGHT/DARK CONTRACT */
html[data-master-suite-route="settings/theme-layout"] :is(
 .ms-tl-color-header,.ms-tl-color-group,
 .ms-tl-typography-header,.ms-tl-typography-presets,.ms-tl-typography-controls>section,.ms-tl-typography-preview,
 .ms-tl-component-header,.ms-tl-component-presets,.ms-tl-component-controls>section,.ms-tl-component-preview,
 .ms-tl-icon-header,.ms-tl-icon-toolbar,.ms-tl-icon-catalog,
 .ms-tl-layout-enterprise-header,.ms-tl-layout-panel,
 .ms-brand-center,.ms-brand-center section,
 .ms-icon-assignment-panel,.ms-icon-assignment-header,.ms-icon-assignment-target,.ms-icon-assignment-catalog,
 .ms-accessibility-center,.ms-accessibility-header,.ms-accessibility-controls>section,.ms-accessibility-preview
){
 background:var(--ms-theme-surface)!important;
 color:var(--ms-theme-text)!important;
 border-color:var(--ms-theme-border)!important;
}
html[data-master-suite-route="settings/theme-layout"] :is(
 .ms-tl-color-theme-status,.ms-tl-color-control,.ms-tl-color-control-heading button,
 .ms-tl-typography-preset,.ms-tl-type-kpis,.ms-tl-type-sample input,.ms-tl-type-actions button:not(.is-primary),
 .ms-tl-component-preset,.ms-tl-component-demo-card,.ms-tl-component-demo-form,
 .ms-tl-component-demo-form input,.ms-tl-component-demo-form textarea,.ms-tl-component-demo-actions button:not(.is-primary),
 .ms-tl-icon-status,.ms-tl-icon-search,.ms-tl-icon-filter,.ms-tl-layout-preset,
 .ms-brand-center input,.ms-brand-center select,.ms-brand-center textarea,.ms-brand-center button:not(.is-primary),
 .ms-icon-assignment-target-preview,.ms-icon-assignment-target-actions button,.ms-icon-assignment-asset,
 .ms-accessibility-toggle,.ms-accessibility-range,.ms-accessibility-header button
){
 background:var(--ms-theme-surface-soft)!important;
 color:var(--ms-theme-text)!important;
 border-color:var(--ms-theme-border)!important;
}
html[data-master-suite-route="settings/theme-layout"] :is(
 .ms-brand-center,.ms-icon-assignment-panel,.ms-accessibility-center
) :is(h1,h2,h3,h4,p,label,strong,small,span){
 color:var(--ms-theme-text)!important;
}
html[data-master-suite-route="settings/theme-layout"] :is(
 .ms-brand-center,.ms-icon-assignment-panel,.ms-accessibility-center
) input:not([type="color"]),
html[data-master-suite-route="settings/theme-layout"] :is(
 .ms-brand-center,.ms-icon-assignment-panel,.ms-accessibility-center
) select,
html[data-master-suite-route="settings/theme-layout"] :is(
 .ms-brand-center,.ms-icon-assignment-panel,.ms-accessibility-center
) textarea{
 background:var(--ms-theme-surface-soft)!important;
 color:var(--ms-theme-text)!important;
 border-color:var(--ms-theme-border)!important;
}

/* THEME-003C-R3 — INTERNAL SURFACE TOKEN BRIDGE */
html[data-master-suite-route="settings/theme-layout"] {
    --ms-bg-workspace: var(--ms-theme-bg);
    --ms-bg-panel: var(--ms-theme-surface);
    --ms-bg-control: var(--ms-theme-surface-soft);
    --ms-bg-control-hover: color-mix(
        in srgb,
        var(--ms-theme-text) 7%,
        var(--ms-theme-surface-soft)
    );
    --ms-text-primary: var(--ms-theme-text);
    --ms-text-secondary: var(--ms-theme-text-secondary);
    --ms-text-muted: var(--ms-theme-text-muted);
    --ms-border-default: var(--ms-theme-border);
    --ms-divider: color-mix(
        in srgb,
        var(--ms-theme-border) 72%,
        transparent
    );
}