:root {
            --page: #070b13;
            --page-soft: #0a111d;
            --sidebar: rgba(10, 18, 30, .92);
            --surface: #101a28;
            --surface-2: #152235;
            --surface-3: #1b2c42;
            --input: #0a1420;
            --line: rgba(174, 201, 221, .13);
            --line-strong: rgba(174, 201, 221, .22);
            --text: #edf5fb;
            --muted: #93a7b9;
            --subtle: #6e8497;
            --green: #295ad8;
            --green-bright: #668cec;
            --green-soft: rgba(0, 86, 255, .12);
            --cyan: #4dc9f5;
            --purple: #b691ff;
            --orange: #ffb86b;
            --red: #ff7684;
            --shadow: 0 20px 50px rgba(0, 0, 0, .28);
            --radius: 18px;
        }

        * { box-sizing: border-box; }
        html { min-width: 320px; background: var(--page); }
        body {
            min-width: 320px;
            margin: 0;
            color: var(--text);
            background:
                radial-gradient(circle at 85% -12%, rgba(0, 86, 255, .16), transparent 31rem),
                radial-gradient(circle at 0 87%, rgba(77, 201, 245, .10), transparent 34rem),
                var(--page);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-size: 14px;
            line-height: 1.5;
        }

        a { color: inherit; text-decoration: none; }
        button, input, textarea, select { font: inherit; }
        button { border: 0; }
        ::selection { color: #060e22; background: var(--green); }

        .app-shell { display: grid; grid-template-columns: 258px minmax(0, 1fr); min-height: 100vh; }
        .sidebar {
            position: sticky;
            top: 0;
            z-index: 20;
            display: flex;
            flex-direction: column;
            width: 258px;
            height: 100vh;
            padding: 21px 14px 16px;
            background: var(--sidebar);
            border-right: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }
        .brand { display: flex; align-items: center; gap: 11px; padding: 3px 10px 25px; font-weight: 850; letter-spacing: -.35px; }
        .brand-mark {
            display: grid;
            width: 39px;
            height: 39px;
            place-items: center;
            color: #030b21;
            background: linear-gradient(135deg, #83a2f3, var(--green));
            border-radius: 13px;
            box-shadow: 0 10px 28px rgba(0, 86, 255, .26);
            font-size: 19px;
        }
        .brand span:last-child { min-width: 0; }
        .brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .035em; }
        .nav-label { display: block; margin: 5px 11px 8px; color: var(--subtle); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
        .nav { display: grid; gap: 4px; }
        .nav a {
            display: flex;
            align-items: center;
            gap: 11px;
            min-height: 42px;
            padding: 9px 11px;
            color: #b6c6d3;
            border: 1px solid transparent;
            border-radius: 12px;
            font-weight: 720;
            transition: .18s ease;
        }
        .nav a:hover, .nav a.active { color: var(--text); background: linear-gradient(90deg, var(--green-soft), rgba(0,86,255,.03)); border-color: rgba(0,86,255,.17); }
        .nav-icon { display: grid; width: 20px; place-items: center; color: var(--green); font-size: 16px; }
        .sidebar-bottom { margin-top: auto; padding: 15px 10px 4px; color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; }
        .online-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,86,255,.12); }
        .sidebar-bottom a { color: #cce1f0; }

        .content { width: min(1580px, 100%); min-width: 0; margin: 0 auto; padding: 30px clamp(18px, 3vw, 46px) 46px; }
        .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 25px; }
        .eyebrow { display: block; margin-bottom: 7px; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
        h1, h2, h3, p { margin-top: 0; }
        .page-header h1 { margin-bottom: 4px; font-size: clamp(25px, 3vw, 34px); line-height: 1.12; letter-spacing: -.95px; }
        .page-header p { max-width: 760px; margin-bottom: 0; color: var(--muted); }

        .panel, .card {
            background: linear-gradient(145deg, rgba(19, 32, 48, .96), rgba(13, 24, 37, .96));
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        .panel { padding: clamp(16px, 2vw, 23px); }
        .panel + .panel { margin-top: 20px; }
        .panel-title-row, .section-heading, .toolbar, .form-actions, .rule-topline, .rule-footer { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
        .panel-title { margin: 0; font-size: 18px; letter-spacing: -.4px; }
        .section-subtitle { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

        .button, button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 40px;
            padding: 9px 14px;
            color: #050e25;
            background: linear-gradient(135deg, var(--green-bright), var(--green));
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 11px;
            box-shadow: 0 9px 18px rgba(0, 86, 255, .13);
            cursor: pointer;
            font-weight: 850;
            transition: transform .16s ease, filter .16s ease, border-color .16s ease;
        }
        .button:hover, button:hover { filter: brightness(1.06); transform: translateY(-1px); }
        .button:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(77,201,245,.65); outline-offset: 2px; }
        .button-secondary { color: #dcecf5; background: rgba(39, 59, 79, .72); border-color: var(--line-strong); box-shadow: none; }
        .button-secondary:hover { background: var(--surface-3); }
        .button-danger { color: #fff3f5; background: rgba(221, 74, 90, .88); box-shadow: none; }
        .button-small { min-height: 33px; padding: 6px 10px; border-radius: 9px; font-size: 11px; }
        .button-ghost { color: #b8cbd8; background: transparent; border-color: transparent; box-shadow: none; }
        .button-ghost:hover { color: #fff; background: rgba(255,255,255,.05); }

        .flash { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: 12px; background: rgba(17, 39, 56, .84); }
        .flash.success { border-left-color: var(--green); }
        .flash.error { border-left-color: var(--red); }

        .status-on, .status-off, .match-badge, .option-badge, .ai-badge, .source-badge, .stage-chip, .tag, .count-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            width: max-content;
            max-width: 100%;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }
        .status-on { color: #a0b8f7; background: rgba(0,86,255,.13); }
        .status-off { color: #ffb9c0; background: rgba(255,118,132,.12); }
        .match-badge { color: #b7e9fb; background: rgba(77,201,245,.12); }
        .option-badge { color: #050e25; background: var(--green); }
        .ai-badge { color: #e5d7ff; background: rgba(182,145,255,.16); }
        .source-badge { color: #c1ebfb; background: rgba(77,201,245,.12); }
        .stage-new { color: #bcd8ed; background: rgba(107, 158, 203, .16); }
        .stage-contacted { color: #b8ebff; background: rgba(77,201,245,.15); }
        .stage-qualified { color: #b3c6f7; background: rgba(0,86,255,.15); }
        .stage-proposal { color: #f0d6ff; background: rgba(182,145,255,.17); }
        .stage-won { color: #091126; background: #7c9ae8; }
        .stage-lost { color: #ffbec6; background: rgba(255,118,132,.14); }
        .tag { color: #dce9f2; background: rgba(255,255,255,.075); }
        .count-pill { color: #bdcaeb; background: rgba(0,86,255,.1); }

        .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
        .metric-card { position: relative; overflow: hidden; min-height: 118px; padding: 17px; }
        .metric-card::after { position: absolute; top: -42px; right: -28px; width: 112px; height: 112px; border: 1px solid rgba(0,86,255,.2); border-radius: 50%; content: ""; }
        .metric-label { position: relative; z-index: 1; color: var(--muted); font-size: 11px; font-weight: 780; }
        .metric-value { position: relative; z-index: 1; display: block; margin-top: 8px; color: var(--green); font-size: 31px; font-weight: 900; letter-spacing: -1px; }
        .metric-note { position: relative; z-index: 1; display: block; margin-top: 4px; color: var(--subtle); font-size: 10px; }

        .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
        .form-grid .span-2 { grid-column: 1 / -1; }
        .field { min-width: 0; }
        label { display: block; margin: 0 0 6px; color: #dce8f0; font-size: 12px; font-weight: 800; }
        .field-help { display: block; margin: -3px 0 10px; color: var(--muted); font-size: 11px; }
        input, textarea, select {
            width: 100%;
            margin: 0 0 14px;
            padding: 10px 11px;
            color: var(--text);
            background: var(--input);
            border: 1px solid var(--line-strong);
            border-radius: 10px;
            outline: none;
            transition: border-color .16s, background .16s, box-shadow .16s;
        }
        input:hover, textarea:hover, select:hover { border-color: rgba(77,201,245,.36); }
        input:focus, textarea:focus, select:focus { background: #0b1826; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,86,255,.1); }
        textarea { min-height: 124px; resize: vertical; white-space: pre-wrap; }
        select { cursor: pointer; }
        input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
        input[type="search"]::-webkit-search-cancel-button { filter: invert(1); }
        .toggle-line { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 11px 12px; background: rgba(4, 13, 23, .45); border: 1px solid var(--line); border-radius: 11px; }
        .toggle-line label { margin: 0; cursor: pointer; }
        .muted { color: var(--muted); }
        .small { font-size: 11px; }
        .empty-state { padding: 32px 18px; color: var(--muted); text-align: center; }
        .inline { display: inline; }
        hr { margin: 21px 0; border: 0; border-top: 1px solid var(--line); }

        .hint-card { padding: 16px; color: #d7ddec; background: linear-gradient(145deg, rgba(0,86,255,.105), rgba(0,86,255,.035)); border: 1px solid rgba(0,86,255,.22); border-radius: 14px; }
        .hint-card h3 { margin: 0 0 5px; color: #dde5f9; font-size: 14px; }
        .hint-card p { margin: 0; font-size: 12px; }
        .template-overview, .settings-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 20px; align-items: start; }
        .settings-grid > .span-2 { grid-column: 1 / -1; }

        .chat-wallpaper { background-color: #0b141a; background-image: radial-gradient(rgba(164, 194, 180, .055) 1px, transparent 1px), radial-gradient(rgba(164, 194, 180, .032) 1px, transparent 1px); background-position: 0 0, 14px 14px; background-size: 28px 28px; }
        .chat-preview { padding: 17px; border: 1px solid var(--line); border-radius: 16px; }
        .preview-header { display: flex; align-items: center; gap: 10px; margin: -17px -17px 16px; padding: 12px 15px; background: rgba(25,42,58,.97); border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; }
        .avatar { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; color: #040d25; background: linear-gradient(135deg, #ccd9fc, var(--green)); border-radius: 50%; font-size: 12px; font-weight: 900; }
        .avatar.customer { color: #e6f1f6; background: linear-gradient(135deg, #497387, #243e50); }
        .preview-header strong, .chat-contact strong { display: block; font-size: 13px; }
        .preview-header small, .chat-contact small { color: var(--muted); font-size: 10px; }
        .message-bubble { position: relative; width: fit-content; min-width: 130px; max-width: min(79%, 700px); margin: 9px 0; padding: 10px 112px 25px 12px; color: #eef5f7; background: #202c33; border: 1px solid rgba(255,255,255,.055); border-radius: 10px 10px 10px 3px; box-shadow: 0 2px 5px rgba(0,0,0,.2); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
        .message-bubble.incoming { color: #eef5f7; background: #202c33; }
        .message-bubble.outgoing, .message-bubble.bot { margin-left: auto; color: #f0f4fe; background: #051c57; border-color: rgba(151, 255, 204, .12); border-radius: 10px 10px 3px 10px; }
        .message-bubble.delivery-failed { border-color: rgba(255,118,132,.65); background: #57323a; }
        .message-time { position: absolute; right: 9px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; color: rgba(233, 237, 239, .68); font-size: 9px; line-height: 1; white-space: nowrap; }
        .incoming .message-time { color: rgba(233, 237, 239, .58); }
        .delivery-state { font-size: 8px; font-weight: 900; letter-spacing: .015em; }
        .delivery-accepted, .delivery-sent { color: #d0e3e8; }
        .delivery-delivered { color: #86dfff; }
        .delivery-read { color: #8fe7ff; }
        .delivery-pending { color: #f7d889; }
        .delivery-failed { color: #ffbbc3; }
        .message-error-detail { display: block; margin: 9px 0 0; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.14); color: #ffd4d8; font-size: 10px; line-height: 1.4; white-space: normal; }
        .delivery-window { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 850; }
        .delivery-window.active { color: #b9c9f3; background: rgba(0,86,255,.14); }
        .delivery-window.expired { color: #ffe0a2; background: rgba(245,181,65,.15); }
        .message-bubble .ai-badge, .message-bubble .source-badge { margin: 0 5px 4px 0; vertical-align: 1px; color: #d8e1f8; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.08); }
        .message-bubble.incoming .ai-badge, .message-bubble.incoming .source-badge { color: #cdeeff; background: rgba(77,201,245,.13); }

        .rule-list { display: grid; gap: 14px; }
        .rule-category + .rule-category { margin-top: 25px; }
        .category-title { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; color: #dcebf2; font-size: 15px; }
        .category-title::before { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,86,255,.1); content: ""; }
        .rule-card { overflow: hidden; background: rgba(8,18,29,.52); border: 1px solid var(--line); border-radius: 14px; }
        .rule-card.is-disabled { opacity: .58; }
        .rule-topline { padding: 11px 14px; background: rgba(255,255,255,.025); border-bottom: 1px solid var(--line); }
        .rule-name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-weight: 850; }
        .rule-chat { padding: 11px 14px; }
        .rule-chat .message-bubble { margin-top: 0; }
        .rule-footer { flex-wrap: wrap; padding: 10px 14px; background: rgba(0,0,0,.12); border-top: 1px solid var(--line); }
        .rule-actions { display: flex; flex-wrap: wrap; gap: 7px; }
        .rule-editor { border-top: 1px solid var(--line); }
        .rule-editor > summary { padding: 12px 14px; color: #b9eaff; cursor: pointer; font-size: 12px; font-weight: 800; list-style: none; }
        .rule-editor > summary::-webkit-details-marker { display: none; }
        .rule-editor > summary::before { display: inline-block; width: 17px; content: "✎"; }
        .rule-editor[open] > summary { background: rgba(77,201,245,.06); }
        .rule-editor form { padding: 13px 14px 2px; background: rgba(3,10,17,.3); }
        .new-rule { border-color: rgba(0,86,255,.26); }
        .new-rule summary { cursor: pointer; font-weight: 850; }
        .new-rule[open] summary { margin-bottom: 18px; }

        /* Modern inbox and CRM */
        .inbox-grid { display: grid; grid-template-columns: 295px minmax(420px, 1fr) 330px; min-height: min(760px, calc(100vh - 136px)); overflow: hidden; padding: 0; }
        .chat-list { min-width: 0; overflow-y: auto; background: rgba(9,19,30,.76); border-right: 1px solid var(--line); }
        .chat-list-header { position: sticky; top: 0; z-index: 3; padding: 16px; background: rgba(15,28,42,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
        .chat-list-header h2 { margin: 0; font-size: 16px; }
        .chat-list-header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
        .contact-search { width: 100%; margin: 12px 0 0; padding: 9px 10px; font-size: 12px; }
        .contact-row { display: flex; gap: 10px; padding: 12px 13px; border-bottom: 1px solid rgba(174,201,221,.07); transition: background .14s ease; }
        .contact-row:hover, .contact-row.active { background: linear-gradient(90deg, rgba(0,86,255,.13), rgba(0,86,255,.025)); }
        .contact-details { min-width: 0; flex: 1; }
        .contact-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
        .contact-row p { overflow: hidden; margin: 3px 0 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
        .contact-row time { color: var(--subtle); font-size: 9px; white-space: nowrap; }
        .contact-meta { display: block; margin-top: 2px; color: var(--subtle); font-size: 9px; }
        .contact-row .stage-chip { margin-top: 5px; padding: 3px 6px; font-size: 9px; }
        .conversation-area { display: flex; flex-direction: column; min-width: 0; background: #0b141a; }
        .conversation-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 12px 16px; background: #202c33; border-bottom: 1px solid rgba(255,255,255,.08); }
        .chat-contact { display: flex; align-items: center; min-width: 0; gap: 10px; }
        .chat-contact > span:last-child { min-width: 0; }
        .chat-contact strong, .chat-contact small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .conversation-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
        .conversation-note { padding: 7px 12px; color: #b6bed4; background: #111b21; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 10px; text-align: center; }
        .sync-indicator { color: #98aad8; }
        .conversation-body { flex: 1; min-height: 410px; max-height: 620px; padding: 18px clamp(14px, 2.8vw, 36px); overflow-y: auto; scrollbar-color: #3b4a54 #0b141a; scrollbar-width: thin; }
        .conversation-body .message-bubble { max-width: min(79%, 670px); }
        .chat-composer { display: flex; align-items: flex-end; gap: 9px; padding: 11px 13px; background: #202c33; border-top: 1px solid rgba(255,255,255,.08); }
        .chat-composer textarea { min-height: 44px; max-height: 125px; margin: 0; padding: 11px 13px; resize: vertical; }
        .chat-composer button { flex: 0 0 auto; }
        .profile-pane { min-width: 0; overflow-y: auto; background: #111b21; border-left: 1px solid rgba(255,255,255,.08); }
        .profile-pane-inner { padding: 16px; }
        .profile-hero { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
        .profile-hero h3 { margin: 0; font-size: 15px; }
        .profile-hero p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
        .profile-section { padding: 15px 0; border-bottom: 1px solid var(--line); }
        .profile-section:last-child { border-bottom: 0; }
        .profile-section h4 { margin: 0 0 10px; color: #dce9f1; font-size: 12px; }
        .profile-section .field:last-child input, .profile-section .field:last-child textarea, .profile-section .field:last-child select { margin-bottom: 0; }
        .profile-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; color: #bceaff; font-size: 11px; font-weight: 800; }
        .scheduled-mini { display: grid; gap: 8px; }
        .scheduled-mini-row { padding: 9px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 10px; }
        .scheduled-mini-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
        .scheduled-mini-row small { color: var(--muted); font-size: 10px; }

        .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); gap: 20px; align-items: start; }
        .pipeline-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
        .pipeline-stage-card { display: block; min-height: 95px; padding: 13px; background: rgba(7,16,26,.47); border: 1px solid var(--line); border-radius: 13px; transition: .16s ease; }
        .pipeline-stage-card:hover { border-color: rgba(0,86,255,.33); transform: translateY(-1px); }
        .pipeline-stage-card strong { display: block; margin-top: 15px; color: var(--green); font-size: 24px; line-height: 1; }
        .pipeline-stage-card span { color: var(--muted); font-size: 11px; font-weight: 720; }
        .activity-list { display: grid; }
        .activity-row { display: grid; grid-template-columns: minmax(130px, .3fr) minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
        .activity-row:last-child { border-bottom: 0; }
        .activity-row strong { font-size: 12px; }
        .activity-copy { overflow: hidden; color: #d6e7ef; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
        .activity-time { color: var(--muted); font-size: 10px; white-space: nowrap; }
        .schedule-list { display: grid; gap: 9px; }
        .schedule-card { display: block; padding: 12px; background: rgba(7,16,26,.44); border: 1px solid var(--line); border-radius: 12px; }
        .schedule-card:hover { border-color: rgba(77,201,245,.34); }
        .schedule-card strong { display: block; font-size: 12px; }
        .schedule-card p { overflow: hidden; margin: 3px 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
        .schedule-card small { color: #9baddc; font-size: 10px; }

        .crm-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 11px; margin-bottom: 16px; }
        .crm-toolbar .field { flex: 1 1 240px; }
        .crm-toolbar .field input, .crm-toolbar .field select { margin-bottom: 0; }
        .stage-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 1px 0 9px; }
        .stage-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: var(--muted); background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
        .stage-tabs a:hover, .stage-tabs a.active { color: #e1e9fd; background: var(--green-soft); border-color: rgba(0,86,255,.28); }
        .crm-client-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
        .crm-client-card { display: block; min-width: 0; padding: 15px; background: rgba(8,18,29,.56); border: 1px solid var(--line); border-radius: 14px; transition: .16s ease; }
        .crm-client-card:hover { border-color: rgba(0,86,255,.3); background: rgba(19,39,49,.7); transform: translateY(-2px); }
        .crm-client-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
        .crm-client-card h3 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
        .crm-client-card .client-company { overflow: hidden; min-height: 18px; margin: 3px 0 10px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
        .client-meta-grid { display: grid; gap: 5px; color: #b8cad6; font-size: 10px; }
        .client-meta-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .client-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

        .crm-detail-grid { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
        .client-summary { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; }
        .client-summary h2 { margin: 0; font-size: 20px; }
        .client-summary p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
        .detail-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
        .detail-stat { padding: 10px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
        .detail-stat strong { display: block; color: var(--green); font-size: 18px; }
        .detail-stat span { color: var(--muted); font-size: 9px; }
        .timeline { display: grid; gap: 9px; }
        .timeline .message-bubble { max-width: 88%; }
        .timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
        .timeline-heading h2 { margin: 0; font-size: 17px; }

        .automation-grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: 20px; align-items: start; }
        .automation-list { display: grid; gap: 10px; }
        .automation-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; background: rgba(7,16,26,.48); border: 1px solid var(--line); border-radius: 13px; }
        .automation-item h3 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
        .automation-item p { overflow: hidden; margin: 3px 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
        .automation-item small { color: #a6b5dd; font-size: 10px; }
        .automation-item .status-off { margin-top: 5px; }
        .notice { padding: 11px 12px; color: #bdd2df; background: rgba(77,201,245,.07); border: 1px solid rgba(77,201,245,.17); border-radius: 11px; font-size: 11px; }
        .recurrence-details { margin: 0 0 14px; padding: 10px 11px 0; background: rgba(6, 18, 26, .42); border: 1px solid var(--line); border-radius: 11px; }
        .recurrence-details > summary { color: #ccd6ef; cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; }
        .recurrence-details > summary::-webkit-details-marker { display: none; }
        .recurrence-details > summary::after { float: right; color: var(--green); content: "+"; }
        .recurrence-details[open] > summary::after { content: "−"; }
        .recurrence-details .field-help { margin-top: 8px; }
        .campaign-panel { border-color: rgba(0,86,255,.23); }

        .ticket-list { display: grid; gap: 12px; }
        .ticket-card { display: grid; grid-template-columns: minmax(0, 1fr) 238px; gap: 18px; padding: 16px; background: rgba(7,16,26,.5); border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: 14px; }
        .ticket-card.ticket-waiting { border-left-color: var(--green); }
        .ticket-card.ticket-in_progress { border-left-color: var(--orange); }
        .ticket-card.ticket-closed { border-left-color: var(--subtle); opacity: .78; }
        .ticket-heading { display: flex; align-items: center; gap: 10px; }
        .ticket-heading h2 { margin: 0; font-size: 15px; }
        .ticket-heading p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
        .ticket-main h3 { margin: 14px 0 5px; font-size: 13px; }
        .ticket-message { margin: 0; color: #d6e6ec; white-space: pre-wrap; overflow-wrap: anywhere; }
        .ticket-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; color: var(--muted); font-size: 10px; }
        .ticket-actions { display: grid; align-content: start; justify-items: stretch; gap: 9px; }
        .ticket-actions > .status-on, .ticket-actions > .match-badge, .ticket-actions > .muted { justify-self: start; }
        .ticket-actions form { padding-top: 9px; border-top: 1px solid var(--line); }
        .ticket-actions form label { margin-bottom: 4px; }
        .ticket-actions select { min-width: 0; margin: 0; }
        .ticket-actions .toolbar { align-items: stretch; gap: 6px; }
        .ticket-actions .toolbar button { min-width: 0; }

        .ai-panel { border-color: rgba(182,145,255,.31); }
        .ai-panel .panel-title { display: flex; align-items: center; gap: 7px; }
        .ai-panel .hint-card { background: rgba(182,145,255,.08); border-color: rgba(182,145,255,.2); }
        .ai-status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 15px; padding: 10px 11px; background: rgba(4,13,23,.42); border: 1px solid var(--line); border-radius: 11px; font-size: 11px; }

        .login-page { display: grid; min-height: 100vh; place-items: center; padding: 22px; background: radial-gradient(circle at 20% 5%, rgba(0,86,255,.16), transparent 27rem), var(--page); }
        .login-card { width: min(430px, 100%); padding: 27px; }

        @media (max-width: 1260px) {
            .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .inbox-grid { grid-template-columns: 260px minmax(0, 1fr); }
            .profile-pane { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
            .profile-pane-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
            .profile-hero { grid-column: 1 / -1; padding-bottom: 0; border: 0; }
            .profile-section { padding: 0; border: 0; }
            .crm-client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        @media (max-width: 1020px) {
            .app-shell { grid-template-columns: 1fr; }
            .sidebar { position: sticky; display: block; width: 100%; height: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
            .brand { display: inline-flex; padding: 2px 8px 8px; }
            .nav-label, .sidebar-bottom { display: none; }
            .nav { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 1px; }
            .nav a { flex: 0 0 auto; min-height: 36px; padding: 7px 10px; font-size: 11px; }
            .content { padding-top: 23px; }
            .dashboard-grid, .automation-grid, .crm-detail-grid, .template-overview, .settings-grid { grid-template-columns: 1fr; }
            .settings-grid > .span-2 { grid-column: auto; }
            .pipeline-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        @media (max-width: 760px) {
            .content { padding: 18px 12px 34px; }
            .page-header { display: block; margin-bottom: 18px; }
            .page-header .button, .page-header form { margin-top: 14px; }
            .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .cards .metric-card:last-child { grid-column: span 2; }
            .inbox-grid { grid-template-columns: 1fr; min-height: 0; }
            .chat-list { max-height: 280px; border-right: 0; border-bottom: 1px solid var(--line); }
            .conversation-body { max-height: 505px; min-height: 360px; }
            .conversation-body .message-bubble, .timeline .message-bubble { max-width: 88%; }
            .profile-pane { grid-column: auto; }
            .profile-pane-inner { display: block; }
            .profile-section { padding: 15px 0; border-bottom: 1px solid var(--line); }
            .profile-section:last-child { border-bottom: 0; }
            .conversation-actions .ai-badge { display: none; }
            .crm-client-grid { grid-template-columns: 1fr; }
            .pipeline-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .activity-row { grid-template-columns: 1fr auto; }
            .activity-copy { grid-column: 1 / -1; grid-row: 2; }
            .automation-item { grid-template-columns: 1fr; }
            .automation-item form { justify-self: start; }
            .ticket-card { grid-template-columns: 1fr; }
            .ticket-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
            .ticket-actions form { grid-column: 1 / -1; }
        }

        @media (max-width: 520px) {
            .brand small { display: none; }
            .nav a { padding: 7px 9px; }
            .nav-icon { width: auto; }
            .cards { gap: 10px; }
            .metric-card { min-height: 98px; padding: 14px; }
            .metric-value { font-size: 27px; }
            .panel { padding: 14px; border-radius: 14px; }
            .form-grid { grid-template-columns: 1fr; }
            .form-grid .span-2 { grid-column: auto; }
            .panel-title-row, .section-heading, .rule-topline, .rule-footer { align-items: flex-start; }
            .panel-title-row { flex-wrap: wrap; }
            .conversation-topbar { align-items: flex-start; padding: 11px; }
            .chat-composer { padding: 9px; }
            .chat-composer button { min-width: 44px; padding: 10px; font-size: 0; }
            .chat-composer button::before { content: "➤"; font-size: 16px; }
            .message-bubble { min-width: 108px; padding-right: 94px; font-size: 12px; }
            .ticket-actions { grid-template-columns: 1fr; }
            .detail-stat-grid { grid-template-columns: repeat(3, 1fr); }
            .stage-tabs { margin-right: -2px; }
        }