:root{
  --teal:#0d9488; --amber:#f59e0b; --red:#ef4444;
  --ink:#0b1220; --muted:#64748b; --bg:#f8fafc; --line:#e2e8f0; --card:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;background:var(--bg);color:var(--ink)}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

/* Shell */
.ctv-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:#fff;
  position:sticky;
  top:0;
  z-index:100;
}

.ctv-brand{display:flex;gap:10px;align-items:center}
/*.ctv-brand img{width:44px;height:44px;border-radius:50%}*/
.ctv-brand img{
  height:60px;        /* main control for how big the logo appears */
  max-height:60px;    /* prevent it from growing beyond this */
  width:auto;         /* keep aspect ratio */
  border-radius:50%;
  object-fit:contain; /* make sure it scales nicely in its box */
}
.ctv-brand .title{font-weight:700}

/* NEW: nav shell + hamburger */
.ctv-nav-shell{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

/* Hamburger hidden by default on wide screens */
.ctv-nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:6px;
  cursor:pointer;
}
.ctv-nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:var(--ink);
  margin:3px 0;
  border-radius:999px;
}

/* Container that wraps actual links */
.ctv-nav-wrap{
  display:flex;
  align-items:center;
}

/* Links row */
.ctv-nav{
  display:flex;
  gap:10px;
  flex-wrap:nowrap; /* keep single row on desktop */
}

.ctv-nav a{
  padding:9px 12px;
  border-radius:10px;
  font-weight:600;
  color:var(--ink);
  border:1px solid transparent;
}
.ctv-nav a.active{
  background:#ecfeff;
  border-color:#a5f3fc;
  color:#0e7490;
}
.ctv-nav a.danger{color:var(--red)}

.ctv-container{
  max-width:1100px;
  margin:22px auto;
  padding:0 16px;
}
.ctv-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  margin-bottom:16px;
}
.ctv-footer{
  margin-top:28px;
  border-top:1px solid var(--line);
  padding:14px 16px;
  text-align:center;
  color:var(--muted);
  background:#fff;
}

/* Helpers (unchanged) */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--teal);background:#ecfeff}
.meta{color:var(--muted);font-size:.88rem}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--teal);color:#fff;font-weight:700;border:none}
.btn:hover{background:#0f766e}
.btn-secondary{background:#fff;color:var(--teal);border:1px solid var(--teal)}
.grid{display:grid;gap:12px}
@media(min-width:768px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}

/* MOBILE / TABLET: collapse into hamburger */
@media screen and (max-width: 1024px) {
  .ctv-header{
    align-items:flex-start;
  }

  .ctv-nav-shell{
    flex-direction:column;
    align-items:flex-end;
    width:100%;
  }

  /* Show hamburger under breakpoint */
  .ctv-nav-toggle{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
  }

  /* Hide nav until toggled */
  .ctv-nav-wrap{
    display:none;
    width:100%;
  }
  .ctv-nav-wrap.is-open{
    display:block;
  }

  .ctv-nav{
    flex-direction:column;
    align-items:flex-end;
    padding:0.5rem 0;
  }

  .ctv-nav a{
    width:100%;
    text-align:right;
  }
}