.mcc-shell {
    --mcc-text: #151515;
    --mcc-muted: #6e6e6e;
    --mcc-line: #dedede;
    --mcc-soft: #f5f5f3;
    --mcc-dark: #151515;
    --mcc-white: #fff;
    max-width: 1080px;
    margin: 48px auto;
    padding: 0 24px 56px;
    color: var(--mcc-text);
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}
.mcc-shell *, .mcc-shell *::before, .mcc-shell *::after { box-sizing: border-box; }
.mcc-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:28px 0 30px; border-bottom:1px solid var(--mcc-line); }
.mcc-eyebrow { font-size:11px; letter-spacing:.18em; font-weight:700; margin-bottom:8px; }
.mcc-header h1, .mcc-panel h1, .mcc-panel h2, .mcc-panel h3 { margin:0; font-weight:500; letter-spacing:-.03em; color:var(--mcc-text); }
.mcc-header h1 { font-size:clamp(34px,5vw,58px); line-height:.95; }
.mcc-status-pill { border:1px solid var(--mcc-line); border-radius:99px; padding:8px 13px; font-size:12px; }
.mcc-stepbar { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--mcc-line); margin:28px 0; border:1px solid var(--mcc-line); }
.mcc-stepbar span { background:var(--mcc-white); padding:13px 16px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#999; }
.mcc-stepbar span.is-active { color:var(--mcc-text); font-weight:700; }
.mcc-stepbar span.is-done { color:#444; background:var(--mcc-soft); }
.mcc-panel { border:1px solid var(--mcc-line); background:var(--mcc-white); padding:clamp(24px,5vw,54px); }
.mcc-section-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:34px; }
.mcc-section-head h2 { font-size:clamp(28px,4vw,44px); }
.mcc-section-head h3 { font-size:26px; }
.mcc-section-head p { margin:10px 0 0; color:var(--mcc-muted); max-width:680px; line-height:1.6; }
.mcc-section-head-small { margin-top:38px; margin-bottom:18px; }
.mcc-label, .mcc-field > span, .mcc-fieldset legend { display:block; font-size:12px; font-weight:700; letter-spacing:.04em; margin-bottom:9px; }
.mcc-textarea, .mcc-field input, .mcc-field textarea { width:100%; border:1px solid var(--mcc-line); border-radius:0; padding:15px 16px; background:#fff; color:var(--mcc-text); font:inherit; line-height:1.5; outline:none; }
.mcc-textarea { min-height:260px; resize:vertical; }
.mcc-textarea:focus, .mcc-field input:focus, .mcc-field textarea:focus { border-color:#222; box-shadow:0 0 0 1px #222; }
.mcc-upload-wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 0; border-bottom:1px solid var(--mcc-line); }
.mcc-help { color:var(--mcc-muted); font-size:12px; line-height:1.45; max-width:620px; }
.mcc-upload-button, .mcc-button { appearance:none; border:1px solid var(--mcc-dark); border-radius:0; padding:13px 18px; font:inherit; font-size:13px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; transition:opacity .15s ease, background .15s ease; }
.mcc-upload-button { background:#fff; color:#111; white-space:nowrap; }
.mcc-button-primary { background:var(--mcc-dark); color:#fff !important; }
.mcc-button-secondary { background:#fff; color:#111 !important; }
.mcc-button:hover, .mcc-upload-button:hover { opacity:.78; }
.mcc-button:disabled { opacity:.45; cursor:wait; }
.mcc-file-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.mcc-file-chip { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--mcc-soft); font-size:12px; }
.mcc-file-chip small { color:var(--mcc-muted); }
.mcc-actions { display:flex; gap:12px; margin-top:34px; }
.mcc-actions-end { justify-content:flex-end; }
.mcc-actions-between { justify-content:space-between; }
.mcc-actions-center { justify-content:center; }
.mcc-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.mcc-field { display:block; }
.mcc-span-2 { grid-column:span 2; }
.mcc-fieldset { border:0; padding:0; margin:34px 0 0; }
.mcc-checks { display:flex; gap:10px; flex-wrap:wrap; }
.mcc-checks label, .mcc-inline-check { display:flex; align-items:center; gap:8px; border:1px solid var(--mcc-line); padding:10px 12px; cursor:pointer; font-size:13px; }
.mcc-checks input, .mcc-inline-check input { accent-color:#111; }
.mcc-review-images { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.mcc-image-card { border:1px solid var(--mcc-line); background:#fff; cursor:grab; position:relative; }
.mcc-image-card.is-dragging { opacity:.4; }
.mcc-image-card.is-cover { border-color:#111; box-shadow:inset 0 0 0 1px #111; }
.mcc-image-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#eee; }
.mcc-image-meta { padding:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; }
.mcc-image-meta > span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mcc-cover-button { border:0; background:transparent; padding:0; font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; text-decoration:underline; }
.mcc-inline-check { margin-top:12px; width:max-content; max-width:100%; }
.mcc-message { padding:13px 15px; margin-top:22px; font-size:13px; line-height:1.5; }
.mcc-error { border:1px solid #b42318; color:#8a1c13; background:#fff7f6; }
.mcc-warning { border:1px solid #b7a06b; background:#fffaf0; }
.mcc-link-button { border:0; background:transparent; padding:5px 0; font:inherit; font-size:13px; cursor:pointer; text-decoration:underline; }
.mcc-success-mark { width:72px; height:72px; border-radius:50%; background:#111; color:#fff; display:grid; place-items:center; margin:10px auto 24px; font-size:30px; }
.mcc-created-copy { text-align:center; max-width:660px; margin:0 auto; }
.mcc-created-copy h2 { font-size:clamp(30px,4vw,48px); }
.mcc-created-copy p { color:var(--mcc-muted); line-height:1.6; }
.mcc-login-shell { max-width:520px; border:1px solid var(--mcc-line); padding:40px; }
.mcc-login-shell h1 { font-size:40px; }
.mcc-muted { color:var(--mcc-muted); }
.mcc-login-shell label { font-size:12px; font-weight:700; }
.mcc-login-shell input[type="text"], .mcc-login-shell input[type="password"] { width:100%; padding:12px; border:1px solid var(--mcc-line); }
.mcc-login-shell input[type="submit"] { background:#111; color:#fff; border:0; padding:12px 18px; cursor:pointer; }
@media (max-width: 760px) {
    .mcc-shell { margin-top:20px; padding-left:14px; padding-right:14px; }
    .mcc-header { align-items:flex-end; }
    .mcc-stepbar span { padding:11px 8px; font-size:10px; }
    .mcc-panel { padding:22px 16px; }
    .mcc-section-head, .mcc-upload-wrap { flex-direction:column; }
    .mcc-grid-2 { grid-template-columns:1fr; }
    .mcc-span-2 { grid-column:span 1; }
    .mcc-review-images { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mcc-actions-between { flex-direction:column-reverse; }
    .mcc-actions-between .mcc-button { width:100%; }
}

/* v0.1.1 brand + crop editor */
.mcc-shell {
    --mcc-brand: #5e3c23;
    --mcc-brand-text: #f3efe8;
}
.mcc-button,
.mcc-upload-button {
    background: var(--mcc-brand);
    border-color: var(--mcc-brand);
    color: var(--mcc-brand-text) !important;
}
.mcc-button-primary,
.mcc-button-secondary,
.mcc-upload-button {
    background: var(--mcc-brand);
    border-color: var(--mcc-brand);
    color: var(--mcc-brand-text) !important;
}
.mcc-button:hover,
.mcc-upload-button:hover {
    opacity: .88;
    background: var(--mcc-brand);
    color: var(--mcc-brand-text) !important;
}
.mcc-cover-button,
.mcc-crop-button {
    color: var(--mcc-brand);
}
.mcc-image-preview {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    background:#eee;
}
.mcc-image-toolbar {
    display:flex;
    justify-content:flex-end;
    padding:9px 10px 0;
}
.mcc-crop-button {
    appearance:none;
    border:0;
    background:transparent;
    padding:0;
    font:inherit;
    font-size:11px;
    font-weight:700;
    text-decoration:underline;
    cursor:pointer;
}
body.mcc-crop-open { overflow:hidden; }
.mcc-crop-modal[hidden] { display:none !important; }
.mcc-crop-modal {
    position:fixed;
    inset:0;
    z-index:999999;
    display:grid;
    place-items:center;
    padding:24px;
}
.mcc-crop-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.68);
}
.mcc-crop-dialog {
    position:relative;
    z-index:1;
    width:min(920px, 100%);
    max-height:calc(100vh - 48px);
    overflow:auto;
    background:#fff;
    padding:28px;
    box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.mcc-crop-head {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    margin-bottom:20px;
}
.mcc-crop-head h3 {
    margin:0;
    font-size:28px;
    font-weight:500;
    letter-spacing:-.03em;
}
.mcc-crop-close {
    appearance:none;
    width:40px;
    height:40px;
    border:1px solid var(--mcc-line);
    background:#fff;
    color:#111;
    font-size:25px;
    line-height:1;
    cursor:pointer;
}
.mcc-crop-stage {
    width:100%;
    background:#ece9e5;
    display:flex;
    justify-content:center;
    overflow:hidden;
}
.mcc-crop-stage canvas {
    display:block;
    width:min(100%, 800px);
    height:auto;
    aspect-ratio:4/3;
    background:#ddd;
}
.mcc-crop-help {
    color:var(--mcc-muted);
    font-size:12px;
    line-height:1.5;
    margin-top:10px;
}
.mcc-crop-controls {
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    margin-top:20px;
}
.mcc-crop-control-group {
    display:flex;
    align-items:center;
    gap:8px;
}
.mcc-crop-control-group > span {
    font-size:12px;
    font-weight:700;
    margin-right:4px;
}
.mcc-crop-control-group button {
    appearance:none;
    width:42px;
    height:42px;
    border:1px solid var(--mcc-brand);
    background:#fff;
    color:var(--mcc-brand);
    font-size:20px;
    line-height:1;
    cursor:pointer;
}
.mcc-crop-control-group button:hover {
    background:var(--mcc-brand);
    color:var(--mcc-brand-text);
}
.mcc-crop-actions { margin-top:24px; }

@media (max-width: 760px) {
    .mcc-crop-modal { padding:10px; }
    .mcc-crop-dialog { padding:18px; max-height:calc(100vh - 20px); }
    .mcc-crop-controls { gap:14px; }
    .mcc-crop-control-group { width:100%; flex-wrap:wrap; }
    .mcc-crop-control-group > span { width:100%; }
}

/* v0.1.2 — hard brand override inside the client center.
   Prevents Elementor/theme accent colors from leaking into controls. */
.mcc-shell {
    --e-global-color-accent: #5e3c23;
    --e-global-color-primary: #5e3c23;
}
.mcc-shell .mcc-button,
.mcc-shell .mcc-upload-button,
.mcc-shell button.mcc-button,
.mcc-shell button.mcc-upload-button,
.mcc-shell input[type="submit"] {
    border-color:#5e3c23 !important;
    background:#5e3c23 !important;
    color:#f3efe8 !important;
    box-shadow:none !important;
}
.mcc-shell .mcc-button:hover,
.mcc-shell .mcc-button:active,
.mcc-shell .mcc-upload-button:hover,
.mcc-shell .mcc-upload-button:active,
.mcc-shell input[type="submit"]:hover,
.mcc-shell input[type="submit"]:active {
    border-color:#5e3c23 !important;
    background:#5e3c23 !important;
    color:#f3efe8 !important;
}
.mcc-shell button:focus,
.mcc-shell button:focus-visible,
.mcc-shell a:focus,
.mcc-shell a:focus-visible,
.mcc-shell input:focus,
.mcc-shell input:focus-visible,
.mcc-shell textarea:focus,
.mcc-shell textarea:focus-visible {
    outline:2px solid #5e3c23 !important;
    outline-offset:2px;
    border-color:#5e3c23 !important;
    box-shadow:none !important;
}
.mcc-shell .mcc-link-button,
.mcc-shell .mcc-cover-button,
.mcc-shell .mcc-crop-button {
    color:#5e3c23 !important;
}
.mcc-shell .mcc-crop-control-group button,
.mcc-shell .mcc-crop-close {
    border-color:#5e3c23 !important;
    color:#5e3c23 !important;
    box-shadow:none !important;
}
.mcc-shell .mcc-crop-control-group button:hover,
.mcc-shell .mcc-crop-control-group button:focus,
.mcc-shell .mcc-crop-control-group button:active {
    background:#5e3c23 !important;
    border-color:#5e3c23 !important;
    color:#f3efe8 !important;
}
.mcc-shell input[type="checkbox"],
.mcc-shell input[type="radio"] {
    accent-color:#5e3c23 !important;
}

/* v0.1.3 — deterministic review form grid.
   Explicit areas prevent Elementor/theme label rules from shifting fields. */
.mcc-shell .mcc-grid-2 {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
        "title title"
        "year location"
        "developer architect"
        "interior role"
        "description description" !important;
    column-gap:28px !important;
    row-gap:24px !important;
    align-items:start !important;
}
.mcc-shell .mcc-grid-2 > .mcc-field {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    position:static !important;
    transform:none !important;
    grid-column:auto !important;
}
.mcc-shell .mcc-grid-2 > .mcc-field-title { grid-area:title !important; }
.mcc-shell .mcc-grid-2 > .mcc-field-year { grid-area:year !important; }
.mcc-shell .mcc-grid-2 > .mcc-field-location { grid-area:location !important; }
.mcc-shell .mcc-grid-2 > .mcc-field-developer { grid-area:developer !important; }
.mcc-shell .mcc-grid-2 > .mcc-field-architect { grid-area:architect !important; }
.mcc-shell .mcc-grid-2 > .mcc-field-interior { grid-area:interior !important; }
.mcc-shell .mcc-grid-2 > .mcc-field-role { grid-area:role !important; }
.mcc-shell .mcc-grid-2 > .mcc-field-description { grid-area:description !important; }
.mcc-shell .mcc-grid-2 > .mcc-field > span {
    display:block !important;
    width:auto !important;
    margin:0 0 9px !important;
    padding:0 !important;
}
.mcc-shell .mcc-grid-2 > .mcc-field input,
.mcc-shell .mcc-grid-2 > .mcc-field textarea {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
}
@media (max-width:760px) {
    .mcc-shell .mcc-grid-2 {
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-areas:
            "title"
            "year"
            "location"
            "developer"
            "architect"
            "interior"
            "role"
            "description" !important;
        column-gap:0 !important;
        row-gap:20px !important;
    }
}


/* v0.1.4 create actions */
#monforte-client-center .mcc-create-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}
@media (max-width: 767px) {
    #monforte-client-center .mcc-actions-between,
    #monforte-client-center .mcc-create-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    #monforte-client-center .mcc-create-actions .mcc-button {
        width: 100%;
    }
}

/* v0.1.5 — Existing projects + AI edit review */
#monforte-client-center .mcc-mode-tabs {
    display:flex;
    gap:8px;
    margin:28px 0 30px;
    border-bottom:1px solid rgba(94,60,35,.18);
}
#monforte-client-center .mcc-mode-tab {
    appearance:none;
    border:0 !important;
    border-bottom:2px solid transparent !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#6d655f !important;
    padding:12px 2px 13px !important;
    margin:0 26px -1px 0 !important;
    font:inherit;
    font-weight:600;
    cursor:pointer;
    box-shadow:none !important;
}
#monforte-client-center .mcc-mode-tab:hover,
#monforte-client-center .mcc-mode-tab.is-active {
    color:#5e3c23 !important;
    border-bottom-color:#5e3c23 !important;
}
#monforte-client-center .mcc-existing-projects {
    padding-top:4px;
}
#monforte-client-center .mcc-project-list {
    display:grid;
    gap:10px;
    margin-top:24px;
}
#monforte-client-center .mcc-project-row {
    display:grid !important;
    grid-template-columns:82px minmax(0,1fr) auto 24px;
    gap:18px;
    align-items:center;
    width:100%;
    padding:12px !important;
    text-align:left;
    background:#fff !important;
    border:1px solid #ded9d4 !important;
    border-radius:4px !important;
    color:#1c1c1c !important;
    cursor:pointer;
    box-shadow:none !important;
}
#monforte-client-center .mcc-project-row:hover {
    border-color:#5e3c23 !important;
    background:#fbf9f6 !important;
}
#monforte-client-center .mcc-project-row img,
#monforte-client-center .mcc-project-row-placeholder {
    width:82px;
    height:62px;
    object-fit:cover;
    background:#eee9e4;
    display:block;
}
#monforte-client-center .mcc-project-row-main {
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:5px;
}
#monforte-client-center .mcc-project-row-main strong {
    font-size:16px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
#monforte-client-center .mcc-project-row-main small {
    color:#746d67;
    font-size:13px;
    line-height:1.35;
}
#monforte-client-center .mcc-project-row-arrow {
    font-size:20px;
    color:#5e3c23;
}
#monforte-client-center .mcc-status {
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    background:#eee9e4;
    color:#5e3c23;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}
#monforte-client-center .mcc-status-publish { background:#e8eee8; }
#monforte-client-center .mcc-list-loading,
#monforte-client-center .mcc-empty-state {
    padding:32px 0;
    color:#746d67;
}
#monforte-client-center .mcc-edit-back {
    margin-bottom:28px !important;
}
#monforte-client-center .mcc-edit-project-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:32px;
    padding-bottom:30px;
    margin-bottom:30px;
    border-bottom:1px solid #ded9d4;
}
#monforte-client-center .mcc-edit-project-head h2 {
    margin:5px 0 8px;
}
#monforte-client-center .mcc-edit-project-cover {
    width:180px;
    aspect-ratio:4/3;
    object-fit:cover;
    flex:0 0 auto;
}
#monforte-client-center .mcc-optional {
    color:#8b837c;
    font-weight:400;
    margin-left:5px;
}
#monforte-client-center .mcc-change-list {
    display:grid;
    gap:18px;
    margin:24px 0 30px;
}
#monforte-client-center .mcc-change-card {
    border:1px solid #ded9d4;
    background:#fff;
    padding:20px;
}
#monforte-client-center .mcc-change-label {
    font-weight:700;
    margin-bottom:14px;
}
#monforte-client-center .mcc-change-columns {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:22px;
}
#monforte-client-center .mcc-change-before,
#monforte-client-center .mcc-change-after {
    min-width:0;
}
#monforte-client-center .mcc-change-before > span,
#monforte-client-center .mcc-change-after > span {
    display:block;
    margin-bottom:7px;
    color:#7c746d;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}
#monforte-client-center .mcc-change-before > div {
    padding:12px 14px;
    min-height:48px;
    background:#f6f4f1;
    color:#5e5751;
    white-space:pre-wrap;
}
#monforte-client-center .mcc-change-editor input,
#monforte-client-center .mcc-change-editor textarea {
    width:100% !important;
    margin:0 !important;
}
#monforte-client-center .mcc-edit-typologies {
    margin:0;
}
#monforte-client-center .mcc-image-action-note {
    margin-top:12px;
    color:#6d655f;
    font-size:13px;
}
#monforte-client-center #mcc-edit-success-stage {
    text-align:center;
    padding:48px 0 20px;
}
@media (max-width:760px) {
    #monforte-client-center .mcc-project-row {
        grid-template-columns:64px minmax(0,1fr) 18px;
        gap:12px;
    }
    #monforte-client-center .mcc-project-row img,
    #monforte-client-center .mcc-project-row-placeholder { width:64px; height:48px; }
    #monforte-client-center .mcc-project-row .mcc-status { display:none; }
    #monforte-client-center .mcc-change-columns { grid-template-columns:1fr; }
    #monforte-client-center .mcc-edit-project-head { flex-direction:column-reverse; }
    #monforte-client-center .mcc-edit-project-cover { width:100%; max-width:280px; }
    #monforte-client-center .mcc-mode-tab { margin-right:16px !important; }
}