/* NeuralFlow — design tokens (edit these to re-skin) */
 :root{
    --primary:#2563eb;
    --primary-soft:#eaf1ff;
    --accent:#7c3aed;
    --bg:#f5f7fb;
    --surface:#fff;
    --border:#e6e9f0;
    --text:#0f172a;
    --muted:#64748b;
    --success:#16a34a;
    --warning:#d97706;
    --danger:#dc2626;
    --info:#0284c7;
    --radius:14px;
    --radius-sm:10px;
    --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.04);
    --sb:#0a1a3a;
    --sb-w:256px;
    --sb-w-min:72px;
    --font:'Inter',system-ui,sans-serif
}
 [data-theme=dark]{
    --primary-soft:#172554;
    --bg:#0b1220;
    --surface:#111a2e;
    --border:#1f2a44;
    --text:#e6ebf5;
    --muted:#94a3b8;
    --shadow:0 1px 2px rgba(0,0,0,.3)
}
 *{
    box-sizing:border-box
}
body{
    margin:0;
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    overflow-x:hidden
}
 a{
    color:inherit;
    text-decoration:none
}
button{
    font:inherit;
    color:inherit;
    background:none;
    border:0;
    cursor:pointer
}
 :focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px
}
 .bi{
    font-size:18px;
    line-height:1
}
/* Sidebar */
 .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sb-w);
    background:var(--sb);
    color:#b6c2dc;
    display:flex;
    flex-direction:column;
    z-index:50;
    transition:width .2s,transform .2s
}
 .sb-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 16px;
    border-bottom:1px solid rgba(255,255,255,.07)
}
 .logo{
    width:34px;
    height:34px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    display:grid;
    place-items:center;
    color:#fff;
    flex:none
}
 .brand{
    font-weight:700;
    color:#fff;
    font-size:16px;
    flex:1;
    white-space:nowrap
}
 .sb-head button{
    color:#8fa0c2
}
 .sb-nav{
    flex:1;
    overflow-y:auto;
    padding:8px 12px
}
 .sb-label{
    font-size:11px;
    letter-spacing:.08em;
    color:#5f7196;
    margin:16px 10px 6px;
    font-weight:600;
    white-space:nowrap
}
 .nav-link{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 12px;
    border-radius:var(--radius-sm);
    color:#b6c2dc;
    white-space:nowrap;
    transition:background .15s
}
 .nav-link:hover{
    background:rgba(255,255,255,.06);
    color:#fff
}
 .nav-link.active{
    background:var(--primary);
    color:#fff
}
 .nav-link .txt{
    flex:1
}
 .nb{
    font-size:10px;
    font-weight:700;
    padding:2px 7px;
    border-radius:99px;
    background:rgba(124,58,237,.3);
    color:#d8c7ff
}
 .nb.count{
    background:var(--danger);
    color:#fff
}
 .sb-foot{
    padding:12px;
    border-top:1px solid rgba(255,255,255,.07);
    display:grid;
    gap:8px
}
 .user-card{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.06);
    color:#fff
}
 .user-card small{
    display:block;
    color:#8fa0c2
}
 .av{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    flex:none;
    background:#cbd5e1
}
 .btn-upgrade{
    display:flex;
    justify-content:center;
    gap:8px;
    padding:9px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:var(--radius-sm);
    color:#fff
}
 .btn-upgrade:hover{
    background:rgba(255,255,255,.08)
}
 .logout{
    display:flex;
    gap:10px;
    padding:6px 10px;
    color:#8fa0c2
}
/* collapsed */
 .collapsed .sidebar{
    width:var(--sb-w-min)
}
 .collapsed .txt,.collapsed .brand,.collapsed .nb,.collapsed .sb-label,.collapsed .user-card div,.collapsed .btn-upgrade span,.collapsed .logout span{
    display:none
}
 .collapsed .nav-link,.collapsed .btn-upgrade,.collapsed .logout{
    justify-content:center
}
 .collapsed .sb-label{
    display:block;
    height:1px;
    background:rgba(255,255,255,.07);
    margin:12px 8px;
    font-size:0
}
 .collapsed .main{
    margin-left:var(--sb-w-min)
}
 .collapsed .nav-link:hover::after{
    content:attr(data-tip);
    position:absolute;
    left:60px;
    background:#000;
    color:#fff;
    padding:4px 10px;
    border-radius:6px;
    font-size:12px;
    z-index:9
}
 .main{
    margin-left:var(--sb-w);
    transition:margin .2s;
    min-width:0
}
/* Topbar */
 .topbar{
    position:sticky;
    top:0;
    z-index:40;
    height:68px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 24px;
    background:var(--surface);
    border-bottom:1px solid var(--border)
}
 .icon-btn{
    width:38px;
    height:38px;
    border-radius:var(--radius-sm);
    display:grid;
    place-items:center;
    position:relative;
    color:var(--muted)
}
 .icon-btn:hover{
    background:var(--bg);
    color:var(--text)
}
 .dot{
    position:absolute;
    top:2px;
    right:2px;
    min-width:16px;
    height:16px;
    border-radius:9px;
    background:var(--danger);
    color:#fff;
    font-size:10px;
    display:grid;
    place-items:center;
    font-weight:700
}
 .search{
    flex:1;
    max-width:440px;
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--bg);
    border:1px solid transparent;
    border-radius:var(--radius-sm);
    padding:0 12px;
    height:40px;
    color:var(--muted)
}
 .search:focus-within{
    border-color:var(--primary);
    background:var(--surface);
    box-shadow:0 0 0 3px var(--primary-soft)
}
 .search input{
    flex:1;
    border:0;
    background:none;
    outline:0;
    color:var(--text);
    min-width:0
}
 kbd{
    font:600 11px var(--font);
    border:1px solid var(--border);
    border-radius:6px;
    padding:2px 6px;
    background:var(--surface);
    color:var(--muted)
}
 .spacer{
    flex:1
}
 .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--primary);
    color:#fff;
    padding:0 16px;
    height:40px;
    border-radius:var(--radius-sm);
    font-weight:600
}
 .btn-primary:hover{
    filter:brightness(1.08)
}
 .btn-line{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--border);
    background:var(--surface);
    height:38px;
    padding:0 12px;
    border-radius:var(--radius-sm)
}
 .dd{
    position:relative
}
 .menu{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    min-width:200px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    box-shadow:0 12px 32px rgba(15,23,42,.16);
    padding:6px;
    display:none;
    z-index:60
}
 .dd.open .menu{
    display:block
}
 .menu a{
    display:flex;
    gap:10px;
    align-items:center;
    padding:8px 10px;
    border-radius:8px
}
 .menu a:hover{
    background:var(--bg)
}
 .menu hr{
    border:0;
    border-top:1px solid var(--border);
    margin:6px 0
}
 .menu .n{
    padding:8px 10px;
    color:var(--muted);
    font-size:13px
}
/* Content */
 .content{
    padding:24px;
    display:grid;
    gap:20px
}
 .page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap
}
 h1{
    font-size:24px;
    margin:0 0 4px
}
.sub{
    color:var(--muted);
    margin:0
}
 .grid{
    display:grid;
    gap:20px
}
 .kpis{
    grid-template-columns:repeat(4,1fr)
}
 .two{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr)
}
 .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px;
    min-width:0
}
 .card-h{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    flex-wrap:wrap
}
 .card-h h2{
    font-size:16px;
    margin:0
}
 .link{
    color:var(--primary);
    font-weight:600;
    font-size:13px
}
 .kpi{
    display:grid;
    gap:6px
}
 .kpi-top{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted)
}
 .ico{
    width:34px;
    height:34px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:var(--primary-soft);
    color:var(--primary)
}
 .ico.g{
    background:#dcfce7;
    color:var(--success)
}
.ico.p{
    background:#f0e7ff;
    color:var(--accent)
}
.ico.o{
    background:#ffedd5;
    color:var(--warning)
}
 .big{
    font-size:28px;
    font-weight:700;
    letter-spacing:-.02em
}
 .kpi-bot{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    color:var(--muted);
    font-size:12px
}
 .up{
    color:var(--success);
    font-weight:600
}
 .seg{
    display:inline-flex;
    background:var(--bg);
    border-radius:var(--radius-sm);
    padding:3px;
    gap:2px
}
 .seg button{
    padding:5px 11px;
    border-radius:8px;
    font-size:12px;
    color:var(--muted);
    font-weight:600
}
 .seg button.on{
    background:var(--surface);
    color:var(--text);
    box-shadow:var(--shadow)
}
 .chart-wrap{
    position:relative;
    height:280px
}
 .chart-wrap svg{
    width:100%;
    height:100%;
    display:block
}
 .tip{
    position:absolute;
    pointer-events:none;
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:0 8px 24px rgba(15,23,42,.14);
    border-radius:10px;
    padding:8px 12px;
    font-size:12px;
    display:none;
    transform:translate(-50%,-120%)
}
 .legend{
    display:flex;
    gap:14px;
    color:var(--muted);
    font-size:12px;
    margin-top:8px
}
 .legend i{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:3px;
    margin-right:6px
}
 .insight{
    display:flex;
    gap:12px;
    align-items:center;
    padding:14px;
    border-radius:12px;
    margin-bottom:10px
}
 .insight b{
    display:block
}
.insight span{
    color:var(--muted);
    font-size:13px
}
 .insight .bi-chevron-right{
    margin-left:auto;
    color:var(--muted)
}
 .i-g{
    background:#ecfdf3
}
.i-p{
    background:#f6f0ff
}
.i-y{
    background:#fffbeb
}
.i-b{
    background:#eff6ff
}
 [data-theme=dark] .insight{
    background:rgba(255,255,255,.04)
}
 .tbl-wrap{
    overflow-x:auto
}
 table{
    width:100%;
    border-collapse:collapse;
    min-width:560px
}
 th{
    text-align:left;
    font-size:12px;
    color:var(--muted);
    font-weight:500;
    padding:8px 10px
}
 td{
    padding:12px 10px;
    border-top:1px solid var(--border)
}
 tbody tr:hover{
    background:var(--bg)
}
 .who{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    white-space:nowrap
}
 .badge{
    font-size:12px;
    font-weight:600;
    padding:3px 10px;
    border-radius:99px;
    white-space:nowrap
}
 .b-ok{
    background:#dcfce7;
    color:#15803d
}
.b-ip{
    background:#dbeafe;
    color:#1d4ed8
}
.b-pr{
    background:#fef3c7;
    color:#b45309
}
.b-fail{
    background:#fee2e2;
    color:#b91c1c
}
 .bar{
    height:6px;
    border-radius:9px;
    background:var(--border);
    overflow:hidden;
    flex:1
}
.bar i{
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    border-radius:9px
}
 .row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0
}
 .row+.row{
    border-top:1px solid var(--border)
}
 .row .grow{
    flex:1;
    min-width:0
}
.row small{
    color:var(--muted);
    display:block
}
 .pct{
    width:40px;
    text-align:right;
    font-weight:600
}
 .scrim{
    display:none
}
 .only-m{
    display:none
}
 @media(max-width:1199px){
    .kpis{
        grid-template-columns:repeat(2,1fr)
    }
    .two{
        grid-template-columns:1fr
    }
}
 @media(max-width:991px){
    .sidebar{
        transform:translateX(-100%);
        width:var(--sb-w)!important
    }
    .main,.collapsed .main{
        margin-left:0
    }
     .mobile-open .sidebar{
        transform:none
    }
    .mobile-open .scrim{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.45);
        z-index:45
    }
     .only-m{
        display:grid
    }
    .only-d{
        display:none
    }
    .collapsed .txt,.collapsed .brand,.collapsed .nb,.collapsed .user-card div,.collapsed .btn-upgrade span,.collapsed .logout span{
        display:revert
    }
}
 @media(max-width:575px){
    .content{
        padding:16px
    }
    .topbar{
        padding:0 12px;
        gap:6px
    }
    .kpis{
        grid-template-columns:1fr
    }
    .hide-s{
        display:none!important
    }
    .search kbd{
        display:none
    }
    .btn-primary span{
        display:none
    }
    .btn-primary{
        padding:0 12px
    }
}
/* Brand link, rich dropdowns, modal, toast, customizer */
 input,select,textarea{
    font:inherit
}
 .brand-link{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:0
}
 .collapsed .brand-link{
    justify-content:center
}
 .menu.wide{
    width:360px;
    padding:0;
    overflow:hidden
}
 .mh{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid var(--border)
}
 .ml{
    max-height:340px;
    overflow-y:auto
}
 .menu .ni{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:12px 16px;
    border-radius:0;
    position:relative
}
 .menu .ni+.ni{
    border-top:1px solid var(--border)
}
 .menu .ni.unread{
    background:var(--primary-soft)
}
 .menu .ni.unread::after{
    content:'';
    position:absolute;
    right:16px;
    bottom:14px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--primary)
}
 .ni b{
    display:block;
    font-size:13px
}
.ni .d{
    display:block;
    color:var(--muted);
    font-size:12px;
    padding-right:16px;
    margin-top:2px
}
 .ni .tm{
    color:var(--muted);
    font-size:11px;
    display:block;
    margin-top:4px
}
 .ni .grow{
    flex:1;
    min-width:0
}
.ni .top{
    display:flex;
    justify-content:space-between;
    gap:8px
}
.ni .top .tm{
    margin:0
}
 .clamp{
    display:block;
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding-right:16px;
    margin-top:2px
}
 .avw{
    position:relative;
    flex:none
}
.od{
    position:absolute;
    right:0;
    bottom:0;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--success);
    border:2px solid var(--surface)
}
 .menu .mf{
    display:block;
    text-align:center;
    padding:12px;
    border-top:1px solid var(--border);
    color:var(--primary);
    font-weight:600;
    border-radius:0
}
 .modal-back{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.55);
    display:none;
    place-items:center;
    z-index:80;
    padding:16px
}
 .modal-back.show{
    display:grid
}
 .modal{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    width:100%;
    max-width:460px;
    box-shadow:0 24px 64px rgba(0,0,0,.3)
}
 .modal-h,.modal-f{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 20px
}
 .modal-h{
    border-bottom:1px solid var(--border)
}
.modal-f{
    border-top:1px solid var(--border);
    justify-content:flex-end;
    gap:8px
}
 .modal-b{
    padding:20px;
    display:grid;
    gap:14px
}
 .fld label{
    display:block;
    font-weight:600;
    font-size:13px;
    margin-bottom:6px
}
 .fld input,.fld select,.fld textarea{
    width:100%;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--bg);
    color:var(--text)
}
 .toast{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    background:#0f172a;
    color:#fff;
    padding:10px 16px;
    border-radius:10px;
    z-index:90;
    display:none;
    box-shadow:0 8px 24px rgba(0,0,0,.25)
}
 .cz-btn{
    position:fixed;
    right:0;
    top:45%;
    z-index:60;
    width:42px;
    height:42px;
    background:var(--primary);
    color:#fff;
    border-radius:12px 0 0 12px;
    display:grid;
    place-items:center;
    box-shadow:var(--shadow)
}
 .cz{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:300px;
    max-width:90vw;
    background:var(--surface);
    border-left:1px solid var(--border);
    z-index:75;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .2s,visibility .2s;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:22px;
    overflow-y:auto;
    box-shadow:-12px 0 32px rgba(0,0,0,.12)
}
 .cz.show{
    transform:none;
    visibility:visible
}
 .cz h3{
    font-size:13px;
    margin:0 0 10px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em
}
 .swatches{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center
}
 .sw{
    width:32px;
    height:32px;
    border-radius:50%;
    border:2px solid var(--border)
}
 .sw[aria-checked=true]{
    outline:2px solid var(--primary);
    outline-offset:2px
}
 .cz input[type=color]{
    width:32px;
    height:32px;
    border:0;
    padding:0;
    background:none;
    cursor:pointer
}
 .cz select{
    width:100%;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--bg);
    color:var(--text)
}
 @media(max-width:575px){
    .menu.wide{
        position:fixed;
        left:12px;
        right:12px;
        top:72px;
        width:auto;
        min-width:0
    }
}
/* Sidebar submenu (Dashboards) */
 .nav-parent{
    width:100%;
    text-align:left
}
 .chev{
    font-size:12px;
    transition:transform .2s
}
 .nav-group.open .chev{
    transform:rotate(180deg)
}
 .sub{
    display:none;
    margin:2px 0 6px 24px;
    padding-left:10px;
    border-left:1px solid rgba(255,255,255,.12)
}
 .nav-group.open .sub{
    display:block
}
 .sub-link{
    display:block;
    padding:7px 12px;
    border-radius:8px;
    color:#9fb0d0;
    font-size:13px;
    white-space:nowrap
}
 .sub-link:hover{
    color:#fff;
    background:rgba(255,255,255,.06)
}
 .sub-link.active{
    color:#fff;
    font-weight:600;
    background:rgba(255,255,255,.1)
}
 .nav-group.has-active>.nav-parent{
    background:var(--primary);
    color:#fff
}
 .collapsed .sub,.collapsed .chev{
    display:none
}
 @media(max-width:991px){
    .collapsed .chev{
        display:revert
    }
    .collapsed .nav-group.open .sub{
        display:block
    }
}
/* Footer, misc */
 .main{
    display:flex;
    flex-direction:column;
    min-height:100vh
}
.content{
    flex:1
}
 .footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 20px;
    padding:16px 24px;
    border-top:1px solid var(--border);
    background:var(--surface);
    color:var(--muted);
    font-size:13px
}
 .footer nav{
    display:flex;
    gap:18px;
    flex-wrap:wrap
}
.footer a:hover{
    color:var(--primary)
}
 .dn{
    color:var(--danger);
    font-weight:600
}
 .stack{
    display:flex;
    gap:2px;
    height:10px;
    border-radius:9px;
    overflow:hidden;
    margin:6px 0
}
.stack i{
    display:block
}
 code{
    font-family:ui-monospace,Menlo,monospace;
    font-size:12.5px;
    background:var(--bg);
    padding:2px 6px;
    border-radius:6px
}
 @media(max-width:575px){
    .footer{
        flex-direction:column;
        text-align:center;
        padding:16px
    }
}
/* Inner pages */
 .g2{
    grid-template-columns:repeat(2,1fr)
}
.g3{
    grid-template-columns:repeat(3,1fr)
}
.g4{
    grid-template-columns:repeat(4,1fr)
}
 .pg{
    grid-template-columns:300px minmax(0,1fr)
}
 @media(max-width:1199px){
    .g3{
        grid-template-columns:repeat(2,1fr)
    }
    .g4{
        grid-template-columns:repeat(2,1fr)
    }
}
 @media(max-width:991px){
    .g2,.pg{
        grid-template-columns:1fr
    }
}
 @media(max-width:575px){
    .g3,.g4{
        grid-template-columns:1fr
    }
}
 .sm{
    display:block;
    color:var(--muted);
    font-weight:400;
    font-size:12px
}
 .item p{
    color:var(--muted);
    margin:10px 0
}
.item-h{
    display:flex;
    align-items:center;
    gap:10px
}
 .meta{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:12px;
    margin-top:10px
}
.meta b{
    display:block;
    color:var(--text);
    font-size:13px
}
 .b-n{
    background:var(--bg);
    color:var(--muted)
}
 .fld select,.fld input[type=number],.fld input[type=email]{
    width:100%;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--bg);
    color:var(--text);margin-left: 30px;
}
 .fld input[type=range]{
    padding:0
}
 .tog{
    position:relative;
    width:40px;
    height:22px;
    display:inline-block;
    flex:none
}
.tog input{
    opacity:0;
    position:absolute;
    inset:0;
    cursor:pointer;
    z-index:1;
    margin:0
}
 .tog span{
    position:absolute;
    inset:0;
    background:var(--border);
    border-radius:99px;
    transition:.2s
}
.tog span::after{
    content:'';
    position:absolute;
    top:3px;
    left:3px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    transition:.2s
}
 .tog input:checked+span{
    background:var(--primary)
}
.tog input:checked+span::after{
    transform:translateX(18px)
}
.tog input:focus-visible+span{
    outline:2px solid var(--primary);
    outline-offset:2px
}
 .chat{
    display:flex;
    flex-direction:column;
    min-height:420px
}
.msgs{
    flex:1;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-bottom:12px;
    max-height:380px
}
 .m{
    max-width:80%;
    padding:10px 14px;
    border-radius:12px;
    line-height:1.45
}
.m.bot{
    background:var(--bg);
    align-self:flex-start
}
.m.me{
    background:var(--primary);
    color:#fff;
    align-self:flex-end
}
 .cinput{
    display:flex;
    gap:8px;
    margin-top:8px
}
.cinput input{
    flex:1;
    padding:0 12px;
    height:40px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--bg);
    color:var(--text);
    min-width:0
}
 .plan ul{
    list-style:none;
    padding:0;
    margin:14px 0;
    display:grid;
    gap:8px
}
.plan li::before{
    content:'✓ ';
    color:var(--success);
    font-weight:700
}
 .plan.pop{
    border-color:var(--primary);
    box-shadow:0 0 0 2px var(--primary-soft)
}
 .drop{
    display:grid;
    place-items:center;
    gap:6px;
    text-align:center;
    padding:32px;
    border:2px dashed var(--border)
}
 .nitem{
    display:flex;
    gap:12px;
    align-items:center;
    padding:14px 20px;
    border-top:1px solid var(--border)
}
.nitem.unread{
    background:var(--primary-soft)
}
 .inbox{
    display:grid;
    grid-template-columns:320px minmax(0,1fr)
}
.inbox>div:first-child{
    border-right:1px solid var(--border)
}
.conv{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px
}
 @media(max-width:991px){
    .inbox{
        grid-template-columns:1fr
    }
    .inbox>div:first-child{
        border-right:0;
        border-bottom:1px solid var(--border)
    }
}
 .code{
    background:#0b1220;
    color:#d6e2ff;
    padding:16px;
    border-radius:10px;
    overflow-x:auto;
    font:12.5px/1.6 ui-monospace,Menlo,monospace;
    margin:0
}
 details{
    border-top:1px solid var(--border);
    padding:12px 0
}
summary{
    cursor:pointer;
    font-weight:600
}
 .legal{
    max-width:760px
}
.legal h2{
    font-size:16px;
    margin:18px 0 6px
}
.legal p{
    color:var(--muted);
    line-height:1.6;
    margin:0
}
/* Project overview */
 .avs{
    display:flex
}
.avs .av{
    width:28px;
    height:28px;
    margin-left:-8px;
    border:2px solid var(--surface)
}
.avs .av:first-child{
    margin-left:0
}
 .bar.warn i{
    background:var(--warning)
}
/* Messages inbox */
 .conv{
    padding:0;
    gap:0
}
.conv-h{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 20px;
    border-bottom:1px solid var(--border);
    min-height:68px
}
 .thread{
    height:380px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:20px
}
 .conv .cinput{
    margin:0;
    padding:12px 20px;
    border-top:1px solid var(--border)
}
 .m .t{
    display:block;
    font-size:11px;
    opacity:.7;
    margin-top:4px
}
 .nitem[data-conv]{
    cursor:pointer
}
.nitem.active{
    background:var(--bg);
    box-shadow:inset 3px 0 0 var(--primary)
}
 .inbox-list .clamp{
    max-width:170px;
    padding:0
}
 .typing{
    display:flex;
    gap:4px;
    align-items:center;
    padding:12px 14px
}
.typing i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--muted);
    animation:blink 1s infinite
}
 .typing i:nth-child(2){
    animation-delay:.15s
}
.typing i:nth-child(3){
    animation-delay:.3s
}
 @keyframes blink{
    0%,60%,100%{
        opacity:.3
    }
    30%{
        opacity:1
    }
}
 @media(prefers-reduced-motion:reduce){
    .typing i{
        animation:none
    }
}
/* FAQ accordion */
 .acc-item{
    border-top:1px solid var(--border)
}
.acc-q{
    display:flex;
    width:100%;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:16px 0;
    text-align:left;
    font-weight:600
}
 .acc-q i{
    transition:transform .2s;
    color:var(--muted)
}
.acc-item.open .acc-q i{
    transform:rotate(180deg);
    color:var(--primary)
}
 .acc-a{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .2s
}
.acc-item.open .acc-a{
    grid-template-rows:1fr
}
 .acc-a>div{
    overflow:hidden
}
.acc-a p{
    margin:0 0 16px;
    color:var(--muted);
    line-height:1.6
}
/* Auth pages */
 .auth{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    min-height:100vh;
    background:var(--bg)
}
 .auth-side{
    background:linear-gradient(160deg,var(--sb),color-mix(in srgb,var(--sb) 65%,#2563eb));
    color:#c7d3ee;
    padding:48px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:32px
}
 .auth-side .brand-link{
    flex:none
}
.auth-side h2{
    color:#fff;
    font-size:34px;
    line-height:1.2;
    margin:0 0 20px;
    max-width:420px
}
 .auth-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:12px
}
.auth-list i{
    color:#7dd3fc;
    margin-right:8px
}
 .auth-stats{
    display:flex;
    gap:32px
}
.auth-stats b{
    display:block;
    color:#fff;
    font-size:26px
}
.auth-stats span{
    font-size:13px
}
 .auth-main{
    display:grid;
    place-items:center;
    padding:32px;
    position:relative
}
.auth-theme{
    position:absolute;
    top:20px;
    right:20px
}
 .auth-card{
    width:100%;
    max-width:400px
}
.auth-card h1{
    margin:0 0 6px
}
.auth-logo{
    display:none;
    margin-bottom:24px
}
 .input{
    position:relative
}
.input>i{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted)
}
 .input input{
    width:100%;
    padding:11px 40px 11px 38px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text)
}
 .input input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-soft);
    outline:0
}
 .pw-toggle{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    color:var(--muted)
}
 .auth-card .fld{
    margin-bottom:14px
}
.auth-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px
}
 .chk{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:13px
}
 .form-err{
    color:var(--danger);
    font-size:13px;
    min-height:20px;
    margin-bottom:6px
}
 .btn-primary.block{
    width:100%;
    justify-content:center;
    height:44px
}
.btn-primary:disabled{
    opacity:.7;
    cursor:default
}
 .divider{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:12px;
    margin:20px 0
}
.divider::before,.divider::after{
    content:'';
    flex:1;
    border-top:1px solid var(--border)
}
 .socials{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.socials .btn-line{
    justify-content:center;
    height:42px
}
 .auth-foot{
    text-align:center;
    color:var(--muted);
    margin:22px 0 0
}
 @media(max-width:991px){
    .auth{
        grid-template-columns:1fr
    }
    .auth-side{
        display:none
    }
    .auth-logo{
        display:flex
    }
}