*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:36px
}
.brand-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 13px;
  overflow: hidden;
  background: #f0e9ff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.brand-icon img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover;
  display: block;
}
.brand h2{
    font-size:15px;
    line-height:1.3;
    font-weight:700
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    position:relative
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
    width:100%
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:700
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:24px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085
}
.top-actions{
    display:flex;
    align-items:center;
    gap:16px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:700;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center
}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:24px
}
.page-header h1{
    font-size:30px;
    margin-bottom:8px
}
.page-header p{
    color:#667085;
    font-size:14px
}
.date-filter{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 16px;
    font-weight:600;
    color:#475467
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
    margin-bottom:20px
}
.card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04)
}
.stat-card{
    display:flex;
    align-items:center;
    gap:14px
}
.stat-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:22px;
    flex-shrink:0
}
.purple{
    background:linear-gradient(135deg,#7c3aed,#4f46e5)
}
.teal{
    background:linear-gradient(135deg,#14b8a6,#06b6d4)
}
.blue{
    background:linear-gradient(135deg,#2563eb,#4f46e5)
}
.orange{
    background:linear-gradient(135deg,#fb923c,#f97316)
}
.stat-info span{
    font-size:12px;
    color:#667085;
    font-weight:600
}
.stat-info h3{
    font-size:22px;
    margin:6px 0
}
.trend{
    font-size:12px;
    color:#059669;
    font-weight:700
}
.dashboard-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr 1.2fr;
    gap:20px;
    margin-bottom:20px
}
.card-title{
    font-size:17px;
    font-weight:800;
    margin-bottom:18px
}
.donut{
    width:150px;
    height:150px;
    border-radius:50%;
    background:conic-gradient(#6c3cff 0 92%,#e5e7eb 92% 100%);
    display:grid;
    place-items:center;
    margin:auto
}
.donut-inner{
    width:104px;
    height:104px;
    background:#fff;
    border-radius:50%;
    display:grid;
    place-items:center;
    text-align:center
}
.donut-inner h2{
    font-size:28px
}
.donut-inner span{
    font-size:12px;
    color:#667085
}
.legend{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:13px;
    color:#475467
}
.legend-row{
    display:flex;
    align-items:center;
    gap:8px
}
.dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#6c3cff
}
.status-box{
    border:1px solid #e5e7eb;
    padding:14px;
    border-radius:14px;
    margin-bottom:12px;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.status-box small{
    color:#059669;
    font-weight:700
}
.switch{
    width:46px;
    height:26px;
    border-radius:999px;
    background:#10b981;
    position:relative
}
.switch::after{
    content:"";
    position:absolute;
    right:3px;
    top:3px;
    width:20px;
    height:20px;
    background:#fff;
    border-radius:50%
}
.usage-progress{
    height:10px;
    background:#e5e7eb;
    border-radius:99px;
    overflow:hidden;
    margin:18px 0
}
.usage-progress span{
    display:block;
    height:100%;
    width:68%;
    background:linear-gradient(90deg,#7c3aed,#2563eb)
}
.bottom-grid{
    display:grid;
    grid-template-columns:1.1fr 1.2fr;
    gap:20px
}
table{
    width:100%;
    border-collapse:collapse;
    font-size:13px
}
th{
    text-align:left;
    color:#667085;
    font-size:12px;
    padding:12px 8px;
    border-bottom:1px solid #e5e7eb
}
td{
    padding:14px 8px;
    border-bottom:1px solid #f1f5f9
}
.status{
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700
}
.resolved{
    background:#dcfce7;
    color:#15803d
}
.handover{
    background:#ffedd5;
    color:#c2410c
}
.chart{
    height:230px;
    background:linear-gradient(to top,rgba(108,60,255,0.10),transparent),repeating-linear-gradient( to top,#fff 0,#fff 44px,#eef2f7 45px );
    border-radius:14px;
    position:relative;
    overflow:hidden
}
.chart svg{
    width:100%;
    height:100%
}
.mini-summary{
    margin-top:18px;
    background:#f4f0ff;
    border-radius:14px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    font-size:14px
}
.mini-summary strong{
    font-size:18px
}
@media (max-width:1200px){
    .stats-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .dashboard-grid,.bottom-grid{
        grid-template-columns:1fr
    }
}
@media (max-width:768px){
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .app{
        flex-direction:column
    }
    .main{
        margin-left:0;
        width:100%
    }
    .topbar,.page-header{
        flex-direction:column;
        gap:16px;
        align-items:flex-start
    }
    .search{
        width:100%
    }
    .stats-grid{
        grid-template-columns:1fr
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px
}
.brand-icon{
    width:44px;
    height:44px;
    background:#22c55e;
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:22px
}
.brand h2{
    font-size:15px;
    line-height:1.35;
    font-weight:800
}
.spark{
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:18px
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:700
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(108,60,255,0.22)
}
.btn-primary.full{
    width:100%
}
.btn-secondary{
    background:#fff;
    color:#344054;
    border:1px solid #e5e7eb;
    padding:11px 16px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer
}
.btn-soft{
    background:#f4f0ff;
    color:#5b2eff;
    border:1px solid #e9d5ff;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    flex-shrink:0
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px 28px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085;
    outline:none
}
.top-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:800;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    cursor:pointer
}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:24px
}
.page-header h1{
    font-size:30px;
    margin-bottom:8px;
    letter-spacing:-0.5px
}
.page-header p{
    color:#667085;
    font-size:14px
}
.help-link{
    color:#475467;
    font-size:14px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px
}
.stepper{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:18px 22px;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04);
    margin-bottom:22px
}
.step{
    display:flex;
    align-items:center;
    gap:8px;
    color:#98a2b3;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
    position:relative
}
.step:not(:last-child)::after{
    content:"";
    height:2px;
    background:#e5e7eb;
    flex:1;
    margin-left:8px
}
.step.done,.step.current{
    color:#101828
}
.step-circle{
    width:26px;
    height:26px;
    border-radius:50%;
    border:1px solid #d0d5dd;
    display:grid;
    place-items:center;
    font-size:12px;
    background:#fff;
    color:#98a2b3;
    flex-shrink:0
}
.step.done .step-circle,.step.current .step-circle{
    background:#6c3cff;
    color:#fff;
    border-color:#6c3cff
}
.setup-grid{
    display:grid;
    grid-template-columns:1.25fr 0.95fr;
    gap:22px;
    margin-bottom:18px
}
.card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04)
}
.card-title{
    font-size:17px;
    font-weight:800;
    margin-bottom:16px
}
.checklist{
    overflow:hidden;
    border:1px solid #edf0f5;
    border-radius:15px
}
.check-row{
    display:grid;
    grid-template-columns:34px 1fr 1.4fr auto 20px;
    align-items:center;
    gap:12px;
    padding:16px;
    border-bottom:1px solid #edf0f5;
    font-size:14px
}
.check-row:last-child{
    border-bottom:0
}
.check-row.current{
    background:#faf7ff
}
.check-icon{
    width:26px;
    height:26px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    border:1px solid #d0d5dd;
    color:#667085;
    font-weight:800;
    font-size:12px
}
.check-icon.done{
    background:#12b76a;
    color:#fff;
    border-color:#12b76a
}
.check-icon.current{
    background:#6c3cff;
    color:#fff;
    border-color:#6c3cff
}
.check-row strong{
    font-size:14px
}
.check-row p{
    color:#667085;
    font-size:13px
}
.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:800
}
.pill.success{
    background:#dcfce7;
    color:#15803d
}
.pill.warning{
    background:#fff7ed;
    color:#c2410c
}
.pill.locked{
    background:#f2f4f7;
    color:#667085
}
.small-action{
    border:1px solid #e5e7eb;
    background:#fff;
    padding:8px 13px;
    border-radius:9px;
    font-weight:800;
    cursor:pointer;
    color:#344054
}
.small-action.primary{
    background:#6c3cff;
    border-color:#6c3cff;
    color:#fff
}
.notice{
    background:#f4f0ff;
    color:#5b2eff;
    padding:13px 16px;
    font-size:13px;
    font-weight:700
}
.preview-card .card-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px
}
.chat-preview{
    overflow:hidden;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff
}
.chat-head{
    background:linear-gradient(135deg,#7c3aed,#4f46e5);
    color:#fff;
    padding:22px;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.chat-head h3{
    font-size:20px;
    margin-bottom:5px
}
.online{
    color:#dcfce7;
    font-size:13px;
    font-weight:700
}
.bot-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:rgba(255,255,255,0.2);
    display:grid;
    place-items:center;
    font-size:28px
}
.chat-body{
    padding:18px
}
.quick-question{
    width:fit-content;
    max-width:100%;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:11px 14px;
    margin-bottom:10px;
    font-size:13px;
    font-weight:700;
    color:#344054;
    background:#fff
}
.chat-input{
    margin-top:18px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:13px 14px;
    color:#98a2b3;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px
}
.preview-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    color:#667085;
    margin-top:14px
}
.preview-footer a{
    color:#5b2eff;
    font-weight:800;
    text-decoration:none
}
.bottom-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:18px;
    margin-bottom:24px
}
.field-label{
    display:block;
    font-size:13px;
    color:#344054;
    font-weight:800;
    margin-bottom:8px
}
.input-row{
    display:flex;
    gap:10px;
    margin-bottom:16px
}
.input{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:12px 13px;
    color:#667085;
    outline:none;
    background:#fff
}
.select{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:12px 13px;
    color:#344054;
    background:#fff;
    width:100%;
    font-weight:700
}
.mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.channel-row,.permission-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px;
    border:1px solid #edf0f5;
    border-radius:12px;
    margin-bottom:10px;
    font-size:14px;
    font-weight:700
}
.permission-row{
    justify-content:flex-start;
    gap:10px;
    border:0;
    padding:6px 0;
    color:#344054;
    font-size:13px
}
.link{
    color:#5b2eff;
    font-weight:800;
    text-decoration:none;
    font-size:13px
}
.actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:8px
}
.right-actions{
    display:flex;
    gap:12px
}
@media (max-width:1250px){
    .stepper{
        overflow-x:auto;
        grid-template-columns:repeat(7,minmax(150px,1fr))
    }
    .setup-grid,.bottom-grid{
        grid-template-columns:1fr
    }
}
@media (max-width:768px){
    .app{
        flex-direction:column
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .main{
        margin-left:0;
        width:100%;
        padding:18px
    }
    .topbar,.page-header,.actions{
        flex-direction:column;
        align-items:flex-start;
        gap:16px
    }
    .search{
        width:100%
    }
    .top-actions{
        flex-wrap:wrap
    }
    .right-actions{
        width:100%;
        flex-direction:column
    }
    .right-actions button,.actions>button{
        width:100%
    }
    .check-row{
        grid-template-columns:32px 1fr
    }
    .check-row p,.check-row button,.check-row span.pill,.check-row>span:last-child{
        grid-column:2
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:50
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px
}
.brand-icon{
    width:44px;
    height:44px;
    background:#22c55e;
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:22px
}
.brand h2{
    font-size:15px;
    line-height:1.35;
    font-weight:800
}
.spark{
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:18px
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:700
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(108,60,255,0.22)
}
.btn-primary.full{
    width:100%
}
.btn-secondary{
    background:#fff;
    color:#344054;
    border:1px solid #e5e7eb;
    padding:11px 16px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    flex-shrink:0
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px 28px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085;
    outline:none
}
.top-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:800;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    cursor:pointer
}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px
}
.page-header h1{
    font-size:30px;
    margin-bottom:8px;
    letter-spacing:-0.5px
}
.page-header p{
    color:#667085;
    font-size:14px
}
.preview-actions{
    display:flex;
    align-items:center;
    gap:10px
}
.device-toggle{
    display:flex;
    background:#fff;
    border:1px solid #e5e7eb;
    padding:5px;
    border-radius:12px;
    gap:6px
}
.device-btn{
    width:42px;
    height:34px;
    border-radius:9px;
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:16px
}
.device-btn.active{
    background:#f0e9ff;
    color:#5b2eff
}
.content-grid{
    display:grid;
    grid-template-columns:1fr 310px;
    gap:22px
}
.store-preview{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 24px rgba(16,24,40,0.04);
    position:relative;
    min-height:760px
}
.store-top-banner{
    background:#f5f2ec;
    text-align:center;
    padding:9px;
    font-size:12px;
    color:#667085;
    font-weight:700
}
.store-nav{
    height:76px;
    padding:0 38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #f1f5f9
}
.store-logo{
    font-size:20px;
    font-weight:900;
    letter-spacing:2px
}
.store-links{
    display:flex;
    gap:26px;
    font-size:14px;
    font-weight:700;
    color:#344054
}
.store-icons{
    display:flex;
    gap:18px;
    font-size:20px
}
.hero{
    margin:28px;
    border-radius:18px;
    overflow:hidden;
    min-height:330px;
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    background:linear-gradient(135deg,#f4ecdf,#fbfaf8)
}
.hero-copy{
    padding:48px;
    display:flex;
    justify-content:center;
    flex-direction:column
}
.hero-copy h2{
    font-family:Georgia,serif;
    font-size:40px;
    line-height:1.2;
    font-weight:500;
    margin-bottom:18px
}
.hero-copy p{
    color:#475467;
    line-height:1.6;
    max-width:340px;
    margin-bottom:26px
}
.hero-copy button{
    width:fit-content;
    background:#111827;
    color:#fff;
    border:none;
    padding:13px 22px;
    border-radius:8px;
    font-weight:800;
    cursor:pointer
}
.hero-image{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    position:relative
}
.rack{
    width:310px;
    height:230px;
    border-top:7px solid #1f2937;
    border-left:6px solid #1f2937;
    border-right:6px solid #1f2937;
    position:relative
}
.clothes{
    display:flex;
    gap:12px;
    position:absolute;
    top:22px;
    left:24px
}
.cloth{
    width:42px;
    height:160px;
    border-radius:18px 18px 8px 8px;
    background:#d6b892;
    box-shadow:inset 0 0 18px rgba(0,0,0,0.08)
}
.cloth:nth-child(2){
    background:#f1dfc8
}
.cloth:nth-child(3){
    background:#b88755
}
.cloth:nth-child(4){
    background:#ede6da
}
.cloth:nth-child(5){
    background:#6b4f3b
}
.cloth:nth-child(6){
    background:#111827
}
.plant{
    position:absolute;
    left:10px;
    bottom:32px;
    width:70px;
    height:90px;
    background:#d9c6a5;
    border-radius:0 0 30px 30px
}
.plant::before{
    content:"🌿";
    position:absolute;
    top:-58px;
    left:-14px;
    font-size:70px
}
.products-section{
    padding:0 28px 28px
}
.products-section h3{
    font-size:18px;
    margin-bottom:18px
}
.products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.product-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:12px;
    background:#fff;
    position:relative
}
.product-badge{
    position:absolute;
    top:10px;
    left:10px;
    background:#111827;
    color:#fff;
    border-radius:999px;
    padding:4px 8px;
    font-size:10px;
    font-weight:800
}
.product-badge.sale{
    background:#ef4444
}
.product-image{
    height:150px;
    border-radius:12px;
    background:linear-gradient(135deg,#efe6d8,#faf7f1);
    display:grid;
    place-items:center;
    font-size:54px;
    margin-bottom:12px
}
.product-card h4{
    font-size:13px;
    margin-bottom:6px
}
.product-card strong{
    font-size:14px
}
.rating{
    margin-top:8px;
    color:#f59e0b;
    font-size:12px
}
.store-benefits{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    padding:18px 28px 26px;
    border-top:1px solid #f1f5f9;
    font-size:12px;
    color:#475467
}
.store-benefits strong{
    display:block;
    color:#101828;
    margin-bottom:3px
}
.chat-widget{
    position:absolute;
    right:28px;
    top:145px;
    width:350px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    box-shadow:0 24px 60px rgba(16,24,40,0.18);
    z-index:10
}
.chat-header{
    background:linear-gradient(135deg,#7c3aed,#4f46e5);
    color:#fff;
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.assistant-info{
    display:flex;
    align-items:center;
    gap:10px
}
.bot-avatar{
    width:36px;
    height:36px;
    background:#fff;
    color:#6c3cff;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:18px
}
.chat-header h4{
    font-size:14px
}
.chat-header p{
    font-size:12px;
    color:#dcfce7;
    margin-top:2px
}
.chat-controls{
    display:flex;
    gap:12px;
    font-size:18px;
    cursor:pointer
}
.chat-body{
    padding:14px;
    max-height:520px;
    overflow-y:auto;
    background:#fff
}
.message{
    display:flex;
    gap:8px;
    margin-bottom:12px
}
.message.user{
    justify-content:flex-end
}
.bubble{
    max-width:82%;
    padding:11px 12px;
    border-radius:14px;
    font-size:12px;
    line-height:1.45;
    position:relative
}
.bubble.ai{
    background:#f2f4f7;
    color:#344054;
    border-top-left-radius:6px
}
.bubble.user{
    background:#6c3cff;
    color:#fff;
    border-top-right-radius:6px
}
.time{
    display:block;
    font-size:10px;
    opacity:0.75;
    margin-top:5px;
    text-align:right
}
.quick-buttons{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:8px 0 14px 44px
}
.quick-buttons button{
    background:#fff;
    color:#6c3cff;
    border:1px solid #ddd6fe;
    padding:8px 10px;
    border-radius:9px;
    font-size:11px;
    font-weight:800;
    cursor:pointer
}
.mini-products{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:10px
}
.mini-product{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:7px;
    text-align:center
}
.mini-product .pic{
    height:58px;
    border-radius:8px;
    background:#f5efe5;
    display:grid;
    place-items:center;
    font-size:24px;
    margin-bottom:5px
}
.mini-product h5{
    font-size:10px;
    margin-bottom:2px
}
.mini-product p{
    font-size:10px;
    color:#344054;
    font-weight:800
}
.mini-product a{
    display:inline-block;
    margin-top:4px;
    font-size:10px;
    color:#5b2eff;
    font-weight:800;
    text-decoration:none
}
.order-card{
    background:#fff;
    border:1px solid #ddd6fe;
    border-radius:12px;
    margin-top:8px;
    padding:10px
}
.order-card strong{
    color:#101828;
    display:block;
    margin-bottom:5px
}
.order-card small{
    display:block;
    margin-bottom:8px;
    color:#475467
}
.order-card button,.policy-btn{
    width:100%;
    border:1px solid #ddd6fe;
    background:#fff;
    color:#5b2eff;
    border-radius:9px;
    padding:8px;
    font-size:11px;
    font-weight:800;
    cursor:pointer
}
.chat-footer-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:12px 14px 0;
    border-top:1px solid #f1f5f9
}
.chat-footer-actions button{
    border:1px solid #e5e7eb;
    background:#fff;
    border-radius:9px;
    padding:9px;
    font-size:11px;
    font-weight:800;
    color:#344054;
    cursor:pointer
}
.chat-input-area{
    padding:12px 14px 14px;
    display:flex;
    gap:8px;
    align-items:center
}
.chat-input-area input{
    flex:1;
    border:1px solid #e5e7eb;
    padding:11px;
    border-radius:10px;
    outline:none;
    font-size:12px
}
.send-btn{
    width:40px;
    height:40px;
    border-radius:10px;
    border:none;
    background:#6c3cff;
    color:#fff;
    font-weight:900;
    cursor:pointer
}
.powered{
    text-align:center;
    font-size:10px;
    color:#667085;
    padding-bottom:12px
}
.settings-panel{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04);
    padding:20px;
    align-self:start
}
.settings-panel h3{
    font-size:18px;
    margin-bottom:6px
}
.settings-panel>p{
    color:#667085;
    font-size:13px;
    line-height:1.5;
    margin-bottom:20px
}
.setting-group{
    border-bottom:1px solid #f1f5f9;
    padding:16px 0
}
.setting-group:first-of-type{
    padding-top:0
}
.setting-group h4{
    font-size:13px;
    margin-bottom:6px
}
.setting-group p{
    color:#667085;
    font-size:12px;
    margin-bottom:10px
}
.color-input{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:9px
}
.color-box{
    width:42px;
    height:28px;
    border-radius:7px;
    background:#6c3cff
}
.field,.select-field{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:12px;
    font-size:13px;
    color:#344054;
    outline:none;
    background:#fff
}
.toggle-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    font-size:13px;
    font-weight:700;
    color:#344054
}
.switch{
    width:44px;
    height:24px;
    background:#10b981;
    border-radius:999px;
    position:relative;
    flex-shrink:0
}
.switch::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    right:3px;
    top:3px
}
.quick-list{
    display:flex;
    flex-direction:column;
    gap:8px
}
.quick-item{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:10px;
    font-size:13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:700
}
.add-link{
    color:#5b2eff;
    font-size:13px;
    font-weight:800;
    margin-top:10px;
    display:inline-block;
    text-decoration:none
}
.panel-actions{
    padding-top:16px;
    display:flex;
    flex-direction:column;
    gap:10px
}
@media (max-width:1280px){
    .content-grid{
        grid-template-columns:1fr
    }
    .settings-panel{
        order:-1
    }
    .chat-widget{
        position:relative;
        top:auto;
        right:auto;
        width:calc(100% - 56px);
        margin:20px 28px 28px
    }
    .store-preview{
        min-height:auto
    }
}
@media (max-width:900px){
    .app{
        flex-direction:column
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .main{
        margin-left:0;
        width:100%;
        padding:18px
    }
    .topbar,.page-header{
        flex-direction:column;
        align-items:flex-start;
        gap:16px
    }
    .search{
        width:100%
    }
    .top-actions,.preview-actions{
        flex-wrap:wrap
    }
    .hero{
        grid-template-columns:1fr
    }
    .products{
        grid-template-columns:repeat(2,1fr)
    }
    .store-links{
        display:none
    }
    .store-benefits{
        grid-template-columns:repeat(2,1fr)
    }
    .chat-widget{
        width:calc(100% - 30px);
        margin:15px
    }
}
@media (max-width:540px){
    .products{
        grid-template-columns:1fr
    }
    .store-benefits{
        grid-template-columns:1fr
    }
    .hero-copy{
        padding:30px
    }
    .hero-copy h2{
        font-size:32px
    }
    .chat-footer-actions{
        grid-template-columns:1fr
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px
}
.brand-icon{
    width:44px;
    height:44px;
    background:#22c55e;
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:22px
}
.brand h2{
    font-size:15px;
    line-height:1.35;
    font-weight:800
}
.spark{
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:18px
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:700
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(108,60,255,0.22)
}
.btn-primary.full{
    width:100%
}
.btn-secondary{
    background:#fff;
    color:#344054;
    border:1px solid #e5e7eb;
    padding:11px 16px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    flex-shrink:0
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px 28px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085;
    outline:none
}
.top-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:800;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    cursor:pointer
}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px
}
.page-header h1{
    font-size:30px;
    margin-bottom:8px;
    letter-spacing:-0.5px
}
.page-header p{
    color:#667085;
    font-size:14px
}
.header-actions{
    display:flex;
    gap:12px
}
.training-layout{
    display:grid;
    grid-template-columns:1fr 330px;
    gap:22px
}
.card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04)
}
.progress-card{
    margin-bottom:20px;
    display:grid;
    grid-template-columns:1fr 220px;
    gap:28px;
    align-items:center
}
.card-title{
    font-size:17px;
    font-weight:800;
    margin-bottom:14px
}
.progress-number{
    font-size:34px;
    color:#6c3cff;
    font-weight:900;
    margin-right:8px
}
.progress-label{
    font-size:15px;
    color:#475467;
    font-weight:700
}
.progress-bar{
    height:10px;
    border-radius:999px;
    background:#e5e7eb;
    overflow:hidden;
    margin:16px 0
}
.progress-bar span{
    display:block;
    height:100%;
    width:78%;
    background:linear-gradient(90deg,#7c3aed,#4f46e5);
    border-radius:999px
}
.progress-meta{
    display:flex;
    align-items:center;
    gap:12px;
    color:#667085;
    font-size:13px;
    font-weight:700
}
.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:800
}
.success{
    background:#dcfce7;
    color:#15803d
}
.warning{
    background:#fff7ed;
    color:#c2410c
}
.purple-pill{
    background:#f0e9ff;
    color:#5b2eff
}
.auto-train{
    border-left:1px solid #e5e7eb;
    padding-left:24px
}
.auto-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px
}
.auto-row strong{
    font-size:14px
}
.auto-train p{
    color:#667085;
    font-size:13px;
    line-height:1.5;
    margin-bottom:14px
}
.switch{
    width:46px;
    height:26px;
    background:#10b981;
    border-radius:999px;
    position:relative;
    flex-shrink:0
}
.switch::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background:#fff;
    border-radius:50%;
    right:3px;
    top:3px
}
.link{
    color:#5b2eff;
    font-size:13px;
    font-weight:800;
    text-decoration:none
}
.module-list{
    overflow:hidden;
    padding:0
}
.module-row{
    display:grid;
    grid-template-columns:56px 1.4fr 170px 150px 100px;
    gap:16px;
    align-items:center;
    padding:20px;
    border-bottom:1px solid #edf0f5
}
.module-row:last-child{
    border-bottom:none
}
.module-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:22px;
    background:#f0e9ff;
    color:#6c3cff
}
.module-icon.orange{
    background:#fff7ed;
    color:#f97316
}
.module-icon.green{
    background:#ecfdf5;
    color:#10b981
}
.module-icon.blue{
    background:#eff6ff;
    color:#2563eb
}
.module-title h3{
    font-size:15px;
    margin-bottom:6px
}
.module-title p{
    font-size:12px;
    line-height:1.45;
    color:#667085
}
.module-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.module-stats small{
    display:block;
    color:#667085;
    font-size:11px;
    margin-bottom:4px
}
.module-stats strong{
    font-size:18px
}
.module-status small{
    display:block;
    color:#667085;
    margin-top:6px;
    font-size:12px
}
.small-action{
    border:1px solid #e5e7eb;
    background:#fff;
    padding:9px 13px;
    border-radius:9px;
    font-weight:800;
    cursor:pointer;
    color:#344054
}
.history-link{
    text-align:center;
    border-top:1px solid #edf0f5;
    padding:18px
}
.right-column{
    display:flex;
    flex-direction:column;
    gap:18px
}
.score-card{
    display:grid;
    grid-template-columns:125px 1fr;
    gap:18px;
    align-items:center
}
.score-ring{
    width:124px;
    height:124px;
    border-radius:50%;
    background:conic-gradient(#6c3cff 0 84%,#e9d5ff 84% 100%);
    display:grid;
    place-items:center
}
.score-inner{
    width:86px;
    height:86px;
    border-radius:50%;
    background:#fff;
    display:grid;
    place-items:center;
    text-align:center
}
.score-inner h2{
    font-size:28px
}
.score-inner span{
    color:#667085;
    font-size:12px
}
.score-info h3{
    color:#16a34a;
    margin-bottom:8px;
    font-size:20px
}
.score-info p{
    color:#667085;
    font-size:13px;
    line-height:1.5
}
.score-list{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:11px;
    font-size:13px;
    color:#475467;
    font-weight:700
}
.answer-preview{
    background:#faf7ff;
    border-radius:12px;
    padding:12px;
    color:#5b2eff;
    font-size:13px;
    font-weight:800;
    margin-bottom:16px
}
.ai-answer{
    font-size:13px;
    line-height:1.65;
    color:#344054;
    margin-bottom:16px
}
.answer-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}
.tip-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff
}
.tip-card h3{
    font-size:15px;
    margin-bottom:8px
}
.tip-card p{
    color:#667085;
    font-size:13px;
    line-height:1.5;
    margin-bottom:14px
}
@media (max-width:1250px){
    .training-layout{
        grid-template-columns:1fr
    }
    .module-row{
        grid-template-columns:56px 1fr
    }
    .module-stats,.module-status,.module-row button{
        grid-column:2
    }
}
@media (max-width:900px){
    .app{
        flex-direction:column
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .main{
        margin-left:0;
        width:100%;
        padding:18px
    }
    .topbar,.page-header{
        flex-direction:column;
        align-items:flex-start;
        gap:16px
    }
    .search{
        width:100%
    }
    .top-actions,.header-actions{
        flex-wrap:wrap
    }
    .progress-card{
        grid-template-columns:1fr
    }
    .auto-train{
        border-left:none;
        border-top:1px solid #e5e7eb;
        padding-left:0;
        padding-top:18px
    }
    .score-card{
        grid-template-columns:1fr
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px
}
.brand-icon{
    width:44px;
    height:44px;
    background:#22c55e;
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:22px
}
.brand h2{
    font-size:15px;
    line-height:1.35;
    font-weight:800
}
.spark{
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:18px
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:700
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(108,60,255,0.22)
}
.btn-primary.full{
    width:100%
}
.btn-secondary{
    background:#fff;
    color:#344054;
    border:1px solid #e5e7eb;
    padding:11px 16px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    flex-shrink:0
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px 28px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085;
    outline:none
}
.top-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:800;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    cursor:pointer
}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px
}
.page-header h1{
    font-size:30px;
    margin-bottom:8px;
    letter-spacing:-0.5px
}
.page-header p{
    color:#667085;
    font-size:14px;
    max-width:720px;
    line-height:1.5
}
.header-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
.content-layout{
    display:grid;
    grid-template-columns:1fr 330px;
    gap:22px
}
.card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04)
}
.card-title{
    font-size:17px;
    font-weight:800;
    margin-bottom:14px
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:20px
}
.stat-card{
    display:flex;
    gap:14px;
    align-items:flex-start
}
.stat-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:22px;
    flex-shrink:0
}
.stat-icon.purple{
    background:#f0e9ff;
    color:#6c3cff
}
.stat-icon.green{
    background:#ecfdf5;
    color:#10b981
}
.stat-icon.orange{
    background:#fff7ed;
    color:#f97316
}
.stat-icon.blue{
    background:#eff6ff;
    color:#2563eb
}
.stat-info span{
    color:#667085;
    font-size:12px;
    font-weight:800
}
.stat-info h3{
    font-size:24px;
    margin:6px 0
}
.trend{
    color:#059669;
    font-size:12px;
    font-weight:800
}
.stat-link{
    color:#5b2eff;
    font-size:12px;
    font-weight:800;
    text-decoration:none
}
.table-card{
    padding:0;
    overflow:hidden
}
.table-toolbar{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:18px;
    border-bottom:1px solid #edf0f5
}
.product-search{
    flex:1;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 14px;
    outline:none;
    color:#667085
}
.filter-actions{
    display:flex;
    gap:10px
}
.select,.small-btn{
    border:1px solid #e5e7eb;
    background:#fff;
    padding:11px 14px;
    border-radius:10px;
    font-weight:800;
    color:#344054;
    cursor:pointer
}
.table-wrap{
    overflow-x:auto
}
table{
    width:100%;
    border-collapse:collapse;
    min-width:920px
}
th{
    text-align:left;
    color:#667085;
    font-size:12px;
    padding:14px 16px;
    background:#fcfcfd;
    border-bottom:1px solid #edf0f5;
    font-weight:800
}
td{
    padding:14px 16px;
    border-bottom:1px solid #f1f5f9;
    font-size:13px;
    color:#344054;
    vertical-align:middle
}
.product-cell{
    display:flex;
    align-items:center;
    gap:12px
}
.check{
    width:16px;
    height:16px;
    accent-color:#6c3cff
}
.product-img{
    width:46px;
    height:46px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#f4ecdf,#fff);
    font-size:22px;
    border:1px solid #e5e7eb;
    flex-shrink:0
}
.product-name strong{
    display:block;
    font-size:13px;
    color:#101828;
    margin-bottom:3px
}
.product-name span{
    font-size:11px;
    color:#667085
}
.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap
}
.success{
    background:#dcfce7;
    color:#15803d
}
.warning{
    background:#fff7ed;
    color:#c2410c
}
.danger{
    background:#fee2e2;
    color:#b91c1c
}
.purple-pill{
    background:#f0e9ff;
    color:#5b2eff
}
.blue-pill{
    background:#eff6ff;
    color:#2563eb
}
.gray-pill{
    background:#f2f4f7;
    color:#667085
}
.table-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 18px;
    font-size:13px;
    color:#667085;
    flex-wrap:wrap;
    gap:12px
}
.pagination{
    display:flex;
    align-items:center;
    gap:8px
}
.page{
    min-width:32px;
    height:32px;
    border-radius:8px;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    color:#344054;
    font-weight:800;
    background:#fff
}
.page.active{
    background:#6c3cff;
    color:#fff;
    border-color:#6c3cff
}
.rules-panel{
    position:sticky;
    top:24px;
    align-self:start
}
.rules-panel>p{
    color:#667085;
    font-size:13px;
    line-height:1.5;
    margin-bottom:16px
}
.toggle-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px
}
.switch{
    width:46px;
    height:26px;
    background:#10b981;
    border-radius:999px;
    position:relative;
    flex-shrink:0
}
.switch::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background:#fff;
    border-radius:50%;
    right:3px;
    top:3px
}
.rule-group{
    border-top:1px solid #f1f5f9;
    padding:16px 0
}
.rule-group h4{
    font-size:13px;
    margin-bottom:6px
}
.rule-group p{
    color:#667085;
    font-size:12px;
    line-height:1.5;
    margin-bottom:10px
}
.tag-box{
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:10px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    min-height:46px
}
.tag{
    background:#f0e9ff;
    color:#5b2eff;
    padding:6px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:800
}
.input-row{
    display:grid;
    grid-template-columns:1fr 20px 1fr;
    gap:8px;
    align-items:center
}
.input{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:11px;
    outline:none;
    font-weight:700;
    color:#344054
}
.rule-select{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:11px;
    font-weight:800;
    color:#344054;
    background:#fff
}
.checkbox-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    font-size:13px;
    font-weight:700;
    color:#344054
}
.checkbox-row input{
    accent-color:#6c3cff
}
.rule-note{
    background:#faf7ff;
    border:1px solid #e9d5ff;
    border-radius:14px;
    padding:14px;
    color:#5b2eff;
    font-size:12px;
    line-height:1.6;
    margin-top:16px;
    font-weight:700
}
@media (max-width:1280px){
    .content-layout{
        grid-template-columns:1fr
    }
    .rules-panel{
        position:static
    }
    .stats-grid{
        grid-template-columns:repeat(2,1fr)
    }
}
@media (max-width:900px){
    .app{
        flex-direction:column
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .main{
        margin-left:0;
        width:100%;
        padding:18px
    }
    .topbar,.page-header,.table-toolbar{
        flex-direction:column;
        align-items:flex-start;
        gap:16px
    }
    .search,.product-search{
        width:100%
    }
    .top-actions,.header-actions,.filter-actions{
        flex-wrap:wrap
    }
    .stats-grid{
        grid-template-columns:1fr
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px
}
.brand-icon{
    width:44px;
    height:44px;
    background:#22c55e;
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:22px
}
.brand h2{
    font-size:15px;
    line-height:1.35;
    font-weight:800
}
.spark{
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:18px
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:700
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(108,60,255,0.22)
}
.btn-primary.full{
    width:100%
}
.btn-secondary{
    background:#fff;
    color:#344054;
    border:1px solid #e5e7eb;
    padding:11px 16px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    flex-shrink:0
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px 28px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085;
    outline:none
}
.top-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:800;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    cursor:pointer
}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:20px;
    gap:18px
}
.page-header h1{
    font-size:30px;
    margin-bottom:8px;
    letter-spacing:-0.5px
}
.page-header p{
    color:#667085;
    font-size:14px;
    line-height:1.5
}
.date-filter{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 16px;
    font-weight:800;
    color:#475467;
    white-space:nowrap
}
.tabs-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:20px
}
.tabs{
    display:flex;
    gap:22px;
    border-bottom:1px solid #e5e7eb;
    flex:1;
    overflow-x:auto
}
.tab{
    padding:13px 0;
    color:#667085;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
    border-bottom:3px solid transparent
}
.tab.active{
    color:#5b2eff;
    border-bottom-color:#6c3cff
}
.tab-buttons{
    display:flex;
    gap:12px;
    flex-shrink:0
}
.content-layout{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:22px
}
.card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04)
}
.card-title{
    font-size:17px;
    font-weight:800;
    margin-bottom:6px
}
.card-subtitle{
    color:#667085;
    font-size:13px;
    line-height:1.5;
    margin-bottom:18px
}
.faq-toolbar{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
    flex-wrap:wrap
}
.faq-search{
    flex:1;
    min-width:240px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 14px;
    outline:none;
    color:#667085
}
.filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.select,.small-btn{
    border:1px solid #e5e7eb;
    background:#fff;
    padding:11px 14px;
    border-radius:10px;
    font-weight:800;
    color:#344054;
    cursor:pointer
}
.faq-list{
    display:flex;
    flex-direction:column;
    gap:12px
}
.faq-item{
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
    overflow:hidden
}
.faq-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px
}
.drag{
    color:#98a2b3;
    font-size:18px
}
.faq-question{
    flex:1;
    font-weight:800;
    font-size:14px;
    color:#101828
}
.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap
}
.success{
    background:#dcfce7;
    color:#15803d
}
.warning{
    background:#fff7ed;
    color:#c2410c
}
.purple-pill{
    background:#f0e9ff;
    color:#5b2eff
}
.faq-body{
    border-top:1px solid #edf0f5;
    padding:16px;
    display:grid;
    grid-template-columns:1fr 170px;
    gap:18px
}
.field-label{
    display:block;
    font-size:13px;
    color:#344054;
    font-weight:800;
    margin-bottom:8px
}
.answer-box{
    border:1px solid #e5e7eb;
    border-radius:14px;
    overflow:hidden;
    background:#fff
}
textarea{
    width:100%;
    min-height:112px;
    border:none;
    resize:vertical;
    padding:14px;
    outline:none;
    color:#344054;
    line-height:1.6;
    font-size:13px
}
.editor-footer{
    border-top:1px solid #edf0f5;
    padding:10px 12px;
    display:flex;
    justify-content:space-between;
    color:#667085;
    font-size:12px
}
.confidence-box{
    border-left:1px solid #edf0f5;
    padding-left:18px;
    text-align:center
}
.confidence-ring{
    width:108px;
    height:108px;
    border-radius:50%;
    margin:0 auto 12px;
    background:conic-gradient(#22c55e 0 92%,#e5e7eb 92% 100%);
    display:grid;
    place-items:center
}
.confidence-inner{
    width:74px;
    height:74px;
    background:#fff;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:22px;
    font-weight:900;
    color:#15803d
}
.confidence-box small{
    color:#667085;
    display:block;
    margin-top:5px;
    line-height:1.4
}
.faq-meta{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:180px 1fr auto;
    gap:14px;
    align-items:end;
    margin-top:2px
}
.input,.meta-select{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:11px;
    outline:none;
    color:#344054;
    background:#fff;
    font-weight:700
}
.tags{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:9px;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-height:43px
}
.tag{
    background:#f0e9ff;
    color:#5b2eff;
    padding:6px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:800
}
.toggle-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:13px;
    color:#344054;
    padding-bottom:3px
}
.switch{
    width:46px;
    height:26px;
    background:#10b981;
    border-radius:999px;
    position:relative;
    flex-shrink:0
}
.switch::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background:#fff;
    border-radius:50%;
    right:3px;
    top:3px
}
.collapsed{
    padding:0
}
.pagination-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:18px;
    color:#667085;
    font-size:13px;
    flex-wrap:wrap;
    gap:12px
}
.pagination{
    display:flex;
    gap:8px;
    align-items:center
}
.page{
    min-width:32px;
    height:32px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    display:grid;
    place-items:center;
    font-weight:800;
    color:#344054;
    background:#fff
}
.page.active{
    background:#6c3cff;
    color:#fff;
    border-color:#6c3cff
}
.right-column{
    display:flex;
    flex-direction:column;
    gap:18px
}
.preview-card{
    position:sticky;
    top:24px
}
.preview-question{
    margin-top:16px;
    display:flex;
    justify-content:flex-end
}
.user-bubble{
    background:#6c3cff;
    color:#fff;
    border-radius:16px 16px 4px 16px;
    padding:12px 14px;
    font-size:13px;
    font-weight:700;
    max-width:230px
}
.bot-answer{
    background:#f2f4f7;
    border-radius:16px 16px 16px 4px;
    padding:14px;
    margin-top:14px;
    font-size:13px;
    line-height:1.6;
    color:#344054
}
.source-box{
    margin-top:16px
}
.source-box h4{
    font-size:13px;
    margin-bottom:8px
}
.source-pill{
    display:inline-block;
    background:#f0e9ff;
    color:#5b2eff;
    padding:7px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800
}
.helpful{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#667085;
    font-size:13px;
    font-weight:700
}
.policy-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:14px
}
.policy-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid #edf0f5;
    border-radius:12px;
    padding:12px;
    font-size:13px;
    font-weight:800;
    color:#344054
}
.sync-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#667085;
    font-size:13px;
    margin-top:6px
}
.tip-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border-color:#e9d5ff
}
.tip-card h3{
    font-size:15px;
    margin-bottom:8px;
    color:#5b2eff
}
.tip-card p{
    color:#667085;
    font-size:13px;
    line-height:1.5;
    margin-bottom:12px
}
.link{
    color:#5b2eff;
    text-decoration:none;
    font-size:13px;
    font-weight:800
}
@media (max-width:1280px){
    .content-layout{
        grid-template-columns:1fr
    }
    .preview-card{
        position:static
    }
}
@media (max-width:900px){
    .app{
        flex-direction:column
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .main{
        margin-left:0;
        width:100%;
        padding:18px
    }
    .topbar,.page-header,.tabs-actions,.faq-toolbar{
        flex-direction:column;
        align-items:flex-start
    }
    .search,.faq-search{
        width:100%
    }
    .top-actions,.tab-buttons{
        flex-wrap:wrap
    }
    .faq-body{
        grid-template-columns:1fr
    }
    .confidence-box{
        border-left:none;
        border-top:1px solid #edf0f5;
        padding-left:0;
        padding-top:18px
    }
    .faq-meta{
        grid-template-columns:1fr
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px
}
.brand-icon{
    width:44px;
    height:44px;
    background:#22c55e;
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:22px
}
.brand h2{
    font-size:15px;
    line-height:1.35;
    font-weight:800
}
.spark{
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:18px
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:700
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(108,60,255,0.22)
}
.btn-primary.full{
    width:100%
}
.btn-secondary{
    background:#fff;
    color:#344054;
    border:1px solid #e5e7eb;
    padding:11px 16px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    flex-shrink:0
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px 28px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085;
    outline:none
}
.top-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:800;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    cursor:pointer
}
.chat-shell{
    display:grid;
    grid-template-columns:320px 1fr 330px;
    gap:18px;
    min-height:calc(100vh - 110px)
}
.panel{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04);
    overflow:hidden
}
.inbox-panel{
    display:flex;
    flex-direction:column
}
.inbox-header{
    padding:20px;
    border-bottom:1px solid #edf0f5
}
.inbox-header h1{
    font-size:24px;
    margin-bottom:6px;
    letter-spacing:-0.4px
}
.inbox-header p{
    color:#667085;
    font-size:13px;
    line-height:1.5
}
.filter-tabs{
    display:flex;
    gap:8px;
    padding:14px 16px;
    border-bottom:1px solid #edf0f5;
    overflow-x:auto
}
.filter-tab{
    border:1px solid #e5e7eb;
    background:#fff;
    color:#475467;
    padding:8px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap
}
.filter-tab.active{
    background:#f0e9ff;
    color:#5b2eff;
    border-color:#ddd6fe
}
.conversation-list{
    overflow-y:auto;
    flex:1
}
.conversation{
    padding:15px 16px;
    border-bottom:1px solid #f1f5f9;
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:12px;
    cursor:pointer
}
.conversation.active{
    background:#faf7ff;
    border-left:4px solid #6c3cff;
    padding-left:12px
}
.circle{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:13px;
    font-weight:900;
    background:#6c3cff
}
.circle.green{
    background:#10b981
}
.circle.orange{
    background:#f97316
}
.circle.blue{
    background:#2563eb
}
.circle.red{
    background:#ef4444
}
.circle.pink{
    background:#ec4899
}
.conv-info h4{
    font-size:14px;
    margin-bottom:5px;
    display:flex;
    align-items:center;
    gap:6px
}
.conv-info p{
    color:#667085;
    font-size:12px;
    line-height:1.4
}
.conv-meta{
    text-align:right;
    font-size:11px;
    color:#98a2b3;
    font-weight:800
}
.unread{
    margin-top:8px;
    display:inline-flex;
    width:22px;
    height:22px;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    background:#6c3cff;
    color:#fff;
    font-size:11px
}
.load-more{
    padding:16px;
    text-align:center;
    color:#5b2eff;
    font-size:13px;
    font-weight:800;
    cursor:pointer
}
.chat-panel{
    display:flex;
    flex-direction:column
}
.chat-header{
    height:82px;
    border-bottom:1px solid #edf0f5;
    padding:18px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.customer-title{
    display:flex;
    align-items:center;
    gap:12px
}
.customer-title h3{
    font-size:16px;
    margin-bottom:4px
}
.chat-tag{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    background:#ecfdf5;
    color:#15803d;
    font-size:11px;
    font-weight:800
}
.location{
    color:#667085;
    font-size:12px;
    font-weight:700
}
.chat-header-actions{
    display:flex;
    gap:10px;
    align-items:center
}
.topic-pill{
    align-self:center;
    margin:16px auto 6px;
    background:#f0e9ff;
    color:#5b2eff;
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:800
}
.chat-body{
    flex:1;
    padding:16px 22px 20px;
    overflow-y:auto;
    background:#fcfcfd
}
.message-row{
    display:flex;
    gap:10px;
    margin-bottom:16px;
    align-items:flex-start
}
.message-row.ai .msg-avatar{
    background:#f0e9ff;
    color:#6c3cff
}
.message-row.user{
    justify-content:flex-start
}
.msg-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    background:#10b981;
    font-size:12px;
    font-weight:900;
    flex-shrink:0
}
.bubble{
    max-width:72%;
    padding:13px 15px;
    border-radius:16px;
    font-size:13px;
    line-height:1.6;
    box-shadow:0 4px 12px rgba(16,24,40,0.04)
}
.bubble.user{
    background:#fff;
    border:1px solid #edf0f5;
    color:#344054;
    border-top-left-radius:4px
}
.bubble.ai{
    background:#f0e9ff;
    color:#344054;
    border-top-left-radius:4px
}
.time{
    display:block;
    margin-top:6px;
    color:#98a2b3;
    font-size:11px;
    font-weight:700
}
.order-card{
    margin-top:10px;
    background:#fff;
    border:1px solid #ddd6fe;
    border-radius:14px;
    padding:14px;
    min-width:270px
}
.order-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px
}
.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap
}
.success{
    background:#dcfce7;
    color:#15803d
}
.purple-pill{
    background:#f0e9ff;
    color:#5b2eff
}
.warning{
    background:#fff7ed;
    color:#c2410c
}
.order-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    color:#667085;
    font-size:12px;
    margin-bottom:12px
}
.order-info strong{
    display:block;
    color:#101828;
    margin-top:4px;
    font-size:13px
}
.small-btn{
    border:1px solid #e5e7eb;
    background:#fff;
    padding:9px 13px;
    border-radius:9px;
    font-weight:800;
    cursor:pointer;
    color:#344054;
    font-size:12px
}
.product-carousel{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    margin-top:12px
}
.mini-product{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:10px;
    text-align:center
}
.mini-img{
    height:72px;
    border-radius:10px;
    background:linear-gradient(135deg,#f4ecdf,#fff);
    display:grid;
    place-items:center;
    font-size:30px;
    margin-bottom:8px
}
.mini-product h5{
    font-size:11px;
    margin-bottom:4px
}
.mini-product p{
    color:#344054;
    font-weight:900;
    font-size:12px;
    margin-bottom:8px
}
.quick-replies{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:8px 0 18px 42px
}
.quick-replies button{
    border:1px solid #ddd6fe;
    background:#fff;
    color:#5b2eff;
    padding:8px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    cursor:pointer
}
.composer{
    border-top:1px solid #edf0f5;
    padding:14px;
    background:#fff
}
.reply-mode{
    display:flex;
    gap:8px;
    margin-bottom:12px
}
.mode-btn{
    border:1px solid #e5e7eb;
    background:#fff;
    color:#344054;
    border-radius:999px;
    padding:8px 12px;
    font-weight:800;
    font-size:12px;
    cursor:pointer
}
.mode-btn.active{
    background:#f0e9ff;
    color:#5b2eff;
    border-color:#ddd6fe
}
.composer-row{
    display:flex;
    gap:10px;
    align-items:center
}
.composer-row input{
    flex:1;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:13px 14px;
    outline:none;
    color:#667085
}
.details-panel{
    display:flex;
    flex-direction:column;
    overflow-y:auto
}
.detail-card{
    padding:20px;
    border-bottom:1px solid #edf0f5
}
.detail-card:last-child{
    border-bottom:0
}
.detail-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px
}
.detail-title-row h3{
    font-size:16px
}
.edit-link{
    color:#5b2eff;
    font-size:13px;
    font-weight:800;
    text-decoration:none
}
.profile-head{
    text-align:center;
    margin-bottom:18px
}
.profile-head .circle{
    margin:0 auto 12px;
    width:60px;
    height:60px;
    font-size:18px
}
.profile-head h3{
    font-size:18px;
    margin-bottom:4px
}
.profile-head p{
    color:#667085;
    font-size:13px
}
.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.info-box{
    border:1px solid #edf0f5;
    border-radius:12px;
    padding:12px
}
.info-box span{
    color:#667085;
    font-size:11px;
    font-weight:800;
    display:block;
    margin-bottom:5px
}
.info-box strong{
    font-size:13px
}
.list-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid #f1f5f9;
    font-size:13px
}
.list-item:last-child{
    border-bottom:0
}
.list-item strong{
    display:block;
    margin-bottom:4px;
    color:#101828
}
.list-item small{
    color:#667085
}
.thumb-row{
    display:flex;
    gap:10px;
    align-items:center
}
.thumb{
    width:38px;
    height:38px;
    border-radius:10px;
    background:linear-gradient(135deg,#f4ecdf,#fff);
    display:grid;
    place-items:center;
    border:1px solid #e5e7eb
}
.tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:10px 0 16px
}
.handover-btn{
    width:100%;
    border:1px solid #ddd6fe;
    background:#f0e9ff;
    color:#5b2eff;
    padding:12px;
    border-radius:12px;
    font-weight:900;
    cursor:pointer
}
@media (max-width:1400px){
    .chat-shell{
        grid-template-columns:300px 1fr
    }
    .details-panel{
        grid-column:1 / -1
    }
}
@media (max-width:1000px){
    .chat-shell{
        grid-template-columns:1fr
    }
    .inbox-panel,.chat-panel,.details-panel{
        min-height:auto
    }
}
@media (max-width:900px){
    .app{
        flex-direction:column
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .main{
        margin-left:0;
        width:100%;
        padding:18px
    }
    .topbar{
        flex-direction:column;
        align-items:flex-start;
        height:auto;
        gap:16px
    }
    .search{
        width:100%
    }
    .top-actions{
        flex-wrap:wrap
    }
    .product-carousel,.order-info,.info-grid{
        grid-template-columns:1fr
    }
    .bubble{
        max-width:90%
    }
    .chat-header{
        height:auto;
        flex-direction:column;
        align-items:flex-start;
        gap:14px
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px
}
.brand-icon{
    width:44px;
    height:44px;
    background:#22c55e;
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:22px
}
.brand h2{
    font-size:15px;
    line-height:1.35;
    font-weight:800
}
.spark{
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:18px
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:700
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(108,60,255,0.22)
}
.btn-primary.full{
    width:100%
}
.btn-secondary{
    background:#fff;
    color:#344054;
    border:1px solid #e5e7eb;
    padding:11px 16px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.btn-success{
    background:#10b981;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    flex-shrink:0
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px 28px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085;
    outline:none
}
.top-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:800;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    cursor:pointer
}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px
}
.page-header h1{
    font-size:30px;
    margin-bottom:8px;
    letter-spacing:-0.5px
}
.page-header p{
    color:#667085;
    font-size:14px;
    line-height:1.5
}
.date-filter{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 16px;
    font-weight:800;
    color:#475467;
    white-space:nowrap
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:22px
}
.card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04)
}
.stat-card{
    display:flex;
    align-items:center;
    gap:14px
}
.stat-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:22px;
    flex-shrink:0
}
.purple-icon{
    background:#f0e9ff;
    color:#6c3cff
}
.green-icon{
    background:#ecfdf5;
    color:#10b981
}
.blue-icon{
    background:#eff6ff;
    color:#2563eb
}
.orange-icon{
    background:#fff7ed;
    color:#f97316
}
.stat-info span{
    color:#667085;
    font-size:12px;
    font-weight:800
}
.stat-info h3{
    font-size:24px;
    margin:6px 0
}
.trend-green{
    color:#059669;
    font-size:12px;
    font-weight:800
}
.trend-red{
    color:#dc2626;
    font-size:12px;
    font-weight:800
}
.handover-layout{
    display:grid;
    grid-template-columns:1fr 350px;
    gap:22px
}
.left-stack{
    display:flex;
    flex-direction:column;
    gap:20px
}
.card-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:16px
}
.card-title{
    font-size:18px;
    font-weight:900
}
.filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.select,.small-btn{
    border:1px solid #e5e7eb;
    background:#fff;
    padding:10px 13px;
    border-radius:10px;
    font-weight:800;
    color:#344054;
    cursor:pointer;
    font-size:12px
}
.queue-card{
    padding:0;
    overflow:hidden
}
.queue-card .card-title-row{
    padding:20px;
    margin-bottom:0;
    border-bottom:1px solid #edf0f5
}
.table-wrap{
    overflow-x:auto
}
table{
    width:100%;
    border-collapse:collapse;
    min-width:850px
}
th{
    text-align:left;
    color:#667085;
    font-size:12px;
    padding:14px 16px;
    background:#fcfcfd;
    border-bottom:1px solid #edf0f5;
    font-weight:800
}
td{
    padding:14px 16px;
    border-bottom:1px solid #f1f5f9;
    font-size:13px;
    color:#344054;
    vertical-align:middle
}
.customer-cell,.agent-cell{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    color:#101828
}
.circle{
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#6c3cff;
    color:#fff;
    font-size:12px;
    font-weight:900;
    flex-shrink:0
}
.circle.green{
    background:#10b981
}
.circle.orange{
    background:#f97316
}
.circle.blue{
    background:#2563eb
}
.circle.red{
    background:#ef4444
}
.circle.gray{
    background:#98a2b3
}
.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap
}
.high{
    background:#fee2e2;
    color:#b91c1c
}
.medium{
    background:#fff7ed;
    color:#c2410c
}
.low{
    background:#dcfce7;
    color:#15803d
}
.success{
    background:#dcfce7;
    color:#15803d
}
.purple-pill{
    background:#f0e9ff;
    color:#5b2eff
}
.sla-red{
    color:#dc2626;
    font-weight:900
}
.sla-orange{
    color:#f97316;
    font-weight:900
}
.sla-green{
    color:#059669;
    font-weight:900
}
.table-link{
    padding:16px;
    text-align:center;
    color:#5b2eff;
    font-size:13px;
    font-weight:900;
    cursor:pointer
}
.automation-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px
}
.automation-item{
    border:1px solid #edf0f5;
    border-radius:14px;
    padding:14px;
    background:#fff
}
.automation-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    margin-bottom:12px;
    background:#f0e9ff;
    color:#6c3cff;
    font-size:20px
}
.automation-item h4{
    font-size:13px;
    margin-bottom:5px
}
.automation-item p{
    color:#667085;
    font-size:12px;
    line-height:1.4;
    margin-bottom:12px
}
.toggle-row{
    display:flex;
    justify-content:space-between;
    align-items:center
}
.switch{
    width:42px;
    height:24px;
    background:#10b981;
    border-radius:999px;
    position:relative
}
.switch::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    right:3px;
    top:3px;
    background:#fff;
    border-radius:50%
}
.right-panel{
    display:flex;
    flex-direction:column;
    gap:18px
}
.preview-card{
    position:sticky;
    top:24px
}
.preview-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px
}
.live-dot{
    color:#10b981;
    font-size:12px;
    font-weight:800
}
.customer-preview{
    text-align:center;
    margin-bottom:18px
}
.customer-preview .circle{
    width:62px;
    height:62px;
    margin:0 auto 12px;
    font-size:18px
}
.customer-preview h3{
    font-size:18px;
    margin-bottom:5px
}
.customer-preview p{
    color:#667085;
    font-size:13px
}
.handover-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:18px
}
.info-box{
    border:1px solid #edf0f5;
    border-radius:12px;
    padding:12px
}
.info-box span{
    display:block;
    color:#667085;
    font-size:11px;
    font-weight:800;
    margin-bottom:5px
}
.info-box strong{
    font-size:13px
}
.chat-preview{
    background:#fcfcfd;
    border:1px solid #edf0f5;
    border-radius:16px;
    padding:14px;
    margin-bottom:18px
}
.bubble{
    padding:12px 13px;
    border-radius:15px;
    font-size:12px;
    line-height:1.5;
    margin-bottom:12px;
    max-width:92%
}
.bubble.user{
    background:#fff;
    border:1px solid #e5e7eb;
    color:#344054
}
.bubble.ai{
    background:#f0e9ff;
    color:#344054;
    margin-left:auto
}
.message-time{
    display:block;
    color:#98a2b3;
    font-size:10px;
    margin-top:5px;
    text-align:right
}
.escalated{
    text-align:center;
    color:#c2410c;
    background:#fff7ed;
    padding:9px;
    border-radius:999px;
    font-size:11px;
    font-weight:800
}
.note-box textarea{
    width:100%;
    min-height:92px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px;
    resize:vertical;
    outline:none;
    color:#344054;
    margin:10px 0;
    line-height:1.5
}
.note-box small{
    color:#667085;
    font-size:12px
}
.action-stack{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:14px
}
.return-btn{
    border:1px solid #ddd6fe;
    background:#f0e9ff;
    color:#5b2eff;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
@media (max-width:1320px){
    .handover-layout{
        grid-template-columns:1fr
    }
    .preview-card{
        position:static
    }
    .automation-list{
        grid-template-columns:repeat(2,1fr)
    }
}
@media (max-width:980px){
    .stats-grid{
        grid-template-columns:repeat(2,1fr)
    }
}
@media (max-width:900px){
    .app{
        flex-direction:column
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .main{
        margin-left:0;
        width:100%;
        padding:18px
    }
    .topbar,.page-header,.card-title-row{
        flex-direction:column;
        align-items:flex-start;
        height:auto;
        gap:16px
    }
    .search{
        width:100%
    }
    .top-actions,.filters{
        flex-wrap:wrap
    }
    .stats-grid,.automation-list,.handover-info{
        grid-template-columns:1fr
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px
}
.brand-icon{
    width:44px;
    height:44px;
    background:#22c55e;
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:22px
}
.brand h2{
    font-size:15px;
    line-height:1.35;
    font-weight:800
}
.spark{
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:18px
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:700
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(108,60,255,0.22)
}
.btn-primary.full{
    width:100%
}
.btn-secondary{
    background:#fff;
    color:#344054;
    border:1px solid #e5e7eb;
    padding:11px 16px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    flex-shrink:0
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px 28px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085;
    outline:none
}
.top-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:800;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    cursor:pointer
}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px;
    gap:18px
}
.page-header h1{
    font-size:30px;
    margin-bottom:8px;
    letter-spacing:-0.5px
}
.page-header p{
    color:#667085;
    font-size:14px;
    line-height:1.5
}
.header-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
.date-filter{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 16px;
    font-weight:800;
    color:#475467;
    white-space:nowrap
}
.card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04)
}
.card-title{
    font-size:18px;
    font-weight:900;
    margin-bottom:16px
}
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:20px
}
.kpi-card{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px
}
.kpi-info span{
    color:#667085;
    font-size:12px;
    font-weight:800
}
.kpi-info h3{
    font-size:24px;
    margin:8px 0
}
.trend-green{
    color:#059669;
    font-size:12px;
    font-weight:800
}
.trend-red{
    color:#dc2626;
    font-size:12px;
    font-weight:800
}
.kpi-icon{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:22px;
    flex-shrink:0
}
.purple-icon{
    background:#f0e9ff;
    color:#6c3cff
}
.green-icon{
    background:#ecfdf5;
    color:#10b981
}
.orange-icon{
    background:#fff7ed;
    color:#f97316
}
.blue-icon{
    background:#eff6ff;
    color:#2563eb
}
.charts-grid{
    display:grid;
    grid-template-columns:1.35fr 0.9fr;
    gap:20px;
    margin-bottom:20px
}
.bottom-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr 0.8fr;
    gap:20px
}
.chart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px
}
.chart-select{
    border:1px solid #e5e7eb;
    background:#fff;
    padding:9px 12px;
    border-radius:10px;
    font-weight:800;
    color:#344054;
    cursor:pointer;
    font-size:12px
}
.line-chart{
    height:300px;
    border-radius:14px;
    background:repeating-linear-gradient( to top,#fff 0,#fff 58px,#eef2f7 59px );
    position:relative;
    overflow:hidden;
    padding:10px
}
.line-chart svg{
    width:100%;
    height:100%
}
.legend{
    display:flex;
    gap:18px;
    align-items:center;
    margin-bottom:10px;
    color:#667085;
    font-size:12px;
    font-weight:800;
    flex-wrap:wrap
}
.legend-item{
    display:flex;
    align-items:center;
    gap:7px
}
.dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#6c3cff
}
.dot.green{
    background:#10b981
}
.dot.orange{
    background:#f97316
}
.dot.gray{
    background:#98a2b3
}
.category-list{
    display:flex;
    flex-direction:column;
    gap:13px
}
.category-row{
    display:grid;
    grid-template-columns:1fr 72px 72px 70px;
    align-items:center;
    gap:10px;
    padding-bottom:12px;
    border-bottom:1px solid #f1f5f9;
    font-size:13px
}
.category-row:last-child{
    border-bottom:none;
    padding-bottom:0
}
.category-name{
    font-weight:800;
    color:#101828
}
.category-row span{
    color:#667085;
    font-weight:700
}
.category-row strong{
    font-weight:900
}
.category-trend{
    color:#059669 !important;
    font-weight:900 !important
}
.category-trend.red{
    color:#dc2626 !important
}
.link{
    color:#5b2eff;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    display:inline-block;
    margin-top:16px
}
.conversion-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:18px
}
.conversion-box{
    border:1px solid #edf0f5;
    border-radius:14px;
    padding:14px
}
.conversion-box span{
    color:#667085;
    font-size:12px;
    font-weight:800;
    display:block;
    margin-bottom:6px
}
.conversion-box h4{
    font-size:20px;
    margin-bottom:4px
}
.bar-chart{
    height:250px;
    border-radius:14px;
    background:repeating-linear-gradient( to top,#fff 0,#fff 48px,#eef2f7 49px );
    display:flex;
    align-items:end;
    gap:16px;
    padding:20px
}
.bar-group{
    flex:1;
    height:100%;
    display:flex;
    align-items:end;
    justify-content:center;
    gap:6px
}
.bar{
    width:18px;
    border-radius:8px 8px 0 0;
    background:linear-gradient(180deg,#7c3aed,#4f46e5)
}
.bar.green{
    background:linear-gradient(180deg,#14b8a6,#10b981)
}
.donut-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:10px 0 18px
}
.donut{
    width:160px;
    height:160px;
    border-radius:50%;
    background:conic-gradient(#6c3cff 0 68%,#10b981 68% 100%);
    display:grid;
    place-items:center
}
.donut.resolution{
    background:conic-gradient(#6c3cff 0 92%,#10b981 92% 95%,#f97316 95% 100%)
}
.donut-inner{
    width:108px;
    height:108px;
    border-radius:50%;
    background:#fff;
    display:grid;
    place-items:center;
    text-align:center
}
.donut-inner h3{
    font-size:24px
}
.donut-inner span{
    color:#667085;
    font-size:12px;
    font-weight:700
}
.stat-list{
    display:flex;
    flex-direction:column;
    gap:12px
}
.stat-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    color:#475467;
    font-weight:800
}
.stat-row div{
    display:flex;
    align-items:center;
    gap:8px
}
.footer-note{
    margin-top:20px;
    text-align:center;
    color:#667085;
    font-size:12px;
    font-weight:700
}
@media (max-width:1350px){
    .kpi-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .charts-grid,.bottom-grid{
        grid-template-columns:1fr
    }
}
@media (max-width:900px){
    .app{
        flex-direction:column
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .main{
        margin-left:0;
        width:100%;
        padding:18px
    }
    .topbar,.page-header,.chart-header{
        flex-direction:column;
        align-items:flex-start;
        height:auto;
        gap:16px
    }
    .search{
        width:100%
    }
    .top-actions,.header-actions{
        flex-wrap:wrap
    }
    .kpi-grid,.conversion-stats{
        grid-template-columns:1fr
    }
    .category-row{
        grid-template-columns:1fr
    }
    .bar-chart{
        gap:8px;
        padding:14px
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
body{
    background:#f7f8fc;
    color:#101828
}
.app{
    display:flex;
    min-height:100vh
}
.sidebar{
    width:260px;
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px
}
.brand-icon{
    width:44px;
    height:44px;
    background:#22c55e;
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:22px
}
.brand h2{
    font-size:15px;
    line-height:1.35;
    font-weight:800
}
.spark{
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:18px
}
.nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:12px;
    color:#475467;
    text-decoration:none;
    font-size:14px;
    font-weight:700
}
.nav-item.active{
    background:#f0e9ff;
    color:#5b2eff
}
.badge{
    margin-left:auto;
    background:#ede9fe;
    color:#6d28d9;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px
}
.upgrade-card{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px
}
.upgrade-card h4{
    font-size:14px;
    margin-bottom:6px
}
.upgrade-card p{
    font-size:12px;
    line-height:1.5;
    color:#4f46e5;
    margin-bottom:14px
}
.btn-primary{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(108,60,255,0.22)
}
.btn-primary.full{
    width:100%
}
.btn-secondary{
    background:#fff;
    color:#344054;
    border:1px solid #e5e7eb;
    padding:11px 16px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.btn-danger{
    background:#fff;
    color:#dc2626;
    border:1px solid #fecaca;
    padding:11px 16px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer
}
.store-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff
}
.avatar{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#6c3cff;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    flex-shrink:0
}
.store-card h4{
    font-size:14px
}
.store-card p{
    font-size:11px;
    color:#667085
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px 28px 28px
}
.topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px
}
.search{
    width:320px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    color:#667085;
    outline:none
}
.top-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.plan{
    background:#f0e9ff;
    color:#5b2eff;
    padding:10px 16px;
    border-radius:12px;
    font-weight:800;
    font-size:14px
}
.icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    display:grid;
    place-items:center;
    cursor:pointer
}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px;
    gap:18px
}
.page-header h1{
    font-size:30px;
    margin-bottom:8px;
    letter-spacing:-0.5px
}
.page-header p{
    color:#667085;
    font-size:14px;
    line-height:1.5;
    max-width:760px
}
.btn-add{
    background:#6c3cff;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap
}
.tabs{
    display:flex;
    gap:22px;
    border-bottom:1px solid #e5e7eb;
    margin-bottom:20px;
    overflow-x:auto
}
.tab{
    padding:14px 0;
    color:#667085;
    font-size:14px;
    font-weight:900;
    text-decoration:none;
    border-bottom:3px solid transparent;
    white-space:nowrap
}
.tab.active{
    color:#5b2eff;
    border-bottom-color:#6c3cff
}
.card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(16,24,40,0.04)
}
.section-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin-bottom:16px
}
.section-title h2{
    font-size:20px;
    margin-bottom:6px
}
.section-title p{
    color:#667085;
    font-size:13px;
    line-height:1.5
}
.integrations-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:22px
}
.integration-card{
    display:flex;
    flex-direction:column;
    gap:14px
}
.integration-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start
}
.integration-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:22px;
    flex-shrink:0
}
.shopify-icon{
    background:#ecfdf5;
    color:#16a34a
}
.openai-icon{
    background:#f2f4f7;
    color:#101828
}
.whatsapp-icon{
    background:#ecfdf5;
    color:#10b981
}
.webchat-icon{
    background:#f0e9ff;
    color:#6c3cff
}
.integration-card h3{
    font-size:15px;
    margin-bottom:5px
}
.integration-card p{
    color:#667085;
    font-size:13px;
    line-height:1.5
}
.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap
}
.success{
    background:#dcfce7;
    color:#15803d
}
.warning{
    background:#fff7ed;
    color:#c2410c
}
.purple-pill{
    background:#f0e9ff;
    color:#5b2eff
}
.gray-pill{
    background:#f2f4f7;
    color:#667085
}
.integration-meta{
    background:#fcfcfd;
    border:1px solid #edf0f5;
    border-radius:12px;
    padding:12px;
    font-size:12px;
    color:#667085;
    line-height:1.6
}
.integration-meta strong{
    color:#101828;
    display:block;
    font-size:13px
}
.integration-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.mini-btn{
    border:1px solid #e5e7eb;
    background:#fff;
    color:#344054;
    padding:9px 12px;
    border-radius:9px;
    font-size:12px;
    font-weight:900;
    cursor:pointer
}
.last-sync{
    color:#667085;
    font-size:12px;
    font-weight:800;
    padding-top:2px
}
.green-dot{
    color:#10b981
}
.usage-grid{
    display:grid;
    grid-template-columns:1fr 1.15fr 0.85fr;
    gap:18px;
    margin-bottom:20px
}
.usage-card-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px
}
.usage-card-title h3{
    font-size:18px
}
.plan-box{
    background:linear-gradient(135deg,#f4f0ff,#fff);
    border:1px solid #e9d5ff;
    border-radius:16px;
    padding:18px;
    margin-bottom:16px
}
.plan-box h3{
    color:#5b2eff;
    font-size:18px;
    margin-bottom:6px
}
.plan-box p{
    color:#667085;
    font-size:13px
}
.usage-metric{
    border-bottom:1px solid #edf0f5;
    padding:14px 0
}
.usage-metric:last-child{
    border-bottom:none
}
.usage-metric span{
    display:block;
    color:#667085;
    font-size:12px;
    font-weight:800;
    margin-bottom:6px
}
.usage-metric strong{
    font-size:18px
}
.progress{
    height:10px;
    border-radius:999px;
    background:#e5e7eb;
    overflow:hidden;
    margin-top:12px
}
.progress span{
    display:block;
    height:100%;
    width:68%;
    background:linear-gradient(90deg,#7c3aed,#2563eb);
    border-radius:999px
}
.cap-form label{
    display:block;
    color:#344054;
    font-size:13px;
    font-weight:900;
    margin-bottom:8px
}
.input-group{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:18px
}
.input{
    flex:1;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:12px;
    outline:none;
    color:#344054;
    font-weight:800
}
.unit{
    color:#667085;
    font-size:13px;
    font-weight:800
}
.range-track{
    height:10px;
    border-radius:999px;
    background:linear-gradient(90deg,#6c3cff 0 45%,#e5e7eb 45% 100%);
    position:relative;
    margin:20px 0 10px
}
.range-track::after{
    content:"";
    position:absolute;
    left:45%;
    top:50%;
    transform:translate(-50%,-50%);
    width:22px;
    height:22px;
    background:#6c3cff;
    border:4px solid #fff;
    border-radius:50%;
    box-shadow:0 4px 14px rgba(108,60,255,0.35)
}
.range-labels{
    display:flex;
    justify-content:space-between;
    color:#667085;
    font-size:11px;
    font-weight:800;
    margin-bottom:18px
}
.warning-box{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#c2410c;
    border-radius:14px;
    padding:14px;
    font-size:13px;
    line-height:1.5;
    margin-bottom:14px
}
.info-box{
    background:#f8fafc;
    border:1px solid #edf0f5;
    color:#475467;
    border-radius:14px;
    padding:14px;
    font-size:13px;
    line-height:1.5
}
.usage-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:18px
}
.usage-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    font-weight:800;
    color:#344054;
    border-bottom:1px solid #f1f5f9;
    padding-bottom:12px
}
.usage-row:last-child{
    border-bottom:none
}
.dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#6c3cff;
    display:inline-block;
    margin-right:8px
}
.dot.green{
    background:#10b981
}
.dot.blue{
    background:#2563eb
}
.bottom-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:20px
}
.setting-row{
    display:grid;
    grid-template-columns:22px 1fr auto;
    gap:12px;
    align-items:start;
    padding:14px 0;
    border-bottom:1px solid #edf0f5
}
.setting-row:last-child{
    border-bottom:none
}
.checkbox{
    width:18px;
    height:18px;
    accent-color:#6c3cff;
    margin-top:2px
}
.setting-row h4{
    font-size:14px;
    margin-bottom:5px
}
.setting-row p{
    color:#667085;
    font-size:12px;
    line-height:1.5
}
.select{
    border:1px solid #e5e7eb;
    background:#fff;
    color:#344054;
    border-radius:10px;
    padding:10px 12px;
    font-size:12px;
    font-weight:800
}
.radio-row{
    border:1px solid #edf0f5;
    border-radius:14px;
    padding:14px;
    display:flex;
    gap:12px;
    margin-bottom:12px
}
.radio-row input{
    accent-color:#6c3cff;
    margin-top:2px
}
.radio-row h4{
    font-size:14px;
    margin-bottom:5px
}
.radio-row p{
    color:#667085;
    font-size:12px;
    line-height:1.5
}
.limit-preview{
    background:#faf7ff;
    border:1px solid #e9d5ff;
    border-radius:14px;
    padding:14px;
    margin-top:14px;
    color:#344054
}
.limit-preview h4{
    font-size:13px;
    margin-bottom:10px;
    color:#5b2eff
}
.preview-message{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:12px;
    font-size:13px;
    line-height:1.5;
    color:#344054
}
.api-key-card{
    margin-bottom:0
}
.api-key-row{
    border:1px solid #edf0f5;
    border-radius:14px;
    padding:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap
}
.api-key-left{
    display:flex;
    align-items:center;
    gap:12px
}
.key-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    background:#f0e9ff;
    color:#6c3cff;
    display:grid;
    place-items:center;
    font-size:20px
}
.api-key-left h4{
    font-size:14px;
    margin-bottom:4px
}
.api-key-left p{
    color:#667085;
    font-size:12px
}
.api-key-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap
}
.link{
    color:#5b2eff;
    text-decoration:none;
    font-size:13px;
    font-weight:900
}
@media (max-width:1350px){
    .integrations-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .usage-grid{
        grid-template-columns:1fr
    }
}
@media (max-width:1000px){
    .bottom-grid{
        grid-template-columns:1fr
    }
}
@media (max-width:900px){
    .app{
        flex-direction:column
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto
    }
    .main{
        margin-left:0;
        width:100%;
        padding:18px
    }
    .topbar,.page-header,.section-title-row{
        flex-direction:column;
        align-items:flex-start;
        height:auto;
        gap:16px
    }
    .search{
        width:100%
    }
    .top-actions{
        flex-wrap:wrap
    }
    .integrations-grid{
        grid-template-columns:1fr
    }
    .setting-row{
        grid-template-columns:22px 1fr
    }
    .setting-row .select{
        grid-column:2;
        width:100%
    }
}
/* Fix Left Sidebar Scroll + Show Sunset Studio Complete */
.sidebar {
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 18px !important;
}

/* Better sidebar scrollbar */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: #ddd6fe;
  border-radius: 20px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #6c3cff;
}

/* Keep menu compact so all links show nicely */
.nav {
  gap: 6px !important;
}

.nav-item {
  padding: 11px 14px !important;
  font-size: 13px !important;
}

/* Reduce brand area height */
.brand {
  margin-bottom: 24px !important;
}

/* Make premium card smaller */
.upgrade-card {
  padding: 14px !important;
  margin-bottom: 14px !important;
}

.upgrade-card h4 {
  font-size: 13px !important;
}

.upgrade-card p {
  font-size: 11px !important;
  margin-bottom: 10px !important;
}

.upgrade-card .btn-primary,
.upgrade-card button {
  padding: 10px 14px !important;
  font-size: 13px !important;
}

/* Sunset Studio card fix */
.store-card {
  margin-bottom: 10px !important;
  flex-shrink: 0 !important;
}

.store-card h4 {
  font-size: 13px !important;
  white-space: nowrap;
}

.store-card p {
  font-size: 10px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Main content should remain correct */
.main {
  min-height: 100vh;
}