/* =========================================================
   CHILLBUILDER — MASTER CSS
   Home + Create Website Flow + User Dashboard
   Bootstrap 5 compatible
   ========================================================= */

/* ---------- Global ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#1769e8;
  --primary-dark:#0d55c9;
  --ink:#111827;
  --dashboard-ink:#283241;
  --muted:#697386;
  --dashboard-muted:#748091;
  --line:#e6ebf2;
  --soft:#f7f9fc;
  --dashboard-bg:#f4f6f8;
  --white:#fff;
  --green:#2e9b62;
  --orange:#d98a25;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:"Noto Serif Bengali",serif;
}

a{text-decoration:none}

/* =========================================================
   HOME PAGE
   ========================================================= */

.navbar{
  border-top:4px solid #1558a9;
  border-bottom:1px solid var(--line);
  background:#fff;
}

/* Scoped so it never conflicts with Dashboard sidebar branding */
.navbar .brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
}

.navbar .brand-logo{
  width:55px;
  height:55px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--primary);
  font-size:40px;
  font-weight:800;
}

.brand-title{font-size:23px;font-weight:700;line-height:1.05}
.brand-sub{font-size:12px;color:#667085;line-height:1.2;margin-top:3px}

.navbar .nav-link{
  font-size:22px;
  color:#555d6d!important;
  padding-left:14px!important;
  padding-right:14px!important;
}

.navbar .nav-link:hover{color:var(--primary)!important}

.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  border-radius:7px;
  font-weight:700;
}

.btn-primary:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
}

.btn-outline-primary{border-radius:7px;font-weight:700}

.hero{
  padding:68px 0 28px;
  background:
    radial-gradient(circle at 82% 20%,rgba(23,105,232,.08),transparent 29%),
    linear-gradient(180deg,#fff 0,#fbfdff 100%);
}

.hero-kicker{
  color:#1258a7;
  font-size:15px;
  font-weight:600;
  margin-bottom:16px;
}

.hero h1{
  font-size:clamp(40px,5vw,66px);
  line-height:1.18;
  letter-spacing:-1.8px;
  font-weight:700;
  margin:0;
}

.hero h1 span{color:var(--primary)}

.hero-copy{
  color:#596273;
  font-size:20px;
  line-height:1.85;
  max-width:650px;
  margin:22px 0 24px;
}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-actions .btn{padding:11px 20px;font-size:17px}

.benefits{
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  margin-top:24px;
}

.benefit{font-size:18px;color:#4e5665}
.benefit::before{
  content:"✓";
  color:var(--primary);
  font-weight:800;
  margin-right:6px;
}

.hero-art{
  position:relative;
  min-height:450px;
}

.browser{
  position:absolute;
  border:1px solid #e1e6ee;
  border-radius:14px;
  background:#fff;
  box-shadow:0 25px 60px rgba(24,43,74,.13);
  overflow:hidden;
}

.browser-main{width:76%;right:7%;top:8px;z-index:3}
.browser-back{width:48%;left:1%;top:105px;transform:rotate(-5deg);z-index:2}
.browser-side{width:43%;right:0;top:190px;transform:rotate(5deg);z-index:2}

.browser-bar{
  height:28px;
  background:#f5f7fa;
  border-bottom:1px solid #e8edf3;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 10px;
}

.dot{width:7px;height:7px;border-radius:50%;background:#d4d9e2}
.page{padding:11px}
.page-nav{height:16px;background:#edf1f6;border-radius:5px;margin-bottom:9px}

.cover{
  height:155px;
  border-radius:9px;
  background:linear-gradient(135deg,#102e62,#2879d8 60%,#84c7ff);
  position:relative;
  overflow:hidden;
}

.cover:before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  right:-30px;
  top:-60px;
}

.cover-text{
  position:absolute;
  left:18px;
  top:27px;
  color:#fff;
  font-size:19px;
  font-weight:700;
  max-width:210px;
}

.content-lines{display:grid;gap:7px;margin-top:10px}
.line{height:8px;background:#e9edf3;border-radius:8px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.mini-card{height:58px;background:#eef2f7;border-radius:8px}

.shop-cover{
  height:110px;
  border-radius:9px;
  background:linear-gradient(135deg,#17633b,#6bc37e);
  position:relative;
}

.shop-cover:after{
  content:"";
  position:absolute;
  width:60px;
  height:60px;
  background:rgba(255,255,255,.25);
  border-radius:12px;
  right:22px;
  top:24px;
}

.corp-cover{
  height:105px;
  border-radius:9px;
  background:linear-gradient(135deg,#233a61,#5d87b7);
  position:relative;
}

.corp-cover:before{
  content:"";
  position:absolute;
  left:18px;
  right:70px;
  bottom:15px;
  height:7px;
  background:rgba(255,255,255,.6);
  border-radius:8px;
}

.stats{
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 10px 28px rgba(30,50,80,.06);
  padding:20px 0;
}

.stat{border-right:1px solid var(--line);text-align:center}
.stat:last-child{border-right:0}
.stat-number{font-size:30px;font-weight:800}
.stat-label{color:var(--muted);font-size:20px}

.section{padding:72px 0}
.section-soft{background:var(--soft)}
.section-title{text-align:center;font-size:45px;font-weight:700;margin-bottom:8px}
.section-sub{text-align:center;color:var(--muted);font-size:20px;margin-bottom:38px}

.feature{
  height:100%;
  padding:27px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.feature-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  background:#edf4ff;
  color:var(--primary);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:19px;
  margin-bottom:16px;
}

.feature h5{font-weight:700}
.feature p{color:var(--muted);line-height:1.8;margin:0}

.template-card{
  height:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px;
}

.template-preview{
  height:175px;
  border-radius:10px;
  overflow:hidden;
  background:#edf1f6;
  padding:10px;
}

.template-card h5{font-weight:700;margin:16px 3px 4px}
.template-card p{color:var(--muted);font-size:14px;margin:0 3px 13px}

footer{
  background:#101827;
  color:#fff;
  padding:48px 0 22px;
}

footer .brand-title{color:#fff}
footer .brand-sub{color:#aeb8c7}
footer p,footer li{color:#aeb8c7;font-size:14px;line-height:1.9}
footer a{color:#cbd3df;text-decoration:none}
footer a:hover{color:#fff}

/* =========================================================
   CREATE WEBSITE FLOW
   ========================================================= */

.create-page{
  background:var(--soft);
  color:var(--ink);
}

.create-page .topbar{
  height:4px;
  background:#1558a9;
}

.create-page .brand{
  color:var(--ink);
  font-weight:700;
  font-size:22px;
}

.create-page .brand span{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  background:var(--primary);
  color:#fff;
  border-radius:12px;
  margin-right:9px;
}

.step-wrap{
  background:#fff;
  border-bottom:1px solid var(--line);
}

.steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:18px 10px;
}

.step{
  display:flex;
  align-items:center;
  color:#a0a7b3;
  font-size:20px;
}

.step .num{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid #d8dee8;
  background:#fff;
  font-weight:700;
}

.step.active{color:var(--primary);font-weight:700}
.step.active .num{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.step.done{color:#23834c}
.step.done .num{
  background:#e9f7ef;
  border-color:#b9e4ca;
  color:#23834c;
}

.connector{
  width:70px;
  height:1px;
  background:#dce2ea;
  margin:0 10px;
}

.card-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 12px 35px rgba(31,50,80,.06);
}

.page-title{
  font-size:31px;
  font-weight:700;
}

.page-sub{
  color:var(--muted);
  line-height:1.8;
}

.form-control,.form-select{
  border-color:#dbe2ea;
  border-radius:9px;
  padding:12px 14px;
}

.form-control:focus,.form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(23,105,232,.1);
}

.create-page .btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  border-radius:8px;
  font-weight:700;
  padding:11px 22px;
}

.create-page .btn-primary:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
}

.option-card{
  height:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:24px;
  cursor:pointer;
  transition:.18s;
}

.option-card:hover,.option-card.selected{
  border-color:var(--primary);
  box-shadow:0 8px 25px rgba(23,105,232,.1);
  transform:translateY(-2px);
}

.option-icon{
  width:52px;
  height:52px;
  border-radius:13px;
  background:#edf4ff;
  color:var(--primary);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:20px;
}

.option-card.selected .option-icon{
  background:var(--primary);
  color:#fff;
}

.create-page .template-preview{
  height:205px;
  border-radius:11px;
  overflow:hidden;
  background:#edf1f6;
  padding:11px;
}

.preview-top{
  height:14px;
  background:#dce3eb;
  border-radius:4px;
  margin-bottom:8px;
}

.preview-hero{
  height:95px;
  border-radius:7px;
  background:linear-gradient(135deg,#102e62,#2879d8);
  position:relative;
}

.preview-hero.green{background:linear-gradient(135deg,#17633b,#6bc37e)}
.preview-hero.purple{background:linear-gradient(135deg,#57267f,#a05bd2)}
.preview-hero.blue{background:linear-gradient(135deg,#233a61,#5d87b7)}

.preview-title{
  position:absolute;
  color:#fff;
  font-weight:700;
  left:13px;
  top:16px;
  font-size:15px;
}

.preview-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:8px;
}

.preview-box{
  height:42px;
  border-radius:6px;
  background:#dce3eb;
}

.style-preview{
  border-radius:12px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#fff;
}

.style-head{
  height:58px;
  padding:10px 14px;
  background:#102e62;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.style-body{padding:15px}

.style-body .big{
  height:110px;
  border-radius:9px;
  background:linear-gradient(135deg,#dbe9ff,#edf5ff);
  margin-bottom:12px;
}

.color-choice{
  width:54px;
  height:54px;
  border-radius:10px;
  border:3px solid #fff;
  box-shadow:0 0 0 1px #dce2ea;
  cursor:pointer;
}

.color-choice.selected{
  box-shadow:0 0 0 2px var(--primary);
}

.success-icon{
  width:80px;
  height:80px;
  border-radius:50%;
  background:#eaf8ef;
  color:#23834c;
  display:grid;
  place-items:center;
  font-size:42px;
  margin:0 auto 22px;
}

.domain-box{
  background:#f4f8ff;
  border:1px solid #d9e8ff;
  border-radius:12px;
  padding:17px;
}

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

.dashboard-page{
  background:var(--dashboard-bg);
  color:var(--dashboard-ink);
}

/* Dashboard brand is scoped to sidebar */
.dashboard-page .sidebar .brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px 25px;
  border-bottom:1px solid #e5e9ef;
  text-decoration:none;
  color:var(--dashboard-ink);
}

.dashboard-page .brand-logo{
  width:40px;
  height:40px;
  border-radius:11px;
  background:var(--primary);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:21px;
}

.dashboard-page .brand-name{
  font-size:21px;
  font-weight:700;
  line-height:1;
}

.dashboard-page .brand-sub{
  font-size:10px;
  color:#8791a0;
  margin-top:4px;
}

.dashboard-page .sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:245px;
  background:#fff;
  border-right:1px solid #e5e9ef;
  padding:22px 15px;
  z-index:20;
}

.dashboard-page .nav-title{
  font-size:11px;
  color:#9aa3af;
  padding:24px 12px 8px;
}

.dashboard-page .nav-link{
  display:flex;
  align-items:center;
  gap:11px;
  color:#687384;
  border-radius:8px;
  padding:11px 12px;
  margin:3px 0;
  font-size:18px;
  text-decoration:none;
}

.dashboard-page .nav-link:hover{
  background:#f3f6fa;
  color:var(--dashboard-ink);
}

.dashboard-page .nav-link.active{
  background:#edf4ff;
  color:var(--primary);
  font-weight:700;
}

.dashboard-page .icon{
  width:20px;
  text-align:center;
  font-weight:700;
}

.dashboard-page .bottom-nav{
  position:absolute;
  left:15px;
  right:15px;
  bottom:15px;
  border-top:1px solid #e5e9ef;
  padding-top:12px;
}

.dashboard-page .main{
  margin-left:245px;
  min-height:100vh;
}

.dashboard-page .topbar{
  height:70px;
  background:#fff;
  border-bottom:1px solid #e5e9ef;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
}

.dashboard-page .page-title{
  font-size:23px;
  font-weight:700;
  margin:0;
}

.dashboard-page .welcome{
  font-size:12px;
  color:var(--dashboard-muted);
  margin-top:3px;
}

.dashboard-page .user{
  display:flex;
  align-items:center;
  gap:10px;
}

.dashboard-page .avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#e7eef9;
  color:var(--primary);
  display:grid;
  place-items:center;
  font-weight:700;
}

.dashboard-page .content{padding:28px 30px}

.dashboard-page .stat-card{
  background:#fff;
  border:1px solid #e5e9ef;
  border-radius:12px;
  padding:19px;
  min-height:132px;
}

.dashboard-page .stat-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--dashboard-muted);
  font-size:18px;
}

.dashboard-page .stat-icon{
  width:38px;
  height:38px;
  border-radius:9px;
  background:#f1f5f9;
  display:grid;
  place-items:center;
  color:var(--primary);
  font-weight:700;
}

.dashboard-page .stat-value{
  font-size:25px;
  font-weight:700;
  margin-top:14px;
}

.dashboard-page .stat-meta{
  font-size:14px;
  color:var(--dashboard-muted);
  margin-top:2px;
}

.dashboard-page .usage-card,
.dashboard-page .panel{
  background:#fff;
  border:1px solid #e5e9ef;
  border-radius:12px;
  padding:22px;
}

.dashboard-page .panel-title{
  font-size:22px;
  font-weight:700;
  margin:0;
}

.dashboard-page .panel-sub{
  font-size:15px;
  color:var(--dashboard-muted);
}

.dashboard-page .progress{
  height:8px;
  background:#edf0f4;
  border-radius:10px;
}

.dashboard-page .progress-bar{
  background:var(--primary);
  border-radius:10px;
}

.dashboard-page .progress.green .progress-bar{
  background:var(--green);
}

.dashboard-page .usage-number{
  font-size:14px;
  font-weight:700;
}

.dashboard-page .usage-small{
  font-size:15px;
  color:var(--dashboard-muted);
}

.dashboard-page .website-row{
  border:1px solid #e5e9ef;
  border-radius:10px;
  padding:15px 16px;
  background:#fff;
}

.dashboard-page .site-icon{
  width:42px;
  height:42px;
  border-radius:10px;
  background:#eef4ff;
  color:var(--primary);
  display:grid;
  place-items:center;
  font-weight:700;
}

.dashboard-page .site-name{
  font-size:15px;
  font-weight:700;
}

.dashboard-page .domain{
  font-size:11px;
  color:var(--dashboard-muted);
}

.dashboard-page .badge-soft{
  background:#eaf7ef;
  color:#25804f;
  border-radius:20px;
  padding:5px 9px;
  font-size:10px;
}

.dashboard-page .btn-manage{
  border:1px solid #d9e0e8;
  border-radius:7px;
  background:#fff;
  color:#445063;
  font-size:12px;
  padding:7px 12px;
}

.dashboard-page .quick{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dashboard-page .quick a{
  border:1px solid #e5e9ef;
  background:#fff;
  border-radius:8px;
  padding:10px 14px;
  color:#526071;
  text-decoration:none;
  font-size:15px;
}

.dashboard-page .chart{
  height:180px;
  display:flex;
  align-items:end;
  gap:12px;
  padding-top:20px;
}

.dashboard-page .bar{
  flex:1;
  background:#e4ecfa;
  border-radius:5px 5px 0 0;
  min-height:25px;
}

.dashboard-page .bar.active{background:#8fb5f3}

.dashboard-page .chart-labels{
  display:flex;
  gap:12px;
}

.dashboard-page .chart-labels span{
  flex:1;
  text-align:center;
  color:#9aa3af;
  font-size:10px;
}

.dashboard-page .notice{
  background:#f8fafc;
  border:1px solid #e5e9ef;
  border-radius:9px;
  padding:12px;
  font-size:15px;
  color:#667284;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:991px){
  .hero{padding-top:48px}
  .hero-art{margin-top:35px;min-height:390px}
  .browser-main{width:78%}
  .benefits{gap:14px}

  .dashboard-page .sidebar{
    width:72px;
    padding:15px 9px;
  }

  .dashboard-page .sidebar .brand{
    justify-content:center;
    padding:0 0 18px;
  }

  .dashboard-page .brand-name,
  .dashboard-page .brand-sub,
  .dashboard-page .nav-title,
  .dashboard-page .nav-link span:not(.icon),
  .dashboard-page .bottom-nav .nav-link span:not(.icon){
    display:none;
  }

  .dashboard-page .nav-link{justify-content:center}
  .dashboard-page .main{margin-left:72px}
  .dashboard-page .topbar{padding:0 20px}
  .dashboard-page .content{padding:20px}
}

@media(max-width:767px){
  .connector{width:18px}
  .create-page .step span.label{display:none}
  .steps{justify-content:space-between}
  .create-page .page-title{font-size:25px}
}

@media(max-width:575px){
  .navbar .brand-title{font-size:20px}
  .navbar .brand-sub{font-size:10px}

  .hero h1{
    font-size:38px;
    letter-spacing:-.8px;
  }

  .hero-copy{font-size:15px}
  .hero-art{min-height:315px}
  .browser-main{width:84%;right:5%}
  .browser-back{width:48%;top:85px}
  .browser-side{width:42%;top:140px}
  .cover{height:110px}
  .cover-text{font-size:14px;left:12px;top:18px}

  .stat{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:12px 0;
  }

  .stat:last-child{border-bottom:0}

  .dashboard-page .sidebar{
    width:0;
    padding:0;
    overflow:hidden;
    border:0;
  }

  .dashboard-page .main{margin-left:0}
  .dashboard-page .topbar{height:62px}
  .dashboard-page .content{padding:15px}
  .dashboard-page .page-title{font-size:20px}
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@400;500;600;700&display=swap');
:root{--blue:#1769e8;--ink:#283241;--muted:#748091;--bg:#f4f6f8;--line:#e5e9ef;--white:#fff;--green:#2e9b62;--orange:#d98a25}
*{box-sizing:border-box}
body{font-size:18px; margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Serif Bengali",serif} 
.sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;background:#fff;border-right:1px solid var(--line);padding:22px 15px;z-index:20}
.brand{display:flex;align-items:center;gap:10px;padding:0 0px 0px;border-bottom:0px solid var(--line);text-decoration:none;color:var(--ink)}
.brand-logo{width:40px;height:40px;border-radius:11px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:21px}
.brand-name{font-size:21px;font-weight:700;line-height:1}
.brand-sub{font-size:15px;color:#8791a0;margin-top:4px}
.nav-title{font-size:11px;color:#9aa3af;padding:24px 12px 8px}
.nav-link{display:flex;align-items:center;gap:11px;color:#687384;border-radius:8px;padding:11px 12px;margin:3px 0;font-size:14px;text-decoration:none}
.nav-link:hover{background:#f3f6fa;color:var(--ink)}
.nav-link.active{background:#edf4ff;color:var(--blue);font-weight:700}
.icon{width:20px;text-align:center;font-weight:700}
.bottom-nav{position:absolute;left:15px;right:15px;bottom:15px;border-top:1px solid var(--line);padding-top:12px}
.main{margin-left:245px;min-height:100vh}
.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px}
.page-title{font-size:40px;font-weight:700;margin:0}
.welcome{font-size:12px;color:var(--muted);margin-top:3px}
.user{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;background:#e7eef9;color:var(--blue);display:grid;place-items:center;font-weight:700}
.content{padding:28px 30px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:19px;min-height:132px}
.stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}
.stat-icon{width:38px;height:38px;border-radius:9px;background:#f1f5f9;display:grid;place-items:center;color:var(--blue);font-weight:700}
.stat-value{font-size:25px;font-weight:700;margin-top:14px}.stat-meta{font-size:11px;color:var(--muted);margin-top:2px}
.usage-card,.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.panel-title{font-size:17px;font-weight:700;margin:0}.panel-sub{font-size:12px;color:var(--muted)}
.progress{height:8px;background:#edf0f4;border-radius:10px}.progress-bar{background:var(--blue);border-radius:10px}
.progress.green .progress-bar{background:var(--green)}
.usage-number{font-size:14px;font-weight:700}.usage-small{font-size:11px;color:var(--muted)}
.website-row{border:1px solid var(--line);border-radius:10px;padding:15px 16px;background:#fff}
.site-icon{width:42px;height:42px;border-radius:10px;background:#eef4ff;color:var(--blue);display:grid;place-items:center;font-weight:700}
.site-name{font-size:15px;font-weight:700}.domain{font-size:11px;color:var(--muted)}
.badge-soft{background:#eaf7ef;color:#25804f;border-radius:20px;padding:5px 9px;font-size:10px}
.btn-manage{border:1px solid #d9e0e8;border-radius:7px;background:#fff;color:#445063;font-size:12px;padding:7px 12px}
.quick{display:flex;gap:10px;flex-wrap:wrap}.quick a{border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px 14px;color:#526071;text-decoration:none;font-size:12px}
.chart{height:180px;display:flex;align-items:end;gap:12px;padding-top:20px}.bar{flex:1;background:#e4ecfa;border-radius:5px 5px 0 0;min-height:25px}.bar.active{background:#8fb5f3}
.chart-labels{display:flex;gap:12px}.chart-labels span{flex:1;text-align:center;color:#9aa3af;font-size:10px}
.notice{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:12px;font-size:12px;color:#667284}
@media(max-width:991px){.sidebar{width:72px;padding:15px 9px}.brand{justify-content:center;padding:0 0 18px}.brand-name,.brand-sub,.nav-title,.nav-link span:not(.icon),.bottom-nav .nav-link span:not(.icon){display:none}.nav-link{justify-content:center}.main{margin-left:72px}.topbar{padding:0 20px}.content{padding:20px}}
@media(max-width:575px){.sidebar{width:0;padding:0;overflow:hidden;border:0}.main{margin-left:0}.topbar{height:62px}.content{padding:15px}.page-title{font-size:20px}}






.cb-sites-page {
    background: #f5f6f8;
    min-height: 100vh;
    color: #283241;
    font-family: "Noto Serif Bengali", serif;
}

.cb-sites-page .cb-sites-content {
    padding: 28px 30px;
}

/* Page heading */
.cb-sites-page .cb-sites-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.cb-sites-page .cb-sites-title {
    margin: 0;
    font-size: 25px;
    line-height: 1.4;
    font-weight: 700;
    color: #252d39;
}

.cb-sites-page .cb-sites-subtitle {
    margin: 5px 0 0;
    color: #7a8492;
    font-size: 12px;
    line-height: 1.7;
}

.cb-sites-page .cb-sites-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 17px;
    border: 1px solid #1769e8;
    border-radius: 8px;
    background: #1769e8;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .18s ease;
}

.cb-sites-page .cb-sites-create-btn:hover {
    background: #0f5bcf;
    border-color: #0f5bcf;
    color: #fff;
}

/* Summary cards */
.cb-sites-page .cb-sites-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.cb-sites-page .cb-summary-card {
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 11px;
    padding: 17px 18px;
}

.cb-sites-page .cb-summary-label {
    color: #7b8593;
    font-size: 12px;
}

.cb-sites-page .cb-summary-value {
    margin-top: 5px;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 700;
    color: #283241;
}

/* Search/filter toolbar */
.cb-sites-page .cb-sites-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 16px;
    margin-bottom: 13px;
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 11px;
}

.cb-sites-page .cb-sites-search {
    position: relative;
    flex: 1;
    max-width: 390px;
}

.cb-sites-page .cb-sites-search input {
    width: 100%;
    height: 40px;
    padding: 8px 13px 8px 38px;
    border: 1px solid #dfe4eb;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #283241;
    font-family: inherit;
    font-size: 12px;
}

.cb-sites-page .cb-sites-search input::placeholder {
    color: #a0a8b3;
}

.cb-sites-page .cb-sites-search input:focus {
    border-color: #a9c8f5;
    box-shadow: 0 0 0 3px rgba(23, 105, 232, .07);
}

.cb-sites-page .cb-sites-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b95a3;
    font-size: 14px;
    pointer-events: none;
}

.cb-sites-page .cb-sites-filter {
    height: 40px;
    min-width: 145px;
    padding: 7px 12px;
    border: 1px solid #dfe4eb;
    border-radius: 8px;
    background: #fff;
    color: #596576;
    font-family: inherit;
    font-size: 12px;
    outline: none;
}

/* Website list */
.cb-sites-page .cb-sites-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cb-sites-page .cb-site-item {
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 11px;
    padding: 16px 17px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cb-sites-page .cb-site-item:hover {
    border-color: #d5dce6;
    box-shadow: 0 5px 18px rgba(32, 47, 66, .045);
}

.cb-sites-page .cb-site-main {
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) minmax(100px, .6fr) minmax(100px, .6fr) auto;
    align-items: center;
    gap: 18px;
}

.cb-sites-page .cb-site-info {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.cb-sites-page .cb-site-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #edf4ff;
    color: #1769e8;
    font-size: 18px;
    font-weight: 700;
}

.cb-sites-page .cb-site-text {
    min-width: 0;
}

.cb-sites-page .cb-site-name {
    margin: 0 0 2px;
    color: #2c3440;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-sites-page .cb-site-domain {
    color: #7d8795;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-sites-page .cb-site-type,
.cb-sites-page .cb-site-package {
    color: #667181;
    font-size: 11px;
}

.cb-sites-page .cb-site-meta-label {
    display: block;
    margin-bottom: 3px;
    color: #a0a8b3;
    font-size: 10px;
}

.cb-sites-page .cb-site-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 20px;
    background: #eaf7ef;
    color: #25804f;
    font-size: 10px;
    white-space: nowrap;
}

.cb-sites-page .cb-site-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #39a96b;
}

/* Action buttons */
.cb-sites-page .cb-site-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.cb-sites-page .cb-site-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #dce2e9;
    border-radius: 7px;
    background: #fff;
    color: #596576;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: .18s ease;
}

.cb-sites-page .cb-site-action:hover {
    border-color: #b8c8dd;
    background: #f7f9fc;
    color: #1769e8;
}

.cb-sites-page .cb-site-action.primary {
    border-color: #1769e8;
    background: #1769e8;
    color: #fff;
}

.cb-sites-page .cb-site-action.primary:hover {
    border-color: #0f5bcf;
    background: #0f5bcf;
    color: #fff;
}

/* Empty state */
.cb-sites-page .cb-sites-empty {
    padding: 55px 25px;
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 11px;
    text-align: center;
}

.cb-sites-page .cb-empty-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 13px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #edf4ff;
    color: #1769e8;
    font-size: 22px;
}

.cb-sites-page .cb-empty-title {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
}

.cb-sites-page .cb-empty-text {
    margin: 0;
    color: #7b8593;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 1100px) {
    .cb-sites-page .cb-site-main {
        grid-template-columns: minmax(250px, 1.5fr) minmax(90px, .55fr) minmax(90px, .55fr);
    }

    .cb-sites-page .cb-site-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 3px;
        border-top: 1px solid #f0f2f5;
    }
}

@media (max-width: 767px) {
    .cb-sites-page .cb-sites-content {
        padding: 20px 15px;
    }

    .cb-sites-page .cb-sites-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .cb-sites-page .cb-sites-create-btn {
        width: 100%;
    }

    .cb-sites-page .cb-sites-summary {
        grid-template-columns: 1fr;
    }

    .cb-sites-page .cb-sites-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .cb-sites-page .cb-sites-search {
        max-width: none;
    }

    .cb-sites-page .cb-sites-filter {
        width: 100%;
    }

    .cb-sites-page .cb-site-main {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .cb-sites-page .cb-site-actions {
        grid-column: auto;
        padding-top: 12px;
    }

    .cb-sites-page .cb-site-action {
        flex: 1;
    }
}

@media (max-width: 430px) {
    .cb-sites-page .cb-site-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .cb-sites-page .cb-site-action {
        width: 100%;
    }
}

.color-choice {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 1px #d1d5db;
    transition: all 0.2s ease;
}

.color-choice:hover {
    transform: scale(1.08);
}

.color-option input:checked + .color-choice {
    box-shadow: 0 0 0 3px #1769e8;
    transform: scale(1.08);
}