/* MATUS v2.12: flattened critical tokens and local font declarations to remove the @import waterfall. */
:root {
    --font-main: 'Vazirmatn', sans-serif;

    --color-bg-dark-1: #111111;
    --color-bg-dark-2: #1b1714;

    --color-bg-light-1: #100d0b; /* dark-only alias */
    --color-bg-light-2: #1d1711; /* dark-only alias */

    --color-gold: #c4995b;
    --color-gold-soft: rgba(196, 153, 91, .22);

    --glass-dark: rgba(255, 255, 255, .08);
    --glass-dark-border: rgba(255, 255, 255, .14);

    --glass-light: rgba(255, 255, 255, .08); /* dark-only alias */
    --glass-light-border: rgba(255, 255, 255, .14); /* dark-only alias */

    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html,
body,
button,
input,
textarea,
select {
    font-family: 'Vazirmatn', sans-serif;
}


:root {
    color-scheme: dark;
    --matus-bg-dark:
        radial-gradient(circle at 88% 4%, rgba(196,153,91,.24), transparent 32%),
        radial-gradient(circle at 8% 82%, rgba(237,207,156,.085), transparent 30%),
        linear-gradient(135deg, #09090b 0%, #11100f 44%, #211913 100%);
    --matus-text-dark: #ffffff;
    --matus-muted-dark: rgba(255,255,255,.64);
    --matus-glass-dark: rgba(255,255,255,.085);
    --matus-glass-strong: rgba(255,255,255,.125);
    --matus-border-dark: rgba(255,255,255,.14);
    --matus-border-gold: rgba(196,153,91,.24);
    --matus-gold: #c4995b;
    --matus-gold-2: #edcf9c;
    --matus-gold-soft: rgba(196,153,91,.18);
    --matus-shadow-deep: 0 28px 90px rgba(0,0,0,.46);
}

html,
html[data-theme="dark"],
html[data-theme="light"] {
    color-scheme: dark;
    background: #09090b;
}

html.light-mode,
body.light-mode {
    color-scheme: dark;
}

body {
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

body,
body.light-mode,
html[data-theme="light"] body {
    background: var(--matus-bg-dark) !important;
    color: var(--matus-text-dark) !important;
}

[data-theme-toggle],
.theme-switch,
.theme-toggle,
.auth-theme-row {
    display: none !important;
}

.ui-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex: 0 0 auto;
}


/* MATUS DARK FINAL POLISH: fixed dark, shared empty/error/access states */
:root,
html[data-theme="dark"],
html[data-theme="light"]{
    color-scheme: dark;
    --matus-page-bg:
        radial-gradient(circle at 88% 4%, rgba(196,153,91,.24), transparent 32%),
        radial-gradient(circle at 8% 82%, rgba(237,207,156,.085), transparent 30%),
        linear-gradient(135deg, #09090b 0%, #11100f 44%, #211913 100%);
    --matus-surface: rgba(255,255,255,.072);
    --matus-surface-soft: rgba(255,255,255,.045);
    --matus-surface-strong: rgba(255,255,255,.115);
    --matus-line: rgba(255,255,255,.12);
    --matus-line-soft: rgba(255,255,255,.075);
    --matus-line-gold: rgba(196,153,91,.26);
    --matus-text: #fff;
    --matus-text-soft: rgba(255,255,255,.68);
    --matus-text-muted: rgba(255,255,255,.54);
    --matus-gold: #c4995b;
    --matus-gold-bright: #edcf9c;
    --matus-radius-card: 28px;
    --matus-focus-ring: 0 0 0 4px rgba(196,153,91,.14);
}

html,
body,
body.light-mode,
html[data-theme="light"] body{
    background: var(--matus-page-bg) !important;
    color: var(--matus-text) !important;
}

::selection{background:rgba(196,153,91,.34);color:#fff;}

input,select,textarea,button{font-family:inherit;}
input,select,textarea{
    background:rgba(255,255,255,.062);
    border-color:rgba(255,255,255,.12);
    color:#fff;
}
input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:rgba(196,153,91,.42)!important;
    box-shadow:var(--matus-focus-ring)!important;
}
select option, select optgroup{
    background:#16120f!important;
    color:#fff!important;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.36);}

.ui-empty,
.customer-empty-state,
.public-empty-state,
.empty-state,
.dash-empty,
.activity-empty{
    position:relative;
    overflow:hidden;
    border-radius:28px!important;
    background:radial-gradient(circle at top right, rgba(196,153,91,.13), transparent 40%), rgba(255,255,255,.052)!important;
    border:1px dashed rgba(237,207,156,.22)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 20px 55px rgba(0,0,0,.16)!important;
}
.ui-empty:before,
.customer-empty-state:before,
.public-empty-state:before,
.empty-state:before,
.dash-empty:before,
.activity-empty:before{
    content:"";
    position:absolute;
    inset:auto -18% -45% auto;
    width:180px;
    height:180px;
    border-radius:999px;
    background:rgba(196,153,91,.09);
    filter:blur(8px);
    pointer-events:none;
}
.ui-empty-icon{
    width:54px;
    height:54px;
    margin:0 auto 12px;
    border-radius:20px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg, rgba(196,153,91,.22), rgba(255,255,255,.06));
    border:1px solid rgba(196,153,91,.26);
    color:var(--matus-gold-bright);
}
.ui-empty h3,.empty-state h3,.activity-empty h3{color:#fff;}
.ui-empty p,.empty-state p,.activity-empty p{color:var(--matus-text-soft);}
.ui-empty-action{margin-top:16px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}

.matus-access-note,
.matus-readonly-note,
.roles-alert.is-error,
.users-alert.is-error{
    border-radius:22px;
    background:linear-gradient(145deg, rgba(255,190,90,.12), rgba(255,255,255,.035));
    border:1px solid rgba(255,190,90,.22);
    color:#ffdb9c;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.matus-error-body{min-height:100vh;}
.matus-error-page{
    min-height:100vh;
    padding:clamp(18px,4vw,42px);
    display:grid;
    place-items:center;
    background:var(--matus-page-bg);
}
.matus-error-card{
    position:relative;
    overflow:hidden;
    width:min(100%, 720px);
    padding:clamp(22px,4vw,42px);
    border-radius:36px;
    text-align:center;
    background:radial-gradient(circle at top right, rgba(196,153,91,.18), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.092), rgba(255,255,255,.038));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 34px 110px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.075);
    backdrop-filter:blur(22px);
}
.matus-error-orb{
    position:absolute;
    inset:-90px auto auto -90px;
    width:240px;
    height:240px;
    border-radius:999px;
    background:rgba(196,153,91,.12);
    filter:blur(10px);
}
.matus-error-logo{
    width:72px;
    height:72px;
    margin:0 auto 16px;
    display:grid;
    place-items:center;
    border-radius:26px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(196,153,91,.25);
}
.matus-error-logo svg{width:44px;height:44px;}
.matus-error-kicker{
    display:inline-flex;
    min-height:32px;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border-radius:999px;
    color:var(--matus-gold-bright);
    background:rgba(196,153,91,.13);
    border:1px solid rgba(196,153,91,.26);
    font-size:12px;
    font-weight:950;
}
.matus-error-code{
    display:block;
    margin:10px 0 0;
    font-size:clamp(62px,14vw,128px);
    line-height:.95;
    letter-spacing:-.06em;
    color:rgba(255,255,255,.08);
    text-shadow:0 1px 0 rgba(255,255,255,.08);
}
.matus-error-card h1{
    margin:12px 0 0;
    font-size:clamp(25px,4.5vw,42px);
    line-height:1.35;
}
.matus-error-card p{
    max-width:560px;
    margin:14px auto 0;
    color:var(--matus-text-soft);
    line-height:2;
    font-weight:800;
}
.matus-error-tracking{
    margin:18px auto 0;
    max-width:420px;
    padding:12px;
    border-radius:18px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.08);
    display:grid;
    gap:6px;
}
.matus-error-tracking span{color:var(--matus-text-muted);font-size:12px;font-weight:900;}
.matus-error-tracking code{direction:ltr;color:var(--matus-gold-bright);font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.error-actions{
    margin-top:22px;
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}
.error-actions a,.error-actions button{
    min-height:46px;
    padding:0 16px;
    border-radius:16px;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.12);
    font-weight:950;
    cursor:pointer;
    font-family:inherit;
}
.error-actions .btn-primary,.btn-primary{
    background:linear-gradient(135deg,#f0d79e,#c4995b);
    color:#21170d;
    border-color:rgba(196,153,91,.52);
}
.error-actions .btn-secondary,.btn-secondary{
    background:rgba(255,255,255,.06);
    color:#fff;
}

@media(max-width:640px){
    .matus-error-page{padding:14px;align-items:center;}
    .matus-error-card{border-radius:28px;padding:22px 16px;}
    .matus-error-logo{width:60px;height:60px;border-radius:22px;}
    .error-actions{display:grid;grid-template-columns:1fr;}
    .error-actions a,.error-actions button{width:100%;}
}

/* --------------------------------------------------
   MATUS UI FOUNDATION v5 - one visual language
   Dark-only, Apple/Tesla inspired glass system.
   Every new UI should use these tokens/classes first.
-------------------------------------------------- */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
    color-scheme: dark;
    --matus-ui-bg-0: #080706;
    --matus-ui-bg-1: #100d0b;
    --matus-ui-bg-2: #1d1711;
    --matus-ui-page-bg:
        radial-gradient(circle at 86% 2%, rgba(237,207,156,.145), transparent 26%),
        radial-gradient(circle at 8% 76%, rgba(196,153,91,.075), transparent 32%),
        radial-gradient(circle at 50% 120%, rgba(255,255,255,.045), transparent 40%),
        linear-gradient(145deg, var(--matus-ui-bg-0) 0%, var(--matus-ui-bg-1) 48%, var(--matus-ui-bg-2) 100%);
    --matus-ui-gold: #c4995b;
    --matus-ui-gold-2: #edcf9c;
    --matus-ui-gold-3: #b68a4e;
    --matus-ui-text: #fffaf2;
    --matus-ui-text-soft: rgba(255,250,242,.70);
    --matus-ui-text-muted: rgba(255,250,242,.52);
    --matus-ui-text-faint: rgba(255,250,242,.34);
    --matus-ui-glass: linear-gradient(145deg, rgba(255,255,255,.092), rgba(255,255,255,.041));
    --matus-ui-glass-soft: linear-gradient(145deg, rgba(255,255,255,.068), rgba(255,255,255,.032));
    --matus-ui-glass-strong: linear-gradient(145deg, rgba(255,255,255,.126), rgba(255,255,255,.052));
    --matus-ui-glass-hover: linear-gradient(145deg, rgba(255,255,255,.132), rgba(196,153,91,.062));
    --matus-ui-gold-wash: radial-gradient(circle at 88% 12%, rgba(237,207,156,.18), transparent 38%);
    --matus-ui-line: rgba(255,255,255,.135);
    --matus-ui-line-soft: rgba(255,255,255,.082);
    --matus-ui-line-gold: rgba(237,207,156,.245);
    --matus-ui-blur: blur(22px) saturate(132%);
    --matus-ui-blur-strong: blur(30px) saturate(145%);
    --matus-ui-shadow: 0 26px 82px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.085);
    --matus-ui-shadow-soft: 0 16px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
    --matus-ui-shadow-float: 0 34px 110px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08) inset;
    --matus-ui-radius-xs: 14px;
    --matus-ui-radius-sm: 18px;
    --matus-ui-radius-md: 22px;
    --matus-ui-radius-lg: 28px;
    --matus-ui-radius-xl: 34px;
    --matus-ui-radius-2xl: 42px;
    --matus-ui-transition: .22s cubic-bezier(.2,.8,.2,1);
    --matus-ui-button-glass:
        radial-gradient(circle at 86% 16%, rgba(237,207,156,.12), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
    --matus-ui-button-gold:
        linear-gradient(135deg, rgba(237,207,156,.95), rgba(196,153,91,.88));
    --matus-ui-focus: 0 0 0 4px rgba(237,207,156,.13);

    /* Aliases used by older CSS files. Keep these as the single bridge. */
    --public-gold: var(--matus-ui-gold);
    --public-gold-2: var(--matus-ui-gold-2);
    --public-glass: rgba(255,255,255,.072);
    --public-glass-2: rgba(255,255,255,.105);
    --public-border: var(--matus-ui-line);
    --public-muted: var(--matus-ui-text-soft);
    --public-soft: var(--matus-ui-text-muted);
    --public-shadow: var(--matus-ui-shadow);
}

html,
body,
body.light-mode,
html[data-theme="light"] body {
    color-scheme: dark !important;
    background: var(--matus-ui-page-bg) !important;
    color: var(--matus-ui-text) !important;
}

.matus-ui-surface,
.matus-ui-card,
.matus-glass-panel,
.matus-panel,
.matus-list-card,
.glass-panel {
    background: var(--matus-ui-gold-wash), var(--matus-ui-glass) !important;
    border: 1px solid var(--matus-ui-line) !important;
    box-shadow: var(--matus-ui-shadow-soft) !important;
    backdrop-filter: var(--matus-ui-blur) !important;
    -webkit-backdrop-filter: var(--matus-ui-blur) !important;
}

.matus-ui-card,
.matus-glass-panel,
.matus-panel,
.glass-panel { border-radius: var(--matus-ui-radius-lg); }
.matus-list-card { border-radius: var(--matus-ui-radius-md); }

.matus-ui-surface:hover,
.matus-ui-card:hover,
.matus-list-card:hover {
    border-color: var(--matus-ui-line-gold) !important;
    background: var(--matus-ui-gold-wash), var(--matus-ui-glass-hover) !important;
}

.matus-ui-button,
.btn-secondary,
.customer-secondary,
.public-secondary-cta,
.public-login,
.public-icon-btn,
.error-actions .btn-secondary {
    background: var(--matus-ui-button-glass) !important;
    border: 1px solid var(--matus-ui-line) !important;
    color: var(--matus-ui-text) !important;
    box-shadow: var(--matus-ui-shadow-soft) !important;
    backdrop-filter: var(--matus-ui-blur) !important;
    -webkit-backdrop-filter: var(--matus-ui-blur) !important;
}

.matus-ui-button:hover,
.btn-secondary:hover,
.customer-secondary:hover,
.public-secondary-cta:hover,
.public-login:hover,
.public-icon-btn:hover {
    transform: translateY(-1px);
    border-color: var(--matus-ui-line-gold) !important;
    background: var(--matus-ui-glass-hover) !important;
}

.matus-ui-button-primary,
.btn-primary,
.customer-submit,
.auth-submit,
.error-actions .btn-primary {
    background: var(--matus-ui-button-gold) !important;
    border: 1px solid rgba(237,207,156,.44) !important;
    color: #1f160c !important;
    box-shadow: 0 22px 60px rgba(196,153,91,.18), inset 0 1px 0 rgba(255,255,255,.32) !important;
}

:where(input, select, textarea) {
    background: rgba(255,255,255,.064) !important;
    border: 1px solid var(--matus-ui-line-soft) !important;
    color: var(--matus-ui-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
:where(input, select, textarea):focus {
    border-color: var(--matus-ui-line-gold) !important;
    box-shadow: var(--matus-ui-focus), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
:where(input, textarea)::placeholder { color: var(--matus-ui-text-faint) !important; }
:where(select option, select optgroup) { background: #17120e !important; color: #fffaf2 !important; }

@media (prefers-color-scheme: light) {
    html, body { color-scheme: dark !important; background: var(--matus-ui-page-bg) !important; }
}


/* --------------------------------------------------
   MATUS upload brew overlay - shared customer/admin uploader feedback
-------------------------------------------------- */
html.is-matus-uploading,
html.is-matus-uploading body { overflow: hidden !important; }
.matus-upload-brew-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
    background:
        radial-gradient(circle at 50% 38%, rgba(196,153,91,.18), transparent 36%),
        rgba(7,6,5,.72);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.matus-upload-brew-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.matus-upload-brew-card {
    width: min(340px, calc(100vw - 34px));
    min-height: 280px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 16px;
    text-align: center;
    border-radius: 34px;
    padding: 28px 22px;
    color: var(--matus-ui-text, #fff8ee);
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)),
        radial-gradient(circle at top right, rgba(196,153,91,.18), transparent 48%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 30px 90px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(26px) saturate(1.15);
    -webkit-backdrop-filter: blur(26px) saturate(1.15);
}
.matus-upload-brew-card strong {
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -.02em;
}
.matus-upload-brew-card p {
    margin: 0;
    max-width: 260px;
    color: rgba(255,255,255,.68);
    line-height: 1.9;
    font-size: 13px;
}
.matus-coffee-loader {
    position: relative;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 18px 32px rgba(196,153,91,.18));
}
.matus-coffee-cup {
    position: relative;
    width: 86px;
    height: 70px;
    overflow: hidden;
    border-radius: 18px 18px 26px 26px;
    border: 2px solid rgba(237,207,156,.76);
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.matus-coffee-cup::after {
    content: '';
    position: absolute;
    left: -24px;
    top: 17px;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(237,207,156,.55);
    border-radius: 50%;
}
.matus-coffee-fill {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 18%;
    border-radius: 16px 16px 24px 24px;
    background:
        linear-gradient(180deg, rgba(237,207,156,.92), rgba(196,153,91,.88)),
        linear-gradient(90deg, rgba(255,255,255,.16), transparent 45%, rgba(255,255,255,.12));
    animation: matus-coffee-fill 2.2s ease-in-out infinite;
}
.matus-coffee-steam {
    position: absolute;
    top: 2px;
    width: 8px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(237,207,156,.0), rgba(237,207,156,.62), rgba(237,207,156,.0));
    opacity: .68;
    animation: matus-steam-rise 1.8s ease-in-out infinite;
}
.matus-coffee-steam.steam-one { right: 40px; animation-delay: .1s; }
.matus-coffee-steam.steam-two { left: 42px; animation-delay: .55s; }
.has-upload-error { border-color: rgba(255,107,107,.75) !important; box-shadow: 0 0 0 4px rgba(255,107,107,.12) !important; }
button.is-upload-submitting,
input[type="submit"].is-upload-submitting { opacity: .74; cursor: progress !important; }
@keyframes matus-coffee-fill {
    0% { height: 16%; }
    48% { height: 78%; }
    100% { height: 16%; }
}
@keyframes matus-steam-rise {
    0% { transform: translateY(12px) scale(.72); opacity: 0; }
    35% { opacity: .7; }
    100% { transform: translateY(-16px) scale(1.05); opacity: 0; }
}
@media (max-width: 640px) {
    .matus-upload-brew-card { min-height: 254px; border-radius: 30px; }
    .matus-coffee-loader { width: 100px; height: 100px; }
}


/* ==================================================
   MATUS LUXURY DARK FOUNDATION v3
   Shared semantic tokens for public surfaces
================================================== */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
    --matus-lux-page: #080706;
    --matus-lux-page-2: #100c09;
    --matus-lux-page-gradient:
        radial-gradient(circle at 88% 3%, rgba(189,139,78,.15), transparent 30%),
        radial-gradient(circle at 8% 68%, rgba(115,67,34,.11), transparent 34%),
        linear-gradient(155deg, #070706 0%, #0d0a08 48%, #15100c 100%);
    --matus-lux-glass:
        linear-gradient(145deg, rgba(255,255,255,.068), rgba(255,255,255,.022));
    --matus-lux-glass-strong:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.034));
    --matus-lux-glass-hover:
        linear-gradient(145deg, rgba(255,255,255,.115), rgba(193,143,82,.045));
    --matus-lux-line: rgba(255,255,255,.105);
    --matus-lux-line-soft: rgba(255,255,255,.065);
    --matus-lux-line-gold: rgba(231,195,143,.20);
    --matus-lux-text: #fff9f0;
    --matus-lux-text-soft: rgba(255,249,240,.68);
    --matus-lux-text-muted: rgba(255,249,240,.48);
    --matus-lux-gold: #bd8e54;
    --matus-lux-gold-soft: #e6c38e;
    --matus-lux-shadow: 0 28px 88px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.065);
    --matus-lux-shadow-soft: 0 16px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
    --matus-lux-blur: blur(20px) saturate(125%);
    --matus-lux-blur-strong: blur(28px) saturate(138%);
    --matus-lux-radius-xl: 36px;
    --matus-lux-radius-lg: 28px;
    --matus-lux-radius-md: 20px;
}