/* No 1 Content Hub — styles copied from the agreed mockups in design/ */
body { margin: 0; background: #F2F4F7; font-family: Manrope, system-ui, sans-serif; color: #1B2430; }
a { color: #0E7490; }
a:hover { color: #155E75; }

.layout { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }

/* Left sidebar */
.sidebar { flex: 1 1 220px; max-width: 260px; min-width: 200px; background: #141B24; color: #E7ECF1;
  display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; box-sizing: border-box; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.brand-badge { width: 38px; height: 38px; border-radius: 10px; background: #0E7490; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #FFFFFF; }
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-name { font-size: 15px; font-weight: 800; color: #FFFFFF; }
.brand-address { font-size: 11.5px; color: #8E99A6; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px;
  color: #B9C2CC; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.nav-link:hover { color: #FFFFFF; background: #1C2633; }
.nav-link.active { background: #243040; color: #FFFFFF; font-weight: 800; }
.nav-count { margin-left: auto; background: #B42318; color: #FFFFFF; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 2px 8px; }
.spacer { flex: 1 1 10px; }
.signed-in { padding: 11px 12px; border-radius: 10px; background: #1C2633; font-size: 12.5px; color: #B9C2CC; }
.signed-in { display: flex; align-items: center; gap: 8px; margin: 0; }
.signed-in-text span { color: #FFFFFF; font-weight: 700; }
.sign-out { margin-left: auto; border: none; background: none; padding: 0; color: #8E99A6; font-family: Manrope, system-ui, sans-serif;
  font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.sign-out:hover { color: #FFFFFF; }

/* Main area */
.main { flex: 999 1 560px; min-width: 0; box-sizing: border-box; padding: 30px 28px 48px;
  display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; flex-direction: column; gap: 4px; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 800; }
.page-head p { margin: 0; font-size: 14px; color: #5A6472; }
.muted { margin: 0; font-size: 13.5px; color: #5A6472; }

/* Website boxes */
.site-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.site-card { flex: 1 1 240px; min-width: 0; background: #FFFFFF; border: 1px solid #E3E7EC; border-radius: 16px;
  padding: 28px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-decoration: none; color: #1B2430; box-shadow: 0 1px 2px rgba(16,24,40,0.06); box-sizing: border-box; }
a.site-card:hover { color: #1B2430; box-shadow: 0 4px 12px rgba(16,24,40,0.10); }
.site-badge { width: 84px; height: 84px; border-radius: 20px; display: flex; align-items: center;
  justify-content: center; color: #FFFFFF; font-weight: 800; font-size: 26px; }
.site-text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.site-name { font-size: 18px; font-weight: 800; }
.site-address { font-size: 13px; color: #5A6472; }
.site-open { font-size: 13.5px; font-weight: 800; }

.add-site { border: 1.5px dashed #C3CAD2; background: #F7F9FA; box-shadow: none; justify-content: center;
  gap: 12px; cursor: pointer; font-family: Manrope, system-ui, sans-serif; }
.add-badge { width: 84px; height: 84px; border-radius: 20px; border: 1.5px dashed #C3CAD2; display: flex;
  align-items: center; justify-content: center; color: #8E99A6; font-weight: 800; font-size: 32px; box-sizing: border-box; }
.add-name { font-size: 15px; font-weight: 800; color: #4B5563; }
.add-note { font-size: 12.5px; color: #8E99A6; }

/* Boxes and alerts */
.box { background: #FFFFFF; border: 1px solid #E3E7EC; border-radius: 16px; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 12px; }
.box-title { font-size: 15px; font-weight: 800; }
.alert { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #E3E7EC;
  background: #FBFCFD; border-radius: 12px; }
.alert-warn { border-color: #F0DCB2; background: #FDF8EC; }
.alert-icon { font-size: 16px; }
.alert-text { font-size: 13.5px; color: #39424E; flex: 1 1 10px; min-width: 0; }
.alert-link { font-size: 12.5px; font-weight: 800; color: #0E7490; text-decoration: none; }

/* Website screen */
.site-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.back-pill { padding: 9px 14px; border-radius: 999px; border: 1px solid #C3CAD2; font-size: 13px; font-weight: 700;
  color: #4B5563; text-decoration: none; background: #FFFFFF; }
.back-pill:hover { color: #1B2430; }
.site-head-badge { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; color: #FFFFFF; font-weight: 800; font-size: 15px; }
.site-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.site-head-text h1 { margin: 0; font-size: 21px; font-weight: 800; }
.staging-pill { padding: 7px 13px; border-radius: 999px; background: #FDF3E0; border: 1px solid #F0DCB2;
  color: #8A5A00; font-size: 12.5px; font-weight: 800; }

.create-box { padding: 20px; box-shadow: 0 1px 2px rgba(16,24,40,0.06); }
.create-title { font-size: 16px; font-weight: 800; }
.create-box textarea { width: 100%; box-sizing: border-box; min-height: 100px; border: 1px solid #D4DAE0; border-radius: 12px;
  padding: 13px 15px; font-family: Manrope, system-ui, sans-serif; font-size: 14px; color: #1B2430; background: #FBFCFD; resize: vertical; }
.create-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn { height: 46px; padding: 0 18px; border-radius: 10px; font-family: Manrope, system-ui, sans-serif;
  font-size: 14px; font-weight: 800; cursor: pointer; }
.btn-solid { border: none; color: #FFFFFF; }
.btn-outline { border: 1.5px solid; background: #FFFFFF; }
.btn-plain { border: 1.5px solid #C3CAD2; background: #FFFFFF; color: #4B5563; }
.status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; }
.status-on { color: #116A4E; }
.status-off { color: #5A6472; }
.dot { width: 9px; height: 9px; border-radius: 999px; background: #B6BEC7; flex: none; }
.dot.on { background: #12805C; }

.group { display: flex; flex-direction: column; gap: 10px; }
.group-title { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; color: #5A6472; }
.group-note { font-weight: 600; letter-spacing: 0; color: #8E99A6; }
.tile-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tile { flex: 1 1 220px; min-width: 0; background: #FFFFFF; border: 1px solid #E3E7EC; border-radius: 12px;
  padding: 14px 15px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #1B2430; box-sizing: border-box; }
.tile-small { flex-basis: 170px; }
a.tile:hover { color: #1B2430; box-shadow: 0 2px 8px rgba(16,24,40,0.08); }
.tile-name { font-size: 13.5px; font-weight: 700; flex: 1 1 10px; }
.tile-name.off { color: #4B5563; }
.tile-open { font-size: 12px; font-weight: 800; }
.tile-add { border: 1.5px dashed #C3CAD2; background: #F7F9FA; justify-content: center; font-family: Manrope, system-ui, sans-serif;
  font-size: 13px; font-weight: 700; color: #4B5563; cursor: pointer; }

/* Add a website box: the form opens inside the same box */
.add-site { padding: 0; max-width: 360px; }
.add-start { width: 100%; height: 100%; border: none; background: none; padding: 28px 22px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer;
  font-family: Manrope, system-ui, sans-serif; }
.add-form { display: none; width: 100%; box-sizing: border-box; padding: 20px 20px; flex-direction: column; gap: 10px; cursor: default; }
.add-site.open { background: #FFFFFF; border-style: solid; border-color: #E3E7EC; }
.add-site.open .add-start { display: none; }
.add-site.open .add-form { display: flex; }
.add-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: #4B5563; flex: 1 1 0; min-width: 0; }
.add-form input { height: 36px; border: 1px solid #D4DAE0; border-radius: 8px; padding: 0 10px; font-family: Manrope, system-ui, sans-serif;
  font-size: 13.5px; color: #1B2430; background: #FBFCFD; box-sizing: border-box; width: 100%; }
.add-form input[type=color] { padding: 2px 4px; cursor: pointer; }
.form-row { display: flex; gap: 10px; }
.form-row .btn { height: 38px; padding: 0 14px; font-size: 13px; }
.form-save { background: #1B2430; }
.form-error { font-size: 12.5px; font-weight: 700; color: #B42318; }

.remove-form { margin-top: 18px; }
.remove-link { border: none; background: none; padding: 0; font-family: Manrope, system-ui, sans-serif; font-size: 12.5px;
  font-weight: 700; color: #8E99A6; text-decoration: underline; cursor: pointer; }
.remove-link:hover { color: #B42318; }

/* Sign-in screen */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #141B24; }
.login-box { width: 340px; background: #FFFFFF; border-radius: 16px; padding: 28px; display: flex; flex-direction: column;
  gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.login-brand { padding: 0 0 10px; }
.login-name { font-size: 15px; font-weight: 800; color: #1B2430; }
.login-box label { font-size: 13px; font-weight: 700; color: #4B5563; }
.login-box input { height: 42px; border: 1px solid #D4DAE0; border-radius: 10px; padding: 0 12px; font-size: 15px;
  font-family: Manrope, system-ui, sans-serif; background: #FBFCFD; }
.login-btn { background: #0E7490; color: #FFFFFF; border: none; margin-top: 6px; }
.login-box code { font-size: 12px; }

/* Phones: the sidebar sits across the top at full width */
@media (max-width: 640px) {
  .sidebar { max-width: none; flex-basis: 100%; }
  .spacer { display: none; }
  .main { padding: 24px 16px 40px; }
}