@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-300-vietnamese.woff2?v=bvp1') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-300-latin-ext.woff2?v=bvp1') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-300-latin.woff2?v=bvp1') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-400-vietnamese.woff2?v=bvp1') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-400-latin-ext.woff2?v=bvp1') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-400-latin.woff2?v=bvp1') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-500-vietnamese.woff2?v=bvp1') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-500-latin-ext.woff2?v=bvp1') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-500-latin.woff2?v=bvp1') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-600-vietnamese.woff2?v=bvp1') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-600-latin-ext.woff2?v=bvp1') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-600-latin.woff2?v=bvp1') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-700-vietnamese.woff2?v=bvp1') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-700-latin-ext.woff2?v=bvp1') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-700-latin.woff2?v=bvp1') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-800-vietnamese.woff2?v=bvp1') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-800-latin-ext.woff2?v=bvp1') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-800-latin.woff2?v=bvp1') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
    
    --file-pdf-bg:  #FDE7E7; --file-pdf-fg:  #B91C1C;
    --file-docx-bg: #E1ECFB; --file-docx-fg: #0A4174;
    --file-xlsx-bg: #DCF1E4; --file-xlsx-fg: #15803D;
    --file-pptx-bg: #FCE6CE; --file-pptx-fg: #B45309;
    --file-zip-bg:  #EDE9F6; --file-zip-fg:  #5B4FB7;
    --file-img-bg:  #E5F3FA; --file-img-fg:  #0284C7;
    --file-txt-bg:  #ECEFF3; --file-txt-fg:  #4B5563;

    
    --blue-50:  #EAF3F8;
    --blue-100: #BDD8E9;
    --blue-200: #9DC8E1;
    --blue-300: #7BBDE8;
    --blue-400: #6EA2B3;
    --blue-500: #4E8EA2;
    --blue-600: #49769F;
    --blue-700: #0A4174;
    --blue-800: #062E54;
    --blue-900: #001D39;

    
    --slate-0:   #FFFFFF;
    --slate-25:  #FAFBFC;
    --slate-50:  #F4F6F8;
    --slate-100: #ECEFF3;
    --slate-200: #DEE3EA;
    --slate-300: #C4CBD6;
    --slate-400: #98A2B3;
    --slate-500: #6B7280;
    --slate-600: #4B5563;
    --slate-700: #344054;
    --slate-800: #1F2937;
    --slate-900: #0F172A;

    
    --brand:         var(--blue-700);
    --brand-hover:   var(--blue-800);
    --brand-pressed: var(--blue-900);
    --brand-soft:    var(--blue-50);
    --brand-accent:  var(--blue-500);
    --brand-on:      #FFFFFF;

    
    --bg-app:     var(--slate-50);
    --bg-surface: var(--slate-0);
    --bg-sunken:  var(--slate-100);

    
    --fg-1: var(--slate-900);
    --fg-2: var(--slate-700);
    --fg-3: var(--slate-500);
    --fg-4: var(--slate-400);

    
    --border-1:      var(--slate-200);
    --border-2:      var(--slate-300);
    --border-strong: var(--slate-400);

    
    --success-500: #16A34A;
    --warning-500: #F59E0B;
    --error-500:   #EF4444;
    --info-500:    #0EA5E9;

    
    --success-50: #E8F7EE;  --success-700: #166534;
    --warning-50: #FFF6E5;  --warning-700: #B45309;
    --error-50:   #FEECEC;  --error-700:   #B91C1C;
    --info-50:    #E6F4FB;  --info-600:    #0284C7;
    --purple-50:  #F1EEF9;  --purple-600:  #6A4DBB;   

    --status-success-bg:  var(--success-50);   --status-success-fg:  var(--success-700);
    --status-warning-bg:  var(--warning-50);   --status-warning-fg:  var(--warning-700);
    --status-error-bg:    var(--error-50);     --status-error-fg:    var(--error-700);
    --status-info-bg:     var(--info-50);      --status-info-fg:     var(--info-600);
    --status-approval-bg: var(--purple-50);    --status-approval-fg: var(--purple-600);

    
    --ai-anthropic:  #D97757;   
    --ai-gemini:     #3B82F6;   
    --ai-openai:     #16A34A;   
    --ai-azure:      #0284C7;   
    --ai-perplexity: #20808D;   
    --ai-compat:     #7C3AED;   
    --ai-xai:        #0F172A;   
    --ai-deepseek:   #4D6BFE;   
    --ai-groq:       #F55036;   
    --ai-mistral:    #FF7000;   

    
    --code-bg:  #1E1E1E;
    --code-fg:  #D4D4D4;
    --code-req: #9CDCFE;   
    --code-res: #CE9178;   

    
    --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    
    --mud-palette-background-grey: var(--mud-palette-background-gray);

    --fs-display: 32px;
    --fs-h1:      26px;
    --fs-h2:      22px;
    --fs-h3:      18px;
    --fs-body:    15px;
    --fs-body-sm: 14px;
    --fs-caption: 12px;
    --fs-tiny:    11px;

    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    
    --radius-xs:     4px;
    --radius-sm:     8px;
    --radius-input:  12px;
    --radius-button: 12px;
    --radius-card:   16px;
    --radius-pill:   999px;

    
    --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-card: 0 2px 6px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-pop:  0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);

    
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    
    --app-bg: var(--bg-app);
    --app-surface: var(--bg-surface);
    --app-primary: var(--brand);
    --app-primary-lighten: var(--brand-soft);
    --app-secondary: var(--brand-accent);

    --app-text-primary: var(--fg-1);
    --app-text-secondary: var(--fg-3);

    --app-divider: var(--border-1);
    --app-divider-strong: var(--border-2);

    
    --app-success: var(--success-500);
    --app-error: var(--error-500);
    --app-warning: var(--warning-500);
    --app-info: var(--info-500);

    
    --app-info-bg:     rgba(2, 132, 199, 0.08);   
    --app-info-fg:     #075985;                    
    --app-info-border: rgba(2, 132, 199, 0.18);

    
    --app-success-bg:  rgba(34, 197, 94, 0.10);
    --app-success-fg:  #15803D;

    
    --app-step-idle-bg: var(--slate-100);
    --app-step-idle-text: var(--fg-4);
    --app-step-idle-border: var(--border-1);

    
    --app-avatar-warm-from: #F4A584;
    --app-avatar-warm-to:   #E0795C;
    --app-avatar-cool-from: #4A7FB8;
    --app-avatar-cool-to:   var(--brand);   

    
    --chat-ava-0: #E8590C;   
    --chat-ava-1: #1098AD;   
    --chat-ava-2: #2F9E44;   
    --chat-ava-3: #7048E8;   
    --chat-ava-4: #C2255C;   
    --chat-ava-5: #1971C2;   

    
    --app-sla-warn-text:   #C2410C;          
    --app-sla-warn-bg:     rgba(251, 146, 60, 0.16);  
    --app-sla-warn-border: rgba(251, 146, 60, 0.40);
    --app-sla-err-text:    #B91C1C;          
    --app-sla-err-bg:      rgba(239, 68, 68, 0.14);
    --app-sla-err-border:  rgba(239, 68, 68, 0.38);
    --app-sla-ok-text:     #15803D;          
    --app-sla-ok-bg:       rgba(22, 163, 74, 0.12);
    --app-sla-ok-border:   rgba(22, 163, 74, 0.32);

    
    --app-shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);
    --app-shadow-card: var(--shadow-card);
    
    --app-shadow-card-strong: 0 12px 32px -8px rgba(10, 65, 116, 0.20), 0 4px 12px -4px rgba(10, 65, 116, 0.08);
    --app-shadow-logo: 0 4px 12px -4px rgba(10, 65, 116, 0.15);
    --app-shadow-btn-primary: 0 4px 16px rgba(10, 65, 116, 0.28);
    --app-shadow-btn-primary-hover: 0 6px 20px rgba(10, 65, 116, 0.38);
    --app-shadow-step-active: 0 2px 8px rgba(10, 65, 116, 0.35);
    --app-shadow-appbar: 0 1px 8px rgba(15, 23, 42, 0.06);
    --app-shadow-drawer: 2px 0 16px rgba(15, 23, 42, 0.06);
    --app-shadow-overlay-card: 0 8px 32px rgba(15, 23, 42, 0.10);

    
    --app-video-bg: #0B1220;

    
    --app-focus-ring: 0 0 0 3px rgba(10, 65, 116, 0.12);

    
    --app-auth-header-gradient: linear-gradient(180deg, #F4F8FB 0%, var(--bg-surface) 100%);
    
    --app-auth-bg-gradient: radial-gradient(ellipse at top, #EAF3F8 0%, var(--bg-app) 60%);
}


html[data-theme="dark"],
html[data-theme="dark"] body {
    
    color-scheme: dark;
}
html[data-theme="dark"] {
    
    --slate-0:   #16202E;
    --slate-25:  #131C29;
    --slate-50:  #0F1826;
    --slate-100: #1B2636;
    --slate-200: #263447;
    --slate-300: #33445C;
    --slate-400: #7A8AA0;
    --slate-500: #97A6B8;
    --slate-600: #B4C0CE;
    --slate-700: #CBD5E1;
    --slate-800: #DDE5EE;
    --slate-900: #EDF2F7;

    
    --brand:         #5B9BD5;
    --brand-hover:   #74ACDD;
    --brand-pressed: #8FBDE5;
    --brand-soft:    #16283C;
    --brand-accent:  #6FA6D6;
    --brand-on:      #FFFFFF;

    
    --success-500: #22C55E;
    --warning-500: #FBBF24;
    --error-500:   #F87171;
    --info-500:    #38BDF8;

    
    --app-info-bg:     rgba(56, 189, 248, 0.12);
    --app-info-fg:     #7DD3FC;
    --app-info-border: rgba(56, 189, 248, 0.25);
    --app-success-bg:  rgba(34, 197, 94, 0.14);
    --app-success-fg:  #4ADE80;
    --app-sla-warn-text: #FDBA74;
    --app-sla-err-text:  #FCA5A5;
    --app-sla-ok-text:   #4ADE80;

    
    --app-focus-ring: 0 0 0 3px rgba(91, 155, 213, 0.25);
}


html,
body {
    min-height: 100%;
    margin: 0;
    
    color-scheme: light;
    background: var(--app-bg);
    font-family: var(--font-sans);
    color: var(--app-text-primary);
}

body {
    overflow-x: hidden;
}


.mud-layout:has(.app-main-content) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;        
    min-height: 0;
    overflow: hidden;      
}

.crm-app-bar.mud-appbar {
    position: static !important;
    flex: 0 0 auto;
    
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.app-main-content.mud-main-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-top: 0 !important;
    
    overscroll-behavior-y: contain;
}


.ptr-indicator {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 54px);   
    left: 50%;
    transform: translateX(-50%) translateY(0);
    min-width: 34px;
    height: 34px;
    border-radius: 17px;
    background: var(--mud-palette-surface, #fff);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
    opacity: 0;
    z-index: 1190;              
    pointer-events: none;
    transition: none;           
}
.ptr-indicator.ptr-animate {
    transition: transform .25s ease, opacity .25s ease;   
}
.ptr-indicator .ptr-spinner {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 3px dotted var(--mud-palette-primary, #0A4174);   
    border-top-color: transparent;    
    border-radius: 50%;
}

.ptr-indicator .ptr-hint {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--mud-palette-primary, #0A4174);
}
.ptr-indicator .ptr-hint:empty { display: none; }
.ptr-indicator.ptr-holding { padding: 0 14px; }
.ptr-indicator.ptr-ready   { padding: 0 14px; }
.ptr-indicator.ptr-loading { padding: 0 14px; }

.ptr-indicator.ptr-holding .ptr-spinner,
.ptr-indicator.ptr-ready .ptr-spinner,
.ptr-indicator.ptr-loading .ptr-spinner {
    animation: ptr-spin .7s linear infinite;                 
}
@keyframes ptr-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.ptr-indicator.ptr-ready {
    background: var(--mud-palette-primary, #0A4174);
}
.ptr-indicator.ptr-ready .ptr-spinner {
    border-color: #fff;
    border-top-color: transparent;    
}
.ptr-indicator.ptr-ready .ptr-hint { color: #fff; }


@media (max-width: 600px) {
    .crm-app-bar.mud-appbar {
        transition: transform .28s var(--ease-out, ease), margin-bottom .28s var(--ease-out, ease);
        will-change: transform;
    }
    
    .dock-wrap {
        transition: transform .28s var(--ease-out, ease), margin-top .28s var(--ease-out, ease), opacity .15s ease;
    }
    
    .mud-layout.nav-auto-hidden .crm-app-bar.mud-appbar,
    .mud-layout.nav-auto-hidden-hdr .crm-app-bar.mud-appbar {
        transform: translateY(-100%);
        margin-bottom: calc(-1 * var(--ah-header, 60px));
        pointer-events: none;
    }
    .mud-layout.nav-auto-hidden .dock-wrap {
        transform: translateY(100%);
        margin-top: calc(-1 * var(--ah-dock, 68px));
        pointer-events: none;
    }
}


.chat-head-menu-pop.mud-popover {
    box-shadow: 0 14px 38px -6px rgba(15, 23, 42, .34) !important;
    border-radius: 12px !important;
}
.chat-head-menu-pop .mud-list-item,
.chat-head-menu-pop .mud-menu-item {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}
.chat-head-menu-pop .mud-icon-root {
    font-size: 1.4rem !important;   
}


.gf-tagmenu {
    
    max-height: 52vh;
    overflow-y: auto;
    min-width: 208px;
}


.gf-tagsearch-item {
    cursor: default;
    background: transparent !important;
}


.chat-kho-menu {
    min-width: 216px;
    max-width: 300px;
    padding: 4px 0;
}


.chat-kho-menu .ckm-head {
    padding: 6px 14px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-kho-menu .ckm-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    text-align: left;
    text-decoration: none;   
    cursor: pointer;
}

.chat-kho-menu .ckm-item:hover,
.chat-kho-menu .ckm-item:focus-visible {
    background: var(--mud-palette-action-default-hover);
}


.chat-kho-menu .ckm-item.is-nguyhiem {
    color: var(--mud-palette-error);
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 4px;
    padding-top: 10px;
}


.ckm-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background-color .12s ease;
}

.ckm-more:hover,
.ckm-more:focus-visible {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.chat-info-file-row:hover .ckm-more,
.chat-info-link-row:hover .ckm-more,
.chat-info-media-cell:hover .ckm-more,
.cmg-cell:hover .ckm-more,
.ckm-more:focus-visible {
    opacity: 1;
}


.ckm-more.on-anh {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    background: rgba(15, 23, 42, .55);
    color: #fff;
}

.ckm-more.on-anh:hover,
.ckm-more.on-anh:focus-visible {
    background: rgba(15, 23, 42, .78);
    color: #fff;
}

@media (hover: none) {
    
    .ckm-more { opacity: 1; }
}


.chat-rowmenu-head { display: none; }


.chat-rowmenu-scrim {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, .42);
    animation: chat-rowmenu-dim .22s ease both;
    touch-action: none;   
}


@media (max-width: 720px) {
    
    .chat-rowmenu-pop.mud-popover {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;      
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        
        z-index: 1401 !important;
    }

    

    
    .chat-rowmenu-pop .mud-list.chat-rowmenu {
        
        position: relative;
        top: var(--sheet-dy, 0px);
        transition: top .22s cubic-bezier(.32, .72, 0, 1);
        background: var(--mud-palette-surface);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 34px -8px rgba(15, 23, 42, .38);
        max-height: 78vh;
        max-height: 78dvh;
        overflow-y: auto;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }

    
    .chat-rowmenu-head {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 24px 8px 10px 16px;      
        border-bottom: 1px solid var(--app-divider);
    }

    
    .chat-rowmenu-head .app-sheet-grab {
        display: block;
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        width: 44px;
        height: 22px;
        touch-action: none;
        cursor: grab;
    }

    .chat-rowmenu-head .app-sheet-grab::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 0;
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: var(--app-divider);
    }

    .chat-rowmenu-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .chat-rowmenu-close {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: var(--slate-100);
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .chat-rowmenu-close:active {
        background: var(--app-divider);
    }

    .chat-rowmenu-close svg {
        width: 17px;
        height: 17px;
        display: block;
    }

    
    .chat-rowmenu-pop.mud-popover-open .chat-rowmenu {
        animation: chat-rowmenu-up .28s cubic-bezier(.16, 1, .3, 1);
    }

    
    .chat-rowmenu-pop .mud-menu-item {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@keyframes chat-rowmenu-up { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes chat-rowmenu-dim { from { opacity: 0; } to { opacity: 1; } }


.pwa-guide-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}
.pwa-guide-head-ic {
    display: inline-flex;
    color: var(--brand);
}
.pwa-guide {
    display: flex;
    flex-direction: column;
}
.pwa-guide-intro {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fg-2);
}
.pwa-guide-now {
    border-radius: 12px !important;
    margin-bottom: 4px;
}
.pwa-guide-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 12px;
    color: var(--fg-3);
}
.pwa-guide-or::before,
.pwa-guide-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-1);
}
.pwa-guide-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    counter-reset: pwa-step;
}
.pwa-guide-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pwa-guide-step-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pwa-guide-shot {
    display: block;
    margin-left: 62px;
    width: calc(100% - 62px);
    max-width: 320px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--fg-1) 14%, var(--bg-surface));
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
}
@media (max-width: 600px) {
    
    .pwa-guide-shot {
        margin-left: 0;
        margin-inline: auto;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 60vh;
    }
}
.pwa-guide-illus {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, var(--bg-surface));
    border: 1.5px solid color-mix(in srgb, var(--brand) 26%, var(--bg-surface));
    counter-increment: pwa-step;
}
.pwa-guide-illus .mud-icon-root {
    font-size: 26px;
}
.pwa-guide-illus::before {
    content: counter(pwa-step);
    position: absolute;
    top: -7px;
    left: -7px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pwa-guide-txt {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fg-1);
}
.pwa-guide-txt b {
    color: var(--brand);
    font-weight: 700;
}
.pwa-guide-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    background: color-mix(in srgb, var(--warning-500) 12%, var(--bg-surface));
    color: color-mix(in srgb, var(--warning-500) 62%, var(--fg-1));
}
.pwa-guide-hint .mud-icon-root {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 16px;
    color: color-mix(in srgb, var(--warning-500) 75%, var(--fg-1));
}
.pwa-install-btn {
    white-space: nowrap;
}


.pwa-promo-sheet {
    border-radius: 18px;
}
.pwa-promo-body {
    padding: 20px 20px 12px !important;
}
.pwa-promo-grab {
    display: none;
}
.pwa-promo-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.pwa-promo-logo {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
}
.pwa-promo-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--fg-1);
    line-height: 1.3;
}
.pwa-promo-sub {
    font-size: 12.5px;
    color: var(--fg-2);
    margin-top: 2px;
}
.pwa-promo-benefits {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pwa-promo-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fg-1);
}
.pwa-promo-benefits .mud-icon-root {
    flex-shrink: 0;
    font-size: 20px;
    margin-top: 1px;
    color: var(--brand);
}
.pwa-promo-benefits b {
    color: var(--brand);
}
.pwa-promo-cta {
    height: 44px;
    font-weight: 700;
}
.pwa-promo-later {
    margin-top: 4px;
    color: var(--fg-2) !important;
}
@media (max-width: 600px) {
    body .mud-dialog.pwa-promo-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        
        padding-bottom: env(safe-area-inset-bottom);
    }
    .pwa-promo-grab {
        display: block;
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--fg-1) 18%, transparent);
        margin: 0 auto 12px;
    }
}


.app-main-content:has(.chat-page) {
    overflow: hidden;
}

.app-main-content:has(.chat-page) > .mud-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


.app-main-content:has(.inbox-page) {
    overflow: hidden;
}

.app-main-content:has(.inbox-page) > .mud-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}




.cap-badge {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 6px; padding: 0 6px; min-width: 22px; height: 16px;
    border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1;
    background: var(--mud-palette-warning-hover); color: var(--mud-palette-warning-darken);
    white-space: nowrap; flex: 0 0 auto; vertical-align: middle;
}


.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
    padding: 4px 9px; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
.badge .dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.badge-success  { background: var(--status-success-bg);  color: var(--status-success-fg); }
.badge-warning  { background: var(--status-warning-bg);  color: var(--status-warning-fg); }
.badge-error    { background: var(--status-error-bg);    color: var(--status-error-fg); }
.badge-info     { background: var(--status-info-bg);     color: var(--status-info-fg); }
.badge-approval { background: var(--status-approval-bg); color: var(--status-approval-fg); }
.badge-neutral  { background: var(--slate-100);          color: var(--fg-2); }
.badge-brand    { background: var(--brand-soft);         color: var(--brand); }


.chip-x { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: inherit;
    font-size: 12px; line-height: 1.2; padding: 3px 8px 3px 10px; border-radius: 999px; white-space: nowrap;
    color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); }
.chip-x:hover { background: color-mix(in srgb, var(--brand) 18%, var(--bg-surface)); }
.chip-x .x { font-size: 14px; line-height: 1; opacity: .75; }
.chip-x:hover .x { opacity: 1; }


.st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--slate-400); flex: 0 0 auto; }
.st-dot--success { background: var(--success-500); }
.st-dot--warning { background: var(--warning-500); }
.st-dot--error   { background: var(--error-500); }
.st-dot--info    { background: var(--info-500); }
.st-dot--brand   { background: var(--brand); }


.tab-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap;
    min-height: 34px; padding: 0 10px; color: var(--fg-3); background: var(--bg-surface);
    border: 1px solid var(--border-1); border-radius: 8px;
    transition: border-color .12s, color .12s, background .12s; }
.tab-pill:hover:not(:disabled) { border-color: var(--brand); color: var(--fg-1); }
.tab-pill:disabled { opacity: .55; cursor: default; }
.tab-pill.on { color: var(--fg-1); font-weight: 600; border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, var(--bg-surface)); }
.tab-pill-cnt { font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px;
    border-radius: 999px; background: var(--slate-100); color: var(--fg-2); }
.tab-pill.on .tab-pill-cnt { background: var(--brand); color: var(--brand-on); }


.empty-box { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 36px 16px; text-align: center; }
.empty-box .ico { display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%; background: var(--slate-100); color: var(--fg-3); }
.empty-box .t1 { font-size: 14px; font-weight: 600; color: var(--fg-2); }
.empty-box .t2 { font-size: 13px; color: var(--fg-3); max-width: 360px; }


.avt { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
    background: var(--brand-soft); color: var(--brand);
    font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.avt img { width: 100%; height: 100%; object-fit: cover; }
.avt--sm { width: 22px; height: 22px; font-size: 10px; }
.avt--lg { width: 36px; height: 36px; font-size: 14px; }




.mud-button-root.mud-button-filled-primary {
    box-shadow: var(--app-shadow-btn-primary);
}
.mud-button-root.mud-button-filled-primary:hover {
    box-shadow: var(--app-shadow-btn-primary-hover);
}
.mud-button-root.mud-button-filled-primary:active {
    box-shadow: var(--app-shadow-btn-primary);
}




.mud-switch .mud-switch-track {
    border-radius: 999px !important;
    opacity: 1 !important;
    background-color: var(--slate-300) !important;
    transition: background-color 180ms var(--ease-out);
}


.mud-switch.mud-switch-color-primary .mud-switch-base.mud-checked ~ .mud-switch-track,
.mud-switch.mud-switch-color-primary .mud-switch-base.mud-checked + .mud-switch-track {
    background-color: var(--mud-palette-primary) !important;
}
.mud-switch.mud-switch-color-success .mud-switch-base.mud-checked ~ .mud-switch-track,
.mud-switch.mud-switch-color-success .mud-switch-base.mud-checked + .mud-switch-track {
    background-color: var(--mud-palette-success) !important;
}
.mud-switch.mud-switch-color-error .mud-switch-base.mud-checked ~ .mud-switch-track,
.mud-switch.mud-switch-color-error .mud-switch-base.mud-checked + .mud-switch-track {
    background-color: var(--mud-palette-error) !important;
}


.mud-switch .mud-switch-thumb {
    background-color: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20),
                0 1px 1px rgba(15, 23, 42, 0.08) !important;
}


.mud-switch.mud-disabled .mud-switch-track {
    background-color: var(--slate-200) !important;
}
.mud-switch.mud-disabled .mud-switch-thumb {
    background-color: var(--slate-100) !important;
}


.mud-switch .mud-switch-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    margin-left: 4px;
}


.mud-input-slot,
.mud-input-root,
.mud-input input,
.mud-input textarea,
.mud-input-slot::placeholder,
.mud-input input::placeholder,
.mud-input textarea::placeholder {
    font-weight: 400 !important;
}


.mud-input-slot::placeholder,
.mud-input input::placeholder,
.mud-input textarea::placeholder {
    font-size: 0.85em !important;
}


.app-soft-card {
    border-radius: 20px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

.app-page-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-muted-text {
    color: var(--app-text-secondary);
}


.validation-message {
    color: var(--mud-palette-error, #ef4444);
    font-size: 12px;
    margin-top: 4px;
}



.r-grid       { display: grid; }
.r-grid-2     { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-grid-3     { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-grid-4     { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-grid-5     { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r-grid-6     { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }


.r-grid-main-side  { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }

.r-grid-tickets    { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }

.r-grid-org        { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.r-grid-att-chart  { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.r-grid-asset-edit { display: grid; grid-template-columns: 200px minmax(0, 1fr); }

.r-grid-dash-3     { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.r-grid-account    { display: grid; grid-template-columns: 320px minmax(0, 1fr); }

@media (max-width: 1280px) {
    .r-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .r-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .r-grid-account { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
    .r-grid-main-side,
    .r-grid-tickets,
    .r-grid-org,
    .r-grid-att-chart  { grid-template-columns: minmax(0, 1fr); }
    .r-grid-6          { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .r-grid-5          { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .r-grid-4          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-grid-dash-3     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .r-grid-6,
    .r-grid-5,
    .r-grid-4,
    .r-grid-3,
    .r-grid-dash-3     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-grid-asset-edit { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .r-grid-6,
    .r-grid-5,
    .r-grid-4,
    .r-grid-3,
    .r-grid-2,
    .r-grid-dash-3     { grid-template-columns: 1fr; }
}




.app-dialog-section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-divider);
}


.app-dialog-fixed-height {
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.app-dialog-fixed-height .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    
    min-height: 0;
}

.app-dialog-fixed-height .mud-dialog-actions {
    flex: 0 0 auto;
    border-top: 1px solid var(--app-divider);
    background: var(--mud-palette-surface);
}


@media (max-width: 600px) {
    .app-dialog-fixed-height {
        height: 100vh !important;
        height: 100dvh !important;   
        max-height: 100vh !important;
        max-height: 100dvh !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .app-dialog-fixed-height .mud-dialog-title {
        padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    }
    .app-dialog-fixed-height .mud-dialog-actions {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }
}


.app-sheet .app-sheet-grab { display: none; }        

@media (max-width: 600px) {
    
    .mud-dialog-container:has(> .app-sheet),
    .mud-dialog-container:has(> .mud-dialog.app-sheet) {
        align-items: flex-end !important;
        padding: 0 0 var(--kb, 0px) !important;
    }
    
    body .mud-dialog.app-sheet {
        position: fixed !important;
        left: 0; right: 0;
        bottom: calc(0px - var(--sheet-dy, 0px)) !important;   
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        
        max-height: calc(90dvh - min(var(--kb, 0px), 55dvh)) !important;
        
        min-height: min(33dvh, calc(90dvh - min(var(--kb, 0px), 55dvh))) !important;
        border-radius: 18px 18px 0 0 !important;
        display: flex;
        flex-direction: column;
        transition: bottom .24s cubic-bezier(.22, 1, .36, 1);  
    }
    .app-sheet .mud-dialog-title   { flex: 0 0 auto; }
    .app-sheet .mud-dialog-content {
        flex: 1 1 auto;
        min-height: 0;                                   
        max-height: none !important;
        overflow-y: auto;
    }
    .app-sheet .mud-dialog-actions {
        flex: 0 0 auto;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .app-sheet .app-sheet-grab {
        display: block;
        position: absolute;
        top: 6px; left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        width: 44px; height: 22px;
        touch-action: none;
        cursor: grab;
    }
    .app-sheet .app-sheet-grab::before {
        content: '';
        position: absolute;
        top: 8px; left: 0;
        width: 44px; height: 5px;
        border-radius: 999px;
        background: var(--app-divider);
    }
    
    .app-sheet .mud-dialog-title { padding-top: 22px; }
    .app-sheet > .mud-dialog-content:first-child { padding-top: 26px; }
}


.cv-drawer-dialog {
    height: 100vh !important;
    max-height: 100vh !important;
    width: clamp(480px, 62vw, 1080px) !important;
    max-width: 96vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    animation: cv-drawer-slide-in 280ms cubic-bezier(.16, 1, .3, 1);
}


@keyframes cv-drawer-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (max-width: 720px) {
    .cv-drawer-dialog { width: 100vw !important; max-width: 100vw !important; }
}

@media (prefers-reduced-motion: reduce) {
    .cv-drawer-dialog { animation: none; }
}


.cv-stat-ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex: 0 0 auto;
}
.cv-stat-ico.cv-ico-primary   { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);   color: var(--mud-palette-primary); }
.cv-stat-ico.cv-ico-info      { background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);      color: var(--mud-palette-info); }
.cv-stat-ico.cv-ico-error     { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);     color: var(--mud-palette-error); }
.cv-stat-ico.cv-ico-secondary { background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent); color: var(--mud-palette-secondary); }
.cv-stat-ico.cv-ico-success   { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);   color: var(--mud-palette-success); }





.cv-nganbar { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; padding: 6px 2px; min-width: 0; }
.cv-ngan { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    flex: 0 1 auto; min-width: 0;
    font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1;
    color: var(--mud-palette-text-secondary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; padding: 9px 11px;
    transition: border-color .12s, color .12s, background .12s; }

.cv-ngan .cv-ngan-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cv-ngan:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.cv-ngan.on { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: #fff; }
.cv-ngan .cv-ngan-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
    height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700;
    flex: 0 0 auto;                       
    font-variant-numeric: tabular-nums; background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary); }
.cv-ngan.on .cv-ngan-cnt { background: rgba(255, 255, 255, .24); color: #fff; }

.cv-ngan--warn { border-color: var(--mud-palette-error); color: var(--mud-palette-error); }
.cv-ngan--warn .cv-ngan-cnt { background: var(--mud-palette-error); color: #fff; }
.cv-ngan--warn.on { background: var(--mud-palette-error); border-color: var(--mud-palette-error); color: #fff; }

.cv-ngan--od:not(.on) .cv-ngan-cnt { background: var(--mud-palette-error); color: #fff; }

.cv-ngan .cv-ngan-newdot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--mud-palette-error); border: 1.5px solid var(--mud-palette-surface); box-sizing: border-box; }


.cv-nganbar-wrap { position: relative; min-width: 0; }

.cv-ov-measure { position: absolute; top: 0; left: 0; display: flex; align-items: center; flex-wrap: nowrap;
    gap: 7px; padding: 6px 2px; visibility: hidden; pointer-events: none; white-space: nowrap; }
.cv-ov-measure .cv-ngan { flex: 0 0 auto; }
.cv-ov-measure .cv-ngan-lbl { overflow: visible; text-overflow: clip; }

.cv-ngan--more { flex: 0 0 auto; }
.cv-ngan--more .cv-ngan-lbl { font-size: 15px; line-height: 1; letter-spacing: 1px; }

.cv-ngan--more-new { border-color: var(--mud-palette-error); }

.cv-ngan-mi { display: inline-flex; align-items: center; gap: 10px; min-width: 148px; }
.cv-ngan-mi-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ngan-mi-cnt { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px;
    color: var(--mud-palette-text-secondary); }
.cv-ngan-mi-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-error); }
.cv-ngan-pop.mud-popover, .cv-ngan-pop .mud-popover { width: max-content !important; max-width: 260px !important; }






.cv-tabrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cv-tabrow-tabs { flex: 1 1 320px; min-width: 0; }

.cv-view-switch { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }


.cv-lh-tabhost { flex: 1 1 auto; min-width: 0; }



.cv-view-host .cv-fb-sort-lbl { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cv-view-item { display: inline-flex; align-items: center; gap: 8px; }
.cv-view-item .cv-view-item-ico { flex: 0 0 auto; }

.cv-view-pop.mud-popover, .cv-view-pop .mud-popover,
.cv-view-pop .mud-list, .cv-view-pop .mud-list-item { max-width: 190px !important; }


.cv-head-mini .cv-head-sep { margin: 0 6px; color: var(--mud-palette-text-disabled); }


.cv-head-actions-menu { display: inline-flex; }

.cv-head-create-mob { display: none; }

.cv-head-actions-menu .mud-button-root.mud-button-outlined-primary {
    border-color: transparent !important; background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important; }
.cv-head-actions-menu .mud-button-root.mud-button-outlined-primary:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent) !important; }
@media (max-width: 720px) {
    
    .cv-head-mini { display: none; }
}
@media (max-width: 520px) {
    
    .cv-head-title.app-page-title { font-size: 1.25rem; line-height: 1.3; }
}


.cv-search-field { flex: 1 1 240px; max-width: 300px; min-width: 170px; }
.cv-search-field .mud-input-control { min-width: 0; }




.cv-quickst-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--mud-palette-text-secondary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; padding: 9px 11px; line-height: 1;
    transition: border-color .12s, color .12s, background .12s; }

.cv-quickst-chip .cv-quickst-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 5px; margin-left: 0; border-radius: 999px; background: var(--mud-palette-error); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

.cv-quickst-chip .cv-quickst-cnt--warn { background: var(--mud-palette-warning); color: #fff; }

.cv-quickst-chip .cv-quickst-cnt--sec { background: var(--mud-palette-secondary); color: #fff; }



.cv-load-note { padding: 8px 12px 12px; text-align: center; font-size: 12.5px; line-height: 1.5;
    color: var(--mud-palette-text-secondary); }
.cv-load-note b { color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.cv-load-note--cap { color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); }
.cv-load-note--cap b { color: inherit; }

.cv-quickdl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
.cv-quickdl-chip { font-weight: 700; }


.cv-quickdl--today    { --cv-sc: var(--mud-palette-secondary); }
.cv-quickdl--choduyet { --cv-sc: var(--mud-palette-warning); }

.cv-diff-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1;
    padding: 5px 12px; border-radius: 999px; cursor: pointer; font-family: inherit;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary);
    border: 1.5px dotted var(--cv-diff-c, var(--mud-palette-lines-default)); transition: background 120ms, border-color 120ms, color 120ms; }
.cv-diff-chip:hover { background: color-mix(in srgb, var(--cv-diff-c, var(--mud-palette-text-secondary)) 8%, transparent); }
.cv-diff-chip.on { border-style: solid; color: var(--cv-diff-c); font-weight: 700; background: color-mix(in srgb, var(--cv-diff-c) 12%, transparent); }
.cv-diff-chip .cv-diff-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cv-diff-c, var(--mud-palette-text-secondary)); flex: 0 0 auto; }
.cv-diff-chip.d-de         { --cv-diff-c: var(--mud-palette-success); }
.cv-diff-chip.d-trung_binh { --cv-diff-c: var(--mud-palette-info); }
.cv-diff-chip.d-kho        { --cv-diff-c: var(--mud-palette-warning); }
.cv-diff-chip.d-rat_kho    { --cv-diff-c: var(--mud-palette-error); }
.cv-quickst-chip:hover { border-color: var(--cv-sc, var(--brand)); color: var(--cv-sc, var(--brand)); }
.cv-quickst-chip.on { background: color-mix(in srgb, var(--cv-sc, var(--brand)) 12%, var(--mud-palette-surface));
    border-color: var(--cv-sc, var(--brand)); color: var(--cv-sc, var(--brand)); }


.cv-filter-bar .mud-button-root { height: 40px; }

.cv-fb-row { flex-wrap: wrap; gap: 8px; }

.cv-fb-tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cv-fb-tabs::-webkit-scrollbar { display: none; }
.cv-fb-tabs > * { flex-wrap: nowrap; }

.cv-fb-row .cv-search-field { flex: 0 1 240px; min-width: 140px; }

.cv-fb-row .cv-flt-spacer { display: none; }
.cv-fb-row .cv-fb-refresh { margin-left: auto; }

.cv-fb-search-toggle { display: none !important; }

.cv-fb-sort-host { display: inline-flex; }
.cv-fb-sort-btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 11px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface);
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; }
.cv-fb-sort-btn:hover { border-color: var(--brand); }
.cv-fb-sort-btn .cv-fb-sort-chev { color: var(--mud-palette-text-secondary); }
.cv-fb-sort-item.on { color: var(--brand); font-weight: 700; }

.cv-sort-host--sm .cv-fb-sort-btn { height: 34px; padding: 0 9px; }

.cv-fb-sort-host .cv-fb-sort-lbl { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.cv-fb-ngan-host { display: none; }
.cv-fb-ngan-btn { gap: 6px; max-width: 190px; }
.cv-fb-ngan-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.cv-fb-ngan-cnt { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
    font-variant-numeric: tabular-nums; background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary); }



.cv-dept-pop .mud-list { max-height: 340px !important; overflow-y: auto !important; overscroll-behavior: contain; }
.cv-dept-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; max-width: 320px; }
.cv-dept-item.on { color: var(--brand); font-weight: 700; }
.cv-dept-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-dept-item-chk { font-size: 14px; color: var(--brand); }


.cv-mgr-grouphead { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mud-palette-text-secondary); padding: 9px 0 4px; opacity: .8; }




.cv-fb-search-close { display: none; }
.cv-fb-search-close svg { width: 18px; height: 18px; stroke-width: 1.6; }


@media (max-width: 720px) {
    .cv-flt-spacer { display: none !important; }                
    
}
@media (max-width: 520px) {
    .cv-filter-bar { padding: 10px !important; }
    .cv-search-field { flex: 1 1 100%; max-width: none; }       
    
    .cv-view-switch { display: none !important; }
    
    
    .cv-fb-refresh { display: none !important; }
    
    .cv-filter-bar .cv-fb-row { flex-wrap: nowrap !important; gap: 6px; }
    .cv-filter-bar .cv-fb-sort-host, .cv-filter-bar .cv-fb-search-toggle, .cv-filter-bar .cv-fb-adv { flex: 0 0 auto; }
    .cv-filter-bar .cv-fb-sort-btn { padding: 0 9px; }
    .cv-filter-bar .cv-fb-adv .mud-button-root { min-width: 0; padding-left: 10px; padding-right: 10px; }
    
}

@media (max-width: 600px) {
    
    .cv-fb-ngan-host { display: inline-flex; order: 1; flex: 0 0 auto; }
    .cv-tabrow { display: none !important; }
    
    .cv-head-title { display: none !important; }

    
    .cv-head-create-mob { display: block; flex: 1 1 auto; min-width: 156px; }
    .cv-head-create-mob .mud-button-root { height: 44px; border-radius: 12px; text-transform: none; font-weight: 700; }
    .cv-head-create-item { display: none !important; }
    
    .cv-head-row > .flex-grow-1 { display: none; }
    
    .cv-head-actions-menu .mud-button-root { height: 44px; border-radius: 12px; text-transform: none; font-weight: 700; }
    
    .cv-help-btn { display: none !important; }
    

    .cv-fb-search-toggle { display: inline-flex !important; flex: 0 0 auto; }
    
    .cv-filter-bar .cv-fb-search-toggle {
        width: 40px; height: 40px; border-radius: 8px;
        border: 1px solid var(--mud-palette-lines-default);
    }
    
    .cv-filter-bar .cv-fb-sort-host { order: 2; }
    .cv-filter-bar .cv-fb-search-toggle { order: 3; }
    .cv-filter-bar .cv-fb-adv { order: 4; }
    .cv-filter-bar { position: relative; }                                      
    .cv-filter-bar .cv-search-field { display: none; }                          
    
    .cv-filter-bar.cv-fb-searchopen .cv-search-field {
        display: flex !important; align-items: center; gap: 4px;
        position: absolute; inset: 8px 10px; z-index: 6; max-width: none; flex: 0 1 auto;
        background: var(--mud-palette-surface);
    }
    .cv-filter-bar.cv-fb-searchopen .cv-search-field .mud-input-control { flex: 1 1 auto; }
    
    .cv-filter-bar.cv-fb-searchopen .cv-search-field .mud-input.mud-input-outlined .mud-input-outlined-border { border: none; }
    .cv-filter-bar.cv-fb-searchopen .cv-search-field .mud-input.mud-input-outlined {
        background: var(--slate-100); border-radius: 999px;
    }
    
    .cv-filter-bar.cv-fb-searchopen .cv-search-field .mud-input-adornment-start { padding-left: 10px; }
    .cv-filter-bar.cv-fb-searchopen .cv-search-field .mud-input-adornment-end { padding-right: 6px; }
    .cv-filter-bar.cv-fb-searchopen .cv-search-field .mud-input.mud-input-outlined > input { padding-left: 2px; }
    
    .cv-filter-bar.cv-fb-searchopen .cv-search-field .mud-input.mud-input-outlined.mud-focused {
        background: var(--mud-palette-surface); box-shadow: inset 0 0 0 1.5px var(--mud-palette-primary);
    }
    .cv-filter-bar.cv-fb-searchopen .cv-fb-search-close {
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
        width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
        background: transparent; color: var(--mud-palette-text-secondary);
    }
    .cv-filter-bar.cv-fb-searchopen .cv-fb-search-close:hover { background: var(--mud-palette-action-default-hover); }
    
    
    .cv-filter-bar .cv-fb-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0px;                              
        margin: -8px;                              
        scrollbar-width: none;                    
        -webkit-overflow-scrolling: touch;         
    }
    .cv-filter-bar .cv-fb-row::-webkit-scrollbar { display: none; }   
    
    .cv-filter-bar .cv-fb-row > .mud-menu,
    .cv-filter-bar .cv-fb-ngan-host,
    .cv-filter-bar .cv-fb-sort-host,
    .cv-filter-bar .cv-fb-search-toggle,
    .cv-filter-bar .cv-fb-adv,
    .cv-filter-bar .cv-tag-chip { flex: 0 0 auto; }
}


.cv-create-dialog { max-width: 720px !important; }
.cv-create-dialog .mud-dialog-content { background: var(--slate-50); }


@media (max-width: 600px) {
    .cv-create-dialog.app-dialog-fixed-height {
        width: 100vw !important;  max-width: 100vw !important;
        height: 100vh !important; height: 100dvh !important;
        max-height: 100vh !important; max-height: 100dvh !important;
        margin: 0 !important; border-radius: 0 !important;
    }
    .cv-create-dialog .mud-dialog-title   { padding: 12px 12px 10px !important; }
    .cv-create-dialog .mud-dialog-content { padding: 10px 8px !important; }
    .cv-create-dialog .mud-dialog-actions { padding: 8px 10px !important; }
    .cv-create-dialog .cv-create-miss     { display: none !important; }
    
    .cv-create-dialog .cv-create-actbar .mud-button-root { white-space: nowrap; }
}


.cv-btn-soft.mud-button-root {
    background-color: var(--brand-soft) !important;
    color: var(--brand) !important;
    border: none !important;
    box-shadow: none !important;
}
.cv-btn-soft.mud-button-root:hover {
    background-color: color-mix(in srgb, var(--brand) 16%, transparent) !important;
}


.cv-child-create-dialog .cv-sheet-grab { display: none; }   

@media (max-width: 600px) {
    body .mud-dialog.cv-child-create-dialog {
        position: fixed !important;
        left: 0; right: 0;
        
        bottom: calc(0px - var(--cv-sheet-dy, 0px)) !important;
        margin: 0 !important;
        width: 100% !important; max-width: 100% !important;
        height: auto !important;
        max-height: 90vh !important; max-height: 90dvh !important;
        border-radius: 18px 18px 0 0 !important;
        display: flex; flex-direction: column;
        transition: bottom .24s cubic-bezier(.22, 1, .36, 1);   
    }
    .cv-child-create-dialog .mud-dialog-title   { flex: 0 0 auto; }
    .cv-child-create-dialog .mud-dialog-content { flex: 1 1 auto; min-height: 0; max-height: none !important; }
    .cv-child-create-dialog .mud-dialog-actions { flex: 0 0 auto; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
    
    .cv-child-create-dialog .cv-sheet-grab {
        position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2;
        display: flex; justify-content: center; padding: 4px 14px; margin: 0;
        cursor: grab; touch-action: none;
    }
    .cv-child-create-dialog .cv-sheet-grab > span {
        width: 44px; height: 4px; border-radius: 999px;
        background: color-mix(in srgb, var(--mud-palette-text-primary) 20%, transparent);
    }
    
    .cv-child-create-dialog .mud-dialog-title { padding-top: 20px !important; }
    .cv-child-create-dialog .mud-dialog-close-button { display: none !important; }
}

.cv-create-head-ico {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--brand-soft); color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
}

.cv-owner-dept { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--mud-palette-primary);
    background: var(--brand-soft); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }

.cv-create-ctx { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px;
    border-radius: 999px; background: var(--brand-soft); color: var(--mud-palette-primary); font-weight: 600; }
.mud-icon-root.cv-create-ctx-ico { font-size: 13px !important; width: 13px; height: 13px; }


.vm-mps-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin-bottom: 2px; }
.vm-mps-label { margin: 0; }
.vm-mps-selbtn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
    border-radius: 999px; padding: 2px 8px 2px 5px; transition: border-color .12s, box-shadow .12s; }
.vm-mps-selbtn:hover { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.vm-mps-stack { display: inline-flex; }
.mud-avatar.vm-mps-stack-ava { width: 22px !important; height: 22px !important; min-width: 22px !important;
    font-size: 9px !important; font-weight: 700; border: 2px solid var(--mud-palette-surface); margin-left: -9px; }
.vm-mps-stack .vm-mps-stack-ava:first-child { margin-left: 0; }
.vm-mps-count { font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; }
.mud-icon-root.vm-mps-chev { font-size: 16px !important; color: var(--mud-palette-text-secondary); }

.vm-mps-pop { padding: 6px !important; min-width: 280px; max-width: 360px; }
.vm-mps-pop-head { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mud-palette-text-secondary); padding: 2px 6px 6px; }
.vm-mps-pop-row { display: flex; align-items: center; gap: 4px; border-radius: 8px; padding: 2px 2px 2px 4px; }
.vm-mps-pop-row:hover { background: var(--mud-palette-action-default-hover); }
.vm-mps-pop-row .nv-opt { flex: 1; min-width: 0; }

.vm-mps-pop-x { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: 0; background: transparent; border-radius: 7px; cursor: pointer;
    color: var(--mud-palette-text-secondary); }
.vm-mps-pop-x:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-error); }
.vm-mps-pop-x .mud-icon-root { font-size: 16px; }


.cv-create-footer { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.cv-create-actbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

.cv-child-ai-status { min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.cv-grow textarea { box-sizing: border-box; overflow-y: auto; resize: none; }

.cv-grow-title textarea { min-height: 2.4em; height: 2.4em; max-height: 6.5em; }
.cv-grow-desc  textarea { max-height: 18em; }        

.cv-ai-input textarea { min-height: 3em; height: 3em; max-height: 12em; }

.cv-ai-assist {
    position: relative;   
    border: 1px solid var(--border-1); border-radius: 12px; background: var(--bg-surface);
    padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px;
}
.cv-ai-assist .cv-ai-input.mud-input-control { margin: 0; }
.cv-ai-input .mud-input-slot { padding-top: 2px; }
.cv-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-ai-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-ai-tools { display: flex; align-items: center; gap: 2px; }
.cv-ai-hist-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cv-ai-hist-text { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ai-hist-time { font-size: 11px; color: var(--fg-3); }
.cv-ai-owner-sug { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 8px;
    border-radius: 8px; font-size: 12.5px;
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.cv-ai-owner-ico { color: var(--brand); }
.cv-ai-owner-txt { flex: 1; min-width: 0; color: var(--mud-palette-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ai-owner-use { text-transform: none; font-weight: 600; min-width: 0; }
.cv-ai-undo { text-transform: none; min-width: 0; color: var(--mud-palette-text-secondary); }

.cv-ai-warn { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 8px; padding: 7px 8px 7px 10px;
    border-radius: 8px; font-size: 12.5px; line-height: 1.4;
    background: color-mix(in srgb, var(--warning-500, #f59e0b) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-500, #f59e0b) 34%, transparent); }
.cv-ai-warn-ico { color: var(--warning-700, #b45309); flex-shrink: 0; margin-top: 1px; }
.cv-ai-warn-body { flex: 1; min-width: 0; color: var(--mud-palette-text-primary); }
.cv-ai-warn-line + .cv-ai-warn-line { margin-top: 3px; }
.cv-ai-warn-x { flex-shrink: 0; color: var(--fg-3); }

@keyframes cvAiHl { from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); } to { box-shadow: 0 0 0 2px transparent; } }
.cv-ai-hl { border-radius: 8px; animation: cvAiHl 2.4s ease; }


.cv-ai-clip { color: var(--fg-3); }
.cv-ai-clip:hover { color: var(--brand); }


.cv-ai-mic { color: var(--fg-3); }
.cv-ai-mic:hover { color: var(--brand); }
.cv-ai-mic.is-on { color: var(--mud-palette-error); animation: cvMicPulse 1.2s infinite ease-in-out; }
@keyframes cvMicPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .cv-ai-mic.is-on { animation: none; } }


.cv-ai-recbar { display: flex; align-items: center; gap: 9px; margin: 2px 2px 4px; padding: 7px 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-error) 9%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 26%, transparent); animation: cvRecIn .16s ease-out; }
@keyframes cvRecIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.cv-ai-recdot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--mud-palette-error);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-error) 55%, transparent); animation: cvRecDot 1.3s infinite ease-out; }
@keyframes cvRecDot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-error) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.cv-ai-recwave { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.cv-ai-recwave i { width: 3px; height: 100%; border-radius: 2px; background: var(--mud-palette-error);
    transform-origin: center; animation: cvRecWave 1s infinite ease-in-out; }
.cv-ai-recwave i:nth-child(1) { animation-delay: 0s; }
.cv-ai-recwave i:nth-child(2) { animation-delay: .15s; }
.cv-ai-recwave i:nth-child(3) { animation-delay: .3s; }
.cv-ai-recwave i:nth-child(4) { animation-delay: .45s; }
.cv-ai-recwave i:nth-child(5) { animation-delay: .6s; }
@keyframes cvRecWave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

.cv-ai-rectext { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--mud-palette-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ai-rectext.is-idle { color: var(--mud-palette-text-secondary); font-style: italic; }

.cv-ai-recstop { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 3px 12px; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent); transition: background 120ms; }
.cv-ai-recstop:hover { background: color-mix(in srgb, var(--mud-palette-error) 24%, transparent); }

@media (prefers-reduced-motion: reduce) {
    .cv-ai-recbar { animation: none; }
    .cv-ai-recdot { animation: cvMicPulse 1.3s infinite ease-in-out; box-shadow: none; }
    .cv-ai-recwave i { animation: cvMicPulse 1s infinite ease-in-out; transform: scaleY(.7); }
}

.cv-ai-go {
    text-transform: none; font-weight: 600; border-radius: 9px;
    background: color-mix(in srgb, var(--brand) 10%, var(--mud-palette-surface)) !important;
    color: var(--brand) !important;
}
.cv-ai-go:hover { background: color-mix(in srgb, var(--brand) 18%, var(--mud-palette-surface)) !important; }
.cv-ai-go:disabled { opacity: .6; }


.cv-ai-files { display: flex; flex-direction: column; gap: 6px; }
.cv-ai-files-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.4;
    color: var(--mud-palette-text-secondary); }
.cv-ai-files-hint-ico { color: var(--fg-3); flex-shrink: 0; margin-top: 1px; }
.cv-ai-files-hint b { color: var(--mud-palette-text-primary); font-weight: 600; }
.cv-ai-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 270px;
    padding: 3px 4px 3px 4px; border-radius: 9px; font-size: 12.5px;
    background: var(--slate-50); border: 1px solid var(--border-1); }
.cv-ai-chip--save { background: color-mix(in srgb, var(--brand) 9%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--brand) 32%, transparent); }
.cv-ai-chip--busy { opacity: .75; }

.cv-ai-chip-attach { flex: 0 0 auto; margin: 0; }
.cv-ai-chip-attach .mud-icon-button { padding: 2px; }

.cv-ai-chip-thumb { width: 30px; height: 30px; flex: 0 0 auto; object-fit: cover; border-radius: 6px;
    cursor: pointer; border: 1px solid var(--border-1); }
.cv-ai-chip-ico { flex: 0 0 auto; color: var(--fg-3); }
.cv-ai-chip--save .cv-ai-chip-ico { color: var(--brand); }
.cv-ai-chip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--mud-palette-text-primary); }

.cv-ai-chip-view { border: 0; background: none; padding: 0; margin: 0; font: inherit; text-align: left;
    cursor: pointer; color: var(--mud-palette-primary); }
.cv-ai-chip-view:hover { text-decoration: underline; }
.cv-ai-chip-x { flex: 0 0 auto; }
.cv-ai-chip-spin { flex: 0 0 auto; margin: 0 6px; }


.cv-ai-assist.cv-ai-dragover { border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.cv-ai-dropzone { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.cv-ai-dropinput { position: absolute; top: 0; left: 0; pointer-events: none !important; cursor: copy; }
.cv-ai-assist.cv-ai-dragover .cv-ai-dropinput { pointer-events: auto !important; }
.cv-ai-dropmask { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 8px;
    border: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent); border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 12%, var(--mud-palette-surface)); color: var(--brand);
    font-size: 13px; font-weight: 600; pointer-events: none; }
.cv-ai-assist.cv-ai-dragover .cv-ai-dropmask { display: flex; }

.cv-attach-badge { font-size: 10px; font-weight: 700; color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--mud-palette-surface)); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }


.cv-attach-drop { position: relative; display: block; width: 100%; }
.cv-attach-zone {
    display: flex !important; align-items: center; gap: 8px; cursor: pointer; width: 100%;
    border: 1px dashed var(--border-1) !important; border-radius: 10px !important;
    padding: 12px 14px !important; color: var(--fg-3); font-size: 12.5px;
    background: color-mix(in srgb, var(--brand) 3%, var(--mud-palette-surface)) !important;
    transition: border-color .15s, background .15s, color .15s;
}
.cv-attach-drop:hover .cv-attach-zone,
.cv-attach-zone.cv-attach-drag {
    border-color: color-mix(in srgb, var(--brand) 50%, transparent) !important;
    background: color-mix(in srgb, var(--brand) 8%, var(--mud-palette-surface)) !important; color: var(--brand);
}
.cv-attach-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cv-attach-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--slate-50); }


.cv-aichk-badge { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
    color: var(--brand); background: var(--brand-soft); vertical-align: middle; }
.cv-aichk-list { display: flex; flex-direction: column; gap: 4px; }
.cv-aichk-item { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 8px; background: var(--slate-50);
    border: 1px solid var(--mud-palette-lines-default); }
.cv-aichk-box { width: 15px; height: 15px; flex-shrink: 0; border-radius: 4px; border: 1.6px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }
.cv-aichk-text { flex: 1; min-width: 0; font-size: 13px; color: var(--mud-palette-text-primary); word-break: break-word; }
.cv-aichk-del { flex-shrink: 0; width: 22px; height: 22px; border: none; border-radius: 6px; cursor: pointer; background: transparent;
    color: var(--fg-3); font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s; }
.cv-aichk-del:hover:not(:disabled) { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); color: var(--mud-palette-error); }
.cv-aichk-del:disabled { opacity: .5; cursor: default; }
.cv-aichk-hint { margin-top: 6px; font-size: 11.5px; color: var(--fg-3); }
.cv-attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; color: var(--mud-palette-text-primary); }
.cv-attach-name--link { cursor: pointer; }
.cv-attach-name--link:hover { color: var(--brand); text-decoration: underline; }
.cv-attach-size { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }

.cv-attach-thumb { width: 34px; height: 34px; flex: 0 0 auto; object-fit: cover; border-radius: 6px;
    cursor: pointer; border: 1px solid var(--border-1); }


.cv-chatsrc {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--brand) 3%, var(--mud-palette-surface));
}
.cv-chatsrc-head { display: flex; align-items: center; gap: 6px; }
.cv-chatsrc-head-ic { color: var(--brand); flex: 0 0 auto; }
.cv-chatsrc-head-txt { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--mud-palette-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-chatsrc-count { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
    color: var(--brand); background: var(--brand-soft); }

.cv-chatsrc-quote { border-left: 3px solid color-mix(in srgb, var(--brand) 55%, transparent);
    padding: 2px 0 2px 10px; display: flex; flex-direction: column; gap: 3px;
    max-height: 168px; overflow-y: auto; }
.cv-chatsrc-line { font-size: 12.5px; line-height: 1.45; color: var(--mud-palette-text-primary); word-break: break-word; }
.cv-chatsrc-who { font-weight: 700; margin-right: 5px; color: var(--mud-palette-text-secondary); }
.cv-chatsrc-text { color: var(--mud-palette-text-primary); }
.cv-chatsrc-hint { font-size: 11.5px; color: var(--fg-3); }

.cv-chatsrc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.cv-chatsrc-foot .cv-chatsrc-hint { flex: 1 1 160px; }
.cv-chatsrc-usebtn { flex: 0 0 auto; }

.cv-chatsrc-atts { display: flex; flex-direction: column; gap: 6px; margin-top: 2px;
    padding-top: 8px; border-top: 1px dashed var(--mud-palette-lines-default); }
.cv-chatsrc-atts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-chatsrc-atts-sel { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--fg-3);
    font-variant-numeric: tabular-nums; }
.cv-chatsrc-attlist { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chatsrc-att { display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    padding: 5px 9px 5px 7px; border-radius: 8px; cursor: pointer;
    appearance: none; font: inherit; color: inherit; text-align: left;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
    transition: border-color .12s, background .12s; }
.cv-chatsrc-att:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.cv-chatsrc-att.on { border-color: color-mix(in srgb, var(--brand) 60%, transparent);
    background: color-mix(in srgb, var(--brand) 7%, var(--mud-palette-surface)); }
.cv-chatsrc-att:disabled { opacity: .55; cursor: default; }

.cv-chatsrc-att-box { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px; position: relative;
    border: 1.6px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
    transition: background .12s, border-color .12s; }
.cv-chatsrc-att.on .cv-chatsrc-att-box { border-color: var(--brand); background: var(--brand); }
.cv-chatsrc-att.on .cv-chatsrc-att-box::after { content: ""; position: absolute; left: 5px; top: 2px;
    width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cv-chatsrc-att-thumb { width: 26px; height: 26px; flex: 0 0 auto; object-fit: cover; border-radius: 5px;
    border: 1px solid var(--border-1); cursor: zoom-in; }
.cv-chatsrc-att-thumb:hover { border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
.cv-chatsrc-att-ic { flex: 0 0 auto; }
.cv-chatsrc-att-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; color: var(--mud-palette-text-primary); }
.cv-chatsrc-att-size { flex: 0 0 auto; font-size: 11px; color: var(--fg-3); white-space: nowrap;
    font-variant-numeric: tabular-nums; }

.mud-dialog.img-lightbox-dialog { background: transparent !important; box-shadow: none !important;
    display: flex; flex-direction: column; height: 100%; }
.img-lightbox-dialog .mud-dialog-content { flex: 1 1 auto; min-height: 0; padding: 0; position: relative; overflow: hidden; }
.img-lightbox-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.82); padding: 24px; cursor: zoom-out; }

.img-lightbox-frame { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; cursor: default; }


.img-lightbox-close { position: absolute !important; top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px)); z-index: 4; color: #fff !important;
    
    background: rgba(15,23,42,.62) !important; border: 1px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.35); }
.img-lightbox-close:hover { background: rgba(15,23,42,.85) !important; border-color: rgba(255,255,255,.9) !important; }

.img-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; }
.img-lightbox-nav .mud-icon-button { color: #fff; background: rgba(0,0,0,.45); }
.img-lightbox-nav .mud-icon-button:hover { background: rgba(0,0,0,.72); }
.img-lightbox-nav.prev { left: 14px; }
.img-lightbox-nav.next { right: 14px; }

.img-lightbox-counter { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%;
    transform: translateX(-50%); z-index: 4;
    color: #fff; background: rgba(0,0,0,.45); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600; }

.img-lightbox-caption { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4;
    pointer-events: none;
    
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: min(88vw, calc(100% - 280px));
    text-align: center;
    color: #fff; background: rgba(0,0,0,.5); border-radius: 999px; padding: 5px 14px; font-size: 12.5px;
    font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }

@media (max-width: 600px) {
    .img-lightbox-nav.prev { left: 6px; }
    .img-lightbox-nav.next { right: 6px; }
    
    .img-lightbox-caption { max-width: min(88vw, calc(100% - 32px));
        bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 900px) {
    .img-lightbox-stage.has-strip .img-lightbox-frame { width: calc(100% - 132px); margin-right: 120px; }
    .img-lightbox-stage.has-strip .img-lightbox-nav.next { right: 132px; }
}


.mud-dialog.chat-media-gallery-dialog { height: 100%; display: flex; flex-direction: column;
    background: var(--mud-palette-surface); }
.chat-media-gallery-dialog .mud-dialog-content { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
.cmg-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.cmg-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 12px
             calc(16px + env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--app-divider); }
.cmg-title { font-size: 16px; font-weight: 700; color: var(--mud-palette-text-primary); }
.cmg-close { color: var(--mud-palette-text-secondary); }
.cmg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px))
             calc(16px + env(safe-area-inset-left, 0px)); }

.cmg-date { position: sticky; top: 0; z-index: 1; padding: 10px 2px 8px; font-size: 13px; font-weight: 600;
    color: var(--mud-palette-text-secondary); background: var(--mud-palette-surface); }
.cmg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 6px; }

.cmg-cell { position: relative; display: block; }
.cmg-cell .cmg-tile { width: 100%; }
.cmg-tile { position: relative; aspect-ratio: 1 / 1; border: none; padding: 0; border-radius: 6px;
    cursor: pointer; background-color: var(--slate-25); background-size: cover; background-position: center;
    overflow: hidden; transition: transform .12s ease; }
.cmg-tile:hover { transform: scale(1.02); }

.cmg-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 48px 16px; color: var(--mud-palette-text-secondary); font-size: 13px; text-align: center; }
.cmg-state .mud-icon-root { width: 36px; height: 36px; font-size: 36px; opacity: .6; }

.cmg-foot { text-align: center; padding: 14px 8px 6px; font-size: 12px; color: var(--mud-palette-text-secondary);
    font-style: italic; }

@media (max-width: 600px) {
    .cmg-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    .cmg-grid { grid-template-columns: repeat(5, 1fr); }
}


.cmg-tile.is-video {
    background-color: var(--app-video-bg);
    display: flex; align-items: center; justify-content: center;
}
.media-tile-play {
    width: 34px; height: 34px; border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.media-tile-play::before {
    content: ""; width: 0; height: 0; margin-left: 3px;
    border-left: 11px solid var(--app-video-bg);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.chat-info-media-tile .media-tile-play { width: 26px; height: 26px; }
.chat-info-media-tile .media-tile-play::before {
    margin-left: 2px;
    border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px;
}

.media-tile-name {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 3px 6px; font-size: 10.5px; line-height: 1.3; color: #fff;
    background: rgba(0, 0, 0, .45);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


.mud-dialog.chat-video-dialog { height: 100%; display: flex; flex-direction: column;
    background: var(--app-video-bg); }
.chat-video-dialog .mud-dialog-content { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
.cvp-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cvp-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 12px
             calc(16px + env(safe-area-inset-left, 0px)); }
.cvp-title { font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.cvp-close { color: #fff; }
.cvp-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 8px; }

.cvp-video { max-width: 100%; max-height: 100%; display: block; }
.cvp-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px calc(16px + env(safe-area-inset-right, 0px))
             calc(12px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
.cvp-download { color: #fff; font-size: 13px; font-weight: 600; text-decoration: underline; }
.cvp-caption { font-size: 12px; color: rgba(255, 255, 255, .72); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }


.zoom-img-stage { position: relative; width: 100%; height: 100%; overflow: hidden;
    display: flex; align-items: center; justify-content: center; touch-action: none; }
.zoom-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; position: relative; z-index: 1;
    transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none;
    
    cursor: zoom-in;
    transition: opacity .25s ease; }

.zoom-img-preview { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; filter: blur(14px); transform: scale(1.06); z-index: 0;
    pointer-events: none; user-select: none; -webkit-user-drag: none; transition: opacity .25s ease; }
.zoom-img-preview.is-hidden { opacity: 0; }

.zoom-img-tools { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px;
    left: calc(10px + env(safe-area-inset-left, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

.zoom-img-btn { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center;
    justify-content: center; padding: 0; border-radius: 50%; cursor: pointer;
    background: rgba(15,23,42,.62); border: 1px solid rgba(255,255,255,.55); color: #fff;
    box-shadow: 0 1px 8px rgba(0,0,0,.35); transition: background .15s, border-color .15s;
    
    touch-action: manipulation; }
.zoom-img-btn:hover { background: rgba(15,23,42,.85); border-color: rgba(255,255,255,.9); }

.zoom-img-btn svg { width: 22px; height: 22px; }

.zoom-img-deg { height: 32px; flex: 0 0 auto; padding: 0 12px; border-radius: 999px; cursor: pointer;
    background: rgba(15,23,42,.62); border: 1px solid rgba(255,255,255,.55); color: #fff;
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
    box-shadow: 0 1px 8px rgba(0,0,0,.35); transition: background .15s, border-color .15s;
    touch-action: manipulation; }
.zoom-img-deg:hover { background: rgba(15,23,42,.85); border-color: rgba(255,255,255,.9); }


.att-img-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.att-img-tile { position: relative; width: 92px; height: 92px; flex: 0 0 auto; border-radius: 10px;
    overflow: hidden; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-grey); }
.att-img-clickable { display: block; width: 100%; height: 100%; cursor: pointer; }

.att-img-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 8px; text-decoration: none; text-align: center; box-sizing: border-box;
    color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-grey);
    border: 1px dashed var(--mud-palette-lines-default); border-radius: 8px; }
.att-img-link:hover { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.att-img-link-name { font-size: 11.5px; line-height: 1.35; overflow: hidden; word-break: break-all;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.att-img-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.att-img-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.att-img-remove { position: absolute; top: 3px; right: 3px; display: flex;
    opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.att-img-tile:hover .att-img-remove, .att-img-remove--show { opacity: 1; }
.att-img-remove .mud-button-root { pointer-events: auto; }


.att-row-open { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0;
    cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px;
    transition: background-color .12s ease; }
.att-row-open:hover { background: var(--mud-palette-action-default-hover); }
.att-row-open:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }

.att-row-link { text-decoration: none; color: inherit; }
.att-row-link .mud-icon-root.mud-svg-icon { fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linejoin: miter; color: var(--mud-palette-primary); }
.att-img-remove .mud-icon-button { width: 24px !important; height: 24px !important; min-width: 24px !important;
    padding: 0 !important; border-radius: 50% !important; background: rgba(20,20,20,.6) !important; color: #fff !important; box-shadow: none !important; }
.att-img-remove .mud-icon-button:hover { background: var(--mud-palette-error) !important; }
.att-img-remove .mud-icon-button .mud-icon-root { font-size: 15px !important; width: 15px; height: 15px; }
.att-img-add-upload { width: 92px; height: 92px; flex: 0 0 auto; position: relative; }
.att-img-add { width: 92px; height: 92px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; border: 1.5px dashed var(--mud-palette-primary); border-radius: 10px;
    color: var(--mud-palette-primary); cursor: pointer; font-size: 11px; text-align: center;
    transition: background .15s ease, border-color .15s ease; }
.att-img-add:hover, .att-img-add--drag { background: var(--mud-palette-primary-hover); border-style: solid; }


.cv-cttl { list-style: none; margin: 0; padding: 0; }

.cv-cttl-step { display: block; }

.cv-cttl-num {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 22px; height: 22px; margin-right: 9px; border-radius: 999px;
    background: var(--brand); color: var(--brand-on); font-size: 12.5px; font-weight: 700;
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.cv-cttl-pane {
    flex: 1; min-width: 0;
    border: 1px solid var(--border-1); border-radius: 12px; background: var(--bg-surface);
    padding: 14px 16px 16px; margin-bottom: 22px;
}
.cv-cttl-step:last-child .cv-cttl-pane { margin-bottom: 4px; }
.cv-cttl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cv-cttl-title { font-size: 15px; font-weight: 700; color: var(--fg-1); display: inline-flex; align-items: center; }
.cv-cttl-sub { font-size: 12.5px; color: var(--fg-3); }
.cv-cttl-fields { display: flex; flex-direction: column; gap: 14px; }
.cv-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--fg-2); margin-bottom: 6px; }
.cv-req { color: var(--mud-palette-error); }


.cv-prio-seg { display: flex; gap: 2px; padding: 3px; background: var(--slate-100); border-radius: 9px; height: 38px; }
.cv-prio-btn {
    flex: 1; border: none; background: transparent; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--fg-3); border-radius: 6px;
    transition: all 120ms; white-space: nowrap; padding: 0 4px;
}
.cv-prio-btn:hover { color: var(--fg-1); }
.cv-prio-btn:disabled { cursor: default; }
.cv-prio-btn.on { box-shadow: var(--shadow-xs); font-weight: 700; }
.cv-prio-btn.on.p-urgent { color: var(--mud-palette-error);   background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent); }
.cv-prio-btn.on.p-high   { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); }
.cv-prio-btn.on.p-medium { color: var(--mud-palette-info);    background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent); }
.cv-prio-btn.on.p-low    { color: var(--fg-2);                background: var(--bg-surface); }



.cv-qd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.cv-qd-label { margin-bottom: 0; }
.cv-qd-chips { display: flex; gap: 6px; flex-shrink: 0; }
.cv-qd-input { width: 100%; }
.cv-qd-chip {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap;
    border: 1px solid var(--border-2); border-radius: 999px; cursor: pointer;
    padding: 3px 9px; background: var(--bg-surface); font-family: inherit;
    font-size: 11px; font-weight: 600; line-height: 1.45; color: var(--fg-2);
    transition: border-color 120ms, background 120ms, color 120ms;
}
.cv-qd-chip:hover { border-color: var(--brand); color: var(--brand); }
.cv-qd-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }


.cv-dl-result { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; font-size: 12.5px; color: var(--fg-2); }
.cv-dl-result b { font-weight: 600; color: var(--fg-1); }

.cv-datewrap { position: relative; }
.cv-date-dow { position: absolute; top: 50%; right: 38px; transform: translateY(-50%); z-index: 1;
    display: inline-flex; align-items: center; line-height: 1; pointer-events: none; white-space: nowrap;
    font-size: 12px; font-weight: 600; color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-radius: 999px; padding: 2px 9px; }
.cv-dl-gap { color: var(--fg-3); }
.cv-dl-warn { color: var(--mud-palette-error); font-weight: 600; }

.cv-field-label .cv-dl-gap-lbl { font-size: 11px; font-weight: 500; color: var(--fg-3); text-transform: none; letter-spacing: 0; margin-left: 3px; }
.cv-field-label .cv-dl-gap-lbl.cv-dl-warn { color: var(--mud-palette-error); font-weight: 600; }


.cv-adv-toggle {
    display: flex; align-items: center; gap: 8px; align-self: flex-start;
    border: 0; background: transparent; cursor: pointer; padding: 4px 2px; font-family: inherit;
    font-size: 13.5px; font-weight: 600; color: var(--brand);
}
.cv-adv-chev { transition: transform 160ms; }
.cv-adv-toggle.is-open .cv-adv-chev { transform: rotate(90deg); }
.cv-adv-hint { font-weight: 400; font-size: 12px; color: var(--fg-4); }
.cv-adv-body {
    display: flex; flex-direction: column; gap: 14px; padding: 14px; margin-top: 2px;
    border: 1px solid var(--border-1); border-radius: 10px; background: var(--slate-50);
}
.cv-approve-box { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px 10px; border: 1px solid var(--border-2); border-radius: 8px; }


.cv-out-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.cv-out-chip {
    appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 12px; font-family: inherit;
    border: 1px dashed var(--border-2); background: transparent; color: var(--fg-2);
    transition: all 120ms;
}
.cv-out-chip:hover { background: var(--slate-100); }
.cv-out-chip.on { border-style: solid; border-color: transparent; color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); }
.cv-out-hint { font-size: 11.5px; color: var(--fg-4); font-style: italic; }


.cv-tf-pop { width: 435px; max-width: calc(100vw - 24px); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 120px)); }

.cv-tf-grabber { display: none; align-items: center; justify-content: center; padding: 9px 0 4px; flex: 0 0 auto; cursor: grab; touch-action: none; user-select: none; }
.cv-tf-grabber > span { width: 42px; height: 4px; border-radius: 999px; background: var(--mud-palette-lines-inputs); display: block; }
.cv-tf-grabber:active { cursor: grabbing; }
.cv-tf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-1); }
.cv-tf-title { font-size: 13px; font-weight: 700; color: var(--fg-1); }
.cv-tf-badge { font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 999px; }
.cv-tf-clear { border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand); padding: 2px 4px; }
.cv-tf-clear:disabled { color: var(--fg-4); cursor: default; }
.cv-tf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.cv-tf-sec-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 8px; }
.cv-tf-cnt { font-size: 10.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 1px 7px; border-radius: 999px; }
.cv-tf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cv-tf-chip {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--fg-2); background: var(--bg-surface);
    border: 1px solid var(--border-2); border-radius: 999px; padding: 5px 11px; transition: all 120ms;
}
.cv-tf-chip:hover { border-color: var(--brand); }

.cv-tf-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand);
    font-weight: 700; box-shadow: inset 0 0 0 1px var(--brand); }

.cv-tf-chip--preset { padding-right: 9px; }
.cv-tf-chip .cv-tf-x { font-size: 14px; line-height: 1; opacity: .7; margin-left: 1px; }
.cv-tf-chip:hover .cv-tf-x { opacity: 1; }

.cv-tf-preset-row { display: flex; }
.cv-tf-preset {
    width: 100%; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-2);
    background: var(--bg-surface); border: 1px solid var(--border-2); border-radius: 8px;
    padding: 7px 10px; cursor: pointer; transition: border-color 120ms, box-shadow 120ms; color-scheme: light;
}
.cv-tf-preset:hover { border-color: var(--brand); }
.cv-tf-preset:focus-visible { outline: none; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
html[data-theme="dark"] .cv-tf-preset { color-scheme: dark; }

.cv-tf-chip.p-urgent { --cv-sc: var(--mud-palette-error); }
.cv-tf-chip.p-high   { --cv-sc: var(--mud-palette-warning); }
.cv-tf-chip.p-medium { --cv-sc: var(--mud-palette-info); }
.cv-tf-chip.p-low    { --cv-sc: var(--mud-palette-text-secondary); }
.cv-tf-chip.s-cancelled { --cv-sc: var(--mud-palette-text-disabled); }
.cv-tf-ava { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
.cv-tf-chip.on .cv-tf-ava { background: var(--bg-surface); }
.cv-tf-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-1); }

.cv-tf-search-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-surface); color: var(--fg-3); cursor: pointer; flex: 0 0 auto; }
.cv-tf-search-toggle:hover { border-color: var(--brand); color: var(--brand); }
.cv-tf-search-toggle.is-open { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.cv-tf-search-ico { font-size: 14px !important; }

.cv-tf-people-search { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px 10px;
    border: 1px solid var(--brand); border-radius: 9px; background: var(--bg-surface); }
.cv-tf-people-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--fg-1); }
.cv-tf-people-search .cv-tf-search-ico { color: var(--fg-3); }
.cv-tf-people-clear { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; padding: 0; }
.cv-tf-people-clear:hover { color: var(--mud-palette-error); }

.cv-tf-people-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;
    max-height: 220px; overflow-y: auto; gap: 6px 8px; }
.cv-tf-people-list .cv-tf-chip { justify-content: flex-start; width: 100%; min-width: 0; }
.cv-tf-chip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.mud-icon-root.cv-tf-chip-chk { flex-shrink: 0; }
.cv-tf-people-empty { font-size: 12.5px; color: var(--fg-3); padding: 4px 2px; grid-column: 1 / -1; }

.cv-tf-pop .mud-picker input { font-size: 13px !important; }
.cv-tf-pop .mud-picker .mud-input-label { font-size: 12px; }


@media (max-width: 720px) {
    
    .cv-tf-pop {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        width: auto !important; max-width: none !important;
        height: auto !important;
        max-height: 85vh !important;
        max-height: 85dvh !important;
        overflow: hidden !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(var(--cv-sheet-dy, 0px)) !important;
        transition: transform .24s cubic-bezier(.32, .72, 0, 1);
        
        z-index: 1401 !important;
    }
    
    .cv-tf-pop.mud-popover-open { animation: cv-tf-up .3s cubic-bezier(.16, 1, .3, 1); }
    .cv-tf-grabber { display: flex; }
    
    .cv-tf-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
    
    .cv-tf-overlay.mud-overlay, .cv-tf-overlay .mud-overlay-scrim { background-color: rgba(0, 0, 0, .45) !important; }
    .cv-tf-overlay.mud-overlay { z-index: 1400 !important; }   
}


@keyframes cv-tf-up { from { transform: translateY(100%); } to { transform: translateY(var(--cv-sheet-dy, 0px)); } }

@media (max-width: 520px) {
    .cv-cttl-num { width: 20px; height: 20px; margin-right: 8px; font-size: 12px; }
    .cv-cttl-title { font-size: 14px; }
}


.app-tabs-dashed .mud-tabs-tabbar {
    border-bottom: 1px dashed var(--app-divider);
    margin-top: 5px;
}


.app-tabs-dashed .mud-tabs-panels {
    margin-top: 8px;
}


.app-tabs-dashed .mud-tab {
    text-transform: none;
    letter-spacing: normal;
}






.ee-dialog .mud-dialog-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.ee-dialog .mud-dialog-content > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}


.app-tabs-vstep {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}


.app-tabs-vstep .mud-tabs-tabbar {
    width: 200px;
    flex: 0 0 200px;
    border-bottom: none;
    border-right: 1px solid var(--app-divider);
    padding: 8px 6px;
    overflow-y: auto;
    background: var(--mud-palette-surface);
}


.app-tabs-vstep .mud-tab-slider {
    display: none;
}


.app-tabs-vstep .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow-y: auto;
    margin-top: 0;
    padding: 4px 6px 4px 18px;   
}


.app-tabs-vstep .mud-tab {
    justify-content: flex-start;
    text-align: left;
    min-height: 46px;
    margin: 2px 0;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.25;
    white-space: normal;
    color: var(--fg-2);
}

.app-tabs-vstep .mud-tab:hover {
    background: var(--mud-palette-action-default-hover);
}


.app-tabs-vstep .mud-tab .mud-icon-root {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    box-sizing: border-box;
    flex-shrink: 0;
}


.app-tabs-vstep .mud-tab.mud-tab-active {
    background: var(--brand-soft);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.app-tabs-vstep .mud-tab.mud-tab-active .mud-icon-root {
    background: var(--brand);
    color: var(--brand-on);
}


.app-tabs-vstep .mud-tab.mud-disabled .mud-icon-root {
    background: rgba(var(--mud-palette-warning-rgb), .14);
    color: var(--mud-palette-warning);
}


@media (max-width: 640px) {
    .app-tabs-vstep .mud-tabs-tabbar {
        width: 156px;
        flex-basis: 156px;
    }

    .app-tabs-vstep .mud-tabs-panels {
        padding-left: 12px;
    }

    .app-tabs-vstep .mud-tab {
        font-size: 12.5px;
    }

    .app-tabs-vstep .mud-tab .mud-icon-root {
        width: 28px;
        height: 28px;
        padding: 6px;
    }
}




.nv-row-menu .nv-rm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 244px;
    padding: 10px 14px 9px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--app-divider);
}

.nv-row-menu .nv-rm-head-body {
    min-width: 0;
}

.nv-row-menu .nv-rm-head-name {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--fg-1);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-row-menu .nv-rm-head-code {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    line-height: 1.35;
}


.nv-row-menu .nv-rm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    color: var(--fg-1);          
}

.nv-row-menu .nv-rm-ic {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--mud-palette-text-secondary);   
}

.nv-row-menu .nv-rm-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.nv-row-menu .nv-rm-title {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;              
}

.nv-row-menu .nv-rm-hint {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.25;
}


.nv-row-menu .nv-rm-item--success { color: var(--app-success); }
.nv-row-menu .nv-rm-item--success .nv-rm-ic { color: var(--app-success); }

.nv-row-menu .nv-rm-item--danger { color: var(--app-error); }
.nv-row-menu .nv-rm-item--danger .nv-rm-ic { color: var(--app-error); }

.nv-row-menu .nv-rm-item--brand { color: var(--brand); }
.nv-row-menu .nv-rm-item--brand .nv-rm-ic { color: var(--brand); }


.nv-row-menu .nv-rm-soon {
    flex-shrink: 0;
    align-self: center;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}



.mud-dialog.chat-nmm-dialog {
    width: 100%;
    max-width: 560px;
    max-height: min(92vh, 760px);
}
.chat-nmm-dialog .mud-dialog-title {
    display: none;
}
.chat-nmm-dialog .mud-dialog-content {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 760px);
}
.chat-nmm-dialog .mud-dialog-actions {
    display: none;
}
@media (max-width: 600px) {
    
    .mud-dialog.chat-nmm-dialog {
        max-width: 100vw;
        width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
    .chat-nmm-dialog .mud-dialog-content {
        max-height: 100dvh;
        padding: 0px !important ;
    }
    
    .chat-nmm-dialog .nmm-head { padding-top: calc(16px + env(safe-area-inset-top)); }
    .chat-nmm-dialog .nmm-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}


.chat-mem-row {
    padding: 8px 4px;
    border-radius: 10px;
}

.chat-mem-list { max-height: 52vh; overflow-y: auto; }
.chat-mem-row:hover { background: var(--slate-100); }
.chat-mem-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}


.chat-mem-tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
.chat-mem-tools .chat-mem-search-wrap { flex: 1 1 0; min-width: 130px; transition: flex-basis .16s ease; }
.chat-mem-tools .chat-mem-search { width: 100%; }
.chat-mem-tools .chat-mem-add { flex: 0 0 auto; white-space: nowrap; }


.chat-mem-tools--focus { gap: 0; }
.chat-mem-tools--focus .chat-mem-search-wrap { flex: 1 1 100%; }
.chat-mem-tools--focus .chat-mem-cty,
.chat-mem-tools--focus .chat-mem-add {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .12s ease, width .16s ease;
}


.chat-mem-tools .chat-mem-cty { flex: 0 1 auto; min-width: 0; }
.chat-mem-cty {
    max-width: 100%;
    padding: 6px 26px 6px 10px;
    border: 1px solid var(--app-divider);
    background: var(--app-surface);
    color: var(--fg-1);
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color-scheme: light dark;
}
.chat-mem-cty:hover { background-color: var(--slate-100); }
.chat-mem-cty:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand) 40%, transparent);
    outline-offset: 1px;
}

@media (max-width: 600px) {
    .chat-mem-tools .chat-mem-add { min-width: 40px; padding-left: 8px; padding-right: 8px; }
    .chat-mem-add .chat-mem-add-txt { display: none; }
    .chat-mem-add .mud-button-icon-start { margin-right: 0; margin-left: 0; }
    
    .chat-mem-tools--focus .chat-mem-add { min-width: 0; padding-left: 0; padding-right: 0; }
}

.chat-mem-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 20px 4px;
    text-align: center;
}


.chat-ginfo { display: flex; flex-direction: column; gap: 14px; }
.chat-ginfo-head {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 8px; padding-top: 2px;
}
.chat-ginfo-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--brand, #0A4174) 12%, transparent);
    color: var(--brand, #0A4174); flex: 0 0 auto;
}
.chat-ginfo-avatar.is-off { filter: grayscale(1); opacity: .65; }
.chat-ginfo-avatar .mud-icon-root { width: 34px; height: 34px; font-size: 34px; }
.chat-ginfo-name {
    font-size: 18px; font-weight: 700; line-height: 1.3;
    color: var(--mud-palette-text-primary); word-break: break-word;
}
.chat-ginfo-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chat-ginfo-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--slate-100, #f1f5f9); color: var(--mud-palette-text-secondary);
    border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600;
}
.chat-ginfo-chip .mud-icon-root { width: 15px; height: 15px; font-size: 15px; }
.chat-ginfo-desc {
    background: var(--slate-50, #f8fafc); border: 1px solid var(--slate-100, #f1f5f9);
    border-radius: 12px; padding: 10px 12px;
    font-size: 13.5px; line-height: 1.5; color: var(--mud-palette-text-primary);
    white-space: pre-wrap; word-break: break-word;
}
.chat-ginfo-rows { display: flex; flex-direction: column; }
.chat-ginfo-row {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    width: 100%; padding: 9px 6px; border-radius: 10px;
    background: transparent; border: 0; text-align: left; font: inherit; color: inherit;
}
.chat-ginfo-row + .chat-ginfo-row { border-top: 1px solid var(--slate-100, #f1f5f9); }
.chat-ginfo-row-btn { cursor: pointer; }
.chat-ginfo-row-btn:hover { background: var(--slate-100, #f1f5f9); }
.chat-ginfo-row-ic { color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.chat-ginfo-row-ic .mud-icon-root { width: 19px; height: 19px; font-size: 19px; }
.chat-ginfo-row-lbl { color: var(--mud-palette-text-secondary); font-size: 13px; flex: 0 0 auto; }
.chat-ginfo-row-val {
    margin-left: auto; text-align: right; min-width: 0;
    color: var(--mud-palette-text-primary); font-size: 13.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-ginfo-row-chev { color: var(--slate-400, #94a3b8); flex: 0 0 auto; }
.chat-ginfo-row-chev .mud-icon-root { width: 18px; height: 18px; font-size: 18px; }
.chat-ginfo-row.is-off .chat-ginfo-row-ic,
.chat-ginfo-row.is-off .chat-ginfo-row-val { color: var(--mud-palette-warning, #d97706); }

@media (max-width: 600px) {
    
    .mud-dialog-container:has(> .chat-members-dialog),
    .mud-dialog-container:has(> .mud-dialog.chat-members-dialog) {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .chat-members-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        
        max-height: calc(88dvh - var(--kb, 0px)) !important;
        border-radius: 16px 16px 0 0 !important;
        transition: max-height .18s ease;
    }
    .chat-members-dialog .mud-dialog-content {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
    
    .mud-dialog-container:has(> .chat-members-dialog),
    .mud-dialog-container:has(> .mud-dialog.chat-members-dialog) {
        padding-bottom: var(--kb, 0px) !important;
    }
    
    .chat-mem-list { max-height: max(22vh, calc(52vh - var(--kb, 0px))); }
}


.crm-bell-wrap { position: relative; display: inline-flex; }
.crm-bell { display: inline-flex; transform-origin: top center; }
.crm-bell-shake { animation: crmBellShake .75s cubic-bezier(.36, .07, .19, .97); }

.crm-bell-pop {
    position: absolute; top: calc(100% + 9px); right: 4px; z-index: 2100;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; pointer-events: none;
    background: var(--bg-surface, #fff); color: var(--fg-1, #1f2937);
    border: 1px solid var(--border-1, #e5e7eb); border-radius: 10px; padding: 7px 11px;
    font-size: 12.5px; font-weight: 600; line-height: 1;
    box-shadow: var(--shadow-pop, 0 8px 28px rgba(15, 23, 42, .16));
    animation: crmBellPopIn .18s cubic-bezier(.16, 1, .3, 1);
}
.crm-bell-pop::before {                 
    content: ""; position: absolute; top: -5px; right: 16px; width: 9px; height: 9px;
    background: var(--bg-surface, #fff); border-left: 1px solid var(--border-1, #e5e7eb);
    border-top: 1px solid var(--border-1, #e5e7eb); transform: rotate(45deg);
}
.crm-bell-pop .crm-bell-pop-ic { font-size: 16px; color: var(--brand, #0A4174); }

@media (max-width: 520px) {
    .crm-bell-pop { max-width: calc(100vw - 24px); white-space: normal; }
}
@keyframes crmBellPopIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .crm-bell-pop { animation: none; } }
@keyframes crmBellShake {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(-14deg); }
    20% { transform: rotate(12deg); }
    35% { transform: rotate(-9deg); }
    50% { transform: rotate(7deg); }
    65% { transform: rotate(-4deg); }
    80% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .crm-bell-shake { animation: none; } }

.crm-bell-badge .mud-badge.mud-badge-dot {
    min-width: 9px; width: 9px; height: 9px; border-radius: 50%; padding: 0;
    border: 1.5px solid var(--bg-surface, #fff);
}


@media (max-width: 520px) {
    
    .crm-topbar-icon-btn { display: none !important; }
    
    .crm-user-info { display: none !important; }
}


.crm-topbar-baoloi.crm-topbar-icon-btn { display: inline-flex !important; }


.crm-topbar-nav { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 2px; }
.crm-navctl-btn .mud-icon-root.mud-svg-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.chat-head-vmic .mud-icon-root.mud-svg-icon,

.chat-head-menu-pop .chat-menu-call .mud-icon-root.mud-svg-icon,
.chat-head-menu-pop .chat-menu-hash .mud-icon-root.mud-svg-icon,
.chat-rowmenu .chat-menu-hash .mud-icon-root.mud-svg-icon,
.chat-search-panel .mud-icon-root.mud-svg-icon,
.group-search-field .mud-icon-root.mud-svg-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.crm-topbar-address {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 420px;
    margin-inline-start: 6px;
    padding-inline-start: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
}

.crm-addr-ic.mud-icon-root.mud-svg-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 1rem;
    height: 1rem;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.crm-addr-url {
    min-width: 0;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    padding-inline: 4px 2px;
    cursor: default;
    user-select: all; 
}

.crm-addr-btn { flex: 0 0 auto; }

@media (max-width: 900px) {
    .crm-addr-url { display: none; }
    .crm-topbar-address { max-width: none; }
}

@media (max-width: 520px) {
    .crm-topbar-address { display: none; }
}



.notification-popover-content {
    width: 408px;                      
    max-width: calc(100vw - 24px);     
    height: 520px;                     
    max-height: calc(100dvh - 96px);   
    display: flex;
    flex-direction: column;
    overflow: hidden;                  
}

@media (max-width: 520px) {
    .notification-popover {
        position: fixed !important;
        left: 8px !important; right: 8px !important; top: 58px !important;
        transform: none !important; max-width: none !important; width: auto !important;
    }
    .notification-popover-content { width: 100% !important; height: auto; min-height: 360px; max-height: calc(100dvh - 76px); }
}

.notification-popover-content .notification-scroll {
    flex: 1 1 auto;
    min-height: 0;                     
    overflow-y: auto;                  
    overscroll-behavior: contain;
}

.notification-popover-content .notification-scroll::-webkit-scrollbar {
    width: 6px;
}
.notification-popover-content .notification-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.notification-popover-content .notification-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}


.notification-empty {
    flex: 1 1 auto;                    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 16px;
    text-align: center;
}
.notification-empty .notif-empty-circle {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--slate-100);
    color: var(--fg-3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-empty .notif-empty-title { font-weight: 600; color: var(--fg-1); }
.notification-empty .notif-empty-sub   { font-size: var(--fs-caption); color: var(--fg-3); }
.notification-empty.notif-empty--mini  { padding: 28px 16px; }


.notification-popover-content .notif-head {
    padding: 12px 12px 0 12px;
    border-bottom: 1px solid var(--app-divider);
    flex: 0 0 auto;
}
.notification-popover-content .notif-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.notification-popover-content .notif-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--fg-1);
}
.notification-popover-content .notif-count {
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    line-height: 1.6;
}
.notification-popover-content .notif-head-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.notification-popover-content .notif-link.mud-button-root {
    text-transform: none;
    font-size: var(--fs-caption);
    font-weight: 600;
    min-width: 0;
    padding: 2px 8px;
}


.notification-popover-content .notif-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}
.notification-popover-content .notif-tab {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-family: var(--font-sans);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    color: var(--fg-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.notification-popover-content .notif-tab:hover:not(:disabled) { color: var(--fg-1); }
.notification-popover-content .notif-tab.active {
    color: var(--brand);
    font-weight: 600;
    border-bottom-color: var(--brand);
}
.notification-popover-content .notif-tab:disabled { opacity: .45; cursor: default; }
.notification-popover-content .notif-tab .t-count {
    font-size: var(--fs-tiny);
    font-weight: 600;
    background: var(--slate-100);
    color: var(--fg-3);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    line-height: 1.5;
}
.notification-popover-content .notif-tab.active .t-count {
    background: var(--brand-soft);
    color: var(--brand);
}


.notification-popover-content .notif-row {
    cursor: pointer;
    border-bottom: 1px solid var(--app-divider);
    outline: none;
}
.notification-popover-content .notif-row:last-child { border-bottom: none; }
.notification-popover-content .notif-row:hover { background: var(--slate-50); }
.notification-popover-content .notif-row.unread { background: var(--brand-soft); }
.notification-popover-content .notif-row.unread:hover { background: var(--blue-100); }
.notification-popover-content .notif-row:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-accent); }
.notification-popover-content .notif-row-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    width: 100%;
}
.notification-popover-content .notif-row-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-popover-content .notif-row-icon .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.notification-popover-content .notif-row-icon.tone-brand   { background: var(--brand-soft);     color: var(--brand); }
.notification-popover-content .notif-row-icon.tone-success { background: rgba(22, 163, 74, .12); color: #15803D; }
.notification-popover-content .notif-row-icon.tone-warning { background: rgba(245, 158, 11, .16);color: #B45309; }
.notification-popover-content .notif-row-icon.tone-error   { background: rgba(239, 68, 68, .12); color: #B91C1C; }
.notification-popover-content .notif-row-icon.tone-info    { background: rgba(14, 165, 233, .12);color: #075985; }
.notification-popover-content .notif-row-icon.tone-neutral { background: var(--slate-100);       color: var(--fg-2); }

.notification-popover-content .notif-row-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-popover-content .notif-row-source {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-bottom: 1px;
}
.notification-popover-content .notif-src-sys {
    flex: 0 0 auto;
    width: 15px; height: 15px;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    background: var(--slate-100);
    color: var(--fg-3);
}
.notification-popover-content .notif-src-sys .mud-icon-root { font-size: 10px; width: 10px; height: 10px; }
.notification-popover-content .notif-src-av {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 8.5px; font-weight: 700; letter-spacing: .01em;
}

.notification-popover-content .notif-src-name {
    font-size: var(--fs-caption);
    font-weight: 700;
    color: var(--fg-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-popover-content .notif-row-title {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--fg-1);
    line-height: 1.35;
}
.notification-popover-content .notif-row-title .notif-code {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.92em;
}

.notification-popover-content .notif-row-ctx {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--fg-2);
}
.notification-popover-content .notif-row-ctx .mud-icon-root {
    font-size: 13px; width: 13px; height: 13px;
    color: var(--fg-3); flex: 0 0 auto;
}
.notification-popover-content .notif-ctx-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.notification-popover-content .notif-row-body {
    font-size: 13px;
    color: var(--fg-2);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-popover-content .notif-row-body .notif-body-em {
    font-weight: 600;
    color: var(--fg-1);
}
.notification-popover-content .notif-row-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-tiny);
    color: var(--fg-4);
    margin-top: 2px;
}
.notification-popover-content .notif-mention-tag {
    font-size: var(--fs-tiny);
    font-weight: 600;
    color: var(--info-500);
    background: rgba(14, 165, 233, .12);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
}
.notification-popover-content .notif-row-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: var(--radius-pill);
    background: var(--brand-accent);
}


.notif-grp-count {
    display: inline-block;
    margin-left: 6px;
    font-size: var(--fs-tiny);
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}


.inbox-item { border-radius: 12px; margin-bottom: 4px; }
.inbox-item.inbox-unread { background: var(--brand-soft); }
.inbox-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; }

.inbox-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.inbox-ico .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }
.inbox-ico.tone-brand   { background: var(--brand-soft);      color: var(--brand); }
.inbox-ico.tone-success { background: rgba(22, 163, 74, .12); color: #15803D; }
.inbox-ico.tone-warning { background: rgba(245, 158, 11, .16); color: #B45309; }
.inbox-ico.tone-error   { background: rgba(239, 68, 68, .12); color: #B91C1C; }
.inbox-ico.tone-info    { background: rgba(14, 165, 233, .12); color: #075985; }
.inbox-ico.tone-neutral { background: var(--slate-100);       color: var(--fg-2); }
.inbox-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.inbox-source { display: flex; align-items: center; gap: 6px; min-width: 0; }
.inbox-src-av { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; }
.inbox-src-sys { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--slate-100); color: var(--fg-3); }
.inbox-src-sys .mud-icon-root { font-size: 11px; width: 11px; height: 11px; }
.inbox-src-name { font-size: var(--fs-caption); font-weight: 700; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inbox-title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-1); line-height: 1.35; }

.inbox-ctx { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--fg-2); }
.inbox-ctx .mud-icon-root { font-size: 13px; width: 13px; height: 13px; color: var(--fg-3); flex: 0 0 auto; }
.inbox-ctx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inbox-body { font-size: 13px; color: var(--fg-2); line-height: 1.45; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-time { font-size: var(--fs-tiny); color: var(--fg-4); margin-top: 2px; }

.inbox-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--brand-accent); }

.inbox-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; opacity: 0;
    pointer-events: none; transition: opacity .12s ease; }
.inbox-item:hover .inbox-actions,
.inbox-item:focus-within .inbox-actions { opacity: 1; pointer-events: auto; }
@media (hover: none) { .inbox-actions { display: none; } }


.mud-dialog-container:has(.noti-action-sheet) { align-items: flex-end; justify-content: center; padding: 0 !important; }
.noti-action-sheet.mud-dialog { width: 100%; max-width: 560px; margin: 0; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom); }
.noti-action-sheet .mud-dialog-content { padding: 4px 8px 10px; overflow: visible; }


.nas-head { position: relative; height: 34px; flex: 0 0 auto; }
.nas-head .app-sheet-grab {
    display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    z-index: 2; width: 44px; height: 22px; touch-action: none; cursor: grab;
}
.nas-head .app-sheet-grab::before {
    content: ''; position: absolute; top: 8px; left: 0;
    width: 44px; height: 5px; border-radius: 999px; background: var(--app-divider);
}

.nas-close {
    position: absolute; top: 0; right: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    border: 0; background: none; border-radius: 50%;
    color: var(--fg-3); cursor: pointer;
}
.nas-close:hover, .nas-close:active { background: var(--slate-100); color: var(--fg-1); }
.nas-close svg { width: 18px; height: 18px; }
.nas-list { display: flex; flex-direction: column; }
.nas-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 15px 16px; background: none;
    border: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--fg-1); text-align: left;
    cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.nas-item:hover, .nas-item:active { background: var(--slate-100); }

.nas-ico { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--fg-2); }
.nas-ico svg { width: 23px; height: 23px; }
.nas-label { flex: 1 1 auto; }
.nas-danger { color: var(--mud-palette-error); }
.nas-danger .nas-ico { color: var(--mud-palette-error); }


.ct-viewport { position: fixed; z-index: 2000; display: flex; flex-direction: column; gap: 10px;
    width: 384px; max-width: calc(100vw - 32px); pointer-events: none; }
.ct-viewport > * { pointer-events: auto; }

.ct-viewport.ct-bottom-center {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: calc(var(--dock-h, 96px) + 14px);
    
    align-items: stretch; flex-direction: column-reverse;
}
.ct-viewport.ct-bottom-center .ct-toast { animation-name: ct-in-up; }
.ct-viewport.ct-bottom-center .ct-toast.ct-leaving { animation-name: ct-out-down; }

@keyframes ct-in-up  { 0% { opacity: 0; transform: translateY(26px) scale(.96); }
                       62% { opacity: 1; transform: translateY(-3px) scale(1.012); }
                       100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ct-out-down { to { opacity: 0; transform: translateY(18px) scale(.985); } }
@media (max-width: 520px) {
    .ct-viewport { left: 12px; right: 12px; width: auto; }
    
    .ct-viewport.ct-bottom-center {
        left: 12px; right: 12px; transform: none;
        bottom: auto; top: calc(env(safe-area-inset-top) + 8px);
        flex-direction: column; align-items: stretch;
    }
    .ct-viewport.ct-bottom-center .ct-toast { animation-name: ct-in-down; }
    .ct-viewport.ct-bottom-center .ct-toast.ct-leaving { animation-name: ct-out-up; }
}

@keyframes ct-in-down { 0% { opacity: 0; transform: translateY(-26px) scale(.96); }
                        62% { opacity: 1; transform: translateY(3px) scale(1.012); }
                        100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ct-out-up { to { opacity: 0; transform: translateY(-18px) scale(.985); } }


@media (max-width: 520px) {
    
    #mud-snackbar-container {
        top: calc(env(safe-area-inset-top) + 10px) !important;
        left: 10px !important; right: 10px !important;
        transform: none !important; width: auto !important;
        display: flex !important; flex-direction: column !important; align-items: center !important;
    }
    
    #mud-snackbar-container .mud-snackbar {
        min-width: 0 !important; max-width: 100% !important; width: fit-content !important;
        margin: 0 0 10px 0 !important; border-radius: 16px !important;
        animation: vm-snack-in-down .3s cubic-bezier(.22, 1, .36, 1);   
    }
}
@keyframes vm-snack-in-down {
    from { opacity: 0; transform: translateY(-120%); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 521px) {
    #mud-snackbar-container {
        top: auto !important;
        bottom: calc(var(--dock-h, 96px) + 14px) !important;
    }
    #mud-snackbar-container .mud-snackbar {
        animation: vm-snack-in-up .3s cubic-bezier(.22, 1, .36, 1);
        
        transition: opacity .22s ease !important;
    }
}
@keyframes vm-snack-in-up {
    from { opacity: 0; transform: translateY(120%); }
    to   { opacity: 1; transform: translateY(0); }
}

.ct-toast { position: relative; display: flex; gap: 12px; padding: 13px 14px 12px;
    background: var(--bg-surface); border: none; border-radius: 14px;
    
    box-shadow: 0 10px 28px -8px rgba(15, 23, 42, .26);
    overflow: hidden;
    animation: ct-in var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.ct-toast.ct-leaving { animation: ct-out 180ms cubic-bezier(.4,0,.2,1) forwards; }

@keyframes ct-in  { 0% { opacity: 0; transform: translateX(20px) scale(.96); }
                    62% { opacity: 1; transform: translateX(-2px) scale(1.012); }
                    100% { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes ct-out { to { opacity: 0; transform: translateX(16px) scale(.985); } }


.ct-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.ct-toast.ct-mention::before { width: 4px; }                          
.ct-toast.ct-task::before    { background: var(--success-500); }      


.ct-av { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.ct-av-single { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.ct-av-kind { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.ct-av-sop  { background: var(--brand-soft); color: var(--brand); }
.ct-av-task { background: color-mix(in srgb, var(--success-500) 14%, transparent); color: var(--success-500); }



.ct-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.ct-meta-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--fg-2);
    background: var(--bg-sunken); border: 1px solid var(--border-1); border-radius: 999px; padding: 3px 9px; }
.ct-meta-by { font-weight: 500; color: var(--fg-3); }


.ct-body { flex: 1; min-width: 0; }
.ct-top { display: flex; align-items: baseline; gap: 8px; }
.ct-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--fg-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-time { flex-shrink: 0; font-size: 11px; color: var(--fg-3); font-weight: 500; }
.ct-ctx { display: flex; align-items: center; gap: 5px; margin-top: 1px; font-size: 11.5px; color: var(--fg-2); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   

.ct-name--link, .ct-ctx--link { cursor: pointer; }
.ct-name--link:hover { color: var(--brand); text-decoration: underline; }
.ct-ctx--link:hover { color: var(--brand); }
.ct-name--link:focus-visible, .ct-ctx--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 4px; }
.ct-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px 2px 6px;
    background: var(--brand-soft); color: var(--brand); border-radius: 999px; font-size: 11px; font-weight: 700; }
.ct-text { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--fg-1);   
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ct-text .ct-at { color: var(--brand); font-weight: 600; }


.ct-attach { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 7px 9px;
    background: var(--bg-sunken); border: 1px solid var(--border-1); border-radius: 9px; }
.ct-attach-ic { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 8.5px; font-weight: 800; letter-spacing: .02em; }
.ct-attach-ic.ct-file { background: color-mix(in srgb, var(--error-500) 12%, transparent); color: var(--error-500); }

.ct-attach-ic.ct-img  { background: var(--info-500);
    background: linear-gradient(135deg, color-mix(in srgb, var(--info-500) 45%, white), var(--info-500)); color: #fff; }
.ct-attach-meta { min-width: 0; }
.ct-attach-name { font-size: 12px; font-weight: 600; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-attach-size { font-size: 10.5px; color: var(--fg-3); margin-top: 1px; }


.ct-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: nowrap; }
.ct-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px;
    font-family: inherit; font-size: 12.5px; font-weight: 600; border-radius: 8px; border: 1px solid transparent;
    white-space: nowrap; flex: 0 0 auto;   
    transition: background var(--dur-fast,120ms), color var(--dur-fast,120ms), border-color var(--dur-fast,120ms); }
.ct-btn-primary { background: var(--brand); color: #fff; }
.ct-btn-primary:hover { background: var(--brand-hover); }
.ct-btn-ghost { background: transparent; color: var(--fg-2); }
.ct-btn-ghost:hover { background: var(--bg-sunken); color: var(--fg-1); }

.ct-actions-spacer { flex: 1; order: -1; }

@media (max-width: 400px) {
    .ct-actions { flex-wrap: wrap; }
    .ct-actions .ct-actions-spacer { flex-basis: 100%; height: 0; }
    .ct-actions .ct-btn { flex: 1 1 auto; justify-content: center; }
}




.ct-reply { display: flex; align-items: center; gap: 6px; margin-top: 10px; height: 36px; padding: 0 6px;
    background: var(--bg-sunken); border: 1px solid var(--border-2); border-radius: 999px; }

.ct-reply-cancel { width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--fg-3); border: none; cursor: pointer; padding: 0;
    transition: background var(--dur-fast,120ms), color var(--dur-fast,120ms); }
.ct-reply-cancel:hover { background: var(--bg-surface); color: var(--fg-1); }
.ct-reply-cancel:disabled { opacity: .4; cursor: default; }
.ct-reply-cancel .mud-icon-root { font-size: 16px; }
.ct-reply input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 12.5px; color: var(--fg-1); }
.ct-reply input::placeholder { color: var(--fg-4); }
.ct-reply-send { width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff; border: none; cursor: pointer; transition: background var(--dur-fast,120ms), opacity var(--dur-fast,120ms); }
.ct-reply-send:disabled { opacity: .4; cursor: default; }
.ct-reply-send:not(:disabled):hover { background: var(--brand-hover); }
.ct-reply-send .mud-progress-circular { width: 16px !important; height: 16px !important; }


.ct-sent { display: flex; align-items: center; gap: 6px; margin-top: 10px; height: 30px;
    color: var(--success-500); font-size: 12.5px; font-weight: 600; }
.ct-sent .mud-icon-root { font-size: 17px; }
.ct-send-err { margin-top: 6px; font-size: 11.5px; font-weight: 500; color: var(--error-500); }


.ct-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--brand); opacity: .35;
    border-bottom-left-radius: 14px; transform-origin: left; animation: ct-shrink linear forwards; }
.ct-toast:hover .ct-progress { animation-play-state: paused; }
@keyframes ct-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }


.ct-overflow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-surface);
    border: none; border-radius: 12px; box-shadow: var(--shadow-card); cursor: pointer;   
    animation: ct-in var(--dur-base,200ms) var(--ease-out, cubic-bezier(.16,1,.3,1)); transition: background var(--dur-fast,120ms); }
.ct-overflow:hover { background: var(--bg-sunken); }
.ct-overflow-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand); }
.ct-overflow-body { flex: 1; min-width: 0; }
.ct-overflow-title { font-size: 12.5px; font-weight: 700; color: var(--fg-1); }
.ct-overflow-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }


.ct-toast .mud-icon-root, .ct-overflow .mud-icon-root { font-size: 15px; }
.ct-ctx .mud-icon-root, .ct-meta-chip .mud-icon-root { font-size: 12px; }
.ct-tag .mud-icon-root { font-size: 13px; }
.ct-btn .mud-icon-root { font-size: 15px; }
.ct-av-kind .mud-icon-root { font-size: 21px; }
.ct-reply-send .mud-icon-root { font-size: 15px; }
.ct-overflow-ic .mud-icon-root { font-size: 17px; }

.ct-toast .ct-vico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) { .ct-toast, .ct-overflow { animation: none; } .ct-progress { animation-duration: 0s !important; } }


.notification-popover-content .notif-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--app-divider);
    padding: 4px;
}
.notification-popover-content .notif-foot .mud-button-root {
    text-transform: none;
    font-weight: 600;
}

.notification-loading-row,
.notification-end-row,
.notification-loadmore-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
}
.notification-end-row {
    border-top: 1px solid var(--app-divider);
}
.notification-loading-row {
    background: var(--app-primary-lighten);
    border-top: 1px solid var(--app-divider);
}
.notification-loadmore-row {
    border-top: 1px dashed var(--app-divider);
}


.notification-popover-content .notification-sentinel {
    height: 1px;
    width: 100%;
    margin: 0;
    padding: 0;
}



.notif-grp-count {
    display: inline-block;
    margin-left: 6px;
    font-size: var(--fs-tiny);
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}


.inbox-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.inbox-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.inbox-ico .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }
.inbox-ico.tone-brand   { background: var(--brand-soft);      color: var(--brand); }
.inbox-ico.tone-success { background: rgba(22, 163, 74, .12); color: #15803D; }
.inbox-ico.tone-warning { background: rgba(245, 158, 11, .16); color: #B45309; }
.inbox-ico.tone-error   { background: rgba(239, 68, 68, .12); color: #B91C1C; }
.inbox-ico.tone-info    { background: rgba(14, 165, 233, .12); color: #075985; }
.inbox-ico.tone-neutral { background: var(--slate-100);       color: var(--fg-2); }
.inbox-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.inbox-source { display: flex; align-items: center; gap: 6px; min-width: 0; }
.inbox-src-av { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; }
.inbox-src-sys { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--slate-100); color: var(--fg-3); }
.inbox-src-sys .mud-icon-root { font-size: 11px; width: 11px; height: 11px; }
.inbox-src-name { font-size: var(--fs-caption); font-weight: 700; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inbox-title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-1); line-height: 1.35; }

.inbox-ctx { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--fg-2); }
.inbox-ctx .mud-icon-root { font-size: 13px; width: 13px; height: 13px; color: var(--fg-3); flex: 0 0 auto; }
.inbox-ctx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inbox-body { font-size: 13px; color: var(--fg-2); line-height: 1.45; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-time { font-size: var(--fs-tiny); color: var(--fg-4); margin-top: 2px; }

.inbox-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--brand-accent); }


.ts-label-sheet {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ts-asset-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 240px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    box-sizing: border-box;
}

.ts-asset-label-qr {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
}

.ts-asset-label-text {
    min-width: 0;
}

.ts-asset-label-ma {
    font-weight: 700;
    font-size: 13px;
    word-break: break-all;
}

.ts-asset-label-ten {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}


@media print {
    body:has(.ts-label-sheet) .mud-layout,
    body:has(.ts-label-sheet) .mud-overlay {
        display: none !important;
    }

    body:has(.ts-label-sheet) .mud-dialog-container,
    body:has(.ts-label-sheet) .mud-dialog {
        position: static !important;
        max-width: none !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    .ts-no-print {
        display: none !important;
    }
}


.ts-img-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.ts-img-tile {
    position: relative;
    width: 110px;
    height: 110px;
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
}

    .ts-img-tile .ts-img-clickable {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .ts-img-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ts-img-remove {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4px;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.ts-img-tile:hover .ts-img-remove,
.ts-img-remove--show {
    opacity: 1;
}

    .ts-img-remove .mud-button-root {
        pointer-events: auto;
    }

.ts-img-avatar-badge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 10px;
    line-height: 1.7;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    pointer-events: none;
}

.ts-img-add-upload {
    width: 110px;
    height: 110px;
    flex: 0 0 auto;
    position: relative;
}

.ts-img-add {
    width: 110px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1.5px dashed var(--mud-palette-primary);
    border-radius: 10px;
    color: var(--mud-palette-primary);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .ts-img-add:hover,
    .ts-img-add--drag {
        background: var(--mud-palette-primary-hover);
        border-style: solid;
    }


.ts-field-with-add {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}


.ts-img-viewer-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-dark);
    border-radius: 10px;
    
    height: 70vh;
    min-height: 320px;
    overflow: hidden;
}



.ts-img-viewer-nav {
    
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.85;
}

    .ts-img-viewer-nav:first-of-type { left: 12px; }
    .ts-img-viewer-nav:last-of-type  { right: 12px; }

.ts-img-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    gap: 12px;
}


.ts-asset-avatar {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
}


.ts-list-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

.ts-list-avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-disabled);
}


.ts-stat-card {
    transition: border-color .15s, box-shadow .15s, background .15s;
}

    .ts-stat-card:hover {
        border-color: var(--mud-palette-primary) !important;
    }

    .ts-stat-card--active {
        border-color: var(--mud-palette-primary) !important;
        background: var(--mud-palette-primary-hover);
        box-shadow: 0 0 0 1px var(--mud-palette-primary) inset;
    }


.ts-import-row-err td {
    background: var(--mud-palette-error-hover, #fdecea);
}


.ts-org-filter-btn {
    height: 38px;
    text-transform: none;
}

.ts-org-filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-org-tree-body {
    max-height: 50vh;
    overflow: auto;
}




.dao-tao-dept-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 6px;
}

.dao-tao-stat-card {
    transition: border-color 0.2s ease;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 10px !important;
}

.dao-tao-stat-card:hover {
    border-color: var(--mud-palette-primary-hover);
}

.dao-tao-stat-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--mud-palette-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

.dao-tao-stat-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.dao-tao-stat-val-success { color: var(--mud-palette-success); }
.dao-tao-stat-val-error   { color: var(--mud-palette-error); }
.dao-tao-stat-val-warning { color: var(--mud-palette-warning); }

.dao-tao-stat-denom {
    font-size: 13px;
    color: var(--mud-palette-success);
    font-weight: 600;
    opacity: 0.55;
    margin-left: 2px;
}


.dao-tao-stat-val:not(.dao-tao-stat-val-success) .dao-tao-stat-denom {
    color: var(--mud-palette-text-secondary);
    opacity: 0.85;
}


.dao-tao-stat-card-rich {
    min-height: 90px !important;
    gap: 4px !important;
}

.dao-tao-stat-card-rich .dao-tao-stat-val {
    font-size: 26px;
}

.dao-tao-stat-sub {
    font-size: 11px !important;
    color: var(--mud-palette-text-secondary) !important;
    line-height: 1.3;
    margin-top: 2px;
}


.dao-tao-course-banner {
    border-left: 3px solid var(--mud-palette-primary) !important;
    background: var(--mud-palette-surface);
}


.dao-tao-course-banner-grid {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.dao-tao-course-banner-info {
    flex: 1 1 auto;
    min-width: 0;
}

.dao-tao-course-banner-filter {
    flex: 0 0 auto;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}


.dao-tao-banner-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}


.dao-tao-banner-search {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 240px;
}


.dao-tao-banner-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
.dao-tao-banner-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 10px;
    background: var(--mud-palette-background-grey, #f4f4f8);
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
}
.dao-tao-banner-stat-label { color: var(--mud-palette-text-secondary); }
.dao-tao-banner-stat-val { font-weight: 700; }


.dao-tao-course-banner-filter .dao-tao-state-pills {
    justify-content: flex-end;
}


@media (max-width: 1100px) {
    .dao-tao-course-banner-grid {
        flex-direction: column;
    }
    .dao-tao-course-banner-filter {
        max-width: 100%;
        align-items: flex-start;
    }
    .dao-tao-course-banner-filter .dao-tao-banner-stats {
        justify-content: flex-start;
    }
}

.dao-tao-course-banner-ma {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: var(--brand-soft);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}


.dao-tao-state-menu {
    min-width: 260px;
}


.dao-tao-state-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--mud-palette-background-grey, #f4f4f8);
    border-radius: 999px;
    align-items: center;
}

.dao-tao-state-pill {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
    font-family: inherit;
}

.dao-tao-state-pill:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--mud-palette-text-primary);
}

.dao-tao-state-pill.active {
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.dao-tao-state-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 600;
}


.dao-tao-state-pill-success .dao-tao-state-pill-count {
    background: rgba(46, 125, 50, 0.12);
    color: var(--mud-palette-success-darken);
}
.dao-tao-state-pill-info .dao-tao-state-pill-count {
    background: rgba(2, 136, 209, 0.12);
    color: var(--mud-palette-info-darken);
}
.dao-tao-state-pill-warning .dao-tao-state-pill-count {
    background: rgba(237, 108, 2, 0.12);
    color: var(--mud-palette-warning-darken);
}
.dao-tao-state-pill-error .dao-tao-state-pill-count {
    background: rgba(211, 47, 47, 0.12);
    color: var(--mud-palette-error-darken);
}


.dao-tao-state-pill.active.dao-tao-state-pill-success .dao-tao-state-pill-count {
    background: var(--mud-palette-success); color: #fff;
}
.dao-tao-state-pill.active.dao-tao-state-pill-info .dao-tao-state-pill-count {
    background: var(--mud-palette-info); color: #fff;
}
.dao-tao-state-pill.active.dao-tao-state-pill-warning .dao-tao-state-pill-count {
    background: var(--mud-palette-warning); color: #fff;
}
.dao-tao-state-pill.active.dao-tao-state-pill-error .dao-tao-state-pill-count {
    background: var(--mud-palette-error); color: #fff;
}
.dao-tao-state-pill.active.dao-tao-state-pill-default .dao-tao-state-pill-count {
    background: var(--mud-palette-primary); color: #fff;
}


.dao-tao-tracking-table td {
    vertical-align: top;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.dao-tao-cell-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    min-height: 22px;
}

.dao-tao-cell-label {
    flex: 0 0 80px;
    color: var(--mud-palette-text-secondary);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.dao-tao-cell-value {
    color: var(--mud-palette-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
}


.dao-tao-cert-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    transition: background 120ms ease;
}

.dao-tao-cert-link:hover {
    background: var(--mud-palette-primary-hover, rgba(25, 118, 210, 0.08));
    text-decoration: underline;
}

.dao-tao-state-menu-count {
    font-size: 11px;
    font-weight: 600;
    background: var(--slate-200);
    color: var(--fg-3);
    padding: 1px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}


.dao-tao-filter-bar {
    row-gap: 8px;
}

.dao-tao-seg {
    display: inline-flex;
    background: var(--slate-100);
    padding: 4px;
    border-radius: 10px;
    gap: 2px;
}

.dao-tao-seg .dao-tao-seg-btn,
button.dao-tao-seg-btn {
    appearance: none;
    border: 0 !important;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 140ms, color 140ms, box-shadow 140ms;
    white-space: nowrap;
    line-height: 1.4;
}

.dao-tao-seg .dao-tao-seg-btn:hover,
button.dao-tao-seg-btn:hover {
    color: var(--mud-palette-text-primary);
    background: rgba(0, 0, 0, 0.03);
}

.dao-tao-seg .dao-tao-seg-btn.active,
button.dao-tao-seg-btn.active {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.dao-tao-seg-btn .dao-tao-seg-count {
    font-size: 11px;
    font-weight: 600;
    background: var(--slate-200);
    color: var(--fg-3);
    padding: 1px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
    margin-left: 4px;
}

.dao-tao-seg-btn.active .dao-tao-seg-count {
    background: var(--brand-soft);
    color: var(--mud-palette-primary);
}


.dao-tao-seg-count-success {
    background: rgba(76, 175, 80, 0.18) !important;
    color: var(--mud-palette-success) !important;
}

.dao-tao-seg-count-error {
    background: rgba(244, 67, 54, 0.16) !important;
    color: var(--mud-palette-error) !important;
}


.dao-tao-left-nav {
    width: 248px;
    min-width: 232px;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
}

.dao-tao-nav-search {
    padding: 12px 12px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dao-tao-nav-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 6px 0;
}

.dao-tao-nav-section {
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dao-tao-nav-section:last-child {
    border-bottom: none;
}

.dao-tao-nav-title {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 14px 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.dao-tao-nav-title:hover {
    background: var(--mud-palette-action-default-hover);
}

.dao-tao-nav-title > span:first-child {
    flex: 1;
    text-align: left;
}

.dao-tao-nav-hint {
    font-size: 10px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mud-palette-text-disabled);
}

.dao-tao-nav-chevron {
    transition: transform 0.18s ease;
}

.dao-tao-nav-items {
    display: flex;
    flex-direction: column;
    padding: 2px 8px 4px;
}

.dao-tao-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    user-select: none;
    transition: background 0.12s ease;
    position: relative;
}

.dao-tao-nav-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.dao-tao-nav-item.is-active {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary-darken);
    font-weight: 600;
}

.dao-tao-nav-item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--mud-palette-primary);
    border-radius: 0 2px 2px 0;
}

.dao-tao-nav-item.is-sub {
    margin-left: 16px;
    font-size: 12.5px;
}


.dao-tao-nav-item.is-sub2 {
    margin-left: 32px;
    font-size: 12px;
}

.dao-tao-nav-item-body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dao-tao-nav-item-count {
    margin-left: auto;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}


.dao-tao-nav-item-count.has-data {
    background: var(--brand-soft);
    color: var(--brand);
}


.dao-tao-nav-item.is-active .dao-tao-nav-item-count {
    background: var(--mud-palette-primary);
    color: white;
}

.dao-tao-nav-item-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    margin-right: 6px;
    flex-shrink: 0;
}


.dao-tao-course-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.dao-tao-nav-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}


.dao-tao-course-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 1px;
    line-height: 1.25;
}
.dao-tao-course-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}
.dao-tao-course-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--mud-palette-text-disabled);
}

.dao-tao-nav-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
}

.dao-tao-nav-item-co {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary-darken);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    margin-right: 6px;
    flex-shrink: 0;
}

.dao-tao-nav-reset {
    flex-shrink: 0;
    margin: 6px 12px;
}


.dao-tao-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
    --dao-tao-layout-offset: 200px;
    height: calc(100vh - var(--dao-tao-layout-offset));
    height: calc(100dvh - var(--dao-tao-layout-offset));
    min-height: 420px;
}

.dao-tao-layout-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.dao-tao-layout-content > .dao-tao-content-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.dao-tao-table-paper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.dao-tao-table-paper .mud-table {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dao-tao-table-paper .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}


.dao-tao-table-paper .mud-table thead.mud-table-sticky-header th {
    background: var(--mud-palette-surface);
    z-index: 2;
}


.dao-tao-pagination-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 1100px) {
    .dao-tao-layout {
        flex-direction: column;
        height: auto;
    }
    .dao-tao-left-nav {
        width: 100%;
        max-height: 360px;
    }
}


.app-hide-xs {  }

@media (max-width: 600px) {
    .app-hide-xs { display: none !important; }

    

    
    .dao-tao-seg {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .dao-tao-seg::-webkit-scrollbar { height: 4px; }

    
    .dao-tao-seg .dao-tao-seg-btn,
    button.dao-tao-seg-btn {
        padding: 5px 9px !important;
        font-size: 12.5px;
    }
    .dao-tao-seg-btn .dao-tao-seg-count {
        font-size: 10.5px;
        padding: 1px 6px;
    }

    
    .dao-tao-filter-bar {
        padding: 6px !important;
    }
}


@media (max-width: 768px) {
    
    .dao-tao-left-nav {
        max-height: 240px;
    }

    
    .dao-tao-pagination-bar {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        text-align: center;
    }

    
    .dao-tao-stat-card {
        padding: 10px !important;
    }
    .dao-tao-stat-val {
        font-size: 22px !important;
    }

    
    .dao-tao-form-section-title {
        flex-wrap: wrap;
    }
}



.dao-tao-form-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dao-tao-form-section-title .dao-tao-form-section-hint {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}


@media (max-width: 768px) {
    .dao-tao-form-section-title .dao-tao-form-section-hint {
        margin-left: 0;
        width: 100%;
        margin-top: 2px;
    }
}

.dao-tao-toggle-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}


.dao-tao-toggle-card.dao-tao-toggle-card-compact {
    padding: 8px 12px;
    border-radius: 8px;
}

.dao-tao-toggle-card:hover {
    border-color: var(--mud-palette-primary-hover);
}

.dao-tao-toggle-card.is-on {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}


.dao-tao-summary-card {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.04), transparent 60%);
    border-color: var(--mud-palette-success) !important;
}

.dao-tao-summary-stat {
    text-align: center;
    padding: 8px 4px;
}

.dao-tao-summary-stat-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.dao-tao-summary-stat-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.dao-tao-summary-stat-unit {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}



.dao-tao-radio-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dao-tao-radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    transition: all 0.15s;
    user-select: none;
}

.dao-tao-radio-pill:hover {
    border-color: var(--mud-palette-primary);
}

.dao-tao-radio-pill-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    flex-shrink: 0;
    transition: all 0.15s;
}

.dao-tao-radio-pill.checked {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.dao-tao-radio-pill.checked .dao-tao-radio-pill-dot {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 2px white;
}


.dao-tao-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.dao-tao-chip-pb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    border: 1px solid transparent;
}

.dao-tao-chip-pb-count {
    opacity: 0.7;
    font-size: 11px;
    margin-left: -2px;
}

.dao-tao-chip-pb-x {
    appearance: none;
    border: 0;
    background: transparent;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
}

.dao-tao-chip-pb-x:hover {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.dao-tao-chip-pb-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    appearance: none;
    background: transparent;
    border: 1px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s;
}

.dao-tao-chip-pb-add:hover {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}


.dao-tao-preview-drawer {
    width: 520px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;          
}

@media (max-width: 600px) {
    .dao-tao-preview-drawer {
        width: 100vw;
    }
}


.dao-tao-preview-root {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.dao-tao-preview-head {
    flex-shrink: 0;
}

.dao-tao-preview-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.dao-tao-preview-foot {
    flex-shrink: 0;
}

.dao-tao-preview-head {
    background: linear-gradient(180deg, var(--mud-palette-primary-hover) 0%, var(--mud-palette-surface) 100%);
    padding: 18px 20px 16px;
}

.dao-tao-preview-section {
    padding: 14px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dao-tao-preview-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}


.dao-tao-preview-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dao-tao-preview-stat {
    background: var(--mud-palette-background-grey, #f4f4f8);
    border-radius: 10px;
    padding: 12px 14px;
}

.dao-tao-preview-stat-label {
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.dao-tao-preview-stat-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.1;
}


.dao-tao-preview-progress {
    background: var(--mud-palette-background-grey, #f4f4f8);
    border-radius: 10px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    align-items: center;
}

.dao-tao-preview-progress-label {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.dao-tao-preview-progress-val {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 14px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    text-align: right;
}

.dao-tao-preview-progress-bar {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    height: 8px;
    background: var(--mud-palette-action-default-hover, rgba(0,0,0,0.08));
    border-radius: 999px;
    overflow: hidden;
}

.dao-tao-preview-progress-fill {
    height: 100%;
    background: var(--mud-palette-primary);
    border-radius: 999px;
    transition: width 240ms ease;
}


.dao-tao-preview-desc {
    background: var(--mud-palette-primary-hover, rgba(25,118,210,0.06));
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    line-height: 1.55;
}


.dao-tao-preview-rows {
    display: flex;
    flex-direction: column;
}

.dao-tao-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    font-size: 13px;
}

.dao-tao-preview-row:last-child {
    border-bottom: none;
}

.dao-tao-preview-row-label {
    color: var(--mud-palette-text-secondary);
}

.dao-tao-preview-row-val {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    text-align: right;
}


.dao-tao-preview-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    font-size: 10.5px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}


.dao-tao-preview-mat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.dao-tao-preview-mat-num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.dao-tao-preview-mat-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dao-tao-preview-mat-name {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.dao-tao-preview-mat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.dao-tao-preview-mat-type {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}


.dao-tao-preview-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}


.dao-tao-preview-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dao-tao-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 12.5px;
    background: var(--mud-palette-action-default-hover);
}

.dao-tao-preview-q {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px 12px;
}

.dao-tao-preview-q-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.dao-tao-preview-q-num {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.dao-tao-preview-q-diem {
    font-size: 12px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    white-space: nowrap;
}

.dao-tao-preview-q-noidung {
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 6px;
}

.dao-tao-preview-q-opts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dao-tao-preview-q-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 6px;
}

.dao-tao-preview-q-opt.correct {
    background: var(--mud-palette-success-hover, rgba(46, 160, 67, 0.10));
    color: var(--mud-palette-success-darken);
    font-weight: 500;
}


.dao-tao-tl {
    display: flex;
    flex-direction: column;
}

.dao-tao-tl-item {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 14px;
    position: relative;
    padding-bottom: 20px;
}


.dao-tao-tl-item:not(.dao-tao-tl-last)::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--mud-palette-lines-default);
}

.dao-tao-tl-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    z-index: 1;
}

.dao-tao-tl-body {
    min-width: 0;
    padding-top: 3px;
}

.dao-tao-tl-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--mud-palette-text-primary);
}

.dao-tao-tl-bank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
}

.dao-tao-card {
    height: 100%;                 
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.18s ease;
}


.dao-tao-card > .mud-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.dao-tao-card:hover {
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.dao-tao-card-title {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.dao-tao-card-title:hover {
    color: var(--mud-palette-primary);
}

.dao-tao-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.dao-tao-card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    padding: 10px 12px;
    background: var(--mud-palette-action-default-hover);
    border-radius: 10px;
}

.dao-tao-card-stat {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    min-width: 0;
}

.dao-tao-card-stat > .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    flex-shrink: 0;
}

.dao-tao-card-stat-label {
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    line-height: 1.3;
}

.dao-tao-card-stat-val {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.35;
    white-space: nowrap;   
    overflow: hidden;
    text-overflow: ellipsis;
}


.dao-tao-card-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dao-tao-card-progress-bar {
    flex: 1;
    min-width: 0;
    height: 6px !important;
    border-radius: 999px;
}

.dao-tao-card-progress-label {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px !important;
}


.dao-tao-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    margin-top: auto;             
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    
    .dao-tao-card-foot > :last-child {
        margin-left: auto;
        justify-content: flex-end;  
    }
    .dao-tao-card-foot > :last-child > .mud-button-root {
        flex: 0 1 auto;             
    }
}

.dao-tao-state-chip {
    font-weight: 600 !important;
}


.dao-tao-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.dao-tao-admin-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 16px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dao-tao-admin-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 16px rgba(10, 65, 116, 0.08);
    transform: translateY(-1px);
}

.dao-tao-admin-card.is-preview {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary) inset;
}


.dao-tao-row-menu {
    min-width: 240px;
    padding: 4px;
    border-radius: 10px;
}

.dao-tao-row-menu-header {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 4px;
    pointer-events: none;
    max-width: 240px;
}

.dao-tao-row-menu-ma {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.3px;
}

.dao-tao-row-menu-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.dao-tao-row-menu .mud-menu-list {
    padding: 4px;
    min-width: 240px;
}

.dao-tao-row-menu .mud-menu-item {
    padding: 8px 10px;
    border-radius: 6px;
    min-height: auto;
}

.dao-tao-row-menu .mud-menu-item-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
}

.dao-tao-row-menu .mud-menu-item-text .mud-typography {
    font-size: 13px;
}


.dao-tao-row-menu .mud-menu-item-icon {
    margin-inline-end: 10px;
    color: var(--mud-palette-text-disabled) !important;
}

.dao-tao-row-menu .mud-menu-item-icon .mud-icon-root,
.dao-tao-row-menu .mud-menu-item-icon svg.mud-svg-icon {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}


.dao-tao-row-menu .mud-menu-item.is-danger {
    color: var(--mud-palette-error);
}

.dao-tao-row-menu .mud-menu-item.is-danger .mud-menu-item-icon {
    color: var(--mud-palette-error) !important;
}

.dao-tao-row-menu .mud-menu-item.is-danger:hover {
    background-color: rgba(244, 67, 54, 0.08);
}

.dao-tao-row-menu .mud-divider {
    margin: 4px 0;
}



.dao-tao-admin-table .mud-table-cell {
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: middle;
}


.dao-tao-admin-table table {
    min-width: 980px;
}


.dao-tao-admin-title {
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
}


.dao-tao-cell-truncate {
    display: block;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.dao-tao-cell-nowrap {
    white-space: nowrap;
}


.dao-tao-cell-progress {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    max-width: 180px;
}

.dao-tao-cell-progress-bar {
    height: 4px !important;
    border-radius: 2px;
}

.dao-tao-cell-progress-text {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}


@media (max-width: 600px) {
    .dao-tao-cell-truncate {
        max-width: none;
        white-space: normal;
    }
    .dao-tao-cell-progress {
        min-width: 0;
        max-width: none;
    }
    
    .dao-tao-admin-table table {
        min-width: 0;
    }
    .dao-tao-admin-title {
        -webkit-line-clamp: initial;
        display: block;
    }
}



.dao-tao-qb {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
}

.dao-tao-qb-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

.dao-tao-qb-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

.dao-tao-qb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--mud-palette-action-default-hover);
    padding: 4px;
    border-radius: 10px;
}

.dao-tao-qb-chip {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 140ms;
}

.dao-tao-qb-chip:hover {
    color: var(--mud-palette-text-primary);
}

.dao-tao-qb-chip.active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.dao-tao-qb-chip-count {
    font-size: 11px;
    font-weight: 600;
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
}

.dao-tao-qb-chip.active .dao-tao-qb-chip-count {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.dao-tao-qb-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 460px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.dao-tao-qb-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dao-tao-qb-row:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 1px 4px rgba(10, 65, 116, 0.06);
}

.dao-tao-qb-num {
    min-width: 56px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 4px;
}

.dao-tao-qb-body-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dao-tao-qb-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dao-tao-qb-answer-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: var(--mud-palette-success);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
}

.dao-tao-qb-answer-chip > .mud-icon-root {
    color: var(--mud-palette-success);
}

.dao-tao-qb-empty {
    padding: 48px 16px;
    text-align: center;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.dao-tao-qb-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1400;
    cursor: pointer;
}

.dao-tao-qb.is-fullscreen {
    position: fixed;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 1500;
    max-height: calc(100vh - 48px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.3);
    border-radius: 12px;
}

.dao-tao-qb.is-fullscreen .dao-tao-qb-body {
    max-height: none;
    flex: 1;
}


@media (max-width: 600px) {
    .dao-tao-qb.is-fullscreen {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 100vh;
        border-radius: 0;
    }
    .dao-tao-qb-num {
        min-width: auto;
    }
    .dao-tao-qb-row {
        gap: 8px;
    }
}


@media (max-width: 600px) {
    .dao-tao-stepper-label {
        display: none;
    }
    .dao-tao-stepper-conn {
        margin-bottom: 0 !important;
        min-width: 12px !important;
    }
}




.dao-tao-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}

.dao-tao-detail-main {
    min-width: 0;
}

.dao-tao-detail-side {
    position: sticky;
    top: 84px;
}

.dao-tao-side-card {
    background: var(--mud-palette-surface);
}

.dao-tao-side-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dao-tao-side-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    font-size: 13px;
}

.dao-tao-side-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dao-tao-side-label {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

.dao-tao-side-val {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    text-align: right;
}



.dao-tao-mat-row {
    background: var(--mud-palette-action-default-hover);
    border-radius: 8px;
    transition: background 0.18s;
}

.dao-tao-mat-row.is-confirmed {
    
    background: rgba(76, 175, 80, 0.10);
    box-shadow: inset 3px 0 0 var(--mud-palette-success);
}

.dao-tao-mat-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}


.dao-tao-test-panel {
    transition: border-color 0.18s, box-shadow 0.18s;
}

.dao-tao-test-panel.is-ready {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 14px rgba(10, 65, 116, 0.08);
}


.dao-tao-test-stat {
    
    background: var(--mud-palette-action-default-hover);
    border-radius: 8px;
    padding: 10px 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dao-tao-test-stat-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dao-tao-test-stat-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.dao-tao-test-stat-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-left: 2px;
}


.dao-tao-viewer-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    
    height: calc(100vh - 170px);
    min-height: 480px;
}

.dao-tao-viewer-side {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
    position: sticky;
    top: 84px;
}


.dao-tao-viewer-side-head {
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: default; 
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.dao-tao-viewer-side-head-title {
    flex: 1;
    min-width: 0;
}

.dao-tao-viewer-side-head-count {
    font-size: 11px;
    font-weight: 700;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}


.dao-tao-viewer-side-chevron {
    display: none;
}

.dao-tao-viewer-side-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}

.dao-tao-viewer-side-item {
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 13px;
    transition: background 0.15s;
}

.dao-tao-viewer-side-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.dao-tao-viewer-side-item.active {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.dao-tao-viewer-side-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.dao-tao-viewer-side-item.active .dao-tao-viewer-side-num {
    background: var(--mud-palette-primary);
    color: white;
}

.dao-tao-viewer-side-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dao-tao-viewer-side-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dao-tao-viewer-side-sub {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dao-tao-viewer-side-foot {
    padding: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dao-tao-viewer-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dao-tao-viewer-canvas {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    flex: 1 1 auto;          
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dao-tao-viewer-video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;     
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.dao-tao-viewer-video-wrap > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


.dao-tao-viewer-link-frame {
    width: 100%;
    height: 480px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.dao-tao-viewer-link-frame > iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


.dao-tao-viewer-doc-wrap {
    width: 100%;
    flex: 1 1 auto;          
    min-height: 0;
    display: flex;
    flex-direction: column;
}


@media (max-width: 960px) {
    .dao-tao-viewer-grid { height: auto; }
    .dao-tao-viewer-canvas { min-height: 68vh; }
}

.dao-tao-viewer-doc-wrap > .doc-viewer-root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    overflow: hidden;
}

.dao-tao-viewer-doc-wrap .doc-viewer-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.dao-tao-viewer-confirm {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--mud-palette-surface);
    transition: border-color 0.18s, box-shadow 0.18s;
}

.dao-tao-viewer-confirm.is-on {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 -2px 8px rgba(10, 65, 116, 0.06);
}


.dao-tao-intro-card {
    background: var(--mud-palette-surface);
}

.dao-tao-intro-stat {
    background: var(--mud-palette-action-default-hover);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.dao-tao-intro-stat-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.dao-tao-intro-stat-val {
    font-size: 28px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-top: 4px;
}

.dao-tao-intro-stat-unit {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}


.dao-tao-result-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    align-items: start;
}

.dao-tao-result-hero {
    text-align: center;
}

.dao-tao-result-hero.is-passed {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.06), transparent);
    border-color: var(--mud-palette-success);
}

.dao-tao-result-hero.is-failed {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.06), transparent);
    border-color: var(--mud-palette-error);
}

.dao-tao-result-bar {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 8px;
    background: var(--mud-palette-action-default-hover);
    border-radius: 999px;
    overflow: hidden;
}

.dao-tao-result-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s;
}

.dao-tao-result-bar-fill.is-passed { background: var(--mud-palette-success); }
.dao-tao-result-bar-fill.is-failed { background: var(--mud-palette-error); }

.dao-tao-result-bar-mark {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    background: var(--mud-palette-text-secondary);
    z-index: 1;
}

.dao-tao-result-side {
    background: var(--mud-palette-surface);
}


.dao-tao-result-hero-avatar {
    width: 72px !important;
    height: 72px !important;
}

@media (max-width: 600px) {
    
    .dao-tao-result-hero {
        padding: 16px !important;
    }
    .dao-tao-result-hero-avatar {
        width: 56px !important;
        height: 56px !important;
    }
    .dao-tao-result-hero-avatar .mud-icon-root {
        font-size: 28px !important;
    }
    .dao-tao-result-hero-score {
        font-size: 2.5rem !important;  
    }
    
    .dao-tao-result-bar {
        max-width: 100%;
    }

    
    .dao-tao-state-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .dao-tao-state-pills::-webkit-scrollbar { height: 4px; }
    .dao-tao-state-pill {
        flex-shrink: 0;
        padding: 5px 10px;
        font-size: 12.5px;
    }
    .dao-tao-state-pill-count {
        min-width: 20px;
        height: 20px;
        font-size: 10.5px;
    }

    
    .dao-tao-course-banner {
        padding: 12px !important;
    }
    .dao-tao-course-banner-ma {
        font-size: 12px;
        padding: 2px 6px;
    }
}



.dao-tao-cert-stage {
    background: var(--mud-palette-action-default-hover);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    container-type: inline-size;
}


.dao-tao-cert-formal-wrap {
    width: 100%;
    max-width: 210mm;
    aspect-ratio: 210 / 148;
    position: relative;
    overflow: hidden;
}

.dao-tao-cert-formal {
    
    width: 210mm;
    height: 148mm;
    box-sizing: border-box;
    background: white;
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    
    transform-origin: top left;
    transform: scale(var(--cert-scale, min(1, tan(atan2(100cqi, 210mm)))));
}

.dao-tao-cert-formal-border {
    border: 2px solid var(--mud-palette-primary);
    border-radius: 4px;
    padding: 4px;
    position: relative;
}

.dao-tao-cert-formal-border::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(10, 65, 116, 0.4);
    border-radius: 2px;
    opacity: 0.5;
    pointer-events: none;
}

.dao-tao-cert-formal-inner {
    
    padding: 18px 32px 22px;
    position: relative;
}

.dao-tao-cert-formal-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 24px;
}

.dao-tao-cert-formal-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dao-tao-cert-formal-org {
    font-size: 14px;
    font-weight: 800;
    color: var(--mud-palette-primary);
    letter-spacing: 0.05em;
}

.dao-tao-cert-formal-org-sub {
    font-size: 11px;
    color: #64748B;
    letter-spacing: 0.04em;
}

.dao-tao-cert-formal-id {
    text-align: right;
}

.dao-tao-cert-formal-id-label {
    font-size: 10px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dao-tao-cert-formal-id-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.dao-tao-cert-formal-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-primary);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.dao-tao-cert-formal-name {
    font-family: 'Be Vietnam Pro', serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--mud-palette-primary);
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 8px;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.dao-tao-cert-formal-emp {
    text-align: center;
    font-size: 13px;
    color: #475569;
    margin-bottom: 24px;
}

.dao-tao-cert-formal-body {
    text-align: center;
    font-size: 14px;
    color: #475569;
    line-height: 1.9;
    margin-bottom: 32px;
}

.dao-tao-cert-formal-course {
    font-size: 22px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
    line-height: 1.3;
    padding: 8px 16px;
    margin: 6px auto;
    max-width: 600px;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.dao-tao-cert-formal-status {
    margin-top: 14px;
}

.dao-tao-cert-formal-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(76, 175, 80, 0.10);
    border: 1.5px solid var(--mud-palette-success);
    color: var(--mud-palette-success);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.dao-tao-cert-formal-foot {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: end;
    margin-top: 28px;
}

.dao-tao-cert-formal-sig {
    text-align: center;
}

.dao-tao-cert-formal-sig-line {
    width: 100%;
    border-bottom: 1px solid #94A3B8;
    margin-bottom: 8px;
    height: 32px;
}

.dao-tao-cert-formal-sig-name {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.dao-tao-cert-formal-sig-role {
    font-size: 11px;
    color: #64748B;
}

.dao-tao-cert-formal-date {
    text-align: center;
}

.dao-tao-cert-formal-date-label {
    font-size: 11px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dao-tao-cert-formal-date-val {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    margin-top: 6px;
}

.dao-tao-cert-formal-stamp {
    display: flex;
    justify-content: center;
}

.dao-tao-cert-formal-stamp-circle {
    width: 90px;
    height: 90px;
    border-radius: 999px;
    border: 2px solid var(--mud-palette-error);
    color: var(--mud-palette-error);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.06em;
    transform: rotate(-8deg);
    opacity: 0.7;
}

.dao-tao-cert-formal-stamp-text-1 { font-size: 13px; }
.dao-tao-cert-formal-stamp-text-2 { font-size: 9px; margin: 1px 0; }
.dao-tao-cert-formal-stamp-text-3 { font-size: 8px; opacity: 0.8; }

.dao-tao-cert-formal-qr {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.dao-tao-cert-formal-qr-img {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background: #0F172A;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dao-tao-cert-formal-qr-t {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dao-tao-cert-formal-qr-s {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mud-palette-primary);
}


@media print {
    
    @page { size: A5 landscape; margin: 0; }

    
    html, body {
        width: 210mm;
        height: 148mm;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body * { visibility: hidden; }
    #cert-print-area, #cert-print-area * { visibility: visible; }
    #cert-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 210mm;
        height: 148mm;
        background: white;
        padding: 0;
        border-radius: 0;
        overflow: hidden;
    }
    .no-print, .mud-app-bar, .mud-drawer, header, nav { display: none !important; }
    
    .dao-tao-cert-stage {
        background: white;
        padding: 0;
        container-type: normal;
    }
    .dao-tao-cert-formal-wrap {
        width: 210mm;
        max-width: none;
        aspect-ratio: auto;
        overflow: visible;
    }
    .dao-tao-cert-formal {
        position: static;
        transform: none;
        width: 210mm;
        height: 148mm;
        max-width: none;
        box-shadow: none;
        page-break-after: avoid;
        page-break-inside: avoid;
    }
}


@media (max-width: 600px) {
    
    .dao-tao-cert-dialog {
        height: 100dvh !important;
        max-height: 100dvh !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .mud-dialog.dao-tao-cert-dialog .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
        padding: 4px !important;    
    }
    .dao-tao-cert-dialog .mud-dialog-actions { flex: 0 0 auto; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
    .dao-tao-cert-dialog .mud-dialog-title   { padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important; }
    .dao-tao-cert-stage {
        padding: 0;                 
        background: transparent;    
        border-radius: 0;
        container-type: normal;     
    }
    .dao-tao-cert-formal-wrap {
        max-width: 100%;
        aspect-ratio: auto;         
        overflow: visible;
    }
    .dao-tao-cert-formal {
        position: static;           
        width: 100%;
        height: auto;
        transform: none;            
        padding: 4px;               
    }
    .dao-tao-cert-formal-inner {
        padding: 20px 16px 22px;
    }
    
    .dao-tao-cert-formal-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 14px;
        margin-bottom: 18px;
    }
    .dao-tao-cert-formal-id { text-align: left; }
    .dao-tao-cert-formal-eyebrow {
        font-size: 11px;
        letter-spacing: 0.12em;
        margin-bottom: 14px;
    }
    
    .dao-tao-cert-formal-name {
        font-size: 30px;
        -webkit-line-clamp: 3;
        margin-bottom: 6px;
    }
    .dao-tao-cert-formal-emp { font-size: 12px; margin-bottom: 18px; }
    .dao-tao-cert-formal-body { font-size: 13px; line-height: 1.7; margin-bottom: 24px; }
    .dao-tao-cert-formal-course {
        font-size: 18px;
        max-width: 100%;
        -webkit-line-clamp: 3;
    }
    
    .dao-tao-cert-formal-foot {
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: center;
        justify-items: center;
        text-align: center;
        margin-top: 22px;
    }
    .dao-tao-cert-formal-sig-line {
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
}


.dao-tao-cert-share-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .dao-tao-cert-share-qr {
        width: 100%;
        align-items: center;
    }
}




.dao-tao-card-stat > div { min-width: 0; }

@media (max-width: 600px) {
    
    .dao-tao-card-foot .mud-button-root { min-height: 40px; }              
    .dao-tao-seg .dao-tao-seg-btn { min-height: 38px; }                    
    .dao-tao-viewer-confirm-actions > .mud-button-root { min-height: 40px; } 
    .dao-tao-nav-title { min-height: 40px; padding-top: 10px; padding-bottom: 10px; } 
    .dao-tao-nav-item  { min-height: 40px; padding-top: 9px;  padding-bottom: 9px; }  
    .dao-tao-nav-item.is-sub { font-size: 13px; }                          
    .dao-tao-cert-link { min-height: 40px; padding: 6px 8px; touch-action: manipulation; } 
    .dao-tao-radio-pill { min-height: 40px; }                              
    .dao-tao-qb-chip { min-height: 38px; }                                 
    .dao-tao-chip-pb-x { width: 28px; height: 28px; }                      

    
    .dao-tao-tl-bank { flex-wrap: wrap; }                                  
    .dao-tao-qb-head .mud-button-root,
    .dao-tao-qb-head .mud-menu .mud-button-root { white-space: nowrap; }   
    .dao-tao-create-dialog .mud-dialog-actions { flex-wrap: wrap; gap: 6px; }              
    .dao-tao-create-dialog .mud-dialog-actions .mud-button-root { white-space: nowrap; }   
    .dao-tao-cert-actions .mud-button-root { min-height: 40px; }           

    
    .dao-tao-test-info-drawer { width: 100% !important; max-width: 100vw !important; }
}

@media (max-width: 520px) {
    
    .dao-tao-preview-q-head { flex-wrap: wrap; }
}



@media (max-width: 960px) {
    .dao-tao-detail-grid,
    .dao-tao-viewer-grid,
    .dao-tao-result-grid {
        grid-template-columns: 1fr;
    }

    .dao-tao-detail-side,
    .dao-tao-viewer-side {
        position: static;
        max-height: none;
    }
}


.dao-tao-nopbai-stats {
    border-radius: 10px;
    overflow: hidden;
}

.dao-tao-nopbai-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    font-size: 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dao-tao-nopbai-stat-row:last-child {
    border-bottom: none;
}

.dao-tao-nopbai-stat-row > span:first-child {
    color: var(--mud-palette-text-secondary);
}

.dao-tao-nopbai-stat-row .v {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dao-tao-nopbai-stat-row .v.warn { color: var(--mud-palette-warning); }
.dao-tao-nopbai-stat-row .v.ok   { color: var(--mud-palette-success); }


.dao-tao-result-card {
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 16px;
}

.dao-tao-result-mark {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.dao-tao-result-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dao-tao-result-score {
    position: relative;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.dao-tao-result-score .of {
    font-size: 14px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-left: 3px;
}

.dao-tao-result-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.01em;
}

.dao-tao-result-sub {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
    max-width: 460px;
}

.dao-tao-result-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 480px;
    background: var(--mud-palette-action-default-hover);
    border-radius: 12px;
    padding: 16px;
    margin: 28px 0 20px;
}

.dao-tao-result-stat .lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dao-tao-result-stat .val {
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.dao-tao-result-stat .val.ok    { color: var(--mud-palette-success); }
.dao-tao-result-stat .val.fail  { color: var(--mud-palette-error); }
.dao-tao-result-stat .val.brand { color: var(--mud-palette-primary); }
.dao-tao-result-stat .val.muted { color: var(--mud-palette-text-secondary); }

.dao-tao-result-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 600px) {
    .dao-tao-result-card  { padding: 28px 16px; }
    .dao-tao-result-mark  { width: 160px; height: 160px; }
    .dao-tao-result-score { font-size: 48px; }
    .dao-tao-result-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .dao-tao-result-cta   { width: 100%; flex-direction: column; }
    .dao-tao-result-cta > * { width: 100%; }
}


.dao-tao-rv-q {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 14px 16px;
}

.dao-tao-rv-q-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.dao-tao-rv-q-num {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.dao-tao-rv-q-noidung {
    font-weight: 500;
    margin-bottom: 10px;
}

.dao-tao-rv-opt {
    display: flex;
    flex-wrap: wrap;            
    align-items: center;
    gap: 6px 8px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    font-size: 14px;
}


.dao-tao-rv-opt-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}


.dao-tao-rv-opt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 1 auto;
}

@media (max-width: 600px) {
    .dao-tao-rv-opt-tags { flex-basis: 100%; }
}

.dao-tao-rv-opt.correct {
    border-color: var(--mud-palette-success);
    background: var(--mud-palette-success-hover, rgba(46, 160, 67, 0.10));
}

.dao-tao-rv-opt.wrong {
    border-color: var(--mud-palette-error);
    background: var(--mud-palette-error-hover, rgba(229, 57, 53, 0.10));
}

.dao-tao-rv-opt-id {
    font-weight: 700;
    min-width: 20px;
    color: var(--mud-palette-text-secondary);
}

.dao-tao-rv-opt-text { flex: 1; min-width: 0; }

.dao-tao-rv-opt-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.dao-tao-rv-opt-tag.ok { background: var(--mud-palette-success); color: #fff; }
.dao-tao-rv-opt-tag.no { background: var(--mud-palette-error);   color: #fff; }

.dao-tao-rv-essay {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--mud-palette-action-default-hover);
}

.dao-tao-rv-essay-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.dao-tao-rv-essay-text { font-size: 14px; white-space: pre-wrap; }



.dao-tao-test-header {
    position: sticky;
    top: 64px;            
    z-index: 10;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}


.dao-tao-test-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 14px;
    min-width: 88px;
    justify-content: center;
}

.dao-tao-test-timer.is-warning {
    background: rgba(255, 152, 0, 0.12);
    color: var(--mud-palette-warning);
}

.dao-tao-test-timer.is-low {
    background: rgba(244, 67, 54, 0.12);
    color: var(--mud-palette-error);
    animation: dao-tao-pulse 1s ease-in-out infinite alternate;
}

@keyframes dao-tao-pulse {
    from { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
    to   { box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.18); }
}

.dao-tao-test-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.dao-tao-test-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
}

.dao-tao-test-questions {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dao-tao-test-side {
    position: sticky;
    top: 168px;      
    display: flex;
    flex-direction: column;
}


@media (max-width: 960px) {
    .dao-tao-test-grid {
        grid-template-columns: 1fr;
    }

    .dao-tao-test-side {
        position: static;
        max-height: none;
    }
}


.dao-tao-test-q-card {
    transition: border-color 0.18s, box-shadow 0.18s;
    scroll-margin-top: 180px;   
}

.dao-tao-test-q-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(10, 65, 116, 0.04);
}


.dao-tao-test-q-option {
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s;
}

.dao-tao-test-q-option:hover {
    background: var(--mud-palette-action-default-hover);
}


.dao-tao-test-nav-card {
    background: var(--mud-palette-surface);
}

.dao-tao-test-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.dao-tao-test-nav-cell {
    appearance: none;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    border-radius: 6px;
    height: 32px;
    cursor: pointer;
    transition: all 0.15s;
}

.dao-tao-test-nav-cell:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.dao-tao-test-nav-cell.done {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: white;
}

.dao-tao-test-nav-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.dao-tao-test-nav-dot.done {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}


@media (max-width: 600px) {
    
    .dao-tao-test-header {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 8px 12px;
        top: 56px; 
    }
    
    .dao-tao-test-header > .mud-stack:last-child {
        width: 100%;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    
    .dao-tao-test-q-card {
        padding: 12px !important;
        scroll-margin-top: 140px; 
    }

    
    .dao-tao-test-q-option {
        padding: 8px 10px;
        min-height: 40px;
    }

    
    .dao-tao-test-nav-cell {
        height: 40px;
        font-size: 14px;
    }
    .dao-tao-test-nav-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }

    
    .dao-tao-test-tips { display: none; }

    
    .dao-tao-test-foot-cta {
        flex-wrap: wrap;
        gap: 8px;
    }
    .dao-tao-test-foot-cta > .mud-button-root {
        width: 100%;
    }

    
    .dao-tao-test-timer {
        min-width: 72px;
        font-size: 13px;
        padding: 5px 10px;
    }

    
    .dao-tao-test-progress {
        margin-top: 8px !important;
    }
}


@media (max-width: 960px) {
    .dao-tao-test-nav-cell { height: 36px; }
}



.dao-tao-viewer-confirm-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 280px;
    min-width: 0;
}
.dao-tao-viewer-confirm-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}


.dao-tao-viewer-ctx { display: none; }
@media (max-width: 600px) {
    .dao-tao-viewer-ctx {
        display: block;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    
    .dao-tao-viewer-ctx-top {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        margin-bottom: 0;
    }
    
    .dao-tao-viewer-ctx-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 8px;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary);
        cursor: pointer;
        touch-action: manipulation;
    }
    .dao-tao-viewer-ctx-back:active { background: var(--mud-palette-action-default-hover); }
    .dao-tao-viewer-ctx-back .mud-icon-root { font-size: 1.2rem !important; }
    
    .dao-tao-viewer-ctx-pos {
        font-size: 12px;
        font-weight: 700;
        color: var(--mud-palette-primary);
        background: var(--mud-palette-primary-hover);
        padding: 2px 9px;
        border-radius: 999px;
        white-space: nowrap;
    }
    .dao-tao-viewer-ctx-type {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--mud-palette-text-secondary);
        white-space: nowrap;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .dao-tao-viewer-ctx-pick {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
        margin-left: auto;              
        height: 30px;
        padding: 0 9px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 999px;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary);
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        touch-action: manipulation;
    }
    .dao-tao-viewer-ctx-pick:active { background: var(--mud-palette-action-default-hover); }
    .dao-tao-viewer-ctx-pick-count { color: var(--mud-palette-primary); white-space: nowrap; }
    
    .dao-tao-viewer-ctx-done-ic {
        flex: 0 0 auto;
        color: var(--mud-palette-success) !important;
        font-size: 1.25rem !important;
    }
    
    .dao-tao-viewer-ctx-type .mud-icon-root,
    .dao-tao-viewer-ctx-pick .mud-icon-root {
        font-size: 0.9em !important;
        width: 0.9em;
        height: 0.9em;
        color: var(--mud-palette-text-secondary);
    }
    
    @media (max-width: 360px) {
        .dao-tao-viewer-ctx-type { display: none; }
    }
}


@media (max-width: 600px) {
    
    html, body { overflow-x: hidden; }

    
    .dao-tao-viewer-side { display: none; }

    
    .dao-tao-viewer-canvas {
        min-height: 320px;
    }

    
    .dao-tao-viewer-doc-wrap {
        min-height: 340px;
        max-height: calc(100dvh - 120px);
    }
    
    .dao-tao-viewer-doc-wrap .doc-viewer-header .app-muted-text { display: none; }
    .dao-tao-viewer-doc-wrap .doc-viewer-header { padding-top: 6px; padding-bottom: 6px; }

    
    .dao-tao-viewer-link-frame {
        height: 360px;
    }

    
    .dao-tao-viewer-link-open {
        flex: 1 1 100%;
    }

    
    .dao-tao-viewer-confirm {
        padding: 10px !important;
    }
    .dao-tao-viewer-confirm-info,
    .dao-tao-viewer-confirm-actions {
        flex: 1 1 100%;
    }
    
    .dao-tao-viewer-confirm-actions {
        flex-direction: column;
    }
    .dao-tao-viewer-confirm-actions > .mud-button-root {
        width: 100%;
    }
}


@media (min-width: 601px) {
    .dao-tao-viewer-side-head-count { display: none; }
    
    .dao-tao-viewer-side-head { pointer-events: none; cursor: default; }
}


.dao-tao-fs-controls { display: none; }
.dao-tao-viewer-canvas.is-immersive {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: #1e1e1e;
    display: flex;
    flex-direction: column;
    
    padding-top: env(safe-area-inset-top, 0px);
}
.dao-tao-viewer-canvas.is-immersive .dao-tao-viewer-doc-wrap {
    flex: 1 1 auto;
    height: 100%;
    max-height: none !important;
    min-height: 0;
    margin: 0;
}
.dao-tao-viewer-canvas.is-immersive .doc-viewer-root,
.dao-tao-viewer-canvas.is-immersive .doc-viewer-content { height: 100%; min-height: 0; }
.dao-tao-viewer-canvas.is-immersive .doc-viewer-header { display: none; } 
.dao-tao-viewer-canvas.is-immersive .dao-tao-fs-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 10px calc(14px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    z-index: 3;
}
.dao-tao-fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}
.dao-tao-fs-btn .mud-icon-root { font-size: 1.15rem !important; }
.dao-tao-fs-exit { flex: 0 0 auto; background: rgba(255, 255, 255, 0.92); color: #1a1a1a; }
.dao-tao-fs-primary { flex: 1 1 auto; justify-content: center; background: var(--mud-palette-primary); color: #fff; }



.dao-tao-material-sheet {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    max-height: 78dvh !important;
    display: flex;
    flex-direction: column;
}

.mud-dialog-container:has(> .mud-dialog.dao-tao-material-sheet),
.mud-dialog-container:has(> .dao-tao-material-sheet) {
    padding-bottom: 0 !important;
}
.dao-tao-material-sheet .mud-dialog-content {
    padding: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dao-tao-material-sheet-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
}
.dao-tao-material-sheet-head .mud-icon-root { color: var(--mud-palette-primary); }
.dao-tao-material-sheet-title { flex: 1; min-width: 0; }
.dao-tao-material-sheet-list {
    overflow-y: auto;
    padding: 6px;
    
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

.dao-tao-material-sheet-list .dao-tao-viewer-side-item { min-height: 48px; }


@media (max-width: 600px) {
    .dao-tao-material-sheet {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}


@media (max-width: 600px) {
    
    aside.mud-drawer.mud-drawer-mini.mud-drawer--closed {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
    }

    
    aside.mud-drawer.mud-drawer-mini.mud-drawer--open {
        position: fixed !important;
        z-index: 1400 !important;
        width: 260px !important;
        max-width: 80vw !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    }

    
    header.crm-app-bar.mud-appbar,
    header.mud-appbar.mud-appbar-fixed-top {
        margin-left: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }
    .app-main-content,
    .mud-main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .app-main-content > .mud-container,
    .mud-main-content > .mud-container {
        padding: 8px !important;
    }

    
    .crm-search-bar {
        display: none !important;
    }
    
    .crm-user-info {
        display: none !important;
    }
    
    .crm-user-stack {
        padding: 4px 6px 4px 4px !important;
        gap: 4px !important;
    }
    
    header.crm-app-bar.mud-appbar.mud-appbar-fixed-top .mud-toolbar,
    header.crm-app-bar.mud-appbar .mud-toolbar.mud-toolbar {
        padding: 0 8px !important;
        gap: 4px !important;
    }
}


@media (max-width: 640px) {
    
    .crm-topbar-brand .crm-logo-text {
        display: inline-block !important;
        max-width: 28vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
    }
    
    .crm-user-info { display: block !important; max-width: 32vw; }
    .crm-user-name,
    .crm-user-role {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .crm-app-bar .mud-toolbar .mud-menu { min-width: 0; flex: 0 1 auto; }
    .crm-user-stack { min-width: 0; }
    .crm-user-info { flex: 0 1 auto; min-width: 0; }
    .crm-user-stack .mud-avatar, .crm-user-stack .mud-icon-root { flex: 0 0 auto; }
}




.cv-code { font-family: var(--mud-typography-default-family, monospace); font-size: 11.5px; font-weight: 600; color: var(--mud-palette-text-secondary); }



.cv-col-bar { position: relative; width: 76px; height: 5px; margin-top: 4px; border-radius: 99px;
    background: var(--mud-palette-lines-default); overflow: hidden; }
.cv-col-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px;
    background: var(--mud-palette-primary); transition: width .2s ease; }
.cv-col-bar--success > i { background: var(--mud-palette-success); }
.cv-col-bar--warning > i { background: var(--mud-palette-warning); }
.cv-col-bar--error   > i { background: var(--mud-palette-error); }
.cv-prio-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.cv-prio-pill.p-urgent { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);   color: var(--mud-palette-error); }
.cv-prio-pill.p-high   { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); color: var(--mud-palette-warning); }
.cv-prio-pill.p-medium { background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);    color: var(--mud-palette-info); }
.cv-prio-pill.p-low    { background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); color: var(--mud-palette-text-secondary); }


.cv-row-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }


.cv-row-menu .mud-list-item-icon { min-width: 0; margin-right: 10px; }
.cv-row-menu .mud-list-item-icon .mud-icon-root { font-size: 0.9em; width: 1em; height: 1em; }



.cv-detail-root { display: flex; flex-direction: column; height: 100%; }

.cv-detail-drawer .mud-drawer-content { display: flex; flex-direction: column; height: 100%; }

.cv-detail-bodywrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cv-detail-bodyscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--mud-palette-background-grey); }

.cv-detail-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 22px; flex-wrap: wrap; row-gap: 8px;
    border-top: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); min-height: 56px;   }

.cv-detail-foot .mud-button-root.mud-button-outlined-default {
    border-color: transparent !important; background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent) !important; }
.cv-detail-foot .mud-button-root.mud-button-outlined-primary {
    border-color: transparent !important; background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important; }
.cv-detail-foot .mud-button-root.mud-button-outlined-error {
    border-color: transparent !important; background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent) !important; }
.cv-detail-foot .mud-button-root.mud-button-outlined-default:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 15%, transparent) !important; }
.cv-detail-foot .mud-button-root.mud-button-outlined-primary:hover { background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent) !important; }
.cv-detail-foot .mud-button-root.mud-button-outlined-error:hover   { background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent) !important; }

.cv-foot-approver { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 700; color: var(--mud-palette-warning-darken, #8a5300);
    background: color-mix(in srgb, var(--mud-palette-warning) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 58%, transparent); max-width: 100%;
    
    flex: 0 1 auto; min-width: 0; white-space: nowrap; }

.cv-foot-approver .cv-foot-approver-ico,
.cv-foot-approver .cv-foot-approver-lbl,
.cv-foot-approver .cv-foot-approver-sep { flex: 0 0 auto; }
.cv-foot-approver .cv-foot-approver-sep { opacity: .5; }
.cv-foot-approver .cv-foot-approver-nm { flex: 0 1 auto; min-width: 0; }

.cv-detail-foot > .mud-button-root { flex: 0 0 auto; }

.cv-foot-approver .cv-foot-approver-ico { font-size: 13px; width: 13px; height: 13px; color: var(--mud-palette-warning-darken, #8a5300);
    border: 1.6px dotted currentColor; border-radius: 50%; padding: 2px; box-sizing: content-box;
    animation: cv-approver-blink 1.1s ease-in-out infinite; }
.cv-foot-approver b { font-weight: 800; color: var(--mud-palette-warning-darken, #7a4700);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes cv-approver-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cv-foot-approver .cv-foot-approver-ico { animation: none; } }

@media (max-width: 600px) { .cv-fa-hide-sm { display: none; } }



.cv-detail-foot > .mud-button-root.mud-button-outlined.cv-foot-quality-btn { display: inline-flex !important; }

.cv-foot-quality { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 700; max-width: 100%; white-space: nowrap; }
.cv-foot-quality .mud-icon-root { font-size: 12px; width: 12px; height: 12px; color: inherit; }   
.cv-foot-quality.ql-1 { background: color-mix(in srgb, var(--mud-palette-text-secondary) 14%, var(--mud-palette-surface)); color: var(--mud-palette-text-secondary); }
.cv-foot-quality.ql-2 { background: color-mix(in srgb, var(--mud-palette-info) 16%, var(--mud-palette-surface));    color: var(--mud-palette-info); }
.cv-foot-quality.ql-3 { background: color-mix(in srgb, var(--mud-palette-warning) 20%, var(--mud-palette-surface)); color: var(--mud-palette-warning); }
.cv-foot-quality.ql-4 { background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface)); color: var(--mud-palette-success); }



.cv-foot-more { display: none !important; }

.cv-foot-more-btn { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px; cursor: pointer;
    border: 0; border-radius: 8px; background: transparent;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap;
    transition: background 120ms; }
.cv-foot-more-btn:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 15%, transparent); }
.cv-foot-more-btn .cv-fb-sort-chev { color: var(--mud-palette-text-secondary); }
.cv-foot-more-pop .cv-foot-more-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 190px; }

.cv-foot-more-pop .cv-foot-more-list .mud-button-root { width: 100%; justify-content: flex-start; border-color: transparent !important; }
.cv-foot-more-pop .cv-foot-more-list .mud-button-root:hover { background: var(--mud-palette-action-default-hover); }

.cv-foot-more-pop .cv-foot-more-list .cv-foot-more-note {
    display: flex; align-items: flex-start; gap: 8px; max-width: 250px; padding: 8px 10px; border-radius: 8px;
    font-size: 12.5px; font-weight: 600; line-height: 1.35; white-space: normal;
    color: var(--mud-palette-warning); background: var(--mud-palette-warning-hover, rgba(255,152,0,.10)); }
.cv-foot-more-pop .cv-foot-more-list .cv-foot-more-note .mud-icon-root { flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 1024px) {
    
    .cv-detail-foot > .mud-button-root.mud-button-outlined { display: none !important; }
    .cv-foot-more { display: inline-flex !important; }
    
    .cv-detail-foot > .cv-sop-wait-hint--doinguoi { display: none !important; }
    
    .cv-detail-foot { padding-inline: 16px; gap: 8px; }
    .cv-detail-foot > .cv-foot-approver { min-width: 0; max-width: 52%; }
}




.cv-detail-head { background: var(--brand);
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--brand) 56%, #94a3b8) 0%,
            color-mix(in srgb, var(--brand-pressed) 60%, #64748b) 100%);
    color: var(--brand-on); padding: 16px 22px 18px; }

html[data-theme="dark"] .cv-detail-head,
html[data-theme="dark"] .cv-tl-msg.me .cv-tl-bubble {
    background: var(--brand-soft);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--brand) 42%, var(--brand-soft)) 0%,
        var(--brand-soft) 100%);
}
.cv-dh-top { display: flex; align-items: center; gap: 8px; }

.cv-dh-titlerow { display: flex; align-items: center; gap: 10px; }

.cv-dh-subrow { margin-top: 8px; display: flex; min-width: 0; max-width: 100%; overflow: hidden; }
.cv-dh-code { font-family: var(--mud-typography-default-family, monospace); font-size: 12px; font-weight: 700; letter-spacing: .4px; opacity: .92; flex: 0 0 auto; white-space: nowrap; }

.cv-dh-code-chip { opacity: 1; background: color-mix(in srgb, #fff 14%, transparent); padding: 3px 10px; border-radius: 999px; }
.cv-dh-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
    background: color-mix(in srgb, #fff 22%, transparent); }
.mud-icon-root.cv-dh-tag-ico { font-size: 12px; width: 12px; height: 12px; }

.cv-dh-talk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 13px; border-radius: 999px;
    background: #fff; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.mud-icon-root.cv-dh-talk-ico { font-size: 16px; width: 16px; height: 16px; }

.cv-dh-talk-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-primary) 12%, #fff); color: var(--mud-palette-primary); font-size: 11px; font-weight: 800; }

.cv-detail-head .cv-dh-talk.has-unread { background: var(--mud-palette-error); color: #fff;
    border-color: color-mix(in srgb, var(--mud-palette-error) 55%, #fff);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--mud-palette-error) 45%, transparent); }
.cv-detail-head .cv-dh-talk.has-unread:hover { background: color-mix(in srgb, var(--mud-palette-error) 90%, #000); }
.cv-dh-talk.has-unread .cv-dh-talk-n { background: #fff; color: var(--mud-palette-error); }
.cv-dh-talk-dot { display: inline-flex; width: 7px; height: 7px; border-radius: 999px; background: #fff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-error) 45%, transparent); }

@keyframes cvTalkPulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-error) 45%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mud-palette-error) 8%, transparent); } }
.cv-dh-talk.has-unread .cv-dh-talk-dot { animation: cvTalkPulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cv-dh-talk.has-unread .cv-dh-talk-dot { animation: none; } }
.cv-dh-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px;
    background: color-mix(in srgb, #fff 12%, transparent); color: inherit; cursor: pointer; }
.cv-dh-close:hover { background: color-mix(in srgb, #fff 24%, transparent); }

.cv-dh-pin { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto;
    border: 0; border-radius: 8px; background: color-mix(in srgb, #fff 12%, transparent); color: inherit; cursor: pointer;
    transition: background 120ms, color 120ms; }
.cv-dh-pin:hover { background: color-mix(in srgb, #fff 24%, transparent); }
.cv-dh-pin.on { background: #fff; color: var(--mud-palette-primary); }
.cv-dh-pin.on:hover { background: color-mix(in srgb, #fff 88%, var(--mud-palette-primary)); }
.cv-dh-pin.on .cv-dh-pin-ico { transform: rotate(20deg); }
.mud-icon-root.cv-dh-pin-ico { font-size: 18px !important; width: 18px; height: 18px; transition: transform 120ms; }

.cv-dh-share { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto;
    border: 0; border-radius: 8px; background: color-mix(in srgb, #fff 12%, transparent); color: inherit; cursor: pointer;
    transition: background 120ms; }
.cv-dh-share:hover { background: color-mix(in srgb, #fff 24%, transparent); }
.cv-dh-share:disabled { opacity: .5; cursor: default; }
.mud-icon-root.cv-dh-share-ico { font-size: 18px !important; width: 18px; height: 18px; }

.cv-dh-back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px;
    background: color-mix(in srgb, #fff 12%, transparent); color: inherit; cursor: pointer; flex: 0 0 auto; }
.cv-dh-back:hover { background: color-mix(in srgb, #fff 24%, transparent); }


.cv-dh-parent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; max-width: 100%; flex: 0 1 auto; overflow: hidden; }
.mud-icon-root.cv-dh-parent-ico { font-size: 15px; width: 15px; height: 15px; opacity: .85; }
.cv-dh-parent-lbl { opacity: .8; font-weight: 600; }
.cv-dh-parent-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 3px 10px; border: 0;
    border-radius: 999px; background: color-mix(in srgb, #fff 15%, transparent); color: inherit; cursor: pointer; text-align: left; transition: background 120ms; }
.cv-dh-parent-link:hover { background: color-mix(in srgb, #fff 26%, transparent); }
.cv-dh-parent-static, .cv-dh-parent-static:hover { cursor: default; background: color-mix(in srgb, #fff 15%, transparent); }
.cv-dh-parent-code { font-family: var(--mud-typography-default-family, monospace); font-size: 11px; font-weight: 700; letter-spacing: .3px; opacity: .9; flex: 0 0 auto; }
.cv-dh-parent-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.cv-dh-chatsrc { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; max-width: 100%; flex: 0 1 auto; overflow: hidden; }

.mud-icon-root.cv-dh-chatsrc-ico { font-size: 11px; width: 11px; height: 11px; opacity: .85; }
.cv-dh-chatsrc-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 3px 10px;
    border-radius: 999px; background: color-mix(in srgb, #fff 15%, transparent); color: inherit; text-decoration: none;
    cursor: pointer; transition: background 120ms; }
.cv-dh-chatsrc-link:hover { background: color-mix(in srgb, #fff 26%, transparent); text-decoration: none; }
.cv-dh-chatsrc-lbl { opacity: .85; flex: 0 0 auto; }
.cv-dh-chatsrc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cv-dh-title { font-size: 22px; font-weight: 700; line-height: 1.25; flex: 1 1 auto; min-width: 0; }

.cv-dh-titleedit { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; }
.cv-dh-titlefield { flex: 1 1 auto; min-width: 0; }
.cv-dh-titlefield .mud-input.mud-input-outlined { background: #fff; border-radius: 8px; }
.cv-dh-titlefield input { font-size: 18px; font-weight: 700; color: var(--mud-palette-text-primary); }
.cv-dh-titleedit-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto;
    border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; opacity: .82; transition: background 120ms, opacity 120ms; }
.cv-dh-titleedit-btn:hover { background: color-mix(in srgb, #fff 20%, transparent); opacity: 1; }

@media (max-width: 1024px) {
    .cv-dh-hdr-act { display: none !important; }
}
.cv-dh-titlesave, .cv-dh-titlecancel { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto;
    border: 0; border-radius: 8px; background: color-mix(in srgb, #fff 12%, transparent); color: inherit; cursor: pointer; transition: background 120ms; }
.cv-dh-titlesave:hover, .cv-dh-titlecancel:hover { background: color-mix(in srgb, #fff 24%, transparent); }
.cv-dh-titlesave:disabled, .cv-dh-titlecancel:disabled { opacity: .5; cursor: default; }

.mud-icon-root.mud-svg-icon.cv-dh-titleedit-ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; font-size: 18px !important; width: 18px; height: 18px; }

.cv-dh-titlelock { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto;
    color: inherit; opacity: .55; cursor: default; }
.mud-icon-root.mud-svg-icon.cv-dh-titlelock-ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; font-size: 16px !important; width: 16px; height: 16px; }

.cv-dh-role { display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 4px; cursor: help; }
.mud-icon-root.cv-dh-role-ico { font-size: 16px; width: 16px; height: 16px; color: var(--brand-on); opacity: .8; flex: 0 0 auto; }
.cv-dh-role-tag { font-size: 11.5px; font-weight: 700; line-height: 1; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto;
    background: color-mix(in srgb, #fff 16%, transparent); color: var(--brand-on); }
.cv-dh-role-tag.tone-approval { background: color-mix(in srgb, #f5c542 32%, transparent); }
.cv-dh-role-tag.tone-neutral { background: color-mix(in srgb, #fff 10%, transparent); }
.cv-dh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

.cv-dh-chips .cv-dh-status,
.cv-dh-chips .cv-dh-prio,
.cv-dh-chips .cv-dh-dokho,
.cv-dh-chips .cv-org-co,
.cv-dh-chips .cv-org-br,
.cv-dh-chips .cv-org-cross { display: none; }

.cv-dh-chips .cv-dh-date { margin-left: auto; }


.cv-dh-chips .cv-dh-timing { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: flex-end; gap: 8px; min-width: 0; max-width: 100%; }

.cv-dh-chips .cv-dh-daterange { display: inline-flex; align-items: center; gap: 8px;
    flex-wrap: nowrap; justify-content: flex-end; max-width: 100%; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cv-dh-chips .cv-dh-daterange::-webkit-scrollbar { display: none; }
.cv-dh-chips .cv-dh-daterange > * { flex: 0 0 auto; }
.cv-dh-chips .cv-dh-daterange .cv-dh-chip { white-space: nowrap; }
.cv-dh-chips .cv-dh-daterange .cv-dh-date { margin-left: 0; }


@media (max-width: 600px) {
    .cv-detail-head { padding: 12px 14px 14px; }
    .cv-dh-title { font-size: 17px; line-height: 1.22; }
    .cv-dh-chips { margin-top: 8px; gap: 6px; }
    .cv-dh-subrow { margin-top: 6px; }
    
    .cv-dh-chatsrc-link { min-height: 40px; padding: 8px 12px; }
    
    .cv-dh-chips .cv-dh-daterange { gap: 6px; }
    .cv-dh-chips .cv-dh-daterange .cv-dh-chip { font-size: 12px; padding: 3px 9px; gap: 4px; }
    .cv-dh-chips .cv-dh-daterange .mud-icon-root.cv-dh-chip-ico { font-size: 13px; width: 13px; height: 13px; }
    .cv-dh-chips .cv-dh-daterange .cv-dh-rel { font-size: 11px; }
    
    .cv-dh-role { display: none !important; }
    .cv-detail-head .cv-dh-talk { background: #fff; color: var(--mud-palette-primary);
        border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, #fff);
        box-shadow: 0 1px 4px rgba(0,0,0,.22); font-weight: 600; padding: 6px 14px; flex: 0 0 auto; }
}

.cv-dh-arrow { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 4px; line-height: 1; }
.cv-dh-arrow-lbl { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
    color: color-mix(in srgb, #fff 88%, var(--brand)); }
.cv-dh-arrow-track { position: relative; align-self: stretch; width: auto; min-width: 46px; height: 2px; border-radius: 2px;
    background: color-mix(in srgb, #fff 62%, transparent); }
.cv-dh-arrow-track::after { content: ''; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px;
    border-top: 2px solid color-mix(in srgb, #fff 78%, transparent); border-right: 2px solid color-mix(in srgb, #fff 78%, transparent);
    transform: translateY(-50%) rotate(45deg); }
@media (max-width: 560px) { .cv-dh-arrow-track { min-width: 30px; } .cv-dh-arrow-lbl { font-size: 9px; } }


button.cv-dh-date--edit { border: none; font: inherit; color: var(--mud-palette-text-primary); appearance: none; -webkit-appearance: none; }

.cv-dh-date--edit { cursor: pointer; position: relative; }
.cv-dh-date--edit:hover { background: color-mix(in srgb, #fff 88%, var(--mud-palette-primary)); }

.cv-dh-date--edit:focus-visible,
.cv-dh-date--edit:focus-within { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.mud-icon-root.cv-dh-date-edit-ico { font-size: 13px; width: 13px; height: 13px; opacity: .65; margin-left: 1px; }

.cv-dh-date-native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
    opacity: 0; cursor: pointer; color-scheme: light; }
.cv-dh-date-native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cv-dh-date-native:disabled { cursor: default; }

.mud-day.mud-selected { color: var(--mud-palette-primary-text) !important; }
.cv-dh-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.mud-icon-root.cv-dh-chip-ico { font-size: 15px; width: 15px; height: 15px; }

.cv-dh-date--none { background: color-mix(in srgb, var(--mud-palette-surface) 55%, transparent); color: var(--mud-palette-text-primary);
    border: 1px dashed color-mix(in srgb, var(--mud-palette-text-secondary) 55%, var(--mud-palette-surface)); }
.cv-dh-date--none .cv-dh-none-hint { font-weight: 400; font-size: 12px; opacity: .85; }
.cv-dh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-text-disabled); }

.s-new .cv-dh-dot, .s-pending .cv-dh-dot { background: var(--mud-palette-info); }
.s-doing .cv-dh-dot { background: var(--mud-palette-primary); }
.s-paused .cv-dh-dot, .s-waiting .cv-dh-dot { background: var(--mud-palette-warning); }
.s-approval .cv-dh-dot { background: var(--mud-palette-secondary); }
.s-done .cv-dh-dot { background: var(--mud-palette-success); }
.s-overdue .cv-dh-dot { background: var(--mud-palette-error); }
.s-rejected .cv-dh-dot { background: var(--mud-palette-error); }   
.cv-dh-prio.p-urgent { color: var(--mud-palette-error); }
.cv-dh-prio.p-high   { color: var(--mud-palette-warning); }
.cv-dh-prio.p-medium { color: var(--mud-palette-info); }
.cv-dh-prio.p-low    { color: var(--mud-palette-text-secondary); }


.cv-detail-grid { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px; }
.cv-detail-main, .cv-detail-side { display: contents; }

.cv-card--status    { order: 2; }
.cv-card--prevstep  { order: 3; }
.cv-subchk-group    { order: 4; }
.cv-card--desc      { order: 6; }
.cv-card--form      { order: 7; }
.cv-card--people    { order: 8; }

.cv-out-card        { order: 9; }
.cv-card--files     { order: 10; }

.cv-subchk-group { display: flex; flex-direction: column; background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--radius-card); overflow: hidden; }
.cv-subchk-group > .cv-card--subtasks  { order: 1; }
.cv-subchk-group > .cv-card--checklist { order: 2; }
.cv-subchk-group > .cv-card { border: 0; border-radius: 0; background: transparent; }
.cv-subchk-group > .cv-card--checklist:not(:only-child) { border-top: 1px solid var(--mud-palette-lines-default); }

.cv-card--chat { display: none; }

.cv-card.cv-card--full.cv-card--chat-open {
    display: flex; flex-direction: column;
    position: absolute; inset: 0; z-index: 1300;
    margin: 0; border: 0; border-radius: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    background: var(--mud-palette-surface);
    animation: cvChatSheetUp .22s cubic-bezier(.22, 1, .36, 1);
}
.cv-card--chat-open > .cv-card-h {
    flex: 0 0 auto; margin: 0; padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cv-card--chat-open .cv-tl { flex: 1 1 auto; min-height: 0; max-height: none; padding: 8px 12px; }
.cv-card--chat-open .cv-tl-search, .cv-card--chat-open .cv-tl-search-results { flex: 0 0 auto; margin-left: 12px; margin-right: 12px; }

.cv-card--chat-open .cv-composer-reply, .cv-card--chat-open .cv-composer-cc { flex: 0 0 auto; margin-left: 12px; margin-right: 12px; }
.cv-card--chat-open .cv-chat-sheet-close { display: inline-flex; }

.cv-detail-root--chatopen .cv-detail-foot { display: none; }


.cv-card--slim .cv-card-collapse { display: none; }
.cv-card--slim .cv-empty { padding-top: 2px; padding-bottom: 2px; opacity: .85; }


.cv-chat-sheet-close { display: none; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 0; border-radius: 999px; background: transparent; color: var(--mud-palette-text-secondary); cursor: pointer; flex: 0 0 auto; }
.cv-chat-sheet-close:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
@keyframes cvChatSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cv-card--chat-open { animation: none; } }


.cv-card { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--radius-card);
    
    padding: 16px 16px 16px calc(16px + var(--cv-card-indent, 26px)); }

.cv-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 8px; }
.cv-card-h .mud-button-root { flex: 0 0 auto; }
.cv-card-h .mud-button-root .mud-button-label { white-space: nowrap; }
.mud-icon-root.cv-card-ico { font-size: 18px; width: 18px; height: 18px; color: var(--mud-palette-text-secondary); }
.cv-card-t { font-size: 11.5px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--mud-palette-text-secondary); }

.cv-card-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1;
  background: var(--mud-palette-error); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); }

.cv-card-count.cv-count-0 { background: var(--mud-palette-action-disabled-background); color: var(--mud-palette-text-secondary); box-shadow: none; }

.cv-card-htoggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; transition: background .12s; user-select: none; }
.cv-card-htoggle:hover { background: var(--mud-palette-action-default-hover); }
.cv-card-sub { font-size: 12.5px; color: var(--mud-palette-text-secondary); }

.cv-card { --cv-card-indent: calc(18px + 8px); }
.cv-card > .cv-card-h { margin-left: calc(-1 * var(--cv-card-indent)); }

.cv-card.cv-card--full { padding-left: 16px; }
.cv-card.cv-card--full > .cv-card-h { margin-left: 0; }
.cv-empty { font-size: 13px; color: var(--mud-palette-text-secondary); line-height: 1.55; }
.cv-desc { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.cv-chip-soft { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); }
.cv-chip-soft.ok { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }


.cv-role-banner { background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; padding: 12px 16px; }
.cv-role-line { display: flex; align-items: center; gap: 6px; font-size: 14px; flex-wrap: wrap; }
.mud-icon-root.cv-role-ico { font-size: 18px; width: 18px; height: 18px; color: var(--mud-palette-primary); }
.cv-role-lbl { color: var(--mud-palette-text-secondary); }

.cv-role-tag { font-weight: 700; padding: 1px 10px; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.cv-role-tag.tone-brand    { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);        color: var(--mud-palette-primary); }
.cv-role-tag.tone-info     { background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);           color: var(--mud-palette-info); }
.cv-role-tag.tone-approval { background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent);      color: var(--mud-palette-secondary); }
.cv-role-tag.tone-neutral  { background: color-mix(in srgb, var(--mud-palette-text-secondary) 14%, transparent); color: var(--mud-palette-text-secondary); }
.cv-role-desc { font-size: 13px; color: var(--mud-palette-text-secondary); margin-top: 4px; }



.cv-cl-prog { width: 120px; height: 5px; border-radius: 999px; background: var(--slate-200); overflow: hidden; }
.cv-cl-prog-fill { display: block; height: 100%; border-radius: 999px; background: var(--mud-palette-success); transition: width .25s ease; }
.cv-cl-pct { font-size: 13px; font-weight: 700; color: var(--mud-palette-text-secondary); }

@media (max-width: 600px) {
    .cv-cl-prog { display: none !important; }
}

.cv-cl-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px;
    position: relative; transition: transform .18s ease, background-color .12s ease; }
.cv-cl-row:hover { background: var(--slate-50); }

.cv-cl-chk { margin: 0; }
.cv-cl-chk .mud-icon-button { padding: 5px; }



.cv-cl-row--touch { gap: 4px; padding: 2px 2px; align-items: center; touch-action: manipulation;
    margin-left: calc(-1 * var(--cv-card-indent)); }

.cv-cl-row--touch .cv-cl-chk .mud-icon-button { padding: 9px; }

.cv-cl-row--touch .cv-cl-num { display: none; }

.cv-cl-inp-touch { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 9px 6px;
    border: 0; background: transparent; border-radius: 8px; outline: none;
    font: inherit; font-size: 14px; line-height: 1.4; color: var(--mud-palette-text-primary);
    text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cv-cl-inp-touch[readonly] { cursor: pointer; }
.cv-cl-inp-touch:not([readonly]) { background: var(--mud-palette-surface); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.cv-cl-inp-touch.done { text-decoration: line-through; opacity: .55; }
.cv-cl-inp-touch::placeholder { color: var(--mud-palette-text-secondary); }

.cv-cl-saving { width: 14px !important; height: 14px !important; flex: 0 0 auto; margin-right: 6px; color: var(--mud-palette-text-secondary); }

.cv-cl-row--editing { background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }

.cv-cl-row--touch .cv-cl-more .mud-icon-button,
.cv-cl-row--touch .cv-cl-done { flex: 0 0 auto; min-width: 40px; min-height: 40px; }
.cv-cl-more { flex: 0 0 auto; }

.cv-cl-row--touch .cv-cl-input .mud-input-root { min-height: 40px; }
.cv-cl-input { flex: 1 1 auto; }

.cv-cl-input .mud-input-underline::before, .cv-cl-input .mud-input-underline::after { display: none; }

.cv-cl-txt { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; word-break: break-word; }
.cv-cl-txt.done { text-decoration: line-through; opacity: .55; }
.cv-cl-del { flex: 0 0 auto; opacity: 0; pointer-events: none; transition: opacity .12s ease; color: var(--mud-palette-text-secondary); }
.cv-cl-row:hover .cv-cl-del, .cv-cl-del:focus-visible { opacity: 1; pointer-events: auto; }
.cv-cl-del:hover { color: var(--mud-palette-error); }

.cv-cl-save { flex: 0 0 auto; opacity: 0; pointer-events: none; transition: opacity .12s ease; color: var(--mud-palette-text-secondary); }
.cv-cl-row:hover .cv-cl-save, .cv-cl-save:focus-visible { opacity: 1; pointer-events: auto; }
.cv-cl-save:hover { color: var(--mud-palette-primary); }

.cv-cl-grip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; cursor: grab; color: var(--mud-palette-text-disabled); opacity: .5; pointer-events: auto; transition: opacity .12s ease, color .12s ease; }
.cv-cl-row:hover .cv-cl-grip, .cv-cl-grip:focus-visible { opacity: 1; color: var(--mud-palette-text-secondary); }
.cv-cl-grip:active { cursor: grabbing; }

.cv-cl-move { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; margin: -3px 0;
    opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.cv-cl-row:hover .cv-cl-move, .cv-cl-move:focus-within { opacity: 1; pointer-events: auto; }
.cv-cl-move .mud-icon-button { padding: 1px; height: 17px; width: 22px; color: var(--mud-palette-text-secondary); }
.cv-cl-move .mud-icon-button .mud-icon-root { font-size: 17px; width: 17px; height: 17px; }
.cv-cl-move .mud-icon-button:disabled { opacity: .3; }

.cv-cl-num { flex: 0 0 auto; min-width: 16px; text-align: right; font-size: .78rem; line-height: 1; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; user-select: none; }
.cv-cl-dragging { opacity: .45; }
.cv-cl-dragover { background: var(--slate-100); box-shadow: inset 0 2px 0 0 var(--mud-palette-primary); }

.cv-add-line { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 10px 4px; border-top: 1px solid var(--slate-100); color: var(--mud-palette-text-secondary); }
.cv-add-line:focus-within { color: var(--mud-palette-primary); }
.cv-add-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13.5px; font-family: inherit; color: var(--mud-palette-text-primary); padding: 0; }
.cv-add-input::placeholder { color: var(--mud-palette-text-secondary); }


.cv-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--mud-palette-lines-default); cursor: pointer; }
.cv-sub-row:hover { background: var(--mud-palette-action-default-hover); }
.cv-sub-title { font-size: 14px; }
.cv-sub-meta { font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-top: 2px; }




.cv-tl { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 4px 0; max-height: 460px; overflow-y: auto; overflow-x: hidden; }

.cv-tl-log { align-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12px;
    color: var(--mud-palette-text-disabled); background: transparent; border: 0; border-radius: 999px; padding: 2px 8px; }
.mud-icon-root.cv-tl-log-ico { font-size: 14px; width: 14px; height: 14px; opacity: .75; }
.cv-tl-log-time { opacity: .8; white-space: nowrap; }

.cv-tl-log b { font-weight: 300; color: var(--mud-palette-text-primary); }
.cv-log-switch { margin: 0; }

.cv-tl-older { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    color: var(--mud-palette-text-disabled); padding: 4px 0; }
.cv-tl-older--end { opacity: .7; }

.cv-tl-quote--jump { cursor: pointer; }
.cv-tl-quote--jump:hover { filter: brightness(.96); }

.cv-tl-msg--flash .cv-tl-bubble { animation: cvFlash 1.5s ease; }
@keyframes cvFlash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-warning) 70%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

.cv-tl-msg--new .cv-tl-bubble { animation: cvNewMsg 2s ease; }
@keyframes cvNewMsg { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 60%, transparent); } 70% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

.cv-tl-msg--target .cv-tl-bubble { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent); }

.cv-tl-newpill { position: sticky; bottom: 8px; align-self: center; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border: 0; border-radius: var(--radius-pill);
    background: var(--brand); color: #fff; font-size: 12px; font-weight: 600;
    cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .22); }
.cv-tl-newpill:hover { filter: brightness(1.06); }
.cv-tl-msg { display: flex; gap: 10px; align-items: flex-start; }
.mud-avatar.cv-tl-ava { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 12px !important; font-weight: 600; }
.cv-tl-body { flex: 1; min-width: 0; }
.cv-tl-name { font-size: 13.5px; font-weight: 700; }

.cv-tl-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cv-tl-msg.me .cv-tl-meta { justify-content: flex-end; }
.cv-tl-bubble { font-size: 14px; line-height: 1.5; background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px; padding: 8px 12px; margin-top: 3px; max-width: 100%; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.cv-tl-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cv-tl-time { font-size: 12px; color: var(--mud-palette-text-disabled); }

.cv-tl-time-side { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap;
    font-size: 11.5px; color: var(--mud-palette-text-disabled); opacity: 0; transition: opacity .12s; pointer-events: none; z-index: 1; }
.cv-tl-msg:not(.me) .cv-tl-time-side { left: calc(100% + 8px); }   
.cv-tl-msg.me .cv-tl-time-side { right: calc(100% + 8px); }        
.cv-tl-msg:hover .cv-tl-time-side { opacity: 1; }


.cv-card-collapse, .cv-card-caret { background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px; color: var(--mud-palette-text-secondary); flex-shrink: 0; margin-left: auto; }
.cv-card-collapse:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-primary); }

.cv-card-editbtn.mud-button-root { min-width: 0; padding: 2px 9px; font-weight: 600; }
.cv-card-editbtn .mud-icon-root { font-size: 0.9em; }


.cv-tl-search-btn { background: transparent; border: 0; cursor: pointer; width: 30px; height: 30px; border-radius: 999px; margin-left: 4px;
    display: inline-flex; align-items: center; justify-content: center; color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.cv-tl-search-btn:hover, .cv-tl-search-btn.on { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-primary); }
.cv-tl-search { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; padding: 4px 10px; border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }
.cv-tl-search:focus-within { border-color: var(--mud-palette-primary); }
.mud-icon-root.cv-tl-search-ico { font-size: 18px !important; color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.cv-tl-search-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--mud-palette-text-primary); }
.cv-tl-search-x { background: transparent; border: 0; cursor: pointer; display: inline-flex; color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.cv-tl-search-x:hover { color: var(--mud-palette-error); }
.cv-tl-search-results { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; margin-bottom: 6px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 4px; }
.cv-tl-search-empty { padding: 8px; font-size: 12.5px; color: var(--mud-palette-text-disabled); text-align: center; }
.cv-tl-search-item { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.cv-tl-search-item:hover { background: var(--mud-palette-action-default-hover); }
.cv-tl-search-who { font-weight: 600; font-size: 12.5px; color: var(--mud-palette-text-primary); flex-shrink: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tl-search-snip { flex: 1; min-width: 0; font-size: 12.5px; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tl-search-time { font-size: 11px; color: var(--mud-palette-text-disabled); flex-shrink: 0; }
.cv-tl-react { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; padding: 1px 8px; border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default); background: transparent; cursor: pointer; color: var(--mud-palette-text-secondary); }
.cv-tl-react:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }

.mud-icon-root.cv-tl-react-ico { font-size: 16px; width: 16px; height: 16px; display: block; }
.cv-composer { margin-top: 12px; }
.cv-composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cv-composer-hint { font-size: 12px; color: var(--mud-palette-text-disabled); }


.cv-field-lbl { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-bottom: 5px; }
.cv-field-hint { font-size: 12px; color: var(--mud-palette-text-disabled); margin-top: 5px; line-height: 1.4; }

.cv-sop-wait-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
    color: var(--mud-palette-warning); background: var(--mud-palette-warning-hover, rgba(255,152,0,.10));
    padding: 6px 10px; border-radius: 8px; line-height: 1.3; }

.cv-sop-wait-hint--link { text-decoration: none; cursor: pointer; transition: background .12s, box-shadow .12s; }
.cv-sop-wait-hint--link:hover { background: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent); }
.cv-sop-wait-hint--link:focus-visible { outline: 2px solid var(--mud-palette-warning); outline-offset: 2px; }

button.cv-sop-wait-hint { border: 0; font-family: inherit; }


.cv-prevstep-card { background: color-mix(in srgb, var(--mud-palette-info, #0a4174) 4%, transparent); }


.cv-prevstep-backdrop { position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center; padding: 18px;
    background: color-mix(in srgb, #0b1320 46%, transparent);
    animation: cvPrevFade .16s ease-out; }

.cv-prevstep-overlay { position: relative; z-index: 41; width: min(560px, 100%);
    max-height: 86%; display: flex; flex-direction: column;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--radius-card, 14px);
    box-shadow: 0 20px 52px rgba(2,8,20,.42); overflow: hidden;
    animation: cvPrevPop .18s ease-out; transform-origin: center; }
@keyframes cvPrevPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cvPrevFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cvPrevSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (max-width: 600px) {
    .cv-prevstep-backdrop { align-items: flex-end; padding: 0; }
    .cv-prevstep-overlay { width: 100%; max-height: 88%; border-radius: 16px 16px 0 0;
        border-left: 0; border-right: 0; border-bottom: 0; animation: cvPrevSheetUp .2s ease-out; }
}
.cv-prevstep-ov-head { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default); }
.cv-prevstep-ov-body { overflow-y: auto; padding: 12px; min-height: 0; }

.cv-detail-root .mud-icon-button .mud-icon-root,
.cv-detail-root .mud-icon-root.cv-fileitem-view { fill: none; stroke: currentColor; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round; }
.cv-prevstep-hint { font-size: 12.5px; color: var(--mud-palette-text-secondary); line-height: 1.5; margin: 2px 0 8px; }

.cv-prevstep { position: relative; border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.10)); border-radius: 10px; padding: 10px 12px 10px 70px; margin-bottom: 8px; background: var(--mud-palette-surface, #fff); }
.cv-prevstep:last-child { margin-bottom: 0; }
.cv-prevstep-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-prevstep-no { position: absolute; left: 12px; top: 10px; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 8px; border-radius: 999px; color: var(--mud-palette-info, #0a4174); background: color-mix(in srgb, var(--mud-palette-info, #0a4174) 14%, transparent); flex: 0 0 auto; }
.cv-prevstep-name { font-size: 13.5px; font-weight: 700; color: var(--mud-palette-text-primary); min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-prevstep-status { font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 8px; border-radius: 999px; color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); flex: 0 0 auto; }
.cv-prevstep-status--done { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); }
.cv-prevstep-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.cv-prevstep-who { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--mud-palette-text-primary); }
.mud-icon-root.cv-prevstep-mico { font-size: 15px; width: 15px; height: 15px; }
.cv-prevstep-time { white-space: nowrap; }
.cv-prevstep-pct { font-weight: 700; color: var(--mud-palette-text-primary); margin-left: auto; }

.cv-prevstep-warn { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 12px; font-weight: 600;
    color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    padding: 5px 9px; border-radius: 8px; line-height: 1.35; }
.mud-icon-root.cv-prevstep-warn-ico { font-size: 14px; width: 14px; height: 14px; flex: 0 0 auto; }
.cv-prevstep-block { margin-top: 8px; }
.cv-prevstep-lbl { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-bottom: 2px; }
.cv-prevstep-text { font-size: 13px; color: var(--mud-palette-text-primary); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cv-prevstep-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cv-prevstep-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12)); background: var(--mud-palette-background-grey, #f6f7f9); border-radius: 8px; padding: 5px 9px; cursor: pointer; font: inherit; color: var(--mud-palette-text-primary); }
button.cv-prevstep-file:hover { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }
.cv-prevstep-file--result { cursor: default; }
.mud-icon-root.cv-prevstep-file-ico { font-size: 16px; width: 16px; height: 16px; color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.cv-prevstep-file-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cv-prevstep-file-size { font-size: 11px; color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.cv-prevstep-open { margin-top: 8px; border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mud-palette-primary); }
.cv-prevstep-open:hover { text-decoration: underline; }

.cv-prevstep-head { cursor: pointer; user-select: none; }

.cv-prevstep-cta { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-size: 13px; font-weight: 600; line-height: 1; color: var(--mud-palette-primary); cursor: pointer;
    white-space: nowrap; padding: 4px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 24%, transparent); }
.cv-prevstep-cta:hover { background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 42%, transparent); }
.cv-prevstep-cta .mud-icon-root.cv-prevstep-cta-ico { font-size: 11px; width: 11px; height: 11px; }




.cv-dh-tag--sopflow { font-size: 12.5px; padding: 4px 12px; min-height: 28px; gap: 6px; cursor: pointer;
    border: 1px solid color-mix(in srgb, #fff 42%, transparent);
    background: color-mix(in srgb, #fff 20%, transparent); color: inherit; font-family: inherit; }
.cv-dh-tag--sopflow:hover { background: color-mix(in srgb, #fff 32%, transparent);
    border-color: color-mix(in srgb, #fff 70%, transparent); }
.cv-dh-tag--sopflow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.cv-dh-tag--sopflow .mud-icon-root.cv-dh-tag-ico { font-size: 12px; width: 12px; height: 12px; }

.cv-dh-tag-sep { width: 1px; align-self: stretch; margin: 1px 1px;
    background: color-mix(in srgb, #fff 45%, transparent); }
@media (max-width: 600px) {
    
    .cv-dh-tag--sopflow { padding: 4px 10px; font-size: 12px; }
}


.cv-sopflow-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.mud-icon-root.cv-sopflow-bar-ico { font-size: 20px; width: 20px; height: 20px; color: var(--mud-palette-primary); flex: 0 0 auto; }
.cv-sopflow-bar-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cv-sopflow-bar-title { font-size: 15px; font-weight: 700; color: var(--mud-palette-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-sopflow-bar-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--mud-palette-text-secondary); }
.cv-sopflow-bar-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 1px 6px; border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); color: var(--mud-palette-primary); }
.cv-sopflow-bar-x { flex: 0 0 auto; }



.cv-sopflow-dialog .cvf-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 12.5px; line-height: 1.5; margin: 0 0 10px;
    padding: 8px 10px; border-radius: 10px;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0,0,0,.16));
    color: var(--mud-palette-text-secondary);
}
.cv-sopflow-dialog .cvf-breadcrumb code { font-size: 12px; }
.cv-sopflow-dialog .cvf-breadcrumb-link { color: var(--mud-palette-primary); text-decoration: none; font-weight: 600; }
.cv-sopflow-dialog .cvf-breadcrumb-link:hover { text-decoration: underline; }
.cv-sopflow-dialog .cvf-breadcrumb-txt { color: var(--mud-palette-text-primary); }

.cv-sopflow-dialog .sop-detail-steps { position: relative; gap: 10px; list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; }
.cv-sopflow-dialog .sop-detail-step,
.cv-sopflow-dialog .sop-par-col,
.cv-sopflow-dialog .cvf-fork-item { position: relative; display: flex; gap: 12px; align-items: flex-start; }
.cv-sopflow-dialog .sop-par-stage,
.cv-sopflow-dialog .cvf-fork { position: relative; }

.cv-sopflow-dialog .sop-detail-step:not(:last-child)::before,
.cv-sopflow-dialog .sop-par-col:not(:last-child)::before,
.cv-sopflow-dialog .cvf-fork-item:not(:last-child)::before,
.cv-sopflow-dialog .sop-par-stage:not(:last-child)::after,
.cv-sopflow-dialog .cvf-fork:not(:last-child)::after {
    content: ''; position: absolute; left: var(--cvf-x, 13px); top: 30px; bottom: -10px;
    width: 2px; background: var(--cvf-line, var(--sop-border, rgba(0,0,0,.12))); }

.cv-sopflow-dialog .cvf-st--waiting:not(:last-child)::before,
.cv-sopflow-dialog .cvf-st--skipped:not(:last-child)::before {
    background: none;
    background-image: linear-gradient(var(--sop-border, rgba(0,0,0,.12)) 55%, transparent 0);
    background-size: 2px 7px; }


.cvf-st--done    { --cvf-line: var(--sop-success, #2e7d32); }
.cvf-st--doing,
.cvf-st--overdue { --cvf-line: var(--sop-border, rgba(0,0,0,.12)); }


.cv-sopflow-dialog .sop-detail-step-num { border: 1.5px solid var(--sop-border, rgba(0,0,0,.12));
    background: var(--sop-bg-card, #fff); color: var(--sop-fg-3, #999); }
.cvf-st--done  > .sop-detail-step-num { background: var(--sop-success-soft, rgba(46,125,50,.10));
    border-color: var(--sop-success, #2e7d32); color: var(--sop-success, #2e7d32); }
.cvf-st--doing > .sop-detail-step-num { background: var(--sop-brand, #0a4174); border-color: var(--sop-brand, #0a4174);
    color: #fff; box-shadow: 0 0 0 3px var(--sop-brand-soft, #e8f0fb); }
.cvf-st--overdue > .sop-detail-step-num { background: var(--sop-danger, #d32f2f); border-color: var(--sop-danger, #d32f2f); color: #fff; }
.cvf-st--skipped > .sop-detail-step-num { border-style: dashed; }

.cvf-st--doing   > .sop-detail-step-main { border-color: var(--sop-brand, #0a4174); border-width: 1.5px; }
.cvf-st--overdue > .sop-detail-step-main { border-color: var(--sop-danger, #d32f2f);
    background: color-mix(in srgb, var(--sop-danger, #d32f2f) 5%, transparent); }
.cvf-st--skipped > .sop-detail-step-main { opacity: .55; }
.cvf-st--skipped .cvf-name { text-decoration: line-through; }
.cvf-me > .sop-detail-step-main { border-color: var(--sop-brand, #0a4174); border-width: 1.5px; }


.cv-sopflow-dialog .cvf-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cvf-late { color: var(--mud-palette-error); font-weight: 700; }
.sop-detail-step-chip.cvf-late { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    border-color: transparent; }
.sop-detail-step-chip.cvf-done { color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 13%, transparent); border-color: transparent; }

.cvf-pool { color: var(--mud-palette-warning); border: 1px dashed var(--mud-palette-warning) !important;
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent) !important; }


.cvf-fork-head { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px 2px;
    font-size: 11.5px; font-weight: 700; color: var(--mud-palette-warning); }
.cvf-fork-head .mud-icon-root { font-size: 14px; }
.cvf-fork-body { margin-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.cvf-fork-item::after { content: ''; position: absolute; left: -18px; top: 14px; width: 14px; height: 2px;
    background: var(--sop-border, rgba(0,0,0,.12)); }

.cv-sopflow-dialog .sop-par-stage.cvf-st--overdue { border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 4%, transparent); }
.cv-sopflow-dialog .sop-par-stage.cvf-st--overdue .sop-par-stage-head { color: var(--mud-palette-error); }
.cvf-fork.cvf-st--overdue .cvf-fork-head { color: var(--mud-palette-error); }



.cvf-rows { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 5px 10px;
    align-items: baseline; margin-top: 6px; }
.cvf-k { font-size: 12px; font-weight: 500; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.cvf-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }

.cvf-sopcon-ds { flex-direction: column; align-items: flex-start; gap: 2px; }
.cvf-sopcon-item { font-size: 11.5px; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.cvf-sopcon-item b { color: var(--mud-palette-text-primary); font-weight: 600; }

@media (max-width: 600px) {
    .cvf-rows { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 8px; }
    .cvf-k { font-size: 11.5px; }
}
.cvf-stt { display: inline-flex; align-items: center; gap: 6px; }
.cvf-stt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.cvf-stt--waiting { color: var(--sop-fg-3, #999); }
.cvf-stt--skipped { color: var(--sop-fg-3, #999); text-decoration: line-through; }
.cvf-stt--done    { color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 11%, transparent); border-color: transparent; }
.cvf-stt--doing   { color: var(--mud-palette-primary); font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-color: transparent; }
.cvf-stt--overdue { color: var(--mud-palette-error); font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); border-color: transparent; }

.cvf-stt--doing .cvf-stt-dot,
.cvf-stt--overdue .cvf-stt-dot { animation: cvfDot 1.6s ease-in-out infinite; }
@keyframes cvfDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.62); opacity: .45; } }

.cvf-st--doing > .sop-detail-step-num { animation: cvfRing 2s ease-out infinite; }
@keyframes cvfRing {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--sop-brand, #0a4174) 45%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--sop-brand, #0a4174) 0%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--sop-brand, #0a4174) 0%, transparent); }
}
.cvf-st--overdue > .sop-detail-step-num { animation: cvfRingLate 2s ease-out infinite; }
@keyframes cvfRingLate {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--mud-palette-error) 45%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mud-palette-error) 0%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--mud-palette-error) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .cvf-stt--doing .cvf-stt-dot, .cvf-stt--overdue .cvf-stt-dot,
    .cvf-st--doing > .sop-detail-step-num, .cvf-st--overdue > .sop-detail-step-num { animation: none; }
    .cvf-st--doing > .sop-detail-step-num { box-shadow: 0 0 0 3px var(--sop-brand-soft, #e8f0fb); }
}


.cvf-open { margin-top: 7px; }
@media (max-width: 600px) {
    .cv-sopflow-dialog .sop-detail-step-num { width: 24px; height: 24px; font-size: 11.5px; }
    .cv-sopflow-dialog .sop-detail-steps { --cvf-x: 11px; }
    .cv-sopflow-dialog .sop-detail-step-title { overflow-wrap: anywhere; }
    .cvf-open { width: 100%; min-height: 40px; justify-content: center; }
    .cvf-fork-body { margin-left: 12px; }
    .cvf-fork-item::after { left: -12px; width: 8px; }
}




.cv-dh-baomat.on { color: var(--mud-palette-error); }
.cv-dh-baomat[disabled] { opacity: .55; cursor: default; }


.cv-baomat-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.cv-baomat-body  { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cv-baomat-row {
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 10px 12px;
}
.cv-baomat-row.on { border-color: var(--mud-palette-error); background: rgba(198, 40, 40, .05); }
.cv-baomat-hint { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.cv-baomat-note {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 12.5px; line-height: 1.45; color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey); border-radius: 10px; padding: 10px 12px;
}

.cv-prevstep-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cv-prevstep-img {
    padding: 0; border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12)); background: transparent;
    border-radius: 8px; overflow: hidden; cursor: zoom-in; line-height: 0; font: inherit;
}
.cv-prevstep-img:hover { border-color: var(--mud-palette-primary); }
.cv-prevstep-img:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.cv-prevstep-img img {
    display: block; max-height: 180px; max-width: 100%; width: auto; height: auto; object-fit: contain;
}

.cv-filelist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cv-fileitem { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12)); background: var(--mud-palette-background-grey, #f6f7f9); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; color: var(--mud-palette-text-primary); }
button.cv-fileitem:hover { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }
.cv-fileitem--static { cursor: default; }
.cv-fileitem-r1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mud-icon-root.cv-fileitem-ico { font-size: 16px; width: 16px; height: 16px; color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.cv-fileitem-name { font-size: 12.5px; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mud-icon-root.cv-fileitem-view { font-size: 16px; width: 16px; height: 16px; color: var(--mud-palette-primary); flex: 0 0 auto; }
.cv-fileitem-desc { font-size: 11px; color: var(--mud-palette-text-secondary); padding-left: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-prog-pct { font-size: 13px; font-weight: 700; }

.cv-prog-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.cv-prog-modebtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 600;
    padding: 6px 8px; border-radius: 8px; border: 1px solid var(--mud-palette-lines-default); background: transparent;
    color: var(--mud-palette-text-secondary); cursor: pointer; }
.cv-prog-modebtn:disabled { cursor: default; opacity: .7; }
.cv-prog-modebtn.on { color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent); }
.mud-icon-root.cv-prog-modeico { font-size: 15px; width: 15px; height: 15px; }

.cv-prog-lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-prog-flash { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; line-height: 1;
    text-transform: none; letter-spacing: 0; padding: 2px 8px; border-radius: 999px; pointer-events: none;
    color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    animation: cvProgFlash 2.2s ease forwards; }
.mud-icon-root.cv-prog-flash-ico { font-size: 12px; width: 12px; height: 12px; }
@keyframes cvProgFlash { 0% { opacity: 0; transform: translateY(-3px); } 12% { opacity: 1; transform: none; } 68% { opacity: 1; } 100% { opacity: 0; } }
.cv-status-static { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; padding: 7px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }

.cv-status-pick { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cv-status-pick .cv-status-static { align-self: flex-start; font-size: 13px; padding: 4px 10px; gap: 6px; }
.cv-status-pick .cv-status-static .cv-dh-dot { width: 7px; height: 7px; }
.cv-status-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.cv-status-btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 7px;
    color: var(--cv-sc, var(--mud-palette-primary));
    border: 1px solid color-mix(in srgb, var(--cv-sc, var(--mud-palette-primary)) 38%, transparent);
    background: color-mix(in srgb, var(--cv-sc, var(--mud-palette-primary)) 10%, transparent);
    transition: background .12s, border-color .12s, transform .07s; }
.cv-status-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--cv-sc, var(--mud-palette-primary)) 20%, transparent);
    border-color: color-mix(in srgb, var(--cv-sc, var(--mud-palette-primary)) 60%, transparent); }
.cv-status-btn:active:not(:disabled) { transform: translateY(1px); }
.cv-status-btn:disabled { opacity: .5; cursor: default; }
.cv-status-btn-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--cv-sc, var(--mud-palette-primary)); }
.s-cancelled { --cv-sc: var(--mud-palette-text-disabled); }   

.cv-status-cur-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cv-status-cur-row .cv-status-static {
    border: 1.5px dotted var(--cv-sc, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--cv-sc, var(--mud-palette-primary)) 10%, transparent);
    color: var(--cv-sc, var(--mud-palette-primary));
    font-weight: 700; padding: 7px 14px;
}

.cv-status-cur-row { gap: 6px; }

.cv-card--status .cv-status-cur-row { margin-top: 14px; }
.cv-card--status .cv-range-wrap { margin-top: 10px; }
.cv-card--status .mud-progress-linear { margin-top: 18px; }
.cv-card--status .cv-field-hint { margin-top: 12px; }

.cv-card--status .cv-card-h > .mud-menu { margin-left: auto; }
.cv-card--status .cv-card-h .cv-status-static,
.cv-card--status .cv-card-h .cv-status-btn,
.cv-card--status .cv-status-cur-row .cv-status-static,
.cv-card--status .cv-status-cur-row .cv-status-btn,
.cv-card--status .cv-status-cur-row .chat-tag {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 10px;
    font-size: 11.5px; font-weight: 600; line-height: 1;
    border: 0; border-radius: 7px; white-space: nowrap;
}

.cv-card--status .cv-status-cur-row .mud-menu,
.cv-card--status .cv-card-h .mud-menu { display: inline-flex; }

.cv-card--status .cv-status-cur-row .cv-dh-dot { width: 6px; height: 6px; }
.cv-card--status .cv-status-cur-row .cv-status-btn .cv-status-btn-dot,
.cv-card--status .cv-card-h .cv-status-btn .cv-status-btn-dot { width: 6px; height: 6px; }
.cv-card--status .cv-status-cur-row .cv-status-btn .mud-icon-root,
.cv-card--status .cv-card-h .cv-status-btn .mud-icon-root { font-size: 13px; width: 13px; height: 13px; }
.cv-card--status .cv-status-cur-row .chat-tag .chat-tag-ic { display: inline-flex; align-items: center; }

.filedrop-zone--compact .mud-stack { padding: 14px; gap: 4px; }
.filedrop-zone--compact .mud-icon-root { opacity: .34; font-size: 26px; width: 26px; height: 26px; }

.filedrop-zone--compact .mud-typography { font-size: 12px; font-weight: 500;
    color: var(--mud-palette-text-disabled) !important; }


.vm-ih-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--mud-palette-text-disabled);
    transition: background .12s, color .12s; }
.vm-ih-btn .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }
.vm-ih-btn:hover, .vm-ih-btn:focus-visible { outline: none;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }

.vm-ih-btn--warn { color: var(--mud-palette-warning); }
.vm-ih-btn--warn:hover, .vm-ih-btn--warn:focus-visible {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.vm-ih-list { padding: 0; }
.vm-ih-body { max-width: 280px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5;
    color: var(--mud-palette-text-secondary); white-space: normal; }
.vm-ih-title { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); margin-bottom: 6px; }
.vm-ih-warn { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-warning); }
.vm-ih-warn b { color: var(--mud-palette-warning); }

.cv-empty--row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }


.cv-prio-menu { padding: 4px; min-width: 172px; }
.cv-prio-menu .mud-menu-item { padding: 7px 10px; border-radius: 7px; min-height: auto; font-size: 13.5px; }

.cv-prio-menu .mud-menu-item-icon { min-width: 0; width: 16px; margin-inline-end: 8px; }
.cv-prio-menu .mud-menu-item-icon .mud-icon-root { font-size: 15px; width: 15px; height: 15px;
    color: var(--cv-sc, var(--mud-palette-primary)); }
.cv-prio-menu.mud-menu-list:has(.mud-menu-item-icon) .mud-menu-item:not(:has(.mud-menu-item-icon)) .mud-menu-item-text,
.cv-prio-menu .mud-menu-list:has(.mud-menu-item-icon) .mud-menu-item:not(:has(.mud-menu-item-icon)) .mud-menu-item-text {
    margin-inline-start: 24px;
}

.cv-prio-menu .mud-menu-item.cv-prio-on {
    background: color-mix(in srgb, var(--cv-sc, var(--mud-palette-primary)) 14%, transparent);
    color: var(--cv-sc, var(--mud-palette-primary));
    font-weight: 600;
}
.cv-prio-menu .mud-menu-item:hover {
    background: color-mix(in srgb, var(--cv-sc, var(--mud-palette-primary)) 9%, transparent);
}
.cv-status-cur-lbl { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--mud-palette-text-disabled); flex-shrink: 0; }
.cv-status-next { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; padding-top: 7px; border-top: 1px dashed var(--mud-palette-lines-default); }
.cv-status-next-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--mud-palette-text-disabled); }
.mud-icon-root.cv-status-next-ico { font-size: 14px; width: 14px; height: 14px; }


.cv-desc-edit { margin-top: 4px; }
.cv-desc-edit-act { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.cv-desc-addlink { background: none; border: none; padding: 0; cursor: pointer; color: var(--mud-palette-primary); font: inherit; font-weight: 600; }
.cv-desc-addlink:hover { text-decoration: underline; }


.cv-part-row--lead { border-top: none; padding-top: 2px; }


.cv-part-addpick .mud-input-slot, .cv-part-addpick .mud-input input,
.cv-desc-edit .mud-input-slot, .cv-desc-edit .mud-input textarea { font-size: 12.5px; }
.cv-part-addpick .mud-input.mud-input-outlined .mud-input-slot { padding-top: 5px; padding-bottom: 5px; }
.cv-desc-edit .mud-input.mud-input-outlined .mud-input-slot { padding-top: 6px; padding-bottom: 6px; }




.cv-out-row { border: 0; border-radius: 10px; padding: 10px 12px; margin-top: 8px; }


.cv-out-row--await { border: 1.5px solid var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }

.cv-chain-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cv-out-top { display: flex; align-items: center; gap: 10px; }
.mud-icon-root.cv-out-ico { font-size: 18px; width: 18px; height: 18px; color: var(--mud-palette-text-secondary); }

.cv-out-top .mud-icon-button { padding: 4px; flex: 0 0 auto; }
.cv-out-top .mud-icon-button + .mud-icon-button { margin-left: -2px; }
.cv-out-top .mud-icon-button .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.cv-out-info { flex: 1; min-width: 0; }

.cv-out-info--open { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px;
    transition: background-color .12s ease; }
.cv-out-info--open:hover { background: var(--mud-palette-action-default-hover); }
.cv-out-info--open:hover .cv-out-name { color: var(--mud-palette-primary); text-decoration: underline; }
.cv-out-info--open:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.cv-out-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-out-state { font-size: 12px; color: var(--mud-palette-text-disabled); }
.cv-out-state.done { color: var(--mud-palette-success); }

.cv-out-file { font-size: 12px; color: var(--mud-palette-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cv-out-content { font-size: 12.5px; color: var(--mud-palette-text-primary); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cv-out-content.is-xem { cursor: pointer; border-radius: 4px; }
.cv-out-content.is-xem:hover { background: var(--mud-palette-action-default-hover); }


.cv-xemgc-body { font-size: 14px; line-height: 1.6; color: var(--mud-palette-text-primary);
    max-height: min(60dvh, 560px); overflow-y: auto; overflow-wrap: anywhere; }
.cv-xemgc-body ul, .cv-xemgc-body ol { margin: .35em 0; padding-left: 1.5em; }
.cv-xemgc-body p { margin: 0 0 .5em; }
.cv-xemgc-body p:last-child { margin-bottom: 0; }
.cv-xemgc-empty { font-size: 13px; color: var(--mud-palette-text-secondary); font-style: italic; }

.cv-out-thumb { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px; object-fit: cover;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }

.cv-out-card { border-radius: 12px; padding: 12px;
    border: 1px solid var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 4%, var(--mud-palette-surface)); }

.cv-out-card { --cv-card-indent: calc(18px + 8px); padding-left: calc(12px + var(--cv-card-indent)); }
.cv-out-card > .cv-card-h { margin-left: calc(-1 * var(--cv-card-indent)); }

.cv-out-card.is-incomplete { border: 1.5px solid color-mix(in srgb, var(--mud-palette-error) 50%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 4%, var(--mud-palette-surface)); }

@keyframes cvOutFlash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    20%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-error) 28%, transparent); }
}
.cv-out-card.is-flash { animation: cvOutFlash 1.1s ease-in-out 2; scroll-margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
    .cv-out-card.is-flash { animation: none;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-error) 28%, transparent); }
}
.cv-out-card.is-complete { border: 1px solid color-mix(in srgb, var(--mud-palette-success) 32%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 5%, var(--mud-palette-surface)); }

.mud-icon-root.cv-out-ico-h { color: var(--mud-palette-primary); }
.cv-out-count { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv-out-card.is-incomplete .cv-out-count { color: var(--mud-palette-text-secondary); }
.cv-out-card.is-complete .cv-out-count { color: var(--mud-palette-success); }

.cv-out-card .cv-out-row { background: var(--mud-palette-surface); }
.cv-out-card .cv-card-h + .cv-out-row { margin-top: 0; }


.cv-out-more { margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--mud-palette-lines-default); }
.cv-out-more-t { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); margin-bottom: 6px; }

.cv-out-note { margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--mud-palette-lines-default); }
.cv-out-note-t { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
    color: var(--mud-palette-text-secondary); }
.mud-icon-root.cv-out-note-ico { font-size: 15px !important; width: 15px; height: 15px; flex: 0 0 auto; }
.cv-out-note-ok { font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px;
    color: var(--mud-palette-success);
    background: var(--mud-palette-surface);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }

.cv-out-note-act { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cv-out-chip--danger { color: var(--mud-palette-error); border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent); }
.cv-out-chip--danger:hover { background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }
.cv-out-chip:disabled { opacity: .5; pointer-events: none; }

.cv-out-note-view { margin-top: 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
    font-size: 13px; line-height: 1.45; color: var(--mud-palette-text-primary); word-break: break-word;
    border: 1px solid var(--mud-palette-divider); background: var(--mud-palette-surface);
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.cv-out-note-view:hover { border-color: var(--mud-palette-primary); }
.cv-out-note-view:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.cv-out-note-view p { margin: 0 0 .3em; }
.cv-out-note-view p:last-child { margin-bottom: 0; }
.cv-out-note-view ul, .cv-out-note-view ol { margin: .2em 0; padding-left: 1.4em; }

.cv-ghichu-rte .rte-box { min-height: 9em; }
.cv-ghichu-hint { margin-top: 8px; font-size: 11.5px; color: var(--mud-palette-text-secondary); }



.cv-of-row { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; margin-top: 8px; overflow: hidden;
    background: var(--mud-palette-surface); }
.cv-out-card .cv-card-h + .cv-of-row { margin-top: 0; }
.cv-of-row.is-done { border-color: color-mix(in srgb, var(--mud-palette-success) 34%, var(--mud-palette-lines-default)); }

.cv-of-row.is-note, .cv-of-row.is-note.is-done { border-color: transparent; }

.mud-icon-root.cv-out-lock-ico { font-size: 15px !important; width: 15px; height: 15px; flex-shrink: 0;
    color: var(--mud-palette-text-secondary); cursor: help; }

.cv-of-toggle { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0;
    padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.cv-of-chevbtn { display: inline-flex; align-items: center; flex: 0 0 auto;
    padding: 0; border: 0; background: none; cursor: pointer; }

.cv-of-acts { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.cv-of-acts .mud-button-root { min-width: 0; height: 24px; padding: 0 8px; font-size: 11.5px; font-weight: 600; }
.cv-of-acts .mud-button-root .mud-icon-root { font-size: 14px !important; width: 14px; height: 14px; }
.cv-of-acts .mud-button-root .mud-button-icon-start { margin-right: 4px; margin-left: 0; }
.cv-of-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; background: none;
    border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--mud-palette-text-primary); }
.cv-of-head:hover { background: var(--mud-palette-action-default-hover); }
.mud-icon-root.cv-of-ico { font-size: 18px !important; width: 18px; height: 18px; flex: 0 0 auto; color: var(--mud-palette-text-secondary); }
.cv-of-row.is-done .cv-of-ico { color: var(--mud-palette-success); }

.cv-of-dot { width: 18px; height: 18px; flex: 0 0 auto; align-self: center;
    display: inline-flex; align-items: center; justify-content: center; }
.cv-of-dot::before { content: ""; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%;
    border: 1px solid  white;background: orangered; }
.cv-of-name { font-size: 13px; font-weight: 700; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cv-of-badge { font-size: 11px; font-weight: 400; padding: 1px 8px; border-radius: 999px; flex: 0 0 auto; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.cv-of-badge.no { color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); }
.cv-of-badge.ok { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent); }
.mud-icon-root.cv-of-chev { font-size: 20px !important; width: 20px; height: 20px; flex: 0 0 auto; color: var(--mud-palette-text-secondary); }
.cv-of-body { padding: 4px 11px 11px; border-top: 1px solid var(--mud-palette-lines-default); }


.rte { border: 1px solid var(--mud-palette-lines-inputs, var(--mud-palette-lines-default)); border-radius: 8px;
    background: var(--mud-palette-surface); overflow: hidden; display: flex; flex-direction: column; }
.rte:focus-within { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 1px var(--mud-palette-primary); }
.rte--disabled { opacity: .6; pointer-events: none; }
.rte-toolbar { display: flex; align-items: center; gap: 2px; padding: 3px 5px; flex-wrap: wrap;
    border-bottom: 1px solid var(--mud-palette-divider); background: color-mix(in srgb, var(--mud-palette-text-secondary) 5%, transparent); }
.rte-btn { min-width: 26px; height: 26px; padding: 0 5px; border: none; background: transparent; border-radius: 6px;
    cursor: pointer; color: var(--mud-palette-text-primary); font-size: 13px; line-height: 1; display: inline-flex;
    align-items: center; justify-content: center; transition: background .12s; }
.rte-btn:hover { background: var(--mud-palette-action-default-hover); }
.rte-btn b, .rte-btn i, .rte-btn u { font-size: 14px; }
.rte-btn-num { font-size: 12px; font-weight: 700; }
.rte-sep { width: 1px; height: 16px; background: var(--mud-palette-divider); margin: 0 3px; }
.rte-box { min-height: 5.4em; max-height: 16em; overflow-y: auto; padding: 7px 10px; outline: none;
    font-size: 13px; line-height: 1.45; color: var(--mud-palette-text-primary); word-break: break-word; }
.rte-box:empty::before { content: attr(data-placeholder); color: var(--mud-palette-text-disabled); pointer-events: none; }
.rte-box p { margin: 0 0 .4em; }
.rte-box ul, .rte-box ol { margin: .2em 0 .4em; padding-left: 1.5em; }
.rte-box li { margin: .1em 0; }

.cv-out-content ul, .cv-out-content ol, .cv-prevstep-text ul, .cv-prevstep-text ol { margin: .2em 0; padding-left: 1.4em; }
.cv-out-content p, .cv-prevstep-text p { margin: 0 0 .3em; }
.cv-out-content p:last-child, .cv-prevstep-text p:last-child { margin-bottom: 0; }


.cv-kq { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 12px; }
.cv-kq-imggrid { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-kq-img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; cursor: pointer; border: 1px solid var(--mud-palette-lines-default); transition: transform .12s; }
.cv-kq-img:hover { transform: scale(1.04); }
.cv-kq-filelist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cv-kq-filerow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.cv-kq-filerow:hover { background: var(--mud-palette-action-default-hover); }
.cv-kq-fileico { font-size: 20px; flex: 0 0 auto; }
.cv-kq-filename { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-kq-eye { font-size: 16px; color: var(--mud-palette-text-secondary); flex: 0 0 auto; }


.cv-part-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--mud-palette-lines-default); }

.cv-part-role { flex: 0 0 104px; width: 104px; font-size: 13px; color: var(--mud-palette-text-secondary);
    padding-top: 5px; line-height: 1.3; white-space: normal; overflow-wrap: break-word; }

.cv-raci { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; vertical-align: middle;
    border-radius: 5px; font-size: 10px; font-weight: 700; line-height: 1; flex: none;
    border: 1.5px solid var(--rc-ring); color: var(--rc-fg);
    background: color-mix(in srgb, var(--rc-ring) 14%, var(--mud-palette-surface)); }
.cv-raci--r { --rc-ring: var(--mud-palette-secondary); --rc-fg: color-mix(in srgb, var(--mud-palette-secondary) 60%, var(--mud-palette-text-primary)); }
.cv-raci--a { --rc-ring: var(--mud-palette-primary);   --rc-fg: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-text-primary)); }
.cv-raci--c { --rc-ring: var(--mud-palette-warning);   --rc-fg: color-mix(in srgb, var(--mud-palette-warning) 60%, var(--mud-palette-text-primary)); }
.cv-raci--i { --rc-ring: var(--mud-palette-text-secondary); --rc-fg: var(--mud-palette-text-secondary); }

.cv-part-mpsrow { border-top: 1px solid var(--mud-palette-lines-default); padding: 9px 0 4px; }
.cv-part-none { font-size: 13.5px; color: var(--mud-palette-text-disabled); padding-top: 5px; }
.cv-part-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

.mud-avatar.cv-part-ava { width: 25px !important; height: 25px !important; min-width: 25px !important; font-size: 10px !important; font-weight: 700; }
.cv-part-name { font-size: 13.5px; font-weight: 600; display: inline-flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cv-part-sub { font-size: 12px; font-weight: 400; color: var(--mud-palette-text-secondary); }

.cv-part-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cv-part-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px;
    background: var(--mud-palette-background-grey); font-size: 12px; font-weight: 600; color: var(--mud-palette-text-primary); }
.mud-avatar.cv-part-pill-ava { width: 20px !important; height: 20px !important; min-width: 20px !important; font-size: 8.5px !important; font-weight: 700; }


.cv-part-tcchip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.cv-part-tcchip .mud-icon-root { font-size: 15px; }
.cv-part-tcchip:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface));
    color: var(--mud-palette-primary); border-color: var(--mud-palette-primary);
}
.cv-part-tcchip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--app-focus-ring); }
.cv-part-tcchip:disabled { opacity: .55; cursor: default; }


.cv-part-tcchip--add {
    border-style: dashed;
    border-color: var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.cv-part-created { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--mud-palette-lines-default); font-size: 12px; line-height: 1.7; color: var(--mud-palette-text-secondary); }
.cv-part-created b { font-weight: 700; color: var(--mud-palette-text-primary); }
.cv-part-created-dates { color: var(--mud-palette-text-secondary); }
.cv-part-created-sep { margin: 0 6px; opacity: .5; }



.cv-collapse { width: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; margin-bottom: 0; }
.cv-file-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; background: transparent; border: 0;
    border-top: 1px solid var(--mud-palette-lines-default); cursor: pointer; text-align: left; }
.cv-file-row:hover { background: var(--mud-palette-action-default-hover); }
.cv-file-name { font-size: 13.5px; }
.mud-icon-root.cv-file-ico { font-size: 18px; width: 18px; height: 18px; }




.cv-dh-talk { border: 0; color: var(--mud-palette-primary); cursor: pointer; font-family: inherit; transition: background .12s, box-shadow .12s; }
.cv-dh-talk:hover { background: color-mix(in srgb, #fff 92%, var(--mud-palette-primary)); box-shadow: 0 2px 7px rgba(0,0,0,.26); }

.s-new, .s-pending { --cv-sc: var(--mud-palette-info); }
.s-doing { --cv-sc: var(--mud-palette-primary); }
.s-paused, .s-waiting { --cv-sc: var(--mud-palette-warning); }
.s-approval { --cv-sc: var(--mud-palette-secondary); }
.s-done { --cv-sc: var(--mud-palette-success); }
.s-overdue { --cv-sc: var(--mud-palette-error); }
.s-rejected { --cv-sc: var(--mud-palette-error); }   
.cv-dh-chip.cv-dh-status { background: color-mix(in srgb, var(--cv-sc, var(--mud-palette-primary)) 18%, var(--mud-palette-surface)); color: var(--cv-sc, var(--mud-palette-primary)); }
.cv-dh-chip.cv-dh-prio { gap: 4px; }
.cv-dh-chip.cv-dh-prio.p-urgent { background: color-mix(in srgb, var(--mud-palette-error) 16%, var(--mud-palette-surface));   color: var(--mud-palette-error); }
.cv-dh-chip.cv-dh-prio.p-high   { background: color-mix(in srgb, var(--mud-palette-warning) 20%, var(--mud-palette-surface)); color: var(--mud-palette-warning); }
.cv-dh-chip.cv-dh-prio.p-medium { background: color-mix(in srgb, var(--mud-palette-info) 16%, var(--mud-palette-surface));    color: var(--mud-palette-info); }
.cv-dh-chip.cv-dh-prio.p-low    { background: color-mix(in srgb, var(--mud-palette-text-secondary) 14%, var(--mud-palette-surface)); color: var(--mud-palette-text-secondary); }

.cv-dh-chip.cv-dh-dokho { gap: 4px; }
.cv-dh-chip.cv-dh-dokho.dk-de         { background: color-mix(in srgb, var(--mud-palette-success) 16%, var(--mud-palette-surface)); color: var(--mud-palette-success); }
.cv-dh-chip.cv-dh-dokho.dk-trung_binh { background: color-mix(in srgb, var(--mud-palette-info) 16%, var(--mud-palette-surface));    color: var(--mud-palette-info); }
.cv-dh-chip.cv-dh-dokho.dk-kho        { background: color-mix(in srgb, var(--mud-palette-warning) 20%, var(--mud-palette-surface)); color: var(--mud-palette-warning); }
.cv-dh-chip.cv-dh-dokho.dk-rat_kho    { background: color-mix(in srgb, var(--mud-palette-error) 16%, var(--mud-palette-surface));  color: var(--mud-palette-error); }

.cv-dh-chip.cv-dh-tc { background: color-mix(in srgb, var(--mud-palette-error) 14%, var(--mud-palette-surface)); color: var(--mud-palette-error); }

.cv-attach-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 46vh; overflow-y: auto; }
.cv-attach-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-surface); font-family: inherit; transition: background 120ms, border-color 120ms;
}
.cv-attach-row:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.cv-attach-row.on { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); }
.cv-attach-row.khoa { opacity: .55; cursor: not-allowed; }
.cv-attach-main { flex: 1 1 auto; min-width: 0; }
.cv-attach-t { font-size: 13.5px; font-weight: 600; color: var(--mud-palette-text-primary); line-height: 1.35; }
.cv-attach-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.cv-attach-ma { font-family: var(--font-mono, monospace); font-weight: 600; }
.cv-attach-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mud-palette-text-disabled); flex-shrink: 0; }
.cv-attach-chan { margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--mud-palette-warning); }
.cv-attach-tick { flex-shrink: 0; color: var(--mud-palette-primary); font-size: 18px; }
.cv-attach-empty { padding: 28px 16px; text-align: center; }
.cv-attach-empty-ic { color: var(--mud-palette-text-disabled); }
.cv-attach-empty-t { font-size: 13.5px; font-weight: 600; color: var(--mud-palette-text-primary); margin-top: 6px; }
.cv-attach-empty-s { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 4px; line-height: 1.5; max-width: 42ch; margin-left: auto; margin-right: auto; }


.cv-dh-chip.cv-dh-giahan { background: color-mix(in srgb, var(--mud-palette-warning) 15%, var(--mud-palette-surface)); color: var(--mud-palette-warning); cursor: pointer; }
.cv-dh-chip.cv-dh-giahan:hover { background: color-mix(in srgb, var(--mud-palette-warning) 24%, var(--mud-palette-surface)); }
.cv-giahan-menu { max-width: 340px; max-height: 60vh; overflow-y: auto; padding: 4px 0; }
.cv-giahan-row { padding: 8px 14px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cv-giahan-row:last-child { border-bottom: 0; }
.cv-giahan-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cv-giahan-so { font-weight: 700; font-size: 13px; color: var(--mud-palette-warning); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-giahan-so.am { color: var(--mud-palette-error); }   
.cv-giahan-moc { font-size: 12px; color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.cv-giahan-meta { font-size: 11.5px; color: var(--mud-palette-text-secondary); margin-top: 2px; line-height: 1.45; }
.cv-giahan-lydo { font-size: 11.5px; color: var(--mud-palette-text-secondary); margin-top: 3px; font-style: italic; line-height: 1.45; }

.cv-dh-chip.cv-dh-cl { gap: 4px; }
.cv-dh-chip.cv-dh-cl.ql-none { background: transparent; color: var(--mud-palette-text-secondary); border: 1px dashed color-mix(in srgb, var(--mud-palette-text-secondary) 45%, var(--mud-palette-surface)); }
.cv-dh-chip.cv-dh-cl.ql-1 { background: color-mix(in srgb, var(--mud-palette-text-secondary) 14%, var(--mud-palette-surface)); color: var(--mud-palette-text-secondary); }
.cv-dh-chip.cv-dh-cl.ql-2 { background: color-mix(in srgb, var(--mud-palette-info) 16%, var(--mud-palette-surface));    color: var(--mud-palette-info); }
.cv-dh-chip.cv-dh-cl.ql-3 { background: color-mix(in srgb, var(--mud-palette-warning) 20%, var(--mud-palette-surface)); color: var(--mud-palette-warning); }
.cv-dh-chip.cv-dh-cl.ql-4 { background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface)); color: var(--mud-palette-success); }


.cv-kpi-panels { margin-top: 8px; background: transparent; }
.cv-kpi-pan-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.cv-kpi-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 0 12px; }
.cv-kpi-dp { width: 150px; }
.cv-kpi-wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.cv-kpi-radar { flex: 0 0 260px; max-width: 260px; }
.cv-kpi-svg { width: 100%; height: auto; }
.cv-kpi-grid { fill: none; stroke: var(--mud-palette-lines-default); stroke-width: .5; opacity: .55; }
.cv-kpi-axis { stroke: var(--mud-palette-lines-default); stroke-width: .5; opacity: .8; }
.cv-kpi-axlbl { fill: var(--mud-palette-text-secondary); font-size: 9px; font-weight: 600; }
.cv-kpi-poly-avg { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .75; }
.cv-kpi-poly-sel { fill: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); stroke: var(--mud-palette-primary); stroke-width: 1.6; }
.cv-kpi-radar-cap { display: flex; justify-content: center; gap: 14px; margin-top: 2px; }
.cv-kpi-lg { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--mud-palette-text-secondary); }
.cv-kpi-lg::before { content: ""; width: 14px; height: 0; border-top: 2px solid currentColor; }
.cv-kpi-lg-sel { color: var(--mud-palette-primary); font-weight: 600; }
.cv-kpi-lg-avg::before { border-top-style: dashed; }
.cv-kpi-tablewrap { flex: 1 1 320px; min-width: 280px; overflow-x: auto; }
.cv-kpi-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cv-kpi-table th, .cv-kpi-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.cv-kpi-table thead th { position: sticky; top: 0; background: var(--mud-palette-surface); color: var(--mud-palette-text-secondary); font-weight: 600; }
.cv-kpi-th-name, .cv-kpi-td-name { text-align: left !important; }
.cv-kpi-td-name { display: flex; align-items: center; gap: 7px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.cv-kpi-ava { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .62rem; font-weight: 700; background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface)); color: var(--mud-palette-primary); }
.cv-kpi-row { cursor: pointer; transition: background .12s; }
.cv-kpi-row:hover { background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.cv-kpi-row.sel { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.cv-kpi-good { color: var(--mud-palette-success); font-weight: 600; }
.cv-kpi-mid  { color: var(--mud-palette-warning); font-weight: 600; }
.cv-kpi-low  { color: var(--mud-palette-error); font-weight: 600; }
.cv-kpi-na   { color: var(--mud-palette-text-disabled); }
.cv-kpi-hint { margin-top: 8px; font-size: .72rem; color: var(--mud-palette-text-secondary); }
@media (max-width: 720px) {
    .cv-kpi-radar { flex-basis: 100%; max-width: 100%; }
    .cv-kpi-svg { max-width: 280px; display: block; margin: 0 auto; }
}


.cv-dh-rel { margin-left: 3px; font-weight: 400; color: var(--mud-palette-text-secondary); }
.cv-dh-rel.is-over { color: var(--mud-palette-error); font-weight: 600; }   
.cv-dh-rel.is-warn { color: var(--mud-palette-text-secondary); }
.cv-dh-rel.is-ok   { color: var(--mud-palette-text-secondary); }
.cv-dh-sla { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.mud-icon-root.cv-dh-sla-ico { font-size: 13px; width: 13px; height: 13px; }
.cv-dh-sla.is-over { color: var(--mud-palette-error);   background: color-mix(in srgb, var(--mud-palette-error) 18%, var(--mud-palette-surface)); }
.cv-dh-sla.is-warn { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-surface)); }
.cv-dh-sla.is-ok   { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface)); }

.cv-dh-chip.cv-dh-date.is-over { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 18%, var(--mud-palette-surface)); }
.cv-dh-chip.cv-dh-date.is-over:hover { background: color-mix(in srgb, var(--mud-palette-error) 26%, var(--mud-palette-surface)); }
.cv-dh-date-over { font-weight: 700; }


.cv-sub-code { font-family: var(--mud-typography-default-family, monospace); font-size: 11.5px; font-weight: 600; color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.cv-sub-row .cv-sub-title { flex: 1; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mud-avatar.cv-sub-ava { width: 22px !important; height: 22px !important; min-width: 22px !important; font-size: 9px !important; font-weight: 600; flex-shrink: 0; }
.cv-sub-owner { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); white-space: nowrap; flex-shrink: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.cv-sub-bar { width: 70px; flex-shrink: 0; }


.cv-tl-msg { align-self: flex-start; max-width: 86%; }
.cv-tl-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.cv-tl-msg.me .cv-tl-body { display: flex; flex-direction: column; align-items: flex-end; }
.cv-tl-msg.me .cv-tl-time { text-align: right; }
.cv-tl-bubble { position: relative; }

.cv-tl-msg { position: relative; touch-action: pan-y; transition: transform .18s cubic-bezier(.22, 1, .36, 1); }
.cv-tl-msg--swiping { transition: none; }   

.cv-tl-msg::before {
    content: "\21A9"; position: absolute; left: -30px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 999px; font-size: 15px; line-height: 1; pointer-events: none; opacity: 0;
    background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary);
    transition: opacity .12s, background .12s, color .12s; }
.cv-tl-msg--swiping::before { opacity: .9; }
.cv-tl-msg--swipe-ready::before { opacity: 1; background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); color: var(--mud-palette-primary); }
.cv-tl-msg:not(.me) .cv-tl-bubble { border-radius: 4px 12px 12px 12px; }

.cv-tl-msg.me .cv-tl-bubble { background: var(--brand);
    background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 72%, #ffffff) 0%, color-mix(in srgb, var(--brand) 90%, #ffffff) 100%);
    border-color: transparent; color: var(--mud-palette-primary-text); border-radius: 12px 4px 12px 12px; }
.cv-tl-msg.me .cv-tl-bubble-text { color: var(--mud-palette-primary-text); }

.cv-tl-mention { font-weight: 700; color: var(--mud-palette-primary); }
.cv-tl-msg.me .cv-tl-mention { color: var(--mud-palette-primary-text); text-decoration: underline; text-underline-offset: 2px; }

.cv-tl-link { color: var(--mud-palette-primary); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; }
.cv-tl-msg.me .cv-tl-link { color: var(--mud-palette-primary-text); }

.cv-tl-tel { color: var(--mud-palette-primary); text-decoration: underline dotted; text-underline-offset: 2px; white-space: nowrap; }
.cv-tl-msg.me .cv-tl-tel { color: var(--mud-palette-primary-text); }

.cv-tl-recalled { font-style: italic; color: var(--mud-palette-text-secondary); opacity: .85; }
.cv-tl-bubble.cv-tl-bubble--recalled,
.cv-tl-msg.me .cv-tl-bubble.cv-tl-bubble--recalled { background: none; border-color: transparent; box-shadow: none; padding: 2px 2px; }

.cv-tl-msg.me .cv-tl-bubble--recalled .cv-tl-recalled { color: var(--mud-palette-text-secondary); opacity: .85; }

.cv-linkcards, .cv-composer-links { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cv-composer-links { margin: 0 0 8px; }
.cv-linkcard { display: flex; align-items: center; gap: 10px; max-width: min(420px, 100%); padding: 8px 10px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
    text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
.cv-linkcard:hover { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)); }
.cv-linkcard-ico { width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto; object-fit: contain;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.cv-linkcard-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cv-linkcard-host { font-weight: 600; font-size: .9em; color: var(--mud-palette-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-linkcard-path { font-size: .82em; color: var(--mud-palette-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cv-tl-msg.me .cv-linkcard { color: var(--mud-palette-text-primary); }

.cv-tl-msg.me .cv-cardmsg { color: var(--mud-palette-text-primary); }

.cv-tl-actions { position: absolute; top: auto; bottom: calc(100% - 2px); left: 8px; z-index: 4; display: flex; align-items: stretch; gap: 1px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 3px 4px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mud-palette-text-primary) 16%, transparent);
    opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .12s, transform .12s; }
.cv-tl-bubble:hover .cv-tl-actions, .cv-tl-actions:hover { opacity: 1; transform: none; pointer-events: auto; }
.cv-tl-act-emoji, .cv-tl-act { display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1;
    color: var(--mud-palette-text-secondary); padding: 0; transition: background .11s, transform .11s; }

.cv-tl-act-emoji { width: 30px; height: 30px; border-radius: 999px; font-size: 17px; line-height: 1; }

.cv-tl-act { flex-direction: column; gap: 3px; min-width: 52px; padding: 5px 8px 4px; }
.cv-tl-act-lbl { font-size: 11px; line-height: 1.1; white-space: nowrap; letter-spacing: .1px; }

.cv-tl-act > .mud-icon-root.cv-tl-react-ico { display: block; flex: 0 0 auto; }
.cv-tl-act { justify-content: center; }
.cv-tl-act-emoji:hover { background: var(--mud-palette-action-default-hover); transform: scale(1.18); }
.cv-tl-act:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
.cv-tl-act.on { background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent); color: var(--mud-palette-success); }
.cv-tl-act-sep { width: 1px; align-self: center; height: 22px; background: var(--mud-palette-lines-default); margin: 0 3px; }
.cv-tl-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.cv-tl-reaction { display: inline-flex; align-items: center; gap: 4px; background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600;
    color: var(--mud-palette-text-secondary); cursor: pointer; }
.cv-tl-reaction:hover { border-color: var(--mud-palette-primary); }
.cv-tl-ackpill { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--mud-palette-success); }
.cv-tl-msg.me .cv-tl-reaction { background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent); color: var(--mud-palette-text-primary); }
.cv-tl-msg.me .cv-tl-ackpill { color: var(--mud-palette-primary-text); }


.cv-tl-msg.grouped { margin-top: -6px; }
.cv-tl-ava-slot { width: 32px; min-width: 32px; flex-shrink: 0; }
.cv-tl-msg.me .cv-tl-actions { left: auto; right: 8px; }   

.cv-tl-msg--acts-below .cv-tl-actions { bottom: auto; top: calc(100% - 2px); }

.cv-tl-msg--selected .cv-tl-bubble { outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 2px; }
.cv-tl-msg--selected .cv-tl-bubble--recalled { outline: none; }   

.cv-tl-more { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: 999px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary); cursor: pointer; padding: 0;
    box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent); }
.cv-tl-more:active { background: var(--mud-palette-action-default-hover); }

.cv-tl-more .mud-icon-root { width: 18px; height: 18px; font-size: 18px; color: inherit; }
.cv-tl-msg:not(.me) .cv-tl-more { left: 100%; margin-left: 6px; }   
.cv-tl-msg.me .cv-tl-more { right: 100%; margin-left: 0; margin-right: 6px; }   

.cv-msgsheet-scrim { position: fixed; inset: 0; z-index: 1400; background: color-mix(in srgb, #000 40%, transparent);
    cursor: pointer;   
    animation: cvSheetScrim .18s ease; }

.cv-msgsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1401;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 10px;
    animation: cvSheetUp .22s cubic-bezier(.22, 1, .36, 1); }
@keyframes cvSheetUp { from { transform: translateY(12%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cvSheetScrim { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cv-msgsheet, .cv-msgsheet-scrim { animation: none; } }

.cv-msgsheet-emojis { display: flex; flex-wrap: nowrap; gap: 4px; padding: 6px 10px; align-self: stretch;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    background: var(--mud-palette-surface); border-radius: 22px;
    box-shadow: 0 6px 22px -6px color-mix(in srgb, var(--mud-palette-text-primary) 26%, transparent); }
.cv-msgsheet-emojis::-webkit-scrollbar { display: none; }
.cv-msgsheet-emoji { flex: 0 0 auto; border: 0; background: transparent; border-radius: 999px;
    padding: 4px; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: transform 120ms; }
.cv-msgsheet-emoji:active:not(:disabled) { transform: scale(1.25); }
.cv-msgsheet-emoji[disabled] { opacity: .5; cursor: default; }

.cv-msgsheet-row { display: flex; flex-wrap: wrap; gap: 2px; row-gap: 4px; padding: 8px 4px;
    background: var(--mud-palette-surface); border-radius: 16px;
    box-shadow: 0 6px 22px -6px color-mix(in srgb, var(--mud-palette-text-primary) 26%, transparent); }

.cv-msgsheet-cell { flex: 0 0 calc(25% - 1.5px); min-width: 0; display: flex; flex-direction: column;
    align-items: center; gap: 6px; padding: 8px 2px; border: 0; background: transparent;
    border-radius: 12px; cursor: pointer; color: var(--mud-palette-text-primary); }
.cv-msgsheet-cell:active:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.cv-msgsheet-cell[disabled] { opacity: .5; cursor: default; }
.cv-msgsheet-cell--danger { color: var(--mud-palette-error); }

.cv-msgsheet-cell--own { border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 4px; padding-top: 10px; }
.cv-msgsheet-cell--own + .cv-msgsheet-cell--own { border-top: 0; margin-top: 0; padding-top: 8px; }


.cv-tl-edit { display: flex; flex-direction: column; gap: 6px; }
.cv-tl-edit-in { width: 100%; min-height: 46px; resize: vertical; padding: 6px 8px;
    border: 1px solid color-mix(in srgb, currentColor 55%, transparent); border-radius: 8px; outline: none;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    font-family: inherit; font-size: 14px; line-height: 1.5; }
.cv-tl-edit-act { display: flex; justify-content: flex-end; gap: 6px; }

.cv-tl-edit-btn { padding: 3px 12px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 999px; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 12.5px; color: inherit; }
.cv-tl-edit-btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 16%, transparent); }
.cv-tl-edit-btn.on { border-color: currentColor; background: color-mix(in srgb, currentColor 18%, transparent);
    font-weight: 700; }
.cv-tl-edit-btn.on:hover:not(:disabled) { background: color-mix(in srgb, currentColor 28%, transparent); }
.cv-tl-edit-btn[disabled] { opacity: .55; cursor: default; }

.cv-tl-edited { font-style: italic; opacity: .85; }
.cv-msgsheet-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    color: var(--mud-palette-primary); }
.cv-msgsheet-cell--danger .cv-msgsheet-ic { color: var(--mud-palette-error); }

.cv-msgsheet-ic .mud-icon-root { width: 24px; height: 24px; font-size: 24px; color: inherit; }
.cv-msgsheet-lbl { font-size: .7rem; line-height: 1.1; text-align: center; color: var(--mud-palette-text-secondary); }
.cv-msgsheet-cell--danger .cv-msgsheet-lbl { color: var(--mud-palette-error); }

.cv-tlghim { display: flex; flex-direction: column; margin: 0 0 6px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
    background: var(--mud-palette-background-gray); overflow: hidden; max-height: 190px; overflow-y: auto; }
.cv-tlghim-h { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 9px;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    font-size: .74rem; font-weight: 600; color: var(--mud-palette-text-secondary);
    position: sticky; top: 0; background: var(--mud-palette-background-gray); z-index: 1; }
.cv-tlghim-h:hover { color: var(--mud-palette-primary); }
.cv-tlghim-t { flex: 1 1 auto; }
.mud-icon-root.cv-tlghim-ico,
.mud-icon-root.cv-tlghim-chev { width: 15px; height: 15px; font-size: 15px; color: var(--mud-palette-primary); }
.cv-tlghim-row { display: flex; align-items: center; gap: 4px; padding: 0 6px 5px 9px; }
.cv-tlghim-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px;
    padding: 3px 4px; border: 0; background: transparent; cursor: pointer; text-align: left;
    border-radius: 6px; }
.cv-tlghim-body:hover { background: var(--mud-palette-action-default-hover); }
.cv-tlghim-who { flex: 0 0 auto; font-size: .74rem; font-weight: 600; color: var(--mud-palette-primary); }

.cv-tlghim-txt { flex: 1 1 auto; min-width: 0; font-size: .8rem; color: var(--mud-palette-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tlghim-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    color: var(--mud-palette-text-secondary); }
.cv-tlghim-x:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-error); }
.cv-tlghim-x[disabled] { opacity: .5; cursor: default; }
.cv-tlghim-x .mud-icon-root { width: 14px; height: 14px; font-size: 14px; color: inherit; }

.cv-gsv { display: flex; flex-direction: column; gap: 10px; }
.cv-gsv-src { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 8px 10px;
    background: var(--mud-palette-background-gray); }
.cv-gsv-src-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--mud-palette-text-secondary); margin-bottom: 3px; }

.cv-gsv-src-b { font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.cv-gsv-src-f { display: flex; align-items: center; gap: 4px; margin-top: 4px;
    font-size: .78rem; color: var(--mud-palette-text-secondary); }
.cv-gsv-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px; display: flex; flex-direction: column; }
.cv-gsv-item { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
    padding: 8px 10px; border: 0; background: transparent; cursor: pointer; min-width: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default); }
.cv-gsv-item:last-child { border-bottom: 0; }
.cv-gsv-item:hover { background: var(--mud-palette-action-default-hover); }
.cv-gsv-item.on { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.cv-gsv-item-ma { flex: 0 0 auto; font-size: .76rem; font-weight: 600; color: var(--mud-palette-primary); }
.cv-gsv-item-td { flex: 1 1 auto; min-width: 0; font-size: .86rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-gsv-item-goc { flex: 0 0 auto; font-size: .68rem; padding: 1px 6px; border-radius: 999px;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.cv-gsv-empty { padding: 14px 10px; text-align: center; font-size: .86rem;
    color: var(--mud-palette-text-secondary); }

.cv-who { position: relative; display: inline-flex; align-items: center; }

.cv-who-hit { position: absolute; inset: 0; cursor: pointer; border-radius: 999px; }
.cv-who-name { cursor: pointer; }
.cv-who-name:hover { text-decoration: underline; }
.cv-who-card { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; min-width: 178px;
    display: none; flex-direction: column; align-items: stretch; padding: 6px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px; box-shadow: 0 12px 32px -4px color-mix(in srgb, var(--mud-palette-text-primary) 28%, transparent);
    
    font-weight: 400; text-align: left; }

.cv-quick-scrim { position: fixed; inset: 0; z-index: 1400; background: transparent; cursor: pointer; }
.cv-part-pill.on, .cv-who.on { z-index: 1401; }


.cv-part-pill { position: relative; cursor: pointer; }
.cv-part-pill.on { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }
.cv-part-pill.on > .cv-part-card { display: flex; }
.cv-part-card { top: calc(100% + 4px); font-weight: 400; }

.cv-quick-sheet { display: none; }
@media (hover: none) {
    .cv-quick-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1401;
        display: flex; flex-direction: column;
        padding: 4px 8px calc(14px + env(safe-area-inset-bottom));
        background: var(--mud-palette-surface);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px -8px color-mix(in srgb, var(--mud-palette-text-primary) 34%, transparent);
        animation: cvSheetUp .22s cubic-bezier(.22, 1, .36, 1);
    }
    
    .cv-quick-sheet-h { display: flex; align-items: center; gap: 10px;
        padding: 10px 6px 10px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
    .cv-quick-sheet-t { flex: 1 1 auto; min-width: 0; font-size: 1rem; font-weight: 700;
        color: var(--mud-palette-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cv-quick-sheet-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
        color: var(--mud-palette-text-secondary); }
    .cv-quick-sheet-x:active { background: var(--mud-palette-action-default-hover); }
    .cv-quick-sheet-x .mud-icon-root { width: 22px; height: 22px; font-size: 22px; color: inherit; }
    .cv-quick-sheet .cv-who-act { padding: 14px 12px; font-size: .95rem; gap: 14px; }
    .cv-quick-sheet .mud-icon-root.cv-who-act-ic { width: 20px; height: 20px; font-size: 20px; }

    
    .cv-part-pill.on > .cv-part-card,
    .cv-who.on > .cv-who-card { display: none; }
}

.cv-who-card::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.cv-who.on > .cv-who-card { display: flex; }
@media (pointer: fine) { .cv-who:hover > .cv-who-card { display: flex; } }
.cv-who-card-name { padding: 4px 10px 6px; font-size: .8rem; font-weight: 700;
    color: var(--mud-palette-text-primary); white-space: nowrap; text-align: left; }

.cv-who-act { display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 8px 10px; border: 0; background: transparent; cursor: pointer; border-radius: 8px;
    text-align: left; font-family: inherit;
    font-size: .84rem; font-weight: 400; color: var(--mud-palette-text-primary); white-space: nowrap; }
.cv-who-act > span { text-align: left; }
.cv-who-act:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.cv-who-act[disabled] { opacity: .5; cursor: default; }
.mud-icon-root.cv-who-act-ic { flex: 0 0 auto; width: 16px; height: 16px; font-size: 16px;
    color: var(--mud-palette-text-secondary); }

.cv-fw { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.cv-fw-src { padding: 8px 12px; border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray); border-radius: 0 8px 8px 0; }
.cv-fw-src-b { font-size: .88rem; line-height: 1.45; color: var(--mud-palette-text-primary);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cv-fw-src-f { display: flex; align-items: center; gap: 5px; margin-top: 5px;
    font-size: .76rem; color: var(--mud-palette-text-secondary); }
.mud-icon-root.cv-fw-src-ic { width: 14px; height: 14px; font-size: 14px; }

.cv-fw-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; }
.cv-fw-search:focus-within { border-color: var(--mud-palette-primary); }
.mud-icon-root.cv-fw-search-ic { width: 18px; height: 18px; font-size: 18px; flex: 0 0 auto;
    color: var(--mud-palette-text-secondary); }
.cv-fw-search-in { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
    font-family: inherit; font-size: .9rem; color: var(--mud-palette-text-primary); }
.cv-fw-search-x { flex: 0 0 auto; display: inline-flex; border: 0; background: transparent;
    cursor: pointer; color: var(--mud-palette-text-secondary); padding: 0; }
.cv-fw-search-x:hover { color: var(--mud-palette-error); }
.cv-fw-search-x .mud-icon-root { width: 16px; height: 16px; font-size: 16px; color: inherit; }

.cv-fw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin-bottom: -6px; font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .3px; color: var(--mud-palette-text-secondary); }
.cv-fw-count { flex: 0 0 auto; font-weight: 500; text-transform: none; letter-spacing: 0; }


.cv-fw-list { flex: 1 1 auto; min-height: 208px; max-height: 300px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px; padding: 4px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; }
.cv-fw-empty { padding: 22px 10px; text-align: center; font-size: .84rem;
    color: var(--mud-palette-text-secondary); }
.cv-fw-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px;
    border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 8px; }
.cv-fw-item:hover { background: var(--mud-palette-action-default-hover); }
.cv-fw-item.on { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.mud-avatar.cv-fw-ava { width: 34px !important; height: 34px !important; min-width: 34px !important;
    font-size: 12px !important; font-weight: 600; flex-shrink: 0; }
.cv-fw-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-fw-name { font-size: .88rem; font-weight: 600; color: var(--mud-palette-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cv-fw-meta { font-size: .76rem; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mud-icon-root.cv-fw-tick { flex: 0 0 auto; width: 18px; height: 18px; font-size: 18px;
    color: var(--mud-palette-primary); }


.cv-fw-item--self { border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px 8px 0 0; margin-bottom: 2px; }
.cv-fw-selfic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.cv-fw-selfic .mud-icon-root { width: 18px; height: 18px; font-size: 18px; color: var(--mud-palette-primary); }
.cv-fw-note { width: 100%; padding: 9px 12px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px; background: transparent; outline: none;
    font-family: inherit; font-size: .88rem; color: var(--mud-palette-text-primary); }
.cv-fw-note:focus { border-color: var(--mud-palette-primary); }

.cv-fw-warn { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; line-height: 1.45;
    color: var(--mud-palette-text-secondary); }
.mud-icon-root.cv-fw-warn-ic { flex: 0 0 auto; width: 15px; height: 15px; font-size: 15px;
    margin-top: 2px; color: var(--mud-palette-text-secondary); }
.cv-fw-warn b { color: var(--mud-palette-text-primary); font-weight: 600; }


@media (max-width: 600px) {
    .mud-dialog-container:has(> .mud-dialog.cv-fw-dlg) {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .mud-dialog.cv-fw-dlg {
        margin: 0 !important; width: 100% !important; max-width: 100% !important;
        max-height: 92dvh; border-radius: 16px 16px 0 0 !important;
    }
    
    .mud-dialog.cv-fw-dlg .mud-dialog-actions { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    .cv-fw-list { min-height: 240px; max-height: 46dvh; }
    
    .cv-fw-item { padding: 10px 10px; }
    .mud-avatar.cv-fw-ava { width: 38px !important; height: 38px !important; min-width: 38px !important; }
    .cv-fw-name { font-size: .95rem; }
    .cv-fw-meta { font-size: .8rem; }
}


.cv-ctp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin: 2px 2px -2px; font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .3px; color: var(--mud-palette-text-secondary); }
.cv-ctp-count { flex: 0 0 auto; font-weight: 500; text-transform: none; letter-spacing: 0; }
.cv-ctp-list { max-height: 260px; }
.cv-ctp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px;
    border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 8px; }
.cv-ctp-item:hover { background: var(--mud-palette-action-default-hover); }
.cv-ctp-item.on { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.mud-avatar.cv-ctp-ava { width: 34px !important; height: 34px !important; min-width: 34px !important;
    font-size: 12px !important; font-weight: 600; flex-shrink: 0; }
.cv-ctp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-ctp-name { font-size: .88rem; font-weight: 600; color: var(--mud-palette-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cv-ctp-meta { font-size: .76rem; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mud-icon-root.cv-ctp-tick { flex: 0 0 auto; width: 18px; height: 18px; font-size: 18px;
    color: var(--mud-palette-primary); }

@media (pointer: fine) {
    
    .cv-msgsheet { left: auto; right: 18px; bottom: 18px; width: max-content; max-width: min(340px, calc(100vw - 36px));
        padding: 0; gap: 8px; animation: cvSheetPop .14s ease-out; }

    
    .cv-msgsheet-emojis, .cv-msgsheet-cell--basic { display: none; }

    
    .cv-msgsheet-row { flex-direction: column; flex-wrap: nowrap; gap: 0; row-gap: 0;
        min-width: 188px; max-height: 70vh; overflow-y: auto;
        padding: 6px; border-radius: 12px;
        border: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 12px 32px -4px color-mix(in srgb, var(--mud-palette-text-primary) 28%, transparent); }
    .cv-msgsheet-cell { flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: flex-start;
        width: 100%; gap: 12px; padding: 11px 14px; border-radius: 8px;
        font-size: .925rem; text-align: left; white-space: nowrap; }
    .cv-msgsheet-cell:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
    
    .cv-msgsheet-ic { width: 24px; height: auto; flex: 0 0 auto; font-size: inherit;
        color: var(--mud-palette-text-secondary); }
    .cv-msgsheet-ic .mud-icon-root { width: 1.15em; height: 1.15em; font-size: 1.15em; }
    .cv-msgsheet-cell--danger .cv-msgsheet-ic { color: var(--mud-palette-error); }
    .cv-msgsheet-lbl { flex: 1 1 auto; min-width: 0; font-size: inherit; line-height: 1.25;
        letter-spacing: 0; text-align: left; color: var(--mud-palette-text-primary); }
    .cv-msgsheet-cell--danger .cv-msgsheet-lbl { color: var(--mud-palette-error); }

    
    .cv-msgsheet--mine .cv-msgsheet-cell { flex-direction: row-reverse; }
    .cv-msgsheet--mine .cv-msgsheet-lbl { text-align: right; }

    
    .cv-msgsheet-scrim { background: transparent; }
}
@keyframes cvSheetPop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.cv-tl-quote { display: flex; flex-direction: column; gap: 1px; margin-bottom: 5px; padding: 4px 9px; max-width: 100%;
    border-left: 3px solid var(--mud-palette-primary); border-radius: 4px; font-size: 12.5px; line-height: 1.35;
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent); }
.cv-tl-quote b { font-weight: 700; }
.cv-tl-quote span { color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tl-msg.me .cv-tl-quote { border-left-color: color-mix(in srgb, #fff 70%, transparent); background: color-mix(in srgb, #fff 16%, transparent); }
.cv-tl-msg.me .cv-tl-quote b { color: var(--mud-palette-primary-text); }

.cv-tl-msg.me .cv-tl-quote span { color: rgba(255, 255, 255, .82); color: color-mix(in srgb, var(--mud-palette-primary-text) 82%, transparent); }
.cv-tl-sending { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mud-palette-text-disabled); }
.cv-tl-sending .mud-progress-circular { width: 14px !important; height: 14px !important; }
.cv-tl-retry { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--mud-palette-error); padding: 0; }
.cv-tl-retry:hover { text-decoration: underline; }
.cv-composer-reply { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 10px;
    border: 1px solid var(--mud-palette-lines-default); border-left: 3px solid var(--mud-palette-primary);
    border-radius: 10px; background: var(--mud-palette-background-grey); }
.cv-composer-reply + .cv-composer-cc { margin-top: 6px; }
.mud-icon-root.cv-composer-reply-ico { color: var(--mud-palette-primary); }
.cv-composer-reply-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 12.5px; line-height: 1.35; }
.cv-composer-reply-txt b { font-weight: 700; }
.cv-composer-reply-txt span { color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-composer-reply-x { width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.cv-composer-reply-x:hover { background: var(--mud-palette-action-default-hover); }


.nv-opt { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; padding: 2px 0; }
.mud-avatar.nv-opt-ava { width: 26px; height: 26px; min-width: 26px; font-size: 10.5px; font-weight: 700; margin-top: 1px; }
.nv-opt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nv-opt-name { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--mud-palette-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-opt-row { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--mud-palette-text-secondary); }
.nv-opt-row span:not(.nv-opt-code) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-opt-code { font-size: 10.5px; font-weight: 600; color: var(--mud-palette-primary); white-space: nowrap; flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-radius: 5px; padding: 0 5px; }
.mud-icon-root.nv-opt-ico { font-size: 12px; width: 12px; height: 12px; flex-shrink: 0; }

.nv-opt--noacc { opacity: .55; }
.nv-opt.nv-opt--noacc .nv-opt-name { color: var(--mud-palette-text-secondary); }

.nv-opt-noacc-tag { font-size: 10px; font-weight: 600; line-height: 1.5; white-space: nowrap; flex-shrink: 0;
    color: var(--mud-palette-warning-darken, #8a5300); border-radius: 5px; padding: 0 5px;
    background: rgba(245, 158, 11, .16);
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); }


.mud-table-row.cv-row-active > td { background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent) !important; }
.mud-table-row.cv-row-active > td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-primary); }
.cv-kanban-card.is-active { border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 32%, transparent) !important; }
.cv-calw-card.is-active { border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 32%, transparent); }
.cv-cal-chip.is-active { background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    outline: 1px solid var(--mud-palette-primary); outline-offset: -1px; }


.mud-table-row.cv-row-changed > td { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) !important; }
.mud-table-row.cv-row-changed > td:first-child { box-shadow: inset 4px 0 0 var(--mud-palette-primary); }
.cv-kanban-card.cv-changed, .cv-calw-card.cv-changed {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent) !important; }
.cv-cal-chip.cv-changed {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    outline: 1.5px solid var(--mud-palette-primary); outline-offset: -1px; }


.cv-composer-cc { display: flex; flex-direction: column; position: relative; margin-top: 12px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px; background: var(--mud-palette-surface); padding: 10px 12px 8px; transition: border-color .12s, box-shadow .12s; }
.cv-composer-cc:focus-within { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent); }
.cv-composer-cc-input { width: 100%; box-sizing: border-box; resize: none; border: 0; outline: none; background: transparent;
    font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--mud-palette-text-primary); padding: 2px 2px 0;
    min-height: 24px; max-height: 160px; overflow-y: auto; }
.cv-composer-cc-input::placeholder { color: var(--mud-palette-text-disabled); }

.cv-composer-cc-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cv-composer-cc-hint { font-size: 12px; color: var(--mud-palette-text-disabled); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-composer-cc-send { margin-left: auto; width: 30px; height: 30px; border-radius: 999px; border: 0; flex-shrink: 0; background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: transform .12s, opacity .12s; }
.cv-composer-cc-send:disabled { opacity: .4; cursor: default; }
.cv-composer-cc-send:not(:disabled):hover { transform: scale(1.08); }



.cv-composer-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.cv-composer-cc.cv-composer--drag { border-color: var(--mud-palette-primary); border-style: dashed;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }

.cv-composer-dropmask { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 8px;
    border-radius: 14px; background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    color: var(--mud-palette-primary); font-size: 13px; font-weight: 600; pointer-events: none; z-index: 2; }
.cv-composer-cc.cv-composer--drag .cv-composer-dropmask { display: flex; }


.cv-locked { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px;
    border: 1px dashed var(--mud-palette-lines-default); background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary); font-size: 13px; line-height: 1.45; }
.cv-locked .mud-icon-root.cv-locked-ico { font-size: 16px !important; width: 16px; height: 16px; flex-shrink: 0; }
.cv-locked-txt { flex: 1 1 auto; min-width: 0; }
.cv-locked .mud-button-root { flex-shrink: 0; }
.cv-locked--slim { margin-top: 0; margin-bottom: 8px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; }
.cv-composer-cc-attach { width: 30px; height: 30px; border-radius: 999px; border: 0; flex-shrink: 0; background: transparent;
    color: var(--mud-palette-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s; }
.cv-composer-cc-attach:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-primary); }
.cv-composer-cc-at { font-size: 16px; font-weight: 700; line-height: 1; }
.cv-composer-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cv-composer-att { position: relative; display: flex; align-items: center; gap: 6px; max-width: 220px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-background-grey);
    padding: 4px 8px; font-size: 12.5px; color: var(--mud-palette-text-primary); }

.cv-composer-att.img { padding: 0; }
.cv-composer-att.img img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.cv-composer-att.img .cv-composer-att-size { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px;
    
    background: rgba(0, 0, 0, .55);
    background: color-mix(in srgb, #000 55%, transparent); color: #fff; font-size: 10px; border-radius: 0 0 10px 10px; }
.mud-icon-root.cv-composer-att-ico { font-size: 1.1rem; flex-shrink: 0; }
.cv-composer-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-composer-att-size { color: var(--mud-palette-text-disabled); font-size: 11px; flex-shrink: 0; }
.cv-composer-att-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--mud-palette-surface); box-shadow: 0 1px 4px rgba(0,0,0,.25); color: var(--mud-palette-text-secondary);
    display: inline-flex; align-items: center; justify-content: center; }
.cv-composer-att-x:hover { color: var(--mud-palette-error); }


.cv-tl-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cv-tl-att-img { padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 10px; overflow: hidden; line-height: 0;
    border: 1px solid var(--mud-palette-lines-default); }

.cv-tl-att-img img { display: block; height: 180px; width: auto; min-width: 110px; max-width: 240px; object-fit: cover;
    background: var(--mud-palette-action-default-hover); }
.cv-tl-att-img.is-pending { opacity: .65; }

.cv-cardmsg-img { padding: 0; border: 1px solid var(--mud-palette-lines-default); background: transparent;
    cursor: pointer; border-radius: 8px; overflow: hidden; line-height: 0; }
.cv-cardmsg-img img { display: block; height: 130px; width: auto; min-width: 90px; max-width: 220px;
    object-fit: cover; background: var(--mud-palette-action-default-hover); }
.cv-tl-att-img.is-pending img { min-width: 140px; }   
.cv-tl-att-file { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface);
    padding: 6px 10px; font-size: 12.5px; color: var(--mud-palette-text-primary); text-align: left; }
.cv-tl-att-file:hover { border-color: var(--mud-palette-primary); }
.cv-tl-att-file.is-pending { opacity: .65; cursor: default; }
.mud-icon-root.cv-tl-att-fico { font-size: 1.3rem; flex-shrink: 0; }
.cv-tl-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cv-tl-att-size { color: var(--mud-palette-text-disabled); font-size: 11px; flex-shrink: 0; }

.cv-tl-msg.me .cv-tl-att-file { background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent); color: var(--mud-palette-text-primary); border-color: transparent; }



.cv-range-wrap { position: relative; padding-top: 15px; }
.cv-range-bubble { position: absolute; top: 0; transform: translateX(-50%); background: var(--cv-fill, var(--mud-palette-primary));
    color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px;
    white-space: nowrap; pointer-events: none; }
.cv-range-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 4px solid transparent; border-top-color: var(--cv-fill, var(--mud-palette-primary)); }
.cv-range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; outline: none; cursor: pointer; box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--cv-fill, var(--mud-palette-primary)) 38%, transparent);
    background: linear-gradient(var(--cv-fill, var(--mud-palette-primary)), var(--cv-fill, var(--mud-palette-primary))) 0 / var(--pct, 0%) 100% no-repeat, var(--mud-palette-background-grey); }
.cv-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 999px;
    background: var(--cv-fill, var(--mud-palette-primary)); cursor: pointer; border: 2px solid var(--mud-palette-surface); }
.cv-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; background: var(--cv-fill, var(--mud-palette-primary)); cursor: pointer; border: 2px solid var(--mud-palette-surface); }
.cv-range:disabled { opacity: .5; cursor: default; }



.cv-zoom-ctl { display: inline-flex; align-items: center; gap: 2px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; padding: 2px; width: fit-content; }
.cv-zoom-ctl .cv-zoom-val { min-width: 46px; border: 0; background: transparent; cursor: pointer;
    font-size: 12px; font-weight: 700; color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.cv-zoom-ctl .cv-zoom-val:hover { color: var(--mud-palette-primary); }


.cv-board-pan { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; cursor: grab;
    height: calc(100dvh - 348px); min-height: 360px; }
.cv-board-pan.cv-is-panning { cursor: grabbing; user-select: none; }

.cv-cal-pan { cursor: grab; height: calc(100dvh - 410px); min-height: 340px; overflow-y: auto; overflow-x: auto; }
.cv-cal-pan.cv-is-swiping { cursor: grabbing; user-select: none; }


.cv-board-wrap { position: relative; }
.cv-board-overlay { position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
    backdrop-filter: blur(1px); }


.mud-icon-root.cv-prio-dot { font-size: 11px; width: 11px; height: 11px; }
.mud-icon-root.cv-col-dot  { font-size: 12px; width: 12px; height: 12px; }
.mud-icon-root.cv-dot-xs   { font-size: 9px;  width: 9px;  height: 9px; vertical-align: middle; }
.mud-icon-root.cv-foot-ico { font-size: 14px; width: 14px; height: 14px; }
.mud-icon-root.cv-add-ico  { font-size: 16px; width: 16px; height: 16px; }
.mud-avatar.cv-foot-avatar { width: 20px !important; height: 20px !important; min-width: 20px !important; font-size: 9px !important; font-weight: 700; }


.cv-kanban-board { display: flex; gap: 12px; align-items: stretch; min-width: min-content; height: 100%; }
.cv-kanban-col { min-width: 268px; max-width: 300px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
    background: var(--mud-palette-background-grey); border-radius: 12px; padding: 8px; max-height: 100%; }
.cv-kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.cv-kanban-col-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--mud-palette-text-primary); }
.cv-kanban-col-count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-secondary); }
.cv-kanban-zone { display: flex; flex-direction: column; gap: 8px; min-height: 60px;
    flex: 1 1 auto; overflow-y: auto; }
.cv-kanban-zone:empty { justify-content: center; }   
.cv-kanban-zone:empty::after { content: "Trống"; display: block; text-align: center; padding: 16px 0; font-size: 12.5px; color: var(--mud-palette-text-disabled); }
.cv-kanban-add { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 7px 8px;
    border: 1px dashed var(--mud-palette-lines-default); border-radius: 8px; background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.cv-kanban-add:hover { background: var(--mud-palette-surface); color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.cv-kanban-card { display: block; padding: 12px 12px 11px; cursor: pointer; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px; background: var(--mud-palette-surface); transition: box-shadow .12s, border-color .12s, transform .12s; }
.cv-kanban-card:hover { border-color: var(--mud-palette-primary); transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent); }
.cv-kanban-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.cv-kanban-card-title { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--mud-palette-text-primary); text-align: left; }

.cv-kb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 5px; font-size: 12px; line-height: 1.3; }
.cv-kb-by { color: var(--mud-palette-text-disabled); font-weight: 500; }
.cv-kb-by-name { font-weight: 600; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.cv-kb-when { color: var(--mud-palette-text-disabled); font-weight: 500; white-space: nowrap; }

.cv-kb-by-name + .cv-kb-when::before { content: "·"; margin-right: 4px; color: var(--mud-palette-text-disabled); }
.cv-kb-wait { margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--mud-palette-warning); }
.cv-kanban-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.cv-foot-item { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; }


.cv-kids-flag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; line-height: 1;
    padding: 2px 8px; border-radius: 999px; flex: 0 0 auto;
    color: var(--mud-palette-secondary); background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent); }

.cv-kids-flag.cv-kids-flag-child { color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); }
.mud-icon-root.cv-kids-flag-ico { font-size: 12px; width: 12px; height: 12px; }

.cv-calw-card.cv-has-kids { position: relative; }
.cv-calw-card.cv-has-kids::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--mud-palette-secondary); }

.cv-cal-chip.cv-has-kids { border-left: 2px solid var(--mud-palette-secondary); padding-left: 3px; }
.mud-icon-root.cv-chip-kids-ico { font-size: 10px; width: 10px; height: 10px; flex: 0 0 auto; color: var(--mud-palette-secondary); }


.cv-unread { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; line-height: 1;
    padding: 2px 8px; border-radius: 999px; flex: 0 0 auto; white-space: nowrap;
    color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); }
.mud-icon-root.cv-unread-ico { font-size: 12px; width: 12px; height: 12px; }

.cv-cal-unread-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--mud-palette-error); }


.cv-cal-nav-title { min-width: 210px; text-align: center; }


.cv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
    background: var(--mud-palette-lines-default); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; overflow: hidden; }
.cv-cal-weekday { background: var(--mud-palette-background-grey); padding: 6px; text-align: center; font-weight: 700; font-size: 12px; color: var(--mud-palette-text-secondary); }
.cv-cal-cell { background: var(--mud-palette-surface); min-height: 104px; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.cv-cal-cell.cv-cal-out { opacity: .45; }
.cv-cal-cell.cv-cal-today { background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); }
.cv-cal-cell-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.cv-cal-date { display: inline-flex; align-items: baseline; gap: 3px; border: 0; background: transparent; padding: 0; cursor: default; }
.cv-cal-date.has { cursor: pointer; }
.cv-cal-date .cv-cal-daynum { font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-primary); }
.cv-cal-today .cv-cal-date .cv-cal-daynum { color: var(--mud-palette-primary); font-weight: 700; }
.cv-cal-date.has:hover .cv-cal-daynum { color: var(--mud-palette-primary); }
.cv-cal-lunar { font-size: 9px; line-height: 1; color: var(--mud-palette-text-disabled); }
.cv-cal-add { display: none; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-surface); cursor: pointer; color: var(--mud-palette-text-secondary); }
.cv-cal-cell:hover .cv-cal-add { display: inline-flex; }
.cv-cal-add:hover { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }

.cv-cal-zone { display: flex; flex-direction: column; gap: 3px; min-height: 40px; max-height: 108px; overflow-y: auto; overflow-x: hidden; }
.cv-cal-more { border: 0; background: transparent; cursor: pointer; text-align: left; padding: 1px 2px;
    font-size: 11px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.cv-cal-more:hover { color: var(--mud-palette-primary); }
.cv-cal-chip { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 11px; border-radius: 4px; padding: 2px 4px;
    background: var(--mud-palette-background-grey); }
.cv-cal-chip:hover { filter: brightness(.97); }
.cv-cal-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mud-palette-text-primary); }


.cv-calw-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
    background: var(--mud-palette-lines-default); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; overflow: hidden; }

.cv-calw-day { display: flex; flex-direction: column; min-width: 0; background: var(--mud-palette-surface); }
.cv-calw-head { background: var(--mud-palette-background-grey); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.cv-calw-head.cv-cal-today { background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-background-grey)); }
.cv-calw-head-row { display: flex; align-items: center; gap: 6px; }
.cv-calw-dow { font-weight: 700; font-size: 12px; color: var(--mud-palette-text-primary); }
.cv-calw-head-row b { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.cv-calw-head.cv-cal-today .cv-calw-dow, .cv-calw-head.cv-cal-today .cv-calw-head-row b { color: var(--mud-palette-primary); }
.cv-calw-lunar { font-size: 10px; line-height: 1.1; color: var(--mud-palette-text-disabled); }
.cv-calw-col { background: var(--mud-palette-surface); min-height: 320px; max-height: 60vh; overflow-y: auto; padding: 6px; }
.cv-calw-zone { display: flex; flex-direction: column; gap: 6px; min-height: 300px; }
.cv-calw-card { display: flex; flex-direction: column; gap: 6px; cursor: pointer; padding: 8px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); transition: box-shadow .12s, border-color .12s; }
.cv-calw-card:hover { border-color: var(--mud-palette-primary); box-shadow: 0 1px 6px color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent); }
.cv-calw-card-top { display: flex; align-items: center; gap: 5px; }
.cv-calw-card-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--mud-palette-text-primary);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cv-calw-card-foot { display: flex; align-items: center; gap: 6px; }


.cv-calq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cv-calq-month { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; overflow: hidden; background: var(--mud-palette-surface); }
.cv-calq-title { display: flex; flex-direction: column; gap: 1px; width: 100%; border: 0; cursor: pointer; padding: 8px 10px; text-align: left;
    background: var(--mud-palette-background-grey); }
.cv-calq-title b { font-size: 13.5px; color: var(--mud-palette-text-primary); }
.cv-calq-title:hover b { color: var(--mud-palette-primary); }
.cv-calq-title span { font-size: 11.5px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.cv-calq-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 10px; }
.cv-calq-wd { font-size: 9.5px; font-weight: 700; text-transform: uppercase; text-align: center; color: var(--mud-palette-text-disabled); }
.cv-calq-day { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px;
    background: transparent; cursor: pointer; font-size: 11px; color: var(--mud-palette-text-primary); }
.cv-calq-day.cv-cal-out { opacity: .4; }
.cv-calq-day.has { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-primary); font-weight: 600; }
.cv-calq-day.over { background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent); color: var(--mud-palette-error); font-weight: 600; }
.cv-calq-day.today { box-shadow: inset 0 0 0 1.5px var(--mud-palette-primary); color: var(--mud-palette-primary); }


.cv-daypop-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.cv-daypop-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; cursor: pointer;
    padding: 8px 6px; border-radius: 8px; text-align: left; }
.cv-daypop-row:hover { background: var(--mud-palette-background-grey); }
.cv-daypop-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); }


.mud-drop-item-dragging, .cv-kanban-card.mud-drop-item-dragging { opacity: .5; }


.cv-rep-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }




@media (max-width: 1024px) {
    
    .cv-list-grid .mud-table-container { height: calc(100dvh - 500px) !important; min-height: min(280px, 50dvh); }
    .cv-board-pan { height: calc(100dvh - 360px); min-height: 320px; }
    .cv-cal-pan { height: calc(100dvh - 422px); min-height: 300px; }
    
    .cv-calw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    
    .cv-tl { max-height: none; }
}


@media (max-width: 720px) {
    .cv-kanban-col { min-width: min(86vw, 320px); }
    
    .cv-kanban-card-foot { flex-wrap: wrap; row-gap: 6px; }
    .cv-calw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-calq-grid { grid-template-columns: 1fr; }
    
    .cv-calw-col { max-height: none; min-height: 160px; }
    
    .cv-cal-pan { height: auto; min-height: 0; overflow-y: visible; }
    
    .cv-cal-pan { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cv-cal-grid { min-width: 540px; }
    .cv-cal-cell { min-height: 84px; }
    
    .cv-list-grid .mud-table-container { height: auto !important; min-height: 0; max-height: none; }
    
    .cv-calq-wd { font-size: 11px; }
    .cv-calq-day { font-size: 12.5px; }
    
    .cv-dh-chips .cv-dh-date { margin-left: 0; }
    
    .cv-detail-foot { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
    
    .cv-detail-foot > .mud-button-root,
    .cv-detail-foot > .cv-sop-wait-hint { flex: 0 0 auto; }
    .cv-detail-foot > .cv-sop-wait-hint { white-space: nowrap; }
    .cv-detail-foot .mud-spacer { display: none; }
    
}


@media (max-width: 520px) {
    
    .cv-kanban-col { min-width: min(90vw, 300px); max-width: 92vw; }

    
    .cv-cal-zone { max-height: 56px; }

    
    .cv-calw-grid { grid-template-columns: 1fr; }
    
    .cv-calw-zone { min-height: 60px; }
    .cv-calw-col { min-height: 0; }

    
    .cv-cal-nav-title { min-width: 0; flex: 1 1 120px; text-align: left; }
    .cv-cal-toolbar .mud-spacer { display: none; }
    .cv-cal-toolbar .ml-2 { margin-left: 0; }

    
    .cv-dh-title { font-size: 18px; }
    .cv-detail-head { padding: 14px 16px 16px; }
    .cv-detail-grid { padding: 12px; gap: 12px; }
    
    .cv-detail-foot > .mud-button-root,
    .cv-detail-foot > .cv-sop-wait-hint { flex: 0 0 auto; }

    

    
    .cv-daypop-row { flex-wrap: wrap; row-gap: 4px; }
    
}


@media (hover: none), (pointer: coarse) {
    
    .cv-cal-add { display: inline-flex !important; }
    
    .cv-cl-save { opacity: 1; pointer-events: auto; }
    
    
    .cv-zoom-ctl .mud-icon-button { min-width: 40px; min-height: 40px; }
    .cv-cal-add { width: 36px; height: 36px; }
    
    .cv-kanban-add { min-height: 40px; padding: 9px 8px; }

    
    
    .cv-tl-actions { display: none !important; }
    
    .cv-tl-msg { max-width: 78%; }
    
    .cv-tl-more { width: 40px; height: 40px; }
    .cv-tl-more .mud-icon-root { width: 20px; height: 20px; font-size: 20px; }

    
    
    .cv-tl-time-side { display: none; }
    

    
    .cv-composer-cc-send, .cv-composer-cc-attach { width: 40px; height: 40px; }
    
    .cv-composer-att-x { width: 26px; height: 26px; top: -9px; right: -9px; }
    

    
    .cv-dh-close, .cv-dh-back, .cv-dh-pin, .cv-dh-share { width: 40px; height: 40px; }

    
    .cv-cal-date { padding: 6px; min-height: 40px; }
    .cv-cal-more { padding: 8px 4px; min-height: 36px; }

    
    .cv-view-host .cv-fb-sort-btn { min-height: 40px; height: 40px; }
    
    .cv-accept-kb { min-height: 40px; padding: 9px 12px; }
    
    .cv-zoom-ctl .cv-zoom-val { min-height: 40px; }

    
    .cv-cal-pan { height: auto; min-height: 0; overflow-y: visible; }
    .cv-calw-col { max-height: none; }
}


.mud-button-icon-start,
.mud-button-icon-end,
.mud-chip .mud-icon-root,
.mud-nav-link .mud-icon-root,
.mud-list-item .mud-icon-root,
.mud-menu-item .mud-icon-root,
.mud-alert .mud-icon-root,
.mud-tab .mud-icon-root,
.mud-expand-panel-header .mud-icon-root,
.mud-breadcrumb-item .mud-icon-root {
    font-size: .9em !important;
}


.tss-type-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    background: var(--slate-100); color: var(--slate-600);
}
.tss-type-chip.tss-lg { width: 38px; height: 38px; border-radius: 10px; }
.tss-type-chip.tss-sm { width: 22px; height: 22px; border-radius: 6px; }
.tss-type-chip .mud-icon-root { font-size: 1.05rem; }
.tss-type-chip.tss-lg .mud-icon-root { font-size: 1.25rem; }
.tss-type-chip.tss-sm .mud-icon-root { font-size: 0.85rem; }

.tss-type-badge {
    display: inline-flex; align-items: center;
    padding: 1px 7px; border-radius: 4px;
    font-size: 10.5px; font-weight: 600; line-height: 1.6;
    background: var(--slate-100); color: var(--slate-600);
}


.tss-2fa-tag {
    display: inline-flex; align-items: center;
    height: 16px; padding: 0 4px; border-radius: 4px;
    background: #E8F5E9; color: #2E7D32;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
}


.tss-rm-list { padding: 4px; min-width: 268px; }


.mud-popover .tss-rm-list.mud-menu-list { max-height: calc(100vh - 32px); overflow-y: auto; }


.tss-rm-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky; top: 0; z-index: 1;
    background: var(--mud-palette-surface);
}
.tss-rm-head-txt { min-width: 0; }
.tss-rm-head-name {
    font-size: 12.5px; font-weight: 700; color: var(--mud-palette-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.tss-rm-head-id {
    font-size: 10.5px; color: var(--mud-palette-text-secondary); font-family: var(--font-mono, monospace);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}


.tss-rm-sep { height: 1px; background: var(--mud-palette-lines-default); margin: 4px 6px; }


.tss-rm-list .tss-rm-item { padding: 2px; border-radius: 8px; }
.tss-rm-row {
    display: flex; align-items: flex-start; gap: 10px;
    width: 100%; min-width: 0; padding: 7px 8px;
}
.tss-rm-ic {
    width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary);
}
.tss-rm-ic .mud-icon-root { font-size: 0.95rem; }
.tss-rm-txt { min-width: 0; flex: 1 1 auto; }
.tss-rm-t { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--mud-palette-text-primary); }
.tss-rm-s {
    display: block; font-size: 11.5px; line-height: 1.35; margin-top: 2px; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px;
}


.tss-rm-item.tss-tone-success .tss-rm-t { color: var(--mud-palette-success); }
.tss-rm-item.tss-tone-warning .tss-rm-t { color: var(--mud-palette-warning); }
.tss-rm-item.tss-tone-danger  .tss-rm-t { color: var(--mud-palette-error); }
.tss-rm-item.tss-tone-success .tss-rm-ic { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); color: var(--mud-palette-success); }
.tss-rm-item.tss-tone-warning .tss-rm-ic { background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); color: var(--mud-palette-warning); }
.tss-rm-item.tss-tone-danger  .tss-rm-ic { background: color-mix(in srgb, var(--mud-palette-error)   14%, transparent); color: var(--mud-palette-error); }


.tss-type-EMAIL        { background:#E3F2FD; color:#1565C0; }
.tss-type-LICENSE      { background:#F3E5F5; color:#6A1B9A; }
.tss-type-DOMAIN       { background:#E8F5E9; color:#2E7D32; }
.tss-type-HOSTING      { background:#FFF3E0; color:#E65100; }
.tss-type-SAAS         { background:#E0F7FA; color:#00695C; }
.tss-type-MARKETPLACE  { background:#FFEBEE; color:#C62828; }
.tss-type-SOCIAL       { background:#EDE7F6; color:#4527A0; }
.tss-type-CERT         { background:#E8EAF6; color:#283593; }
.tss-type-BANKING      { background:#F1F8E9; color:#33691E; }
.tss-type-CAMERA       { background:#ECEFF1; color:#37474F; }
.tss-type-NETWORK      { background:#E0F2F1; color:#00796B; }
.tss-type-SERVER       { background:#EFEBE9; color:#4E342E; }
.tss-type-INTERNAL_APP { background:#E1F5FE; color:#0277BD; }
.tss-type-OTHER        { background:#ECEFF1; color:#455A64; }


.filedrop-zone.mud-paper {
    border-style: dashed;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.filedrop-zone.mud-paper:hover { border-color: var(--brand); }
.filedrop-zone.filedrop-dragging.mud-paper {
    border: 2px dashed var(--brand);
    background-color: var(--brand-soft);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.filedrop-zone.filedrop-disabled.mud-paper { cursor: not-allowed; opacity: .6; }


.mud-icon-button.mud-checkbox-false,
.mud-icon-button.mud-checkbox-true,
.mud-icon-button.mud-checkbox-null { position: relative; }


.mud-icon-button.mud-checkbox-false > svg.mud-icon-root,
.mud-icon-button.mud-checkbox-true  > svg.mud-icon-root,
.mud-icon-button.mud-checkbox-null  > svg.mud-icon-root { color: transparent !important; fill: transparent !important; }


.mud-icon-button.mud-checkbox-false::before,
.mud-icon-button.mud-checkbox-true::before,
.mud-icon-button.mud-checkbox-null::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 18px; height: 18px;
    transform: translate(-50%, -50%);
    border: 1.5px solid var(--mud-palette-lines-inputs);
    border-radius: 5px;
    background: var(--mud-palette-surface);
    box-sizing: border-box;
    pointer-events: none;
    transition: background-color .15s ease, border-color .15s ease;
}


@media (hover: hover) and (pointer: fine) {
    .mud-icon-button.mud-checkbox-false:hover::before,
    .mud-icon-button.mud-checkbox-true:hover::before,
    .mud-icon-button.mud-checkbox-null:hover::before { border-color: var(--mud-palette-primary); }
}


.mud-icon-button.mud-checkbox-true::before,
.mud-icon-button.mud-checkbox-null::before {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}


.mud-icon-button.mud-checkbox-true::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 5px; height: 9px;
    border: solid var(--mud-palette-primary-text);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    pointer-events: none;
}


.mud-icon-button.mud-checkbox-null::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 10px; height: 2px;
    background: var(--mud-palette-primary-text);
    transform: translate(-50%, -50%);
    pointer-events: none;
}


.mud-icon-button.mud-disabled.mud-checkbox-false::before {
    border-color: var(--mud-palette-action-disabled);
    background: var(--mud-palette-action-disabled-background);
}
.mud-icon-button.mud-disabled.mud-checkbox-true::before,
.mud-icon-button.mud-disabled.mud-checkbox-null::before {
    background: var(--mud-palette-action-disabled);
    border-color: var(--mud-palette-action-disabled);
}




.nv-cd-pop.mud-popover, .nv-cd-pop .mud-popover {
    max-width: 420px !important;
}


@media (max-width: 600px) {
    .nv-cd-pop.mud-popover, .nv-attr-pop.mud-popover {
        z-index: 1362;
    }
}


.nv-chucdanh-field .mud-icon-root.mud-svg-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}

.nv-chucdanh-field .mud-input-adornment {
    pointer-events: none;
}


.nv-sbtoggle-mob .mud-icon-root.mud-svg-icon,
.nv-msheet-head .mud-icon-root.mud-svg-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: miter;
}



.nv-side-body { display: contents; }


.nv-searchtoggle-mob { display: none; }


.nv-searchtoggle-mob .mud-icon-root.mud-svg-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: miter;
}

@media (max-width: 600px) {
    
    .nv-tool-desk { display: none; }

    .nv-searchtoggle-mob { display: inline-flex; }

    
    .nv-sbtoggle-mob { order: 1; margin-inline-end: auto; }
    .nv-searchtoggle-mob { order: 2; }
    .nv-act-add { order: 3; flex: 0 0 auto; min-width: 0; }

    
    .nv-search-field { display: none; }
    .nv-search-field.is-open { display: block; flex: 1 1 100%; }

    
    .nv-cta { flex: 1 1 100%; }

    
    .nv-grid-wrap .mud-table-pagination-display,
    .nv-grid-wrap .mud-table-pagination-information {
        display: none;
    }
    .nv-grid-wrap .mud-table-pagination-toolbar {
        justify-content: center;
        min-height: 44px;   
        padding: 0;
    }
    .nv-grid-wrap .mud-table-pagination-spacer { display: none; }

    .nv-msheet-tabs {
        display: flex; gap: 4px; padding: 4px 12px 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }
    .nv-mtab {
        flex: 1 1 0; min-width: 0;
        display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        
        min-height: 40px; padding: 0 6px;
        background: none; border: 0; border-bottom: 2px solid transparent;
        font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
        touch-action: manipulation;   
    }
    .nv-mtab--on { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
    
    .nv-mtab-dot {
        width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
        background: var(--mud-palette-primary);
    }

    
    .nv-mpanel { display: none; padding: 8px 12px; overflow-y: auto; }
    .nv-sidebar.is-mtab-sort > .nv-side-body,
    .nv-sidebar.is-mtab-cols > .nv-side-body { display: none; }
    .nv-sidebar.is-mtab-sort > .nv-mpanel--sort,
    .nv-sidebar.is-mtab-cols > .nv-mpanel--cols { display: block; }

    .nv-msort--on { background: var(--mud-palette-primary-hover); border-radius: 8px; }
}


.nv-exp-titleico {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.nv-exp-scope { border-radius: 8px; }


.nv-exp-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.nv-exp-mode {
    flex: 1 1 200px; min-width: 0;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 6px 8px;
    transition: border-color .15s, background .15s;
}
.nv-exp-mode--on { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }


.nv-exp-bar {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 6px 8px; border-radius: 8px;
    background: var(--mud-palette-background-grey);
}
.nv-exp-grp {
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 8px 10px;
}

.nv-exp-grp--sens { border-color: var(--mud-palette-warning); background: var(--mud-palette-warning-hover); }
.nv-exp-grp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.nv-exp-grp-hint { display: block; padding: 2px 0 4px; }

.nv-exp-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 8px; }

@media (max-width: 600px) {
    .nv-exp-cols { grid-template-columns: 1fr; }
}


.nv-exp-preview {
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 8px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.nv-exp-preview-head { display: flex; align-items: center; gap: 6px; }
.nv-exp-preview-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-exp-preview-hint { display: block; }
.nv-exp-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 999px; font-size: .8125rem; line-height: 1.6;
    background: var(--mud-palette-background-grey); color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
}

.nv-exp-tag--sens { background: var(--mud-palette-warning-hover); border-color: var(--mud-palette-warning); }
.nv-exp-tag-lock.mud-icon-root { width: 15px; height: 15px; }


.nv-imp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.nv-imp-stat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 8px; font-size: .8125rem;
    border: 1px solid var(--stat, var(--mud-palette-lines-default));
    background: var(--mud-palette-background-grey);
    color: inherit; font-family: inherit; cursor: pointer;
    transition: background .12s, box-shadow .12s;
}
.nv-imp-stat:hover { background: var(--mud-palette-action-default-hover); }
.nv-imp-stat.is-active {
    border-color: var(--stat, var(--mud-palette-primary));
    box-shadow: inset 0 0 0 1px var(--stat, var(--mud-palette-primary));
    font-weight: 600;
}
.nv-imp-stat b { font-size: .95rem; }

.nv-imp-clear {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 8px; font-size: .8125rem;
    border: 1px dashed var(--mud-palette-lines-default); background: transparent;
    color: var(--mud-palette-text-secondary); font-family: inherit; cursor: pointer;
}
.nv-imp-clear:hover { background: var(--mud-palette-action-default-hover); }
.nv-imp-search { max-width: 360px; }

.nv-imp-tpl-req-note { color: var(--mud-palette-error); font-weight: 700; }
.nv-imp-cols { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.nv-imp-col-tag {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: .72rem; line-height: 1.4; padding: 2px 8px; border-radius: 12px;
    background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary); white-space: nowrap;
}
.nv-imp-col-tag.sens { background: var(--mud-palette-warning-hover); border-color: var(--mud-palette-warning); }
.nv-imp-col-tag .star { color: var(--mud-palette-error); font-weight: 700; }
.nv-imp-col-lock { font-size: .82rem !important; width: .82rem; height: .82rem; color: var(--mud-palette-warning); }
.nv-imp-col-lockleg { font-size: .9rem !important; width: .9rem; height: .9rem; vertical-align: text-bottom; color: var(--mud-palette-warning); }

.nv-imp-tbl td, .nv-imp-tbl th { vertical-align: top; }
.nv-imp-tbl .nv-imp-tr-loi td { background: var(--mud-palette-error-hover); }
.nv-imp-ma { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; }
.nv-imp-dash { color: var(--mud-palette-text-disabled); }

.nv-imp-changes {
    margin-top: 4px; display: flex; flex-direction: column; gap: 2px;
    padding-left: 8px; border-left: 2px solid var(--mud-palette-info);
}
.nv-imp-change { font-size: .8125rem; line-height: 1.5; }
.nv-imp-change .f   { font-weight: 600; }
.nv-imp-change .old { color: var(--mud-palette-text-secondary); text-decoration: line-through; }
.nv-imp-change .new { color: var(--mud-palette-success); font-weight: 600; }
.nv-imp-err { color: var(--mud-palette-error); font-size: .8125rem; margin-top: 2px; }


.nv-cd-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 12px; color: var(--mud-palette-text-secondary);
}
.nv-cd-clear {
    border: 0; background: transparent; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--mud-palette-primary); padding: 2px 4px;
    min-height: 32px;
}
.nv-cd-clear:hover { text-decoration: underline; }


.nv-cd-list { max-height: 300px; overflow-y: auto; padding: 4px 0; }


.nv-cd-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-width: 0;
    padding: 6px 10px;
    min-height: 40px;              
    cursor: pointer; user-select: none;
    touch-action: manipulation;    
}
.nv-cd-row:hover, .nv-cd-row:focus-visible { background: var(--mud-palette-action-default-hover); }
.nv-cd-row:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.nv-cd-row.on { background: var(--mud-palette-primary-hover); }


.nv-cd-cb {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--mud-palette-text-disabled);
    border-radius: 3px;
    color: var(--mud-palette-primary-text);
}
.nv-cd-row.on .nv-cd-cb {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
}
.nv-cd-cb svg { width: 14px; height: 14px; stroke-width: 2.4; }


.nv-cd-item-main {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0; line-height: 1.25; flex: 1 1 auto;
}
.nv-cd-item-name {
    font-weight: 500;
    
    overflow-wrap: anywhere;
}
.nv-cd-item-sub { font-size: 11px; color: var(--mud-palette-text-disabled); }
.nv-cd-item-count {
    flex: 0 0 auto; font-size: 12px;
    color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums;
}


.nv-cd-hl { background: transparent; color: var(--mud-palette-primary); font-weight: 700; }


.nv-cd-empty {
    padding: 12px; font-size: 13px;
    color: var(--mud-palette-text-secondary); text-align: center;
}







.cv-sub2 { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
    background: var(--mud-palette-surface); margin-top: 8px; }

.cv-sub2--mine { box-shadow: inset 1px 0 0 0 var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 32%, var(--mud-palette-lines-default)); }
.cv-sub2--dim { opacity: .8; }

.cv-sub2--nested { margin-top: 6px; }
.cv-sub2-mine-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 7px; border-radius: 999px;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); flex: 0 0 auto; }

.cv-sub2-stepno { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 7px; border-radius: 999px;
    color: var(--mud-palette-info, #0a4174); background: color-mix(in srgb, var(--mud-palette-info, #0a4174) 13%, transparent); flex: 0 0 auto; }
.cv-sub2-main { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.cv-sub2-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }


.cv-sub2-titleline { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }

.cv-sub2-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--mud-palette-text-primary);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; white-space: normal; overflow-wrap: anywhere; flex: 0 1 auto; min-width: 0; }

.cv-sub2-meta { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.cv-sub2-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 600; color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.cv-sub2-owner { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cv-sub2-date { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.mud-icon-root.cv-sub2-date-ico { font-size: 14px !important; }


.cv-sub2-right { display: grid; grid-template-columns: 34px 122px; align-items: center; gap: 8px; flex: 0 0 auto; }

.cv-sub2-tail { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.cv-sub2-prio { display: flex; align-items: center; min-width: 0; max-width: 100%; }

.cv-sub2-prio .cv-prio-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-sub2-pct { font-size: 12.5px; font-weight: 700; color: var(--mud-palette-text-secondary); text-align: right; }
.cv-sub2-statuscell { display: flex; align-items: center; min-width: 0; }
.cv-sub2-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; min-width: 0; max-width: 100%; }
.cv-sub2-status-lbl { overflow: hidden; text-overflow: ellipsis; }

.cv-sub2-status--btn { cursor: pointer; padding: 3px 6px; border-radius: 999px; border: none; background: transparent; }
.cv-sub2-status--btn:hover { background: var(--mud-palette-action-default-hover); }
.mud-icon-root.cv-sub2-status-caret { font-size: 15px !important; opacity: .55; flex: 0 0 auto; }

@media (max-width: 600px) {
    .cv-sub2 { flex-wrap: wrap; }
    .cv-sub2-main { flex-basis: 100%; }
    
    .cv-sub2-right { width: 100%; padding-left: 32px; grid-template-columns: auto 1fr; }
    
    .cv-sub2-tail { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
}


.cv-sub-sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
    color: var(--mud-palette-text-secondary); padding: 3px 8px; border-radius: 8px; user-select: none; }
.cv-sub-sort:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-primary); }
.mud-icon-root.cv-sub-sort-ico { font-size: 16px !important; }


.cv-sub-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 6px;
    padding: 7px 12px; border: 1px dashed var(--mud-palette-lines-default); border-radius: 10px; background: transparent;
    cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--mud-palette-primary); }
.cv-sub-more:hover { background: var(--mud-palette-action-default-hover); border-style: solid; }
.mud-icon-root.cv-sub-more-ico { font-size: 17px !important; }


.cv-status-menu-h { padding: 6px 14px 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--mud-palette-text-secondary); }
.cv-status-opt { display: inline-flex; align-items: center; gap: 8px; min-width: 178px; }
.cv-status-opt-lbl { flex: 1; }
.mud-icon-root.cv-status-opt-chk { font-size: 16px !important; color: var(--mud-palette-primary); }


.cv-part-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; border: 1px dashed var(--mud-palette-lines-inputs); background: transparent; color: var(--mud-palette-text-secondary); cursor: pointer; }
.cv-part-add:hover:not(:disabled) { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }

.cv-part-add:disabled { opacity: .45; cursor: default; }
.cv-part-add .mud-icon-root { font-size: 16px; }

.cv-part-add--danger { border-color: color-mix(in srgb, var(--mud-palette-error) 55%, transparent); color: var(--mud-palette-error); }
.cv-part-add--danger:hover { border-color: var(--mud-palette-error); color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }
.cv-part-add--danger:disabled { opacity: .5; cursor: default; }
.cv-part-pill-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 2px; padding: 0; border: none; background: transparent; color: var(--mud-palette-text-disabled); cursor: pointer; border-radius: 50%; }
.cv-part-pill-x:hover { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }
.cv-part-pill-x .mud-icon-root { font-size: 13px; }
.cv-part-addrow .cv-part-addpick { flex: 1; min-width: 0; }


@media (hover: none), (pointer: coarse) {
    .cv-part-add { width: 34px; height: 34px; }
    .cv-part-pill-x { width: 24px; height: 24px; }
}


.cv-composer-cc { position: relative; }   
.cv-mention-pop { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 4px); z-index: 30; max-height: 244px; overflow-y: auto;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; box-shadow: var(--mud-elevation-8); padding: 4px; }
.cv-mention-head { padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--mud-palette-text-secondary); }
.cv-mention-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; }
.cv-mention-item:hover, .cv-mention-item.active { background: var(--mud-palette-action-default-hover); }
.cv-mention-name { font-weight: 600; font-size: 13px; }
.cv-mention-role { margin-left: auto; font-size: 11px; color: var(--mud-palette-text-secondary); }


.cv-slash-pop .cv-mention-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mud-icon-root.cv-slash-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mud-palette-primary); }
.cv-slash-ico.mud-icon-root.mud-svg-icon { fill: none; stroke: currentColor; stroke-width: 1.6; }

.cv-slash-thumb { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 5px; object-fit: cover;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-action-default-hover); }
.cv-slash-empty { padding: 10px; font-size: 12.5px; color: var(--mud-palette-text-secondary); text-align: center; }

.cv-slash-cmd { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600;
    line-height: 1; padding: 3px 6px; border-radius: 6px; background: var(--mud-palette-action-default-hover); color: var(--mud-palette-primary); }

.cv-hm-done { text-decoration: line-through; opacity: .7; }


.cv-cardmsg { margin-top: 6px; max-width: min(460px, 100%); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
    background: var(--mud-palette-background-grey); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px;
    
    white-space: normal; }
.cv-cardmsg--loading { color: var(--mud-palette-text-secondary); font-size: 12.5px; font-style: italic; }
.cv-cardmsg-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--mud-palette-text-secondary); }
.mud-icon-root.cv-cardmsg-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mud-palette-primary); }
.cv-cardmsg-ico.mud-icon-root.mud-svg-icon { fill: none; stroke: currentColor; stroke-width: 1.6; }
.cv-cardmsg-task { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.cv-cardmsg-body { display: flex; flex-direction: column; min-width: 0; }
.cv-cardmsg-title { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-cardmsg-sub { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
a.cv-cardmsg-task:hover .cv-cardmsg-title { text-decoration: underline; }
.cv-cardmsg--locked { opacity: 0.72; }
.cv-cardmsg-files { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-cardmsg-file { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 5px 8px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px; background: var(--mud-palette-surface); cursor: pointer; }
span.cv-cardmsg-file { cursor: default; }
.cv-cardmsg-ls { display: flex; flex-direction: column; gap: 2px; }
.cv-cardmsg-lsrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; text-decoration: none; color: inherit; }
a.cv-cardmsg-lsrow:hover { background: var(--mud-palette-action-default-hover); }
.cv-cardmsg-lsdot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; border: 1.6px solid var(--mud-palette-text-disabled); box-sizing: border-box; }
.cv-cardmsg-lsdot.done { background: var(--mud-palette-success); border-color: var(--mud-palette-success); }
.cv-cardmsg-lsrow.done .cv-cardmsg-lstxt { text-decoration: line-through; color: var(--mud-palette-text-secondary); }
.cv-cardmsg-lstxt { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cv-cardmsg-ls .cv-cardmsg-sub { margin-left: auto; flex: 0 0 auto; }
.cv-cardmsg-more { padding: 3px 6px; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.cv-cardmsg-empty { font-size: 12px; color: var(--mud-palette-text-secondary); }




.cv-tc-nhan { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tc-ma { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 600; letter-spacing: .01em; padding: 1px 6px; border-radius: 5px;
    background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }

.cv-tc-cua { font-size: 12px; color: var(--mud-palette-text-primary); }


.cv-tc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-tc-tag { font-size: 11px; line-height: 1.5; padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }

.cv-tc-tag.nhe { border-color: var(--status-warning-fg); color: var(--status-warning-fg); }

.cv-tc-list { display: flex; flex-direction: column; gap: 1px; }
.cv-tc-row { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }

.cv-tc-dot { width: 4px; height: 4px; flex: 0 0 auto; align-self: center; border-radius: 50%;
    background: var(--mud-palette-text-disabled); }
.cv-tc-txt { font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.cv-tc-req { color: var(--status-error-fg); font-weight: 700; }
.cv-tc-do { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary); white-space: nowrap; }


.cv-tc-open { align-self: flex-start; margin-top: 1px; padding: 3px 10px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px; background: transparent; font-size: 11.5px; font-weight: 600; cursor: pointer;
    color: var(--mud-palette-primary); }
.cv-tc-open:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.cv-tc-open:disabled { opacity: .55; cursor: default; }


.cv-tc-vote { display: inline-flex; gap: 4px; flex: 0 0 auto; margin-left: 6px; }
.cv-tc-vt {
    padding: 1px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 11.5px;
    line-height: 1.55;
    cursor: pointer;
    white-space: nowrap;
}
.cv-tc-vt:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.cv-tc-vt:disabled { opacity: .5; cursor: default; }

.cv-tc-vt.on { font-weight: 600; border-color: transparent; }
.cv-tc-vt.on.dat   { background: var(--mud-palette-success);  color: #fff; }
.cv-tc-vt.on.khong { background: var(--mud-palette-warning);  color: #fff; }


.cv-tc-caso {
    flex: 0 0 auto;
    margin-left: 6px;
    font-size: 11px;
    font-style: italic;
    color: var(--mud-palette-text-disabled);
}


.cv-tc-nocham {
    margin-top: 6px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}


.cv-tc-loidan { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0;
    
    padding: 5px 9px; border-radius: 7px;
    background: var(--mud-palette-background-grey); font-size: 12px; color: var(--mud-palette-text-primary); }
.cv-tc-loidan-nhom { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.cv-tc-loidan-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cv-tc-loidan-ai  { flex: 0 0 auto; font-size: 11px; font-style: italic; color: var(--mud-palette-text-secondary); }


.cv-composer-cardchip { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; padding: 4px 8px; max-width: 100%;
    border: 1px solid var(--mud-palette-primary); border-radius: 999px; background: var(--mud-palette-primary-hover); }
.cv-composer-cardchip-txt { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.cv-composer-note { display: flex; align-items: center; gap: 6px; margin: 2px 0; padding: 5px 8px; max-width: 100%;
    border: 1px solid var(--mud-palette-success); border-radius: 10px; background: var(--mud-palette-success-hover);
    color: var(--mud-palette-success-darken); }
.cv-composer-note.err { border-color: var(--mud-palette-error); background: var(--mud-palette-error-hover);
    color: var(--mud-palette-error-darken); }
.cv-composer-note-txt { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.cv-composer-note .cv-composer-att-x { flex: 0 0 auto; }


.cv-cell-main { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }

.cv-col-owner { min-width: 0; }
.cv-col-owner-name { font-size: 13.5px; font-weight: 600; color: var(--mud-palette-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-col-owner-sub { font-size: 12px; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-col-status { display: inline-flex; align-items: center; gap: 5px; }

.cv-row-by { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12px; color: var(--mud-palette-text-disabled); }
.cv-row-by-lbl { font-weight: 500; }
.cv-row-by-name { font-weight: 600; color: var(--mud-palette-text-secondary); }
.cv-row-by-when { white-space: nowrap; }
.cv-row-by-name + .cv-row-by-when::before { content: "·"; margin-right: 5px; }

.cv-cell-main .mud-typography { overflow-wrap: anywhere; word-break: break-word; }
.cv-caret { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; padding: 0; border: none; border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 14%, transparent); color: var(--mud-palette-text-secondary);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms, color 120ms; }
.cv-caret:hover { background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent); color: var(--mud-palette-primary); }
.cv-caret .mud-icon-root { font-size: 16px; }
.cv-leaf { width: 22px; flex-shrink: 0; text-align: center; color: var(--mud-palette-text-disabled); font-size: 13px; line-height: 24px; user-select: none; }
.mud-avatar.cv-row-ava { margin-top: 1px; font-weight: 600; font-size: .72rem; flex: 0 0 auto; }

.cv-ava-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.cv-caret.cv-caret-below { width: 20px; height: 18px; margin-top: 0; border-radius: 5px; }
.cv-caret.cv-caret-below .mud-icon-root { font-size: 15px; }

.cv-change-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 500; line-height: 1.2;
    color: var(--mud-palette-text-disabled); white-space: nowrap; }

.cv-reorder-pill { display: flex; width: fit-content; max-width: 100%; margin: 2px auto 4px; cursor: pointer;
    align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-family: inherit; font-size: 12.5px; line-height: 1.2;
    color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
    box-shadow: 0 1px 4px rgba(10, 65, 116, .12); transition: background .15s ease, box-shadow .15s ease; }
.cv-reorder-pill:hover { background: color-mix(in srgb, var(--brand) 18%, var(--mud-palette-surface));
    box-shadow: 0 2px 8px rgba(10, 65, 116, .18); }
.cv-reorder-pill .cv-reorder-pill-ico { display: inline-flex; flex-shrink: 0; }
.cv-reorder-pill .cv-reorder-pill-ico svg { width: 14px; height: 14px; }   
.cv-reorder-pill .cv-reorder-pill-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-reorder-pill .cv-reorder-pill-txt b { font-weight: 700; }

.cv-list-head .cv-lh-reorder-wrap { display: inline-flex; align-items: center; min-width: 0; }
.cv-reorder-pill.cv-lh-reorder { margin: 0; box-shadow: none; padding: 3px 10px; font-size: 12px; }

.cv-applied-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px; }
.cv-applied-chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: inherit;
    font-size: 12px; line-height: 1.2; padding: 3px 8px 3px 10px; border-radius: 999px; white-space: nowrap;
    color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); }
.cv-applied-chip:hover { background: color-mix(in srgb, var(--brand) 18%, var(--mud-palette-surface)); }
.cv-applied-chip .cv-applied-x { font-size: 14px; line-height: 1; opacity: .75; }
.cv-applied-chip:hover .cv-applied-x { opacity: 1; }
.cv-applied-clearall { cursor: pointer; font-family: inherit; font-size: 12px; line-height: 1.2; padding: 3px 8px;
    border: none; background: transparent; color: var(--mud-palette-text-secondary); text-decoration: underline; }
.cv-applied-clearall:hover { color: var(--brand); }

.cv-msgrow:focus-visible, .cv-kanban-card:focus-visible, .cv-calw-card:focus-visible, .cv-cal-chip:focus-visible,
.cv-mr-pin:focus-visible, .cv-accept-btn:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px;
}

.cv-row-child td { background: color-mix(in srgb, var(--mud-palette-text-secondary) 5%, transparent); }

.cv-mode-conv .cv-row-child td { background: transparent; }

.cv-row-mine td:first-child { box-shadow: inset 3px 0 0 0 var(--mud-palette-primary); }
.cv-mine-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 2px 8px;
    border-radius: 999px; color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }
.mud-icon-root.cv-mine-badge-ico { font-size: 12px; width: 12px; height: 12px; }

.cv-row-parent-ctx td { background: color-mix(in srgb, var(--mud-palette-text-secondary) 6%, transparent); opacity: .82; }
.cv-parent-ctx-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 2px 8px;
    border-radius: 999px; color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); }
.mud-icon-root.cv-parent-ctx-ico { font-size: 12px; width: 12px; height: 12px; }

.cv-list-grid .mud-table-head .mud-table-cell { white-space: nowrap; }


.cv-list-grid .mud-table-container { overflow-x: auto; }

.cv-list-grid .mud-table-pagination { display: none !important; }

.cv-mode-conv .cv-list-grid .mud-table-container { overflow-x: hidden; }

.cv-mode-conv .cv-list-grid table.mud-table-root { table-layout: fixed; width: 100%; }

.cv-mode-conv .cv-list-grid table.mud-table-root { min-width: calc(100vw - 24px); }
.cv-split--on.cv-mode-conv .cv-list-grid table.mud-table-root { min-width: 0; }

.cv-mode-table .cv-list-grid .mud-table-container > table,
.cv-mode-table .cv-list-grid table.mud-table-root { min-width: 620px; }


@media (max-width: 560px) {
    .mud-table-pagination .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        min-height: 0;
        padding: 8px 6px;
        row-gap: 4px;
        column-gap: 2px;
    }
    .mud-table-pagination-spacer { display: none; }             
    .mud-table-pagination-caption { margin: 0 !important; padding-left: 6px; padding-right: 6px; }
    .mud-table-pagination-actions { margin: 0 !important; }
}



.cv-split { display: block; }
.cv-split-list { width: 100%; min-width: 0; }

.cv-list-gridwrap { position: relative; }

.cv-list-loading { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-surface) 58%, transparent); border-radius: inherit;
    animation: cvListFade .15s ease-out; }
@keyframes cvListFade { from { opacity: 0; } to { opacity: 1; } }

.cv-split--on {
    display: grid;
    grid-template-columns: var(--cv-list-w, minmax(0, 4fr)) 12px minmax(0, 6fr);
    gap: 0; align-items: stretch;
}

.cv-split--on .cv-split-list {
    
    min-width: 380px; max-width: none;
    display: flex; flex-direction: column; min-height: 0;
    
    height: max(420px, calc(100dvh - 245px));
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--radius-card);
    overflow: hidden;
}

.cv-list-head { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    font-size: 14.5px; font-weight: 700; color: var(--mud-palette-text-primary); }
.mud-icon-root.cv-list-head-ico { font-size: 18px; width: 18px; height: 18px; color: var(--mud-palette-text-secondary); }
.cv-list-head-count { font-size: 13px; font-weight: 700; color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover); padding: 2px 10px; border-radius: 999px;
    font-variant-numeric: tabular-nums; }

.cv-list-head { flex-wrap: wrap; }
.cv-lh-spacer { flex: 1 1 auto; }
.cv-lh-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cv-lh-tools .cv-lh-mbtn { text-transform: none; font-weight: 600; }

.cv-fb-adv .mud-button-outlined-default { border-color: var(--mud-palette-lines-default) !important; }

.cv-fb-clear { position: absolute; top: -7px; right: -7px; z-index: 1;
    display: inline-flex; align-items: center; gap: 3px;
    height: 18px; padding: 0 7px 0 5px;
    border: 2px solid var(--mud-palette-surface); border-radius: 999px;
    background: var(--mud-palette-error); color: #fff;
    font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 1;
    white-space: nowrap; cursor: pointer; }
.cv-fb-clear:hover { background: var(--mud-palette-error-darken); }
.cv-fb-clear:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.cv-fb-clear-t { letter-spacing: .01em; }

.cv-fb-clear .mud-icon-root.mud-svg-icon { fill: none; stroke: currentColor;
    width: 10px; height: 10px; flex: 0 0 auto; }
.cv-fb-clear .mud-icon-root.mud-svg-icon,
.cv-fb-clear .mud-icon-root.mud-svg-icon g { stroke-width: 2.6; }
.cv-lh-srch-btn.on { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }



.cv-sort-pop.mud-popover, .cv-sort-pop .mud-popover,
.cv-sort-pop .mud-list, .cv-sort-pop .mud-list-item {
    min-width: 0 !important;
    max-width: 210px !important;
}
.cv-sort-pop.mud-popover, .cv-sort-pop .mud-popover { width: max-content !important; }

.cv-sort-pop.mud-popover, .cv-sort-pop .mud-popover,
.cv-foot-more-pop.mud-popover, .cv-foot-more-pop .mud-popover,
.cv-head-actions-pop.mud-popover, .cv-head-actions-pop .mud-popover {
    box-shadow: 0 12px 32px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .14) !important;
    border: 1px solid var(--mud-palette-lines-default);
}

.cv-foot-more-pop.mud-popover, .cv-foot-more-pop .mud-popover {
    box-shadow: 0 18px 48px rgba(15, 23, 42, .42), 0 6px 18px rgba(15, 23, 42, .30) !important;
}


.cv-lh-srch-toggle { flex: 0 0 auto; }

.cv-lh-srch-toggle { border: 1px solid var(--mud-palette-lines-default) !important; border-radius: 8px; }

.cv-list-head { position: relative; }
.cv-lh-search-grow { display: none; }

.cv-list-head.cv-lh-searchopen .cv-lh-search-grow {
    display: flex; align-items: center; gap: 8px;
    position: absolute; left: 0px; right: 0px; top: 0px; bottom: auto; z-index: 6;
    padding: 3px 7px; border-radius: 0px;
    background: var(--mud-palette-surface);
}
.cv-lh-search-grow .mud-input-control { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.cv-lh-search-grow .mud-input.mud-input-text { font-size: 13px; }

.cv-lh-search-grow .mud-input-outlined-border { border-radius: 10px; border-color: var(--mud-palette-lines-default) !important; }
.cv-lh-search-grow .mud-input.mud-input-outlined { border-radius: 10px; }


.cv-lh-search-close {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--mud-palette-text-secondary);
}
.cv-lh-search-close:hover { background: var(--mud-palette-action-default-hover); }
.cv-lh-search-close svg { width: 18px; height: 18px; stroke-width: 1.6; }


.cv-lh-statustools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }



.cv-split--on .cv-list-grid { border: none !important; box-shadow: none !important; border-radius: 0 !important; }
.cv-split--on .cv-list-grid .mud-table-container { padding: 6px; }

.cv-split--on .cv-list-grid tbody .cv-msgrow { margin-bottom: 2px; }

.cv-split-grip { align-self: stretch; width: 100%; cursor: col-resize; touch-action: none; user-select: none;
    display: flex; align-items: center; justify-content: center; }
.cv-split-grip::before { content: ""; width: 4px; height: 34px; border-radius: 999px;
    background: var(--mud-palette-lines-default); transition: background 120ms, height 120ms; }
.cv-split-grip:hover::before, .cv-split-grip.is-dragging::before {
    background: var(--mud-palette-primary); height: 48px; }
.cv-split-detail { display: none; }
.cv-split--on .cv-split-detail {
    display: flex; flex-direction: column; min-width: 0; max-width: none;
    height: calc(100dvh - 250px); min-height: 420px; overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--radius-card);
    background: var(--mud-palette-surface);
    
    container: cvdet / inline-size;
}

@container cvdet (max-width: 860px) {
    .cv-detail-grid { grid-template-columns: 1fr; }
}

@container cvdet (max-width: 720px) {
    .cv-detail-foot > .mud-button-root.mud-button-outlined { display: none !important; }
    .cv-foot-more { display: inline-flex !important; }
    
    .cv-detail-foot > .cv-sop-wait-hint--doinguoi { display: none !important; }
    
    .cv-dh-hdr-act { display: none !important; }
}

@container cvmain (max-width: 560px) {
    .cv-sub2 { flex-wrap: wrap; }
    .cv-sub2-main { flex-basis: 100%; }
    
    .cv-sub2-right { width: 100%; padding-left: 32px; grid-template-columns: auto 1fr; }
    .cv-sub2-tail { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
}

.cv-detail-inline-host { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.cv-detail-inline-host .cv-detail-root { height: 100%; min-height: 0; }

.cv-split-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.mud-icon-root.cv-split-empty-ico { font-size: 40px !important; width: 40px; height: 40px; color: var(--mud-palette-text-disabled); }
.cv-split-empty-t { font-size: 15px; font-weight: 700; color: var(--mud-palette-text-primary); }
.cv-split-empty-s { font-size: 13px; color: var(--mud-palette-text-secondary); max-width: 320px; line-height: 1.5; }


.cv-split-guide { height: 100%; min-height: 0; display: flex; flex-direction: column;
    opacity: .8; transition: opacity .2s ease; }
.cv-split-guide:hover { opacity: 1; }
.cv-split-guide-hd { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 11px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)); }
.mud-icon-root.cv-split-guide-hd-ico { font-size: 14px !important; width: 14px; height: 14px;
    color: var(--mud-palette-primary); flex: 0 0 auto; }
.cv-split-guide-hd-tx { min-width: 0; }
.cv-split-guide-hd-t { font-size: 15px; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.2; }
.cv-split-guide-hd-s { font-size: 12.5px; font-weight: 500; color: var(--mud-palette-text-secondary); line-height: 1.35; }
.cv-split-guide-bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; }




.cv-msgrow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: start; gap: 11px; padding: 14px 11px;
    width: 100%; box-sizing: border-box;
    border: 1px solid transparent; border-radius: 10px; transition: background 120ms, border-color 120ms; }

.cv-msgrow::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px;
    background: var(--mud-palette-lines-default); opacity: .7; pointer-events: none; }
.cv-msgrow.is-active::after, .cv-msgrow.cv-changed::after { display: none; }
.cv-list-grid tbody tr:last-child .cv-msgrow::after { display: none; }

.cv-msgrow.is-active { background: color-mix(in srgb, var(--mud-palette-primary) 11%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 34%, transparent); box-shadow: none; }
.cv-msgrow.is-active .cv-mr-title { color: var(--mud-palette-primary); }

.cv-msgrow.is-pinned { }


.cv-mr-pin { position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px; cursor: pointer; background: var(--mud-palette-surface); color: var(--mud-palette-text-disabled);
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 1px var(--mud-palette-lines-default);
    transition: background 120ms, color 120ms; }
.cv-mr-pin:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }

.cv-mr-pin.on { opacity: .85; border-radius: 7px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface)); color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 32%, transparent); }
.cv-mr-pin.on:hover { opacity: 1; background: color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-surface)); }
.cv-mr-pin.on .mud-icon-root { transform: rotate(20deg); }
.mud-icon-root.cv-mr-pin-ico { font-size: 15px !important; width: 15px; height: 15px; }
@media (hover: none) {
    
    
    .cv-mr-pin::after { content: ""; position: absolute; inset: -7px; }
    .cv-accept-btn { min-height: 40px; }
}

@media (max-width: 600px) {
    .cv-mr-pin { width: 22px; height: 22px; border-radius: 6px; top: 5px; right: 5px; }
    .mud-icon-root.cv-mr-pin-ico { font-size: 13px !important; width: 13px; height: 13px; }
}



.cv-msgrow.is-child { margin-left: 40px; padding-left: 8px; width: auto; min-width: 0; }

.cv-mr-elbow { position: absolute; left: -11px; top: 0; bottom: 0; width: 12px; pointer-events: none; }

.cv-mr-elbow::after {
    content: ""; position: absolute; left: 0; top: -2px; width: 8px; height: 31px;
    border-left: 1.5px dotted var(--border-2);
    border-bottom: 1.5px dotted var(--border-2);
    border-bottom-left-radius: 6px;
}

.cv-msgrow.is-child-cont .cv-mr-elbow::before {
    content: ""; position: absolute; left: 0; top: -2px; bottom: 0;
    border-left: 1.5px dotted var(--border-2);
}

.cv-mr-rel {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 500; color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    padding: 1px 7px 1px 5px; border-radius: 999px;
}
.mud-icon-root.cv-mr-rel-ico { font-size: 12px !important; width: 12px; height: 12px; }


.cv-accept-btn { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
    color: var(--mud-palette-primary-text, #fff); background: var(--mud-palette-primary);
    border: none; border-radius: 999px; padding: 4px 11px 4px 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: filter 120ms; }
.cv-accept-btn:hover { filter: brightness(1.06); }
.mud-icon-root.cv-accept-ico { font-size: 14px !important; width: 14px; height: 14px; color: inherit; }
.cv-accept-kb { margin: 2px 0 6px; align-self: flex-start; }   


.cv-accept-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 14px; margin: 0 0 10px; border-radius: var(--radius-card, 12px);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    font-size: 13.5px; color: var(--mud-palette-text-primary); }
.mud-icon-root.cv-accept-banner-ico { font-size: 20px !important; width: 20px; height: 20px; color: var(--mud-palette-primary); }
.cv-accept-banner b { color: var(--mud-palette-primary); }
.cv-accept-banner .cv-accept-banner-btn { margin-left: auto; }

.cv-msgrow.cv-changed { border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)); box-shadow: none; }

.cv-split--on .mud-table-row.cv-row-active > td,
.cv-split--on .mud-table-row.cv-row-changed > td { background: transparent !important; box-shadow: none !important; }

.cv-split--on .cv-list-grid tbody .mud-table-row:hover > td { background: transparent !important; }

.cv-split--on .cv-list-grid tbody .cv-msgrow:hover:not(.is-active):not(.cv-changed) {
    background: var(--mud-palette-action-default-hover); }

.cv-split--on .cv-list-grid .mud-table-body .mud-table-row.cv-row-child:hover {
    background-color: transparent !important; }

.cv-mode-conv .cv-list-grid thead { display: none; }
.cv-mode-conv .cv-list-grid .mud-table-cell { padding: 0; }

.cv-mode-conv .cv-list-grid .mud-table-row .mud-table-cell { border-bottom: none; }
.cv-mode-conv .cv-list-grid .mud-table-root { border: none; }

.cv-mode-conv .cv-row-mine td:first-child { box-shadow: none; }



.cv-msgrow-av { position: relative; flex: 0 0 auto; }
.mud-avatar.cv-msgrow-avatar { width: 40px !important; height: 40px !important; min-width: 40px !important; font-size: 14px !important; font-weight: 700; }
.cv-msgrow-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
    border: 1px solid var(--mud-palette-surface); background: var(--mud-palette-text-disabled); }

.cv-step-badge { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center; z-index: 1;
    font-size: 10px; font-weight: 800; line-height: 1; color: #fff; border-radius: 8px;
    background: var(--brand, #0A4174); border: 1.5px solid var(--mud-palette-surface); white-space: nowrap; }




.vm-col { flex: 1 1 0; min-width: 0; }
.vm-col-auto { flex: 0 0 auto; }


@keyframes vm-sheet-up { from { transform: translateY(26px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes vm-scrim-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 600px) {
    
    body .pa-3, body .pa-4, body .pa-5, body .pa-6, body .pa-7, body .pa-8, body .pa-9, body .pa-10, body .pa-12, body .pa-16 { padding: 10px !important; }
    body .px-3, body .px-4, body .px-5, body .px-6, body .px-7, body .px-8, body .px-9, body .px-10, body .px-12, body .px-16 { padding-left: 10px !important; padding-right: 10px !important; }
    body .py-3, body .py-4, body .py-5, body .py-6, body .py-7, body .py-8, body .py-9, body .py-10, body .py-12, body .py-16 { padding-top: 10px !important; padding-bottom: 10px !important; }
    body .pt-3, body .pt-4, body .pt-5, body .pt-6, body .pt-7, body .pt-8, body .pt-10, body .pt-12 { padding-top: 10px !important; }
    body .pb-3, body .pb-4, body .pb-5, body .pb-6, body .pb-7, body .pb-8, body .pb-10, body .pb-12 { padding-bottom: 10px !important; }
    body .pl-3, body .pl-4, body .pl-5, body .pl-6, body .pl-8, body .pl-10 { padding-left: 10px !important; }
    body .pr-3, body .pr-4, body .pr-5, body .pr-6, body .pr-8, body .pr-10 { padding-right: 10px !important; }
    body .ma-3, body .ma-4, body .ma-5, body .ma-6, body .ma-8, body .ma-10 { margin: 10px !important; }
    body .mx-3, body .mx-4, body .mx-5, body .mx-6, body .mx-8 { margin-left: 10px !important; margin-right: 10px !important; }
    body .my-3, body .my-4, body .my-5, body .my-6, body .my-8 { margin-top: 10px !important; margin-bottom: 10px !important; }
    body .mt-3, body .mt-4, body .mt-5, body .mt-6, body .mt-8, body .mt-10 { margin-top: 10px !important; }
    body .mb-3, body .mb-4, body .mb-5, body .mb-6, body .mb-8, body .mb-10 { margin-bottom: 10px !important; }
    body .ml-3, body .ml-4, body .ml-5, body .ml-6, body .ml-8 { margin-left: 10px !important; }
    body .mr-3, body .mr-4, body .mr-5, body .mr-6, body .mr-8 { margin-right: 10px !important; }
    body .gap-3, body .gap-4, body .gap-5, body .gap-6, body .gap-8 { gap: 10px !important; }

    
    .mud-container { padding-left: 10px !important; padding-right: 10px !important; }
    .mud-dialog .mud-dialog-content { padding: 10px !important; }
    .mud-card-content { padding: 10px !important; }

    
    .mud-grid-spacing-xs-3, .mud-grid-spacing-xs-4, .mud-grid-spacing-xs-5, .mud-grid-spacing-xs-6, .mud-grid-spacing-xs-8 { margin: -8px !important; }
    .mud-grid-spacing-xs-3 > .mud-grid-item, .mud-grid-spacing-xs-4 > .mud-grid-item, .mud-grid-spacing-xs-5 > .mud-grid-item,
    .mud-grid-spacing-xs-6 > .mud-grid-item, .mud-grid-spacing-xs-8 > .mud-grid-item { padding: 8px !important; }

    
    body .mud-overlay { animation: vm-scrim-fade .22s ease !important; }
    body .mud-dialog { animation: vm-sheet-up .3s cubic-bezier(.16, 1, .3, 1) !important; }

    
    body .crm-user-pop { left: auto !important; right: 8px !important; max-width: calc(100vw - 16px); }
    body .crm-user-pop .mud-list { max-width: 100%; }

    
    body .mud-input-slot,
    body .mud-input input,
    body .mud-input textarea,
    body input:not([type]),
    body input[type="text"], body input[type="search"], body input[type="email"],
    body input[type="url"], body input[type="tel"], body input[type="password"],
    body input[type="number"], body input[type="date"], body input[type="time"],
    body input[type="datetime-local"], body input[type="month"], body input[type="week"],
    body textarea, body select { font-size: 16px !important; }

    
    body .mud-dialog.tss-dlg-actions .mud-dialog-actions,
    body .mud-dialog.tss-edit-dialog .mud-dialog-actions { flex-wrap: wrap; gap: 6px; }
    body .mud-dialog.tss-dlg-actions .mud-dialog-actions .mud-button-root,
    body .mud-dialog.tss-edit-dialog .mud-dialog-actions .mud-button-root { white-space: nowrap; }
    .tss-dlg-foothint, .tss-edit-foothint { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    body .mud-overlay, body .mud-dialog { animation: none !important; }
}


#vm-boot {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(160deg, var(--bg-body, #f4f6f8), var(--bg-surface, #ffffff));
    color: var(--fg-1, #0f172a); text-align: center;
    
    opacity: 0; visibility: hidden; transition: opacity .35s ease;
}
#vm-boot.vm-boot--visible { opacity: 1; visibility: visible; }

#vm-boot.vm-boot--done { opacity: 0; pointer-events: none; }

@media (display-mode: standalone) {
    #vm-boot { opacity: 1; visibility: visible; }
}
.vm-boot-center { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 20px; }

.vm-boot-logo { width: 120px; height: 120px; object-fit: contain; margin-bottom: 24px;
    border-radius: 26px; background: #fff; box-shadow: 0 10px 32px -12px rgba(8, 24, 40, .25); }
.vm-boot-name { font-size: 36px; font-weight: 800; color: var(--brand, #0a4174); letter-spacing: .5px; line-height: 1.15; }
.vm-boot-sub  { font-size: 20px; font-weight: 600; color: var(--fg-2, #334155); letter-spacing: 7px; margin-left: 7px; }
.vm-boot-desc { font-size: 14.5px; color: var(--fg-3, #64748b); margin-top: 8px; }
.vm-boot-foot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 20px calc(34px + env(safe-area-inset-bottom)); }

.vm-boot-dots { display: flex; gap: 10px; height: 18px; align-items: flex-end; }
.vm-boot-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand, #0a4174); opacity: .3; animation: vm-boot-dot 1.05s infinite ease-in-out; }
.vm-boot-dots i:nth-child(2) { animation-delay: .17s; }
.vm-boot-dots i:nth-child(3) { animation-delay: .34s; }
@keyframes vm-boot-dot {
    0%, 100% { opacity: .3;  transform: translateY(0) scale(.85); }
    35%      { opacity: 1;   transform: translateY(-8px) scale(1.08); }
    70%      { opacity: .45; transform: translateY(0) scale(.92); }
}
.vm-boot-status { font-size: 15px; color: var(--fg-2, #334155); }
.vm-boot-err { display: none; flex-direction: column; align-items: center; gap: 6px; }
#vm-boot.vm-boot--error .vm-boot-dots,
#vm-boot.vm-boot--error .vm-boot-status { display: none; }
#vm-boot.vm-boot--error .vm-boot-err { display: flex; }
.vm-boot-err-t { font-size: 16.5px; font-weight: 700; color: var(--error-500, #dc2626); }
.vm-boot-err-d { font-size: 13.5px; color: var(--fg-3, #64748b); max-width: 360px; }

.vm-boot-wait { display: none; flex-direction: column; align-items: center; gap: 6px; }
.vm-boot-btn {
    margin-top: 10px; padding: 10px 26px; border: 0; border-radius: 12px; cursor: pointer;
    
    
    background: rgba(10, 65, 116, .10);
    background: color-mix(in srgb, var(--brand, #0a4174) 10%, transparent);
    color: var(--brand, #0a4174); font-size: 14.5px; font-weight: 700; font-family: inherit;
    
    text-transform: none; letter-spacing: normal;
    transition: background-color .15s ease;
}
.vm-boot-btn:hover  { background: rgba(10, 65, 116, .18); background: color-mix(in srgb, var(--brand, #0a4174) 18%, transparent); }
.vm-boot-btn:active { background: rgba(10, 65, 116, .26); background: color-mix(in srgb, var(--brand, #0a4174) 26%, transparent); }


#vm-boot.vm-boot--deadscript #vm-boot-retry { display: none; }
.vm-boot-diaglink { margin-top: 4px; padding: 4px 8px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; color: var(--fg-3, #64748b); text-decoration: underline; }
.vm-boot-diag { margin: 6px 0 0; max-width: min(92vw, 460px); max-height: 34vh; overflow: auto;
    padding: 8px 10px; border-radius: 8px; background: var(--bg-body, #f4f6f8);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
    line-height: 1.5; color: var(--fg-3, #64748b); text-align: left; white-space: pre-wrap; word-break: break-word; }


#components-reconnect-modal {
    display: none; position: fixed; inset: 0; z-index: 4100;
    flex-direction: column; align-items: center; text-align: center;
    background: linear-gradient(160deg, var(--bg-body, #f4f6f8), var(--bg-surface, #ffffff));
    color: var(--fg-1, #0f172a);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
#components-reconnect-modal.components-reconnect-failed:not(.vm-net-dead) .vm-boot-wait,
#components-reconnect-modal.components-reconnect-rejected:not(.vm-net-dead) .vm-boot-wait { display: flex; }
#components-reconnect-modal.vm-net-dead .vm-boot-dots,
#components-reconnect-modal.vm-net-dead .vm-boot-status,
#components-reconnect-modal.vm-net-dead .vm-boot-wait { display: none; }
#components-reconnect-modal.vm-net-dead .vm-boot-err { display: flex; }


@keyframes vm-boot-dot-fade { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .vm-boot-dots i { animation: vm-boot-dot-fade 1.4s infinite ease-in-out !important; transform: none !important; }
    #vm-boot { transition: none; }
}

.cv-step-badge-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }



.cv-mr-main { flex: 1 1 auto; min-width: calc(100vw - 100px); display: flex; flex-direction: column; gap: 4px; }
.cv-msgrow.is-child .cv-mr-main { min-width: calc(100vw - 140px); }   

.cv-split--on .cv-mr-main,
.cv-split--on .cv-msgrow.is-child .cv-mr-main { min-width: 0; }


.cv-mr-r1 { display: flex; align-items: baseline; gap: 8px; }
.cv-mr-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; color: var(--mud-palette-text-primary);
    line-height: 1.35; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow-wrap: anywhere; }
.cv-msgrow.is-unread .cv-mr-title { font-weight: 700; }

.cv-mr-title-ctx { font-weight: 400; color: var(--mud-palette-text-secondary); }
.cv-mr-time { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
    font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mud-icon-root.cv-mr-time-ico { font-size: 13px !important; width: 13px; height: 13px; }


.cv-mr-r2 { display: flex; align-items: center; gap: 6px; min-width: 0; }

.cv-mr-owner { flex: 0 0 auto; max-width: 46%; font-size: 13px; font-weight: 400; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-mr-owner-role { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cv-mr-by { color: var(--mud-palette-text-secondary); font-weight: 400; margin-right: 3px; }

.cv-mr-when { flex: 0 0 auto; font-size: 12px; font-weight: 400; color: var(--mud-palette-text-disabled); white-space: nowrap; }
.cv-mr-when::before { content: "·"; margin-right: 6px; color: var(--mud-palette-text-disabled); }

.cv-mr-act, .cv-row-by-when + .cv-mr-act { flex: 0 0 auto; font-size: 12px; font-weight: 400;
    color: var(--mud-palette-text-secondary); white-space: nowrap; }
.cv-mr-act::before { content: "·"; margin-right: 6px; color: var(--mud-palette-text-disabled); }

.cv-row-childdim td { opacity: .9; transition: opacity 120ms; }   
.cv-row-childdim:hover td { opacity: 1; }   
.cv-row-childmine .cv-mr-title { font-weight: 700; }
.cv-mr-code { flex: 0 0 auto; margin-left: auto; font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: 12px; font-weight: 500; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.cv-msg-sop { flex: 0 0 auto; font-size: 11px; font-weight: 500; letter-spacing: .03em; color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent); padding: 1px 7px; border-radius: 999px; line-height: 1.5; }

.cv-role-badge { flex: 0 0 auto; display: inline-flex; align-items: center; font-size: 11px; font-weight: 500;
    letter-spacing: .01em; padding: 1px 8px; border-radius: 999px; line-height: 1.5; white-space: nowrap; }
.cv-role-badge.r-owner   { color: var(--mud-palette-primary);   background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent); }
.cv-role-badge.r-approve { color: var(--mud-palette-warning);   background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent); }
.cv-role-badge.r-creator { color: var(--mud-palette-info);      background: color-mix(in srgb, var(--mud-palette-info) 13%, transparent); }
.cv-role-badge.r-coop    { color: var(--mud-palette-tertiary);  background: color-mix(in srgb, var(--mud-palette-tertiary) 14%, transparent); }
.cv-role-badge.r-watch   { color: var(--mud-palette-text-secondary); background: var(--mud-palette-action-default-hover); }



.cv-mr-r3 { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 2px; }
.cv-mr-sp { flex: 1 1 auto; }

.cv-mr-accept { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.cv-mr-accept-cd { font-size: 11.5px; font-weight: 500; color: var(--mud-palette-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-mr-accept-cd.is-warn { color: var(--mud-palette-warning); font-weight: 600; }   
.cv-mr-accept-cd.is-over { color: var(--mud-palette-error); font-weight: 600; }      
.cv-mr-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 500;
    color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-mr-chip .mud-icon-root.cv-foot-ico { color: var(--mud-palette-text-disabled); }

.cv-mr-tag { flex: 0 0 auto; font-size: 10.5px; padding: 2px 7px; white-space: nowrap; }


.cv-head-actions-pop.mud-popover,
.cv-rowctx-pop.mud-popover {
    z-index: 1310 !important;
}


.cv-dlg-title { display: flex; align-items: center; gap: 8px; min-width: 0;
    font-size: 15px; font-weight: 600; color: var(--mud-palette-text-primary); }
.cv-dlg-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mud-icon-root.cv-dlg-title-ico { flex: 0 0 auto; font-size: 18px !important; width: 18px; height: 18px;
    color: var(--mud-palette-text-secondary); }

.cv-rowctx { min-width: 208px; }
.cv-rowctx .mud-menu-item { font-size: 0.925rem; }
.cv-rowctx .mud-menu-item .mud-icon-root { font-size: 1.15em; }

.cv-ctx-anchor { position: absolute; width: 0; height: 0; pointer-events: none; }



.mud-dialog.doc-viewer-dialog > .mud-dialog-title { display: none; }

.cv-rs-wrap {
    position: relative;
    
    touch-action: pan-y;
    
}


.cv-rs-wrap::after {
    content: "Tùy chọn";
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%) scale(var(--rs-sc, .75));
    opacity: var(--rs-op, 0);
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;   
}


.cv-rowctx-head { display: none; }


.cv-rowctx-scrim {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, .42);
    animation: cv-rowctx-dim .22s ease both;
    touch-action: none;   
}

@media (max-width: 720px) {
    
    .cv-rowctx-pop.mud-popover {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;      
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        z-index: 1401 !important;        
    }

    
    .cv-rowctx-pop .mud-list.cv-rowctx {
       ⚠ `.mud-list.` trong bộ chọn KHÔNG thừa (đo thật 22/08): MudBlazor có
       `.mud-popover .mud-list { max-height: inherit }` — CÙNG độ đặc hiệu (0,2,0) với bộ chọn
       một-lớp ở đây, mà `MudBlazor.min.css` nạp SAU `app.css` (App.razor dòng 469 vs 465) nên
       hoà là Mud THẮNG ⇒ `max-height` computed ra `none`, trần 78dvh dưới đây CHẾT. Menu ngắn
       không lộ; menu dài (có thêm «Giao phần việc»…) mọc quá đỉnh màn và KHÔNG cuộn được —
       mục trên cùng thành không bấm tới. Thêm `.mud-list` đưa lên (0,3,0) là thắng, không cần
       `!important`. (Cùng họ bẫy với `reference_appcss_loadorder_mud_override`.)
        position: relative;
        top: var(--sheet-dy, 0px);
        transition: top .22s cubic-bezier(.32, .72, 0, 1);
        background: var(--mud-palette-surface);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 34px -8px rgba(15, 23, 42, .38);
        max-height: 78vh;
        max-height: 78dvh;
        overflow-y: auto;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }

    
    .cv-rowctx-head {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 24px 8px 10px 16px;      
        border-bottom: 1px solid var(--app-divider);
    }

    
    .cv-rowctx-head .app-sheet-grab {
        display: block;
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        width: 44px;
        height: 22px;
        touch-action: none;
        cursor: grab;
    }

    .cv-rowctx-head .app-sheet-grab::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 0;
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: var(--app-divider);
    }

    .cv-rowctx-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .cv-rowctx-close {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: var(--slate-100);
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .cv-rowctx-close:active { background: var(--app-divider); }
    .cv-rowctx-close svg { width: 17px; height: 17px; display: block; }

    
    .cv-rowctx-pop.mud-popover-open .cv-rowctx {
        animation: cv-rowctx-up .28s cubic-bezier(.16, 1, .3, 1);
    }

    
    .cv-rowctx-pop .mud-menu-item {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@keyframes cv-rowctx-up  { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes cv-rowctx-dim { from { opacity: 0; }        to { opacity: 1; } }


.cv-msgrow.is-ctx { background: var(--mud-palette-action-default-hover); }
.cv-mr-prog { flex: 0 0 auto; font-size: 12.5px; font-weight: 500; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }

.mud-icon-root.cv-mr-prio { flex: 0 0 auto; font-size: 15px !important; width: 15px; height: 15px; }
.cv-mr-prio.p-urgent { color: var(--mud-palette-error); }
.cv-mr-prio.p-high   { color: var(--mud-palette-warning); }
.cv-mr-prio.p-medium { color: var(--mud-palette-text-disabled); }
.cv-mr-prio.p-low    { color: var(--mud-palette-text-disabled); }


.cv-mr-chat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 8px 0 6px;
    border-radius: 999px; line-height: 1; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
    background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary);
    border: 0; cursor: pointer; font-family: inherit; touch-action: manipulation; transition: background .12s, box-shadow .12s; }
.cv-mr-chat .mud-icon-root.cv-foot-ico { color: inherit; }
.cv-mr-chat.unread { background: var(--mud-palette-error); color: #fff; }
.cv-mr-chat:hover { background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-action-default-hover));
    color: var(--mud-palette-primary); box-shadow: 0 1px 4px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent); }
.cv-mr-chat.unread:hover { background: color-mix(in srgb, var(--mud-palette-error) 88%, #000); color: #fff;
    box-shadow: 0 1px 5px color-mix(in srgb, var(--mud-palette-error) 40%, transparent); }
.cv-mr-chat:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }

.cv-mr-mention { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
    border-radius: 999px; line-height: 1; font-size: 12px; font-weight: 600;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-primary); }


.cv-msg-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cv-msg-st .d { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.cv-msg-st.s-done     { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); color: var(--mud-palette-success); }
.cv-msgrow-dot.s-done,     .cv-msg-st.s-done .d     { background: var(--mud-palette-success); }
.cv-msg-st.s-doing    { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.cv-msgrow-dot.s-doing,    .cv-msg-st.s-doing .d    { background: var(--mud-palette-primary); }
.cv-msg-st.s-new, .cv-msg-st.s-pending { background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent); color: var(--mud-palette-info); }
.cv-msgrow-dot.s-new, .cv-msgrow-dot.s-pending, .cv-msg-st.s-new .d, .cv-msg-st.s-pending .d { background: var(--mud-palette-info); }
.cv-msg-st.s-waiting, .cv-msg-st.s-paused { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); color: var(--mud-palette-warning); }
.cv-msgrow-dot.s-waiting, .cv-msgrow-dot.s-paused, .cv-msg-st.s-waiting .d, .cv-msg-st.s-paused .d { background: var(--mud-palette-warning); }
.cv-msg-st.s-approval { background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent); color: var(--mud-palette-secondary); }
.cv-msgrow-dot.s-approval, .cv-msg-st.s-approval .d { background: var(--mud-palette-secondary); }
.cv-msg-st.s-cancelled { background: color-mix(in srgb, var(--mud-palette-text-disabled) 18%, transparent); color: var(--mud-palette-text-secondary); }
.cv-msgrow-dot.s-cancelled, .cv-msg-st.s-cancelled .d { background: var(--mud-palette-text-disabled); }
.cv-msg-st.s-rejected { background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent); color: var(--mud-palette-error); }   
.cv-msgrow-dot.s-rejected, .cv-msg-st.s-rejected .d { background: var(--mud-palette-error); }
.cv-msg-st.s-overdue  { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); color: var(--mud-palette-error); }
.cv-msgrow-dot.s-overdue,  .cv-msg-st.s-overdue .d  { background: var(--mud-palette-error); }

.cv-msg-st.cv-msg-st--soon    { background: color-mix(in srgb, var(--mud-palette-warning) 20%, transparent); color: var(--mud-palette-warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-warning) 45%, transparent); }
.cv-msg-st.cv-msg-st--soon .d { background: var(--mud-palette-warning); }

@media (max-width: 1024px) {
    .cv-mr-owner { max-width: 40%; }
}

@media (max-width: 520px) {
    .cv-msgrow { gap: 10px; padding: 14px 6px; }
    .mud-avatar.cv-msgrow-avatar { width: 36px !important; height: 36px !important; min-width: 36px !important; font-size: 13px !important; }
    .cv-mr-title { font-size: 15px; }
    .cv-mr-code { font-size: 12px; }
    .cv-msg-sop { font-size: 11.5px; }
}


.cv-foldrow { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 4px; padding-left: 34px; }
.cv-fold-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.mud-icon-root.cv-fold-ico { font-size: 14px !important; width: 14px; height: 14px; color: var(--mud-palette-text-disabled); }
.cv-fold-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cv-fold-pct { display: inline-flex; align-items: center; }


@media (max-width: 520px) {
    .cv-foldrow { padding-left: 0; }
}

.aicfg-modal.mud-dialog { border-radius: 16px; }
.aicfg-modal .mud-dialog-title { padding: 18px 24px 12px; }
.aicfg-modal .mud-dialog-content { padding: 6px 24px 8px; overflow-y: auto; max-height: 78vh; }
.aicfg-modal .mud-dialog-actions { padding: 16px 24px; margin: 0; border-top: 1px solid var(--border-1); gap: 10px; }


.aicfg-modal .aic-mhead { display: flex; align-items: center; gap: 12px; }
.aicfg-modal .aic-mhead h3 { margin: 0; flex: 1; font-size: 18px; font-weight: 700; color: var(--fg-1); }
.aicfg-modal .aic-mclose {
    width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent;
    color: var(--fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.aicfg-modal .aic-mclose:hover { background: var(--slate-100); color: var(--fg-1); }
.aicfg-modal .aic-mclose .mud-icon-root { font-size: 18px; }


.aicfg-modal .aic-mbody { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.aicfg-modal .aic-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .aicfg-modal .aic-row { grid-template-columns: 1fr; } }


.aicfg-modal .aic-field { position: relative; display: block; }
.aicfg-modal .aic-field-lbl {
    position: absolute; top: -8px; left: 13px; z-index: 1;
    background: var(--bg-surface); padding: 0 6px;
    font-size: 12px; font-weight: 500; color: var(--fg-3); line-height: 1; pointer-events: none;
}
.aicfg-modal .aic-field-lbl i { color: var(--error-500); font-style: normal; margin-left: 1px; }
.aicfg-modal .aic-control {
    width: 100%; box-sizing: border-box; height: 52px;
    border: 1.5px solid var(--border-2); border-radius: 12px;
    padding: 0 16px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--fg-1);
    background: var(--bg-surface); transition: border-color 120ms, box-shadow 120ms;
}
.aicfg-modal .aic-control::placeholder { color: var(--fg-4); font-weight: 500; }
.aicfg-modal .aic-control:focus { outline: none; border-color: var(--brand); box-shadow: var(--app-focus-ring); }
.aicfg-modal select.aic-control { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; }
.aicfg-modal textarea.aic-control { height: auto; min-height: 92px; padding: 14px 16px; line-height: 1.55; font-weight: 500; resize: vertical; }
.aicfg-modal .aic-field-chev {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--fg-3); pointer-events: none; display: inline-flex;
}
.aicfg-modal .aic-field-chev .mud-icon-root { font-size: 18px; }
.aicfg-modal .aic-hint { font-size: 12.5px; color: var(--fg-3); margin-top: 7px; line-height: 1.5; }
.aicfg-modal .aic-hint code { font-family: var(--font-mono); }


.aicfg-modal .aic-toggle-row { display: flex; align-items: center; gap: 13px; cursor: pointer; user-select: none; }
.aicfg-modal .aic-switch {
    flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px;
    background: var(--slate-300); position: relative; transition: background 160ms;
}
.aicfg-modal .aic-switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: left 160ms;
}
.aicfg-modal .aic-switch.on { background: var(--success-500); }
.aicfg-modal .aic-switch.on::after { left: 23px; }
.aicfg-modal .aic-toggle-label { font-size: 15px; font-weight: 600; color: var(--fg-1); }


.aicfg-modal .aic-merr {
    display: flex; align-items: flex-start; gap: 8px;
    border: 1px solid var(--error-500); background: color-mix(in srgb, var(--error-500) 8%, transparent);
    color: var(--error-500); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
}
.aicfg-modal .aic-merr .mud-icon-root { font-size: 18px; flex-shrink: 0; margin-top: 1px; }


.aicfg-modal .aic-btn {
    height: 44px; padding: 0 22px; border-radius: 11px; border: 1.5px solid transparent;
    font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; transition: background 120ms, border-color 120ms;
}
.aicfg-modal .aic-btn-ghost { background: var(--bg-surface); border-color: var(--border-2); color: var(--fg-2); }
.aicfg-modal .aic-btn-ghost:hover { background: var(--slate-100); }
.aicfg-modal .aic-btn-primary {
    background: var(--brand); color: var(--brand-on);
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--brand) 25%, transparent);
}
.aicfg-modal .aic-btn-primary:hover { background: var(--brand-hover); }
.aicfg-modal .aic-btn-primary:disabled { background: var(--slate-200); color: var(--fg-4); box-shadow: none; cursor: not-allowed; }


.aicfg-modal .aic-num-wrap { position: relative; }
.aicfg-modal .aic-num-wrap .aic-control { padding-right: 42px; }
.aicfg-modal .aic-steppers {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 2px;
}
.aicfg-modal .aic-step {
    width: 26px; height: 21px; border: 1px solid var(--border-1); border-radius: 6px;
    background: var(--slate-50); color: var(--fg-2); cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.aicfg-modal .aic-step:hover { background: var(--slate-100); color: var(--brand); }
.aicfg-modal .aic-step .mud-icon-root { font-size: 14px; }

.aicfg-modal .aic-key-row { display: flex; align-items: stretch; gap: 12px; }
.aicfg-modal .aic-key-field { position: relative; flex: 1; min-width: 0; }
.aicfg-modal .aic-key-field .aic-control { padding-right: 46px; letter-spacing: .04em; }
.aicfg-modal .aic-eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent;
    color: var(--fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.aicfg-modal .aic-eye:hover { background: var(--slate-100); color: var(--fg-1); }
.aicfg-modal .aic-eye .mud-icon-root { font-size: 18px; }
.aicfg-modal .aic-test-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    height: 52px; padding: 0 18px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 14.5px; font-weight: 600;
    background: var(--bg-surface); color: var(--brand); border: 1.5px solid var(--info-500);
    transition: background 120ms;
}
.aicfg-modal .aic-test-btn:hover { background: color-mix(in srgb, var(--info-500) 10%, var(--bg-surface)); }
.aicfg-modal .aic-test-btn:disabled { opacity: .7; pointer-events: none; }
.aicfg-modal .aic-test-btn .mud-icon-root { font-size: 18px; }

.aicfg-modal .aic-lasttest { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--fg-2); flex-wrap: wrap; }
.aicfg-modal .aic-test-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 7px;
}
.aicfg-modal .aic-test-badge.ok   { background: color-mix(in srgb, var(--success-500) 14%, transparent); color: var(--success-500); }
.aicfg-modal .aic-test-badge.fail { background: color-mix(in srgb, var(--error-500) 12%, transparent); color: var(--error-500); }
.aicfg-modal .aic-test-badge.none { background: var(--slate-100); color: var(--fg-3); }
.aicfg-modal .aic-test-badge code { font-family: var(--font-mono); font-weight: 600; }


.aicfg-modal .aic-modelpick { background: var(--slate-25); border: 1px solid var(--border-1); border-radius: 12px; padding: 14px; }


.aicfg-modal .aic-mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .aicfg-modal .aic-mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .aicfg-modal .aic-mp-grid { grid-template-columns: 1fr; } }
.aicfg-modal .aic-mp-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 12px; border: 1px solid var(--border-1); border-radius: 11px; background: var(--bg-surface);
    cursor: pointer; transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.aicfg-modal .aic-mp-card:hover { border-color: var(--brand); box-shadow: var(--shadow-xs); }
.aicfg-modal .aic-mp-card.on { border-color: var(--brand); background: var(--brand-soft); }
.aicfg-modal .aic-mp-check {
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
    border: 1.5px solid var(--border-2); background: var(--bg-surface);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 120ms, border-color 120ms;
}
.aicfg-modal .aic-mp-card.on .aic-mp-check { background: var(--brand); border-color: var(--brand); }
.aicfg-modal .aic-mp-check .mud-icon-root { font-size: 15px; color: var(--brand-on); }
.aicfg-modal .aic-mp-body { min-width: 0; flex: 1; }
.aicfg-modal .aic-mp-name {
    font-family: var(--font-mono); font-size: 13px; font-weight: 700;
    color: var(--fg-1); line-height: 1.3; word-break: break-all;
}
.aicfg-modal .aic-mp-tag {
    display: inline-block; margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
    padding: 1px 7px; border-radius: 5px; background: var(--slate-100); color: var(--fg-3);
}

.aicfg-modal .aic-mp-price { font-size: 11.5px; font-weight: 700; color: var(--fg-1); margin-top: 6px; line-height: 1.4; }
.aicfg-modal .aic-mp-ctx   { font-size: 11.5px; color: var(--fg-3); margin-top: 5px; line-height: 1.4; }
.aicfg-modal .aic-mp-note  { font-size: 11.5px; color: var(--fg-3); margin-top: 5px; line-height: 1.45; }


.aicfg-modal .aic-mhead-ic {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand);
}
.aicfg-modal .aic-mhead-ic .mud-icon-root { font-size: 22px; }
.aicfg-modal .aic-mhead-txt { flex: 1; min-width: 0; }
.aicfg-modal .aic-mhead-sub { font-size: 13px; font-weight: 400; color: var(--fg-3); margin-top: 3px; line-height: 1.5; }


.aicfg-modal .aic-skill { border: 1px solid var(--border-1); border-radius: 14px; background: var(--slate-25); padding: 16px; }
.aicfg-modal .aic-skill-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--fg-3); text-transform: uppercase;
}
.aicfg-modal .aic-skill-head .mud-icon-root { font-size: 16px; color: var(--brand); }
.aicfg-modal .aic-skill-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.aicfg-modal .aic-skill-cat {
    font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
    border: 1.3px solid var(--border-2); background: var(--bg-surface); color: var(--fg-2);
    cursor: pointer; transition: border-color 120ms, color 120ms, background 120ms;
}
.aicfg-modal .aic-skill-cat:hover { border-color: var(--brand); color: var(--brand); }
.aicfg-modal .aic-skill-cat.active { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.aicfg-modal .aic-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .aicfg-modal .aic-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .aicfg-modal .aic-skill-grid { grid-template-columns: 1fr; } }
.aicfg-modal .aic-skill-card {
    display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%;
    padding: 12px; border: 1px solid var(--border-1); border-radius: 11px; background: var(--bg-surface);
    cursor: pointer; transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.aicfg-modal .aic-skill-card:hover { border-color: var(--brand); box-shadow: var(--shadow-xs); }
.aicfg-modal .aic-skill-card.active { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.aicfg-modal .aic-skill-ic {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--slate-100); color: var(--brand);
}
.aicfg-modal .aic-skill-card.active .aic-skill-ic { background: var(--bg-surface); }
.aicfg-modal .aic-skill-ic .mud-icon-root { font-size: 19px; }
.aicfg-modal .aic-skill-txt { min-width: 0; }
.aicfg-modal .aic-skill-name { font-size: 13.5px; font-weight: 700; color: var(--fg-1); line-height: 1.25; }
.aicfg-modal .aic-skill-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); margin-top: 3px; }
.aicfg-modal .aic-skill-foot { font-size: 12.5px; color: var(--fg-3); margin-top: 12px; line-height: 1.5; }


.aicfg-modal .aic-adv-toggle {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--brand);
    background: none; border: none; cursor: pointer; padding: 4px 0;
}
.aicfg-modal .aic-adv-toggle .mud-icon-root { font-size: 18px; }
.aicfg-modal .aic-adv-body {
    display: flex; flex-direction: column; gap: 18px;
    margin-top: 2px; padding-top: 16px; border-top: 1px solid var(--border-1);
}


.mud-dialog.cv-stats-dialog { max-width: min(1080px, calc(100vw - 32px)); }


.cv-stats-head { display: flex; align-items: center; gap: 10px; }
.cv-stats-head-ic {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}
.cv-stats-head-ic svg { width: 17px; height: 17px; }
.cv-stats-title { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--mud-palette-text-primary); }
.cv-stats-sub { font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-top: 3px; }
.cv-stats-sub b { color: var(--mud-palette-text-primary); font-weight: 600; }

.cv-stats-loading { display: flex; align-items: center; gap: 10px; padding: 28px 8px; color: var(--mud-palette-text-secondary); }

.cv-stats-body { display: flex; flex-direction: column; gap: 16px; }


.cv-stats-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cv-stats-flabel {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-secondary);
}
.cv-stats-flabel svg { width: 14px; height: 14px; }
.cv-stats-sel { min-width: 150px; max-width: 200px; }
.cv-stats-clear { color: var(--mud-palette-text-secondary); white-space: nowrap; }

.cv-stats-empty {
    padding: 40px 18px; text-align: center; font-size: 13.5px; color: var(--mud-palette-text-disabled);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px;
}


.cv-stats-grid5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cv-stats-mini {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface);
}
.cv-stats-mini-ic {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.cv-stats-mini-ic svg { width: 16px; height: 16px; }
.cv-stats-mini-ic.tone-total    { background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);  color: var(--mud-palette-text-secondary); }
.cv-stats-mini-ic.tone-doing    { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);     color: var(--mud-palette-primary); }
.cv-stats-mini-ic.tone-overdue  { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);       color: var(--mud-palette-error); }
.cv-stats-mini-ic.tone-approval { background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);   color: var(--mud-palette-secondary); }
.cv-stats-mini-ic.tone-done     { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);     color: var(--mud-palette-success); }
.cv-stats-mini-txt { min-width: 0; }
.cv-stats-mini-val { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.cv-stats-mini-lbl { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cv-c-doing    { color: var(--mud-palette-primary); }
.cv-c-overdue  { color: var(--mud-palette-error); }
.cv-c-approval { color: var(--mud-palette-secondary); }
.cv-c-done     { color: var(--mud-palette-success); }
.cv-c-brand    { color: var(--mud-palette-primary); }


.cv-stats-prog {
    display: flex; flex-wrap: wrap; gap: 28px; padding: 16px 18px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface);
}
.cv-stats-prog-item { flex: 1 1 200px; min-width: 0; }
.cv-stats-prog-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.cv-stats-prog-lbl { font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.cv-stats-prog-val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cv-stats-prog-track { display: block; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent); }
.cv-stats-prog-fill { display: block; height: 100%; border-radius: 999px; }
.cv-bg-done  { background: var(--mud-palette-success); }
.cv-bg-brand { background: var(--mud-palette-primary); }


.cv-stats-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.cv-stats-sec {
    display: flex; flex-direction: column; gap: 13px; padding: 18px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface);
}
.cv-stats-sec-head { display: flex; align-items: center; gap: 8px; }
.cv-stats-sec-ic { color: var(--mud-palette-primary); display: inline-flex; }
.cv-stats-sec-ic svg { width: 15px; height: 15px; }
.cv-stats-sec-title { font-size: 13.5px; font-weight: 700; color: var(--mud-palette-text-primary); }
.cv-stats-sec-rows { display: flex; flex-direction: column; gap: 9px; }
.cv-stats-sec-empty { font-size: 12.5px; color: var(--mud-palette-text-disabled); padding: 6px 0; }

.cv-stats-bar { display: flex; align-items: center; gap: 12px; }
.cv-stats-bar-lbl { width: 124px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.cv-stats-bar-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.cv-stats-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-stats-bar-track { flex: 1; height: 9px; border-radius: 999px; overflow: hidden; min-width: 40px; background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent); }
.cv-stats-bar-fill { display: block; height: 100%; border-radius: 999px; }
.cv-stats-bar-num { width: 76px; flex-shrink: 0; text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.cv-stats-bar-pct { color: var(--mud-palette-text-disabled); font-weight: 600; }

@media (max-width: 520px) {
    .cv-stats-sel { min-width: 0; max-width: none; flex: 1 1 140px; }
    .cv-stats-bar-lbl { width: 96px; }
    .cv-stats-bar-num { width: 64px; }
}


.cv-tag-chip {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    border-radius: 999px; padding: 5px 8px 5px 11px;
}
.cv-tag-chip:hover { background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent); }
.cv-tag-chip .cv-tag-chip-x { font-size: 13px !important; opacity: .7; }
.cv-tag-chip:hover .cv-tag-chip-x { opacity: 1; }

.cv-pending-top.on { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }


.cv-dh-org { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cv-org-co {
    display: inline-flex; align-items: center; gap: 5px; max-width: 240px;
    font-size: 11.5px; font-weight: 600; color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px; padding: 1px 9px 1px 4px;
}
.cv-org-co > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-org-co-dot {
    width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: var(--mud-palette-primary-text); background: var(--mud-palette-primary);
}
.cv-org-br { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.mud-icon-root.cv-org-br-ico { font-size: 12px !important; width: 12px; height: 12px; }
.cv-org-cross {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    border-radius: 999px; padding: 1px 8px 1px 6px;
}
.mud-icon-root.cv-org-cross-ico { font-size: 12px !important; width: 12px; height: 12px; }


.cv-reason-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; color: var(--mud-palette-text-primary); }
.cv-reason-banner .mud-icon-root.cv-reason-ico { font-size: 18px !important; width: 18px; height: 18px; flex-shrink: 0; }
.cv-reason-banner.is-paused    { background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 35%, transparent); }
.cv-reason-banner.is-paused    .cv-reason-ico { color: var(--mud-palette-warning); }
.cv-reason-banner.is-waiting   { background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mud-palette-info) 35%, transparent); }
.cv-reason-banner.is-waiting   .cv-reason-ico { color: var(--mud-palette-info); }
.cv-reason-banner.is-cancelled { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, transparent); }
.cv-reason-banner.is-cancelled .cv-reason-ico { color: var(--mud-palette-error); }

.cv-reason-banner.is-rejected  { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, transparent); }
.cv-reason-banner.is-rejected  .cv-reason-ico { color: var(--mud-palette-error); }
.cv-reason-text { margin-top: 2px; font-size: 12.5px; color: var(--mud-palette-text-secondary); line-height: 1.4; white-space: pre-wrap; word-break: break-word; font-weight: 500; }
.cv-reason-code { font-family: var(--mud-typography-default-family), monospace; font-weight: 700; }

.cv-state-alert .mud-alert-message { width: 100%; }
.cv-state-2row { display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; }
.cv-state-title { font-weight: 600; line-height: 1.35; }
.cv-state-line2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cv-state-line2 .cv-reason-code, .cv-state-line2 .cv-state-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cv-state-line2 .mud-button-root { flex-shrink: 0; margin: -2px -6px -2px 0; }

.cv-state-line2 .cv-blk-info { display: inline-flex; align-items: baseline; gap: 5px; overflow: hidden; min-width: 0; }
.cv-state-line2 .cv-blk-info .cv-reason-code { flex: 0 0 auto; }
.cv-state-line2 .cv-blk-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    color: var(--mud-palette-text-secondary); font-weight: 500; }
.cv-state-line2 .cv-msg-st { flex: 0 0 auto; }



.cv-pause { display: flex; flex-direction: column; gap: 9px; width: 100%; min-width: 0; margin-top: 10px;
    padding: 9px 11px; border-radius: 0 9px 9px 0;
    border-left: 3px solid var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 5%, transparent); }
.cv-pause-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cv-pause-t   { font-weight: 650; font-size: .845rem; line-height: 1.35; color: var(--mud-palette-warning); }


.cv-pause-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px;
    border-radius: 9px; border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface); }
.cv-pause-card--link { text-decoration: none; color: inherit; transition: border-color .12s, background-color .12s; }
.cv-pause-card--link:hover { border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)); }
.cv-pause-card--link:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.cv-pause-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cv-pause-card-h .cv-reason-code { color: var(--mud-palette-primary); font-size: .78rem; }
.cv-pause-card-t { font-size: .78rem; line-height: 1.35; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }

.cv-pause-card--note .cv-pause-card-t { white-space: pre-wrap; }
.cv-pause-note { font-size: .78rem; line-height: 1.45; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.cv-pause-when { color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.cv-pause-cap::first-letter { text-transform: uppercase; }


.cv-hoff { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; margin-top: 10px;
    padding: 9px 11px; border-radius: 0 9px 9px 0;
    border-left: 3px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent); }
.cv-hoff-t { font-weight: 650; font-size: .845rem; line-height: 1.35; color: var(--mud-palette-primary); }

.cv-hoff-card { padding: 8px 10px; border-radius: 9px; min-width: 0;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
    font-size: .78rem; line-height: 1.35; color: var(--mud-palette-text-primary);
    white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-hoff-note { font-size: .78rem; line-height: 1.45; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.cv-hoff-who { color: var(--mud-palette-text-primary); font-weight: 600; }
.cv-hoff-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }


.cv-mr-approved {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 260px;
    font-size: 11px; font-weight: 500; color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 32%, transparent);
    border-radius: 999px; padding: 1px 8px 1px 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mud-icon-root.cv-mr-approved-ico { font-size: 10px !important; width: 10px; height: 10px; flex: 0 0 auto; }


.cv-mr-hit {
    display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-top: 3px;
    padding-left: 8px; border-left: 2px solid color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
}
.cv-mr-hit-tag {
    flex: 0 0 auto; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    text-transform: none;
}
.cv-mr-hit-txt {
    flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}



.cv-resch-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); color: var(--mud-palette-warning); }
.cv-resch-ic .mud-icon-root { font-size: 16px; }
.cv-resch-body { display: flex; flex-direction: column; gap: 14px; }
.cv-resch-task { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; min-width: 0; }
.cv-resch-code { font-family: var(--mud-typography-default-family), monospace; font-size: 12px; font-weight: 700; color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.cv-resch-title { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-resch-dates { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cv-resch-date { text-align: center; }
.cv-resch-date-lbl { display: block; font-size: 11px; font-weight: 600; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.cv-resch-date-lbl.is-new { color: var(--mud-palette-primary); }
.cv-resch-date b { color: var(--mud-palette-text-primary); }
.cv-resch-date b.is-new { color: var(--mud-palette-primary); }
.cv-resch-date-sub { display: block; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.mud-icon-root.cv-resch-arrow { color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.cv-resch-warn { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 12.5px; color: var(--mud-palette-error); }
.cv-resch-warn .mud-icon-root.cv-resch-warn-ic { font-size: 14px !important; width: 14px; height: 14px; }
.cv-resch-note { font-size: 12.5px; color: var(--mud-palette-text-secondary); text-align: center; }


.cv-kanban-zone.cv-zone-can {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    outline: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    outline-offset: -2px; border-radius: 8px;
}

.cv-kanban-zone.cv-zone-nodrop { cursor: not-allowed; background: color-mix(in srgb, var(--mud-palette-text-disabled) 6%, transparent); border-radius: 8px; }


.cv-cal-lunar.cv-lunar-m1, .cv-calw-lunar.cv-lunar-m1 { color: var(--mud-palette-error) !important; font-weight: 700; }
.cv-cal-lunar.cv-lunar-ram, .cv-calw-lunar.cv-lunar-ram { color: var(--mud-palette-warning) !important; font-weight: 700; }


.recur-steps { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.recur-step { display: flex; align-items: center; gap: 7px; cursor: pointer; opacity: .5; transition: opacity .15s; padding: 2px 4px; border-radius: 8px; }
.recur-step:hover { opacity: .85; }
.recur-step.active, .recur-step.done { opacity: 1; }
.recur-step-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    font-size: 12px; font-weight: 700; border: 1.5px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary); background: var(--mud-palette-surface); flex: 0 0 auto; }
.recur-step.active .recur-step-no { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); background: var(--mud-palette-primary); }
.recur-step.done   .recur-step-no { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); background: transparent; }
.recur-step-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.recur-step-sep { flex: 0 0 16px; height: 1.5px; background: var(--mud-palette-lines-default); margin: 0 2px; }

.recur-pane { min-height: 132px; }

.vn-time24 { display: inline-flex; align-items: center; gap: 4px; }
.vn-time24-sel { height: 40px; padding: 0 6px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; font-size: 14px;
    color-scheme: light; cursor: pointer; }
.vn-time24-colon { opacity: .7; font-weight: 700; }

.vn-date--full { display: block; width: 100%; }


.cd-opt { display: flex; flex-direction: column; line-height: 1.35; }
.cd-opt-name { font-size: .875rem; color: var(--fg-1); }
.cd-opt-sub { font-size: .72rem; color: var(--mud-palette-text-secondary); }

.cvr-runs-head svg { width: 18px; height: 18px; flex: 0 0 auto; }
.recur-field-label { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); }

.recur-preview { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--mud-palette-lines-default); }
@media (max-width: 520px) { .recur-step-label { display: none; } .recur-step-sep { flex-basis: 10px; } }


.cv-sopick-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }


.cv-sopick-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); flex: 0 0 auto; }
.cv-sopick-head-top { display: flex; align-items: flex-start; gap: 10px; }
.cv-sopick-title-ic { flex: 0 0 auto; display: inline-flex; margin-top: 2px; }
.cv-sopick-title-ic .mud-icon-root { font-size: 22px; color: var(--brand); }
.cv-sopick-title { flex: 1 1 auto; min-width: 0; }
.cv-sopick-title-t { font-size: 15px; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.2; }
.cv-sopick-title-sub { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.cv-sopick-close { flex: 0 0 auto; margin: -4px -4px 0 0; }

.cv-sopick-filters { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; margin-top: 12px; align-items: flex-start; }
.cv-sopick-search { flex: 8 1 0; min-width: 160px; }
.cv-sopick-pb { flex: 4 1 0; min-width: 130px; }

.cv-sopick-pb-mobile { display: none !important; }
.cv-sopick-pb-btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; max-width: 172px;
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px; background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary); cursor: pointer; white-space: nowrap; }
.cv-sopick-pb-btn.on { border-color: var(--brand); color: var(--brand); }
.cv-sopick-pb-btn-ic { font-size: 13px; flex: 0 0 auto; }
.cv-sopick-pb-btn-lbl { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.cv-sopick-pb-btn-chev { font-size: 13px; flex: 0 0 auto; margin-left: -2px; }
@media (max-width: 520px) {
    .cv-sopick-search { flex: 1 1 auto; min-width: 0; }   
    .cv-sopick-pb { display: none !important; }             
    .cv-sopick-pb-mobile { display: inline-flex !important; flex: 0 0 auto; }
}


.cv-sopick-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cv-sopick-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 40px 16px; color: var(--mud-palette-text-secondary); text-align: center; }
.cv-sopick-empty .mud-icon-root { font-size: 34px; color: var(--mud-palette-lines-default); }


.cv-sopick-item { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; cursor: pointer;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px;
    padding: 10px 13px; transition: border-color .12s, box-shadow .12s; }
.cv-sopick-item:hover { border-color: var(--brand); box-shadow: 0 1px 6px rgba(0, 0, 0, .05); }
.cv-sopick-item:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.cv-sopick-item-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.cv-sopick-item-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 600;
    color: var(--brand); background: var(--brand-soft); padding: 1px 7px; border-radius: 999px; flex: 0 0 auto; white-space: nowrap; }

.cv-sopick-item-ver { font-size: 11px; font-weight: 600; color: var(--mud-palette-text-secondary); flex: 0 0 auto; white-space: nowrap;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); padding: 1px 7px; border-radius: 999px; }
.cv-sopick-item-steps { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.cv-sopick-item-steps .mud-icon-root { font-size: 13px; }
.cv-sopick-item-title { font-size: 13.5px; font-weight: 600; color: var(--mud-palette-text-primary); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

.cv-sopick-item-desc { font-size: 12px; color: var(--mud-palette-text-secondary); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

.cv-sopick-item-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.cv-sopick-item-pb { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cv-sopick-item-actions { flex: 0 0 auto; margin-left: auto; }
.cv-sopick-btn.mud-button-root { min-width: 94px; text-transform: none; padding: 3px 10px; }
.cv-sopick-btn .mud-button-label { font-size: 12.5px; }
.cv-sopick-btn .mud-icon-root { font-size: 15px; }

.cv-sopick-btn-apply.mud-button-root { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border: none; }
.cv-sopick-btn-apply.mud-button-root:hover { background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }


.cv-sopdetail-dialog .mud-dialog-title { padding: 0; margin: 0; }
.cv-sopdetail-dialog .mud-dialog-content { padding: 0; max-height: min(82vh, 820px); overflow-y: auto; overflow-x: hidden; }
.cv-sopdetail-bar { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cv-sopdetail-bar-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cv-sopdetail-bar-title { font-size: 15px; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.cv-sopdetail-bar-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 600;
    color: var(--brand); background: var(--brand-soft); padding: 1px 8px; border-radius: 999px; align-self: flex-start; }
.cv-sopdetail-bar-x.mud-button-root { flex: 0 0 auto; margin: -2px -4px 0 0; }

@media (max-width: 600px) {
    .cv-sopdetail-dialog {
        width: 100vw !important;  max-width: 100vw !important;
        height: 100vh !important; height: 100dvh !important;
        max-height: 100vh !important; max-height: 100dvh !important;
        margin: 0 !important; border-radius: 0 !important;
        display: flex; flex-direction: column;
    }
    .cv-sopdetail-dialog .mud-dialog-title { flex: 0 0 auto; }
    .cv-sopdetail-dialog .mud-dialog-content {
        flex: 1 1 auto; min-height: 0; max-height: none !important;   
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .cv-sopdetail-bar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
}


.cv-sopick-foot { flex: 0 0 auto; display: flex; align-items: center; padding: 10px 14px; border-top: 1px solid var(--mud-palette-lines-default); }
.cv-sopick-foot-count { font-size: 12px; color: var(--mud-palette-text-secondary); }


.cv-kichban-drawer .mud-drawer-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cv-kichban-root { height: 100%; min-height: 0; display: flex; flex-direction: column; }


.cv-kichban-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default); flex: 0 0 auto; }
.cv-kichban-title-ic { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: var(--brand); }
.cv-kichban-title-ic svg { width: 18px; height: 18px; }
.cv-kichban-title { flex: 1 1 auto; min-width: 0; }
.cv-kichban-title-t { font-size: 15px; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.2; }
.cv-kichban-title-sub { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; }

.cv-kichban-close { flex: 0 0 auto; margin: -2px -4px 0 0; display: inline-grid; place-items: center;
    width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; border-radius: 8px;
    color: var(--mud-palette-text-secondary); }
.cv-kichban-close:hover { background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    color: var(--mud-palette-text-primary); }
.cv-kichban-close svg { width: 17px; height: 17px; }


.cv-kichban-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px 16px;
    display: flex; flex-direction: column; gap: 12px; }
.cv-kichban-guard { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 26px 12px;
    color: var(--mud-palette-text-secondary); text-align: center; }
.cv-kichban-guard-ic { display: inline-flex; }
.cv-kichban-guard-ic svg { width: 18px; height: 18px; }


.cv-kb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cv-kb-stat { position: relative; overflow: hidden; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px; padding: 9px 11px; background: var(--mud-palette-surface); }
.cv-kb-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.cv-kb-stat-n { font-size: 21px; font-weight: 800; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; }
.cv-kb-stat-l { font-size: 11px; color: var(--mud-palette-text-secondary); margin-top: 3px; }
.cv-kb-stat.ok   { --c: var(--mud-palette-success); }
.cv-kb-stat.warn { --c: var(--mud-palette-warning); }
.cv-kb-stat.no   { --c: var(--mud-palette-error); }


.cv-kb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px;
    border: 1px dashed var(--mud-palette-lines-default); border-radius: 10px;
    font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.cv-kb-lg { display: inline-flex; align-items: center; gap: 6px; }


.cv-kb-badge { flex: 0 0 auto; width: 18px; height: 18px; display: inline-grid; place-items: center;
    border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1;
    color: var(--bc); background: var(--bbg); border: 1px solid var(--bl); }
.cv-kb-badge.ok   { --bc: var(--mud-palette-success); --bbg: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); --bl: color-mix(in srgb, var(--mud-palette-success) 32%, transparent); }
.cv-kb-badge.warn { --bc: var(--mud-palette-warning); --bbg: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); --bl: color-mix(in srgb, var(--mud-palette-warning) 34%, transparent); }
.cv-kb-badge.no   { --bc: var(--mud-palette-error);   --bbg: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);   --bl: color-mix(in srgb, var(--mud-palette-error) 32%, transparent); }


.cv-kichban-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 24%, transparent);
    font-size: 12px; color: var(--mud-palette-text-secondary); line-height: 1.45; }
.cv-kichban-note-ic { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: var(--mud-palette-info); }
.cv-kichban-note-ic svg { width: 14px; height: 14px; }


.cv-kichban-sec { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; overflow: hidden;
    background: var(--mud-palette-surface); }
.cv-kichban-sec-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--brand) 5%, var(--mud-palette-surface)); }
.cv-kb-idx { flex: 0 0 auto; width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; font-size: 12.5px;
    color: var(--brand); background: var(--brand-soft); }
.cv-kichban-sec-headtext { flex: 1 1 auto; min-width: 0; }
.cv-kichban-sec-t { font-size: 13.5px; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.25; }
.cv-kichban-sec-sub { font-size: 11.5px; color: var(--mud-palette-text-secondary); margin-top: 1px; }
.cv-kb-cnt { flex: 0 0 auto; font-size: 11px; color: var(--mud-palette-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }


.cv-kb-rows { list-style: none; margin: 0; padding: 4px 0; }
.cv-kb-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 12px; }
.cv-kb-row + .cv-kb-row { border-top: 1px solid var(--mud-palette-lines-default); }
.cv-kb-row--no { background: color-mix(in srgb, var(--mud-palette-error) 5%, transparent); }
.cv-kb-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-kb-scn { font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-primary); line-height: 1.35; }
.cv-kb-note { font-size: 11.5px; color: var(--mud-palette-text-secondary); line-height: 1.45; }


.cv-kb-gid { flex: 0 0 auto; width: 28px; height: 22px; display: inline-grid; place-items: center; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; font-size: 11.5px;
    color: var(--bc); background: var(--bbg); border: 1px solid var(--bl); }
.cv-kb-gid.ok { --bc: var(--mud-palette-success); --bbg: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); --bl: color-mix(in srgb, var(--mud-palette-success) 32%, transparent); }
.cv-kb-gid.no { --bc: var(--mud-palette-error);   --bbg: color-mix(in srgb, var(--mud-palette-error) 13%, transparent);   --bl: color-mix(in srgb, var(--mud-palette-error) 32%, transparent); }


.cv-kichban-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-top: 1px solid var(--mud-palette-lines-default); }
.cv-kichban-foot-note { font-size: 11px; color: var(--mud-palette-text-secondary); text-align: right; }


.cv-help-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: none; background: none; cursor: pointer; border-radius: 8px; color: var(--mud-palette-text-secondary); }
.cv-help-btn:hover { background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    color: var(--mud-palette-text-primary); }
.cv-help-btn svg { width: 20px; height: 20px; }


.cv-accept-cd { font-size: .82em; font-weight: 500; opacity: .92; white-space: nowrap; }
.cv-accept-cd--warn { color: #ffcf66; opacity: 1; }   
.cv-accept-cd--over { color: #ff9e91; opacity: 1; }   


mark.search-hl {
    background-color: #ffd54a;   
    color: #1f1a00;              
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 600;
}


:root{
    
    --aitv-ai:var(--brand);
    --aitv-ai-2:var(--brand-hover);
    --aitv-ai-soft:color-mix(in srgb, var(--brand) 8%, transparent);
    --aitv-ok:color-mix(in srgb, var(--success-500) 72%, var(--fg-3));
    --aitv-ok-strong:color-mix(in srgb, var(--success-500) 66%, var(--fg-1));
    --aitv-ok-bg:color-mix(in srgb, var(--success-500) 9%, transparent);
    --aitv-err:color-mix(in srgb, var(--error-500) 70%, var(--fg-3));
    --aitv-err-strong:color-mix(in srgb, var(--error-500) 64%, var(--fg-1));
    --aitv-err-bg:color-mix(in srgb, var(--error-500) 8%, transparent);
}
html[data-theme="dark"]{
    --aitv-ai:var(--brand); --aitv-ai-2:var(--brand-hover);
    --aitv-ai-soft:color-mix(in srgb, var(--brand) 24%, transparent);
    --aitv-ok-strong:color-mix(in srgb, var(--success-500) 62%, var(--fg-1));
    --aitv-err-strong:color-mix(in srgb, var(--error-500) 60%, var(--fg-1));
}


.cv-aichat-dialog.mud-dialog{ padding:0; margin:0; background:transparent; box-shadow:none; border:0; max-width:720px; width:100%; overflow:visible; }
.cv-aichat-dialog .mud-dialog-content{ padding:0; overflow:visible; }


.aitv-modal{ width:100%; background:var(--bg-surface); border-radius:12px; box-shadow:none; border:1px solid var(--border-1); display:flex; flex-direction:column; overflow:hidden; height:min(78vh,760px); }
.aitv-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border-1); flex-shrink:0; }
.aitv-head-av{ width:38px; height:38px; border-radius:10px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--brand); position:relative; }
.aitv-head-av svg{ width:21px; height:21px; }
.aitv-head-av .live{ position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:999px; background:var(--success-500); border:2px solid var(--bg-surface); }
.aitv-head-t{ min-width:0; flex:1; }
.aitv-head-t .n{ font-size:14.5px; font-weight:700; color:var(--fg-1); display:flex; align-items:center; gap:7px; }
.aitv-head-t .s{ font-size:12px; color:var(--fg-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cv-beta-tag{ font-size:10px; font-weight:700; letter-spacing:.01em; line-height:1.5; white-space:nowrap; vertical-align:middle; margin-left:6px; padding:1px 7px; border-radius:999px; display:inline-flex; align-items:center; color:color-mix(in srgb, var(--warning-500) 82%, var(--fg-1)); background:color-mix(in srgb, var(--warning-500) 15%, var(--bg-surface)); border:1px solid color-mix(in srgb, var(--warning-500) 34%, transparent); }
.aitv-head-btn{ width:32px; height:32px; border-radius:8px; border:0; background:transparent; color:var(--fg-3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .12s,color .12s; flex-shrink:0; }
.aitv-head-btn:hover{ background:var(--slate-100); color:var(--fg-1); }


.aitv-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.aitv-pane-chat{ display:flex; flex-direction:column; min-height:0; min-width:0; flex:1; }
.aitv-chat{ flex:1; min-height:0; overflow-y:auto; padding:16px 16px 8px; display:flex; flex-direction:column; gap:13px; scroll-behavior:smooth; }
.aitv-chat::-webkit-scrollbar{ width:9px; }
.aitv-chat::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:5px; }


.aitv-msg{ display:flex; gap:10px; max-width:100%; animation:aitv-rise .26s var(--ease-out); }
.aitv-msg.user{ flex-direction:row-reverse; }
.aitv-msg-av{ width:28px; height:28px; border-radius:8px; flex-shrink:0; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--brand); animation:aitv-av-pop .34s var(--ease-out); }
.aitv-msg-av svg{ width:17px; height:17px; }
.aitv-msg-av img{ width:100%; height:100%; object-fit:cover; }
.aitv-msg-av .ini{ font-size:11.5px; font-weight:700; line-height:1; }
.aitv-msg.user .aitv-msg-av{ background:var(--slate-200); color:var(--fg-2); }
.aitv-bubble{ font-size:13.5px; line-height:1.55; padding:9px 13px; border-radius:14px; max-width:82%; word-break:break-word; white-space:pre-wrap; }
.aitv-msg.ai .aitv-bubble{ background:var(--slate-100); color:var(--fg-1); border-bottom-left-radius:5px; }
.aitv-msg.user .aitv-bubble{ background:var(--brand); color:#fff; border-bottom-right-radius:5px; }

.aitv-bubble{ animation:aitv-bubble-in .3s var(--ease-out); transform-origin:top left; }
.aitv-msg.user .aitv-bubble{ transform-origin:top right; }
.aitv-changed{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.aitv-changed span{ font-size:10.5px; font-weight:600; color:var(--aitv-ai); background:var(--bg-surface); border:1px solid color-mix(in srgb,var(--aitv-ai) 30%,transparent); border-radius:999px; padding:1px 8px; }
.aitv-typing{ display:inline-flex; gap:4px; padding:11px 14px; }
.aitv-typing i{ width:7px; height:7px; border-radius:999px; background:var(--fg-4); animation:aitv-blink 1.2s infinite; }
.aitv-typing i:nth-child(2){ animation-delay:.2s; } .aitv-typing i:nth-child(3){ animation-delay:.4s; }


.aitv-warns{ margin-left:38px; display:flex; flex-direction:column; gap:6px; background:var(--aitv-err-bg); border:1px solid color-mix(in srgb,var(--error-500) 30%,transparent); border-radius:12px; padding:10px 12px; }
.aitv-warns .it{ font-size:12.5px; color:var(--aitv-err-strong); display:flex; align-items:flex-start; gap:7px; line-height:1.45; }


.aitv-starters{ display:flex; flex-wrap:wrap; gap:8px; padding-left:38px; }
.aitv-chip{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; font-weight:600; color:var(--fg-2); background:var(--bg-surface); border:1px solid var(--border-2); border-radius:999px; padding:7px 13px; cursor:pointer; transition:all .12s; text-align:left; }
.aitv-chip:hover{ border-color:var(--aitv-ai); color:var(--aitv-ai); background:var(--aitv-ai-soft); }
.aitv-chip .mud-icon-root{ color:var(--aitv-ai); }


.aitv-composer-wrap{ flex-shrink:0; padding:10px 14px 14px; border-top:1px solid var(--border-1); background:var(--bg-surface); }
.aitv-composer{ position:relative; display:flex; flex-direction:column; border:1px solid var(--border-2); border-radius:13px; background:var(--bg-surface); transition:border-color .12s,box-shadow .12s; }
.aitv-composer:focus-within{ border-color:var(--aitv-ai); box-shadow:0 0 0 3px var(--aitv-ai-soft); }
.aitv-file-hidden{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden; }
.aitv-ta{ width:100%; box-sizing:border-box; border:0; background:transparent; resize:none; padding:11px 14px 4px; font:inherit; font-size:13.5px; line-height:1.5; color:var(--fg-1); min-height:24px; max-height:120px; overflow-y:auto; outline:none; }
.aitv-ta::placeholder{ color:var(--fg-4); }


.aitv-atts{ display:flex; flex-wrap:wrap; gap:9px; padding:11px 12px 2px; }
.aitv-att{ position:relative; border:1px solid var(--border-2); border-radius:10px; background:var(--bg-surface); }
.aitv-att.img{ width:54px; height:54px; overflow:hidden; }
.aitv-att.img img{ width:100%; height:100%; object-fit:cover; display:block; }
.aitv-att.text{ display:inline-flex; align-items:center; gap:8px; padding:7px 11px; max-width:230px; }
.aitv-att.text .tx{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.aitv-att.text .nm{ font-size:12px; font-weight:600; color:var(--fg-1); }
.aitv-att.text .sz{ font-size:10.5px; color:var(--fg-3); font-weight:500; margin-top:1px; }

.aitv-att-x{ position:absolute; top:-7px; right:-7px; width:19px; height:19px; border-radius:999px; border:1.5px solid var(--bg-surface); background:var(--fg-2); color:var(--bg-surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.aitv-att-x:hover{ background:var(--fg-1); }
.aitv-att-x .mud-icon-root{ color:var(--bg-surface); }


.aitv-atts-lbl{ flex-basis:100%; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--fg-3); }
.aitv-atts-lbl .mud-icon-root{ color:var(--fg-4); }

.aitv-att.file{ display:inline-flex; align-items:center; gap:8px; padding:7px 11px; max-width:230px; }
.aitv-att.file .fic{ flex-shrink:0; display:inline-flex; }
.aitv-att.file .fic svg{ width:22px; height:22px; display:block; }
.aitv-att.file .tx{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.aitv-att.file .nm{ font-size:12px; font-weight:600; color:var(--fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aitv-att.file .sz{ font-size:10.5px; color:var(--fg-3); font-weight:500; margin-top:1px; }

.aitv-bar{ display:flex; align-items:center; gap:8px; padding:4px 6px 6px; }
.aitv-attach{ width:34px; height:34px; border-radius:9px; border:0; background:transparent; color:var(--fg-3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .12s,color .12s; }
.aitv-attach:hover{ background:var(--slate-100); color:var(--aitv-ai); }
.aitv-hint{ flex:1; min-width:0; font-size:11px; color:var(--fg-4); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.aitv-counter{ flex-shrink:0; font-size:10.5px; font-weight:600; color:var(--fg-4); font-variant-numeric:tabular-nums; }
.aitv-counter.near{ color:var(--mud-palette-warning); }
.aitv-counter.over{ color:var(--mud-palette-error); }
.aitv-send{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; min-width:36px; padding:0; border:0; border-radius:999px; cursor:pointer; color:#fff; background:var(--aitv-ai); transition:background .12s,opacity .12s; }
.aitv-send:hover:not(:disabled){ background:var(--aitv-ai-2); }
.aitv-send:disabled{ opacity:.4; cursor:default; }
.aitv-send .mud-icon-root{ font-size:18px; }


.aitv-dropmask{ position:absolute; inset:0; z-index:3; display:none; align-items:center; justify-content:center; gap:9px; border-radius:13px; background:color-mix(in srgb,var(--aitv-ai-soft) 94%,var(--bg-surface)); border:1.5px dashed var(--aitv-ai); color:var(--aitv-ai); font-size:12.5px; font-weight:600; pointer-events:none; }
.aitv-composer.aitv-drag .aitv-dropmask{ display:flex; }

.aitv-composer-done{ display:flex; align-items:center; gap:10px; justify-content:center; color:var(--fg-3); font-size:12.5px; padding:2px; }


.aitv-bubble-imgs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.aitv-bubble-imgs img{ width:104px; height:104px; object-fit:cover; border-radius:10px; display:block; }
.aitv-bubble-pasted{ margin-top:6px; font-size:11.5px; font-weight:600; opacity:.85; }



.aitv-card{ background:var(--bg-surface); border:2px solid var(--border-2); border-radius:11px; display:flex; flex-direction:column; animation:aitv-rise .3s var(--ease-out); margin-left:38px; box-shadow:0 1px 2px rgba(2,6,23,.05), 0 6px 18px rgba(2,6,23,.07); }
.aitv-card-inner{ padding:13px 16px 11px; display:flex; flex-direction:column; }
.aitv-card-ribbon{ display:flex; align-items:center; gap:8px; padding-bottom:9px; }
.aitv-card-ribbon .lab{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--aitv-ai); display:inline-flex; align-items:center; gap:6px; }
.aitv-card-ribbon .sp{ flex:1; }
.aitv-card-state{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
.aitv-card-state.draft{ color:var(--fg-3); background:var(--slate-100); }
.aitv-card-state.ready{ color:var(--aitv-ok-strong); background:var(--aitv-ok-bg); }
.aitv-card-state.created{ color:var(--brand); background:var(--brand-soft); }

.aitv-title{ font-size:16px; font-weight:700; line-height:1.3; color:var(--fg-1); letter-spacing:-.01em; }
.aitv-title.empty{ color:var(--fg-4); font-weight:600; }
.aitv-desc{ font-size:13px; color:var(--fg-2); line-height:1.55; margin-top:3px; }
.aitv-desc.empty{ color:var(--fg-4); }

.aitv-fields{ display:flex; flex-direction:column; margin-top:7px; }
.aitv-field{ display:flex; align-items:center; gap:12px; padding:6px 4px; border-radius:8px; min-width:0; border-bottom:1px solid color-mix(in srgb,var(--border-1) 60%,transparent); }
.aitv-field:last-child{ border-bottom:0; }
.aitv-field-lab{ flex:0 0 128px; font-size:12px; font-weight:600; color:var(--fg-3); line-height:1.35; }
.aitv-field-val{ flex:1; font-size:13px; font-weight:600; color:var(--fg-1); display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; line-height:1.4; }
.aitv-field-val.empty{ color:var(--fg-4); font-weight:500; }
.aitv-field-val.warn{ color:var(--aitv-err); }
.aitv-field-person{ display:inline-flex; align-items:center; gap:6px; }
.aitv-field-person .nm{ font-size:13px; font-weight:600; color:var(--fg-1); }
.aitv-field-person .rl{ font-size:11.5px; color:var(--fg-3); font-weight:500; }


.aitv-ini{ width:22px; height:22px; border-radius:6px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:#fff; background:var(--brand); }
.aitv-ini.sm{ width:20px; height:20px; font-size:10px; }


.aitv-prio-dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }


.aitv-mini-pill{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; background:var(--slate-100); color:var(--fg-2); }



.aitv-owner-sug{ display:inline-flex; align-items:center; gap:6px; padding:2px 4px 2px 8px; border-radius:999px; background:color-mix(in srgb,var(--warning-500) 8%,transparent); border:1px dashed color-mix(in srgb,var(--warning-500) 48%,transparent); max-width:100%; }
.aitv-owner-sug .sg-lb{ flex-shrink:0; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:color-mix(in srgb,var(--warning-500) 78%,var(--fg-1)); }
.aitv-owner-sug .aitv-ini{ background:var(--fg-4); }
.aitv-owner-sug .nm{ font-size:12px; font-weight:500; color:var(--fg-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aitv-owner-sug .use{ flex-shrink:0; display:inline-flex; align-items:center; height:21px; padding:0 9px; border:0; border-radius:999px; cursor:pointer; font:inherit; font-size:11px; font-weight:700; color:#fff;
    
    background:var(--warning-500); background:color-mix(in srgb,var(--warning-500) 90%,var(--fg-1)); }
.aitv-owner-sug .use:hover{ background:var(--warning-500); }
.aitv-ini.xs{ width:18px; height:18px; font-size:9px; border-radius:5px; }


.aitv-inline-edit{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aitv-prio-seg{ display:inline-flex; gap:5px; flex-wrap:wrap; }
.aitv-prio-seg button{ font:inherit; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:7px; border:1px solid var(--border-2); background:var(--bg-surface); color:var(--fg-2); cursor:pointer; transition:all .1s; }

.aitv-date-vn .mud-input-slot{ font-size:12.5px; color:var(--fg-1); }
.aitv-date-vn .mud-input.mud-input-outlined > input{ padding-top:5px; padding-bottom:5px; }


.aitv-fld-deadline .aitv-field-val{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aitv-date-vn{ flex:0 0 auto; }
.aitv-deadline-wd{ font-size:11px; font-weight:600; color:var(--fg-3); white-space:nowrap; flex-shrink:0; }


.aitv-triple{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:9px 20px; padding:7px 4px; border-bottom:1px solid color-mix(in srgb,var(--border-1) 60%,transparent); }
.aitv-triple:last-child{ border-bottom:0; }
.aitv-tcol{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:0 0 auto; }        
.aitv-tcol.grow{ flex:1 1 0; }                                                                  
.aitv-tcol .aitv-field-lab{ flex:0 0 auto; }
.aitv-tcol .aitv-field-val{ flex:0 0 auto; }


.aitv-recur-val{ gap:8px; }
.aitv-recur-human{ font-weight:600; color:var(--fg-1); }
.aitv-recur-edit{ border:0; background:transparent; color:var(--aitv-ai); font-size:12px; font-weight:600; cursor:pointer; padding:2px 4px; border-radius:6px; }
.aitv-recur-edit:hover{ background:var(--aitv-ai-soft); }
.aitv-recur-pick{ gap:6px; }
.aitv-recur-ask{ font-size:12px; font-weight:500; color:var(--fg-3); }
.aitv-recur-chip{ border:1px solid var(--border-2); background:var(--bg-surface); color:var(--fg-2); font-size:12px; font-weight:600; cursor:pointer; padding:3px 10px; border-radius:999px; transition:border-color .12s,color .12s,background .12s; }
.aitv-recur-chip:hover{ border-color:var(--aitv-ai); color:var(--aitv-ai); background:var(--aitv-ai-soft); }
.aitv-recur-chip:disabled{ opacity:.5; cursor:default; }

.aitv-recur-chip.aitv-recur-chip-off{ color:var(--fg-3); border-style:dashed; font-weight:500; }
.aitv-recur-chip.aitv-recur-chip-off:hover{ border-color:var(--fg-3); color:var(--fg-2); background:var(--slate-100); }


.aitv-fld-checklist{ align-items:flex-start; }
.aitv-fld-checklist .aitv-field-val{ flex-direction:column; align-items:stretch; gap:5px; }
.aitv-chk-list{ display:flex; flex-direction:column; gap:5px; width:100%; }
.aitv-chk-item{ display:flex; align-items:center; gap:8px; padding:4px 7px; border-radius:8px; background:var(--slate-50); border:1px solid color-mix(in srgb,var(--border-1) 55%,transparent); min-width:0; }
.aitv-chk-box{ width:14px; height:14px; flex-shrink:0; border-radius:4px; border:1.6px solid var(--border-2); background:var(--bg-surface); }
.aitv-chk-text{ flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--fg-1); word-break:break-word; line-height:1.4; }
.aitv-chk-input{ flex:1; min-width:0; border:1px solid transparent; background:transparent; font:inherit; font-size:13px; font-weight:500; color:var(--fg-1); padding:2px 6px; border-radius:6px; transition:border-color .12s,background .12s; }
.aitv-chk-input::placeholder{ color:var(--fg-4); font-weight:400; }
.aitv-chk-input:hover{ background:var(--bg-surface); }
.aitv-chk-input:focus{ outline:none; border-color:var(--aitv-ai); background:var(--bg-surface); }
.aitv-chk-del{ flex-shrink:0; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:6px; cursor:pointer; background:transparent; color:var(--fg-3); font-size:16px; line-height:1; transition:background .12s,color .12s; }
.aitv-chk-del:hover{ background:color-mix(in srgb,var(--aitv-err) 12%,transparent); color:var(--aitv-err); }
.aitv-chk-add{ align-self:flex-start; display:inline-flex; align-items:center; gap:5px; margin-top:1px; padding:4px 10px; border:1px dashed var(--border-2); border-radius:999px; background:transparent; color:var(--aitv-ai); font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:border-color .12s,background .12s; }
.aitv-chk-add:hover{ border-color:var(--aitv-ai); background:var(--aitv-ai-soft); }


.aitv-more{ margin-top:8px; display:flex; align-items:center; gap:8px; width:100%; border:0; background:transparent; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; color:var(--fg-2); padding:7px; border-radius:8px; transition:background .12s; }
.aitv-more:hover{ background:var(--slate-50); }
.aitv-more .chev{ transition:transform .18s; display:inline-flex; }
.aitv-more.open .chev{ transform:rotate(90deg); }
.aitv-more-count{ font-size:11px; font-weight:700; color:var(--aitv-ai); background:var(--aitv-ai-soft); border-radius:999px; padding:1px 8px; }
.aitv-more-sp{ flex:1; }
.aitv-more-hint{ font-size:11.5px; color:var(--fg-4); font-weight:500; }
.aitv-more-body{ display:flex; flex-direction:column; border-top:1px dashed var(--border-1); margin:2px 4px 0; padding-top:3px; animation:aitv-fade .2s var(--ease-out); }


.aitv-card-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex-shrink:0; padding:12px 16px; border-top:1px solid var(--border-1); background:var(--slate-25); }
.aitv-missing{ font-size:12px; color:var(--fg-3); display:inline-flex; align-items:center; gap:6px; min-width:0; flex:1; }
.aitv-missing.ok{ color:var(--aitv-ok-strong); }
.aitv-missing b{ color:var(--aitv-err); font-weight:700; }
.aitv-create-btn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 18px; border:0; border-radius:10px; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700; color:#fff; background:var(--brand); transition:background .12s,opacity .12s; white-space:nowrap; }
.aitv-create-btn:hover:not(:disabled){ background:var(--brand-hover); }
.aitv-create-btn:disabled{ opacity:.4; cursor:default; }


.aitv-created-msg{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; margin-left:38px; background:var(--aitv-ok-bg); border:1px solid color-mix(in srgb,var(--success-500) 30%,transparent); border-radius:14px; padding:14px 16px; animation:aitv-rise .3s var(--ease-out); }
.aitv-created-h{ display:flex; align-items:center; gap:10px; }
.aitv-created-h .ic{ width:34px; height:34px; border-radius:9px; background:var(--aitv-ok); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.aitv-created-h .tt{ font-size:14px; font-weight:700; color:var(--aitv-ok-strong); }
.aitv-created-h .code{ font-family:var(--font-mono); font-size:12px; color:var(--fg-3); font-weight:600; }
.aitv-created-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.aitv-created-open{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 15px; border:0; border-radius:9px; background:var(--brand); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.aitv-created-open:hover{ background:var(--brand-hover); }
.aitv-created-new{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 15px; border:1px solid var(--border-2); border-radius:9px; background:var(--bg-surface); color:var(--fg-1); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.aitv-created-new:hover{ background:var(--slate-50); }

@keyframes aitv-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes aitv-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes aitv-blink{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }


@keyframes aitv-av-pop{ from{ opacity:0; transform:scale(.55); } to{ opacity:1; transform:none; } }
@keyframes aitv-bubble-in{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }


.aitv-just-changed{ animation:aitv-flash 2.9s var(--ease-out); border-radius:8px; }
.aitv-field.aitv-just-changed{ animation:aitv-flash-row 2.9s var(--ease-out); }
@keyframes aitv-flash{
    0%,12%{ background-color:color-mix(in srgb, var(--aitv-ai) 20%, transparent); }
    100%  { background-color:transparent; }
}
@keyframes aitv-flash-row{
    0%,12%{ background-color:color-mix(in srgb, var(--aitv-ai) 20%, transparent); box-shadow:inset 2.5px 0 0 var(--aitv-ai); }
    100%  { background-color:transparent; box-shadow:inset 0 0 0 transparent; }
}

@media (prefers-reduced-motion:reduce){
    .aitv-msg,.aitv-card,.aitv-created-msg,.aitv-more-body,.aitv-msg-av,.aitv-bubble,.aitv-just-changed,.aitv-field.aitv-just-changed{ animation:none; }
    .aitv-typing i{ animation:none; }
    .aitv-chat{ scroll-behavior:auto; }
    
    .aitv-just-changed{ background-color:color-mix(in srgb, var(--aitv-ai) 13%, transparent); }
    .aitv-field.aitv-just-changed{ background-color:color-mix(in srgb, var(--aitv-ai) 13%, transparent); box-shadow:inset 2.5px 0 0 var(--aitv-ai); }
}


@media (max-width:600px){
    
    .cv-aichat-dialog.mud-dialog{
        max-width:100vw !important; width:100vw !important;
        height:100dvh !important; max-height:100dvh !important;
        margin:0 !important; border-radius:0 !important;
        overflow:hidden;
    }
    .cv-aichat-dialog .mud-dialog-content{ height:100%; max-height:100%; min-height:0; overflow:hidden; }
    .aitv-modal{ height:100%; border-radius:0; border:0; }
    
    .aitv-head{ padding-top:calc(14px + env(safe-area-inset-top,0px)); }
    .aitv-composer-wrap{ padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
    
    .aitv-send,.aitv-attach,.aitv-head-btn{ width:40px; height:40px; min-width:40px; }
    .aitv-bubble{ max-width:88%; }
    .aitv-card,.aitv-created-msg,.aitv-warns,.aitv-starters{ margin-left:0; }
    .aitv-starters{ padding-left:0; }
    .aitv-field-lab{ flex-basis:104px; }
}


.aitv-prio-dot.p-urgent{ background:color-mix(in srgb, var(--error-500) 62%, var(--fg-3)); }
.aitv-prio-dot.p-high{ background:var(--brand); }
.aitv-prio-dot.p-medium{ background:var(--fg-3); }
.aitv-prio-dot.p-low{ background:var(--fg-4); }
.aitv-prio-txt.p-urgent{ color:color-mix(in srgb, var(--error-500) 60%, var(--fg-2)); font-weight:600; }
.aitv-prio-txt.p-high{ color:var(--brand); }
.aitv-prio-txt.p-medium{ color:var(--fg-2); }
.aitv-prio-txt.p-low{ color:var(--fg-3); }
.aitv-prio-seg button.on{ background:var(--brand); color:#fff; border-color:var(--brand); }


.presence-dot{
    display:inline-block; width:9px; height:9px; border-radius:50%; flex:0 0 auto;
    background:var(--mud-palette-text-disabled);
    box-shadow:0 0 0 2px var(--mud-palette-surface);   
}
.presence-dot--online{ background:var(--mud-palette-success); }
.presence-dot--away{ background:var(--mud-palette-warning); }
.presence-dot--onleave{ background:var(--mud-palette-info); }
.presence-dot--offline{ background:var(--mud-palette-text-disabled); }


.presence-avatar-wrap{ position:relative; display:inline-flex; }
.presence-avatar-wrap .presence-dot{ position:absolute; right:-1px; bottom:-1px; }


.presence-text{ font-weight:600; }
.presence-text--online{ color:var(--mud-palette-success); }
.presence-text--away{ color:var(--mud-palette-warning); }
.presence-text--onleave{ color:var(--mud-palette-info); }
.presence-text--offline{ color:var(--mud-palette-text-disabled); }


.presence-dt-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }


@media print {
    body.vm-printing * { visibility: hidden !important; }
    body.vm-printing .vm-print-target,
    body.vm-printing .vm-print-target * { visibility: visible !important; }

    
    body.vm-printing .vm-print-target {
        position: absolute !important;
        left: 0; top: 0; width: 100% !important;
        max-height: none !important; height: auto !important;
        overflow: visible !important;
        box-shadow: none !important; border: 0 !important;
    }
    body.vm-printing .vm-print-target * {
        max-height: none !important;
        overflow: visible !important;
    }
}


.att-meta { display: flex; align-items: baseline; gap: 10px; }
.att-time { margin-left: auto; white-space: nowrap; flex: 0 0 auto; }


.att-note { color: var(--mud-palette-text-secondary); white-space: pre-wrap; word-break: break-word; margin-top: 2px; font-style: italic; }

.mud-typography-caption.att-note { font-size: 13.5px; line-height: 1.45; }

.att-readonly-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px;
    border: 1px dashed var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); font-size: 12.5px; line-height: 1.55; }
.att-readonly-hint .mud-icon-root { flex: 0 0 auto; margin-top: 1px; opacity: .7; }

.att-paste { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
    border: 1px dashed var(--mud-palette-lines-default); cursor: text; user-select: none;
    font-size: 12.5px; color: var(--mud-palette-text-secondary);
    transition: border-color .12s, color .12s, background-color .12s; }
.att-paste:hover { border-color: var(--mud-palette-primary); }
.att-paste.is-armed { border-style: solid; border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.att-paste:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.att-pastebox { flex: 1 1 170px; min-width: 140px; max-width: 300px; height: 30px;
    padding: 0 10px; border-radius: 8px; font: inherit; font-size: 12.5px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey, #f6f7f9);
    border: 1px dashed var(--mud-palette-lines-default); outline: none; }
.att-pastebox::placeholder { color: var(--mud-palette-text-secondary); opacity: .85;
    
    font-size: 11px; }
.att-pastebox:hover { border-color: var(--mud-palette-primary); }
.att-pastebox:focus { border-style: solid; border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.att-pastebox:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.att-pastebox:disabled { opacity: .55; cursor: not-allowed; border-style: dashed; }
@media (max-width: 600px) {
    
    .att-pastebox { max-width: none; flex-basis: 100%; }
}



.att-up-tile { border-style: dashed; border-color: var(--mud-palette-primary); }

.cv-out-upbox { position: relative; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px;
    overflow: hidden; border: 1px dashed var(--mud-palette-primary);
    background: var(--mud-palette-background-grey); }

.att-up-blur { width: 100%; height: 100%; object-fit: cover; display: block;
    filter: blur(3px) saturate(.9); transform: scale(1.06); }

.att-up-skeleton { width: 100%; height: 100%;
    
    background: var(--mud-palette-background-grey);
    background: linear-gradient(100deg,
        var(--mud-palette-background-grey) 28%,
        color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-background-grey)) 48%,
        var(--mud-palette-background-grey) 68%);
    background-size: 260% 100%; animation: att-up-shimmer 1.2s linear infinite; }
@keyframes att-up-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.att-up-veil { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    
    background: var(--mud-palette-surface);
    background: color-mix(in srgb, var(--mud-palette-surface) 62%, transparent); }

.att-up-pct { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    line-height: 1; color: var(--mud-palette-text-primary); }
@media (prefers-reduced-motion: reduce) {
    .att-up-skeleton { animation: none; }
}

.att-uploading { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.att-uploading-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 38px; align-items: center; gap: 10px; }
.att-uploading-name { font-size: 12.5px; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-uploading-bar { width: 100%; }

.att-uploading-pct { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right;
    color: var(--mud-palette-text-secondary); }
@media (max-width: 600px) {
    
    .att-uploading-row { grid-template-columns: minmax(0, 1fr) 64px 34px; gap: 8px; }
}


.cv-card-h.cv-card-h--paste { flex-wrap: nowrap; }
.cv-card-h.cv-card-h--paste > .cv-card-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-card-h.cv-card-h--paste > .cv-out-count { flex: 0 0 auto; }
@media (max-width: 600px) {
    
    .cv-card-h.cv-card-h--paste > .mud-spacer { display: none; }
    
    .cv-card-h.cv-card-h--paste .att-pastebox { flex: 1 1 96px; min-width: 96px; max-width: none; }
}


.pcd-head { display: flex; align-items: center; gap: 8px; }
.pcd-head-t { font-size: 15.5px; font-weight: 700; }
.pcd-body { display: flex; flex-direction: column; gap: 10px; }
.pcd-sub { font-size: 13px; line-height: 1.5; color: var(--mud-palette-text-secondary); }
.pcd-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.pcd-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-grey, #f6f7f9); }
.mud-icon-root.pcd-row-ico { font-size: 26px; width: 26px; height: 26px; flex: 0 0 auto; }
.pcd-row-main { min-width: 0; flex: 1 1 auto; }
.pcd-row-name { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcd-row-meta { font-size: 11.5px; color: var(--mud-palette-text-secondary); margin-top: 1px; }
.pcd-row-kind { font-weight: 700; letter-spacing: .2px; }
.pcd-more { font-size: 12px; color: var(--mud-palette-text-secondary); }




.cv-card.cv-sopshare-card { order: 9; display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 13px; font-size: 12.5px; line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 34%, transparent); }
.mud-icon-root.cv-sopshare-ico { font-size: 16px; width: 16px; height: 16px; flex: 0 0 auto;
    color: var(--mud-palette-warning); margin-top: 1px; }


.cv-tlbt { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--mud-palette-lines-default); }
.cv-tlbt-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-bottom: 9px; }
.mud-icon-root.cv-tlbt-h-ico { font-size: 15px; width: 15px; height: 15px; }
.cv-tlbt-grp { margin-bottom: 10px; }
.cv-tlbt-grp:last-child { margin-bottom: 0; }
.cv-tlbt-grp-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.cv-tlbt-no { font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 8px; border-radius: 999px;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    flex: 0 0 auto; }
.cv-tlbt-name { font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-primary); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tlbt-who { font-size: 11.5px; color: var(--mud-palette-text-secondary); }

.cv-tlbt-file { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; margin-bottom: 5px;
    padding: 6px 10px; border-radius: 8px; cursor: pointer; font: inherit;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-grey, #f6f7f9); }
.cv-tlbt-file:hover { border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.cv-tlbt-file:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.mud-icon-root.cv-tlbt-file-ico { font-size: 22px; width: 22px; height: 22px; flex: 0 0 auto; }
.cv-tlbt-file-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.cv-tlbt-file-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tlbt-file-meta { font-size: 11px; color: var(--mud-palette-text-secondary); }
.att-paste .mud-icon-root { flex: 0 0 auto; opacity: .8; }