/* =====================================================================
   app-theme.css
   Shared app shell theme styles (customer/admin/mockup-facing components)
   ===================================================================== */

@import url("./design-system.css");

body.mk-theme,
body.app-shell {
    background: var(--mk-bg);
    margin: 0;
    padding: 0;
}

/* -- Base (scoped to .mk-page) ---------------------------------------- */
.mk-page {
    background: var(--mk-bg);
    color: var(--mk-text);
    font-family: var(--mk-font-sans);
    min-height: 100vh;
    transition: background 0.25s, color 0.25s;
    margin: 0;
    padding: 0;
}

/* -- Layout shell ------------------------------------------------------ */
.mk-shell {
    max-width: var(--mk-layout-max);
    width: min(var(--mk-layout-max), calc(100% - (var(--mk-gutter) * 2)));
    margin: 0 auto;
    padding: 32px 0 0;
}

/* -- Section dividers -------------------------------------------------- */
.mk-section { margin-bottom: 40px; }

.mk-section-title {
    font-family: var(--mk-font-bold);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mk-muted);
    margin: 0 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mk-border);
}

/* -- Cards ------------------------------------------------------------- */
.mk-card {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-shadow);
    padding: 20px;
}

.mk-card + .mk-card { margin-top: 12px; }

.mk-card-muted {
    background: var(--mk-surface-2);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    padding: 14px 16px;
}

/* -- Typography -------------------------------------------------------- */
.mk-h1 {
    font-family: var(--mk-font-display);
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mk-text);
    margin: 0 0 8px;
}

.mk-h2 {
    font-family: var(--mk-font-bold);
    font-size: var(--font-size-h2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mk-text);
    margin: 0 0 6px;
}

.mk-h3 {
    font-family: var(--mk-font-bold);
    font-size: var(--font-size-h4);
    color: var(--mk-text);
    margin: 0 0 4px;
}

.mk-body {
    font-family: var(--mk-font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mk-text);
}

.mk-small {
    font-family: var(--mk-font-sans);
    font-size: 0.85rem;
    color: var(--mk-muted);
}

.mk-accent-text { color: var(--mk-accent); }

/* -- Buttons ----------------------------------------------------------- */
.mk-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: var(--mk-radius-sm);
    font-family: var(--mk-font-bold);
    font-size: 0.9rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, box-shadow 0.15s;
    text-decoration: none !important;
    line-height: 1;
}

.mk-btn:hover  { filter: brightness(1.07); box-shadow: var(--mk-shadow); }
.mk-btn:active { filter: brightness(0.96); }

.mk-btn-primary   { background: var(--mk-accent);   color: #fff; border-color: var(--mk-accent);   }
.mk-btn-secondary { background: var(--mk-accent-2); color: #fff; border-color: var(--mk-accent-2); }
.mk-btn-outline   { background: transparent;         color: var(--mk-text);  border-color: var(--mk-border); }
.mk-btn-ghost     { background: var(--mk-surface-2); color: var(--mk-muted); border-color: transparent; }
.mk-btn-danger    { background: var(--mk-danger);    color: #fff; border-color: var(--mk-danger);  }

.mk-btn-sm { padding: 6px 14px; font-size: 0.8rem; border-radius: 6px; }

/* -- Icon button ------------------------------------------------------- */
.mk-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid var(--mk-border);
    background: var(--mk-surface-2);
    color: var(--mk-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, filter 0.15s;
}

.mk-icon-btn:hover { border-color: var(--mk-accent); filter: brightness(1.04); }

/* -- Form inputs ------------------------------------------------------- */
.mk-form-group { margin-bottom: 16px; }

.mk-label {
    display: block;
    font-family: var(--mk-font-bold);
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: var(--mk-text);
}

.mk-input,
.mk-select,
.mk-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    background: var(--mk-surface-2);
    color: var(--mk-text);
    font-family: var(--mk-font-sans);
    font-size: 0.95rem;
    transition: border-color 0.15s;
    outline: none;
    box-sizing: border-box;
}

.mk-input:focus,
.mk-select:focus,
.mk-textarea:focus {
    border-color: var(--mk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 18%, transparent);
}

.mk-password-field {
    position: relative;
    display: block;
    width: 100%;
}

.mk-password-toggle-target {
    padding-right: 44px;
}

.mk-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mk-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mk-password-toggle:hover {
    color: var(--mk-text);
    background: color-mix(in srgb, var(--mk-accent) 12%, transparent);
}

.mk-password-toggle:focus-visible {
    outline: 2px solid var(--mk-accent);
    outline-offset: 1px;
}

/* -- Colour swatches --------------------------------------------------- */
.mk-swatches { display: flex; flex-wrap: wrap; gap: 10px; }

.mk-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.mk-swatch-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--mk-border);
    box-shadow: var(--mk-shadow);
}

.mk-swatch-label {
    font-size: 0.72rem;
    color: var(--mk-muted);
    text-align: center;
    max-width: 72px;
    line-height: 1.3;
}

/* -- Top bar ----------------------------------------------------------- */
.mk-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 20px;
    border-bottom: 1px solid var(--mk-border);
    margin-bottom: 32px;
    gap: 12px;
}

.mk-logo {
    font-family: var(--mk-font-bold);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mk-text);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
}

.mk-logo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mk-accent);
}

/* -- Dark-mode toggle -------------------------------------------------- */
.mk-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--mk-muted);
    font-family: var(--mk-font-bold);
    cursor: pointer;
}

.mk-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.mk-toggle input { display: none; }

.mk-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--mk-border);
    transition: background 0.2s;
    cursor: pointer;
}

.mk-toggle input:checked + .mk-toggle-track { background: var(--mk-accent); }

.mk-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    transition: transform 0.2s;
    pointer-events: none;
}

.mk-toggle input:checked ~ .mk-toggle-thumb { transform: translateX(20px); }

/* -- Badges ------------------------------------------------------------ */
.mk-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-family: var(--mk-font-bold);
}

.mk-badge-accent  { background: color-mix(in srgb, var(--mk-accent)   15%, transparent); color: var(--mk-accent);   }
.mk-badge-success { background: color-mix(in srgb, var(--mk-success)  15%, transparent); color: var(--mk-success);  }
.mk-badge-danger  { background: color-mix(in srgb, var(--mk-danger)   15%, transparent); color: var(--mk-danger);   }
.mk-badge-muted   { background: var(--mk-surface-2); color: var(--mk-muted); }

/* -- Frame preview card ------------------------------------------------ */
.mk-frame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.mk-frame-card {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-shadow);
    padding: 12px;
    display: grid;
    gap: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mk-frame-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mk-accent) 35%, var(--mk-border));
    box-shadow: var(--mk-shadow-lg);
}

.mk-frame-preview {
    width: 100%;
    aspect-ratio: 5/3;
    border-radius: 6px;
    background: var(--mk-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 10px solid #2B2B2B;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.mk-frame-preview.bezel-white  {
    border-color: #F2F0E8;
    /* Keep white bezel visible on warm/white cards by adding a subtle ring. */
    box-shadow: inset 0 0 0 1px #beb6a4, 0 0 0 1px #b9b19e;
}
.mk-frame-preview.bezel-pink   { border-color: #F6C5D8; }
.mk-frame-preview.bezel-brown  { border-color: #6B4C3B; }

.mk-frame-preview span { font-size: 0.7rem; color: var(--mk-muted); }

.mk-frame-meta { font-size: 0.82rem; line-height: 1.4; }

.mk-frame-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mk-quick-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.mk-stat-value {
    font-family: var(--mk-font-display);
    font-size: 1.65rem;
    line-height: 1;
    margin: 6px 0;
}

/* -- Toast trigger row ------------------------------------------------- */
.mk-toast-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* -- Footer nav -------------------------------------------------------- */
.mk-footer {
    position: fixed;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--mk-layout-max), calc(100% - (var(--mk-gutter) * 2)));
    z-index: 900;
}

.mk-footer-bar {
    background: color-mix(in srgb, var(--mk-surface) 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-shadow-lg);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    gap: 6px;
}

.mk-footer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 10px;
    color: var(--mk-muted);
    font-size: 0.72rem;
    font-family: var(--mk-font-bold);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none !important;
}

.mk-footer-link .material-icons { font-size: 1.3rem; }

.mk-footer-link:hover,
.mk-footer-link.active {
    background: var(--mk-surface-2);
    color: var(--mk-accent);
}

/* -- Loader ------------------------------------------------------------ */
.mk-loader-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--mk-bg) 85%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}

.mk-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 12, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1600;
    padding: 16px;
}

.mk-modal-overlay[hidden] {
    display: none !important;
}

.mk-modal {
    width: min(460px, 100%);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: var(--mk-surface);
    box-shadow: var(--mk-shadow-lg);
    padding: 18px;
}

.mk-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mk-modal-head .mk-icon-btn {
    flex-shrink: 0;
    margin: -4px -4px 0 0;
}

.mk-modal-title {
    margin: 0 0 6px;
    font-family: var(--mk-font-display);
    font-size: 1.05rem;
}

.mk-modal-text {
    margin: 0;
    color: var(--mk-muted);
    font-size: 0.92rem;
}

.mk-progress-wrap {
    margin-top: 14px;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--mk-surface-2);
    overflow: hidden;
    border: 1px solid var(--mk-border);
}

.mk-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--mk-accent), var(--mk-accent-2));
    transition: width 0.25s ease;
}

.mk-progress-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--mk-muted);
}

.mk-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--mk-accent) 20%, transparent);
    border-top-color: var(--mk-accent);
    animation: mk-spin 0.85s linear infinite;
}

@keyframes mk-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Mockup-scoped modern toast treatment — theme-aware notifications */
body.mk-theme .app-alert-host {
    top: max(14px, env(safe-area-inset-top));
    width: min(520px, calc(100% - 24px));
}

body.mk-theme .app-alert {
    border-radius: var(--mk-radius, 14px);
    border: 1px solid var(--mk-border, #ddd8cc);
    box-shadow: var(--mk-shadow-lg, 0 18px 48px rgba(26,26,24,0.14));
    padding: 14px 16px;
    background: var(--mk-surface, #ffffff);
    color: var(--mk-text, #1a1a18);
}

html.mk-dark body.mk-theme .app-alert {
    border-color: var(--mk-border, #3a3628);
    background: var(--mk-surface, #1e1c16);
    color: var(--mk-text, #ede8dc);
}

body.mk-theme .app-alert__icon {
    width: 24px;
    height: 24px;
    font-size: 1.1rem;
}

body.mk-theme .app-alert__text {
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 500;
}

body.mk-theme .app-alert__close {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
    border-radius: 6px;
    background: transparent;
    transition: background-color 150ms ease;
}

body.mk-theme .app-alert__close:hover {
    background-color: var(--mk-surface-2, #f3f0e8);
}

html.mk-dark body.mk-theme .app-alert__close:hover {
    background-color: var(--mk-surface-2, #272419);
}

body.mk-theme .app-alert__progress {
    height: 3px;
    opacity: 0.8;
}

/* Success state */
body.mk-theme .app-alert--success {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.08) 0%, rgba(22, 163, 74, 0.03) 100%);
    border-color: var(--mk-success, #16a34a);
}

body.mk-theme .app-alert--success .app-alert__icon {
    color: var(--mk-success, #16a34a);
}

body.mk-theme .app-alert--success .app-alert__progress {
    background: var(--mk-success, #16a34a);
}

/* Error state */
body.mk-theme .app-alert--error {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%);
    border-color: var(--mk-danger, #dc2626);
}

body.mk-theme .app-alert--error .app-alert__icon {
    color: var(--mk-danger, #dc2626);
}

body.mk-theme .app-alert--error .app-alert__progress {
    background: var(--mk-danger, #dc2626);
}

/* Warning state */
body.mk-theme .app-alert--warning {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.03) 100%);
    border-color: var(--mk-accent, #d97706);
}

body.mk-theme .app-alert--warning .app-alert__icon {
    color: var(--mk-accent, #d97706);
}

body.mk-theme .app-alert--warning .app-alert__progress {
    background: var(--mk-accent, #d97706);
}

/* Info state */
body.mk-theme .app-alert--info {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
    border-color: var(--mk-info, #2563eb);
}

body.mk-theme .app-alert--info .app-alert__icon {
    color: var(--mk-info, #2563eb);
}

body.mk-theme .app-alert--info .app-alert__progress {
    background: var(--mk-info, #2563eb);
}

/* Neutral state */
body.mk-theme .app-alert--neutral {
    background: linear-gradient(135deg, rgba(107, 102, 89, 0.06) 0%, rgba(107, 102, 89, 0.02) 100%);
    border-color: var(--mk-border, #ddd8cc);
}

body.mk-theme .app-alert--neutral .app-alert__icon {
    color: var(--mk-muted, #6b6659);
}

body.mk-theme .app-alert--neutral .app-alert__progress {
    background: var(--mk-muted, #6b6659);
}

/* =====================================================================
   Settings-page component extensions
   ===================================================================== */

/* -- Sub-page topbar --------------------------------------------------- */
.mk-subpage-topbar {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    text-align: center;
    padding: 14px 0 20px;
    border-bottom: 1px solid var(--mk-border);
    margin-bottom: 28px;
    gap: 8px;
}

.mk-subpage-title {
    font-family: var(--mk-font-bold);
    font-size: 1rem;
    color: var(--mk-text);
    letter-spacing: 0.01em;
}

/* -- Section label ------------------------------------------------------ */
.mk-section-label {
    font-family: var(--mk-font-bold);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mk-muted);
    padding: 20px 4px 8px;
    margin: 0;
}

/* -- Settings list group ------------------------------------------------ */
.mk-list-group {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-shadow);
    overflow: hidden;
}

.mk-list-group + .mk-list-group { margin-top: 8px; }

.mk-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    color: var(--mk-text);
    text-decoration: none !important;
    cursor: pointer;
    background: var(--mk-surface);
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.13s;
    border-bottom: 1px solid var(--mk-border);
}

.mk-list-item:last-child { border-bottom: none; }
.mk-list-item:hover { background: var(--mk-surface-2); }

.mk-list-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--mk-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mk-accent);
}

.mk-list-icon .material-icons { font-size: 1.1rem; }

.mk-list-label {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mk-text);
}

.mk-list-value {
    font-size: 0.85rem;
    color: var(--mk-muted);
}

.mk-list-chevron {
    color: var(--mk-muted);
    font-size: 1.1rem !important;
    flex-shrink: 0;
}

.mk-list-item--danger { color: var(--mk-danger); }
.mk-list-item--danger .mk-list-label { color: var(--mk-danger); }
.mk-list-item--danger .mk-list-icon {
    background: color-mix(in srgb, var(--mk-danger) 12%, transparent);
    color: var(--mk-danger);
}

/* -- Profile avatar ----------------------------------------------------- */
.mk-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 0 20px;
    gap: 8px;
}

.mk-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--mk-surface-2);
    border: 3px solid var(--mk-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--mk-shadow);
}

.mk-avatar .material-icons {
    font-size: 3rem;
    color: var(--mk-muted);
}

.mk-avatar-name {
    font-family: var(--mk-font-bold);
    font-size: 1.15rem;
    color: var(--mk-text);
    margin: 0;
}

.mk-avatar-email {
    font-size: 0.85rem;
    color: var(--mk-muted);
    margin: 0;
}

/* -- Language selection ------------------------------------------------- */
.mk-lang-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    cursor: pointer;
    background: var(--mk-surface);
    border-bottom: 1px solid var(--mk-border);
    transition: background 0.13s, border-color 0.13s;
    text-decoration: none !important;
    color: var(--mk-text);
}

.mk-lang-item:last-child { border-bottom: none; }
.mk-lang-item:hover { background: var(--mk-surface-2); }

.mk-lang-item.is-active {
    background: color-mix(in srgb, var(--mk-accent) 8%, var(--mk-surface));
}

.mk-lang-flag { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }

.mk-lang-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
}

.mk-lang-check {
    color: var(--mk-accent);
    font-size: 1.1rem !important;
}

/* -- Toggle / Switch --------------------------------------------------- */
.mk-switch-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mk-border);
}

.mk-switch-row:last-child { border-bottom: none; }

.mk-switch-info { flex: 1; }

.mk-switch-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mk-text);
    display: block;
}

.mk-switch-desc {
    font-size: 0.8rem;
    color: var(--mk-muted);
    margin-top: 2px;
    display: block;
}

.mk-switch {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.mk-switch input { display: none; }

.mk-switch-track {
    position: absolute;
    inset: 0;
    background: var(--mk-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
}

.mk-switch input:checked + .mk-switch-track { background: var(--mk-accent); }
.mk-switch input:disabled + .mk-switch-track { opacity: 0.55; cursor: not-allowed; }

.mk-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    transition: transform 0.2s;
    pointer-events: none;
}

.mk-switch input:checked ~ .mk-switch-thumb { transform: translateX(22px); }

.mk-choice-switch-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mk-border);
}

.mk-choice-switch-row--compact {
    padding: 0;
    border-bottom: none;
}

.mk-choice-switch-row:last-child { border-bottom: none; }

.mk-choice-switch-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mk-choice-switch-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mk-text);
    line-height: 1.25;
}

.mk-choice-switch-desc {
    font-size: 0.82rem;
    color: var(--mk-muted);
    line-height: 1.35;
}

.mk-choice-switch-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    min-height: 36px;
}

.mk-choice-switch-option {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mk-muted);
    line-height: 1;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.mk-choice-switch-row[data-state="off"] .mk-choice-switch-option--off,
.mk-choice-switch-row[data-state="on"] .mk-choice-switch-option--on {
    color: var(--mk-text);
}

.mk-choice-switch-row[data-state="off"] .mk-choice-switch-option--on,
.mk-choice-switch-row[data-state="on"] .mk-choice-switch-option--off {
    opacity: 0.7;
}

.mk-choice-switch-toggle {
    margin: 0;
}

@media (max-width: 560px) {
    .mk-choice-switch-row {
        align-items: flex-start;
    }

    .mk-choice-switch-control {
        gap: 8px;
    }

    .mk-choice-switch-option {
        font-size: 0.8rem;
    }
}

/* -- Notification items ------------------------------------------------- */
.mk-notification-list { padding: 4px 0; }

.mk-notification-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mk-border);
}

.mk-notification-item:last-child { border-bottom: none; }

.mk-notif-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mk-notif-icon .material-icons { font-size: 1.2rem; }

.mk-notif-icon--info    { background: color-mix(in srgb, var(--mk-info)    15%, transparent); color: var(--mk-info);    }
.mk-notif-icon--warning { background: color-mix(in srgb, #F59E0B           15%, transparent); color: #F59E0B;           }
.mk-notif-icon--danger  { background: color-mix(in srgb, var(--mk-danger)  15%, transparent); color: var(--mk-danger);  }
.mk-notif-icon--success { background: color-mix(in srgb, var(--mk-success) 15%, transparent); color: var(--mk-success); }

.mk-notif-body { flex: 1; min-width: 0; }

.mk-notif-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mk-text);
    margin: 0 0 3px;
}

.mk-notif-message {
    font-size: 0.84rem;
    color: var(--mk-muted);
    margin: 0;
    line-height: 1.4;
}

.mk-notif-time {
    font-size: 0.75rem;
    color: var(--mk-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

/* -- Profile field rows ------------------------------------------------- */
.mk-field-row {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mk-border);
}

.mk-field-row:last-child { border-bottom: none; }

.mk-field-label {
    font-size: 0.72rem;
    font-family: var(--mk-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mk-muted);
    margin: 0 0 3px;
}

.mk-field-value {
    font-size: 0.97rem;
    color: var(--mk-text);
    margin: 0;
}

/* -- Legal / Privacy prose --------------------------------------------- */
.mk-prose {
    line-height: 1.75;
    font-size: 0.95rem;
    color: var(--mk-text);
}

.mk-prose h3 {
    font-family: var(--mk-font-bold);
    font-size: 1rem;
    color: var(--mk-text);
    margin: 22px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mk-border);
}

.mk-prose h3:first-child { margin-top: 0; }

.mk-prose p,
.mk-prose address {
    margin: 0 0 10px;
    color: var(--mk-muted);
    font-style: normal;
}

.mk-prose strong { color: var(--mk-text); font-weight: 700; }

.mk-prose a {
    color: var(--mk-accent);
    text-decoration: underline !important;
}

/* -- Dark-mode inline toggle (topbar right slot) ----------------------- */
.mk-topbar-dark-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid var(--mk-border);
    background: var(--mk-surface-2);
    color: var(--mk-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, filter 0.15s;
    flex-shrink: 0;
}

.mk-topbar-dark-btn:hover { border-color: var(--mk-accent); }

/* =====================================================================
   Facelift layer (formerly facelift.css)
   ===================================================================== */

body.app-shell {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--mk-bg);
    color: var(--fx-text);
}

#main_menu.app-shell__content {
    max-width: 1120px;
    width: min(1120px, 100% - 20px);
    margin: 0 auto;
    padding: 10px 0 calc(var(--fx-footer-h) + 14px);
}

.app-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--fx-border);
    background: var(--fx-surface-2);
    color: var(--fx-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-icon-btn:hover,
.app-icon-btn:focus-visible,
.app-chip-btn:hover,
.app-chip-btn:focus-visible {
    filter: brightness(1.03);
}

#header {
    display: none;
}

.facelift-page {
    display: grid;
    gap: 12px;
}

.fx-card {
    border: 1px solid var(--fx-border);
    border-radius: 16px;
    background: var(--fx-surface);
    box-shadow: var(--fx-shadow);
    padding: 14px;
}

.fx-card .dark-grey,
.fx-muted {
    color: var(--fx-muted) !important;
}

.fx-list-link {
    border: 1px solid var(--fx-border);
    border-radius: 14px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--fx-surface-2);
    color: var(--fx-text);
}

.fx-list-link:hover {
    border-color: var(--fx-accent);
}

#frames .fx-frame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.fx-frame-card {
    border: 1px solid var(--fx-border);
    border-radius: 16px;
    box-shadow: var(--fx-shadow);
    background: var(--fx-surface);
    padding: 12px;
    display: grid;
    gap: 10px;
}

.fx-frame-card img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 12px solid var(--frame-bezel-color, #3b3b3b);
}

#frames .fx-frame-preview-shell {
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
}

#frames .fx-frame-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    border: 12px solid var(--frame-bezel-color, #3b3b3b);
}

#footer {
    position: fixed;
    left: 50%;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(1120px, calc(100% - 20px));
    z-index: 920;
}

.app-footer-bar {
    border: 1px solid var(--fx-border);
    border-radius: 16px;
    box-shadow: var(--fx-shadow);
    background: color-mix(in srgb, var(--fx-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
}

.app-footer-link {
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--fx-surface-2);
    color: var(--fx-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.app-footer-link:hover,
.app-footer-link.active {
    border-color: var(--fx-accent);
}

.app-footer-link .material-icons {
    font-size: 1.25rem;
}

.app-auth-shell {
    width: min(640px, 100% - 20px);
    margin: 24px auto;
}

.app-auth-shell .form-control,
.facelift-page .form-control,
.facelift-page .form-select,
.facelift-page textarea {
    border-radius: 12px;
    border: 1px solid var(--fx-border);
    background: var(--fx-surface-2);
    color: var(--fx-text);
}

.facelift-page .btn-master-gradient,
.facelift-page .bg-master-gradient {
    background: linear-gradient(135deg, var(--fx-accent-2), var(--fx-accent)) !important;
}

@media (min-width: 1024px) {
    #main_menu.app-shell__content {
        padding-left: 0;
        padding-right: 0;
    }

    #main_menu.app-shell__content {
        margin-left: auto;
        width: min(1120px, calc(100% - 20px));
        max-width: none;
        padding-right: 12px;
        padding-bottom: 16px;
    }

    #footer {
        width: min(1120px, calc(100% - 32px));
    }
}

@media (max-width: 800px) {
    .app-footer-link span:last-child {
        display: none;
    }
}