/* Muraqman UX/UI Refinement v1
   Purpose: strengthen product identity, surface hierarchy and enterprise density
   without changing existing workflow behavior. */

:root {










    --mq-sidebar-width: 264px;
    --mq-workspace-sidebar-width: 252px;
    --mq-ease: cubic-bezier(.2,.7,.2,1);
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--mq-type-h1); }
h2 { font-size: var(--mq-type-h2); }
h3 { font-size: var(--mq-type-h3); }

.mq-brand-mark {
    overflow: hidden;
    isolation: isolate;
}
.mq-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--mq-space-1);
}

/* Shared component hierarchy */
.mq-surface {
    background: var(--mq-surface);
    border: 1px solid var(--mq-border);
}
.mq-panel {
    background: var(--mq-surface);
    border: 1px solid var(--mq-border);
    border-radius: var(--mq-radius-lg);
}
.mq-callout {
    padding: var(--mq-space-4);
    border-radius: var(--mq-radius-md);
    background: var(--mq-brand-primary-soft);
    color: var(--mq-text-secondary);
}
.mq-command-bar {
    display: flex;
    align-items: center;
    gap: var(--mq-space-2);
    min-height: 52px;
    padding: var(--mq-space-2);
    border: 1px solid var(--mq-border);
    border-radius: var(--mq-radius-md);
    background: color-mix(in srgb, var(--mq-surface) 96%, var(--mq-bg));
}
.mq-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.mq-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--mq-space-1);
    min-height: 28px;
    padding: var(--mq-space-1) var(--mq-space-2);
    border-radius: 999px;
    font-size: var(--mq-type-caption);
    font-weight: 700;
}
.mq-badge.info { color: var(--mq-info); background: var(--mq-info-soft); }
.mq-badge.success { color: var(--mq-success); background: var(--mq-success-soft); }
.mq-badge.warning { color: var(--mq-warning); background: var(--mq-warning-soft); }
.mq-badge.danger { color: var(--mq-danger); background: var(--mq-danger-soft); }
.mq-badge.neutral { color: var(--mq-text-secondary); background: var(--mq-surface-muted); }

/* Buttons: clearer hierarchy and feedback */
.mq-button {
    min-height: var(--mq-control-height);
    gap: var(--mq-space-2);
    transition: transform .14s var(--mq-ease), background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.mq-button:active:not(:disabled) { transform: translateY(1px); }
.mq-button:disabled { opacity: .5; cursor: not-allowed; }
.mq-button-primary {
    background: var(--mq-action, var(--mq-brand-primary-hover));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--mq-action, var(--mq-brand-primary)) 20%, transparent);
}
.mq-button-primary:hover {
    background: color-mix(in srgb, var(--mq-action, var(--mq-brand-primary-hover)) 88%, #000);
}
.mq-icon-button {
    display: inline-grid;
    place-items: center;
    color: var(--mq-text-secondary);
    text-decoration: none;
}
.mq-icon-button:hover {
    color: var(--mq-text);
}

/* Portal: warmer, brand-led and less card-heavy */
.mq-topbar {
    box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
.mq-topbar-inner { min-height: 76px; }
.mq-brand { font-size: var(--mq-type-sm); }
.mq-brand > span:last-child { font-weight: 700; }

.mq-hero {
    padding: clamp(var(--mq-space-8), 5vw, var(--mq-space-16));
    border-color: color-mix(in srgb, var(--mq-brand-primary) 10%, var(--mq-border));
    background:
        linear-gradient(125deg, color-mix(in srgb, var(--mq-brand-primary-soft) 58%, white), var(--mq-surface) 42%),
        var(--mq-surface);
    box-shadow: 0 12px 44px rgba(16,24,40,.055);
}
.mq-hero::before {
    content: "";
    position: absolute;
    inset: 0 58% 0 0;
    pointer-events: none;
    opacity: .12;
    background-image: var(--mq-brand-motif);
    background-size: 28px 28px;
    mask-image: linear-gradient(to left, transparent, #000);
}
.mq-hero h1 { font-size: var(--mq-type-display); max-width: 760px; }
.mq-hero p { max-width: 680px; }

.mq-service-card {
    min-height: 236px;
    box-shadow: none;
    border-color: color-mix(in srgb, var(--mq-border) 86%, transparent);
}
.mq-service-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mq-brand-primary) 22%, var(--mq-border));
    box-shadow: 0 16px 36px rgba(16,24,40,.08);
}
.mq-service-icon {
    border: 1px solid color-mix(in srgb, var(--mq-brand-primary) 10%, transparent);
}
.mq-service-category {
    text-transform: none;
    letter-spacing: 0;
}

/* Account menu */
.mq-account-menu { position: relative; }
.mq-account-menu summary { list-style: none; }
.mq-account-menu summary::-webkit-details-marker { display: none; }
.mq-account-actions {
    position: absolute;
    z-index: 90;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    width: 220px;
    display: grid;
    padding: var(--mq-space-2);
    border: 1px solid var(--mq-border);
    border-radius: var(--mq-radius-md);
    background: var(--mq-surface);
    box-shadow: var(--mq-shadow-lg);
}
.mq-account-actions a,
.mq-account-actions button {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: var(--mq-space-2) var(--mq-space-2);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mq-text-secondary);
    text-decoration: none;
    text-align: start;
    cursor: pointer;
}
.mq-account-actions a:hover,
.mq-account-actions button:hover {
    color: var(--mq-text);
    background: var(--mq-surface-muted);
}

/* Studio: dense builder-oriented environment */
.mq-studio-shell {
    grid-template-columns: var(--mq-sidebar-width) minmax(0,1fr);
    background: #f5f7fa;
}
.mq-studio-sidebar {
    padding: var(--mq-space-4) var(--mq-space-3);
    background:
        radial-gradient(circle at 10% 0%, rgba(35,182,151,.11), transparent 260px),
        #121a2b;
}
.mq-studio-brand {
    min-height: 62px;
    padding: var(--mq-space-1) var(--mq-space-2) var(--mq-space-4);
}
.mq-studio-brand .mq-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}
.mq-studio-brand strong { font-size:var(--mq-type-sm); }
.mq-studio-brand small { letter-spacing: .02em; }

.mq-studio-nav {
    display: block;
    overflow-y: auto;
    padding-inline: var(--mq-space-1);
}
.mq-studio-nav-section {
    display: grid;
    gap: var(--mq-space-1);
    margin-top: var(--mq-space-3);
}
.mq-studio-nav-section:first-child { margin-top: 0; }
.mq-studio-nav-label {
    padding: 0 var(--mq-space-2) var(--mq-space-1);
    color: #68758a;
    font-size: 10px;
    font-weight: 700;
}
.mq-studio-nav a {
    min-height: 42px;
    gap: var(--mq-space-2);
    padding: var(--mq-space-2) var(--mq-space-2);
    border: 1px solid transparent;
}
.mq-studio-nav a:hover {
    background: rgba(255,255,255,.055);
}
.mq-studio-nav a.active {
    color: #fff;
    border-color: rgba(255,255,255,.06);
    background: linear-gradient(90deg, rgba(35,182,151,.17), rgba(255,255,255,.06));
}
.mq-studio-nav-icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    color: #8794a8;
}
.mq-studio-nav a.active .mq-studio-nav-icon { color: #68d4bd; }
.mq-studio-nav-icon .mud-icon-root { font-size: 19px; }

/* Shared spacing and clearer action placement across product surfaces. */
.mq-personal-service-list {
    max-block-size: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: var(--mq-space-1);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mq-brand-primary) 28%, var(--mq-border)) transparent;
}
.mq-personal-service-list::-webkit-scrollbar { width: 8px; }
.mq-personal-service-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--mq-brand-primary) 28%, var(--mq-border)); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
.mq-personal-service-list::-webkit-scrollbar-track { background: transparent; }
.mq-personal-services > .mq-surface-section { min-width: 0; }
.mq-service-footer { justify-content: flex-start; flex-wrap: wrap; }
.mq-service-footer .mq-button { margin-inline-start: auto; }
.mq-service-primary-action { margin-block:var(--mq-space-5) var(--mq-space-8); padding-block-start:var(--mq-space-4); border-block-start:1px solid var(--mq-border); }
.mq-service-primary-action .mq-button { min-width:156px; gap:var(--mq-space-2); }
.mq-detail-main > .mq-detail-icon { margin-block-end: var(--mq-space-4); }
.mq-request-list { display: grid; gap: 0; }
.mq-request-row {
    grid-template-columns: minmax(220px, 1.45fr) minmax(126px, .8fr) minmax(160px, 1fr) minmax(130px, .75fr);
}
.mq-request-row > * { min-width: 0; }
.mq-request-row > .mq-status { justify-self: start; }
.mq-request-row > :nth-child(3), .mq-request-row > :nth-child(4) { overflow-wrap: anywhere; }
.mq-approval-card + .mq-approval-card { margin-block-start: var(--mq-space-3); }
.mq-approval-card { padding: var(--mq-space-4); border: 1px solid var(--mq-border); border-radius: var(--mq-radius-md); background: var(--mq-surface-subtle); }
.mq-approval-card .mq-output-item { padding: 0; border: 0; background: transparent; }
.mq-rejection-reason { display:flex; align-items:flex-start; gap:var(--mq-space-3); margin-block:var(--mq-space-4) var(--mq-space-6); padding:var(--mq-space-4); border:1px solid color-mix(in srgb,var(--mq-danger) 22%,var(--mq-border)); border-inline-start:4px solid var(--mq-danger); border-radius:var(--mq-radius-md); background:var(--mq-danger-soft); color:var(--mq-text); }
.mq-rejection-icon { display:grid; place-items:center; flex:0 0 36px; inline-size:36px; block-size:36px; border-radius:50%; background:var(--mq-surface); color:var(--mq-danger); }
.mq-rejection-reason strong { color:var(--mq-danger); }
.mq-rejection-reason p { margin:var(--mq-space-1) 0 0; line-height:1.8; overflow-wrap:anywhere; }
.mq-applicant-profile-grid { gap:var(--mq-space-4); }
.mq-applicant-profile-grid .mq-field { min-width:0; }
.mq-service-summary .mq-definition-list dd .mq-person-context { margin-block:var(--mq-space-2); }
.mq-service-summary .mq-definition-list dd > small { display:block; color:var(--mq-text-muted); font-weight:400; }
.mq-request-success { padding:clamp(var(--mq-space-6),5vw,var(--mq-space-12)); }
.mq-request-success-steps { gap:var(--mq-space-4); margin-block:var(--mq-space-6); }
.mq-request-success-steps > * { min-width:0; padding:var(--mq-space-5); }
.mq-toast { animation: mq-toast-enter .2s var(--mq-ease) both; }
@keyframes mq-toast-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.mq-studio-nav { scrollbar-width:thin; scrollbar-color:rgba(220,230,239,.28) transparent; scrollbar-gutter:stable; overscroll-behavior:contain; }
.mq-studio-nav::-webkit-scrollbar { width:8px; }
.mq-studio-nav::-webkit-scrollbar-track { background:transparent; margin-block:var(--mq-space-2); }
.mq-studio-nav::-webkit-scrollbar-thumb { background:rgba(220,230,239,.26); border:2px solid transparent; border-radius:999px; background-clip:padding-box; }
.mq-workspace-nav a[href="/workspace/analytics"] { display:flex; align-items:center; gap:var(--mq-space-2); }
.mq-analytics { display:grid; gap:var(--mq-space-5); }
.mq-analytics-kpis, .mq-analytics-trends { gap:var(--mq-space-4); margin-block:0; }
.mq-analytics-kpi { min-height:144px; padding:var(--mq-space-5); border-radius:var(--mq-radius-lg); transition:transform .15s var(--mq-ease),border-color .15s ease,box-shadow .15s ease; }
.mq-analytics-kpi-heading { display:flex; align-items:center; gap:var(--mq-space-3); color:var(--mq-text-secondary); font-weight:600; }
.mq-analytics-kpi-icon { display:grid; place-items:center; inline-size:40px; block-size:40px; flex:0 0 40px; border:1px solid color-mix(in srgb,var(--mq-brand-primary) 16%,var(--mq-border)); border-radius:var(--mq-radius-md); background:var(--mq-brand-primary-soft); color:var(--mq-brand-primary-hover); }
.mq-analytics-kpi:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--mq-brand-primary) 28%,var(--mq-border)); box-shadow:var(--mq-shadow-md); }
.mq-studio-kpis { gap:var(--mq-space-4); margin-block:var(--mq-space-5) var(--mq-space-8); }
.mq-studio-kpi { min-width:0; padding:var(--mq-space-5); }
.mq-studio-page > .mq-card, .mq-studio-page .mq-section-card { margin-block:var(--mq-space-5); }
.mq-studio-flow { gap:var(--mq-space-3); }
.mq-studio-flow > .mq-card { min-width:0; padding:var(--mq-space-5); }
.mq-studio-checklist { display:grid; gap:var(--mq-space-3); margin-block:var(--mq-space-5); }
.mq-studio-checklist-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--mq-space-3); padding:var(--mq-space-4); border:1px solid var(--mq-border); border-radius:var(--mq-radius-md); background:var(--mq-surface); }
.mq-studio-checklist-item.complete { border-color:color-mix(in srgb,var(--mq-success) 28%,var(--mq-border)); background:var(--mq-success-soft); }
.mq-studio-checklist-item > span:first-child { display:grid; place-items:center; inline-size:36px; block-size:36px; border-radius:50%; background:var(--mq-surface-muted); color:var(--mq-text-secondary); }
.mq-studio-checklist-item.complete > span:first-child { background:var(--mq-surface); color:var(--mq-success); }
.mq-studio-checklist-item small { display:block; margin-block-start:var(--mq-space-1); color:var(--mq-text-muted); }
.mq-studio-progress { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--mq-space-2) var(--mq-space-4); align-items:center; }
.mq-studio-progress progress { grid-column:1/-1; inline-size:100%; block-size:10px; accent-color:var(--mq-brand-primary); }
.mq-studio-progress small { color:var(--mq-text-muted); }
.mq-studio-checklist-item .mq-link { white-space:nowrap; }
.mq-notification-surface { align-self:center; padding:var(--mq-space-1) var(--mq-space-2); border-radius:999px; background:var(--mq-surface-muted); color:var(--mq-text-secondary); font-size:var(--mq-type-caption); white-space:nowrap; }
.mq-success-next { gap:var(--mq-space-4); }
.mq-success-next > div { gap:var(--mq-space-3); padding:var(--mq-space-4); min-height:112px; }
.mq-success-next > div > div { gap:var(--mq-space-2); }
.mq-success-next small { line-height:1.7; }
@media(max-width:760px) {
    .mq-request-row { grid-template-columns:minmax(0,1fr) auto; }
    .mq-request-row > :nth-child(3), .mq-request-row > :nth-child(4) { grid-column:1/-1; }
    .mq-notification-surface { display:none; }
}
@media(max-width:420px) { .mq-request-row { grid-template-columns:minmax(0,1fr); } .mq-request-row > * { grid-column:1; } }
dialog { inset:auto; margin:auto; max-inline-size:min(560px,calc(100vw - 32px)); max-block-size:min(80vh,720px); border:1px solid var(--mq-border); border-radius:var(--mq-radius-xl); padding:var(--mq-space-6); background:var(--mq-surface); color:var(--mq-text); box-shadow:var(--mq-shadow-lg); }
dialog[open] { position:fixed; inset:0; }
dialog::backdrop { background:rgba(16,24,40,.48); backdrop-filter:blur(2px); }
dialog .mq-command-bar { justify-content:flex-end; gap:var(--mq-space-3); margin-block-start:var(--mq-space-5); }
@media(max-width:760px) {
    .mq-personal-service-list { max-block-size:240px; }
    .mq-applicant-profile-grid { grid-template-columns:minmax(0,1fr); }
    .mq-studio-checklist-item { grid-template-columns:auto minmax(0,1fr); }
    .mq-studio-checklist-item .mq-link { grid-column:2; justify-self:start; }
}

.mq-studio-sidebar-footer {
    gap: var(--mq-space-1);
    padding: var(--mq-space-3) var(--mq-space-1) var(--mq-space-1);
}
.mq-studio-sidebar-footer a {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: var(--mq-space-2);
    padding: var(--mq-space-2) var(--mq-space-2);
    border-radius: 8px;
}
.mq-studio-sidebar-footer a:hover { background: rgba(255,255,255,.05); color: #fff; }

.mq-studio-topbar,
.mq-workspace-topbar {
    min-height: 64px;
    box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
.mq-studio-topbar-context {
    display: flex !important;
    align-items: center;
    gap: var(--mq-space-2);
}
.mq-studio-topbar-context .mq-topbar-product {
    display: grid;
    gap: var(--mq-space-1);
}
.mq-studio-topbar-context strong { font-size:var(--mq-type-caption); }
.mq-studio-topbar-context span { font-size: 10px !important; }
.mq-topbar-separator {
    width: 1px;
    height: 26px;
    background: var(--mq-border);
}
.mq-env-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: var(--mq-space-1) var(--mq-space-2);
    border-radius: 999px;
    color: var(--mq-brand-primary);
    background: var(--mq-brand-primary-soft);
    font-size: 10px;
    font-weight: 700;
}

.mq-studio-content { padding: var(--mq-space-6) var(--mq-space-8) var(--mq-space-10); }
.mq-studio-page { width: min(100%, 1360px); }
.mq-studio-page-header,
.mq-studio-editor-header {
    align-items: flex-start;
    margin-bottom: var(--mq-space-5);
}
.mq-studio-page-header h1,
.mq-studio-editor-header h1 {
    font-size:var(--mq-type-title);
    letter-spacing: -.015em;
}

.mq-studio-kpi,
.mq-workspace-kpi {
    box-shadow: none;
}
.mq-studio-panel,
.mq-identity-panel,
.mq-identity-detail,
.mq-report-builder,
.mq-doc-template-list,
.mq-doc-template-editor {
    box-shadow: none;
}

/* Workspace: operational, scan-first */
.mq-workspace-shell {
    grid-template-columns: var(--mq-workspace-sidebar-width) minmax(0,1fr);
}
.mq-workspace-sidebar {
    padding: var(--mq-space-4) var(--mq-space-3);
    background: #fff;
}
.mq-workspace-nav a {
    border: 1px solid transparent;
}
.mq-workspace-nav a.active {
    color: color-mix(in srgb, var(--mq-brand-primary) 86%, #102a25);
    border-color: color-mix(in srgb, var(--mq-brand-primary) 12%, var(--mq-border));
    background: var(--mq-brand-primary-soft);
}
.mq-workspace-content { padding: var(--mq-space-6) var(--mq-space-8) var(--mq-space-10); }
.mq-work-table th {
    height: 42px;
    background: #f8fafb;
    text-transform: none;
}
.mq-work-table td { padding-block: var(--mq-space-3); }
.mq-work-table tbody tr { transition: background .12s ease; }
.mq-work-table tbody tr:hover { background: #fbfcfd; }

/* Forms */
.mq-field > span {
    font-size: var(--mq-type-label);
    color: var(--mq-text-secondary);
}
.mq-field input,
.mq-field select,
.mq-field textarea {
    border-color: var(--mq-border);
    box-shadow: 0 1px 1px rgba(16,24,40,.015);
}
.mq-field input:hover,
.mq-field select:hover,
.mq-field textarea:hover {
    border-color: var(--mq-border-strong);
}
.mq-field small { font-size: var(--mq-type-caption); }

/* Brand studio */
.mq-brand-studio-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(360px,.72fr);
    gap: var(--mq-space-5);
    align-items: start;
}
.mq-brand-settings {
    display: grid;
    gap: var(--mq-space-4);
}
.mq-brand-section {
    padding: var(--mq-space-5);
}
.mq-brand-section + .mq-brand-section { margin-top: 0; }
.mq-brand-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mq-space-4);
    padding-bottom: var(--mq-space-4);
    margin-bottom: var(--mq-space-4);
    border-bottom: 1px solid var(--mq-border);
}
.mq-brand-section-heading h2 {
    margin: 0;
    font-size: 17px;
}
.mq-brand-section-heading p {
    margin: var(--mq-space-1) 0 0;
    color: var(--mq-text-muted);
    font-size:var(--mq-type-caption);
}
.mq-brand-color-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--mq-space-3);
}
.mq-color-field {
    display: grid;
    gap: var(--mq-space-2);
}
.mq-color-field > span {
    color: var(--mq-text-secondary);
    font-size:var(--mq-type-caption);
    font-weight: 700;
}
.mq-color-control {
    min-height: 48px;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: var(--mq-space-2);
    align-items: center;
    padding: var(--mq-space-1) var(--mq-space-2);
    border: 1px solid var(--mq-border);
    border-radius: 10px;
    background: var(--mq-surface);
}
.mq-color-control input[type="color"] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
}
.mq-color-control code {
    direction: ltr;
    text-align: start;
    color: var(--mq-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:var(--mq-type-caption);
}
.mq-choice-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--mq-space-2);
}
.mq-choice-card {
    min-height: 76px;
    display: grid;
    gap: var(--mq-space-1);
    align-content: center;
    padding: var(--mq-space-3);
    border: 1px solid var(--mq-border);
    border-radius: 11px;
    background: var(--mq-surface);
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.mq-choice-card:hover { border-color: var(--mq-border-strong); }
.mq-choice-card.active {
    border-color: color-mix(in srgb, var(--mq-brand-primary) 40%, var(--mq-border));
    box-shadow: 0 0 0 3px var(--mq-brand-primary-soft);
}
.mq-choice-card strong { font-size:var(--mq-type-caption); }
.mq-choice-card small { color: var(--mq-text-muted); }
.mq-motif-swatch {
    height: 28px;
    border-radius: 7px;
    background-color: var(--mq-surface-muted);
}
.mq-motif-swatch.geometric { background-image: repeating-linear-gradient(135deg,var(--mq-accent) 0 5px,transparent 5px 15px); }
.mq-motif-swatch.dots { background-image: radial-gradient(var(--mq-accent) 1.5px,transparent 1.5px); background-size: 11px 11px; }
.mq-motif-swatch.lines { background-image: repeating-linear-gradient(135deg,var(--mq-accent) 0 2px,transparent 2px 11px); }
.mq-motif-swatch.none { border: 1px dashed var(--mq-border); }

.mq-brand-preview-shell {
    position: sticky;
    top: 86px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(16,24,40,.08);
}
.mq-brand-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mq-space-3);
    min-height: 50px;
    padding: var(--mq-space-2) var(--mq-space-3);
    border-bottom: 1px solid var(--mq-border);
    background: #fafbfc;
}
.mq-brand-preview-toolbar strong { font-size:var(--mq-type-caption); }
.mq-brand-preview-toolbar span { color: var(--mq-text-muted); font-size: 10px; }
.mq-brand-browser {
    min-height: 520px;
    background: #f7f8fa;
}
.mq-brand-browser-topbar {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: var(--mq-space-2);
    padding: var(--mq-space-2) var(--mq-space-4);
    border-bottom: 1px solid var(--mq-border);
    background: #fff;
}
.mq-brand-browser-topbar img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 10px;
}
.mq-brand-browser-topbar strong { font-size:var(--mq-type-caption); }
.mq-brand-preview-hero {
    position: relative;
    overflow: hidden;
    margin: var(--mq-space-4);
    padding: var(--mq-space-6) var(--mq-space-6);
    border: 1px solid color-mix(in srgb,var(--mq-brand-primary) 12%,var(--mq-border));
    border-radius: 16px;
    background: linear-gradient(125deg,var(--mq-brand-primary-soft),#fff 50%);
}
.mq-brand-preview-hero::after {
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    inset-inline-end:-38px;
    inset-block-start:-60px;
    opacity:.15;
    background-image:var(--mq-brand-motif);
    background-size:22px 22px;
    border-radius:50%;
}
.mq-brand-preview-hero > * { position:relative; z-index:1; }
.mq-brand-preview-hero small { color: var(--mq-brand-primary); font-weight: 700; }
.mq-brand-preview-hero h3 { margin: var(--mq-space-1) 0; font-size:var(--mq-type-section); }
.mq-brand-preview-hero p { margin: 0; color: var(--mq-text-muted); font-size:var(--mq-type-caption); }
.mq-brand-preview-services {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--mq-space-2);
    padding: 0 var(--mq-space-4) var(--mq-space-4);
}
.mq-brand-preview-service {
    min-height: 110px;
    padding: var(--mq-space-3);
    border: 1px solid var(--mq-border);
    border-radius: 12px;
    background: #fff;
}
.mq-brand-preview-service span {
    width: 30px; height: 30px; display:grid; place-items:center;
    border-radius:9px; color:var(--mq-brand-primary); background:var(--mq-brand-primary-soft);
}
.mq-brand-preview-service strong { display:block; margin-top: var(--mq-space-2); font-size:var(--mq-type-caption); }
.mq-brand-preview-service small { color:var(--mq-text-muted); font-size:10px; }
.mq-brand-savebar {
    position: sticky;
    bottom: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mq-space-4);
    padding: var(--mq-space-2) var(--mq-space-3);
    border: 1px solid var(--mq-border);
    border-radius: 13px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 32px rgba(16,24,40,.10);
    backdrop-filter: blur(14px);
}
.mq-brand-savebar p { margin: 0; color: var(--mq-text-muted); font-size:var(--mq-type-caption); }

/* Builders: visual selection and inspector separation */
.mq-form-builder-layout,
.mq-process-editor-layout {
    gap: var(--mq-space-5);
}
.mq-field-editor,
.mq-stage-editor {
    border-top: 3px solid color-mix(in srgb,var(--mq-brand-primary) 52%,transparent);
}
.mq-builder-item,
.mq-process-stage {
    box-shadow: none;
}
.mq-builder-item:hover,
.mq-process-stage:hover {
    border-color: color-mix(in srgb,var(--mq-brand-primary) 22%,var(--mq-border));
}
.mq-builder-item.selected,
.mq-process-stage.selected {
    border-color: color-mix(in srgb,var(--mq-brand-primary) 44%,var(--mq-border));
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--mq-brand-primary) 8%,transparent);
}

/* Responsive refinements */
@media (max-width: 1100px) {
    .mq-brand-studio-grid { grid-template-columns: 1fr; }
    .mq-brand-preview-shell { position: static; }
}
@media (max-width: 780px) {
    .mq-studio-sidebar,
    .mq-workspace-sidebar {
        padding: var(--mq-space-2) var(--mq-space-3);
    }
    .mq-studio-nav {
        display: flex;
        gap: var(--mq-space-1);
        overflow-x: auto;
    }
    .mq-studio-nav-section {
        display: contents;
    }
    .mq-studio-nav-label { display:none; }
    .mq-studio-nav a {
        min-width: max-content;
        background: rgba(255,255,255,.035);
    }
    .mq-studio-nav-icon { width:20px; flex-basis:20px; }
    .mq-studio-content,
    .mq-workspace-content { padding: var(--mq-space-5) var(--mq-space-3) var(--mq-space-8); }
    .mq-brand-color-grid { grid-template-columns: 1fr; }
    .mq-brand-preview-services { grid-template-columns:1fr; }
    .mq-brand-savebar { bottom:8px; align-items:stretch; flex-direction:column; }
}
@media (max-width: 700px) {
    .mq-topbar-inner { min-height: 64px; }
    .mq-brand > span:last-child { display:none; }
    .mq-hero { padding: var(--mq-space-6) var(--mq-space-5); }
    .mq-hero::before { inset:0 30% 0 0; }
}


/* Portal action summary */
.mq-portal-attention {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--mq-space-2);
    margin-top: var(--mq-space-4);
}
.mq-portal-attention-item {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: var(--mq-space-3);
    padding: var(--mq-space-3) var(--mq-space-4);
    border: 1px solid var(--mq-border);
    border-radius: var(--mq-radius-md);
    background: rgba(255,255,255,.86);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(16,24,40,.025);
    transition: border-color .14s ease, transform .14s var(--mq-ease), box-shadow .14s ease;
}
.mq-portal-attention-item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb,var(--mq-brand-primary) 20%,var(--mq-border));
    box-shadow: var(--mq-shadow-sm);
}
.mq-portal-attention-item.attention {
    border-color: color-mix(in srgb,var(--mq-warning) 22%,var(--mq-border));
    background: linear-gradient(135deg,var(--mq-warning-soft),#fff 60%);
}
.mq-portal-attention-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 10px;
    color: var(--mq-brand-primary);
    background: var(--mq-brand-primary-soft);
}
.mq-portal-attention-item.attention .mq-portal-attention-icon {
    color: var(--mq-warning);
    background: var(--mq-warning-soft);
}
.mq-portal-attention-item > span:last-child {
    display: grid;
    gap: var(--mq-space-1);
}
.mq-portal-attention-item small {
    color: var(--mq-text-muted);
    font-size:var(--mq-type-caption);
}
.mq-portal-attention-item strong {
    font-size:var(--mq-type-section);
    line-height: 1.2;
}
.mq-search-results {
    position: relative;
    z-index: 5;
    width: min(720px,100%);
    display: grid;
    margin-top: var(--mq-space-2);
    overflow: hidden;
    border: 1px solid var(--mq-border);
    border-radius: 12px;
    background: var(--mq-surface);
    box-shadow: var(--mq-shadow-md);
}
.mq-search-results a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mq-space-4);
    min-height: 48px;
    padding: var(--mq-space-2) var(--mq-space-3);
    border-top: 1px solid var(--mq-border);
    color: inherit;
    text-decoration: none;
}
.mq-search-results a:first-child { border-top:0; }
.mq-search-results a:hover { background:var(--mq-surface-muted); }
.mq-search-results small { color:var(--mq-text-muted); }
.mq-search-results p { margin: 0; padding: var(--mq-space-3); font-size:var(--mq-type-caption); }

@media (max-width:700px) {
    .mq-portal-attention { grid-template-columns:1fr; }
}

/* Shared interaction and responsive contract, refinement v2. */
.mq-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mq-skip-link { position:fixed; inset-block-start:8px; inset-inline-start:8px; transform:translateY(-160%); z-index:1000; padding: var(--mq-space-3) var(--mq-space-5); background:var(--mq-surface); border:2px solid var(--mq-action); border-radius:var(--mq-radius-sm); }
.mq-skip-link:focus { transform:none; }
.mq-mobile-navigation { display:none; }
.mq-table-command-bar { display:flex; flex-wrap:wrap; align-items:center; gap: var(--mq-space-4); margin-block: var(--mq-space-3); color:var(--mq-text-secondary); }
.mq-table-command-bar label { display:flex; align-items:center; gap: var(--mq-space-2); }
.mq-table-command-bar select { min-height:44px; padding: var(--mq-space-2); background:var(--mq-surface); border:1px solid var(--mq-border-strong); border-radius:var(--mq-radius-sm); }
.mq-work-table-wrap { overflow-x:auto; }
.mq-work-table { min-width:680px; }
.mq-density-compact .mq-work-table td { padding-block: var(--mq-space-2); }
.mq-builder-preview,.mq-route-map { padding: var(--mq-space-4); margin-block-end: var(--mq-space-4); border:1px solid var(--mq-border); border-radius:var(--mq-radius-md); background:var(--mq-surface-subtle); }
.mq-builder-preview summary,.mq-route-map summary { cursor:pointer; font-weight:600; min-height:44px; }
.mq-builder-preview .mq-field { margin-block: var(--mq-space-4); }
.mq-route-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap: var(--mq-space-3); }
.mq-route-card { display:flex; flex-direction:column; gap: var(--mq-space-2); padding: var(--mq-space-4); border:1px solid var(--mq-border); border-radius:var(--mq-radius-sm); background:var(--mq-surface); overflow-wrap:anywhere; }
.mq-route-card span,.mq-route-card small { color:var(--mq-text-secondary); }
.mq-inline-feedback,.mq-form-validation { overflow-wrap:anywhere; }
summary:focus-visible { outline:2px solid var(--mq-action); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.55; }
@media(max-width:780px) {
 .mq-mobile-navigation { display:block; position:relative; z-index:30; padding: var(--mq-space-3) var(--mq-space-4); background:var(--mq-surface); border-block-end:1px solid var(--mq-border); }
 .mq-mobile-navigation summary { min-height:44px; cursor:pointer; font-weight:600; }
 .mq-mobile-navigation nav { display:grid; gap: var(--mq-space-2); }
 .mq-mobile-navigation a { display:block; padding: var(--mq-space-3); border-radius:var(--mq-radius-sm); background:var(--mq-surface-muted); }
 .mq-studio-sidebar,.mq-workspace-sidebar { display:none !important; }
 .mq-studio-shell,.mq-workspace-shell { display:block; }
 .mq-studio-main,.mq-workspace-main { min-width:0; margin: 0; }
 .mq-studio-topbar,.mq-workspace-topbar { flex-wrap:wrap; gap: var(--mq-space-3); padding: var(--mq-space-3); }
 .mq-studio-content,.mq-workspace-content { padding: var(--mq-space-4); }
 .mq-topbar-inner { flex-wrap:wrap; }
 .mq-nav { display:flex !important; flex-basis:100%; order:3; justify-content:space-around; }
 .mq-nav a { min-height:44px; display:flex; align-items:center; }
 .mq-studio-editor-header,.mq-page-header-split { flex-wrap:wrap; gap: var(--mq-space-4); }
 .mq-form-builder-layout,.mq-process-editor-layout,.mq-brand-studio-grid { grid-template-columns:1fr; }
 .mq-field-editor,.mq-brand-preview-shell { position:static; }
 .mq-route-grid { grid-template-columns:1fr; }
 .mq-icon-button { min-width:44px; min-height:44px; }
}
.mq-feedback { display:flex; align-items:center; justify-content:space-between; gap: var(--mq-space-3); padding: var(--mq-space-4); margin-block: var(--mq-space-4); border:1px solid var(--mq-border); border-inline-start:4px solid var(--mq-info); border-radius:var(--mq-radius-sm); background:var(--mq-info-soft); color:var(--mq-text); }
.mq-feedback.error { border-inline-start-color:var(--mq-danger); background:var(--mq-danger-soft); }
.mq-feedback.success { border-inline-start-color:var(--mq-success); background:var(--mq-success-soft); }
.mq-loading-state { padding: var(--mq-space-6); }
.mq-skeleton { height:20px; margin-block: var(--mq-space-4); background:var(--mq-surface-muted); border-radius:var(--mq-radius-sm); animation:mq-pulse 1.5s ease-in-out infinite alternate; }
.mq-skeleton.short { width:60%; }
@keyframes mq-pulse { to { opacity:.45; } }
.mq-work-table th { font-size:var(--mq-type-sm); }
.mq-route-map p,.mq-builder-preview p { color:var(--mq-text-secondary); font-size:var(--mq-type-sm); margin-block: var(--mq-space-3); }
.mq-action-summary { display:flex; flex-wrap:wrap; gap: var(--mq-space-3); margin-block: var(--mq-space-4); }
.mq-action-summary a { display:flex; align-items:center; gap: var(--mq-space-2); padding: var(--mq-space-3) var(--mq-space-4); background:var(--mq-surface); border:1px solid var(--mq-border); border-radius:var(--mq-radius-md); }
:root {   --mq-line-body:1.7; }
.mq-studio-page h1,.mq-workspace-page h1 { font-size:var(--mq-type-title); }
.mq-panel-heading h2,.mq-studio-panel h2 { font-size:var(--mq-type-section); }
.mq-field small,.mq-route-card small { font-size:var(--mq-type-caption); line-height:var(--mq-line-body); }
.mq-studio-panel,.mq-field-editor-body { gap: var(--mq-space-4); }
@media(max-width:780px) {
 .mq-studio-topbar,.mq-workspace-topbar { display:flex !important; }
 .mq-topbar-actions { flex-wrap:wrap; }
 .mq-topbar-product span,.mq-workspace-topbar > div > span { display:none; }
 .mq-table-command-bar a { min-height:44px; display:inline-flex; align-items:center; }
 .mq-route-map,.mq-builder-preview { padding: var(--mq-space-3); }
 .mq-route-card { min-width:0; }
}
.mq-work-table td:first-child strong { white-space:nowrap; direction:ltr; unicode-bidi:isolate; }
.mq-work-table th:last-child { min-width:72px; }

/* Keep the latest public action adjacent to ownership without competing with the owner. */
.mq-owner-latest { display: grid; gap: .35rem; border-top: 1px solid var(--mq-border); padding-top: .75rem; margin-top: .75rem; }
.mq-owner-latest > span, .mq-owner-latest > small { color: var(--mq-text-muted); font-size: .8rem; }
.mq-owner-metadata dd small { display: block; font-size: .75rem; color: var(--mq-text-muted); }
.mq-notification-settings summary { cursor: pointer; font-weight: 600; padding-block: .5rem; }
.mq-automation-layout{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:24px;align-items:start}.mq-automation-layout>.mq-card{padding:20px;min-width:0}.mq-automation-list-item{display:flex;flex-direction:column;gap:6px;text-align:start;width:100%;border:1px solid var(--mq-border,#ddd);border-radius:12px;background:transparent;padding:14px;margin:12px 0;overflow-wrap:anywhere;font:inherit;color:inherit;cursor:pointer}.mq-automation-list-item[aria-pressed=true]{border-color:var(--mq-primary,#23b697)}.mq-automation-editor fieldset{min-width:0;border:0;padding:0}.mq-automation-editor .mq-field,.mq-automation-group>.mq-field{display:block;margin:10px 0}.mq-automation-editor .mq-input,.mq-automation-editor .mq-select,.mq-automation-editor .mq-textarea{width:100%;max-width:100%;box-sizing:border-box}.mq-automation-editor .mq-automation-group,.mq-automation-group{border:1px solid var(--mq-border,#ddd);padding:14px;border-radius:12px;margin:16px 0;min-width:0}.mq-automation-condition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end;border-bottom:1px solid var(--mq-border,#ddd);padding-bottom:14px;margin-bottom:14px}.mq-automation-summary{padding:16px;background:var(--mq-primary-soft,#e9f8f4);border-radius:12px;margin:20px 0;overflow-wrap:anywhere}.mq-automation-execution{padding:14px;border-bottom:1px solid var(--mq-border,#ddd);overflow-wrap:anywhere}.mq-automation-editor .mq-command-bar{flex-wrap:wrap}.mq-automation-editor small{overflow-wrap:anywhere}
@media(max-width:900px){.mq-automation-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.mq-automation-condition{grid-template-columns:minmax(0,1fr)}.mq-automation-layout>.mq-card{padding:12px}.mq-automation-editor .mq-automation-group{padding:10px}.mq-automation-editor .mq-command-bar .mq-button{width:100%}}
.mq-notification-row .mq-notification-dot {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: transparent;
    color: var(--mq-muted);
}
.mq-notification-row.unread .mq-notification-dot {
    background: transparent;
    color: var(--mq-brand-primary);
}