*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    /* ------------------------------------------------------------------
       The dashboard consumes the design system in brand.css rather than
       keeping a parallel palette. The aliases below map this file's legacy
       token names onto the system tokens, so there is ONE source of truth
       for colour and one place to change it.
       ------------------------------------------------------------------ */
    :root{
      --surface2:var(--surface-sunken); --border-light:var(--border-subtle);
      --text2:var(--text-secondary); --text3:var(--text-muted);
      --accent-light:var(--brand-400);
      --green:var(--success); --green-soft:var(--success-subtle);
      --red:var(--danger); --red-soft:var(--danger-subtle);
      --amber:var(--warning); --amber-soft:var(--warning-subtle);
      --font:var(--font-sans);
      --radius:var(--radius-lg); --radius-sm:var(--radius-sm);
      --transition:var(--duration-fast) var(--ease-out);
    }
    body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased;display:flex;height:100vh;overflow:hidden}
    a{color:inherit;text-decoration:none}
    button{font-family:var(--font)}

    /* SVG icon helper */
    .ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
    .ic svg{width:20px;height:20px;stroke-width:1.5}

    /* ================ SIDEBAR ================ */
    .sidebar{width:var(--sidebar-w);background:var(--surface2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;z-index:50}
    .sb-header{height:var(--topbar-h);display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--border);flex-shrink:0}
    .sb-header svg{width:22px;height:22px}
    .sb-header .brand{font-weight:700;font-size:14px;letter-spacing:-.01em}
    .sb-nav{flex:1;overflow-y:auto;padding:6px}
    .sb-section{margin-bottom:12px}
    .sb-label{font-size:11px;font-weight:500;color:var(--text3);padding:6px 10px 4px;letter-spacing:0}
    .sb-item{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:background var(--transition);position:relative;white-space:nowrap;min-height:32px}
    .sb-item:hover{background:var(--surface-hover);color:var(--text)}
        .sb-item.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
    .sb-item.active svg{color:var(--accent)}
    .sb-item .ico{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.65}
    .sb-item.active .ico{opacity:1}
    .sb-item .count{margin-left:auto;background:var(--accent);color:#fff;font-size:10px;padding:1px 6px;border-radius:999px;font-weight:600}
    .sb-item .count.muted{background:var(--border);color:var(--text3)}
    .sb-footer{padding:8px;border-top:1px solid var(--border);flex-shrink:0}
    .sb-tenant{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}
    .sb-tenant:hover{background:var(--surface2)}
    .sb-tenant .avatar{width:32px;height:32px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
    .sb-tenant .info{overflow:hidden}
    .sb-tenant .info b{font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sb-tenant .info span{font-size:11px;color:var(--text3)}

    /* ================ MAIN AREA ================ */
    .main{flex:1;display:flex;flex-direction:column;min-width:0}
    .topbar{height:var(--topbar-h);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--surface);flex-shrink:0;z-index:30}
    .topbar-left{display:flex;align-items:center;gap:8px}
    .topbar-title{font-size:14px;font-weight:600}
    .topbar-right{display:flex;align-items:center;gap:4px}
    .icon-btn{width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text2);transition:background var(--transition)}
    .icon-btn:hover{background:var(--surface2);color:var(--text)}
    .icon-btn svg{width:17px;height:17px}
    .search-box{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px;cursor:pointer;min-width:200px;transition:border var(--transition)}
    .search-box:focus-within{border-color:var(--accent)}
    .search-box svg{width:15px;height:15px;opacity:.5}
    .search-box input{border:none;background:transparent;outline:none;font-size:13px;color:var(--text);flex:1;font-family:var(--font)}
    .search-box input::placeholder{color:var(--text3)}
    .search-box kbd{font-size:10px;padding:1px 5px;border-radius:3px;background:var(--border);color:var(--text3);font-family:monospace}

    .content{flex:1;overflow-y:auto;position:relative}
    .page{display:none;height:100%}.page.active{display:block}
    /* (no fade animation — minimal) */

    /* ================ STAT CARDS ================ */
    .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin-bottom:0;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
    .stat-card{background:var(--surface);padding:16px;transition:none}
    .stat-card .label{font-size:12px;color:var(--text2);font-weight:500;display:block}
    .stat-card .value{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:4px 0 2px}
    .stat-card .trend{font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:3px}
    .stat-card .trend.up{color:var(--green)} .stat-card .trend.down{color:var(--red)} .stat-card .trend.flat{color:var(--text3)}

    /* ================ PANELS ================ */
    .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
    .panel-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
    .panel-h h3{font-size:14px;font-weight:600}
    .panel-body{padding:16px}

    .btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:background var(--transition);white-space:nowrap}
    .btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}
    .btn-ghost{background:var(--surface);color:var(--text2);border:1px solid var(--border)}.btn-ghost:hover{background:var(--surface2);color:var(--text)}
    .btn-sm{padding:4px 10px;font-size:12px}
    .btn-icon{padding:6px;width:30px;height:30px;justify-content:center}

    /* ================ TABLES ================ */
    table{width:100%;border-collapse:collapse;font-size:13px}
    th{text-align:left;padding:8px 16px;border-bottom:1px solid var(--border);font-weight:600;color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--surface2)}
    td{padding:10px 16px;border-bottom:1px solid var(--border-light)}
    tr:last-child td{border-bottom:none}
    tr:hover td{background:var(--surface2)}

    /* ================ PILLS / BADGES ================ */
    .pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
    .pill.green{background:var(--green-soft);color:var(--green)}
    .pill.red{background:var(--red-soft);color:var(--red)}
    .pill.blue{background:var(--accent-soft);color:var(--accent)}
    .pill.amber{background:var(--amber-soft);color:var(--amber)}
    .pill.gray{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}

    /* ================ CHARTS ================ */
    .chart{display:flex;align-items:end;gap:3px;height:100px;padding-top:10px}
    .chart .bar{flex:1;border-radius:2px 2px 0 0;background:var(--accent);min-height:3px;opacity:.4;transition:opacity .15s;cursor:pointer;position:relative}
    .chart .bar:hover{opacity:.8}
    .chart .bar:hover::after{content:attr(data-v);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:500;white-space:nowrap;z-index:10}
    .chart-line{width:100%;height:120px}

    /* ================ INBOX ================ */
    .inbox-layout{display:flex;height:100%}
    .inbox-list{width:var(--inbox-w);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
    .inbox-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
    .inbox-header h2{font-size:15px;font-weight:700}
    .inbox-filters{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}
    .inbox-filter{padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;border:none;background:transparent;color:var(--text3);transition:all .12s;font-family:var(--font)}
    .inbox-filter.active{background:var(--accent-soft);color:var(--accent)}
    .inbox-filter:hover:not(.active){background:var(--surface2);color:var(--text2)}
    .inbox-items{flex:1;overflow-y:auto}
    .inbox-item{padding:12px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:background .12s;display:flex;gap:10px}
    .inbox-item:hover{background:var(--surface2)}
    .inbox-item.active{background:var(--accent-soft);border-left:3px solid var(--accent);padding-left:13px}
    .inbox-item.unread{font-weight:600}
    .inbox-item .avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
    .inbox-item .body{flex:1;min-width:0}
    .inbox-item .top-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px}
    .inbox-item .name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .inbox-item .time{font-size:11px;color:var(--text3);flex-shrink:0}
    .inbox-item .preview{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .inbox-item .tags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
    .inbox-item .unread-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;align-self:center}

    /* Conversation detail */
    .convo{flex:1;display:flex;flex-direction:column;min-width:0}
    .convo-header{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
    .convo-header .user-info{display:flex;align-items:center;gap:10px}
    .convo-header .ua{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px}
    .convo-header .meta h4{font-size:14px;font-weight:700}
    .convo-header .meta span{font-size:12px;color:var(--text3)}
    .convo-header .actions{display:flex;gap:4px}
    .convo-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
    .convo-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text3);text-align:center;padding:40px}
    .convo-empty .ico{font-size:48px;opacity:.3}
    .convo-empty h3{font-size:16px;font-weight:600;color:var(--text2)}
    .convo-empty p{font-size:13px;max-width:300px}
    .msg{display:flex;gap:10px;max-width:72%}
    .msg.user{margin-left:auto;flex-direction:row-reverse}
    .msg .ava{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}
    .msg.agent .ava{background:var(--accent)}
    .msg.user .ava{background:var(--text3)}
    .msg .bubble{padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.5}
    .msg.agent .bubble{background:var(--surface2);border:1px solid var(--border)}
    .msg.user .bubble{background:var(--accent);color:#fff}
    .msg .timestamp{font-size:10px;color:var(--text3);margin-top:3px}
    .msg .actions-row{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
    .msg .action-tag{font-size:11px;padding:2px 8px;border-radius:4px;background:var(--green-soft);color:var(--green);font-weight:500;display:inline-flex;align-items:center;gap:3px}

    .convo-sidebar{width:240px;border-left:1px solid var(--border);padding:16px;overflow-y:auto;flex-shrink:0}
    .convo-sidebar h5{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;margin-top:16px}
    .convo-sidebar h5:first-child{margin-top:0}
    .convo-sidebar .info-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0}
    .convo-sidebar .info-row span:first-child{color:var(--text3)}
    .convo-sidebar .info-row span:last-child{font-weight:500}

    .convo-input{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0;align-items:center}
    .convo-input input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;color:var(--text);font-family:var(--font);outline:none}
    .convo-input input:focus{border-color:var(--accent)}

    /* ================ AGENT BUILDER ================ */
    .builder-layout{padding:24px;max-width:900px;margin:0 auto}
    .builder-hero{text-align:center;margin-bottom:32px}
    .builder-hero h2{font-size:20px;font-weight:600;margin-bottom:6px}
    .builder-hero p{font-size:14px;color:var(--text2)}
    .builder-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px}
    .builder-step{display:flex;align-items:center;gap:8px;margin-bottom:16px}
    .builder-step .num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .builder-step h3{font-size:14px;font-weight:600}

    /* ================ FORMS ================ */
    input,select,textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font);background:var(--surface);color:var(--text);outline:none;transition:border .12s}
    input:focus,select:focus,textarea:focus{border-color:var(--accent)}
    input::placeholder{color:var(--text3)}
    label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .form-field{margin-bottom:12px}

    /* ================ GRIDS ================ */
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

    /* ================ LOGIN ================ */
    .login-overlay{position:fixed;inset:0;background:var(--surface2);z-index:200;display:flex;align-items:center;justify-content:center}
    .login-left{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
    .login-right{flex:1;background:var(--surface);border-left:1px solid var(--border);display:none;align-items:center;justify-content:center;color:var(--text);padding:40px;flex-direction:column;gap:32px}
    @media(min-width:900px){.login-right{display:flex}}
    .login-box{width:360px;max-width:100%}
    .login-box .logo-row{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;margin-bottom:24px}
    .login-box h2{font-size:20px;font-weight:600;margin-bottom:4px}
    .login-box .sub{font-size:14px;color:var(--text2);margin-bottom:24px}
    .login-demo{margin-top:20px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;color:var(--text3);line-height:1.8}
    .login-demo b{color:var(--text2)}
    .login-right-content{text-align:center;max-width:400px}
    .login-right-content h2{font-size:24px;font-weight:600;margin-bottom:12px}
    .login-right-content p{font-size:15px;color:var(--text2);line-height:1.6}
    .login-right-stats{display:flex;gap:32px;margin-top:40px;justify-content:center}
    .login-right-stats div{text-align:center}
    .login-right-stats b{font-size:24px;font-weight:700;display:block}
    .login-right-stats span{font-size:13px;color:var(--text3)}

    /* ================ EMPTY STATE ================ */
    .empty-state{text-align:center;padding:60px 20px;color:var(--text3)}
    .empty-state .ico{font-size:40px;margin-bottom:12px;opacity:.4}
    .empty-state h3{font-size:16px;font-weight:600;color:var(--text2);margin-bottom:4px}
    .empty-state p{font-size:13px;max-width:400px;margin:0 auto}

    /* ================ TOAST ================ */
    .toast{position:fixed;bottom:24px;right:24px;background:var(--text);color:var(--surface);padding:10px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;z-index:300;transform:translateY(100px);opacity:0;transition:all .2s}
    .toast.show{transform:translateY(0);opacity:1}
    .toast.error{background:var(--red);color:#fff}

    /* ================ RESPONSIVE ================ */
    .menu-toggle{display:none}
    @media(max-width:1024px){
      .convo-sidebar{display:none}
      .inbox-list{width:320px}
      #builderSplit{grid-template-columns:1fr !important}
    }
    @media(max-width:768px){
      .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .3s;z-index:100}
      .sidebar.open{transform:translateX(0)}
      .menu-toggle{display:flex}
      .inbox-list{display:none}
      .inbox-list.show{display:flex;position:fixed;inset:var(--topbar-h) 0 0 0;z-index:90;background:var(--surface)}
      .grid-2,.grid-3,.form-grid{grid-template-columns:1fr}
      .search-box{display:none}
    }