/* Caring Communities Auth Styles */
:root{
  --cc-primary:#2db89b;
  --cc-primary-dark:#289f87;
  --cc-bg:#ffffff;
  --cc-border:#e8e8e8;
  --cc-text:#222;
  --cc-muted:#6a6a6a;
  --cc-radius:10px;
  --cc-font:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
.cc-auth-wrap{ background:#f5f7f9; }
.cc-auth-card{
  background:#fff;
  display:flex;
  min-height:88vh;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.cc-left,.cc-right{ width:50%; position:relative; }
.cc-right{
  background-size:cover; background-position:center; background-repeat:no-repeat; height: 700px;
}
.cc-left{
  display:flex; align-items:center; justify-content:center;
  padding:48px 56px;
}
.cc-form{ width:100%; max-width:380px; font-family:var(--cc-font); }

.cc-brand {
    display
  text-align: center;   /* optional: centers logo */
  margin-bottom: 20px;
}
.cc-brand img.cc-logo {
  max-width: 180px;   /* ✅ adjust to fit */
  height: auto;       /* keeps proportions */
  display: inline-block;
}

h2{ font-size:22px; margin:0 0 6px; color:var(--cc-text); }
.cc-subtitle{ color:#777; font-size:13px; margin-bottom:20px; }

.cc-field{ margin-bottom:14px; }
.cc-field label{
  display:block; font-size:12px; font-weight:700; margin-bottom:8px; color:#333;
}
.cc-input, .cc-select{
  width:100%; border:1px solid var(--cc-border); border-radius:8px;
  background:#fff; padding:12px 12px; font-size:13px;
}
.cc-helper{ font-size:11px; color:#888; margin-top:6px; }

.cc-actions{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 8px; }
.cc-forgot a{ color:var(--cc-primary); text-decoration:none; font-size:12px; }

.cc-submit{
  width:100%; padding:12px 16px; border:none; border-radius:8px;
  background:var(--cc-primary); color:#fff; font-weight:800; font-size:14px;
  cursor:pointer; transition:background .2s ease, transform .02s;
}
.cc-submit:hover{ background:var(--cc-primary-dark); }
.cc-submit:active{ transform:translateY(1px); }

.cc-bottom{ margin-top:12px; font-size:12px; color:#666; }
.cc-bottom a{ color:var(--cc-primary); font-weight:700; text-decoration:none; }

.cc-msg, .cc-error{
  margin-bottom:12px; padding:10px 12px; border-radius:8px; font-size:13px;
}
.cc-msg{ background:#e7f7f2; color:#135e4d; border:1px solid #c7efe4; }
.cc-error{ background:#fdeeee; color:#7a1f1f; border:1px solid #f6c7c7; }

/* Dashboard */
.cc-dashboard{
  max-width:980px; margin:48px auto; padding:28px; background:#fff;
  border:1px solid var(--cc-border); border-radius:12px;
  font-family:var(--cc-font);
}
.cc-dash-title{ font-size:24px; margin-bottom:4px; }
.cc-dash-sub{ color:#666; }

@media (max-width: 900px){
  .cc-left,.cc-right{ width:100%; }
  .cc-right{ display:none; }
  .cc-form{ max-width:100%; }
}



.cc-logo {
  max-width: 180px;   /* adjust size */
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* End Caring Communities Auth Styles */


/* =========================
   Caring Communities – Admin UI
   (full white layout + gray header bar)
   ========================= */

:root{
  --cc-bg:#ffffff;             /* whole app body now white */
  --cc-card:#fff;
  --cc-border:#eaeef2;
  --cc-muted:#757f8c;
  --cc-ink:#1f2937;
  --cc-accent:#2db89b;
  --cc-accent-dark:#1da88a;
  --cc-active-fill:#36B8AE;    /* solid active pill */
  --cc-active-fill-dark:#1aa28c;
  --cc-header:#f6f7f9;         /* light gray header bar */
  --cc-header-border:#e7eaee;
}

/* ===== Shell ===== */
.cc-shell{
  display:flex;
  gap:0;                       /* fix: remove extra gutter that caused misalignment */
  padding:0;
  min-height:100vh;
  background:var(--cc-bg);
  font-family:var(--cc-font);
}

/* ===== Sidebar (flat, white from top to bottom) ===== */
.cc-side{
  width:240px;
  padding:23px 35px 28px;
  background:#fff;
  border-radius:0;
  box-shadow:none;
  display:flex; flex-direction:column;
  gap: 40px !important;
  border-right:1px solid #fff;   /* visual divider like ref */
}
.cc-side-brand img{max-width:181px; margin-bottom:6px;}

.cc-side-welcome {
    color: #000000;
    font-weight: 400;
    font-size: 25px;
    margin-bottom: 4px;
    font-family: fantasy;
    margin-left: 25px;
}
.cc-side-nav{display:flex; flex-direction:column; gap:14px;}

.cc-side-group{
  margin:0px 6px 8px; font-size:17px; color:#000000;
  position:relative; padding-top:12px; font-weight: 600;
}
.cc-side-group::before{
  content:""; position:absolute; left:-10px; right:-10px; top:0;
  height:1px; background:#eef0f4;
}

/* Links */
.cc-side-link{
  display:flex; align-items:center; gap:10px;
  padding:13px 17px; border-radius:12px;
  color:#AEAEB1; text-decoration:none; font-weight:600; line-height:1;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cc-side-link:hover{background:#f7f8fa;}
.cc-side-link .lbl{
      font-size: 15.5px;
    flex: 1 1 auto;
    font-family: 'Manrope';
    font-weight: 500;
}
.cc-side-link .ico{
  flex:0 0 18px; height:18px; width:18px; border-radius:4px;
   position:relative;
}

/* Active: solid teal pill like the ref snapshot */
.cc-side-link.active{
  background:var(--cc-active-fill); color:#fff !important; border:1px solid transparent;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);
}
.cc-side-link.active:hover{background:var(--cc-active-fill-dark);}

/* Messages badge */

.cc-badge {
    border-radius: 100%;
    font-size: 14px;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f59e0b;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* ===== Sidebar icons via masks (crisp) ===== */
.cc-side-link .ico::before{
  content:""; position:absolute; inset:0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:22px 17px; mask-size:19px 19px;
  background:#AEAEB1;        /* default gray glyph */
}
.ico-dash::before,
.ico-my::before,
.ico-all::before {
  display: inline-block;
  width: 20px;   /* adjust as needed */
  height: 20px;
  background-color: currentColor; /* makes it take the text color */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  content: "";
}

.cc-side-link.active .ico::before{background:#fff;} /* white glyph on teal */

/* glyphs */
.ico-dash::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.ico-my::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}
.ico-all::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h15a1 1 0 0 1 1 1v13H5a2 2 0 0 1-2-2V5z'/%3E%3Cpath d='M15 3v2'/%3E%3Cpath d='M7 8h8'/%3E%3Cpath d='M7 12h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h15a1 1 0 0 1 1 1v13H5a2 2 0 0 1-2-2V5z'/%3E%3Cpath d='M15 3v2'/%3E%3Cpath d='M7 8h8'/%3E%3Cpath d='M7 12h6'/%3E%3C/svg%3E");
}
.ico-discuss::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z'/%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z'/%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83'/%3E%3C/svg%3E");
}
.ico-communities::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M8 18v-2'/%3E%3Cpath d='M12 18v-4'/%3E%3Cpath d='M16 18v-6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M8 18v-2'/%3E%3Cpath d='M12 18v-4'/%3E%3Cpath d='M16 18v-6'/%3E%3C/svg%3E");
}
.ico-messages::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3Cpath d='M8 12h.01'/%3E%3Cpath d='M12 12h.01'/%3E%3Cpath d='M16 12h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3Cpath d='M8 12h.01'/%3E%3Cpath d='M12 12h.01'/%3E%3Cpath d='M16 12h.01'/%3E%3C/svg%3E");
}
.ico-settings::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* ===== Main column ===== */
.cc-main{ flex:1; min-width:0; background:#fff; }

/* IMPORTANT: remove padding from wrap so header can be flush,
   then reapply gutters to children below */
.cc-main-wrap{
  max-width:none;
  margin:0;
  padding:0;                          /* fix: no extra container padding around header */
}
.cc-main-wrap > :not(.cc-top){        /* give the page content its side gutters */
  padding-left:24px;
  padding-right:24px;
}

/* ===== Top header bar (light gray strip across content) ===== */
.cc-top{
  display:flex; align-items:center; justify-content: end;
  background: #FCFCFC;
  padding:20px 24px;                  /* even gutters; matches content */
  margin:0;
}
.cc-top h1{font-size:22px; margin:0; letter-spacing:.1px; color:#111827;}
.cc-sub{color:#6b7280; margin:4px 0 0; font-size:14px;}

.cc-top-right{
  display:flex; align-items:center; gap:23px;  /* fix: explicit layout so button doesn’t jump */
  margin:0;
      flex-direction: row-reverse;
}
.cc-top-right .cc-avatar{ order:1; }
.cc-top-right .cc-top-msg{ order:2; }
.cc-top-right .cc-pill-btn{ order:3; }

/* message/chat icon in header */
.cc-top-msg{
  width:28px; height:28px; border-radius:8px; background:#fff; border:1px solid #e5e7eb;
  display:inline-flex; align-items:center; justify-content:center; position:relative;
}
.cc-top-msg::before{
  content:""; width:16px; height:16px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 10h8M8 14h5M21 15a4 4 0 0 1-4 4H8l-5 4V5a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 10h8M8 14h5M21 15a4 4 0 0 1-4 4H8l-5 4V5a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  background:#6b7280;
}
.cc-top-msg .dot{
  position:absolute; right:-2px; top:-2px; width:8px; height:8px; border-radius:50%;
  background:#f59e0b; box-shadow:0 0 0 2px var(--cc-header);
}

/* logout button: rectangular, subtle radius (not round) */
.cc-pill-btn{
  font-size: 14.5px;
    padding: 10px 29px;
    border: 1.6px solid #000000;
    border-radius: 8px;
    text-decoration: none;
    font-family: system-ui;
    color: #000;
    background: transparent;
    font-weight: 600;
}

/* avatar */
.cc-avatar{
  width:45px; height:45px; border-radius:999px;
  background:#e5f3f0; color:#0f6654;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800;
}

/* ===== Toolbar ===== */
.cc-toolbar{display:flex; align-items:center; justify-content:space-between; margin:8px 0 10px;}
.cc-input{height:40px; padding:0 14px; border:1px solid #e7eaee; border-radius:10px; background:#f6f7f9; font-size:14px;}
.cc-input:focus{outline:none; border-color:#cdd7df; background:#fff; box-shadow:0 0 0 3px rgba(45,184,155,.08);}
.cc-search-input{padding-left:38px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>"); background-repeat:no-repeat; background-position:12px center;}
.cc-search.disabled .cc-input{opacity:.7;}

/* ===== Tabs ===== */
.cc-tabs{display:flex; align-items:center; gap:18px;}
.cc-tabs a{padding:10px 0 12px; text-decoration:none; color:#374151;}
.cc-tabs a.active{color:#111827; font-weight:700; border-bottom:3px solid var(--cc-accent);}
.cc-tabs--line{border-bottom:1px solid #eef0f4; margin-bottom:8px;}
.cc-tabs--line a{padding-bottom:9px;}

/* ===== Cards list ===== */
.cc-list{display:flex; flex-direction:column; gap:14px;}
.cc-card{background:var(--cc-card); border:1px solid var(--cc-border); border-radius:14px; box-shadow:0 2px 12px rgba(17,24,39,.06); padding:0 18px; display:grid; grid-template-columns:1fr auto; align-items:center;}
.cc-card-body{padding:14px 0;}
.cc-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.cc-title{font-weight:700; font-size:16px; letter-spacing:.1px;}
.cc-desc{color:var(--cc-muted); font-size:13px;}
.cc-tag{background:#f6f7f9; border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px; font-size:12px; color:#374151;}
.cc-tag.neutral{background:#e7f7f2; border-color:#c7efe4; color:#0f6654;}
.cc-tag.ghost{background:#f6f7f9;}

.cc-sep{height:1px; background:#eef0f4; margin:12px 0;}

.cc-meta-row{display:grid; grid-template-columns:1fr auto; align-items:center;}
.cc-meta-left{display:flex; align-items:center; gap:18px; color:#6b7280; font-size:13px;}
.cc-avatars{display:flex;}
.cc-avatars .av{width:20px; height:20px; border-radius:999px; background:#e5f3f0; color:#0f6654; font-size:11px; display:flex; align-items:center; justify-content:center; margin-right:-6px; border:2px solid #fff;}
.cc-metric{display:flex; align-items:center; gap:6px;}
.ico-chat, .ico-users{display:inline-block; width:16px; height:16px; background:#d1d5db; border-radius:4px;}
.cc-meta-right{color:#6b7280; font-size:13px;}

.cc-card-actions{display:flex; align-items:center; gap:10px;}
.cc-cta{background:var(--cc-accent); border:none; color:#fff; font-weight:700; padding:8px 14px; border-radius:10px; cursor:pointer;}
.cc-cta:hover{background:var(--cc-accent-dark);}
.cc-check{background:#e7f7f2; color:#0f6654; border:1px solid #c7efe4; border-radius:999px; padding:6px 10px; font-weight:700;}

/* ===== Messages / empty ===== */
.cc-msg, .cc-error{margin:8px 0; padding:10px 12px; border-radius:10px; font-size:13px;}
.cc-msg{background:#e7f7f2; border:1px solid #c7efe4; color:#0f6654;}
.cc-error{background:#fdeeee; border:1px solid #f6c7c7; color:#7a1f1f;}
.cc-empty{background:#fff; border:1px solid var(--cc-border); border-radius:14px; padding:24px; color:#6b7280; text-align:center;}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .cc-main-wrap > :not(.cc-top){ padding-left:16px; padding-right:16px; }
}
@media (max-width: 900px){
  .cc-shell{flex-direction:column;}
  .cc-side{width:100%; border-right:none; border-bottom:1px solid #eef0f4;}
  .cc-card{grid-template-columns:1fr;}
  .cc-meta-row{grid-template-columns:1fr; row-gap:8px;}
}

/* ===== Inner grid (left mini-nav + table panel) ===== */
.cc-grid{display:grid; grid-template-columns:180px 1fr; gap:24px; margin-top:8px;}
.cc-inner-nav{display:flex; flex-direction:column; gap:10px; padding-top:8px;}
.cc-inner-nav a{color:#98a2b3; text-decoration:none; font-size:14px;}
.cc-inner-nav a.active{
  background:#eef8f5; border:1px solid #d2ece5; color:#0f6654;
  font-weight:700; border-radius:10px; padding:8px 10px;
}

.cc-panel{min-width:0;}

/* ===== Table Card ===== */
.cc-table-card{background:#fff; border:1px solid #e8edf0; border-radius:10px; box-shadow:0 1px 2px rgba(16,24,40,.02); overflow:hidden;}
.cc-table-head,.cc-row{display:grid; grid-template-columns:46px 1fr 220px; align-items:center;}
.cc-table-head{padding:10px 14px; background:#f9fafb; border-bottom:1px solid #edf1f4;}
.cc-table-head .th{font-weight:700; color:#4b5563; font-size:14px;}
.cc-table-head .th.right{text-align:right; padding-right:6px;}

.cc-row{padding:12px 14px; border-top:1px solid #f0f3f6;}
.cc-row:first-of-type{border-top:none;}

.cc-check{display:inline-flex; align-items:center; justify-content:center;}
.cc-check input{appearance:none; width:16px; height:16px; border:1px solid #cfd6de; border-radius:4px; background:#fff; position:relative;}
.cc-check input:checked{background:#2db89b; border-color:#2db89b;}
.cc-check input:checked::after{content:''; position:absolute; inset:3px; background:#fff; border-radius:2px;}

.cc-user-cell{display:flex; align-items:center; gap:10px;}
.cc-avatar.sm{width:28px; height:28px; font-size:12px;}
.cc-user-cell .names .n{font-weight:600; color:#1f2937;}
.cc-user-cell .names .e{font-size:12px; color:#8a95a3; margin-top:2px;}

.cc-actions{text-align:right;}
.cc-text-btn{background:none; border:none; padding:0 10px 0 0; font-weight:700; cursor:pointer;}
.cc-text-btn.green{color:#2db89b;}
.cc-text-btn.danger{color:#a33b3b;}
.cc-added{color:#8a95a3; font-weight:700; margin-right:12px;}

/* ===== Dashboard widgets ===== */
.cc-kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding-top:8px; padding-bottom:10px;
}
.cc-kpi{
  background:#fff; border:1px solid #e8edf0; border-radius:12px;
  padding:16px; box-shadow:0 1px 2px rgba(16,24,40,.02);
}
.cc-kpi .k-label{color:#6b7280; font-size:13px; margin-bottom:8px;}
.cc-kpi .k-value{font-size:28px; font-weight:800; letter-spacing:.2px;}

.cc-dash-grid{display:grid;  gap:18px;}
.cc-dash-card{background:#fff; border:1px solid #e8edf0; border-radius:12px; padding:16px;}
.cc-dash-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.cc-dash-head h3{margin:0; font-size:16px;}
.cc-link{font-weight:700; color:#2db89b; text-decoration:none;}
.cc-course-list{display:flex; flex-direction:column; gap:10px;}
.cc-course-row .title{font-weight:700;}
.cc-course-row .meta{color:#6b7280; font-size:13px; margin-top:2px;}

@media (max-width: 1100px){
  .cc-kpis{grid-template-columns:repeat(2,1fr);}
  .cc-dash-grid{grid-template-columns:1fr;}
}

/* === Student course grid === */
.cc-course-grid{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:18px;
}
@media (max-width: 1100px){
  .cc-course-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cc-course-grid{ grid-template-columns: 1fr; }
}

.cc-course{
  background:#fff;
  border:1px solid var(--cc-border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(17,24,39,.06);
  display:flex;
  flex-direction:column;
}

.cc-course-media{
  height:130px;
  background:#e9eef3;
  background-size:cover;
  background-position:center;
}

.cc-course-body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.cc-course-head{ display:flex; align-items:center; justify-content:space-between; }
.cc-course-foot{ display:flex; align-items:center; justify-content:space-between; }

.cc-progress{
  height:8px;
  background:#f1f5f9;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #e5e7eb;
}
.cc-progress-bar{
  height:100%;
  background:var(--cc-accent);
  border-radius:999px;
}

.cc-course-progress-text{ color:#6b7280; font-size:12px; }




/* ========== Course Player ========== */
.cc-course-shell .cc-main-wrap{max-width:1180px}
.cc-course-wrap{padding-top:12px}
.cc-course-headrow{display:flex;justify-content:space-between;gap:20px;margin-bottom:8px}
.cc-course-title{font-size:20px;line-height:1.2;margin:0 0 4px}
.cc-course-sub{font-size:12px;color:#7b8591;margin-bottom:6px}
.cc-course-metas{display:flex;align-items:center;gap:10px}
.cc-meter{display:flex;align-items:center;gap:8px}
.cc-meter-track{width:360px;height:6px;background:#e9edf2;border-radius:999px;overflow:hidden}
.cc-meter-fill{display:block;height:100%;background:#2fc489}
.cc-meter-label{font-size:12px;color:#7b8591}
.cc-meter-val{font-size:12px;font-weight:600}
.cc-dot-sep{width:4px;height:4px;border-radius:50%;background:#d0d6de}
.cc-last{font-size:12px;color:#7b8591}
.cc-course-metachips .chip{background:#eef7ff;color:#2563eb;font-size:12px;padding:4px 8px;border-radius:999px;margin-left:6px}

/* grid */
.cc-player-grid{display:grid;grid-template-columns: minmax(0,1fr) 340px;gap:18px;margin-top:12px}
.cc-player-card{background:#fff;border:1px solid #e6ebf1;border-radius:10px;overflow:hidden}
.cc-player{width:100%;aspect-ratio:16/9;display:block;background:#000;border-bottom:1px solid #e6ebf1}
.cc-player--image{background-size:cover;background-position:center}
.cc-player-tools{display:flex;align-items:center;gap:8px;padding:10px}
.cc-player-tools .tool{background:#f5f7fa;border:1px solid #e6ebf1;border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer}
.cc-player-tools .grow{flex:1}

/* tabs */
.cc-tabs--underline{display:flex;gap:18px;border-bottom:1px solid #e6ebf1;margin:10px 0}
.cc-tabs--underline a{display:inline-block;padding:10px 0;font-size:13px;color:#6b7280;text-decoration:none;border-bottom:2px solid transparent}
.cc-tabs--underline a.active{color:#111827;border-color:#111827}

/* overview */
.cc-overview{background:#fff;border:1px solid #e6ebf1;border-radius:10px;padding:14px}
.cc-summary-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.sum-chip{font-size:11px;color:#4b5563;background:#f5f7fa;border:1px solid #e6ebf1;border-radius:999px;padding:4px 8px}
.cc-block-title{margin:14px 0 8px;font-size:14px}
.cc-desc{color:#334155;font-size:14px;line-height:1.6}

/* outline (left) */
.cc-content-outline .cc-accordion{border:1px solid #e6ebf1;border-radius:8px;margin-bottom:10px;overflow:hidden;background:#fff}
.cc-content-outline summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer}
.cc-content-outline summary::-webkit-details-marker{display:none}
.acc-title{display:flex;align-items:center;gap:8px;font-weight:600}
.acc-num{display:inline-flex;width:22px;height:22px;border-radius:6px;background:#eef2ff;color:#3745a7;align-items:center;justify-content:center;font-size:12px}
.acc-meta{font-size:12px;color:#6b7280}
.cc-lesson-list{list-style:none;margin:0;padding:8px}
.cc-lesson-list .lesson{border-top:1px solid #eef2f6}
.cc-lesson-list .lesson:first-child{border-top:none}
.l-link{display:flex;align-items:center;justify-content:space-between;padding:10px 8px;text-decoration:none}
.l-link .l-name{color:#111827;font-size:13px}
.l-link .l-meta{color:#6b7280;font-size:12px}
.l-link:hover{background:#f9fbff}
.l-link.current{background:#eef7ff}

/* right rail */
.cc-rail {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  font-family: "Roboto", sans-serif;
}
.cc-rail .hdr {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 12px;
  color: #0f172a;
}

.cc-rail .module-header {
  margin-top: 14px;
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
  padding: 6px 0;
  border-bottom: 1px solid #e2e8f0;
}

.cc-rail .item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.35;
  color: #0f172a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s, border 0.2s;
}

.cc-rail .item:hover {
  background: #f1f5f9;
}

.cc-rail .item.active {
  background: #0ea5a4;
  color: #fff;
  border-color: #0ea5a4;
  font-weight: 600;
}

.cc-rail .item.active a {
  color: #fff;
}

.cc-rail .item a {
  color: inherit;
  text-decoration: none;
  flex: 1;
}

.cc-rail .lesson-icon {
  font-size: 12px;
  margin-right: 8px;
  color: #64748b;
}
.cc-rail .item.active .lesson-icon {
  color: #fff;
}

.cc-rail-card{background:#fff;border:1px solid #e6ebf1;border-radius:10px;padding:12px}
.rail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rail-head .h{font-weight:600}
.rail-head .meta,.rail-head .pct{font-size:12px;color:#6b7280}
.rail-meter .rail-track{width:100%;height:8px;background:#edf2f7;border-radius:999px;overflow:hidden}
.rail-meter .rail-track span{display:block;height:100%;background:#2fc489}
.cc-rail-accordion{border-top:1px solid #e6ebf1}
.cc-rail-accordion summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 0}
.cc-rail-accordion summary::-webkit-details-marker{display:none}
.cc-rail-accordion .icon{font-size:12px;transform:rotate(90deg)}
.cc-rail-accordion[open] .icon{transform:rotate(0deg)}
.rail-lessons{list-style:none;margin:0;padding:0 0 8px}
.rail-lessons li{border-left:2px solid #eef2f7;margin-left:8px}
.rail-lessons .rl{display:flex;align-items:center;gap:8px;padding:8px;text-decoration:none}
.rail-lessons .rl .dot{width:6px;height:6px;background:#9aa4b2;border-radius:50%}
.rail-lessons .rl .name{flex:1;color:#111827;font-size:13px}
.rail-lessons .rl .dur{font-size:12px;color:#6b7280}
.rail-lessons .rl:hover{background:#f9fbff}


/* Right rail sticks like the reference */
.cc-rail-sticky{position:sticky; top:12px}

/* Match the teal/contrast and hover states */
.cc-rail-card{background:#f2fbfb}
.cc-rail-accordion summary{padding:8px 0;border-top:1px solid #dce9ea}
.cc-rail-accordion .t{font-size:13px;color:#0f172a}
.rail-lessons .rl{border-radius:8px}
.rail-lessons .rl.current{background:#e0f7f2}
.rail-lessons .rl:hover{background:#eaf6ff}

/* Head meter/pills adjustments */
.cc-course-metachips .chip{background:#eaf6ff;color:#0f5bd4}
.cc-meter-fill{background:#00c29a}

/* Outline on the left — tighter spacing like the screenshot */
.cc-content-outline .cc-accordion{margin-bottom:8px}
.l-link.current{background:#eaf6ff}
.cc-player-card{box-shadow:0 1px 0 rgba(16,24,40,.04)}

/* Course Player */
.cc-player-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.cc-player-title{font-size:22px;margin:0 0 6px}
.cc-player-sub{opacity:.7;font-size:12px;margin-bottom:6px}
.cc-player-meta{font-size:12px;opacity:.8}
.cc-progress-line{width:200px;height:6px;background:#e9eef2;border-radius:999px;overflow:hidden;margin-bottom:6px}
.cc-progress-line span{display:block;height:100%;background:#38b2ac}

.cc-player-grid{display:grid;grid-template-columns:1fr 340px;gap:16px}
.cc-video-wrap{background:#000;border-radius:10px;overflow:hidden}
.cc-video-wrap video{width:100%;display:block}
.cc-video-placeholder{height:380px;display:flex;align-items:center;justify-content:center;background:#111;color:#fff;border-radius:10px}

.cc-action-row{display:flex;gap:8px;align-items:center;margin:10px 0}
.cc-action-row .grow{flex:1}
.cc-ghost{border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:6px 10px;font-size:12px}
.cc-ghost.ico{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}

.cc-tabs--bar{display:flex;gap:18px;border-bottom:1px solid #eef2f6;margin:10px 0}
.cc-tabs--bar a{padding:10px 0;font-weight:600;color:#6b7280;cursor:pointer}
.cc-tabs--bar a.active{color:#111;border-bottom:2px solid #0ea5a8}
.cc-tab-pane{display:none;padding:10px 0}
.cc-tab-pane.active{display:block}

.cc-keyline{border-bottom:1px solid #eef2f6;padding-bottom:10px;margin-bottom:10px}
.cc-bullets{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#6b7280}
.cc-bullets .dot{width:6px;height:6px;background:#a5b4fc;border-radius:50%;display:inline-block;margin-right:6px}

.cc-desc-block{font-size:14px;color:#333}
.cc-objectives{margin:8px 0 0 18px}

.cc-player-side .cc-side-card{background:#f6fbfb;border:1px solid #d9f3f3;border-radius:12px;padding:10px}
.cc-side-sec{border-bottom:1px dashed #cbeaea}
.cc-side-sec:last-child{border-bottom:0}
.cc-side-sec-toggle{width:100%;background:none;border:0;display:flex;align-items:center;gap:10px;padding:10px 4px;cursor:pointer}
.cc-side-sec-toggle .num{font-weight:700;color:#0ea5a8;min-width:26px;text-align:center}
.cc-side-sec-toggle .ttl{font-weight:600}
.cc-side-sec.open .chev{transform:rotate(180deg)}
.cc-lesson-list{list-style:none;margin:4px 0 10px 0;padding-left:0}
.cc-lesson-link{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px;border-radius:8px;color:#1f2937;text-decoration:none}
.cc-lesson-link .dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.cc-lesson-link:hover{background:#e6f7f7}
.cc-lesson-link.active{background:#0ea5a8;color:#fff}
.cc-lesson-link.active .dot{background:#fff}
.cc-lesson-link .time{opacity:.7;font-size:12px}


.cc-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.badge-progress { background:#fef3c7; color:#92400e; }   /* yellow */
.badge-completed { background:#dcfce7; color:#166534; } /* green */
.badge-not { background:#f3f4f6; color:#374151; }       /* gray */

.cc-meta-row {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#6b7280;
  margin:6px 0;
}


/* ---------- My Courses tabs under search ---------- */
.cc-my-tabs{
  display:flex; gap:26px;
  border-bottom:1px solid #eef0f4;
  margin:14px 0 18px;
}
.cc-my-tabs a{
  text-decoration:none;
  color:#374151;
  padding:12px 0 14px;
  font-size:18px;
}
.cc-my-tabs a.active{
  color:#111827; font-weight:700;
  border-bottom:3px solid var(--cc-accent);
}

/* ---------- Card look (like the reference) ---------- */
.cc-course--card{
  border:1px solid #e8edf0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(17,24,39,.06);
}
.cc-card-media{ height:160px; background:#e9eef3; background-size:cover; background-position:center; }
.cc-card-body{ padding:14px 14px 16px; }
.cc-card-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cc-card-title{ font-weight:700; font-size:16px; }
.cc-badge{
  font-size:12px; padding:6px 10px; border-radius:999px; font-weight:700;
  background:#f6f7f9; border:1px solid #e5e7eb; color:#374151;
}
.cc-badge.st-in-progress{ background:#fff7ed; border-color:#fed7aa; color:#b45309; }
.cc-badge.st-completed{ background:#ecfdf5; border-color:#d1fae5; color:#065f46; }
.cc-badge.st-not-started{ background:#f3f4f6; border-color:#e5e7eb; color:#4b5563; }

.cc-card-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 8px; }
.meta-pill{ background:#f6f7f9; border:1px solid #e5e7eb; border-radius:999px; padding:4px 10px; font-size:12px; color:#374151; }
.meta-pill.ghost{ background:#eef2ff; border-color:#e5e7ff; color:#3745a7; }

.cc-progress-line{ height:8px; border-radius:999px; overflow:hidden; background:#f1f5f9; border:1px solid #e5e7eb; }
.cc-progress-line > span{ display:block; height:100%; background:#2db89b; } /* teal */
.cc-progress-label{ color:#6b7280; font-size:12px; margin-top:6px; }

.cc-card-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }

/* Big primary button (size & color like the reference) */
.cc-btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:#2db89b; color:#fff; text-decoration:none;
  font-weight:800; font-size:20px; letter-spacing:.3px;
  padding:12px 22px; border-radius:10px; box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.cc-btn-cta:hover{ background:#1aa28c; }

/* Subtle text button */
.cc-btn-text{ background:none; border:none; color:#0f5bd4; cursor:pointer; font-weight:700; }
.cc-btn-text.danger{ color:#b91c1c; }

/* Put tabs BELOW the search on this page only */
.cc-search + .cc-tabs,
.cc-toolbar .cc-tabs { display:none; } /* hide any older toolbar tabs if present */



/* Course Card Styling */
.cc-course-card{
  background:#fff;border:1px solid #e6ebf1;border-radius:12px;
  overflow:hidden;box-shadow:0 3px 12px rgba(16,24,40,.06);
  display:flex;flex-direction:column;
}
.cc-course-card:hover {
  transform:translateY(-2px);
}

.cc-course-thumb{height:168px;background-size:cover;background-position:center;}

.cc-course-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;}

.cc-course-head{display:flex;align-items:center;justify-content:space-between;}

.cc-course-card .cc-title{font-weight:700;font-size:16px;}

.cc-title {
  font-weight:600;
  font-size:15px;
}

.cc-status-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:#eef2f6;
  color:#1f2937;
}
.cc-status-badge.in-progress{ background:#e6f7f5; color:#0f766e; }
.cc-status-badge.completed{ background:#e8f5e9; color:#1b5e20; }
.cc-status-badge.not-started{ background:#f4f6f8; color:#374151; }

/* Meta row */
.cc-meta-row{display:flex;gap:16px;align-items:center;margin-top:4px;}
.cc-meta-pill{display:inline-flex;gap:8px;align-items:center;color:#6b7280;font-size:13px;}
.cc-ico{display:inline-block;width:16px;height:16px;background:#6b7280;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;}

/* Add button (catalog cards) */
.cc-btn-add{
  width:100%;
  border:0;
  border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  font-size:16px;
  background:#ff8a3d;
  color:#fff;
  cursor:pointer;
}
.cc-btn-add:hover{ filter:brightness(0.95); }



/* Progress */
.cc-progress-text{font-size:13px;color:#374151;display:flex;justify-content:space-between;}
.cc-progress-text .pct{font-weight:700;color:#374151;}

.cc-progress-bar-wrap{background:#eef2f7;border-radius:999px;height:8px;overflow:hidden;}
.cc-progress-bar{background:#10b981;height:100%;border-radius:999px;}

.cc-course-card .cc-btn-continue{
  display:block;width:100%;text-align:center;text-decoration:none;
  background:#f97316; /* orange like ref */
  color:#fff;font-weight:700;font-size:15px;border-radius:10px;
  padding:12px 0; margin-top:2px; box-shadow:0 1px 0 rgba(0,0,0,.03);
}

.cc-course-card .cc-btn-continue:hover{background:#ea580c;}

/* Continue Button */
.cc-btn-continue {
  display:block;
  text-align:center;
  font-size:15px;
  font-weight:600;
  background:#f97316;   /* orange */
  color:#fff;
  border-radius:8px;
  padding:10px 0;
  text-decoration:none;
  transition:background .2s ease;
}
.cc-btn-continue:hover {
  background:#ea580c;
}

/* Ensure orange CTA styling applies to <button> too */
.cc-btn-continue,
button.cc-btn-continue,
.cc-course-card form .cc-btn-continue {
  display: block;
  width: 100%;
  border: 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

/* Remove default dark button look some browsers add */
.cc-course-card form .cc-btn-continue {
  background: inherit;     /* your .cc-btn-continue sets the orange bg */
  color: inherit;          /* ditto */
  font: inherit;
  border-radius: inherit;
  padding: inherit;
}

.cc-ico-time {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.cc-ico-mods {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4h16v13H6.5A2.5 2.5 0 0 0 4 19.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4h16v13H6.5A2.5 2.5 0 0 0 4 19.5z'/%3E%3C/svg%3E");
}

.cc-cta-row{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.cc-btn-primary{background:#ff6f3c;color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}
.cc-btn-primary:hover{opacity:.92}
.cc-btn-ghost{background:#fff;border:1px solid #e6eaed;border-radius:10px;padding:10px 14px;font-weight:600;color:#0b1b23;cursor:pointer}
.cc-btn-ghost:hover{background:#f7fafc}
.cc-note{font-size:12px;color:#64748b;margin-right:auto}

/* Header avatar + verified tick */
.cc-avatar-wrap{
  position:relative;
  width:92px; height:92px;
  border-radius:50%;
  overflow:hidden;
}
.cc-avatar-wrap img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}

/* Blue tick exactly like the reference */
.cc-verified-badge{
  position:absolute;
  left:-6px;          /* sits slightly outside the circle like the mock */
  bottom:-6px;
  width:24px; height:24px;
  background:#36B8AE;           /* reference teal/blue */
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;        /* white ring */
  box-shadow:0 2px 4px rgba(16,24,40,.18);
}
.cc-verified-badge i{ font-size:12px; line-height:0; }

/* Photo row (label left, mini avatar + actions right) */
.cc-photo-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; border-top:1px solid #D0D5DD; border-bottom:1px solid #D0D5DD;
  margin-top:8px; margin-bottom:8px;
}
.cc-photo-left .cc-label{
  font-weight:600; color:#101828; font-size:14px;
}
.cc-photo-left .cc-help{
  color:#808191; font-size:12.5px; margin-top:4px;
}
.cc-photo-right{ display:flex; align-items:center; gap:16px; }
.cc-photo-mini{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 1px 2px rgba(16,24,40,.12);
}
.cc-photo-actions{ display:flex; gap:14px; font-weight:600; }
.cc-photo-actions .link-accent{
  background:none; border:0; color:#36B8AE; cursor:pointer;
}
.cc-photo-actions .link-muted{
  background:none; border:0; color:#667085; cursor:pointer;
}

body.wp-singular.page-template-default.page.page-id-13.logged-in.wp-embed-responsive.wp-theme-twentytwentyfive.cc-fullpage
{
  overflow-x: hidden!important;
}


.cc-top { display:flex; justify-content:flex-end; padding:10px 16px; }
.cc-top-right { display:flex; align-items:center; gap:12px; }

.cc-user-chip { display:flex; align-items:center; }
.cc-avatar-img,
.cc-avatar-fallback {
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0ea5a4; color:#fff; font-weight:700; font-family:inherit;
  overflow:hidden; user-select:none;
}
.cc-avatar-img { background:#e5e7eb; object-fit:cover; }

span.cc-btn-continue.cc-disabled{
    background: gray !important;
}
span.cc-btn-continue.cc-disabled:hover {
    background: gray !important;
}
@media (min-width: 550px){

.cc-brand{
    display:flex !important;
}

}