:root {
    --font-ui: "Manrope", "Segoe UI", Tahoma, sans-serif;
    --font-display: "Playfair Display", Georgia, serif;
    --bg-page: #edf2f9;
    --surface: #ffffff;
    --surface-soft: #f7f9fd;
    --border: #d8e1ef;
    --text: #13213d;
    --muted: #667792;
    --primary: #173a70;
    --primary-2: #2f6fc3;
    --accent: #c9a46a;
    --shadow-soft: 0 16px 40px rgba(17, 39, 74, 0.08);
    --shadow-hard: 0 24px 55px rgba(16, 34, 61, 0.16);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.crm-body {
    font-family: var(--font-ui);
    color: var(--text);
    background:
        radial-gradient(circle at 12% 12%, rgba(218, 229, 247, 0.8) 0%, rgba(218, 229, 247, 0) 36%),
        radial-gradient(circle at 88% 14%, rgba(233, 240, 252, 0.85) 0%, rgba(233, 240, 252, 0) 42%),
        linear-gradient(180deg, #eef3fa 0%, #e9eff8 100%);
    min-height: 100vh;
    scrollbar-gutter: stable;
}

.crm-shell {
    min-height: 100vh;
    align-items: stretch;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -0.01em;
}

.btn {
    border-radius: 12px;
    font-weight: 600;
}

.btn-premium,
.btn-primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
    box-shadow: 0 8px 22px rgba(23, 58, 112, 0.28);
}

.btn-premium:hover,
.btn-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(23, 58, 112, 0.35);
}

.btn-outline-secondary {
    border-color: #bac8de;
    color: #41506a;
}

.form-control,
.form-select {
    border-radius: 12px;
    border: 1px solid #ccd7ea;
    padding: 0.65rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #87a4d3;
    box-shadow: 0 0 0 0.2rem rgba(43, 103, 187, 0.14);
}

.crm-sidebar {
    flex: 0 0 286px;
    width: 286px;
    min-width: 286px;
    max-width: 286px;
    background: linear-gradient(185deg, #0d1831 0%, #122748 58%, #17345f 100%);
    color: #edf3ff;
    min-height: 100vh;
    border-right: 1px solid rgba(201, 219, 246, 0.18);
    box-shadow: 8px 0 28px rgba(7, 18, 37, 0.2);
    overflow-y: auto;
}

.sidebar-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(238, 245, 255, 0.5);
    padding: 3px;
}

.text-muted-light {
    color: rgba(228, 237, 255, 0.75);
}

.crm-sidebar .sidebar-link {
    color: #dbe6fa;
    border-radius: 12px;
    padding: 0.58rem 0.78rem;
    transition: all 0.22s ease;
}

.crm-sidebar .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateX(2px);
}

.sidebar-meta-link {
    color: rgba(226, 236, 255, 0.86);
}

.sidebar-meta-link:hover {
    color: #fff;
}

.sidebar-logout-link {
    margin-top: 0.4rem;
    padding: 0.78rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(135deg, rgba(155, 37, 56, 0.34) 0%, rgba(120, 24, 42, 0.22) 100%);
    color: #ffe3e8;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sidebar-logout-link:hover {
    color: #fff4f6;
    border-color: rgba(255, 220, 226, 0.36);
    background: linear-gradient(135deg, rgba(176, 43, 66, 0.48) 0%, rgba(134, 30, 48, 0.34) 100%);
    box-shadow: 0 14px 28px rgba(9, 18, 35, 0.18);
    transform: translateY(-1px);
}

.crm-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
}

.crm-topbar {
    min-height: 74px;
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(208, 220, 239, 0.7);
    backdrop-filter: blur(8px);
}

.crm-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.crm-topbar-brand {
    min-width: 0;
}

.crm-topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.crm-content-section {
    width: 100%;
}

.crm-mobile-nav-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e2ef;
    background: rgba(255, 255, 255, 0.92);
    color: #17345f;
    box-shadow: 0 8px 20px rgba(17, 39, 74, 0.08);
}

.crm-mobile-nav-toggle:hover {
    color: #102f58;
    background: #fff;
}

.crm-mobile-nav-toggle i {
    font-size: 1.35rem;
    line-height: 1;
}

.crm-mobile-drawer {
    background: linear-gradient(185deg, #0d1831 0%, #122748 58%, #17345f 100%);
    color: #edf3ff;
    border-right: 1px solid rgba(201, 219, 246, 0.18);
}

.crm-mobile-drawer .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.topbar-link {
    color: #22345b;
    font-weight: 600;
}

.topbar-link:hover {
    color: #0f2f66;
}

.card {
    border-radius: 18px;
}

.stat-card {
    border: 1px solid #dce5f3;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.performance-template-panel {
    background:
        radial-gradient(circle at top right, rgba(225, 236, 249, 0.7) 0%, rgba(225, 236, 249, 0) 36%),
        linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.performance-template-empty {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 0;
    color: #5d728d;
}

.performance-template-empty i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4fb;
    color: #31547f;
    font-size: 1.2rem;
}

.auth-shell {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
}

.auth-shell::before,
.auth-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    z-index: 0;
    filter: blur(2px);
}

.auth-shell::before {
    width: 360px;
    height: 360px;
    left: -120px;
    top: 80px;
    background: radial-gradient(circle, rgba(164, 187, 223, 0.45) 0%, rgba(164, 187, 223, 0) 72%);
}

.auth-shell::after {
    width: 420px;
    height: 420px;
    right: -150px;
    bottom: 40px;
    background: radial-gradient(circle, rgba(206, 220, 244, 0.5) 0%, rgba(206, 220, 244, 0) 76%);
}

.auth-shell > .container {
    position: relative;
    z-index: 1;
}

.home-hero {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 249, 255, 0.92) 100%);
    border: 1px solid #dce5f4;
    border-radius: 28px;
    padding: 2.2rem;
    box-shadow: var(--shadow-hard);
}

.home-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2eaf7;
    padding: 4px;
}

.home-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.33rem 0.72rem;
    border-radius: 999px;
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2e568f;
    background: rgba(201, 221, 250, 0.44);
}

.home-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.12;
}

.home-feature-card {
    border: 1px solid #dbe4f3;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: var(--shadow-soft);
}

.home-login-card {
    border: 1px solid #dbe4f3;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--shadow-soft);
}

.home-login-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #2a4067;
}

.home-login-note {
    border: 1px solid #d7e2f2;
    border-radius: 10px;
    background: #f7f9fe;
    color: #556985;
    font-size: 0.83rem;
    padding: 0.55rem 0.7rem;
}

.home-feature-card ul {
    padding-left: 1rem;
}

.home-feature-card li {
    margin-bottom: 0.45rem;
    color: #2c3c58;
}

.home-pill-wrap {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.home-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.33rem 0.7rem;
    border: 1px solid #cfdaee;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    font-size: 0.82rem;
    color: #27446f;
    font-weight: 600;
}

.metric-mini-card {
    border: 1px solid #d7e1f1;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.8rem 0.85rem;
}

.metric-mini-card small {
    color: var(--muted);
    display: block;
}

.login-shell {
    border: 1px solid #d7e1f1;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 249, 255, 0.95) 100%);
    box-shadow: var(--shadow-hard);
}

.login-brand-pane {
    padding: 2.25rem;
    background: linear-gradient(165deg, rgba(234, 241, 253, 0.8) 0%, rgba(255, 255, 255, 0.75) 100%);
    border-right: 1px solid #dbe5f4;
}

.login-form-pane {
    padding: 2.25rem;
}

.login-title {
    font-family: var(--font-display);
    font-weight: 700;
}

.login-benefits {
    display: grid;
    gap: 0.75rem;
    color: #2f415f;
    font-weight: 600;
}

.login-benefits i {
    color: var(--accent);
}

.login-shell-simple {
    border: 1px solid #d7e1f1;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-hard);
}

.login-auth-card {
    padding: 2.1rem;
    background: #ffffff;
}

.login-auth-card h3 {
    font-weight: 700;
}

.login-feature-tab {
    height: 100%;
    padding: 2.1rem;
    background: linear-gradient(175deg, #f5f8ff 0%, #eef3fc 100%);
    border-left: 1px solid #dbe4f2;
}

.login-feature-tab h5 {
    font-weight: 700;
    color: #213a62;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
    font-weight: 600;
    color: #2e4468;
    line-height: 1.35;
}

.feature-item i {
    color: #2f6fc3;
    font-size: 1rem;
    margin-top: 1px;
}

.ref-auth-frame {
    padding: 0.2rem;
}

.ref-auth-card {
    background: #f7f7f8;
    border: 1px solid #d8dbe2;
    border-radius: 0;
    min-height: 620px;
    display: grid;
    grid-template-columns: 42% 58%;
    overflow: hidden;
}

.ref-auth-left {
    padding: 4.1rem 3.2rem 2.6rem 3.2rem;
    background: #f7f7f8;
}

.ref-title {
    font-family: var(--font-ui);
    font-size: 2.1rem;
    font-weight: 800;
    color: #1b2457;
}

.ref-login-form {
    max-width: 360px;
}

.ref-label {
    color: #6d7382;
    font-weight: 600;
    font-size: 0.84rem;
    margin-bottom: 0.45rem;
}

.ref-input-group {
    border: 1px solid #d9dde7;
    border-radius: 5px;
    overflow: hidden;
}

.ref-input-group .input-group-text {
    background: #ffffff;
    border: 0;
    border-right: 1px solid #e4e8f1;
    color: #878e9e;
}

.ref-input-group .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.92rem;
    padding: 0.62rem 0.72rem;
}

.ref-input-group .form-control:focus {
    box-shadow: none;
}

.ref-muted-line {
    font-size: 0.84rem;
    color: #70798d;
}

.ref-help-block {
    max-width: 360px;
}

.ref-auth-right {
    background: linear-gradient(180deg, #ececee 0%, #f5f5f6 100%);
    border-top-left-radius: 74px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ref-visual-wrap {
    width: 78%;
    height: 78%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ref-cube-shadow {
    width: 230px;
    height: 62px;
    background: radial-gradient(circle, rgba(103, 120, 219, 0.34) 0%, rgba(103, 120, 219, 0.02) 75%);
    filter: blur(6px);
    border-radius: 999px;
    position: absolute;
    bottom: 115px;
}

.ref-cube {
    width: 230px;
    height: 230px;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(194, 202, 255, 0.9) 0%, rgba(136, 149, 244, 0.86) 58%, rgba(106, 119, 224, 0.95) 100%);
    border: 1px solid rgba(243, 246, 255, 0.8);
    box-shadow: 0 25px 55px rgba(96, 108, 194, 0.24), inset 0 8px 30px rgba(255, 255, 255, 0.32);
    transform: rotate(-9deg);
    position: relative;
}

.ref-cube::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.04) 65%);
}

.ref-cube-logo {
    position: absolute;
    width: 84px;
    height: 84px;
    object-fit: contain;
    padding: 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 24px rgba(69, 80, 160, 0.25);
}

.studio-auth-stage,
.studio-login-stage {
    padding: 0.75rem 0;
}

.studio-auth-shell,
.studio-login-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(214, 224, 239, 0.9);
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(201, 224, 219, 0.55) 0%, rgba(201, 224, 219, 0) 32%),
        radial-gradient(circle at bottom left, rgba(235, 218, 194, 0.45) 0%, rgba(235, 218, 194, 0) 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.98) 100%);
    box-shadow: 0 30px 70px rgba(20, 37, 63, 0.12);
}

.studio-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.95fr);
    min-height: 690px;
}

.studio-login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
    min-height: 650px;
}

.studio-auth-left,
.studio-login-info,
.studio-auth-right,
.studio-login-focus {
    position: relative;
    z-index: 1;
}

.studio-auth-left,
.studio-login-info {
    padding: 3rem;
}

.studio-auth-right,
.studio-login-focus {
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-brandbar {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    margin-bottom: 2.1rem;
}

.studio-brandbar-compact {
    margin-bottom: 1.6rem;
}

.studio-brandbar-centered {
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    text-align: center;
}

.studio-logo-wrap {
    width: 118px;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 247, 252, 0.96) 100%);
    border: 1px solid #dbe3f1;
    box-shadow: 0 10px 24px rgba(22, 44, 78, 0.08);
}

.studio-logo-image {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.studio-brand-name {
    font-size: 1.08rem;
    font-weight: 800;
    color: #15284a;
}

.studio-brand-sub {
    font-size: 0.9rem;
    color: #72829c;
}

.studio-auth-copy-minimal {
    text-align: center;
    align-items: center;
}

.studio-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.85rem;
    margin-bottom: 1.15rem;
    border-radius: 999px;
    background: rgba(221, 232, 248, 0.82);
    color: #31517e;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.studio-hero-title,
.studio-login-hero {
    max-width: 700px;
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 4.3rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: #102446;
}

.studio-login-hero {
    max-width: 560px;
    font-size: clamp(2.2rem, 3.2vw, 3.4rem);
}

.studio-hero-title-minimal {
    max-width: 520px;
    margin-bottom: 0;
    font-family: var(--font-ui);
    font-size: clamp(2.45rem, 3.8vw, 4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.045em;
    text-align: center;
}

.studio-hero-copy,
.studio-login-hero-copy {
    max-width: 650px;
    font-size: 1.08rem;
    line-height: 1.8;
    color: #60708a;
}

.studio-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 2rem;
}

.studio-chip {
    padding: 0.48rem 0.88rem;
    border: 1px solid #d6e0ef;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: #244570;
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(25, 49, 88, 0.04);
}

.studio-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 690px;
    margin-top: 2rem;
}

.studio-insight-card {
    padding: 1.05rem 1.1rem;
    border: 1px solid #d8e2f0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 16px 30px rgba(22, 41, 73, 0.05);
}

.studio-insight-card small {
    display: block;
    margin-bottom: 0.45rem;
    color: #7d8ca6;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.studio-insight-card strong {
    font-size: 0.98rem;
    line-height: 1.55;
    color: #183052;
}

.studio-auth-right::before,
.studio-login-focus::before {
    content: "";
    position: absolute;
    inset: 30px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(251, 252, 255, 0.9) 0%, rgba(241, 246, 253, 0.78) 100%);
    border: 1px solid rgba(217, 227, 240, 0.85);
}

.studio-orbit {
    position: absolute;
    border-radius: 999px;
    filter: blur(3px);
}

.studio-orbit-one {
    width: 180px;
    height: 180px;
    top: 28px;
    right: 48px;
    background: radial-gradient(circle, rgba(184, 210, 202, 0.55) 0%, rgba(184, 210, 202, 0.06) 72%);
}

.studio-orbit-two {
    width: 220px;
    height: 220px;
    left: 18px;
    bottom: 20px;
    background: radial-gradient(circle, rgba(224, 207, 179, 0.42) 0%, rgba(224, 207, 179, 0.04) 70%);
}

.studio-login-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 1.7rem;
    border: 1px solid rgba(218, 228, 242, 0.96);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 44px rgba(17, 34, 65, 0.1);
    backdrop-filter: blur(12px);
}

.studio-login-card-focus {
    max-width: 450px;
}

.studio-login-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.05rem;
}

.studio-login-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.74rem;
    border-radius: 999px;
    background: #eff4fb;
    color: #35527e;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.studio-login-link {
    color: #315987;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.studio-login-link:hover {
    color: #183e70;
}

.studio-login-title {
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: #142948;
}

.studio-login-copy {
    margin-bottom: 1.35rem;
    color: #687991;
    line-height: 1.7;
}

.studio-login-form {
    margin-bottom: 1rem;
}

.studio-field-label {
    color: #2e466e;
    font-size: 0.88rem;
    font-weight: 700;
}

.studio-input-group {
    border: 1px solid #d7e2ef;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.studio-input-group .input-group-text {
    border: 0;
    border-right: 1px solid #e3eaf3;
    background: #fff;
    color: #7990b1;
    padding: 0.8rem 0.95rem;
}

.studio-input-group .form-control {
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 0.84rem 0.95rem;
    box-shadow: none;
}

.studio-input-group .form-control:focus {
    box-shadow: none;
}

.studio-login-btn {
    border: 0;
    border-radius: 16px;
    padding: 0.92rem 1rem;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #14376a 0%, #2b7ba5 100%);
    box-shadow: 0 14px 28px rgba(26, 72, 123, 0.28);
}

.studio-login-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(26, 72, 123, 0.34);
}

.studio-help-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(244, 248, 253, 0.92) 0%, rgba(238, 243, 250, 0.94) 100%);
    border: 1px solid #dae4f1;
    color: #62748d;
    font-size: 0.9rem;
}

.studio-help-card strong {
    color: #1c3559;
}

.studio-login-points {
    display: grid;
    gap: 0.9rem;
    max-width: 540px;
    margin-top: 1.8rem;
}

.studio-login-point {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border: 1px solid #d8e3f1;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 28px rgba(19, 36, 66, 0.05);
    color: #284263;
    font-weight: 600;
    line-height: 1.6;
}

.studio-login-point i {
    color: #226f93;
    margin-top: 0.15rem;
}

.studio-login-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1.05rem;
    color: #6d7e97;
    font-size: 0.9rem;
}

.studio-login-footer a {
    color: #315987;
    text-decoration: none;
    font-weight: 700;
}

.studio-login-footer a:hover {
    color: #183e70;
}

.wa-shell {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    min-height: calc(100vh - 170px);
    overflow: hidden;
    border: 1px solid #d7e1ef;
    border-radius: 24px;
    background: #eef4f8;
    box-shadow: 0 24px 50px rgba(16, 33, 58, 0.08);
}

.wa-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: linear-gradient(180deg, #f9fbfd 0%, #f2f7fb 100%);
    border-right: 1px solid #d9e2ec;
}

.wa-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.9rem;
}

.wa-sidebar-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.wa-round-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #d6e1ee;
    color: #2d5876;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(17, 39, 65, 0.05);
}

.wa-round-btn:hover {
    color: #193f62;
    background: #f4f8fc;
}

.wa-search-form,
.wa-thread-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 1rem 1rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #d9e4ef;
}

.wa-search-form i,
.wa-thread-search i {
    color: #6e839d;
}

.wa-search-form input,
.wa-thread-search input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #284361;
}

.wa-quick-panel {
    margin: 0 1rem 1rem;
    padding: 0.95rem;
    border: 1px solid #d7e1ec;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
}

.wa-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.wa-panel-title {
    color: #36506c;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wa-quick-users {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.wa-quick-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: #2b4766;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
}

.wa-quick-user:hover {
    color: #143f6c;
}

.wa-conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.45rem 0.45rem;
}

.wa-chat-row {
    display: flex;
    gap: 0.85rem;
    padding: 0.9rem 0.75rem;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    transition: background 0.18s ease, transform 0.18s ease;
}

.wa-chat-row:hover {
    background: rgba(255, 255, 255, 0.78);
    transform: translateY(-1px);
}

.wa-chat-row.active {
    background: linear-gradient(135deg, #dceef7 0%, #e8f5fb 100%);
    border: 1px solid #c7dfea;
}

.wa-chat-row-body {
    min-width: 0;
    flex: 1;
}

.wa-chat-row-top,
.wa-chat-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.wa-chat-row-top {
    margin-bottom: 0.24rem;
}

.wa-chat-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 800;
    color: #193552;
}

.wa-chat-time {
    white-space: nowrap;
    color: #7b8da3;
    font-size: 0.76rem;
}

.wa-chat-preview {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #6a7c91;
    font-size: 0.85rem;
}

.wa-unread-pill {
    min-width: 24px;
    height: 24px;
    padding: 0 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f7d7f 0%, #22b5a2 100%);
    color: #fff;
    font-size: 0.73rem;
    font-weight: 800;
}

.wa-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbe7f5 0%, #eff4fb 100%);
    color: #1a426a;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.wa-avatar-large {
    width: 54px;
    height: 54px;
    font-size: 1rem;
}

.wa-avatar-user {
    background: linear-gradient(135deg, #d9eef3 0%, #eff9fb 100%);
}

.wa-avatar-soft {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #f0f5fb 0%, #ffffff 100%);
    border: 1px solid #d9e3ef;
}

.wa-avatar.is-online::after,
.wa-avatar-large.is-online::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #25d366;
    border: 2px solid #fff;
}

.wa-main-pane,
.wa-thread-pane {
    min-width: 0;
    background:
        radial-gradient(circle at top right, rgba(221, 239, 243, 0.62) 0%, rgba(221, 239, 243, 0) 30%),
        linear-gradient(180deg, #f7fafc 0%, #edf4f7 100%);
}

.wa-empty-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.wa-empty-card {
    max-width: 500px;
    padding: 2.25rem;
    text-align: center;
    border: 1px solid #d7e1eb;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 24px 44px rgba(17, 34, 61, 0.08);
}

.wa-empty-icon {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 24px;
    background: linear-gradient(135deg, #dcecf5 0%, #ecf8fb 100%);
    color: #1f5572;
    font-size: 2rem;
}

.wa-empty-card h3 {
    margin-bottom: 0.8rem;
    font-weight: 800;
    color: #16304d;
}

.wa-empty-card p,
.wa-empty-note,
.wa-empty-mini {
    color: #657890;
}

.wa-thread-pane {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.wa-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #d6e0ea;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(6px);
}

.wa-thread-identity {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.wa-thread-identity h4 {
    font-weight: 800;
    color: #17314d;
}

.wa-thread-tools {
    width: 430px;
    max-width: 100%;
}

.wa-thread-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.wa-tool-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7e2ec;
    border-radius: 14px;
    background: #ffffff;
    color: #265270;
    box-shadow: 0 10px 18px rgba(18, 39, 67, 0.04);
}

.wa-tool-btn:hover {
    background: #f3f8fc;
    color: #143a5f;
}

.wa-thread-search {
    margin: 0;
}

.wa-call-panel {
    margin: 1rem 1.2rem 0;
    padding: 1rem;
    border: 1px solid #d8e3ec;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(242, 248, 250, 0.96) 100%);
    box-shadow: 0 18px 36px rgba(18, 36, 61, 0.08);
}

.wa-call-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.wa-call-mode {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.72rem;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background: rgba(217, 239, 238, 0.9);
    color: #176469;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wa-call-status-copy {
    color: #677b92;
}

.wa-call-live-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0c8b72 0%, #23b39b 100%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.wa-incoming-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #dce6f0;
    border-radius: 18px;
    background: rgba(247, 250, 254, 0.92);
}

.wa-incoming-copy {
    margin-top: 0.2rem;
    color: #697c91;
}

.wa-call-banner-actions {
    display: flex;
    gap: 0.65rem;
}

.wa-call-stage {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1rem;
}

.wa-local-tile,
.wa-remote-tile {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid #dce6ef;
    background: linear-gradient(180deg, #f9fbfd 0%, #eef4f8 100%);
}

.wa-local-tile {
    min-height: 250px;
}

.wa-remote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.wa-remote-empty {
    min-height: 250px;
    display: grid;
    place-items: center;
    gap: 0.45rem;
    padding: 1.5rem;
    text-align: center;
    border: 1px dashed #cfdbe7;
    border-radius: 22px;
    color: #6d7f95;
    background: rgba(255, 255, 255, 0.65);
}

.wa-remote-empty i {
    font-size: 2rem;
    color: #4a7892;
}

.wa-media-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #d9e2ec;
}

.wa-media-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(231, 239, 245, 0.9) 0%, rgba(215, 226, 235, 0.95) 100%);
    color: #35607d;
    font-size: 2rem;
}

.wa-media-caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 16px;
    background: rgba(12, 23, 38, 0.62);
    color: #fff;
    backdrop-filter: blur(10px);
}

.wa-media-caption strong {
    font-weight: 800;
}

.wa-media-caption span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
}

.wa-call-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}

.wa-call-control {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7e2ed;
    border-radius: 16px;
    background: #fff;
    color: #284d67;
    box-shadow: 0 10px 18px rgba(17, 37, 63, 0.05);
}

.wa-call-control.is-active {
    background: linear-gradient(135deg, #0f7d7f 0%, #1fa597 100%);
    color: #fff;
    border-color: transparent;
}

.wa-call-control.is-danger {
    background: linear-gradient(135deg, #b8374f 0%, #dd5d6e 100%);
    border-color: transparent;
    color: #fff;
}

.wa-call-control:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wa-thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.35rem 1.45rem;
}

.wa-thread-empty {
    padding: 2rem;
    text-align: center;
    color: #687b92;
}

.wa-msg-row {
    display: flex;
    margin-bottom: 0.85rem;
}

.wa-msg-row.is-self {
    justify-content: flex-end;
}

.wa-msg-row.is-other {
    justify-content: flex-start;
}

.wa-msg-bubble {
    max-width: min(72%, 680px);
    padding: 0.8rem 0.95rem 0.6rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #dce5ef;
    box-shadow: 0 10px 22px rgba(17, 39, 65, 0.05);
}

.wa-msg-row.is-self .wa-msg-bubble {
    background: linear-gradient(135deg, #dff6ea 0%, #ecfff7 100%);
    border-color: #caead8;
}

.wa-msg-author {
    margin-bottom: 0.35rem;
    color: #255c7a;
    font-size: 0.78rem;
    font-weight: 800;
}

.wa-msg-text {
    color: #1f3046;
    line-height: 1.65;
    word-break: break-word;
    white-space: pre-wrap;
}

.wa-msg-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    color: #235a7e;
    text-decoration: none;
    font-weight: 700;
}

.wa-msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0.55rem;
    color: #72839a;
    font-size: 0.76rem;
}

.wa-msg-row.is-self .wa-msg-meta i {
    color: #2b9ea3;
}

.wa-read-icon.is-read {
    color: #1596b8 !important;
}

.wa-typing-indicator {
    padding: 0 1.3rem 0.8rem;
    color: #4d8b7b;
    font-size: 0.84rem;
    font-weight: 700;
}

.wa-thread-compose {
    padding: 1rem 1.2rem 1.1rem;
    border-top: 1px solid #d9e3ec;
    background: rgba(248, 251, 253, 0.92);
}

.wa-compose-form {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 52px;
    align-items: end;
    gap: 0.8rem;
}

.wa-attach-btn,
.wa-send-btn {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #d5e0ea;
    background: #ffffff;
    color: #2b5876;
    cursor: pointer;
    box-shadow: 0 12px 20px rgba(17, 38, 65, 0.05);
}

.wa-send-btn {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #0d7a7c 0%, #1ba798 100%);
}

.wa-compose-box {
    min-height: 48px;
    max-height: 120px;
    resize: none;
    border-radius: 18px;
    border: 1px solid #d7e1eb;
    padding: 0.8rem 1rem;
    box-shadow: none;
}

.wa-attachment-hint {
    margin-top: 0.55rem;
    color: #6f8398;
    font-size: 0.8rem;
}

.chat-message-bubble {
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.chat-message-self {
    background: #d8f8d5;
}

.chat-message-other {
    background: #fff;
}

.animate-rise {
    animation: riseIn 0.65s ease forwards;
}

.animate-rise.delay-2 {
    animation-delay: 0.12s;
}

.is-hidden {
    display: none !important;
}

.mailx-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.2rem;
    min-height: calc(100vh - 170px);
    align-items: start;
}

.mailx-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #d9e3ef;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 248, 252, 0.98) 100%);
    box-shadow: 0 18px 38px rgba(18, 37, 63, 0.08);
    min-width: 0;
    position: sticky;
    top: 1rem;
}

.mailx-sidebar-top {
    display: grid;
    gap: 1rem;
}

.mailx-compose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #14376a 0%, #2d7da5 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 16px 32px rgba(22, 58, 104, 0.24);
}

.mailx-compose-btn:hover {
    color: #fff;
    transform: translateY(-1px);
}

.mailx-user-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem;
    border-radius: 18px;
    background: rgba(243, 247, 252, 0.95);
    border: 1px solid #dce6f0;
    min-width: 0;
    overflow: hidden;
}

.mailx-user-avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #dce8f6 0%, #eef5fb 100%);
    color: #173b62;
    font-weight: 800;
}

.mailx-user-card strong,
.mailx-directory-person strong {
    display: block;
    color: #17304d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailx-user-card small,
.mailx-directory-person span {
    color: #6e8096;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailx-folder-nav {
    display: grid;
    gap: 0.3rem;
}

.mailx-folder-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.95rem;
    border-radius: 16px;
    color: #29435f;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mailx-folder-link:hover {
    background: #f1f6fb;
    color: #163b60;
    transform: translateX(2px);
}

.mailx-folder-link.is-active {
    background: linear-gradient(135deg, #d8e8f7 0%, #e9f2fb 100%);
    color: #14375e;
    font-weight: 800;
}

.mailx-folder-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.mailx-folder-count {
    min-width: 26px;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(23, 58, 102, 0.08);
    color: #204163;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.mailx-side-note,
.mailx-side-card {
    display: grid;
    gap: 0.4rem;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid #dce6f0;
    background: rgba(247, 250, 253, 0.96);
    color: #5f738b;
}

.mailx-side-note strong,
.mailx-side-card h5 {
    color: #183552;
}

.mailx-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.mailx-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.mailx-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid #dce5ef;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 26px rgba(18, 36, 61, 0.06);
    min-width: 0;
}

.mailx-search i {
    color: #73859b;
}

.mailx-search input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #1d3653;
}

.mailx-toolbar-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
    min-width: 0;
    text-align: right;
}

.mailx-folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.52rem 0.85rem;
    border-radius: 999px;
    background: rgba(222, 233, 247, 0.95);
    color: #23476f;
    font-size: 0.84rem;
    font-weight: 800;
}

.mailx-toolbar-count,
.mailx-back-link {
    color: #62758d;
    text-decoration: none;
    font-weight: 700;
}

.mailx-back-link:hover {
    color: #1d456f;
}

.mailx-surface,
.mailx-thread-surface,
.mailx-compose-surface {
    border: 1px solid #dbe5ef;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 40px rgba(18, 36, 61, 0.08);
    overflow: hidden;
}

.mailx-list-header,
.mailx-thread-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.45rem 1.2rem;
    border-bottom: 1px solid #e2eaf2;
}

.mailx-list-header h3,
.mailx-thread-header h2 {
    margin-bottom: 0.35rem;
    font-weight: 800;
    color: #17304d;
}

.mailx-list-header p {
    margin-bottom: 0;
    color: #6a7d94;
}

.mailx-list {
    display: grid;
}

.mailx-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 96px;
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #edf2f7;
    min-width: 0;
}

.mailx-row:last-child {
    border-bottom: 0;
}

.mailx-row.is-unread {
    background: linear-gradient(90deg, rgba(236, 245, 255, 0.72) 0%, rgba(255, 255, 255, 0.96) 52%);
}

.mailx-row-controls,
.mailx-row-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
}

.mailx-row-controls form,
.mailx-row-actions form {
    display: flex;
}

.mailx-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e3ee;
    border-radius: 12px;
    background: #fff;
    color: #38597a;
}

.mailx-icon-btn:hover {
    background: #f3f8fc;
    color: #173c62;
}

.mailx-row-main {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
    padding: 0.35rem 0.2rem;
    color: inherit;
    text-decoration: none;
    align-self: stretch;
}

.mailx-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.mailx-row-top > div:first-child {
    min-width: 0;
}

.mailx-row-counterparty {
    font-weight: 800;
    color: #17324f;
}

.mailx-row-counterparty-meta {
    margin-left: 0.5rem;
    color: #7d8ca1;
    font-size: 0.82rem;
}

.mailx-row-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    color: #6f8196;
    font-size: 0.82rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.mailx-row-subject {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
}

.mailx-row-subject strong {
    color: #203953;
    white-space: nowrap;
}

.mailx-row-subject span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #7788a0;
}

.mailx-row-status,
.mailx-thread-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    width: fit-content;
}

.mailx-row-status.tone-success,
.mailx-thread-status.tone-success {
    background: rgba(220, 244, 231, 0.92);
    color: #1d6a43;
}

.mailx-row-status.tone-warning,
.mailx-thread-status.tone-warning {
    background: rgba(252, 240, 210, 0.96);
    color: #8a5c0f;
}

.mailx-row-status.tone-danger,
.mailx-thread-status.tone-danger {
    background: rgba(251, 225, 230, 0.96);
    color: #ab3852;
}

.mailx-row-status.tone-secondary,
.mailx-thread-status.tone-secondary {
    background: rgba(233, 239, 246, 0.96);
    color: #617286;
}

.mailx-empty-state {
    display: grid;
    place-items: center;
    gap: 0.55rem;
    padding: 3rem 1.2rem;
    text-align: center;
}

.mailx-empty-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #dfe9f7 0%, #eef5fb 100%);
    color: #24496f;
    font-size: 1.8rem;
}

.mailx-empty-state p {
    max-width: 520px;
    color: #6c8097;
}

.mailx-thread-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mailx-thread-stack {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
}

.mailx-thread-card {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    border: 1px solid #dce6ef;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 253, 0.98) 100%);
}

.mailx-thread-card.is-self {
    background: linear-gradient(180deg, rgba(239, 249, 244, 0.98) 0%, rgba(249, 255, 252, 0.98) 100%);
    border-color: #d6eadf;
}

.mailx-thread-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mailx-thread-person {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.mailx-thread-avatar {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #dfe9f6 0%, #eff5fb 100%);
    color: #183b60;
    font-weight: 800;
}

.mailx-thread-from,
.mailx-thread-date {
    color: #73849a;
}

.mailx-thread-recipient-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.mailx-thread-recipient-grid div {
    display: grid;
    gap: 0.28rem;
    padding: 0.8rem 0.9rem;
    border-radius: 18px;
    background: rgba(245, 249, 253, 0.95);
    border: 1px solid #e0e9f1;
}

.mailx-thread-recipient-grid span {
    color: #7b8da3;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
}

.mailx-thread-recipient-grid strong {
    color: #23405d;
    line-height: 1.5;
}

.mailx-thread-status {
    justify-content: space-between;
    border-radius: 18px;
    padding: 0.9rem 1rem;
}

.mailx-thread-status span {
    font-weight: 600;
}

.mailx-thread-body {
    color: #23344a;
    line-height: 1.82;
}

.mailx-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.mailx-attachment-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.58rem 0.78rem;
    border-radius: 14px;
    border: 1px solid #dbe5ef;
    background: #fff;
    color: #23496e;
    text-decoration: none;
    font-weight: 700;
}

.mailx-compose-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
}

.mailx-compose-form {
    padding: 0 1.45rem 1.45rem;
}

.mailx-compose-switches {
    display: flex;
    gap: 0.5rem;
}

.mailx-toggle-chip {
    border: 1px solid #d7e2ed;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    background: #fff;
    color: #26496f;
    font-weight: 700;
}

.mailx-recipient-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 0.95rem 0;
    border-bottom: 1px solid #edf2f7;
}

.mailx-recipient-row label {
    color: #5f748d;
    font-weight: 800;
    padding-top: 0.8rem;
}

.mailx-recipient-field {
    display: grid;
    gap: 0.35rem;
}

.mailx-recipient-field .form-control {
    border-radius: 14px;
    padding: 0.8rem 0.95rem;
}

.mailx-recipient-field small {
    color: #8091a6;
}

.mailx-compose-body {
    padding: 1rem 0;
}

.mailx-compose-body .form-control {
    min-height: 320px;
    border-radius: 20px;
    padding: 1rem 1.05rem;
    line-height: 1.75;
    resize: none;
}

.mailx-attachment-panel {
    display: grid;
    gap: 0.55rem;
    padding: 1rem 0 0;
}

.mailx-attachment-panel label {
    color: #214264;
    font-weight: 800;
}

.mailx-compose-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 1.35rem;
}

.mailx-compose-sidepanel {
    display: grid;
    gap: 1rem;
}

.mailx-side-card ul {
    margin: 0;
    padding-left: 1rem;
}

.mailx-side-card li {
    margin-bottom: 0.5rem;
}

.mailx-directory-list {
    display: grid;
    gap: 0.8rem;
}

.mailx-directory-person {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid #e1e9f1;
}

.access-manage-shell {
    display: grid;
    gap: 1.25rem;
}

.access-manage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid #dbe5ef;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 36px rgba(18, 36, 61, 0.08);
}

.access-manage-head h3 {
    font-weight: 800;
    color: #18324f;
}

.access-manage-meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.access-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    background: rgba(222, 233, 247, 0.95);
    color: #23476f;
    font-size: 0.82rem;
    font-weight: 800;
}

.access-manage-form {
    display: grid;
    gap: 1rem;
}

.access-panel {
    border: 1px solid #dbe5ef;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 36px rgba(18, 36, 61, 0.08);
    overflow: hidden;
}

.access-panel-head {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #e4ebf2;
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98) 0%, rgba(243, 247, 252, 0.98) 100%);
}

.access-panel-head h5 {
    font-weight: 800;
    color: #18324f;
}

.access-panel-head small {
    color: #6f8197;
}

.access-panel-body {
    padding: 1rem;
}

.access-panel-body-modules {
    max-height: 70vh;
    overflow-y: auto;
}

.access-panel-body-features {
    max-height: 70vh;
    overflow-y: auto;
}

.access-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.access-option-card,
.access-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border: 1px solid #dbe5ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.access-option-card:hover,
.access-feature-item:hover {
    border-color: #adc3e0;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(18, 36, 61, 0.06);
}

.access-option-card input,
.access-feature-item input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    accent-color: #2f6fc3;
    flex: 0 0 auto;
}

.access-option-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.access-option-copy strong {
    color: #1c3654;
    line-height: 1.35;
}

.access-option-copy small {
    color: #76889d;
    word-break: break-word;
}

.access-feature-groups {
    display: grid;
    gap: 1rem;
}

.access-feature-group {
    border: 1px solid #dee7f0;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.98) 0%, rgba(246, 249, 253, 0.98) 100%);
    overflow: hidden;
}

.access-feature-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #e5ecf3;
}

.access-feature-group-head strong {
    display: block;
    color: #17324f;
}

.access-feature-group-head small {
    color: #72849a;
}

.access-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.access-manage-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    border: 1px solid #dbe5ef;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 32px rgba(18, 36, 61, 0.06);
}

.kra-feed-shell {
    display: grid;
    gap: 1.25rem;
}

.kra-feed-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid #dbe5ef;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(217, 230, 248, 0.9) 0%, rgba(217, 230, 248, 0) 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 253, 0.98) 100%);
    box-shadow: 0 22px 46px rgba(18, 36, 61, 0.08);
}

.kra-feed-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 0.8rem;
    background: rgba(224, 235, 248, 0.92);
    color: #31517d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kra-feed-title {
    margin-bottom: 0.45rem;
    font-weight: 800;
    color: #17304d;
}

.kra-feed-copy {
    max-width: 760px;
    color: #677a93;
    line-height: 1.7;
}

.kra-feed-hero-meta {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.kra-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(238, 243, 250, 0.95);
    color: #26486f;
    font-size: 0.82rem;
    font-weight: 800;
}

.kra-pill.is-success {
    background: rgba(220, 244, 231, 0.94);
    color: #1f6b43;
}

.kra-pill.is-primary {
    background: rgba(221, 233, 249, 0.96);
    color: #1d4f89;
}

.kra-feed-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.kra-feed-main {
    display: grid;
    gap: 1rem;
}

.kra-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.kra-dashboard-card {
    grid-column: span 4;
}

.kra-dashboard-card-wide {
    grid-column: 1 / -1;
}

.kra-launch-button {
    width: fit-content;
    min-width: 180px;
}

.kra-feed-sidebar {
    display: none;
}

.kra-side-card {
    display: grid;
    gap: 0.8rem;
    padding: 1.15rem;
    border: 1px solid #dbe5ef;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(18, 36, 61, 0.07);
}

.kra-side-title {
    font-size: 1rem;
    font-weight: 800;
    color: #17304d;
}

.kra-side-note {
    color: #6f8198;
    line-height: 1.65;
}

.kra-side-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.kra-side-stat {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 0.9rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
    border: 1px solid #e0e8f1;
}

.kra-side-stat small {
    color: #7a8ca2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
}

.kra-side-stat strong {
    color: #183553;
    font-size: 1.1rem;
}

.kra-side-list {
    display: grid;
    gap: 0.7rem;
}

.kra-side-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    background: rgba(245, 249, 253, 0.95);
    border: 1px solid #e0e8f1;
}

.kra-side-list span {
    color: #6e7f96;
    font-weight: 700;
}

.kra-side-list strong {
    color: #183553;
}

.kra-section-card {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    border: 1px solid #dbe5ef;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(18, 36, 61, 0.08);
}

.kra-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}

.kra-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #183553;
}

.kra-section-sub {
    margin-top: 0.25rem;
    color: #4f6f93;
    font-weight: 700;
}

.kra-section-copy {
    margin-top: 0.5rem;
    color: #6b7d93;
    line-height: 1.7;
}

.kra-section-weight,
.kra-item-weight-editor {
    display: grid;
    gap: 0.35rem;
}

.kra-section-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.kra-mini-label {
    color: #6f8198;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kra-weight-static {
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    border: 1px solid #dce6f0;
    background: rgba(245, 249, 253, 0.94);
    color: #17324f;
    font-weight: 800;
}

.kra-item-stack {
    display: grid;
    gap: 0.95rem;
}

.kra-item-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #dce6ef;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(247, 250, 253, 0.98) 100%);
}

.kra-item-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 1rem;
    align-items: start;
}

.kra-item-main {
    min-width: 0;
}

.kra-item-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
}

.kra-item-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #183553;
}

.kra-item-badges {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.kra-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    background: rgba(234, 240, 248, 0.96);
    color: #32527d;
    font-size: 0.76rem;
    font-weight: 800;
}

.kra-item-copy {
    color: #415772;
    line-height: 1.75;
}

.kra-guidance-box {
    margin-top: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: rgba(243, 247, 252, 0.95);
    border: 1px solid #dfe8f1;
}

.kra-guidance-title {
    margin-bottom: 0.35rem;
    color: #244b74;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kra-guidance-copy {
    color: #60748d;
    line-height: 1.7;
}

.kra-response-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.kra-response-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid #dfe8f1;
}

.kra-response-card.is-self {
    background: linear-gradient(180deg, rgba(239, 247, 255, 0.95) 0%, rgba(248, 251, 255, 0.96) 100%);
}

.kra-response-card.is-manager {
    background: linear-gradient(180deg, rgba(247, 249, 252, 0.95) 0%, rgba(250, 252, 254, 0.96) 100%);
}

.kra-response-head {
    display: grid;
    gap: 0.2rem;
}

.kra-response-head strong {
    color: #173553;
}

.kra-response-head span {
    color: #74869c;
    font-size: 0.86rem;
}

.kra-writing-box {
    min-height: 132px;
    resize: vertical;
    line-height: 1.7;
}

.kra-overview-box {
    min-height: 160px;
}

.kra-add-section-grid {
    display: grid;
    gap: 0.85rem;
}

.kra-add-section-box {
    min-height: 120px;
    resize: vertical;
}

.kra-modal-shell {
    border: 1px solid #dbe5ef;
    border-radius: 24px;
    box-shadow: 0 24px 50px rgba(18, 36, 61, 0.14);
}

.kra-modal-header,
.kra-modal-footer {
    border-color: #e1e8f0;
}

.office-shell {
    display: grid;
    gap: 1.25rem;
}

.office-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid #dbe5ef;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(223, 236, 250, 0.95) 0%, rgba(223, 236, 250, 0) 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
    box-shadow: 0 22px 46px rgba(18, 36, 61, 0.08);
}

.office-kicker {
    display: inline-flex;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 0.8rem;
    background: rgba(224, 235, 248, 0.92);
    color: #31517d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.office-title {
    margin-bottom: 0.45rem;
    font-weight: 800;
    color: #17304d;
}

.office-copy {
    color: #677a93;
    line-height: 1.7;
    max-width: 760px;
}

.office-hero-stats,
.office-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
}

.office-stat-chip {
    display: grid;
    gap: 0.15rem;
    min-width: 110px;
    padding: 0.75rem 0.9rem;
    border: 1px solid #dbe5ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    color: #5d6f86;
}

.office-stat-chip strong {
    color: #17304d;
    font-size: 1.1rem;
}

.office-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.office-status-banner {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 1rem 1.2rem;
    border-radius: 20px;
    border: 1px solid #dbe5ef;
    background: rgba(255, 255, 255, 0.94);
    color: #27435f;
}

.office-status-banner.is-live {
    border-color: #cce8d7;
    background: linear-gradient(180deg, #f7fffa 0%, #effaf3 100%);
}

.office-status-banner.is-warning {
    border-color: #e8dcc2;
    background: linear-gradient(180deg, #fffdf7 0%, #fbf6ea 100%);
}

.office-card {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #dbe5ef;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(18, 36, 61, 0.07);
}

.office-card-head h3 {
    margin-bottom: 0.2rem;
    color: #17304d;
    font-size: 1.08rem;
}

.office-card-head p {
    margin-bottom: 0;
    color: #6f8198;
}

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

.office-form-field.is-wide {
    grid-column: 1 / -1;
}

.office-document-list {
    display: grid;
    gap: 0.9rem;
}

.office-document-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid #dfE7f1;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
}

.office-doc-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.3rem;
    color: #fff;
}

.office-doc-icon.is-word {
    background: linear-gradient(135deg, #2057aa 0%, #3978d6 100%);
}

.office-doc-icon.is-excel {
    background: linear-gradient(135deg, #177245 0%, #2ca768 100%);
}

.office-doc-icon.is-powerpoint {
    background: linear-gradient(135deg, #d35a1e 0%, #f08945 100%);
}

.office-doc-top {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.office-doc-meta,
.office-doc-copy {
    color: #70829a;
    font-size: 0.92rem;
}

.office-doc-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.office-empty-state {
    display: grid;
    place-items: center;
    gap: 0.8rem;
    min-height: 220px;
    border: 1px dashed #c9d5e8;
    border-radius: 22px;
    color: #6d8098;
    text-align: center;
}

.office-empty-state i {
    font-size: 2rem;
}

.office-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.office-toolbar {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.office-word-surface {
    min-height: 520px;
    padding: 1.3rem;
    border: 1px solid #d8e1ef;
    border-radius: 20px;
    background: #fff;
    line-height: 1.75;
    box-shadow: inset 0 1px 2px rgba(10, 30, 60, 0.04);
}

.office-word-surface:focus {
    outline: none;
    border-color: #89a7d5;
    box-shadow: 0 0 0 0.2rem rgba(43, 103, 187, 0.12);
}

.office-sheet-wrap {
    overflow: auto;
}

.office-sheet-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
}

.office-sheet-table th,
.office-sheet-table td {
    border: 1px solid #dbe5ef;
    padding: 0;
    background: #fff;
}

.office-sheet-table th {
    min-width: 54px;
    padding: 0.7rem;
    text-align: center;
    background: #f5f8fc;
    color: #48607e;
}

.office-sheet-table td input {
    border: 0;
    border-radius: 0;
    min-width: 140px;
    box-shadow: none !important;
}

.office-slide-stack {
    display: grid;
    gap: 1rem;
}

.office-slide-card {
    display: grid;
    gap: 0.6rem;
    padding: 1.05rem;
    border: 1px solid #dce6f0;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.office-slide-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.office-save-bar {
    display: flex;
    justify-content: flex-end;
}

.office-live-editor {
    min-height: 780px;
    border: 1px solid #dbe5ef;
    border-radius: 20px;
    overflow: hidden;
    background: #f7f9fd;
}

.office-setup-note {
    padding: 1rem 1.1rem;
    border: 1px dashed #cbd7e6;
    border-radius: 18px;
    background: #f8fbff;
    color: #5a6e88;
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .crm-sidebar {
        display: none;
    }

    .crm-shell {
        display: block !important;
    }

    .crm-topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .crm-topbar-row {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-topbar-actions {
        justify-content: flex-start;
        gap: 0.65rem !important;
    }

    .topbar-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.55rem 0.8rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid #dce5f2;
        box-shadow: 0 8px 18px rgba(17, 39, 74, 0.06);
    }

    .crm-content-section {
        padding: 1rem !important;
    }

    .card {
        border-radius: 16px;
    }

    .home-hero,
    .login-brand-pane,
    .login-form-pane {
        padding: 1.5rem;
    }

    .login-brand-pane {
        border-right: 0;
        border-bottom: 1px solid #dce5f3;
    }

    .login-auth-card,
    .login-feature-tab {
        padding: 1.4rem;
    }

    .login-feature-tab {
        border-left: 0;
        border-top: 1px solid #dbe4f2;
    }

    .ref-auth-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ref-auth-left {
        padding: 1.5rem;
    }

    .ref-auth-right {
        border-top-left-radius: 0;
        min-height: 280px;
    }

    .ref-title {
        font-size: 1.6rem;
    }

    .studio-auth-shell,
    .studio-login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .studio-auth-left,
    .studio-login-info,
    .studio-auth-right,
    .studio-login-focus {
        padding: 1.35rem;
    }

    .studio-auth-right::before,
    .studio-login-focus::before {
        inset: 0;
    }

    .studio-hero-title,
    .studio-login-hero {
        font-size: 2.15rem;
        line-height: 1.05;
    }

    .studio-insight-grid {
        grid-template-columns: 1fr;
    }

    .studio-login-card {
        max-width: none;
    }

    .studio-login-head,
    .studio-login-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .wa-shell {
        grid-template-columns: 1fr;
    }

    .wa-sidebar {
        border-right: 0;
        border-bottom: 1px solid #d9e2ec;
    }

    .wa-quick-users {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wa-thread-header {
        flex-direction: column;
        align-items: stretch;
    }

    .wa-thread-tools {
        width: 100%;
    }

    .wa-thread-actions {
        justify-content: flex-start;
    }

    .wa-call-stage {
        grid-template-columns: 1fr;
    }

    .wa-local-tile,
    .wa-remote-empty,
    .wa-remote-tile {
        min-height: 220px;
    }

    .wa-msg-bubble {
        max-width: 88%;
    }

    .mailx-shell,
    .mailx-compose-grid {
        grid-template-columns: 1fr;
    }

    .mailx-toolbar,
    .mailx-list-header,
    .mailx-thread-header,
    .mailx-thread-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .mailx-sidebar {
        position: static;
    }

    .mailx-thread-recipient-grid,
    .mailx-recipient-row {
        grid-template-columns: 1fr;
    }

    .mailx-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .mailx-row-actions {
        grid-column: 2;
        justify-content: flex-start;
        padding-bottom: 0.35rem;
    }

    .mailx-toolbar-meta,
    .mailx-thread-actions {
        justify-content: flex-start;
        text-align: left;
    }

    .access-manage-head,
    .access-feature-group-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .access-option-grid,
    .access-feature-list {
        grid-template-columns: 1fr;
    }

    .kra-feed-hero,
    .kra-section-head,
    .kra-item-top,
    .kra-item-title-row {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .kra-feed-layout,
    .kra-response-grid {
        grid-template-columns: 1fr;
    }

    .kra-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .kra-dashboard-card,
    .kra-dashboard-card-wide {
        grid-column: auto;
    }

    .office-hero,
    .office-grid,
    .office-meta-grid,
    .office-document-item {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

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

    .office-doc-actions,
    .office-hero-actions,
    .office-hero-stats {
        justify-content: flex-start;
    }

    .kra-feed-sidebar {
        position: static;
    }

    .kra-side-stats {
        grid-template-columns: 1fr 1fr;
    }

    .kra-section-badges,
    .kra-item-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .crm-topbar {
        min-height: auto;
    }

    .crm-topbar-brand strong {
        font-size: 0.98rem;
    }

    .crm-content-section {
        padding: 0.85rem !important;
    }

    .display-6 {
        font-size: 1.8rem;
    }

    .btn,
    .form-control,
    .form-select {
        border-radius: 10px;
    }
}