:root{
  --ccs-bg:#ffffff;
  --ccs-ink:#111827;
  --ccs-muted:#6b7280;
  --ccs-line:#e5e7eb;
  --ccs-card:#ffffff;
  --ccs-primary:#111111;
  --ccs-primary-ink:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ccs-ink);background:var(--ccs-bg)}
a{color:inherit}

.ccs-auth .ccs-auth-wrap{max-width:420px;margin:80px auto;padding:0 18px}
.ccs-auth-wrap input,.ccs-auth-wrap button{width:100%;padding:12px;margin:8px 0;border:1px solid var(--ccs-line);border-radius:10px}
.ccs-auth-wrap button{background:var(--ccs-primary);color:var(--ccs-primary-ink);border:none;cursor:pointer}

.ccs-shell{display:flex;height:100vh}
.ccs-sidebar{width:240px;background:#0b0b0b;color:#fff;padding:18px}
.ccs-brand{font-weight:700;margin-bottom:14px}
.ccs-menu a{display:block;padding:10px 10px;border-radius:10px;text-decoration:none}
.ccs-menu a:hover{background:rgba(255,255,255,0.08)}
.ccs-main{flex:1;display:flex;flex-direction:column;min-width:0}
.ccs-topbar{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--ccs-line);background:#fafafa}
.ccs-content{padding:18px}

.ccs-onboarding .ccs-ob-shell{display:grid;grid-template-columns:1.1fr 0.9fr;min-height:100vh}
.ccs-onboarding .ccs-ob-left{padding:36px 36px 28px;max-width:720px}
.ccs-onboarding .ccs-ob-right{position:relative;overflow:hidden;background:#111}
.ccs-onboarding .ccs-ob-right img{width:100%;height:100%;object-fit:cover;display:block;opacity:0.92}
.ccs-onboarding .ccs-ob-right .ccs-ob-overlay{position:absolute;inset:0;background:linear-gradient(120deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15))}
.ccs-onboarding .ccs-logo{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:20px}
.ccs-onboarding .ccs-progress{height:8px;border-radius:999px;background:var(--ccs-line);overflow:hidden;margin:8px 0 26px}
.ccs-onboarding .ccs-progress > div{height:100%;background:#111;border-radius:999px;width:0%}
.ccs-onboarding h1{font-size:34px;margin:0 0 6px}
.ccs-onboarding .subtitle{color:var(--ccs-muted);margin:0 0 18px}
.ccs-onboarding .field{margin:16px 0}
.ccs-onboarding .label{font-weight:600;margin-bottom:8px}
.ccs-onboarding .pill-row{display:flex;flex-wrap:wrap;gap:10px}
.ccs-onboarding .pill{border:1px solid var(--ccs-line);background:var(--ccs-card);padding:10px 14px;border-radius:999px;cursor:pointer}
.ccs-onboarding .pill.active{border-color:#111;box-shadow:0 0 0 2px rgba(17,17,17,0.1)}
.ccs-onboarding select,.ccs-onboarding input{width:100%;padding:12px 12px;border:1px solid var(--ccs-line);border-radius:12px}
.ccs-onboarding .cards{display:grid;gap:12px}
.ccs-onboarding .card{border:1px solid var(--ccs-line);border-radius:14px;padding:14px;cursor:pointer;background:#fff}
.ccs-onboarding .card.active{border-color:#111;box-shadow:0 0 0 2px rgba(17,17,17,0.12)}
.ccs-onboarding .card .desc{color:var(--ccs-muted);font-size:13px;margin-top:4px}
.ccs-onboarding .footer{display:flex;justify-content:space-between;align-items:center;margin-top:28px}
.ccs-onboarding .btn{border:none;border-radius:12px;padding:12px 18px;cursor:pointer}
.ccs-onboarding .btn.primary{background:#111;color:#fff;min-width:140px}
.ccs-onboarding .btn.ghost{background:transparent;color:#111}
.ccs-onboarding .plan-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}
.ccs-onboarding .plan{border:1px solid var(--ccs-line);border-radius:16px;padding:18px;background:#fff;cursor:pointer}
.ccs-onboarding .plan.active{border-color:#111;box-shadow:0 0 0 2px rgba(17,17,17,0.12)}
.ccs-onboarding .plan .tag{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;background:#fbbf24;color:#111;font-weight:700}
.ccs-onboarding .plan h3{margin:12px 0 8px}
.ccs-onboarding .plan ul{margin:0;padding-left:18px;color:var(--ccs-muted)}
.ccs-onboarding .invite-row{display:grid;grid-template-columns:1fr 1fr 160px;gap:10px;align-items:center;margin:10px 0}
.ccs-onboarding .invite-row select,.ccs-onboarding .invite-row input{margin:0}
.ccs-onboarding .small-muted{color:var(--ccs-muted);font-size:13px}
@media (max-width: 980px){
  .ccs-onboarding .ccs-ob-shell{grid-template-columns:1fr}
  .ccs-onboarding .ccs-ob-right{display:none}
  .ccs-onboarding .plan-grid{grid-template-columns:1fr}
  .ccs-onboarding .invite-row{grid-template-columns:1fr}
}


/* === Houzz-style dashboard layout (v0.3.0) === */
.ccs-app{background:#f6f4ef}
.ccs-app-shell{height:100vh;display:flex}
.ccs-side{
  width:74px;background:#1f1f1f;color:#fff;display:flex;flex-direction:column;align-items:center;
  padding:10px 0;gap:10px
}
.ccs-side .logo{width:42px;height:42px;border-radius:12px;background:#111;display:flex;align-items:center;justify-content:center;font-weight:800}
.ccs-side .nav{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.ccs-side .nav a{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;opacity:.85}
.ccs-side .nav a.active,.ccs-side .nav a:hover{background:rgba(255,255,255,.10);opacity:1}
.ccs-side .bottom{margin-top:auto;display:flex;flex-direction:column;gap:12px;align-items:center;padding-bottom:10px}
.ccs-mainwrap{flex:1;display:flex;flex-direction:column;min-width:0}
.ccs-top{
  height:62px;background:#f6f4ef;border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:14px
}
.ccs-top .ws{display:flex;align-items:center;gap:10px}
.ccs-top .ws .ccs-ws-badge{width:28px;height:28px;border-radius:10px;background:#ff7a00;display:inline-block}
.ccs-top .right{display:flex;align-items:center;gap:10px}
.ccs-pillbtn{background:#111;color:#fff;border:none;border-radius:10px;padding:10px 12px;cursor:pointer}
.ccs-contentwrap{flex:1;overflow:auto;padding:16px}
.ccs-setup{
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px 16px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.ccs-setup .meta{display:flex;flex-direction:column;gap:6px}
.ccs-setup .title{font-weight:700}
.ccs-setup .status{color:#6b7280;font-size:13px}
.ccs-setup .bar{height:8px;background:#efefef;border-radius:999px;overflow:hidden;min-width:240px}
.ccs-setup .bar > div{height:100%;background:#111;width:25%}
.ccs-grid{
  display:grid;grid-template-columns: 1.55fr 0.75fr;gap:14px;align-items:start
}
.ccs-card{
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px
}
.ccs-card h3{margin:0 0 10px;font-size:14px}
.ccs-card .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ccs-btn{background:#111;color:#fff;border:none;border-radius:10px;padding:9px 12px;cursor:pointer;font-size:13px}
.ccs-btn.ghost{background:transparent;color:#111;border:1px solid rgba(0,0,0,.14)}
.ccs-list{display:flex;flex-direction:column;gap:10px}
.ccs-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px;border:1px solid rgba(0,0,0,.06);border-radius:12px}
.ccs-item .sub{color:#6b7280;font-size:12px}
.ccs-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ccs-tab{font-size:12px;border:1px solid rgba(0,0,0,.10);border-radius:999px;padding:6px 10px;background:#fff}
.ccs-tab.active{background:#111;color:#fff;border-color:#111}
.ccs-creategrid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px}
.ccs-create{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:#fff;cursor:pointer}
.ccs-create .icon{width:40px;height:40px;border-radius:12px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;position:relative}
.ccs-create .lock{position:absolute;right:6px;bottom:6px;font-size:12px;opacity:.65}
.ccs-create .label{font-size:12px;text-align:center}
.ccs-muted{color:#6b7280;font-size:12px}
.ccs-supportgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ccs-support{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid rgba(0,0,0,.08);border-radius:12px;text-decoration:none}
@media (max-width: 1100px){
  .ccs-grid{grid-template-columns:1fr}
}

.ccs-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:9999}
.ccs-modalbox{width:min(520px,92vw);background:#fff;border-radius:14px;padding:16px;border:1px solid rgba(0,0,0,.10)}


/* Estimates list */
.ccs-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ccs-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--ccs-line);border-radius:12px;background:var(--ccs-card);cursor:pointer}
.ccs-row:hover{box-shadow:0 1px 8px rgba(0,0,0,0.05)}
.ccs-row-main{display:flex;flex-direction:column;gap:4px}
.ccs-row-title{font-weight:700;color:var(--ccs-ink)}
.ccs-row-sub{color:var(--ccs-muted);font-size:12px}
.ccs-row-meta{display:flex;align-items:center;gap:10px}
.ccs-amt{font-weight:700;color:var(--ccs-ink)}
.ccs-empty{padding:14px;color:var(--ccs-muted)}


/* === Sidebar labels + collapse toggle (Houzz-style) === */
.ccs-side { width: 230px; transition: width .18s ease; }
.ccs-side .nav a { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; margin:6px 10px; color:inherit; text-decoration:none; }
.ccs-side .nav a .ico { width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.ccs-side .nav a .lbl { font-size:14px; font-weight:600; white-space:nowrap; opacity:1; transition: opacity .12s ease; }
.ccs-side .nav a.active { background: rgba(255,255,255,.08); }
.ccs-side .nav a:hover { background: rgba(255,255,255,.06); }
.ccs-side .toggle { display:flex; justify-content:center; padding:10px 0 6px; }
.ccs-side .toggle button { width:42px; height:42px; border-radius:14px; border:0; cursor:pointer; background: rgba(255,255,255,.08); color:#fff; font-size:16px; }
.ccs-side.collapsed { width: 74px; }
.ccs-side.collapsed .nav a { justify-content:center; padding:12px 0; margin:6px 12px; }
.ccs-side.collapsed .nav a .lbl { opacity:0; width:0; overflow:hidden; }
.ccs-side.collapsed .logo { justify-content:center; }
.ccs-side.collapsed .bottom a { margin:6px 12px; }
@media (max-width: 920px){
  .ccs-side { width: 74px; }
  .ccs-side .nav a .lbl { opacity:0; width:0; overflow:hidden; }
}


/* === Sidebar: Houzz-style (icon with small label under) === */
.ccs-side { width: 92px !important; }
.ccs-side .toggle { padding: 10px 0 2px; }
.ccs-side .toggle button { width:42px; height:42px; border-radius:14px; }

.ccs-side .nav a{
  display:flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 8px !important;
  margin: 6px 10px !important;
  border-radius: 14px !important;
}
.ccs-side .nav a .ico{
  width: 26px !important;
  height: 26px !important;
  font-size: 18px !important;
}
.ccs-side .nav a .lbl{
  font-size: 11px !important;
  font-weight: 600 !important;
  opacity: .92 !important;
  line-height: 1.1 !important;
  width: 100% !important;
  text-align:center !important;
}
.ccs-side.collapsed { width: 64px !important; }
.ccs-side.collapsed .nav a{ padding: 12px 0 !important; margin: 6px 12px !important; }
.ccs-side.collapsed .nav a .lbl{ opacity:0 !important; height:0 !important; width:0 !important; overflow:hidden !important; }
.ccs-side .bottom{ display:flex; flex-direction:column; align-items:center; gap: 6px; padding-bottom: 10px; }
.ccs-side .bottom a{ margin: 0 !important; width: 44px; height: 44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); text-decoration:none; color:#fff; }
.ccs-side .bottom a:hover{ background: rgba(255,255,255,.09); }

@media (max-width: 920px){
  .ccs-side { width: 64px !important; }
  .ccs-side .nav a .lbl{ opacity:0 !important; height:0 !important; width:0 !important; overflow:hidden !important; }
}


/* === FORCE Houzz vertical icon + label centered === */
.ccs-side .nav a{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.ccs-side .nav a .ico{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
}

.ccs-side .nav a .lbl{
  display:block !important;
  text-align:center !important;
  width:100% !important;
  margin-top:6px !important;
}