* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        #0d0d12;

    color:
        #f3f3f5;
}

:root {
    --graphite-950: #0d0d12;
    --graphite-900: #111017;
    --graphite-800: #15141b;
    --graphite-700: #201c29;
    --purple-500: #7c4dff;
    --purple-300: #b990ff;
    --text-primary: #f3f0f8;
    --text-secondary: #a5a0b2;
    --border-soft: rgba(255, 255, 255, 0.07);
}


/* =========================
   ОСНОВНАЯ СЕТКА
========================= */

.app-layout {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        260px
        1fr;
}


/* =========================
   SIDEBAR
========================= */

.sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width: 260px;
    height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 24px 16px;

    background:
        linear-gradient(
            180deg,
            #16131f 0%,
            #0f0e14 100%
        );

    border-right:
        1px solid
        rgba(145, 76, 255, 0.18);
}


.brand {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 4px 8px 28px;
}


.brand-logo {
    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #6e35c8,
            #9b5cff
        );

    color: white;

    font-weight: 800;
    font-size: 18px;

    box-shadow:
        0 0 24px
        rgba(133, 74, 255, 0.25);
}


.brand-title {
    font-weight: 700;

    font-size: 17px;
}


.brand-subtitle {
    margin-top: 2px;

    color: #8f8b9b;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1.4px;
}


.sidebar-nav {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.nav-link {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    border-radius: 10px;

    color: #aaa7b5;

    text-decoration: none;

    transition: 0.2s;
}


.nav-link:hover {
    background:
        rgba(133, 74, 255, 0.1);

    color: white;
}


.nav-link.active {
    background:
        rgba(133, 74, 255, 0.15);

    color:
        #b98aff;

    border:
        1px solid
        rgba(155, 92, 255, 0.2);
}


.nav-icon {
    width: 20px;

    text-align: center;
}


.sidebar-user {
    margin-top: auto;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 10px;

    background:
        rgba(255, 255, 255, 0.03);

    border:
        1px solid
        rgba(255, 255, 255, 0.05);

    border-radius: 12px;
}


.user-avatar {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        #713bc4;

    font-weight: 700;
}


.user-info {
    overflow: hidden;

    flex: 1;
}


.user-name {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 13px;

    font-weight: 600;
}


.user-role {
    margin-top: 2px;

    color: #8d8997;

    font-size: 11px;
}


.logout-button {
    border: 0;

    background: transparent;

    color: #77727f;

    cursor: pointer;

    font-size: 20px;
}


.logout-button:hover {
    color: #d0aaff;
}


/* =========================
   CONTENT
========================= */

.main-content {
    position: relative;
    overflow: hidden;

    grid-column: 2;

    min-width: 0;

    padding: 36px;

    background:
        radial-gradient(
            circle at top right,
            rgba(94, 40, 170, 0.11),
            transparent 35%
        ),
        #0d0d12;
}

.page-background-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}

.page-background-logo img {
    width: min(760px, 72vw);
    max-height: 78vh;
    object-fit: contain;
    opacity: 0.13;
    filter: brightness(1.35) saturate(1.25) drop-shadow(0 0 42px rgba(157, 102, 255, 0.42));
}

.main-content > *:not(.page-background-logo) {
    position: relative;
    z-index: 1;
}


.page-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}


.page-header h1 {
    margin: 0 0 6px;

    font-size: 30px;
}


.page-header p {
    margin: 0;

    color: #888490;
}


.primary-button {
    display: inline-flex;

    align-items: center;

    padding: 11px 18px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #713bc4,
            #9859eb
        );

    color: white;

    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 8px 24px
        rgba(109, 55, 194, 0.22);
}


.primary-button:hover {
    transform:
        translateY(-1px);
}


/* =========================
   СТАТИСТИКА
========================= */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 22px;
}


.stat-card {
    padding: 20px;

    border-radius: 14px;

    background:
        #15141b;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.stat-label {
    color: #8d8995;

    font-size: 13px;
}


.stat-value {
    margin-top: 9px;

    font-size: 29px;

    font-weight: 700;

    color: #fff;
}


/* =========================
   КАРТОЧКИ
========================= */

.content-card {
    padding: 22px;

    border-radius: 16px;

    background:
        #15141b;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.section-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.section-header h2 {
    margin: 0;

    font-size: 18px;
}


.section-header p {
    margin:
        5px
        0
        0;

    color:
        #7f7b87;

    font-size:
        13px;
}


.text-link {
    color:
        #aa7fff;

    text-decoration:
        none;

    font-size:
        13px;
}


/* =========================
   ЗАКАЗЫ
========================= */

.orders-table {
    overflow: hidden;

    border-radius: 10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.04);
}


.orders-row {
    display: grid;

    grid-template-columns:
        70px
        minmax(240px, 2fr)
        130px
        100px
        130px
        120px;

    align-items: center;

    gap: 16px;

    padding:
        14px
        16px;
}


.orders-head {
    background:
        #101016;

    color:
        #716d79;

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.6px;
}


.order-item {
    color:
        #d8d6dc;

    text-decoration:
        none;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.035);

    transition:
        background
        0.2s;
}


.order-item:hover {
    background:
        rgba(137, 76, 235, 0.06);
}


.order-number {
    color:
        #898591;

    font-size:
        12px;
}


.order-title {
    color:
        white;

    font-weight:
        600;

    font-size:
        14px;
}


.order-description {
    margin-top:
        3px;

    overflow:
        hidden;

    color:
        #797581;

    font-size:
        12px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* =========================
   СТАТУСЫ
========================= */

.status {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px
        9px;

    border-radius:
        100px;

    background:
        rgba(255, 255, 255, 0.06);

    font-size:
        11px;
}


.status-new {
    color:
        #b997ff;

    background:
        rgba(140, 81, 255, 0.13);
}


.status-accepted {
    color:
        #75b8ff;

    background:
        rgba(64, 137, 255, 0.12);
}


.status-progress {
    color:
        #ffd073;

    background:
        rgba(255, 174, 56, 0.1);
}


.status-completed {
    color:
        #71dda1;

    background:
        rgba(49, 190, 110, 0.1);
}


/* =========================
   EMPTY
========================= */

.empty-state {
    padding:
        50px
        20px;

    text-align:
        center;
}


.empty-icon {
    color:
        #7448b4;

    font-size:
        40px;
}


.empty-state h3 {
    margin-bottom:
        5px;
}


.empty-state p {
    color:
        #77727f;
}


/* =========================
   АДАПТИВ
========================= */

@media (
    max-width: 1100px
) {

    .stats-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .orders-table {
        overflow-x:
            auto;
    }

    .orders-row {
        min-width:
            850px;
    }
}

/* =========================
   КАРТОЧКА ЗАКАЗА
========================= */

.back-link {
    display: inline-block;
    margin-bottom: 12px;
    color: #9d76e8;
    text-decoration: none;
    font-size: 13px;
}

.back-link:hover {
    color: #c09cff;
}

.order-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
}

.order-section {
    margin-bottom: 20px;
}

.big-status {
    padding: 8px 14px;
    font-size: 13px;
}

.status-cancelled {
    color: #ff8d8d;
    background: rgba(255, 73, 73, 0.11);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.info-item {
    padding: 15px;
    border-radius: 10px;
    background: #101016;
    border: 1px solid rgba(255, 255, 255, 0.045);
}

.info-label {
    margin-bottom: 6px;
    color: #797582;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    color: #e8e6eb;
    font-size: 14px;
    font-weight: 500;
}

.price-value {
    color: #b88aff;
    font-size: 18px;
    font-weight: 700;
}

.order-description-full {
    padding: 17px;
    line-height: 1.7;
    color: #bbb7c1;
    background: #101016;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    white-space: pre-wrap;
}

.person-card {
    display: flex;
    align-items: center;
    gap: 13px;
}

.person-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #733ac8, #a763ff);
    font-size: 18px;
    font-weight: 700;
}

.employee-avatar {
    background: linear-gradient(135deg, #33303d, #6f45aa);
}

.person-name {
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.person-line {
    margin-top: 4px;
    color: #87838e;
    font-size: 12px;
}

.person-role {
    display: inline-block;
    margin-top: 7px;
    padding: 4px 8px;
    color: #b990ff;
    background: rgba(147, 83, 255, 0.1);
    border-radius: 100px;
    font-size: 10px;
}

.client-extra,
.service-info {
    margin-top: 18px;
}

.client-extra > div,
.service-info > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.client-extra span,
.service-info span {
    color: #787480;
    font-size: 12px;
}

.client-extra strong,
.service-info strong {
    color: #ccc9d0;
    font-size: 12px;
    font-weight: 500;
}

.not-assigned,
.muted-text {
    color: #77727e;
    font-size: 13px;
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    background: #101016;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 10px;
}

.file-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    color: #b48aff;
    background: rgba(134, 73, 227, 0.12);
}

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    overflow: hidden;
    color: #e7e5e9;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file-meta {
    margin-top: 4px;
    color: #6e6a75;
    font-size: 10px;
}

.file-download {
    padding: 7px 11px;
    border-radius: 8px;
    color: #ad83f7;
    background: rgba(136, 76, 226, 0.08);
    text-decoration: none;
    font-size: 11px;
}

.file-download:hover {
    background: rgba(136, 76, 226, 0.16);
}

.empty-files {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #101016;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.empty-files-icon {
    color: #7544bd;
    font-size: 30px;
}

.empty-files strong {
    font-size: 13px;
}

.empty-files p {
    margin: 4px 0 0;
    color: #74707b;
    font-size: 11px;
}

@media (max-width: 1000px) {
    .order-detail-grid {
        grid-template-columns: 1fr;
    }
}

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

/* ========================================================================
   3Д-КОЛЬЦО OFFICE — VISUAL SYSTEM 2026
   A single visual layer shared by every screen. Business logic stays in
   the existing templates and routes; these rules only define presentation.
======================================================================== */

:root {
    --ink-950: #0c0b11;
    --ink-900: #111017;
    --ink-850: #17141f;
    --ink-800: #1d1928;
    --ink-700: #2b2439;
    --surface: rgba(24, 20, 34, .88);
    --surface-strong: #1b1726;
    --surface-soft: #14121c;
    --line: rgba(255, 255, 255, .085);
    --line-soft: rgba(255, 255, 255, .055);
    --white: #f7f5fb;
    --text: #e8e4ef;
    --muted: #928ba3;
    --dim: #6f687d;
    --violet: #a874ff;
    --violet-strong: #8a4dff;
    --violet-soft: rgba(155, 91, 255, .14);
    --green: #6fdda2;
    --amber: #f1c671;
    --blue: #78b9ff;
    --red: #ff8d9f;
    --sidebar-width: 264px;
}

html { background: var(--ink-950); }

body {
    color: var(--text);
    background:
        radial-gradient(circle at 82% -12%, rgba(122, 61, 205, .18), transparent 31rem),
        radial-gradient(circle at 20% 100%, rgba(73, 42, 119, .10), transparent 35rem),
        var(--ink-950);
    font-size: 14px;
}

.app-layout {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    z-index: 10;
    width: var(--sidebar-width);
    padding: 25px 14px 18px;
    background:
        linear-gradient(180deg, rgba(31, 24, 45, .97), rgba(17, 15, 23, .98) 70%),
        var(--ink-900);
    border-right: 1px solid rgba(172, 115, 255, .16);
    box-shadow: 18px 0 60px rgba(0, 0, 0, .13);
}

.brand {
    gap: 12px;
    padding: 3px 12px 30px;
}

.brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(140deg, #7138c7, #bd8cff);
    box-shadow: 0 11px 26px rgba(125, 65, 221, .28), inset 0 1px 0 rgba(255,255,255,.22);
    font-size: 15px;
    letter-spacing: -.04em;
}

.brand-title { color: var(--white); font-size: 16px; letter-spacing: -.02em; }
.brand-subtitle { color: #9487ab; letter-spacing: .20em; font-size: 10px; }

.brand-logo {
    object-fit: cover;
    object-position: center;
    padding: 0;
}

.conversation-image-button { display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; text-align: left; }
.conversation-image-button img { display: block; transition: opacity .18s ease; }
.conversation-image-button:hover img { opacity: .82; }
.conversation-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(5, 4, 10, .92); cursor: zoom-out; }
.conversation-lightbox[hidden] { display: none; }
.conversation-lightbox img { max-width: min(94vw, 1200px); max-height: 90vh; object-fit: contain; border-radius: 12px; box-shadow: 0 18px 80px rgba(0, 0, 0, .55); cursor: default; }
.conversation-lightbox-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(0,0,0,.35); font-size: 30px; line-height: 1; cursor: pointer; }
.conversation-lightbox-close:hover { background: rgba(255,255,255,.16); }
.lightbox-open { overflow: hidden; }

.sidebar-nav { gap: 4px; }

.nav-link {
    position: relative;
    gap: 12px;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #a39caf;
    font-size: 13px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.nav-link:hover {
    color: var(--white);
    background: rgba(166, 111, 255, .08);
    border-color: rgba(177, 127, 255, .10);
    transform: translateX(2px);
}

.nav-link.active {
    color: #d4bbff;
    background: linear-gradient(90deg, rgba(143, 74, 244, .25), rgba(126, 63, 219, .08));
    border-color: rgba(183, 132, 255, .18);
    box-shadow: inset 3px 0 0 #a875ff, 0 8px 24px rgba(40, 19, 75, .18);
}

.nav-icon {
    display: inline-grid;
    place-items: center;
    width: 21px;
    color: #857996;
    font-size: 18px;
    line-height: 1;
}

.nav-link.active .nav-icon { color: var(--violet); }
.notification-badge { margin-left: auto; }

.sidebar-user {
    gap: 10px;
    margin: auto 2px 0;
    padding: 12px 10px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #7542c7, #b07bff);
    box-shadow: 0 6px 16px rgba(129, 72, 216, .22);
}

.user-name { color: var(--text); font-size: 12px; }
.user-role { color: var(--dim); font-size: 10px; }
.logout-button { color: #7e758c; font-size: 18px; }

.main-content {
    grid-column: 2;
    min-height: 100vh;
    overflow: hidden;
    padding: 25px clamp(22px, 4vw, 54px) 54px;
    background: transparent;
}

.page-background-logo { opacity: .62; mix-blend-mode: screen; }
.page-background-logo img { width: min(680px, 62vw); opacity: .16; filter: saturate(1.25) brightness(1.18) drop-shadow(0 0 42px rgba(157, 102, 255, .42)); }
.main-content > *:not(.page-background-logo) { position: relative; z-index: 1; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 64px;
    margin-bottom: 38px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.topbar-heading { display: flex; align-items: center; gap: 12px; }
.topbar-heading h2 { margin: 4px 0 0; color: var(--white); font-size: 19px; letter-spacing: -.03em; }
.eyebrow { color: #846e9f; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }

.global-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(28vw, 280px);
    padding: 9px 11px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--dim);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.global-search:focus-within { background: rgba(255,255,255,.06); border-color: rgba(172, 112, 255, .55); box-shadow: 0 0 0 3px rgba(153, 88, 255, .10); }
.global-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 12px; }
.global-search input::placeholder { color: #777084; }
.search-icon { color: #aa84dc; font-size: 19px; line-height: .8; }
.global-search kbd { color: #766c83; font-size: 10px; white-space: nowrap; }
.topbar-bell { position: relative; color: #958aa3; text-decoration: none; font-size: 21px; line-height: 1; }
.topbar-bell:hover { color: var(--violet); }
.topbar-bell span { position: absolute; top: -8px; right: -9px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: #9a5df2; font-size: 9px; }
.topbar-user { display: flex; align-items: center; gap: 9px; padding-left: 4px; }
.topbar-user .user-avatar { width: 31px; height: 31px; font-size: 12px; }
.topbar-user strong, .topbar-user span { display: block; }
.topbar-user strong { color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.topbar-user span { margin-top: 3px; color: var(--dim); font-size: 10px; }

.page-header { align-items: flex-end; gap: 22px; margin-bottom: 25px; }
.page-header h1 { color: var(--white); font-size: clamp(27px, 3vw, 34px); letter-spacing: -.045em; }
.page-header p { color: var(--muted); font-size: 13px; }
.back-link { color: #aa83df; font-size: 12px; }

.primary-button, .secondary-button, .danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.primary-button {
    border: 1px solid rgba(211, 183, 255, .20);
    background: linear-gradient(135deg, #7540cb, #9b61ec);
    box-shadow: 0 9px 24px rgba(109, 55, 194, .22), inset 0 1px 0 rgba(255,255,255,.16);
}

.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(118, 61, 217, .34); }
.secondary-button { color: #b99be5; background: rgba(158, 100, 237, .08); border: 1px solid rgba(169, 116, 244, .18); text-decoration: none; }
.secondary-button:hover, .secondary-button.active-tab { color: #e7d9ff; background: rgba(158, 100, 237, .18); border-color: rgba(183, 137, 255, .38); }
.danger-button { color: #ffabb6; background: rgba(207, 72, 99, .12); border: 1px solid rgba(240, 110, 132, .20); }

.stats-grid { gap: 13px; margin-bottom: 18px; }
.stat-card {
    position: relative;
    overflow: hidden;
    min-height: 128px;
    padding: 19px 20px;
    background: linear-gradient(145deg, rgba(35, 28, 48, .95), rgba(21, 18, 29, .98));
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
}

.stat-card::after { content: ""; position: absolute; right: -26px; bottom: -38px; width: 110px; height: 110px; border: 1px solid rgba(176, 116, 255, .14); border-radius: 50%; box-shadow: 0 0 0 16px rgba(176, 116, 255, .025), 0 0 0 32px rgba(176, 116, 255, .018); }
.stat-label { color: #8e859d; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.stat-value { margin-top: 15px; color: var(--white); font-size: 31px; letter-spacing: -.055em; }
.stat-card:nth-child(1) .stat-value { color: #d1b6ff; }
.stat-card:nth-child(2) .stat-value { color: #9ecbff; }
.stat-card:nth-child(3) .stat-value { color: #90e6b2; }
.stat-card:nth-child(4) .stat-value, .stat-card.danger-card .stat-value { color: #ff9daf; }

.content-card, .action-card {
    padding: 21px;
    background: linear-gradient(150deg, rgba(28, 23, 39, .92), rgba(19, 17, 25, .94));
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.section-header { margin-bottom: 18px; }
.section-header h2 { color: var(--white); font-size: 15px; letter-spacing: -.015em; }
.section-header p { color: var(--dim); font-size: 11px; }
.text-link { color: #ad84e1; font-size: 11px; font-weight: 600; }
.text-link:hover { color: #d8baff; }
.dashboard-secondary-grid { gap: 14px; margin-bottom: 14px; }
.dashboard-attention { margin-bottom: 14px; }
.revenue-value { color: #d7b7ff; font-size: 31px; font-weight: 700; letter-spacing: -.05em; }
.employee-load-row, .attention-row { border-color: var(--line-soft); }
.employee-load-row:hover, .attention-row:hover { background: rgba(169, 108, 255, .065); }
.attention-title { color: var(--text); font-size: 12px; font-weight: 600; }
.attention-meta, .employee-load-caption { color: var(--dim); font-size: 11px; }
.attention-arrow { color: var(--violet); }
.dashboard-ok { padding: 14px; color: var(--green); background: rgba(87, 205, 136, .07); border: 1px solid rgba(87, 205, 136, .13); border-radius: 10px; font-size: 12px; }

.orders-table { overflow: auto; border: 1px solid var(--line-soft); border-radius: 11px; }
.orders-row { gap: 15px; padding: 14px 15px; }
.orders-head { min-width: 760px; color: #746b80; background: rgba(8, 8, 12, .34); font-size: 9px; letter-spacing: .12em; }
.order-item { min-width: 760px; color: #cfc8d9; border-top-color: var(--line-soft); }
.order-item:hover { background: rgba(157, 98, 238, .065); }
.order-number { color: #8b7e99; font-size: 11px; }
.order-title { color: var(--white); font-size: 12px; }
.order-description { color: var(--dim); font-size: 11px; }

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 5px 9px;
    color: #cfc4df;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.status-new, .status-accepted { color: #c399ff; background: rgba(145, 76, 245, .13); border-color: rgba(173, 116, 255, .20); }
.status-modeling { color: #9fc7ff; background: rgba(84, 143, 235, .12); border-color: rgba(120, 175, 255, .18); }
.status-ready_for_print { color: #b9a0ff; background: rgba(128, 87, 231, .13); border-color: rgba(163, 124, 255, .18); }
.status-printing { color: #f3cf79; background: rgba(228, 164, 50, .12); border-color: rgba(235, 187, 81, .19); }
.status-post_processing { color: #ffb37b; background: rgba(224, 115, 58, .12); border-color: rgba(250, 144, 87, .18); }
.status-ready, .status-completed { color: #7ae0a4; background: rgba(72, 193, 121, .11); border-color: rgba(91, 220, 145, .18); }
.status-cancelled { color: #ff99aa; background: rgba(222, 73, 103, .11); border-color: rgba(245, 112, 137, .18); }
.big-status { min-height: 34px; padding: 8px 13px; font-size: 12px; }

.orders-tabs { display: flex; gap: 8px; margin-bottom: 13px; }
.orders-filter-card { margin-bottom: 14px; }
.orders-filter-form { gap: 13px; }
.form-group label, .filter-item label, .filter-search label { display: block; margin-bottom: 7px; color: #aaa0b5; font-size: 11px; font-weight: 600; }
.form-control { min-height: 40px; padding: 10px 12px; color: var(--text); background: rgba(9, 8, 13, .50); border: 1px solid rgba(255,255,255,.10); border-radius: 9px; outline: none; font: inherit; font-size: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.form-control:focus { border-color: rgba(170, 107, 255, .58); box-shadow: 0 0 0 3px rgba(161, 95, 255, .10); }
select.form-control option { color: #1d1828; background: #faf8ff; }
.form-textarea { min-height: 126px; resize: vertical; }
.form-help, .muted-text { color: var(--dim); font-size: 11px; }

.order-actions { gap: 13px; margin-bottom: 14px; }
.action-card { padding: 17px; }
.action-title { margin-bottom: 11px; color: #a79caf; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.action-form { gap: 9px; }
.order-detail-grid { gap: 14px; }
.order-section { margin-bottom: 14px; }
.info-grid { gap: 10px; }
.info-item { padding: 13px; background: rgba(9,8,13,.34); border-color: var(--line-soft); border-radius: 10px; }
.info-label { color: #756c80; font-size: 9px; letter-spacing: .11em; }
.info-value { color: #e3ddea; font-size: 12px; }
.price-value { color: #c69dff; font-size: 17px; }
.order-description-full { padding: 15px; color: #bbb3c4; background: rgba(9,8,13,.34); border-color: var(--line-soft); font-size: 12px; }
.person-avatar { width: 43px; height: 43px; background: linear-gradient(135deg, #7542c7, #b07bff); font-size: 16px; }
.person-name { font-size: 13px; }
.person-line { color: #81768e; font-size: 11px; }
.person-role { color: #c39bff; background: rgba(147,83,255,.12); font-size: 9px; }
.file-item, .empty-files { background: rgba(9,8,13,.34); border-color: var(--line-soft); }
.file-icon { color: #c19aff; background: rgba(134,73,227,.13); }
.file-name { color: #ded7e8; font-size: 12px; }
.file-meta, .empty-files p { color: var(--dim); font-size: 10px; }
.file-download { color: #c09af4; background: rgba(136,76,226,.10); }
.history-item { border-color: var(--line-soft); }
.history-dot { background: #9e63ed; box-shadow: 0 0 0 4px rgba(158, 99, 237, .13); }
.history-user { color: #d3c5e1; font-size: 11px; }
.history-time, .history-action { color: var(--dim); font-size: 10px; }
.history-description { color: #aaa0b2; font-size: 11px; }

.notification-card, .client-card, .spool-card, .employee-row, .finance-stat-card, .schedule-card { background: linear-gradient(150deg, rgba(28, 23, 39, .92), rgba(19, 17, 25, .94)); border-color: var(--line); }
.notification-card:hover, .client-card:hover, .employee-row:hover, .spool-card:hover { border-color: rgba(175, 113, 255, .30); }
.notification-icon, .empty-files-icon, .notification-empty-icon { color: #b383f0; }
.notification-title, .client-card h3, .employee-name, .spool-material { color: var(--white); }
.notification-description, .client-card p, .employee-email, .spool-manufacturer { color: var(--muted); }

.empty-state { padding: 48px 20px; color: var(--muted); }
.empty-state h3 { color: var(--text); font-size: 15px; }
.empty-state p { color: var(--dim); font-size: 12px; }
.alert-error { color: #ffb2bd; background: rgba(217,68,97,.10); border-color: rgba(245,112,137,.20); }

@media (max-width: 1100px) {
    :root { --sidebar-width: 224px; }
    .main-content { padding-inline: 26px; }
    .topbar-user > div:last-child { display: none; }
    .global-search { width: 220px; }
}

@media (max-width: 760px) {
    .app-layout { display: block; }
    .sidebar { position: static; width: 100%; height: auto; padding: 14px 14px 10px; border-right: 0; border-bottom: 1px solid rgba(172, 115, 255, .16); }
    .brand { padding: 0 5px 13px; }
    .sidebar-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .nav-link { justify-content: center; min-height: 38px; padding: 7px 4px; }
    .nav-link span:last-child { display: none; }
    .nav-icon { width: auto; }
    .sidebar-user { display: none; }
    .main-content { padding: 17px 15px 34px; }
    .topbar { align-items: flex-start; margin-bottom: 24px; padding-bottom: 14px; }
    .topbar-actions { gap: 10px; }
    .global-search { width: 40px; padding: 9px; }
    .global-search input, .global-search kbd { display: none; }
    .topbar-user { display: none; }
    .page-header { align-items: flex-start; flex-direction: column; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dashboard-secondary-grid, .order-detail-grid, .new-order-grid { grid-template-columns: 1fr; }
    .order-actions { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
    .sidebar-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-grid { gap: 8px; }
    .stat-card { min-height: 104px; padding: 14px; }
    .stat-value { margin-top: 10px; font-size: 25px; }
    .content-card { padding: 15px; }
}

.client-card {
    padding: 18px 20px;
    margin-bottom: 12px;

    background: #101016;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.client-card h3 {
    margin: 0 0 12px;

    font-size: 16px;
    color: #ffffff;
}

.client-card p {
    margin: 7px 0;

    color: #a7a3ae;
    font-size: 13px;
}

.client-card strong {
    color: #d9d5df;
}

/* =========================
   УПРАВЛЕНИЕ ЗАКАЗОМ
========================= */

.order-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.action-card {
    padding: 16px;
    background: #15141b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.action-title {
    margin-bottom: 10px;
    color: #97929f;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-form {
    display: flex;
    gap: 10px;
}

.form-control {
    width: 100%;
    padding: 11px 12px;
    color: #ece9f0;
    background: #0e0e13;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    outline: none;
    font-family: inherit;
}

.form-control:focus {
    border-color: rgba(155, 92, 255, 0.65);
    box-shadow: 0 0 0 3px rgba(138, 72, 232, 0.08);
}

.form-control option {
    background: #17151d;
    color: white;
}

.action-button,
.save-button {
    border: 0;
    cursor: pointer;
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    color: #c29cff;
    background: rgba(139, 79, 226, 0.1);
    border: 1px solid rgba(158, 96, 255, 0.2);
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
}

.secondary-button:hover {
    background: rgba(139, 79, 226, 0.18);
}

/* =========================
   РЕДАКТИРОВАНИЕ
========================= */

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

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: #8f8a96;
    font-size: 12px;
}

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

.form-textarea {
    min-height: 130px;
    resize: vertical;
}

.save-button {
    margin-top: 18px;
}

/* =========================
   ЗАГРУЗКА
========================= */

.upload-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px;
    border: 1px dashed rgba(166, 104, 255, 0.25);
    border-radius: 10px;
    background: rgba(126, 65, 206, 0.035);
}

.file-input {
    flex: 1;
    min-width: 0;
    color: #a9a5af;
}

.file-input::file-selector-button {
    margin-right: 10px;
    padding: 8px 11px;
    color: #b98aff;
    background: rgba(139, 78, 231, 0.1);
    border: 1px solid rgba(160, 98, 255, 0.16);
    border-radius: 7px;
    cursor: pointer;
}

@media (max-width: 800px) {
    .order-actions,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-wide {
        grid-column: auto;
    }

    .action-form,
    .upload-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================
   НОВЫЙ ЗАКАЗ
========================= */

.new-order-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
}

.client-create-link {
    margin-top: 14px;
    color: #807b88;
    font-size: 12px;
}

.client-create-link a {
    margin-left: 4px;
    color: #ad82f7;
    text-decoration: none;
}

.client-create-link a:hover {
    color: #c49fff;
}

.create-order-summary h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.create-order-summary p {
    margin: 0 0 18px;
    color: #817d89;
    line-height: 1.6;
    font-size: 12px;
}

.create-order-button {
    width: 100%;
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.client-form-card {
    max-width: 900px;
}

@media (max-width: 900px) {
    .new-order-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   LOGIN PAGE
========================= */

.login-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top, rgba(132, 79, 255, 0.16), transparent 35%),
        linear-gradient(180deg, #141218 0%, #0f0d13 100%);
    overflow: hidden;
    position: relative;
    font-family: Arial, sans-serif;
}

.login-background-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}

.login-background-logo img {
    width: 720px;
    max-width: 80vw;
    opacity: 0.08;
    filter: drop-shadow(0 0 40px rgba(157, 102, 255, 0.35));
}

.login-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: rgba(24, 21, 31, 0.92);
    border: 1px solid rgba(173, 130, 247, 0.18);
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    padding: 32px 28px;
    backdrop-filter: blur(10px);
}

.login-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-header h1 {
    margin: 0 0 10px;
    color: #f4efff;
    font-size: 30px;
    font-weight: 700;
}

.login-header p {
    margin: 0;
    color: #a5a0b2;
    font-size: 14px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-form .form-group label {
    color: #d8d3e3;
    font-size: 14px;
    font-weight: 600;
}

.login-form .form-control {
    box-sizing: border-box;
    background: #111017;
    border: 1px solid #2c2736;
    border-radius: 12px;
    padding: 12px 14px;
    color: #f5f3fb;
    font-size: 14px;
    outline: none;
    transition: 0.2s ease;
}

.login-form .form-control:focus {
    border-color: #9d66ff;
    box-shadow: 0 0 0 3px rgba(157, 102, 255, 0.15);
}

.login-button {
    width: 100%;
    justify-content: center;
    border: none;
    cursor: pointer;
    margin-top: 6px;
}

.login-page .primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c4dff 0%, #a970ff 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
    transition: 0.2s ease;
}

.login-page .primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(124, 77, 255, 0.28);
}

.alert-error {
    margin-bottom: 18px;
    background: rgba(255, 82, 82, 0.14);
    border: 1px solid rgba(255, 82, 82, 0.28);
    color: #ffb3b3;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
}

/* =========================
   ОБЩИЕ ФОРМЫ
========================= */

form label {
    color: #d8d3e3;
    font-size: 13px;
    font-weight: 600;
}

form input,
form select,
form textarea {
    font: inherit;
}

form input:not([type="file"]),
form select,
form textarea {
    width: 100%;
    box-sizing: border-box;
    color: #ece9f0;
    background: #111017;
    border: 1px solid #2c2736;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form input:not([type="file"]),
form select {
    min-height: 44px;
    padding: 11px 12px;
}

form textarea {
    min-height: 120px;
    padding: 12px;
    resize: vertical;
}

form input:not([type="file"]):focus,
form select:focus,
form textarea:focus {
    border-color: #9d66ff;
    box-shadow: 0 0 0 3px rgba(157, 102, 255, 0.15);
}

form select option {
    color: #fff;
    background: #17151d;
}

form input::placeholder,
form textarea::placeholder {
    color: #6e6978;
}

form button {
    font: inherit;
}

.content-card,
.stat-card,
.action-card {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.page-header {
    position: relative;
}

.page-header h1,
.main-content > h1 {
    color: var(--text-primary);
    letter-spacing: 0;
}

.page-header p,
.section-header p {
    color: var(--text-secondary);
}

.client-form-card,
.new-order-form {
    position: relative;
}

@media (max-width: 760px) {
    .app-layout {
        display: block;
    }

    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 16px;
    }

    .brand {
        padding-bottom: 16px;
    }

    .sidebar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar-user {
        margin-top: 16px;
    }

    .main-content {
        min-height: calc(100vh - 250px);
        padding: 24px 16px;
    }

    .page-background-logo img {
        width: 92vw;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================
   СОТРУДНИКИ
========================= */

.employee-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.employee-row {
    display: grid;
    grid-template-columns: 50px minmax(200px, 1fr) 170px 130px 30px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #101016;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 12px;
    color: white;
    text-decoration: none;
    transition: 0.2s;
}

.employee-row:hover {
    background: rgba(133, 74, 255, 0.06);
    border-color: rgba(157, 92, 255, 0.15);
}

.employee-avatar-large,
.employee-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #6233a8, #a260f3);
    font-weight: 700;
}

.employee-avatar-large {
    width: 42px;
    height: 42px;
}

.employee-name {
    font-size: 14px;
    font-weight: 600;
}

.employee-email {
    margin-top: 4px;
    color: #7e7987;
    font-size: 11px;
}

.role-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 100px;
    font-size: 11px;
}

.role-owner { color: #d6b2ff; background: rgba(160, 94, 255, 0.14); }
.role-admin { color: #7dbdff; background: rgba(66, 145, 255, 0.12); }
.role-employee { color: #aaa5b2; background: rgba(255, 255, 255, 0.06); }
.active-status { color: #64d796; font-size: 11px; }
.inactive-status { color: #e77f7f; font-size: 11px; }
.employee-arrow { color: #726c79; font-size: 18px; }

.employee-form-card,
.employee-detail-grid {
    max-width: 850px;
}

.form-help-box {
    margin-top: 20px;
    padding: 15px;
    background: rgba(132, 76, 212, 0.05);
    border: 1px solid rgba(153, 91, 244, 0.12);
    border-radius: 10px;
}

.form-help-box strong { color: #c39aff; font-size: 13px; }
.form-help-box p { margin: 8px 0 0; color: #85808d; font-size: 12px; line-height: 1.5; }

.employee-detail-grid {
    display: grid;
    gap: 18px;
}

.employee-profile {
    display: flex;
    align-items: center;
    gap: 18px;
}

.employee-profile-avatar {
    width: 70px;
    height: 70px;
    color: white;
    font-size: 26px;
}

.employee-profile h2 { margin: 0 0 4px; }
.employee-profile p { margin: 0 0 9px; color: #85808c; font-size: 12px; }
.password-button { margin-top: 15px; }

.employee-danger-zone {
    border-color: rgba(255, 84, 84, 0.18);
}

.danger-button {
    padding: 11px 18px;
    border: 1px solid rgba(255, 91, 91, 0.25);
    border-radius: 10px;
    color: #ff9a9a;
    background: rgba(255, 64, 64, 0.1);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

.danger-button:hover {
    background: rgba(255, 64, 64, 0.18);
}

@media (max-width: 850px) {
    .employee-row {
        grid-template-columns: 45px minmax(0, 1fr) 30px;
    }

    .employee-role-column,
    .employee-status-column {
        display: none;
    }
}

/* =========================
   КАРТОЧКА КЛИЕНТА
========================= */

.client-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: 0.2s;
}

.client-card-link:hover {
    transform: translateY(-1px);
    background: rgba(133, 74, 255, 0.055);
    border-color: rgba(157, 92, 255, 0.16);
}

.client-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
}

.client-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.client-profile-avatar {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #6735ad, #a763ff);
    color: white;
    font-size: 24px;
    font-weight: 700;
}

.client-profile h2 {
    margin: 0 0 5px;
    font-size: 18px;
}

.client-profile p {
    margin: 0;
    color: #817c89;
    font-size: 12px;
}

.client-stat-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.client-stat-list > div:last-child {
    border-bottom: 0;
}

.client-stat-list span {
    color: #817c89;
    font-size: 12px;
}

.client-stat-list strong {
    color: #e9e6ed;
    font-size: 14px;
}

@media (max-width: 1000px) {
    .client-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   ПОИСК КЛИЕНТОВ
========================= */

.clients-search-card {
    margin-bottom: 18px;
}

.clients-search-form {
    display: flex;
    gap: 10px;
}

.clients-search-form .form-control {
    flex: 1;
}

@media (max-width: 700px) {
    .clients-search-form {
        flex-direction: column;
    }
}

/* =========================
   ФИЛЬТРЫ ЗАКАЗОВ
========================= */

.orders-filter-card {
    margin-bottom: 18px;
}

.orders-tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.orders-tabs .active-tab { color: #fff; background: linear-gradient(135deg, #8f4eff, #b16cff); border-color: transparent; }

.orders-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(180px, 1fr) minmax(160px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.orders-filter-form label {
    display: block;
    margin-bottom: 7px;
    color: #888390;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-buttons {
    display: flex;
    gap: 8px;
}

.filter-buttons .primary-button,
.filter-buttons .secondary-button {
    height: 42px;
}

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

@media (max-width: 700px) {
    .orders-filter-form {
        grid-template-columns: 1fr;
    }

    .filter-buttons {
        flex-direction: column;
    }
}

/* =========================
   СРОКИ ЗАКАЗОВ
========================= */

.deadline-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 100px;
    font-size: 11px;
    white-space: nowrap;
}

.deadline-normal {
    color: #aaa5b2;
    background: rgba(255, 255, 255, 0.05);
}

.deadline-none {
    color: #77727f;
    background: rgba(255, 255, 255, 0.03);
}

.deadline-soon {
    color: #ffd36f;
    background: rgba(255, 183, 59, 0.11);
}

.deadline-tomorrow {
    color: #ffbd5d;
    background: rgba(255, 149, 35, 0.13);
}

.deadline-today {
    color: #ff9c66;
    background: rgba(255, 109, 44, 0.14);
    border: 1px solid rgba(255, 117, 57, 0.18);
}

.deadline-overdue {
    color: #ff7a7a;
    background: rgba(255, 64, 64, 0.13);
    border: 1px solid rgba(255, 75, 75, 0.2);
    font-weight: 600;
}

/* =========================
   DASHBOARD
========================= */

.dashboard-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.danger-card {
    border-color: rgba(255, 76, 76, 0.2);
    background: linear-gradient(145deg, #171419, rgba(105, 28, 35, 0.22));
}

.danger-card .stat-value { color: #ff8282; }

.revenue-value {
    margin-top: 4px;
    color: #c79cff;
    font-size: 34px;
    font-weight: 700;
}

.employee-load-list,
.attention-list {
    display: flex;
    flex-direction: column;
}

.employee-load-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.employee-load-row:last-child { border-bottom: 0; }
.employee-load-name { color: #e2dfe6; font-size: 13px; font-weight: 600; }
.employee-load-caption { margin-top: 3px; color: #77727e; font-size: 10px; }

.employee-load-count {
    min-width: 38px;
    padding: 6px 10px;
    text-align: center;
    color: #bc93ff;
    background: rgba(139, 78, 225, 0.1);
    border-radius: 8px;
    font-weight: 700;
}

.dashboard-attention { margin-bottom: 18px; }

.attention-list { gap: 7px; }

.attention-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
    color: inherit;
    background: rgba(255, 105, 64, 0.035);
    border: 1px solid rgba(255, 120, 73, 0.09);
    border-radius: 10px;
    text-decoration: none;
    transition: 0.2s;
}

.attention-row:hover { background: rgba(255, 105, 64, 0.075); }
.attention-title { color: #e5e1e7; font-size: 13px; font-weight: 600; }
.attention-meta { margin-top: 4px; color: #ef9b72; font-size: 11px; }
.attention-arrow { color: #9b6f60; font-size: 18px; }

.dashboard-ok {
    padding: 16px;
    color: #77d9a0;
    background: rgba(57, 187, 107, 0.06);
    border: 1px solid rgba(61, 199, 113, 0.1);
    border-radius: 10px;
    font-size: 13px;
}

.expense-list {
    display: flex;
    flex-direction: column;
}

.expense-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.expense-row:last-child { border-bottom: 0; }
.expense-title { color: #e5e1e7; font-size: 13px; font-weight: 600; }
.expense-meta, .expense-comment { margin-top: 4px; color: #817c89; font-size: 11px; }
.expense-amount { color: #ffbd5d; white-space: nowrap; }

@media (max-width: 900px) {
    .dashboard-secondary-grid { grid-template-columns: 1fr; }
}

/* =========================
   FINANCE
========================= */

.finance-period-card { margin-bottom: 18px; }

.finance-period-form {
    display: flex;
    align-items: end;
    gap: 12px;
}

.finance-period-form .form-group { min-width: 180px; }

.finance-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.finance-stat-card {
    padding: 20px;
    background: linear-gradient(145deg, #17151d, #121116);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 15px;
}

.finance-stat-label {
    margin-bottom: 10px;
    color: #8c8794;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.finance-stat-value { color: #eeeaf2; font-size: 27px; font-weight: 700; }
.finance-income { color: #8ee5ac; }
.finance-expense { color: #ff9b88; }
.finance-profit { color: #c497ff; }
.finance-loss { color: #ff7373; }

.finance-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.8fr);
    gap: 18px;
    margin-bottom: 18px;
}

.finance-comment { min-height: 90px; }

.finance-add-button {
    width: 100%;
    margin-top: 15px;
    border: 0;
    cursor: pointer;
}

.finance-summary { margin-bottom: 20px; }

.finance-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.finance-summary-grid > div {
    padding: 15px;
    background: #101016;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 10px;
}

.finance-summary-grid span {
    display: block;
    margin-bottom: 7px;
    color: #797481;
    font-size: 11px;
}

.finance-summary-grid strong { color: #dedbe3; font-size: 17px; }

/* =========================
   ОПЛАТА ЗАКАЗА
========================= */

.payment-status {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
}

.payment-unpaid { color: #ff8989; background: rgba(255, 75, 75, 0.11); }
.payment-partial { color: #ffc36c; background: rgba(255, 167, 47, 0.11); }
.payment-paid { color: #75dda0; background: rgba(53, 193, 112, 0.11); }
.payment-no_price { color: #918b98; background: rgba(255, 255, 255, 0.05); }

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

.payment-summary > div {
    padding: 12px;
    background: #101016;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 9px;
}

.payment-summary span { display: block; margin-bottom: 6px; color: #77727f; font-size: 10px; }
.payment-summary strong { color: #ddd9e1; font-size: 13px; }
.payment-summary .payment-paid-value { color: #78dfa2; }
.payment-form { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.055); }
.payment-form .form-group { margin-bottom: 12px; }
.payment-button { width: 100%; margin-top: 5px; border: 0; cursor: pointer; }
.payment-history { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.055); }
.payment-history-title { margin-bottom: 9px; color: #8b8692; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.payment-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.035); }
.payment-history-row strong { color: #79dda2; font-size: 12px; }
.payment-history-row span { margin-left: 7px; color: #77727f; font-size: 10px; }
.payment-date { color: #77727f; font-size: 10px; }

/* =========================
   СКЛАД ПЛАСТИКА
========================= */

.inventory-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.inventory-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
    gap: 18px;
}

.spool-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.spool-card {
    position: relative;
    padding: 16px;
    background: #101016;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.spool-low { border-color: rgba(255, 130, 72, 0.22); }
.spool-material { color: #bc8cff; font-size: 18px; font-weight: 700; }
.spool-color { margin-top: 4px; color: #e5e1e8; font-size: 14px; font-weight: 600; }
.spool-manufacturer { margin-top: 4px; color: #77727e; font-size: 11px; }
.spool-weight { margin-top: 16px; }
.spool-weight span, .spool-weight small { display: block; color: #77727e; font-size: 10px; }
.spool-weight strong { display: block; margin: 3px 0; color: #f1edf4; font-size: 22px; }
.spool-progress { height: 6px; margin-top: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.06); border-radius: 100px; }
.spool-progress-bar { height: 100%; background: linear-gradient(90deg, #7442bd, #ae76ff); border-radius: 100px; }
.spool-warning { margin-top: 10px; color: #ffad74; font-size: 11px; font-weight: 600; }
.spool-price { margin-top: 10px; color: #77727e; font-size: 10px; }
.inventory-create { align-self: start; }
.inventory-add-button { width: 100%; margin-top: 15px; border: 0; cursor: pointer; }
.spool-edit { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.045); }
.spool-edit summary { color: #b990ff; cursor: pointer; font-size: 11px; }
.spool-edit form { margin-top: 12px; }
.spool-edit .form-group { margin-bottom: 10px; }

.plastic-total { margin-bottom: 15px; padding: 12px; color: #8f8995; background: #101016; border-radius: 9px; font-size: 12px; }
.plastic-total strong { margin-left: 5px; color: #c195ff; font-size: 16px; }

.filament-use-form {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) 120px auto;
    align-items: end;
    gap: 10px;
}

/* =========================
   ИСТОРИЯ ЗАКАЗА
========================= */

.history-list { display: flex; flex-direction: column; }
.history-item { position: relative; }
.history-line { display: flex; gap: 14px; padding-bottom: 20px; }

.history-dot {
    position: relative;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7641bf, #b276ff);
    box-shadow: 0 0 12px rgba(157, 92, 255, 0.22);
}

.history-dot::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 5px;
    width: 2px;
    height: 42px;
    background: rgba(145, 89, 221, 0.13);
}

.history-item:last-child .history-dot::after { display: none; }
.history-content { flex: 1; min-width: 0; padding: 12px 14px; background: #101016; border: 1px solid rgba(255, 255, 255, 0.045); border-radius: 10px; }
.history-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 7px; }
.history-user { color: #c89fff; font-size: 12px; font-weight: 600; }
.history-time { color: #696570; font-size: 10px; }
.history-description { color: #d0ccd4; font-size: 13px; line-height: 1.5; }
.history-action { margin-top: 7px; color: #696570; font-size: 9px; text-transform: uppercase; letter-spacing: 0.7px; }

/* =========================
    ТИПЫ РАСХОДА ПЛАСТИКА
========================= */

.usage-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.usage-stat { padding: 12px; background: #101016; border: 1px solid rgba(255, 255, 255, 0.045); border-radius: 9px; }
.usage-stat span { display: block; margin-bottom: 6px; color: #77727f; font-size: 10px; }
.usage-stat strong { color: #ded9e3; font-size: 15px; }
.usage-waste { border-color: rgba(255, 87, 87, 0.11); }
.usage-waste strong, .waste-value { color: #ff8989; }
.filament-history { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.filament-history-title { margin-bottom: 9px; color: #807a87; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.filament-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.035); color: #77727f; font-size: 10px; }
.filament-history-row strong { margin-left: 7px; color: #d9d5dd; font-size: 12px; }
.filament-return-form { margin: -3px 0 8px; }
.filament-return-button { min-height: 28px; padding: 5px 10px; font-size: 10px; }
.usage-type-badge { display: inline-flex; padding: 4px 7px; border-radius: 100px; font-size: 9px; }
.usage-type-product { color: #78dda1; background: rgba(49, 190, 107, 0.1); }
.usage-type-support { color: #c195ff; background: rgba(145, 81, 225, 0.1); }
.usage-type-waste { color: #ff8686; background: rgba(255, 72, 72, 0.1); }
.usage-type-test { color: #ffbf6c; background: rgba(255, 166, 49, 0.1); }
.inventory-usage-summary { margin-bottom: 18px; }
.usage-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.usage-summary-grid > div { padding: 14px; background: #101016; border: 1px solid rgba(255, 255, 255, 0.045); border-radius: 10px; }
.usage-summary-grid span { display: block; margin-bottom: 7px; color: #77727f; font-size: 10px; }
.usage-summary-grid strong { color: #ded9e3; font-size: 16px; }

/* =========================
    УВЕДОМЛЕНИЯ
========================= */

.notification-nav-link { position: relative; }
.notification-badge { min-width: 20px; height: 20px; margin-left: auto; display: flex; align-items: center; justify-content: center; padding: 0 6px; color: white; background: linear-gradient(135deg, #8f4eff, #b16cff); border-radius: 100px; font-size: 10px; font-weight: 700; box-shadow: 0 0 12px rgba(155, 92, 255, 0.25); }
.notification-list { display: flex; flex-direction: column; gap: 10px; }
.notification-card { display: flex; align-items: center; gap: 14px; padding: 15px 16px; color: inherit; background: #101016; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; text-decoration: none; transition: 0.2s; }
.notification-card:hover { transform: translateY(-1px); border-color: rgba(158, 95, 255, 0.17); background: rgba(133, 74, 255, 0.045); }
.notification-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(144, 81, 224, 0.1); color: #bd8cff; font-weight: 700; }
.notification-danger .notification-icon { color: #ff7e7e; background: rgba(255, 70, 70, 0.11); }
.notification-warning .notification-icon { color: #ffbc68; background: rgba(255, 161, 53, 0.1); }
.notification-payment .notification-icon { color: #73dca0; background: rgba(50, 190, 108, 0.1); }
.notification-material .notification-icon { color: #ba8cff; background: rgba(147, 79, 232, 0.1); }
.notification-completed .notification-icon { color: #74dda0; background: rgba(55, 190, 110, 0.1); }
.notification-content { flex: 1; min-width: 0; }
.notification-title { color: #e9e5ec; font-size: 13px; font-weight: 600; }
.notification-description { margin-top: 4px; color: #807b87; font-size: 11px; }
.notification-arrow { color: #6f6976; font-size: 18px; }
.notification-empty { padding: 60px 20px; text-align: center; }
.notification-empty-icon { width: 50px; height: 50px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: #74dda0; background: rgba(55, 190, 110, 0.08); border-radius: 50%; font-size: 22px; }
.notification-empty h3 { margin: 0 0 6px; }
.notification-empty p { margin: 0; color: #797481; font-size: 12px; }

.schedule-page-header { align-items: flex-end; }
.schedule-summary { display: flex; align-items: center; gap: 8px; color: #aaa5b4; font-size: 12px; }
.schedule-period-actions { display: flex; gap: 8px; }
.schedule-period-actions .secondary-button { padding: 9px 12px; font-size: 11px; white-space: nowrap; }
.schedule-summary-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffb866; box-shadow: 0 0 12px rgba(255, 184, 102, 0.35); }
.schedule-notice { margin-bottom: 14px; padding: 12px 14px; border: 1px solid rgba(112, 218, 154, 0.25); border-radius: 10px; color: #a2e7ba; background: rgba(55, 190, 110, 0.08); font-size: 12px; }
.schedule-card { overflow: hidden; }
.schedule-members-card { margin-bottom: 18px; }
.schedule-member-add { display: flex; align-items: center; gap: 8px; min-width: 330px; }
.schedule-member-add .form-control { min-width: 220px; }
.schedule-member-add .primary-button { margin: 0; padding: 10px 14px; }
.schedule-member-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.schedule-member-chip-form { flex: 0 1 220px; min-width: 190px; }
.schedule-member-chip { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 9px; color: #e9e5ec !important; background: #17151d !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px; cursor: pointer; font: inherit; text-align: left; transition: 0.2s; }
.schedule-member-chip:hover, .schedule-member-chip:focus-visible { border-color: rgba(158, 108, 255, 0.5); background: rgba(133, 74, 255, 0.1); outline: none; }
.schedule-member-chip > span:nth-child(2) { flex: 1; min-width: 0; }
.schedule-member-chip strong, .schedule-member-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-member-chip strong { font-size: 11px; }
.schedule-member-chip small { margin-top: 3px; color: #7e7888; font-size: 10px; }
.schedule-section-header { align-items: flex-end; }
.schedule-legend { display: flex; gap: 14px; color: #888392; font-size: 11px; white-space: nowrap; }
.schedule-legend span { display: flex; align-items: center; gap: 6px; }
.schedule-legend-mark { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.schedule-legend-work { background: #9e6cff; }
.schedule-legend-weekend { background: #ffb866; }
.schedule-scroll { overflow-x: auto; }
.schedule-table { width: 100%; min-width: 1050px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.schedule-table th, .schedule-table td { border-right: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.schedule-table tr > :last-child { border-right: 0; }
.schedule-table tbody tr:last-child > * { border-bottom: 0; }
.schedule-employee-heading, .schedule-day-heading { padding: 16px 12px; }
.schedule-employee-heading { width: 205px; color: #888392; font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: 0.08em; }
.schedule-day-heading { height: 76px; text-align: center; vertical-align: middle; }
.schedule-day-heading strong { display: block; color: #ece8f0; font-size: 12px; }
.schedule-day-heading span { display: block; margin-top: 6px; color: #9d96a9; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.schedule-weekend { background: rgba(255, 184, 102, 0.045); }
.schedule-employee { height: 88px; display: flex; align-items: center; gap: 10px; padding: 12px; text-align: left; vertical-align: middle; }
.schedule-employee strong { display: block; color: #e9e5ec; font-size: 12px; }
.schedule-employee span { display: block; max-width: 155px; margin-top: 4px; overflow: hidden; color: #7e7888; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.employee-avatar-small { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #f5efff; background: linear-gradient(135deg, #6e35c8, #9b5cff); font-size: 12px; font-weight: 700; }
.schedule-day-cell { height: 88px; padding: 12px 8px; text-align: center; vertical-align: middle; }
.schedule-time-fields { display: flex; align-items: center; gap: 4px; }
.schedule-time-fields input { width: 54px; padding: 9px 3px; color: #eeeaf3; background: #17151d; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; font: inherit; font-size: 11px; }
.schedule-time-fields input:focus { outline: 2px solid rgba(158, 108, 255, 0.45); outline-offset: 1px; border-color: #9e6cff; }
.schedule-time-fields span { color: #6f6978; font-size: 10px; }
.schedule-hours-field { display: flex; align-items: center; justify-content: center; gap: 5px; }
.schedule-hours-field input { width: 70px; padding: 11px 7px; color: #eeeaf3; background: #17151d; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; font: inherit; font-size: 15px; font-weight: 700; text-align: center; }
.schedule-hours-field input:focus { outline: 2px solid rgba(158, 108, 255, 0.45); outline-offset: 1px; border-color: #9e6cff; }
.schedule-hours-field span { color: #8d8598; font-size: 11px; }
.schedule-summary-card { margin-top: 18px; }
.schedule-summary-table { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; overflow: hidden; }
.schedule-summary-row { display: grid; grid-template-columns: 1fr 150px 150px; align-items: center; min-height: 48px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #aaa5b4; font-size: 12px; }
.schedule-summary-row:last-child { border-bottom: 0; }
.schedule-summary-row > :not(:first-child) { text-align: right; }
.schedule-summary-row strong { color: #e9e5ec; }
.schedule-summary-head { min-height: 38px; color: #80798d; background: rgba(255, 255, 255, 0.025); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.schedule-total-hours { color: #b890ff !important; }
.schedule-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.schedule-actions .save-button { margin: 0; }
.schedule-empty { padding: 48px 20px; }
.schedule-empty p { margin: 8px 0 18px; color: #888392; font-size: 12px; }

@media (max-width: 700px) {
    .schedule-page-header, .schedule-section-header, .schedule-actions { align-items: flex-start; flex-direction: column; }
    .schedule-summary { margin-top: 6px; }
    .schedule-legend { flex-wrap: wrap; }
    .schedule-actions { gap: 14px; }
    .schedule-period-actions { flex-wrap: wrap; }
    .schedule-summary-row { grid-template-columns: 1fr 100px 100px; padding: 0 10px; }
    .schedule-member-add { align-items: stretch; flex-direction: column; min-width: 0; width: 100%; }
    .schedule-member-add .form-control { min-width: 0; }
    .schedule-member-add .primary-button { width: 100%; }
}

@media (max-width: 1000px) { .inventory-layout { grid-template-columns: 1fr; } }

@media (max-width: 750px) {
    .inventory-stats, .spool-list { grid-template-columns: 1fr; }
    .filament-use-form { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .usage-stats-grid, .usage-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .usage-stats-grid, .usage-summary-grid { grid-template-columns: 1fr; }
}

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

@media (max-width: 700px) {
    .finance-stats-grid,
    .finance-summary-grid { grid-template-columns: 1fr; }

    .finance-period-form {
        flex-direction: column;
        align-items: stretch;
    }

    .finance-period-form .form-group { min-width: 0; }

    .payment-summary { grid-template-columns: 1fr; }
}

/* Keep the visual system authoritative for components declared by older
   feature-specific sections further up in this legacy stylesheet. */
.form-control {
    min-height: 40px;
    padding: 10px 12px;
    color: var(--text);
    background: rgba(9, 8, 13, .50);
    border-color: rgba(255,255,255,.10);
    border-radius: 9px;
    font-size: 12px;
}

.form-control:focus { border-color: rgba(170, 107, 255, .58); box-shadow: 0 0 0 3px rgba(161, 95, 255, .10); }
.secondary-button { min-height: 40px; padding: 10px 15px; color: #b99be5; background: rgba(158, 100, 237, .08); border-color: rgba(169, 116, 244, .18); border-radius: 10px; }
.secondary-button:hover { color: #e7d9ff; background: rgba(158, 100, 237, .18); border-color: rgba(183, 137, 255, .38); }
.page-header h1 { color: var(--white); letter-spacing: -.045em; }
.content-card { background: linear-gradient(150deg, rgba(28, 23, 39, .92), rgba(19, 17, 25, .94)); border-color: var(--line); border-radius: 15px; }
.client-card, .employee-row, .finance-stat-card, .spool-card, .notification-card, .schedule-card { background: linear-gradient(150deg, rgba(28, 23, 39, .92), rgba(19, 17, 25, .94)); border-color: var(--line); }

.marketing-section-heading,
.marketing-item-title-row,
.marketing-compose-footer,
.marketing-source-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.marketing-review-note {
    border-left: 3px solid #ffd27e;
    color: #ffd27e;
    margin-top: 10px;
    padding-left: 10px;
}

.marketing-media-upload {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.marketing-media-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.marketing-media-grid a {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    color: var(--text-secondary);
    overflow: hidden;
    padding: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketing-item-actions details {
    border-top: 1px solid var(--line-soft);
    padding-top: 8px;
}

.marketing-item-actions details form {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.marketing-metrics {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.marketing-section-heading {
    margin-bottom: 18px;
}

.marketing-section-heading h2,
.marketing-item h3 {
    margin: 0;
}

.marketing-section-heading p {
    margin: 5px 0 0;
}

.vk-publish-badge {
    border: 1px solid rgba(126, 88, 255, .35);
    border-radius: 999px;
    color: #cbb8ff;
    font-size: 12px;
    padding: 7px 11px;
    white-space: nowrap;
}

.marketing-compose-footer {
    margin-top: 6px;
}

.marketing-item {
    align-items: flex-start;
    border-top: 1px solid var(--line-soft);
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 18px 0;
}

.marketing-item:first-of-type {
    border-top: 0;
}

.marketing-item-content {
    min-width: 0;
}

.marketing-item-content p {
    color: var(--text-secondary);
    margin: 10px 0;
    white-space: pre-wrap;
}

.marketing-item-content small {
    color: var(--dim);
}

.marketing-status {
    border-radius: 999px;
    font-size: 11px;
    padding: 5px 9px;
    white-space: nowrap;
}

.marketing-status-draft { background: rgba(255, 255, 255, .08); color: var(--text-secondary); }
.marketing-status-ready { background: rgba(255, 190, 75, .14); color: #ffd27e; }
.marketing-status-published { background: rgba(73, 205, 135, .14); color: #8eebb7; }

.marketing-item-actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 180px;
}

.marketing-item-actions .form-control,
.marketing-item-actions .primary-button {
    width: 100%;
}

.marketing-source-row {
    border-bottom: 1px solid var(--line-soft);
    padding: 9px 0;
}

@media (max-width: 700px) {
    .marketing-item {
        flex-direction: column;
    }

    .marketing-item-actions {
        width: 100%;
    }
}
.operations-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
.operations-strip > div { padding: 13px 15px; background: rgba(255,255,255,.035); border: 1px solid var(--line-soft); border-radius: 11px; }
.operations-strip span, .operations-strip strong { display: block; }
.operations-strip span { color: var(--dim); font-size: 10px; }
.operations-strip strong { margin-top: 6px; color: #cba5ff; font-size: 16px; }
.low-stock-alert { margin-bottom: 14px; border-color: rgba(239, 177, 83, .20); }
.low-stock-items { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.low-stock-item { display: flex; justify-content: space-between; gap: 8px; padding: 11px; color: var(--muted); background: rgba(226, 155, 48, .08); border: 1px solid rgba(226,155,48,.13); border-radius: 9px; font-size: 10px; text-decoration: none; }
.low-stock-item strong { color: #f1c671; }

/* Production, equipment, costing, analytics and backup surfaces */
.page-eyebrow { display: block; margin-bottom: 7px; color: #9b76c2; }
.production-page-header { align-items: flex-end; }
.chat-message { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.chat-message > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.chat-message small { color: var(--muted); }
.chat-message-body { margin-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-image { display: block; max-width: min(420px, 100%); max-height: 360px; margin-top: 10px; border-radius: 10px; border: 1px solid var(--line-soft); object-fit: contain; }
.common-chat-channel { padding: 22px 16px; color: var(--muted); }
.common-chat-channel-icon { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 13px; color: #d0aeff; background: rgba(145, 76, 245, .15); border: 1px solid rgba(173, 116, 255, .2); border-radius: 12px; font-size: 19px; }
.common-chat-channel strong { display: block; color: var(--text); font-size: 13px; }
.common-chat-channel p { margin: 7px 0 0; font-size: 11px; line-height: 1.5; }
.chat-attachment-label { color: #c3a2ff; cursor: pointer; }
.conversation-reply-footer input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.production-stats, .analytics-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.production-stat, .analytics-stat { padding: 16px 18px; background: linear-gradient(145deg, rgba(35,28,48,.94), rgba(21,18,29,.98)); border: 1px solid var(--line); border-radius: 13px; }
.production-stat span, .analytics-stat span { display: block; color: var(--muted); font-size: 10px; }
.production-stat strong, .analytics-stat strong { display: block; margin-top: 9px; color: var(--white); font-size: 25px; letter-spacing: -.04em; }
.production-stat-live strong { color: #88e2aa; }
.production-section { margin-bottom: 14px; }
.printer-live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.printer-live-card { padding: 16px; background: rgba(10,9,14,.32); border: 1px solid var(--line-soft); border-top: 2px solid #8c56de; border-radius: 12px; }
.printer-live-card.printer-status-printing { border-top-color: #f1c671; }
.printer-live-card.printer-status-maintenance { border-top-color: #ffb37b; }
.printer-live-head, .equipment-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.printer-live-model { color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.printer-live-head h3, .equipment-card-head h2 { margin: 4px 0 0; color: var(--white); font-size: 15px; }
.printer-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 99px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.printer-status-idle { color: #79dfa5; background: rgba(72,193,121,.11); }
.printer-status-printing { color: #f3cf79; background: rgba(228,164,50,.12); }
.printer-status-maintenance { color: #ffb37b; background: rgba(224,115,58,.12); }
.printer-status-offline { color: #ff99aa; background: rgba(222,73,103,.11); }
.printer-current-order { display: block; margin: 16px 0 12px; padding: 13px; color: inherit; background: rgba(157,98,238,.10); border: 1px solid rgba(175,113,255,.15); border-radius: 10px; text-decoration: none; }
.printer-current-order:hover { background: rgba(157,98,238,.16); }
.printer-current-label { color: #a67bd8; font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.printer-current-order strong { display: block; margin-top: 7px; color: var(--white); font-size: 13px; }
.printer-current-meta, .printer-live-footer { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.printer-current-meta { margin-top: 10px; }
.printer-free-state { display: flex; align-items: center; flex-direction: column; min-height: 104px; justify-content: center; color: #77dda2; }
.printer-free-state span { font-size: 24px; }
.printer-free-state strong { margin-top: 5px; font-size: 12px; }
.printer-free-state small { margin-top: 4px; color: var(--dim); font-size: 10px; }
.printer-live-footer { padding-top: 11px; border-top: 1px solid var(--line-soft); }
.production-queue { display: flex; flex-direction: column; }
.production-queue-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) 150px 70px; align-items: center; gap: 14px; padding: 13px 5px; color: inherit; border-bottom: 1px solid var(--line-soft); text-decoration: none; }
.production-queue-row:last-child { border-bottom: 0; }
.production-queue-row:hover { background: rgba(157,98,238,.06); }
.production-queue-number { color: #a67bd8; font-size: 11px; font-weight: 700; }
.production-queue-title strong, .production-queue-title small { display: block; }
.production-queue-title strong { color: var(--text); font-size: 12px; }
.production-queue-title small { margin-top: 4px; color: var(--dim); font-size: 10px; }
.production-queue-time { color: var(--muted); font-size: 11px; text-align: right; }
.equipment-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 14px; }
.equipment-list { display: flex; flex-direction: column; gap: 14px; }
.equipment-card { padding: 18px; }
.equipment-specs { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 17px; }
.equipment-specs div { padding: 11px; background: rgba(9,8,13,.33); border: 1px solid var(--line-soft); border-radius: 9px; }
.equipment-specs span, .equipment-specs strong { display: block; }
.equipment-specs span { color: var(--dim); font-size: 9px; }
.equipment-specs strong { margin-top: 6px; color: var(--text); font-size: 11px; }
.equipment-edit-form, .maintenance-form { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); align-items: end; gap: 9px; margin-top: 14px; }
.equipment-edit-form label { display: block; margin-bottom: 6px; color: var(--dim); font-size: 9px; }
.equipment-maintenance { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.equipment-maintenance .section-header { margin-bottom: 10px; }
.equipment-maintenance h3 { font-size: 12px; }
.maintenance-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); color: var(--text); font-size: 11px; }
.maintenance-row small { color: var(--dim); }
.maintenance-form { grid-template-columns: 1.2fr 1fr .8fr 1fr auto; }
.equipment-create-card { align-self: start; }
.analytics-period { margin-bottom: 14px; }
.analytics-period-form { display: flex; align-items: flex-end; gap: 10px; }
.analytics-period-form > div { min-width: 130px; }
.analytics-period-form label { display: block; margin-bottom: 6px; color: var(--dim); font-size: 10px; }
.analytics-stats { grid-template-columns: repeat(6, minmax(0,1fr)); }
.analytics-stat strong { color: #d3b5ff; font-size: 22px; }
.analytics-stat .analytics-profit { color: #79dfa5; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.analytics-bars, .analytics-simple-list { display: flex; flex-direction: column; gap: 12px; }
.analytics-bar-row { display: grid; grid-template-columns: 110px minmax(0,1fr) 28px; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.analytics-bar-row > div { height: 8px; overflow: hidden; background: rgba(255,255,255,.06); border-radius: 99px; }
.analytics-bar-row i { display: block; height: 100%; background: linear-gradient(90deg,#7540cb,#b27cff); border-radius: inherit; }
.analytics-bar-row strong { color: var(--text); text-align: right; }
.analytics-simple-list > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; }
.analytics-simple-list > div:last-child { border-bottom: 0; }
.analytics-simple-list strong { color: var(--text); }
.backup-notice { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: 11px; }
.backup-notice strong { color: #c79fff; }
.backup-list { display: flex; flex-direction: column; }
.backup-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.backup-row:last-child { border-bottom: 0; }
.backup-icon { color: #b990ff; font-size: 20px; }
.backup-row div { flex: 1; }
.backup-row strong, .backup-row small { display: block; }
.backup-row strong { color: var(--text); font-size: 12px; }
.backup-row small, .backup-row time { margin-top: 4px; color: var(--dim); font-size: 10px; }
.backup-row time { margin: 0; }
.calculator-card { margin-bottom: 14px; }
.calculator-result-badge { padding: 6px 9px; color: #79dfa5; background: rgba(72,193,121,.11); border-radius: 99px; font-size: 10px; }
.calculator-form-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.calculator-result-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 14px; }
.calculator-result-grid > div { padding: 12px; background: rgba(9,8,13,.33); border: 1px solid var(--line-soft); border-radius: 9px; }
.calculator-result-grid span, .calculator-result-grid strong { display: block; }
.calculator-result-grid span { color: var(--dim); font-size: 9px; }
.calculator-result-grid strong { margin-top: 6px; color: var(--text); font-size: 14px; }
.calculator-result-grid .calculator-recommended { color: #d0a9ff; }
.calculator-apply { display: flex; align-items: center; gap: 8px; margin: 14px 0; color: var(--muted); font-size: 11px; }
.document-actions-card { margin-bottom: 14px; }
.document-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1100px) {
    .analytics-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .printer-live-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .calculator-form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .production-stats, .analytics-stats, .printer-live-grid, .analytics-grid, .equipment-layout { grid-template-columns: 1fr; }
    .analytics-period-form, .backup-notice { align-items: stretch; flex-direction: column; }
    .equipment-specs { grid-template-columns: repeat(2,1fr); }
    .equipment-edit-form, .maintenance-form, .calculator-form-grid { grid-template-columns: 1fr; }
    .production-queue-row { grid-template-columns: 45px minmax(0,1fr) 75px; }
    .production-queue-row > :last-child { display: none; }
    .calculator-result-grid { grid-template-columns: repeat(2,1fr); }
    .operations-strip, .low-stock-items { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* =========================
   INBOX ДИАЛОГОВ
========================= */

body:has(.conversations-page) .main-content {
    padding: 20px 24px 30px;
}

.conversations-page {
    width: min(1280px, 100%);
    margin: 0 auto;
}

.conversations-page-header {
    margin-bottom: 14px;
}

.conversations-page-header h1 {
    margin-bottom: 5px;
}

.conversations-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
}

.conversation-list-panel,
.conversation-panel {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(28, 23, 39, .94), rgba(19, 17, 25, .96));
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.conversation-list-panel {
    overflow: hidden;
}

.conversation-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.conversation-list-heading h2 {
    margin: 4px 0 0;
    color: var(--white);
    font-size: 15px;
}

.eyebrow {
    color: var(--dim);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
}

.conversation-count {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #d3b7ff;
    background: rgba(145, 76, 245, .14);
    border: 1px solid rgba(173, 116, 255, .2);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}

.conversation-list {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

.conversation-list-item {
    display: block;
    padding: 13px 15px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
    transition: background .18s ease, border-color .18s ease;
}

.conversation-list-item:hover,
.conversation-list-item.is-active {
    background: rgba(157, 98, 238, .09);
}

.conversation-list-item.is-active {
    border-left: 2px solid var(--violet);
    padding-left: 13px;
}

.conversation-list-topline,
.conversation-list-meta,
.conversation-title-row,
.conversation-reply-footer {
    display: flex;
    align-items: center;
}

.conversation-list-topline,
.conversation-list-meta {
    justify-content: space-between;
    gap: 8px;
}

.platform-badge {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.platform-vk {
    color: #9bc7ff;
    background: rgba(66, 126, 194, .15);
    border: 1px solid rgba(105, 164, 235, .2);
}

.platform-max {
    color: #d0aeff;
    background: rgba(145, 76, 245, .15);
    border: 1px solid rgba(173, 116, 255, .2);
}

.conversation-list-time,
.conversation-list-meta,
.conversation-assignee {
    color: var(--dim);
    font-size: 10px;
}

.conversation-list-name {
    margin-top: 10px;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-list-preview {
    display: -webkit-box;
    margin: 5px 0 10px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.conversation-status {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
}

.status-new { color: #c7a4ff; background: rgba(145, 76, 245, .13); }
.status-waiting { color: #f1c978; background: rgba(228, 164, 50, .13); }
.status-in_progress { color: #91dbad; background: rgba(72, 193, 121, .12); }
.status-closed { color: #9e96a9; background: rgba(255, 255, 255, .07); }

.conversation-panel {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 190px);
    max-height: calc(100vh - 190px);
    overflow: hidden;
}

.conversation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-height: 70px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
}

.conversation-title-row {
    flex-wrap: wrap;
    gap: 8px;
}

.conversation-title-row h2 {
    margin: 0;
    color: var(--white);
    font-size: 16px;
}

.conversation-header p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.conversation-header p a {
    color: #c3a2ff;
    text-decoration: none;
}

.conversation-header-actions,
.conversation-assign-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.conversation-header-actions .primary-button,
.conversation-header-actions .secondary-button,
.conversation-toolbar .secondary-button {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 10px;
}

.conversation-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px;
    background: rgba(8, 8, 12, .18);
    border-bottom: 1px solid var(--line-soft);
}

.conversation-assign-form {
    justify-content: flex-start;
}

.conversation-assign-form label {
    align-self: center;
    color: var(--dim);
    font-size: 10px;
}

.conversation-assign-form .form-control {
    min-height: 32px;
    padding: 7px 9px;
    font-size: 11px;
}

.conversation-messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 16px 18px;
    overflow-y: auto;
    background: rgba(8, 8, 12, .13);
}

.message-row {
    display: flex;
    width: 100%;
}

.message-client { justify-content: flex-start; }
.message-bot,
.message-manager { justify-content: flex-end; }

.message-bubble {
    width: fit-content;
    max-width: min(70%, 720px);
    padding: 10px 13px;
    border: 1px solid transparent;
    border-radius: 15px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .1);
}

.message-client .message-bubble {
    background: #24212d;
    border-top-left-radius: 5px;
}

.message-bot .message-bubble {
    background: linear-gradient(135deg, rgba(111, 64, 185, .34), rgba(61, 40, 94, .46));
    border-color: rgba(173, 116, 255, .24);
    border-top-right-radius: 5px;
}

.message-manager .message-bubble {
    background: #1d1b25;
    border-color: rgba(173, 116, 255, .42);
    border-top-right-radius: 5px;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: #c5b7d8;
    font-size: 10px;
    font-weight: 700;
}

.message-meta time {
    color: var(--dim);
    font-size: 9px;
    font-weight: 400;
}

.message-text {
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.conversation-reply-form {
    padding: 12px 18px 14px;
    background: rgba(21, 20, 27, .98);
    border-top: 1px solid var(--line-soft);
}

.conversation-reply-input {
    display: block;
    width: 100%;
    min-height: 54px;
    max-height: 130px;
    padding: 11px 12px;
    color: var(--text);
    background: rgba(9, 8, 13, .58);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    outline: none;
    resize: vertical;
    font: inherit;
    font-size: 12px;
}

.conversation-reply-input:focus {
    border-color: rgba(170, 107, 255, .58);
    box-shadow: 0 0 0 3px rgba(161, 95, 255, .1);
}

.conversation-reply-footer {
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: var(--dim);
    font-size: 10px;
}

.conversation-reply-footer .primary-button {
    min-height: 34px;
    padding: 8px 14px;
    font-size: 11px;
}

.conversation-reply-locked,
.conversation-empty-state,
.conversation-empty-list {
    color: var(--dim);
    font-size: 12px;
}

.conversation-reply-locked {
    padding: 15px 18px;
    border-top: 1px solid var(--line-soft);
    background: rgba(21, 20, 27, .98);
}

.conversation-empty-state {
    display: grid;
    flex: 1;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 30px;
    text-align: center;
}

.conversation-empty-state h2 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
}

.conversation-empty-state p {
    margin: 0;
}

.conversation-empty-list {
    padding: 24px 16px;
    text-align: center;
}

@media (max-width: 900px) {
    .conversations-layout {
        grid-template-columns: 1fr;
    }

    .conversation-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 250px;
    }

    .conversation-panel {
        min-height: 620px;
        max-height: calc(100vh - 170px);
    }
}

@media (max-width: 600px) {
    body:has(.conversations-page) .main-content {
        padding: 15px 12px 24px;
    }

    .conversation-list {
        display: flex;
    }

    .conversation-header,
    .conversation-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .conversation-header-actions,
    .conversation-assign-form {
        justify-content: flex-start;
    }

    .message-bubble {
        max-width: 86%;
    }

    .conversation-reply-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}