html, body {
    height: 100%;
    margin: 0;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 15px;
    background: #f3f5f8;
    color: #0f172a;
}

.app-main {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    margin-top: 0 !important;
    background: #eef2f7;
    min-height: 100vh;
}

.app-page {
    flex: 1;
    padding: 20px 28px 40px;
}

.app-bar.mud-appbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 1100;
    flex-shrink: 0;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e6ebf2;
    min-height: 64px;
}

.app-bar .mud-toolbar {
    min-height: 64px !important;
    padding: 10px 20px !important;
}

.app-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.app-bar-icon.mud-icon-button {
    width: 34px !important;
    height: 34px !important;
    color: #475569 !important;
    border-radius: 8px !important;
}

.app-bar-icon.mud-icon-button:hover {
    background: #f4f7fb !important;
    color: #1b365d !important;
}

.app-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(260px, 28vw);
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
}

.app-search-input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 0.75rem;
    color: #0f172a;
}

.app-search-input::placeholder {
    color: #94a3b8;
    font-size: 0.75rem;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px 0 4px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
}

.app-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #007A94;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 700;
}

.app-user-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
}

.app-signout {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.app-signout:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.app-drawer.mud-drawer {
    background: #ffffff !important;
    color: #1e293b !important;
    border-right: 1px solid #e6ebf2 !important;
    top: 0 !important;
    height: 100vh !important;
    margin-top: 0 !important;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 8px 14px 16px;
}

.app-brand-copy {
    min-width: 0;
    flex: 1;
}

.app-brand-toggle.mud-icon-button {
    width: 32px !important;
    height: 32px !important;
    margin-left: auto;
    color: #475569 !important;
    border-radius: 8px !important;
}

.app-brand-toggle.mud-icon-button:hover {
    background: #f4f7fb !important;
    color: #1b365d !important;
}

.app-drawer.mud-drawer-mini.mud-drawer--closed .app-brand {
    justify-content: center;
    padding: 14px 0 8px;
    gap: 0;
}

.app-drawer.mud-drawer-mini.mud-drawer--closed .app-brand-mark,
.app-drawer.mud-drawer-mini.mud-drawer--closed .app-brand-copy,
.app-drawer.mud-drawer-mini.mud-drawer--closed .app-nav-label,
.app-drawer.mud-drawer-mini.mud-drawer--closed .nav-text {
    display: none;
}

.app-drawer.mud-drawer-mini.mud-drawer--closed .app-brand-toggle {
    margin: 0 auto;
}

.app-drawer.mud-drawer-mini.mud-drawer--closed .app-nav {
    padding: 4px 8px 16px;
}

.app-drawer.mud-drawer-mini.mud-drawer--closed .nav-link {
    justify-content: center;
    gap: 0;
    padding: 6px;
    margin: 2px 0;
}

.app-drawer.mud-drawer-mini.mud-drawer--closed .nav-link.is-active {
    background: transparent;
}

.app-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1b365d 0%, #2563eb 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.app-brand-name {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1b365d;
}

.app-brand-sub {
    font-size: 0.68rem;
    color: #64748b;
    margin-top: 2px;
}

.app-nav {
    padding: 0 10px 18px;
}

.app-nav-label {
    margin: 14px 8px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 10px;
    color: #334155;
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 500;
}

.nav-link:hover {
    background: #f4f7fb;
    color: #1b365d;
}

.nav-link.is-active {
    background: #eef2ff;
    color: #1b365d;
    font-weight: 650;
}

.nav-text {
    line-height: 1.2;
}

.nav-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.nav-icon .mud-icon-root {
    font-size: 16px !important;
    width: 16px;
    height: 16px;
}

.nav-icon-blue { background: #e0ecff; color: #2563eb; }
.nav-icon-navy { background: #e4ebf7; color: #1b365d; }
.nav-icon-sky { background: #e0f2fe; color: #0284c7; }
.nav-icon-indigo { background: #e0e7ff; color: #4f46e5; }
.nav-icon-green { background: #dcfce7; color: #16a34a; }
.nav-icon-teal { background: #ccfbf1; color: #0d9488; }
.nav-icon-emerald { background: #d1fae5; color: #059669; }
.nav-icon-cyan { background: #cffafe; color: #0891b2; }
.nav-icon-amber { background: #fef3c7; color: #d97706; }
.nav-icon-violet { background: #ede9fe; color: #7c3aed; }
.nav-icon-purple { background: #f3e8ff; color: #9333ea; }
.nav-icon-slate { background: #e2e8f0; color: #475569; }
.nav-icon-orange { background: #ffedd5; color: #ea580c; }
.nav-icon-stone { background: #e7e5e4; color: #57534e; }
.nav-icon-red { background: #fee2e2; color: #dc2626; }
.nav-icon-rose { background: #ffe4e6; color: #e11d48; }

.btn-primary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background: #007A94;
    color: #fff;
}

.btn-primary:hover {
    background: #00657A;
    color: #fff;
}

.btn-ghost {
    background: #fff;
    color: #334155;
    border-color: #d5dce6;
}

body .mud-input,
body .mud-input-control,
body .mud-select {
    font-size: 0.75rem !important;
}

body .mud-typography-h6 {
    font-size: 0.85rem !important;
}

body .mud-typography-subtitle1,
body .mud-typography-subtitle2,
body .mud-typography-body1,
body .mud-typography-body2 {
    font-size: 0.75rem !important;
}

body .mud-typography-caption {
    font-size: 0.68rem !important;
}

body .mud-input-control {
    margin-top: 0 !important;
}

body .mud-input {
    min-height: 38px !important;
}

body .mud-input.mud-input-outlined {
    min-height: 38px !important;
}

body .mud-input > input.mud-input-root {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 0.75rem !important;
}

body .mud-select .mud-input-slot {
    min-height: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
}

body .mud-input-adorned-start {
    padding-inline-start: 0 !important;
}

body .mud-input-adornment-start {
    margin-inline-start: 8px !important;
}

body .mud-numeric-field .mud-input {
    min-height: 38px !important;
}

body .mud-table-root {
    font-size: 0.75rem;
}

body .mud-table-cell {
    padding: 8px 10px !important;
}

body .mud-table-head .mud-table-cell {
    font-size: 0.7rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b !important;
}

body .mud-input-outlined .mud-input-outlined-border {
    border-radius: 10px !important;
    border-color: #d5dce6 !important;
}

body .mud-input:focus-within .mud-input-outlined-border,
body .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #007A94 !important;
}

body .mud-input input::placeholder,
body textarea::placeholder {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    opacity: 1;
}

body .mud-button-root {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    height: auto !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
}

body .mud-button-filled-size-small,
body .mud-button-outlined-size-small,
body .mud-button-text-size-small {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 0.75rem !important;
}

body .mud-icon-button {
    width: 34px !important;
    height: 34px !important;
}

body .mud-menu .mud-list-item {
    min-height: 32px;
    font-size: 0.75rem;
}

.mud-button {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
}

.mud-button-filled-size-medium,
.mud-button-outlined-size-medium,
.mud-button-text-size-medium {
    min-height: 34px !important;
    padding: 0 14px !important;
}

.mud-paper {
    border: 1px solid #e6ebf1 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

.kpi-grid,
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    padding: 14px 16px;
}

.kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.kpi-icon-navy { background: #e8eef7; color: #1d4e89; }
.kpi-icon-green { background: #ecf8f0; color: #15803d; }
.kpi-icon-blue { background: #eaf3ff; color: #2563eb; }
.kpi-icon-amber { background: #fff7e8; color: #b45309; }

.kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

.kpi-value {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 2px 0;
}

.kpi-hint {
    font-size: 0.72rem;
    color: #94a3b8;
}

.dashboard-charts,
.dashboard-split {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 12px;
    margin-bottom: 16px;
}

.panel {
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    padding: 14px 16px 16px;
}

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.panel-head h2 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 650;
}

.panel-head a,
.panel-sub {
    font-size: 0.75rem;
    color: #1d4e89;
    text-decoration: none;
}

.panel-sub { color: #94a3b8; }

.bar-chart {
    display: flex;
    align-items: stretch;
    gap: 10px;
    height: 190px;
    padding-top: 8px;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.bar-track {
    flex: 1;
    width: 100%;
    max-width: 28px;
    display: flex;
    align-items: flex-end;
    background: #f1f5f9;
    border-radius: 6px 6px 2px 2px;
}

.bar-fill {
    width: 100%;
    border-radius: 6px 6px 2px 2px;
    min-height: 6px;
}

.bar-label,
.bar-value {
    font-size: 0.68rem;
    color: #64748b;
    margin-top: 6px;
    text-align: center;
}

.bar-value {
    margin: 0 0 4px;
    font-weight: 700;
    color: #0f172a;
}

.donut-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 190px;
}

.donut {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e2e8f0;
    -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);
    mask: radial-gradient(circle, transparent 52%, #000 53%);
}

.donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.donut-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    padding: 4px 0;
    color: #475569;
}

.donut-legend strong {
    margin-left: auto;
    color: #0f172a;
}

.legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #eef2f6;
}

.data-table th {
    font-size: 0.7rem;
    font-weight: 650;
    color: #64748b;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.data-table tbody tr:hover {
    background: #f8fafc;
}

.data-table a {
    color: #1d4e89;
    text-decoration: none;
    font-weight: 600;
}

.table-actions {
    width: 48px;
    text-align: right;
}

.filter-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    margin-bottom: 14px;
}

.filter-card-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    color: #1e293b;
    cursor: pointer;
}

.filter-card-body {
    padding: 4px 16px 14px;
    border-top: 1px solid #eef2f6;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
}

.filter-grid .app-field:has(.file-drop) {
    grid-column: 1 / -1;
}

.filter-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    margin-top: 8px;
}

.form-card .filter-card-footer {
    border-top: 1px solid #eef2f6;
}

.filter-card .app-field {
    margin-bottom: 4px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 650;
    background: #f1f5f9;
    color: #475569;
}

.status-pill.is-success { background: #ecf8f0; color: #166534; }
.status-pill.is-info { background: #eaf3ff; color: #1d4e89; }
.status-pill.is-warning { background: #fff7e8; color: #92400e; }
.status-pill.is-primary { background: #e8eef7; color: #1d4e89; }
.status-pill.is-dark { background: #e2e8f0; color: #334155; }
.status-pill.is-danger { background: #fef2f2; color: #b91c1c; }
.status-pill.is-muted { background: #f1f5f9; color: #64748b; }

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

.task-row {
    width: 100%;
    text-align: left;
    border: 1px solid #eef2f6;
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
}

.task-title { display: block; font-size: 0.78rem; font-weight: 650; }
.task-meta { display: block; font-size: 0.7rem; color: #64748b; margin-top: 2px; }
.empty-copy { color: #64748b; font-size: 0.75rem; margin: 8px 0; }

.app-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-bottom: 8px;
}

.app-field-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
}

.dms-auth {
    --dms-navy: #1b365d;
    --dms-blue: #2563eb;
    --dms-soft: #e4ebf7;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem 2.5rem;
    background: #eef2f7;
    overflow: hidden;
}

.dms-auth__texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: #eef2f7;
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -15%, rgba(27, 54, 93, 0.16), transparent 55%),
        radial-gradient(ellipse 70% 55% at 100% 85%, rgba(37, 99, 235, 0.12), transparent 50%),
        radial-gradient(ellipse 65% 50% at 0% 70%, rgba(27, 54, 93, 0.1), transparent 48%),
        linear-gradient(168deg, #f8fafc 0%, #f1f5f9 38%, #e8edf3 72%, #e2e8f0 100%);
}

.dms-auth__texture::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 52% 42% at 50% 46%, rgba(255, 255, 255, 0.72), transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 22%, transparent 78%, rgba(15, 23, 42, 0.04) 100%);
}

.dms-auth__pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    --dms-auth-fade: radial-gradient(ellipse 92% 78% at 50% 44%, #000 18%, rgba(0, 0, 0, 0.55) 50%, transparent 82%);
    background-image:
        radial-gradient(circle at center, rgba(27, 54, 93, 0.22) 1.25px, transparent 1.35px),
        linear-gradient(rgba(27, 54, 93, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 54, 93, 0.09) 1px, transparent 1px),
        linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
    background-size: 72px 72px, 72px 72px, 72px 72px, 18px 18px, 18px 18px;
    background-position: -1px -1px, 0 0, 0 0, 0 0, 0 0;
    mask-image: var(--dms-auth-fade);
}

.dms-auth__pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(-12deg, transparent, transparent 47px, rgba(27, 54, 93, 0.04) 47px, rgba(27, 54, 93, 0.04) 48px),
        repeating-linear-gradient(12deg, transparent, transparent 47px, rgba(15, 23, 42, 0.025) 47px, rgba(15, 23, 42, 0.025) 48px);
    mask-image: var(--dms-auth-fade);
    opacity: 0.85;
}

.dms-auth__pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(27, 54, 93, 0.06) 0.75px, transparent 0);
    background-size: 24px 24px;
    mask-image: var(--dms-auth-fade);
    opacity: 0.7;
}

.dms-auth__frame {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.dms-auth__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    min-height: 36rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.65) inset,
        0 2px 4px rgba(15, 23, 42, 0.03),
        0 12px 32px rgba(15, 23, 42, 0.06),
        0 28px 56px rgba(27, 54, 93, 0.08);
    overflow: hidden;
}

.dms-auth__signin {
    padding: 2.75rem 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dms-auth__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.75rem;
}

.dms-auth__brand-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dms-navy);
}

.dms-auth__brand-sub {
    margin-top: 2px;
    font-size: 0.72rem;
    color: #64748b;
}

.dms-auth__title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.dms-auth__subtitle {
    margin: 0 0 1.35rem;
    font-size: 0.9375rem;
    color: #64748b;
}

.dms-auth__form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dms-auth__field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 0.75rem;
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    color: #64748b;
}

.dms-auth__field:focus-within {
    border-color: #007A94;
    box-shadow: 0 0 0 3px rgba(0, 122, 148, 0.16);
}

.dms-auth__field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    color: #0f172a;
}

.dms-auth__field input::placeholder {
    color: #94a3b8;
}

.dms-auth__error {
    margin: 0;
    font-size: 0.8125rem;
    color: #b91c1c;
}

.dms-auth__submit {
    margin-top: 0.35rem;
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: #007A94;
    color: #fff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 122, 148, 0.28);
}

.dms-auth__submit:hover {
    background: #00657A;
}

.dms-auth__hint {
    margin: 1.5rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

.dms-auth__promo {
    padding: 2.75rem 2rem 2rem;
    border-left: 1px solid #e8edf3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 60% at 80% 0%, rgba(37, 99, 235, 0.08), transparent 60%),
        #fff;
}

.dms-auth__promo-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.dms-auth__promo-mark {
    width: 2rem;
    height: 2rem;
    margin: 0;
    border-radius: 6px;
    display: inline-grid;
    place-items: center;
    background: var(--dms-blue);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.dms-auth__promo p {
    margin: 0 0 1.25rem;
    max-width: 22rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #475569;
}

.dms-auth__points {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dms-auth__points li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dms-navy);
}

.dms-auth__points span {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--dms-soft);
    color: var(--dms-blue);
}

.dms-auth__copyright {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
    .dms-auth__card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .dms-auth__promo {
        display: none;
    }

    .dms-auth__signin {
        padding: 1.75rem 1.5rem 1.5rem;
    }
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
}

.page-header > .btn-primary,
.page-header > .btn-ghost,
.page-header > div:last-child:not(:first-child) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.page-header h1 {
    font-size: 1.05rem;
    margin: 0;
    font-weight: 700;
    color: #1b365d;
    line-height: 1.2;
    outline: none;
}

.page-header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.72rem;
}

.form-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    padding: 18px 18px 16px;
    margin-bottom: 14px;
}

.form-card-title {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 650;
    color: #1e293b;
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: inherit;
}

.summary-card:hover {
    border-color: #c9d4e3;
}

.summary-card.is-active {
    border-color: #007A94;
    box-shadow: 0 0 0 1px #007A94;
}

.summary-card span {
    font-size: 0.75rem;
    color: #334155;
}

.summary-card strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1b365d;
}

@media (max-width: 960px) {
    .filter-grid,
    .kpi-grid,
    .stat-grid,
    .dashboard-charts,
    .dashboard-split,
    .summary-strip {
        grid-template-columns: 1fr;
    }
}

.row-actions .mud-icon-button {
    width: 30px !important;
    height: 30px !important;
}

.designer-layout {
    height: 100vh;
    background: #f3f5f8;
    overflow: hidden;
    color: #0f172a;
}

.designer-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f3f5f8;
}

.designer-chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 12px;
    background: #fff;
    color: #0f172a;
    border-bottom: 1px solid #e6ebf1;
    flex-shrink: 0;
}

.designer-chrome h1 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.designer-chrome p {
    margin: 0;
    color: #64748b;
    font-size: 0.72rem;
}

.designer-shell {
    flex: 1;
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr) 300px;
    min-height: 0;
    overflow: hidden;
    background: #f3f5f8;
}

.designer-shell.toolbox-collapsed {
    grid-template-columns: 40px minmax(0, 1fr) 300px;
}

.designer-shell.properties-collapsed {
    grid-template-columns: 196px minmax(0, 1fr) 40px;
}

.designer-shell.toolbox-collapsed.properties-collapsed {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
}

.designer-toolbox {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    color: #0f172a;
    padding: 14px 12px 12px;
    overflow: hidden;
    border-right: 1px solid #e6ebf1;
}

.designer-toolbox__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.designer-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.designer-panel-heading .designer-panel-title {
    margin: 0;
}

.designer-rail {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #334155;
    border-right: 1px solid #e6ebf1;
    cursor: pointer;
}

.designer-rail.right {
    border-right: 0;
    border-left: 1px solid #e6ebf1;
}

.designer-panel-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin: 2px 0 8px;
}

.toolbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid transparent;
    cursor: grab;
    user-select: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0f172a;
}

.toolbox-item__mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
    color: #fff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.toolbox-item__mark .mud-icon-root {
    color: #fff;
    font-size: 1rem;
}

.designer-more {
    width: 100%;
    margin-top: 8px;
    border: 0;
    background: #f8fafc;
    color: #007A94;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
}

.toolbox-item:hover {
    background: #f8fafc;
}

.toolbox-item--armed {
    background: #F4FBFC;
    border-color: #007A94;
}

.designer-canvas-wrap {
    position: relative;
    overflow: auto;
    min-width: 0;
    min-height: 0;
    background-color: #eef2f6;
}

.designer-canvas-sizer {
    position: relative;
    overflow: hidden;
}

.designer-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 3600px;
    height: 2200px;
    transform-origin: 0 0;
    background-color: #f8fafc;
    background-image: radial-gradient(#d5dee8 1px, transparent 1px);
    background-size: 20px 20px;
}

.designer-zoom-chrome {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 8px;
    padding: 0 4px;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    background: #f8fafc;
}

.designer-zoom-controls {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6ebf1;
}

.designer-zoom-button,
.designer-zoom-reset {
    min-width: 28px;
    height: 28px;
    border: 1px solid #d9e1ea;
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.designer-zoom-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.designer-zoom-reset {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0 8px;
}

.designer-zoom-readout {
    min-width: 40px;
    text-align: center;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
}

.wf-node {
    position: absolute;
    width: 176px;
    min-height: 62px;
    border-radius: 10px;
    color: white;
    padding: 8px 10px 10px 36px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    cursor: move;
    z-index: 2;
}

.wf-node-icon {
    position: absolute;
    left: 8px;
    top: 12px;
    width: 18px;
    height: 18px;
    opacity: 0.95;
}

.wf-node.selected {
    outline: 2px solid #1d4e89;
    outline-offset: 1px;
}

.wf-node-title {
    font-weight: 700;
    font-size: 0.75rem;
}

.wf-node-sub {
    font-size: 0.68rem;
    opacity: 0.9;
}

.wf-port {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid #1d4e89;
    top: 50%;
    margin-top: -8px;
    z-index: 3;
    cursor: crosshair;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.wf-port.input { left: -10px; }
.wf-port.output { right: -10px; }

.wf-port.output:hover,
.wf-node.linking .wf-port.output {
    background: #f59e0b;
    border-color: #b45309;
}

.wf-node.linking {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

.wf-node.drop-target {
    outline: 2px dashed #0f172a;
    outline-offset: 3px;
}

.designer-link-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    max-width: 460px;
    background: #fff;
    border: 1px solid #f59e0b;
    color: #92400e;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.designer-properties {
    min-width: 0;
    min-height: 0;
    background: #fff;
    color: #0f172a;
    padding: 14px 12px;
    overflow: auto;
    border-left: 1px solid #e6ebf1;
}

.designer-properties .app-field {
    margin-bottom: 8px;
}

.designer-properties .app-field-label {
    color: #475569;
    font-size: 0.72rem;
}

.designer-hint {
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.4;
    margin-top: 8px;
}

.designer-chip {
    display: inline-block;
    margin: 4px 4px 0 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef2f6;
    border: 1px solid #e6ebf1;
    color: #334155;
    font-size: 0.7rem;
}

.app-input {
    width: 100%;
    height: 38px;
    border: 1px solid #d5dce6;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 0.75rem;
    font-family: inherit;
    background: #fff;
    outline: none;
}

.app-input:focus {
    border-color: #007A94;
    box-shadow: 0 0 0 3px rgba(0, 122, 148, 0.16);
}

.app-primary-button {
    width: 100%;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #007A94;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

.app-primary-button:hover {
    background: #00657A;
}

.file-drop {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    border: 1px dashed #93b0cc;
    border-radius: 10px;
    background: #f8fafc;
    padding: 10px 12px;
    margin-bottom: 4px;
}

.file-drop input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #334155;
    pointer-events: none;
}

.file-drop-copy strong {
    font-size: 0.75rem;
    font-weight: 600;
}

.file-drop-copy span {
    font-size: 0.7rem;
    color: #64748b;
}

.file-name-link {
    display: inline-block;
    color: var(--emp-text);
    text-decoration: underline;
    cursor: pointer;
}

.file-name {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.comment-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.comment-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eef2f6;
}

.comment-list span {
    font-size: 0.68rem;
    color: #64748b;
}

.comment-list p {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #1e293b;
}

.doc-tabs {
    display: flex;
    gap: 4px;
    margin: -4px 0 12px;
    border-bottom: 1px solid #e6edf2;
}

.doc-tabs__tab {
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.doc-tabs__tab--active {
    color: #007A94;
    border-bottom-color: #007A94;
}

.doc-tabs__count {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #E6F4F7;
    color: #007A94;
    font-size: 0.68rem;
    font-weight: 700;
}

.activity-feed {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.activity-feed__item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 12px;
}

.activity-feed__rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.activity-feed__rail::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 0;
    width: 1px;
    background: #e6edf2;
}

.activity-feed__item:last-child .activity-feed__rail::before {
    display: none;
}

.activity-feed__dot {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: #007A94;
    box-shadow: 0 0 0 3px #E6F4F7;
}

.activity-feed__dot--flow {
    background: #2563eb;
    box-shadow: 0 0 0 3px #E8F0FE;
}

.activity-feed__dot--done {
    background: #15803d;
    box-shadow: 0 0 0 3px #E8F6EC;
}

.activity-feed__dot--read {
    background: #64748b;
    box-shadow: 0 0 0 3px #F1F5F9;
}

.activity-feed__dot--return {
    background: #b45309;
    box-shadow: 0 0 0 3px #FEF3E2;
}

.activity-feed__body {
    min-width: 0;
    padding-bottom: 16px;
}

.activity-feed__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.activity-feed__title {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #334155;
}

.activity-feed__title strong {
    color: #0f172a;
    font-weight: 650;
}

.activity-feed__time {
    flex: none;
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
}

.activity-feed__quote {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.thread {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.thread__item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.thread__avatar {
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.thread__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.thread__name {
    font-size: 0.8125rem;
    font-weight: 650;
    color: #0f172a;
}

.thread__context {
    padding: 1px 8px;
    border-radius: 999px;
    background: #E6F4F7;
    color: #007A94;
    font-size: 0.68rem;
    font-weight: 700;
}

.thread__time {
    margin-left: auto;
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
}

.thread__text {
    margin: 4px 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #1e293b;
}

.thread-compose {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef2f6;
}

.upload-source {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.upload-source__option {
    height: 36px;
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.upload-source__option--active {
    border-color: #007A94;
    background: #F4FBFC;
    color: #007A94;
    font-weight: 600;
}

.upload-template-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-bottom: 8px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
}

.upload-template-search:focus-within {
    border-color: #007A94;
    box-shadow: 0 0 0 3px rgba(0, 122, 148, 0.16);
}

.upload-template-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    color: #0f172a;
}

.upload-templates {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
}

.upload-template {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #e6edf2;
    border-radius: 8px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.upload-template--selected {
    border-color: #007A94;
    background: #F4FBFC;
}

.upload-template__mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #E6F4F7;
    color: #007A94;
    font-size: 0.75rem;
    font-weight: 700;
}

.upload-template__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.upload-template__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0f172a;
}

.upload-template__meta {
    font-size: 0.72rem;
    color: #64748b;
}

.wf-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
}

.wf-modal__card {
    width: min(520px, 100%);
    max-height: min(640px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}

.wf-modal__card--wide {
    width: min(880px, 100%);
    min-height: 560px;
    max-height: min(760px, calc(100vh - 48px));
}

.wf-modal__card--confirm {
    width: min(420px, 100%);
}

.wf-modal__body {
    flex: 1;
    overflow: auto;
    padding: 4px 20px 20px;
}

.wf-modal__label {
    margin: 4px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.wf-run {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 8px 0 4px;
}

.wf-run__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.8125rem;
    color: #1e293b;
    cursor: pointer;
}

.wf-run__option input {
    margin: 0;
    accent-color: #007A94;
}

.wf-modal__body .doc-tabs {
    margin: 0 0 16px;
}

.doc-tabs__tab:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wf-progress {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.wf-progress th,
.wf-progress td {
    padding: 10px 12px;
    border-bottom: 1px solid #e6edf2;
    text-align: left;
    font-size: 0.8125rem;
    color: #1e293b;
}

.wf-progress th {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f8fafc;
}

.wf-progress__status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wf-progress__status--open {
    background: #E6F4F7;
    color: #007A94;
}

.wf-progress__status--done {
    background: #e8f6ee;
    color: #157347;
}

.wf-progress__status--stop {
    background: #fdecec;
    color: #b42318;
}

.wf-modal__header,
.wf-modal__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
}

.wf-modal__footer {
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid #eef2f6;
}

.wf-modal__title {
    margin: 2px 0 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.wf-modal__sub {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: #64748b;
}

.wf-modal__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px 12px;
    padding: 0 12px;
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
}

.wf-modal__search:focus-within {
    border-color: #007A94;
    box-shadow: 0 0 0 3px rgba(0, 122, 148, 0.16);
}

.wf-modal__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    color: #0f172a;
}

.wf-modal__search input::placeholder {
    color: #94a3b8;
}

.wf-modal__list {
    overflow: auto;
    padding: 0 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wf-choice {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #e6edf2;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.wf-choice--selected {
    border-color: #007A94;
    background: #F4FBFC;
}

.wf-choice--disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.wf-choice input {
    margin: 0;
    accent-color: #007A94;
}

.wf-choice__copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wf-choice__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.wf-choice__name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0f172a;
}

.wf-choice__meta {
    flex: none;
    font-size: 0.68rem;
    color: #94a3b8;
}

.wf-choice__path {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

.wf-modal__footer .emp-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    background: #e6edf2;
    color: #94a3b8;
    border-color: #e6edf2;
}

.empty-state {
    padding: 28px;
    text-align: center;
    color: #64748b;
}

.document-preview {
    width: 100%;
    min-height: 360px;
    max-height: 480px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    margin-bottom: 10px;
}

.document-editor textarea,
.document-editor .mud-input-slot {
    font-family: "Segoe UI", Inter, sans-serif;
    min-height: 360px;
}

.office-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0b1b33;
    color: #f8fafc;
}

.office-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 16px;
    background: #0b1b33;
    border-bottom: 1px solid #1c3354;
    flex-shrink: 0;
}

.office-chrome h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.office-chrome p {
    margin: 0;
    color: #93a4bb;
    font-size: 0.78rem;
}

.office-ribbon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #13233d;
    border-bottom: 1px solid #1c3354;
    flex-shrink: 0;
}

.office-ribbon .mud-button-root,
.office-ribbon .mud-icon-button {
    color: #f8fafc !important;
}

.word-canvas {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #c5d0dc;
    padding: 28px 16px 48px;
}

.word-page {
    width: min(816px, 100%);
    min-height: 1056px;
    margin: 0 auto;
    background: #fff;
    color: #111827;
    padding: 72px 80px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
    outline: none;
    font-family: Calibri, "Segoe UI", serif;
    font-size: 16px;
    line-height: 1.45;
}

.word-sheet {
    width: min(816px, 100%);
    min-height: 1056px;
    margin: 0 auto 28px;
    background: #fff;
    color: #111827;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
}

.word-page-note {
    width: min(816px, 100%);
    margin: 0 auto 12px;
    color: #334155;
    font-size: 13px;
}

.word-signature-footer {
    margin: auto 48px 36px;
    height: 112px;
    border: 1.5px solid #111827;
    background: #fff;
    flex-shrink: 0;
}

.word-hf {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 14px 48px 10px;
    background: #f8fafc;
}

.word-hf-header {
    border-bottom: 1px solid #cbd5e1;
}

.word-hf-footer {
    border-top: 1px solid #cbd5e1;
    margin-top: auto;
    padding-bottom: 16px;
}

.word-hf-label,
.office-hf-bar .word-hf-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}

.word-hf-input,
.office-hf-input,
.ppt-title,
.ppt-body {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    color: #0f172a;
}

.word-hf-center { text-align: center; }
.word-hf-right { text-align: right; }

.word-hf-note {
    padding: 10px 48px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
}

.word-sheet-chrome {
    padding: 18px 48px 10px;
}

.word-sheet-footer {
    margin-top: auto;
    padding-bottom: 18px;
}

.word-sheet-chrome table,
.doc-rich-header table,
.doc-rich-footer table {
    border-collapse: collapse;
    width: 100%;
}

.word-sheet-chrome img,
.doc-rich-header img,
.doc-rich-footer img {
    max-width: 100%;
    height: auto;
}

.doc-rich-header {
    margin-bottom: 16px;
}

.doc-rich-footer {
    margin-top: 16px;
}

.word-page-body {
    flex: 1;
    min-height: 720px;
    padding: 28px 72px 36px;
    outline: none;
    font-family: Calibri, "Segoe UI", serif;
    font-size: 16px;
    line-height: 1.45;
}

.word-page-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0 14px;
}

.word-page-body td,
.word-page-body th {
    border: 1px solid #94a3b8;
    padding: 4px 6px;
    vertical-align: middle;
}

.word-page-body td p,
.word-page-body th p {
    margin: 0;
}

.word-page-body img {
    max-width: 100%;
    height: auto;
}

.word-page-body h1 { font-size: 28px; margin: 0 0 12px; }
.word-page-body h2 { font-size: 22px; margin: 18px 0 10px; }
.word-page-body h3 { font-size: 18px; margin: 16px 0 8px; }
.word-page-body p { margin: 0 0 10px; }

.office-hf-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 16px;
    background: #13233d;
    border-bottom: 1px solid #1c3354;
    flex-shrink: 0;
}

.office-hf-bar .word-hf-label {
    color: #9fb3c8;
}

.ppt-shell {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
}

.ppt-rail {
    overflow: auto;
    background: #0b1b33;
    border-right: 1px solid #1c3354;
    padding: 12px;
}

.ppt-thumb {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #1c3354;
    background: #13233d;
    color: #e2e8f0;
    cursor: pointer;
}

.ppt-thumb.selected {
    border-color: #5b9fdc;
    outline: 2px solid #5b9fdc;
}

.ppt-stage {
    overflow: auto;
    background: #1e293b;
    padding: 24px;
}

.ppt-slide {
    width: min(960px, 100%);
    min-height: 540px;
    margin: 0 auto;
    background: #fff;
    color: #0f172a;
    padding: 28px 36px 20px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.35);
}

.ppt-hf-preview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
    color: #64748b;
    font-size: 12px;
}

.ppt-hf-preview span:nth-child(2) { text-align: center; }
.ppt-hf-preview span:nth-child(3) { text-align: right; }

.ppt-hf-preview-footer {
    margin-top: 24px;
    margin-bottom: 0;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.ppt-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    padding: 10px 12px;
}

.ppt-body {
    min-height: 280px;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
}

.ppt-footer-preview {
    margin-top: 24px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

.word-page:focus {
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28), 0 0 0 3px rgba(91, 159, 220, 0.35);
}

.word-page h1 { font-size: 28px; margin: 0 0 12px; }
.word-page h2 { font-size: 22px; margin: 18px 0 10px; }
.word-page h3 { font-size: 18px; margin: 16px 0 8px; }
.word-page p { margin: 0 0 10px; }
.word-page table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.word-page td, .word-page th { border: 1px solid #94a3b8; padding: 6px 8px; }

.word-preview {
    max-height: 360px;
    overflow: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    color: #111827;
}

.xls-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #e8edf3;
}

.xls-formula-bar {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #cbd5e1;
    flex-shrink: 0;
}

.xls-addr {
    font-weight: 700;
    color: #0b1b33;
    text-align: center;
    background: #e2e8f0;
    border-radius: 6px;
    padding: 6px 0;
}

.xls-formula {
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 10px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
}

.xls-grid-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.xls-grid {
    border-collapse: collapse;
    min-width: 100%;
    background: #fff;
    color: #0f172a;
}

.xls-grid th {
    background: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 4px 8px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.xls-grid tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 40px;
    text-align: center;
}

.xls-grid td {
    min-width: 92px;
    height: 26px;
    border: 1px solid #e2e8f0;
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 15px;
    cursor: cell;
}

.xls-grid td.xls-selected {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    background: #eff6ff;
}

.xls-grid td.xls-bold {
    font-weight: 700;
}

.xls-grid td.xls-editing {
    overflow: visible;
    background: #fff;
}

.office-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

@media (max-width: 960px) {
    .stat-grid, .kpi-grid, .dashboard-charts, .dashboard-split, .filter-grid {
        grid-template-columns: 1fr;
    }
    .word-page { padding: 32px 24px; min-height: 640px; }
}

/* Employees directory — matches the CRM projects list */
.dir-page {
    --emp-primary: #007A94;
    --emp-primary-dark: #00657A;
    --emp-primary-soft: #E6F4F7;
    --emp-surface: #ffffff;
    --emp-border: #EDEBE9;
    --emp-border-light: #F3F2F1;
    --emp-text: #242424;
    --emp-text-muted: #616161;
    margin: -20px -28px -40px;
    min-height: calc(100vh - var(--mud-appbar-height, 52px));
    background: var(--emp-surface);
    color: var(--emp-text);
}

.emp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--emp-border);
    background: var(--emp-surface);
}

.emp-header__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.emp-header__icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--emp-primary-soft);
    color: var(--emp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emp-header__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.emp-header__title {
    margin: 0;
    font-size: 1.125rem !important;
    font-weight: 600;
    line-height: 1.3;
    color: var(--emp-text);
}

.emp-header__desc {
    margin: 0.3125rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--emp-text-muted);
}

.emp-count-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 0.5rem;
    border: 1px solid var(--emp-border);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--emp-text-muted);
}

.emp-header__actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.emp-page__body {
    padding: 0 1.5rem 2rem;
}

.dir-page .pm-directory {
    max-width: 1180px;
}

.dir-page .pm-directory__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 0.75rem;
}

.dir-page .pm-board-search {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: 220px;
    height: 36px;
    padding: 0 0.65rem;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    background: var(--emp-surface);
    color: var(--emp-text-muted);
}

.dir-page .pm-board-search .mud-icon-root {
    font-size: 1.05rem;
    width: 1.05rem;
    height: 1.05rem;
}

.dir-page .pm-board-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--emp-text);
}

.dir-page .pm-directory__filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    background: var(--emp-surface);
    color: #42526e;
    cursor: pointer;
}

.dir-page .pm-directory__filter-btn:hover {
    background: #f4f5f7;
}

.dir-page .pm-directory__filter-btn--active {
    background: var(--emp-primary-soft);
    border-color: var(--emp-primary);
    color: var(--emp-primary);
}

.dir-page .pm-directory__filter-btn .mud-icon-root {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
}

.dir-page .pm-directory__filter-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--emp-primary);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.dir-page .pm-directory__clear {
    border: 0;
    background: transparent;
    padding: 0 0.35rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--emp-primary);
    cursor: pointer;
}

.dir-page .pm-directory__clear:hover {
    text-decoration: underline;
}

.dir-page .pm-directory__filters {
    width: 100%;
    margin: -0.25rem 0 0.75rem;
    border: 1px solid #dfe1e6;
    border-radius: 8px;
    background: var(--emp-surface);
    box-shadow: 0 8px 16px -4px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
}

.dir-page .pm-directory__filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 40px;
    padding: 0.35rem 0.5rem 0.35rem 0.875rem;
    border-bottom: 1px solid #ebecf0;
}

.dir-page .pm-directory__filters-title {
    font-size: 0.8125rem;
    font-weight: 600;
}

.dir-page .pm-directory__filters-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.dir-page .pm-directory__filters-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #6b778c;
    cursor: pointer;
}

.dir-page .pm-directory__filters-close:hover {
    background: #f4f5f7;
    color: var(--emp-text);
}

.dir-page .pm-directory__filters-close .mud-icon-root {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.dir-page .pm-directory__filters-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 0.75rem 1rem;
    padding: 0.85rem 0.875rem;
}

.dir-page .pm-directory__filter {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.dir-page .pm-directory__filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b778c;
}

.dir-page .pm-directory__filter-search {
    width: 100%;
}

.dir-page .pm-directory__status-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 36px;
    gap: 0.375rem;
}

.dir-page .pm-directory__status-chips .pm-directory__lozenge {
    height: 24px;
    padding: 0 0.625rem;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    opacity: 0.55;
}

.dir-page .pm-directory__status-chips .pm-directory__lozenge:hover {
    opacity: 0.85;
}

.dir-page .pm-directory__status-chips .pm-directory__lozenge--selected {
    opacity: 1;
    border-color: currentColor;
}

.dir-page .pm-directory__filters-foot {
    padding: 0.5rem 0.875rem 0.7rem;
    border-top: 1px solid #ebecf0;
    font-size: 0.75rem;
    color: #6b778c;
}

.dir-page .pm-directory__list {
    border: 1px solid var(--emp-border);
    border-radius: 8px;
    overflow: visible;
    background: var(--emp-surface);
}

.dir-page .pm-directory__cols,
.dir-page .pm-directory__row {
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) 100px minmax(110px, 1fr) minmax(110px, 1fr) 120px 80px 40px;
}

.doc-library .pm-directory {
    max-width: none;
}

.dir-page .dir-cols-docs {
    overflow-x: auto;
}

.dir-page .dir-cols-docs .pm-directory__cols,
.dir-page .dir-cols-docs .pm-directory__row {
    min-width: 1180px;
    grid-template-columns: minmax(220px, 1.8fr) minmax(120px, 1fr) minmax(130px, 1fr) 72px 108px minmax(130px, 1fr) 112px 124px 40px;
}

.dir-page .dir-cols-templates .pm-directory__cols,
.dir-page .dir-cols-templates .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) 120px minmax(120px, 1fr) minmax(140px, 1fr) minmax(140px, 1.2fr) 40px;
}

.dir-page .dir-cols-workflows .pm-directory__cols,
.dir-page .dir-cols-workflows .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) 160px 40px;
}

.dir-page .dir-cols-notifications .pm-directory__cols,
.dir-page .dir-cols-notifications .pm-directory__row {
    grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.6fr) 180px 90px 40px;
}

.dir-page .dir-cols-layouts .pm-directory__cols,
.dir-page .dir-cols-layouts .pm-directory__row {
    grid-template-columns: minmax(200px, 1.3fr) minmax(110px, 0.8fr) minmax(140px, 1fr) minmax(140px, 1fr) 40px;
}

.dir-page .dir-cols-tasks .pm-directory__cols,
.dir-page .dir-cols-tasks .pm-directory__row {
    grid-template-columns: minmax(200px, 1.5fr) minmax(120px, 1fr) minmax(120px, 0.9fr) 110px 140px 40px;
}

.dir-page .dir-cols-sign .pm-directory__cols,
.dir-page .dir-cols-sign .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) minmax(120px, 1fr) 110px 110px 150px;
}

.dir-page .dir-cols-qa .pm-directory__cols,
.dir-page .dir-cols-qa .pm-directory__row {
    grid-template-columns: minmax(180px, 1.2fr) minmax(140px, 1fr) 110px minmax(180px, 1.4fr);
}

.dir-page .dir-cols-archive .pm-directory__cols,
.dir-page .dir-cols-archive .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) 160px;
}

.dir-page .dir-cols-due .pm-directory__cols,
.dir-page .dir-cols-due .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) 140px minmax(140px, 1fr) auto;
}

.dir-page .dir-cols-bin .pm-directory__cols,
.dir-page .dir-cols-bin .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) 140px minmax(180px, 1fr) auto;
}

.archive-actions {
    display: inline-flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.confirm-card {
    width: min(440px, calc(100% - 2rem));
}

.dir-page .dir-cols-audit .pm-directory__cols,
.dir-page .dir-cols-audit .pm-directory__row {
    grid-template-columns: minmax(180px, 1.2fr) 160px minmax(120px, 0.9fr) minmax(110px, 0.8fr) minmax(180px, 1.5fr);
}

.dir-page .dir-cols-migration .pm-directory__cols,
.dir-page .dir-cols-migration .pm-directory__row {
    grid-template-columns: minmax(200px, 1.5fr) minmax(120px, 1fr) 120px 90px 90px 90px;
}

.dir-page .dir-cols-users .pm-directory__cols,
.dir-page .dir-cols-users .pm-directory__row {
    grid-template-columns: minmax(200px, 1.3fr) minmax(140px, 1fr) minmax(160px, 1.4fr) 80px 40px;
}

.dir-page .dir-cols-lists .pm-directory__cols,
.dir-page .dir-cols-lists .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) 120px 40px;
}

.dir-page .dir-cols-forms .pm-directory__cols,
.dir-page .dir-cols-forms .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) 120px 110px 40px;
}

.dir-page .dir-cols-roles .pm-directory__cols,
.dir-page .dir-cols-roles .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) 120px 90px 40px;
}

.dir-page .dir-cols-form-results .pm-directory__cols,
.dir-page .dir-cols-form-results .pm-directory__row {
    grid-template-columns: minmax(220px, 1.6fr) 160px 140px;
}

.dir-page .emp-settings {
    margin-top: 18px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    padding: 18px 20px 8px;
}

.dir-page .emp-settings__title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.dir-page .emp-settings__desc {
    margin: 0 0 16px;
    font-size: 0.8125rem;
    color: #6b778c;
}

.dir-page .emp-settings__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
}

.dir-page .emp-settings__save {
    margin-top: 8px;
}

.dir-page .set-list {
    border: 1px solid var(--emp-border);
    border-radius: 8px;
    background: var(--emp-surface);
    overflow: hidden;
}

.dir-page .set-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 360px) auto;
    align-items: center;
    gap: 16px 20px;
    padding: 16px 18px;
    border-top: 1px solid var(--emp-border-light);
}

.dir-page .set-row:first-child {
    border-top: 0;
}

.dir-page .set-row__key {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a1a;
}

.dir-page .set-row__desc {
    margin-top: 2px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #6b778c;
}

.dir-page .set-row__input {
    width: 100%;
}

.dir-page .set-row__save {
    min-width: 72px;
}

@media (max-width: 800px) {
    .dir-page .set-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .dir-page .emp-settings__grid {
        grid-template-columns: 1fr;
    }
}

.dir-page .pm-directory__filter--wide {
    grid-column: 1 / -1;
}

.dir-page .dir-select .mud-input-outlined-border {
    border-radius: 4px !important;
}

.dir-page .pm-directory__cols,
.dir-page .pm-directory__row {
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem;
}

.dir-page .pm-directory__cols {
    min-height: 36px;
    border-bottom: 1px solid var(--emp-border);
    background: var(--emp-border-light);
    color: var(--emp-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dir-page .pm-directory__cols-center {
    justify-self: center;
    text-align: center;
}

.dir-page .pm-directory__row {
    min-height: 56px;
    border-bottom: 1px solid var(--emp-border-light);
    cursor: pointer;
}

.dir-page .pm-directory__row:hover {
    background: #f4f5f7;
}

.dir-page .pm-directory__project {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.dir-page .pm-directory__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.doc-file-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #64748b;
}

.doc-file-icon--word { color: #2b579a; }
.doc-file-icon--excel { color: #217346; }
.doc-file-icon--slides { color: #d24726; }
.doc-file-icon--pdf { color: #d32f2f; }
.doc-file-icon--image { color: #007a94; }
.doc-file-icon--text { color: #475569; }

.dir-page .pm-directory__copy {
    min-width: 0;
}

.dir-page .pm-directory__name {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--emp-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

.dir-page button.pm-directory__name {
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.dir-page .pm-directory__meta,
.dir-page .pm-directory__number,
.dir-page .pm-directory__job,
.dir-page .pm-directory__department {
    font-size: 0.75rem;
    color: var(--emp-text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dir-page .pm-directory__lozenge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 0.5rem;
    border-radius: 3px;
    background: #dfe1e6;
    color: #42526e;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.dir-page .pm-directory__lozenge--local,
.dir-page .pm-directory__lozenge--no,
.dir-page .pm-directory__lozenge--other { background: #dfe1e6; color: #42526e; }
.dir-page .pm-directory__lozenge--directory { background: #deebff; color: #0747a6; }
.dir-page .pm-directory__lozenge--yes { background: #e3fcef; color: #006644; }

.dir-page .pm-directory__action {
    justify-self: end;
}

.dir-page .pm-directory__empty {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--emp-text-muted);
}

.dir-page .pm-backlog__create {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: 0.5rem;
    width: 100%;
    min-height: 42px;
    padding: 0 0.75rem;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--emp-border-light);
    background: var(--emp-surface);
    color: var(--emp-text-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.dir-page .pm-backlog__create:hover,
.dir-page .pm-backlog__create:focus-visible {
    background: var(--emp-border-light);
    color: var(--emp-primary);
    outline: none;
}

.dir-page .pm-backlog__create-plus {
    width: 28px;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
}

.emp-row-menu .mud-icon-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    color: #616161 !important;
}

.emp-row-menu .mud-icon-button:hover {
    background: #f3f2f1 !important;
}

.emp-row-menu .mud-popover {
    z-index: 1600 !important;
}

.emp-row-popover.mud-popover-paper,
.emp-row-popover.mud-paper {
    border-radius: 10px !important;
    border: 1px solid #e7e5e4 !important;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.18), 0 0 1px rgba(15, 23, 42, 0.12) !important;
    background: #fff !important;
    overflow: hidden;
}

.emp-row-popover__list.mud-list {
    min-width: 196px;
    padding: 6px !important;
}

.emp-row-popover__item.mud-menu-item,
.emp-row-popover__item.mud-list-item {
    min-height: 36px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: #334155 !important;
    text-transform: none !important;
}

.emp-row-popover__item .mud-list-item-icon,
.emp-row-popover__item .mud-menu-item-icon {
    min-width: 28px !important;
    color: #64748b !important;
}

.emp-row-popover__item .mud-icon-root {
    font-size: 1.05rem !important;
}

.emp-row-popover__item:hover,
.emp-row-popover__item.mud-menu-item:hover {
    background: #f4f7fb !important;
}

.emp-row-popover__divider {
    margin: 4px 6px !important;
    border-color: #eeeae6 !important;
}

.emp-row-popover__item--danger,
.emp-row-popover__item--danger .mud-list-item-icon,
.emp-row-popover__item--danger .mud-icon-root {
    color: #b42318 !important;
}

.emp-row-popover__item--danger:hover,
.emp-row-popover__item--danger.mud-menu-item:hover {
    background: #fdf2f2 !important;
}

.emp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.emp-btn--primary {
    background: var(--emp-primary, #007A94);
    color: #fff;
}

.emp-btn--primary:hover {
    background: var(--emp-primary-dark, #00657A);
}

.emp-btn--outline {
    background: transparent;
    border-color: var(--emp-primary, #007A94);
    color: var(--emp-primary, #007A94);
}

.emp-btn--outline:hover {
    background: var(--emp-primary-soft, #E6F4F7);
}

.emp-btn--text {
    background: transparent;
    color: var(--emp-text-muted, #616161);
}

.emp-btn--text:hover {
    background: #f3f2f1;
}

.emp-btn--danger {
    background: transparent;
    color: #b42318;
}

.emp-btn--danger:hover {
    background: #fdf2f2;
}

.emp-btn--danger-fill {
    background: #b42318;
    color: #fff;
}

.emp-btn--danger-fill:hover {
    background: #912018;
}

.emp-btn--danger-fill:disabled {
    opacity: 0.6;
}

.emp-drawer__section-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.emp-drawer {
    --emp-primary: #007A94;
    --emp-primary-dark: #00657A;
    --emp-primary-soft: #E6F4F7;
    --emp-surface: #ffffff;
    --emp-border: #EDEBE9;
    --emp-text: #242424;
    --emp-text-muted: #616161;
    z-index: 1500 !important;
}

.emp-drawer .mud-drawer-content {
    background: var(--emp-surface) !important;
    padding: 0 !important;
}

.emp-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.emp-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--emp-border);
}

.emp-drawer__eyebrow {
    font-size: 0.75rem;
    color: var(--emp-text-muted);
}

.emp-drawer--view .mud-drawer-content,
.emp-drawer--form .mud-drawer-content {
    background: #f6f7f9 !important;
}

.emp-drawer--view .emp-drawer__header,
.emp-drawer--view .emp-drawer__footer,
.emp-drawer--form .emp-drawer__header,
.emp-drawer--form .emp-drawer__footer {
    background: #fff;
}

.emp-drawer--view .emp-drawer__body,
.emp-drawer--form .emp-drawer__body {
    background: #f6f7f9;
    gap: 0.875rem;
}

.emp-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.emp-form__card {
    padding-bottom: 0.85rem;
}

.emp-form__card .emp-form-grid {
    margin-top: 0.35rem;
}

.emp-form__card .app-field {
    margin-bottom: 0;
}

.emp-form__card .app-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
}

.emp-drawer--form .mud-input input::placeholder,
.emp-drawer--form .mud-input-slot::placeholder,
.emp-drawer--form textarea::placeholder,
.emp-drawer--form .mud-input-placeholder {
    color: #92a1b5 !important;
    opacity: 1 !important;
}

.emp-form__login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #eeeae6;
    border-radius: 10px;
    background: #fafbfc;
}

.emp-form__login-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
}

.emp-form__login-hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: #64748b;
}

.emp-view {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.emp-view__profile,
.emp-view__card {
    background: #fff;
    border: 1px solid #eceae8;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.emp-view__profile {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.05rem;
}

.emp-view__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emp-view__identity {
    min-width: 0;
}

.emp-view__name {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.emp-view__role {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.emp-view__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.emp-view__chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 600;
}

.emp-view__chip--active {
    background: #e7f8ef;
    color: #0f7a45;
}

.emp-view__chip--inactive {
    background: #fdecec;
    color: #b42318;
}

.emp-view__chip--login {
    background: #e8f1fb;
    color: #1d4e89;
}

.emp-view__card {
    padding: 0.35rem 1.05rem 0.4rem;
}

.emp-view__card-title {
    margin: 0.7rem 0 0.15rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.emp-view__rows {
    margin: 0;
}

.emp-view__rows > div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.72rem 0;
    border-bottom: 1px solid #f1f0ee;
}

.emp-view__rows > div:last-child {
    border-bottom: 0;
}

.emp-view__rows dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
}

.emp-view__rows dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.emp-member-list {
    border: 1px solid #EDEBE9;
    border-radius: 8px;
    overflow: hidden;
}

.emp-member-list__empty {
    padding: 16px;
    color: #616161;
    font-size: 0.875rem;
}

.emp-member-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 36px;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #F3F2F1;
    font-size: 0.875rem;
}

.emp-member-row:first-child {
    border-top: 0;
}

.emp-member-row__name {
    font-weight: 500;
    color: #1a1a1a;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.emp-member-row__email {
    color: #616161;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.emp-drawer__title {
    font-size: 1.125rem !important;
    font-weight: 600;
    color: var(--emp-text);
}

.emp-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.emp-drawer__footer-start {
    margin-right: auto;
}

.emp-drawer__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--emp-border);
    background: var(--emp-surface);
}

.emp-form-section__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
}

.emp-form-section__icon {
    color: var(--emp-primary) !important;
}

.emp-form-section__title {
    font-size: 0.875rem;
    font-weight: 600;
}

.emp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
}

.emp-form-grid__full {
    grid-column: 1 / -1;
}

.emp-drawer .app-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
}

@media (max-width: 900px) {
    .dir-page .pm-directory__cols {
        display: none;
    }

    .dir-page .pm-directory__row {
        grid-template-columns: minmax(0, 1fr) 40px;
        min-height: 64px;
        padding: 0.65rem 0.75rem;
    }

    .dir-page .pm-directory__number,
    .dir-page .pm-directory__job,
    .dir-page .pm-directory__department,
    .dir-page .pm-directory__source,
    .dir-page .pm-directory__login {
        display: none;
    }

    .dir-page .pm-directory__filters-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emp-form-grid {
        grid-template-columns: 1fr;
    }

    .emp-view__rows > div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.doc-view-toggle {
    display: inline-flex;
    height: 36px;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.doc-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 100%;
    padding: 0 0.7rem;
    border: 0;
    background: transparent;
    color: #42526e;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.doc-view-toggle__btn + .doc-view-toggle__btn {
    border-left: 1px solid #dfe1e6;
}

.doc-view-toggle__btn--active {
    background: var(--emp-primary-soft);
    color: var(--emp-primary);
}

.doc-new-folder {
    height: 36px;
    min-height: 36px;
    padding: 0 0.75rem;
    gap: 0.35rem;
}

.doc-workflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-folder-view {
    margin-bottom: 0.75rem;
}

.doc-crumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 0.75rem;
    color: #6b778c;
    font-size: 0.8125rem;
}

.doc-crumb button {
    border: 0;
    background: transparent;
    color: var(--emp-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.doc-crumb__current {
    color: #172b4d;
    font-weight: 600;
}

.doc-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.doc-folder-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid #dfe1e6;
    border-radius: 8px;
    background: #fff;
    color: #172b4d;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.doc-folder-card:hover {
    border-color: var(--emp-primary);
    background: var(--emp-primary-soft);
}

.doc-folder-card .mud-icon-root {
    color: var(--emp-primary);
}

.doc-folder-card small {
    color: #6b778c;
}

.doc-page .emp-header {
    align-items: center;
    flex-wrap: nowrap;
}

.doc-page .emp-header__identity {
    flex: 1 1 auto;
    min-width: 0;
}

.doc-page .emp-header__identity > .doc-action {
    flex-shrink: 0;
}

.doc-heading {
    min-width: 0;
}

.doc-page .emp-header__title-row {
    min-width: 0;
    align-items: center;
}

.doc-page .emp-header__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-page .status-pill {
    flex-shrink: 0;
}

.doc-actions {
    display: flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    gap: 0.4rem;
    margin-left: 1rem;
}

.doc-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    background: #fff;
    color: #42526e;
    cursor: pointer;
    text-decoration: none;
    line-height: 0;
}

.doc-action .mud-icon-root {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
}

.doc-action:hover,
.doc-action--active {
    background: var(--emp-primary-soft);
    border-color: var(--emp-primary);
    color: var(--emp-primary);
}

.doc-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wf-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.wf-choice-btn {
    border: 1px solid #d0d7de;
    background: #fff;
    color: #242424;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.wf-choice-btn--active {
    background: #e6f4f7;
    border-color: #007a94;
    color: #00657a;
}

.wf-choice-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wf-people-add {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.wf-people-add .mud-select {
    flex: 1;
}

.wf-people {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.wf-people li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #edebe9;
    font-size: 0.875rem;
}

.wf-people__tools {
    display: flex;
    gap: 0.25rem;
}

.wf-people__tools button {
    border: 1px solid #d0d7de;
    background: #fff;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.wf-people__tools button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.doc-action--quiet {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
}

.doc-page .emp-page__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}

.doc-meta,
.doc-panel {
    margin-top: 0;
}

.doc-meta__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 0.55rem 0 0.8rem;
}

.doc-meta__grid > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
    padding: 0;
    border: 0;
}

.doc-meta__grid dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8886;
}

.doc-meta__grid dd {
    font-size: 0.875rem;
    font-weight: 600;
    color: #242424;
}

.doc-subhead {
    margin-top: 1.25rem;
}

.doc-props {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.doc-props li {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) 32px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid #e6e8ec;
}

.doc-prop-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    margin-top: 0.75rem;
}

.doc-policy-form {
    grid-template-columns: minmax(220px, 360px);
}

.doc-hash {
    word-break: break-all;
}

.doc-rich,
.doc-text {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    background: #fff;
    max-height: 640px;
    overflow: auto;
}

.doc-text {
    white-space: pre-wrap;
    font-family: Consolas, monospace;
    font-size: 0.8125rem;
}

.doc-sheet-wrap {
    overflow: auto;
    margin-top: 0.75rem;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
}

.doc-sheet {
    border-collapse: collapse;
    min-width: 100%;
}

.doc-sheet td {
    min-width: 88px;
    padding: 0.35rem 0.5rem;
    border: 1px solid #e6e8ec;
    font-size: 0.8125rem;
}

.doc-slides {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
}

.doc-slides li {
    margin-bottom: 0.85rem;
}

.app-main:has(.hf-designer) {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.app-main:has(.hf-designer) .app-page {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
}

.hf-designer {
    margin: 0;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hf-designer .emp-header {
    flex-shrink: 0;
    padding: 0.7rem 1.25rem;
}

.hf-designer__body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 1rem;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0.75rem 1.25rem 1rem;
}

.hf-designer__form,
.hf-designer__preview {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hf-designer__scroll,
.hf-designer__preview-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.hf-designer__preview {
    background: #f4f7fb;
}

.hf-designer__preview .emp-view__card-title {
    margin-bottom: 0.15rem;
}

.hf-designer__form {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hf-designer__preview {
    padding: 0.85rem 1.1rem 1rem;
}

.hf-section {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    padding: 10px 12px 12px;
    margin-bottom: 10px;
}

.hf-section:last-child {
    margin-bottom: 0;
}

.hf-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.hf-section__head .emp-view__card-title {
    margin: 0;
}

.hf-section .emp-form__login,
.hf-default {
    margin-top: 0.35rem;
    padding: 0.55rem 0.75rem;
}

.hf-logo-row,
.hf-cell__tools,
.hf-row__actions,
.hf-row__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hf-logo-row {
    margin-bottom: 8px;
}

.hf-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.hf-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.hf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    background: #f8fafc;
}

.hf-row:last-child {
    margin-bottom: 0;
}

.hf-row__bar {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
}

.hf-row__name {
    font-size: 0.75rem;
    font-weight: 650;
    color: #475569;
}

.hf-row__actions {
    gap: 2px;
}

.hf-row__add,
.hf-row__remove {
    height: 28px;
    padding: 0 8px;
    font-size: 0.75rem;
}

.hf-row__remove {
    color: #b42318;
}

.hf-row__remove:hover {
    background: #fdf2f2;
}

.hf-cell {
    flex: 1 1 180px;
    min-width: 160px;
    padding: 6px;
    border: 1px solid #e6ebf2;
    border-radius: 6px;
    background: #fff;
}

.hf-cell__text {
    width: 100%;
    height: 32px;
    padding: 0 0.55rem;
    border: 1px solid #dfe1e6;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 0.8125rem;
    color: #1a1a1a;
}

.hf-cell__text:focus {
    outline: none;
    border-color: #007a94;
}

.hf-cell__tools {
    margin-top: 6px;
    gap: 4px;
}

.hf-align,
.hf-seg {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #dfe1e6;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.hf-align .hf-align__btn,
.hf-seg .hf-align__btn {
    border: 0;
    border-radius: 0;
    border-right: 1px solid #e6ebf2;
    min-width: 32px;
    height: 28px;
}

.hf-align .hf-align__btn {
    min-width: 64px;
    padding: 0 10px;
}

.hf-align .hf-align__btn:last-child,
.hf-seg .hf-align__btn:last-child {
    border-right: 0;
}

.hf-align__btn,
.hf-token {
    height: 28px;
    border: 1px solid #dfe1e6;
    border-radius: 6px;
    background: #fff;
    color: #42526e;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.hf-align__btn {
    min-width: 28px;
    padding: 0 0.4rem;
}

.hf-align__btn--active {
    background: #e6f4f7;
    color: #007a94;
}

.hf-align__btn--quiet {
    color: #64748b;
}

.hf-align__btn--quiet:hover {
    color: #b42318;
    background: #fdf2f2;
}

.hf-token {
    max-width: 108px;
    padding: 0 0.3rem;
}

.hf-sheet {
    background: #fff;
    border: 1px solid #dfe1e6;
    padding: 0.75rem;
}

.hf-sheet__table {
    width: 100%;
    border-collapse: collapse;
}

.hf-sheet__table td {
    border: 1px solid #1a1a1a;
    padding: 0.35rem 0.45rem;
    font-size: 0.75rem;
    vertical-align: middle;
}

.hf-sheet__cell--left { text-align: left; }
.hf-sheet__cell--center { text-align: center; }
.hf-sheet__cell--right { text-align: right; }
.hf-sheet__cell--bold { font-weight: 700; }

.hf-sheet__logo {
    text-align: center;
    width: 28%;
}

.hf-sheet__logo img {
    max-width: 120px;
    max-height: 72px;
}

.hf-sheet__logo-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 48px;
    border: 1px dashed #94a3b8;
    color: #64748b;
    font-size: 0.75rem;
}

.hf-sheet__caption {
    margin-top: 0.35rem;
    white-space: pre-line;
    font-size: 0.6875rem;
    line-height: 1.35;
}

.hf-sheet__body {
    padding: 1.25rem;
    color: #94a3b8;
    text-align: center;
}

@media (max-width: 1100px) {
    .app-main:has(.hf-designer) {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .app-main:has(.hf-designer) .app-page {
        height: auto;
        padding: 20px 28px 40px;
        overflow: visible;
    }

    .hf-designer {
        margin: -20px -28px -40px;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .hf-designer__body,
    .hf-designer__form,
    .hf-designer__preview,
    .hf-designer__scroll,
    .hf-designer__preview-scroll {
        height: auto;
        overflow: visible;
    }

    .hf-designer__body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .doc-meta__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .doc-page .emp-header {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    .doc-actions {
        margin-left: 0;
    }

    .doc-prop-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .doc-meta__grid {
        grid-template-columns: 1fr;
    }
}

.app-main:has(.form-designer-page) {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.app-main:has(.form-designer-page) .app-page {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
}

.form-designer-page {
    margin: 0;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.form-designer-page .emp-header {
    flex-shrink: 0;
    padding: 0.7rem 1.25rem;
}

.form-designer-page .emp-page__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    padding: 0.75rem 1.25rem 1rem;
    overflow: hidden;
}

.form-designer {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 16px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.form-designer__editor {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.form-designer-page .form-designer__editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-designer__appearance {
    flex: 0 0 auto;
}

.form-designer__fields {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0.5rem;
}

.form-designer__fields-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.form-designer__fields .form-field:first-child {
    margin-top: 0;
}

.form-designer__preview {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f7fb;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    padding: 12px 14px 14px;
}

.form-designer__preview-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.form-designer__preview-label {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.form-fields__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.form-fields__head .emp-view__card-title {
    margin: 0;
}

.form-field {
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    padding: 10px 12px 8px;
    margin-top: 8px;
    background: #fff;
}

.form-field__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1.5fr) minmax(128px, 0.85fr) auto auto;
    gap: 8px 10px;
    align-items: end;
}

.form-field__index {
    width: 28px;
    height: 32px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: #e6f4f7;
    color: #007a94;
    font-size: 0.75rem;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.form-field__required {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 72px;
}

.form-field__caption {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
}

.form-field__required .mud-switch {
    margin: 0;
    height: 40px;
    display: flex;
    align-items: center;
}

.form-field__moves {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    margin-bottom: 0;
}

.form-field__icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.form-field__icon:hover {
    border-color: #007a94;
    color: #007a94;
    background: #e6f4f7;
}

.form-field__icon--danger:hover {
    border-color: #b42318;
    color: #b42318;
    background: #fdf2f2;
}

.form-field__icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #fff;
    color: #94a3b8;
    border-color: #e2e8f0;
}

.form-field__options {
    margin-top: 8px;
    padding-left: 38px;
}

.form-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.form-logo-input {
    display: none;
}

.form-logo-thumb {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.form-paper {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    padding: 22px 22px 18px;
    text-align: left;
}

.form-paper__logo {
    display: block;
    height: 42px;
    width: auto;
    max-width: 100%;
    margin: 0 0 14px;
    object-fit: contain;
    object-position: left center;
}

.form-paper__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 650;
    color: #0f172a;
}

.form-paper__banner,
.form-paper__footer {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.875rem;
    white-space: pre-wrap;
}

.form-paper__body {
    margin-top: 18px;
}

.form-paper__field {
    margin-bottom: 14px;
}

.form-paper__label,
.form-answer__label {
    font-size: 0.8125rem;
    font-weight: 650;
    color: #334155;
    margin-bottom: 4px;
}

.form-paper__control {
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    min-height: 36px;
    padding: 8px 10px;
    color: #94a3b8;
    font-size: 0.8125rem;
}

.form-paper__answer,
.form-answer__value {
    color: #0f172a;
    font-size: 0.9375rem;
    white-space: pre-wrap;
}

.form-paper__empty,
.form-send__empty,
.form-send__note {
    margin: 0 0 12px;
    color: #64748b;
    font-size: 0.875rem;
}

.form-paper__footer {
    border-top: 1px solid #e6e8ec;
    margin-top: 8px;
    padding-top: 12px;
}

.form-paper__submit {
    margin-top: 8px;
}

.form-fill {
    max-width: 760px;
}

.form-send__picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}

.form-send__people {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.form-send__people li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid #e6e8ec;
}

.form-answer {
    padding: 12px 0;
    border-top: 1px solid #e6e8ec;
}

@media (max-width: 980px) {
    .app-main:has(.form-designer-page) {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .app-main:has(.form-designer-page) .app-page {
        height: auto;
        padding: 20px 28px 40px;
        overflow: visible;
    }

    .form-designer-page {
        margin: -20px -28px -40px;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .form-designer-page .emp-page__body,
    .form-designer__editor,
    .form-designer__fields,
    .form-designer__preview,
    .form-designer__fields-scroll,
    .form-designer__preview-scroll {
        height: auto;
        overflow: visible;
    }

    .form-designer {
        grid-template-columns: 1fr;
    }

    .form-designer__fields .emp-form-grid,
    .form-field__row {
        grid-template-columns: 1fr;
    }

    .form-field__index,
    .form-field__moves {
        height: auto;
        margin-bottom: 0;
    }

    .form-field__options {
        padding-left: 0;
    }
}

.role-module {
    border-top: 1px solid #e6e8ec;
    padding-top: 14px;
    margin-top: 14px;
}

.role-module__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.role-module__name {
    font-weight: 650;
    color: #0f172a;
}

.role-module__count {
    color: #64748b;
    font-size: 0.8125rem;
}

.role-module__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.role-perm {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    padding: 8px 10px 8px 4px;
}

.role-perm__action {
    display: block;
    font-weight: 650;
    color: #0f172a;
}

.role-perm__desc {
    display: block;
    color: #64748b;
    font-size: 0.8125rem;
}

.studio {
    display: grid;
    grid-template-columns: var(--studio-tools, 240px) minmax(0, 1fr) var(--studio-props, 288px);
    gap: 0.75rem;
    min-height: calc(100vh - 168px);
    padding: 0 1.25rem 1.25rem;
}

.studio--tools-closed {
    --studio-tools: 44px;
}

.studio--props-closed {
    --studio-props: 44px;
}

.studio-side,
.studio-props,
.studio-stage {
    min-height: 0;
    border: 1px solid #EDEBE9;
    border-radius: 8px;
    background: #fff;
}

.studio-side,
.studio-props {
    overflow: auto;
    padding: 0.65rem 0.75rem 0.75rem;
}

.studio-side.is-collapsed,
.studio-props.is-collapsed {
    padding: 0.5rem 0.35rem;
    overflow: hidden;
}

.studio-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 700;
}

.is-collapsed .studio-panel__head {
    justify-content: center;
    margin-bottom: 0;
}

.studio-panel__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #EDEBE9;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
}

.studio-panel__toggle:hover {
    border-color: #007A94;
    color: #007A94;
}

.studio-side__label {
    margin: 0.35rem 0 0.5rem;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.studio-toolbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.studio-tool,
.studio-tree__item,
.studio-layout {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    border: 1px solid #EDEBE9;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
}

.studio-tool {
    padding: 0.4rem 0.45rem;
}

.studio-tool:hover,
.studio-tree__item:hover,
.studio-layout:hover {
    border-color: #007A94;
    color: #007A94;
}

.studio-tree {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.studio-tree__item {
    padding: 0.35rem 0.5rem;
}

.studio-tree__item--child {
    margin-left: 0.85rem;
    width: calc(100% - 0.85rem);
}

.studio-tree__item--deep {
    margin-left: 1.7rem;
    width: calc(100% - 1.7rem);
}

.studio-tree__item.is-on,
.studio-layout.is-on,
.studio-tabs__btn.is-on,
.studio-emoji.is-on {
    border-color: #007A94;
    background: #e7f4f7;
    color: #007A94;
}

.studio-tree__empty,
.studio-prop__hint,
.studio-card__empty,
.studio-paper__empty {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.8125rem;
}

.studio-stage {
    display: flex;
    flex-direction: column;
    background: #eef2f7;
    overflow: auto;
}

.studio-stage__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.75rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 650;
}

.studio-layout {
    width: auto;
    padding: 0.3rem 0.6rem;
}

.studio-paper {
    margin: 0 0.75rem 0.75rem;
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-height: 520px;
}

.studio-paper__title {
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.studio-paper__header,
.studio-paper__footer {
    margin: 0 0 0.85rem;
    white-space: pre-wrap;
}

.studio-paper__footer {
    margin: 1rem 0 0;
}

.studio-grid {
    display: grid;
    grid-template-columns: repeat(var(--studio-cols, 1), minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.studio-item {
    position: relative;
    grid-column: span var(--span, 1);
    min-width: 0;
}

.studio-item--selected {
    outline: 2px solid #007A94;
    outline-offset: 2px;
    border-radius: 8px;
}

.studio-chrome {
    display: flex;
    justify-content: flex-end;
    margin: -0.15rem -0.15rem 0.35rem;
}

.studio-item--design .studio-control {
    pointer-events: none;
}

.studio-drag,
.studio-resize,
.studio-tabs__btn {
    pointer-events: auto;
}

.studio-drag {
    display: flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c5e4ea;
    border-radius: 4px;
    background: #e7f4f7;
    color: #007A94;
    cursor: grab;
}

.studio-resize {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 2;
    width: 14px;
    height: 14px;
    border: 0;
    border-right: 2px solid #007A94;
    border-bottom: 2px solid #007A94;
    background: transparent;
    cursor: nwse-resize;
}

.studio-card,
.studio-tabs {
    padding: 0.75rem;
    border: 1px solid #EDEBE9;
    border-radius: 8px;
}

.studio-card__title {
    margin: 0 0 0.65rem;
    font-weight: 700;
}

.studio-tabs__bar {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.studio-tabs__btn,
.studio-emoji {
    width: auto;
    border: 1px solid #EDEBE9;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.studio-tabs__btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.8125rem;
}

.studio-label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 650;
}

.studio-input,
.studio-file {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border: 1px solid #D0D7E2;
    border-radius: 6px;
    background: #fff;
}

.studio-check,
.studio-slider,
.studio-emoji-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.studio-emoji {
    padding: 0.2rem 0.35rem;
    font-size: 1.15rem;
    line-height: 1;
}

.studio-file__name,
.studio-error {
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.studio-error {
    color: #b42318;
}

.studio-prop {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.65rem;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 650;
}

.studio-prop input,
.studio-prop textarea,
.studio-prop select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.5rem;
    border: 1px solid #EDEBE9;
    border-radius: 6px;
    color: #1e293b;
    font-weight: 500;
}

.studio-prop input[type="color"] {
    height: 34px;
    padding: 0.15rem;
}

.studio-prop--check {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.studio-prop--check input {
    width: auto;
}

.studio-prop__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.form-fill .studio-paper {
    margin: 0;
}

.studio-preview {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    background: #eef2f7;
}

.studio-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #EDEBE9;
    background: #fff;
}

.studio-preview__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.studio-preview__note {
    color: #64748b;
    font-size: 0.8125rem;
}

.studio-preview__body {
    flex: 1;
    overflow: auto;
    padding: 1.5rem 1rem 2rem;
}

.studio-preview__sheet {
    width: min(920px, 100%);
    margin: 0 auto;
}

.studio-preview__sheet .studio-paper {
    margin: 0;
    min-height: 0;
}

.studio-preview__sheet .form-paper__submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

@media (max-width: 1100px) {
    .studio {
        grid-template-columns: 1fr;
    }
}

.sign-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.46);
}

.sign-modal__panel {
    display: flex;
    flex-direction: column;
    width: min(880px, 100%);
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}

.sign-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #eef2f6;
}

.sign-modal__eyebrow {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #007A94;
}

.sign-modal__header h2 {
    margin: 2px 0 0;
    font-size: 1.15rem;
    font-weight: 650;
    color: #0f172a;
}

.sign-modal__header p {
    margin: 2px 0 0;
    font-size: 0.84rem;
    color: #64748b;
}

.sign-modal__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    cursor: pointer;
}

.sign-modal__close:hover {
    background: #f1f5f9;
}

.sign-modal__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 14px 20px 0;
    padding: 4px;
    border-radius: 10px;
    background: #f1f5f9;
}

.sign-modal__tab {
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

.sign-modal__tab--active {
    background: #fff;
    color: #007A94;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.sign-modal__body {
    padding: 16px 20px 8px;
    overflow: auto;
}

.sign-pad {
    width: 100%;
    height: 180px;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

.sign-modal__hint {
    margin: 0.55rem 0 0;
    color: #6b7280;
    font-size: 0.82rem;
}

.sign-modal__actions,
.sign-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.sign-modal__footer {
    margin: 8px -20px 0;
    padding: 12px 20px 16px;
    border-top: 1px solid #eef2f6;
}

.sign-type {
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: 2.4rem;
    min-height: 120px;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px dashed #d5dbe3;
    border-radius: 8px;
}

.sign-stored {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.sign-card {
    border: 1px solid #e4e8ee;
    border-radius: 8px;
    padding: 0.75rem;
    background: #fff;
    text-align: center;
    cursor: pointer;
}

.sign-card img {
    max-width: 100%;
    height: 72px;
    object-fit: contain;
}

.sign-card span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #4b5563;
}

.sign-card__delete {
    margin-top: 0.35rem;
    border: 0;
    background: transparent;
    color: #b42318;
    cursor: pointer;
    font-size: 0.75rem;
}

.sign-stage {
    position: relative;
    max-height: 560px;
    background: #e8eef3;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: auto;
    user-select: none;
    overscroll-behavior: contain;
}

.sign-stage__page {
    position: relative;
    min-height: 520px;
    margin: 12px;
    padding: 16px 18px 28px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    user-select: none;
    -webkit-user-select: none;
}

.sign-stage__page iframe,
.sign-stage iframe {
    width: 100%;
    height: 480px;
    border: 0;
    pointer-events: none;
    background: #fff;
}

.sign-chip {
    position: absolute;
    z-index: 4;
    cursor: grab;
    touch-action: none;
    user-select: none;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    line-height: 0;
}

.sign-stage.is-dragging,
.sign-stage.is-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.sign-chip.is-dragging {
    cursor: grabbing;
}

.sign-chip img {
    width: 100%;
    height: auto;
    display: block;
    background: transparent;
    pointer-events: none;
    user-select: none;
}

.sign-chip__handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #007A94;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    cursor: nwse-resize;
    touch-action: none;
}

.sign-error {
    margin: 0.6rem 0 0;
    color: #b42318;
    font-size: 0.82rem;
}