:root{
  /* Rocheston Corporate Colors */
  --pink:#FF006E;
  --purple:#9B4DCA;
  --yellow:#FFD60A;
  --cyan:#00B4D8;
  --green:#06FFA5;

  /* Light UI neutrals */
  --ink:#14213D;
  --ink2:#1F2A44;
  --muted:#5B6B8C;
  --muted2:#7A88A6;

  --paper:#FFFFFF;
  --paper2:#FFFDF6;

  --shadow: 0 16px 40px rgba(20,33,61,.12);
  --shadow2: 0 10px 22px rgba(20,33,61,.10);

  --radius:18px;
  --radius2:14px;

  --sans: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size: 14px;
  color:var(--ink);
  background: linear-gradient(180deg, #f7f9fc, #ffffff);
}

/* Animated ambient background */
body::before{
  content: "";
  position: fixed;
  inset: -20% -20% -20% -20%;
  z-index: -1;
  background:
    radial-gradient(40% 35% at 20% 20%, rgba(255,0,110,.18), transparent 60%),
    radial-gradient(38% 32% at 80% 15%, rgba(155,77,202,.16), transparent 60%),
    radial-gradient(36% 30% at 30% 85%, rgba(0,180,216,.16), transparent 60%),
    radial-gradient(34% 30% at 75% 80%, rgba(6,255,165,.14), transparent 60%);
  filter: blur(8px) saturate(120%);
  animation: bgFloat 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bgFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-2%,1%,0) scale(1.03); }
  100%{ transform: translate3d(2%,-1%,0) scale(1.06); }
}

/* Rotating conic glow overlay */
body::after{
  content: "";
  position: fixed;
  inset: -25% -25% -25% -25%;
  z-index: -2;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255,0,110,.28), rgba(155,77,202,.22), rgba(0,180,216,.22), rgba(6,255,165,.20), rgba(255,214,10,.24), rgba(255,0,110,.28));
  filter: blur(80px) saturate(140%);
  opacity: .12;
  animation: spinHue 60s linear infinite;
  will-change: transform;
}
@keyframes spinHue{ to { transform: rotate(360deg) scale(1.02); } }

a{ color:inherit; text-decoration:none; }
button, input, textarea { font-family: inherit; }

.wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 18px 40px;
}

/* Colorful header */
.topbar{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(20,33,61,.08);
}

.topbar .wrap{ padding: 14px 18px; }

.brandRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brandLogo{
  height: calc(var(--title-size) + 16px);
  width: auto;
  display: block;
}
.globe{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(20,33,61,.12);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(8px);
}
.globe svg{ width: 26px; height: 26px; color: var(--ink2); }
html.dark .globe{ background: rgba(14,20,38,.66); border-color: rgba(231,234,243,.18); }
html.dark .globe svg{ color: rgba(231,234,243,.88); }
.titles{ line-height: 1.1; --title-size: clamp(28px, 6vw, 64px); }
.titleRow{ display:flex; align-items:center; gap: 12px; flex-wrap: nowrap; }
.h1{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: var(--title-size);
}
.h2{
  font-size: 13px;
  color: var(--muted);
}

.gradientText{
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Animated colorful title */
.rainbowTitle{
  display:inline-block;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan), var(--green), var(--yellow), var(--pink));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleFlow 8s ease-in-out infinite;
  text-shadow: 0 14px 28px rgba(0,0,0,.12);
  padding: 8px 14px;
  margin: 6px 0 10px;
}
@keyframes titleFlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.toolbar{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.input{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,33,61,.12);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  min-width: min(520px, 78vw);
}
.input input{
  width:100%;
  border:none;
  outline:none;
  font-size: 14px;
  color: var(--muted);
  background: transparent;
}
html.dark .input input{ color: rgba(231,234,243,.85); }
.input input::placeholder{ color: var(--muted2); }
html.dark .input input::placeholder{ color: rgba(231,234,243,.65); }

.btn{
  appearance:none;
  border: 1px solid rgba(20,33,61,.12);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: var(--shadow2);
  font-weight: 750;
  letter-spacing: .1px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 14px;
}
.btn.small{ padding: 6px 10px; border-radius: 12px; font-weight: 800; }
.viewToggle{ display:flex; gap: 8px; align-items:center; }
.viewToggle .btn.active{ background: rgba(0,180,216,.16); border-color: rgba(0,180,216,.28); }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active{ transform: translateY(0px); }

.btn.primary{
  border-color: rgba(255,0,110,.25);
  background: linear-gradient(135deg, rgba(255,0,110,.85), rgba(155,77,202,.85), rgba(0,180,216,.80));
  color: #fff;
}

.btn.subtle{
  background: rgba(255,255,255,.60);
}

/* Chips */
.chips{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.chip{
  user-select:none;
  cursor:pointer;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(20,33,61,.10);
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.88);
  font-weight: 750;
  font-size: 14pt; /* increased for visibility */
  display:flex;
  align-items:center;
  gap: 10px;
}
.chip .dot{ width:12px; height:12px; border-radius:999px; }
.chip.active{
  border-color: rgba(20,33,61,.18);
  background: rgba(255,255,255,.98);
}
.chip:hover{ transform: translateY(-1px); }

/* Stats */
.stats{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

/* Grid tiles */
/* Grid: multi-column boxes */
.hc-grid{
  margin-top: 18px;
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px){ .hc-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px){ .hc-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .hc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .hc-grid{ grid-template-columns: repeat(1, 1fr); } }

.hc-card{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  overflow: hidden;
  display:grid;
  place-items:center;
  padding: 10px;
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 12px 26px rgba(20,33,61,.12), inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.hc-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 24px 54px rgba(20,33,61,.32),
    0 0 22px var(--hover-tint, rgba(255,255,255,.30)),
    0 0 60px var(--hover-tint, rgba(255,255,255,.25));
  border-color: rgba(255,255,255,.55);
  background:
    radial-gradient(280px 200px at var(--mx,50%) var(--my,40%), rgba(255,255,255,.30), transparent 60%),
    linear-gradient(135deg, var(--hover-tint, rgba(255,255,255,.24)) 0%, rgba(255,255,255,.18) 100%),
    rgba(255,255,255,.10);
  color: #fff;
}
.hc-card:hover .hc-title{ color:#fff !important; text-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 18px var(--hover-tint, rgba(255,255,255,.25)); }
.hc-card:active{ transform: translateY(-1px); }
.hc-title{
  font-weight: 400;
  text-align: center;
  padding: 0 6px;
  font-size: 14pt;
  margin: 4px 0 0;
  width: 100%;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.hc-icon{ width: 56px; height: 56px; object-fit: contain; display:block; margin: 2px 0 0; opacity: .96; }
html.dark .hc-icon{ opacity: .98; }

/* Pointer-follow glow */
.hc-card::before{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.40), transparent 55%);
  opacity: 0;
  transition: opacity .18s ease;
}
.hc-card:hover::before{ opacity: 1; }

/* Glass highlight */
.hc-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 45%);
  pointer-events:none;
  border-radius: inherit;
}

/* Selected card */
.hc-card.selected{
  color: #fff;
  border-color: rgba(255,255,255,.60);
  box-shadow: 0 20px 40px rgba(20,33,61,.22);
}

html.dark .hc-card{
  background: rgba(255,255,255,.08);
  border-color: rgba(231,234,243,.16);
  box-shadow: 0 12px 26px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.04);
}
html.dark .hc-card:hover{
  box-shadow:
    0 30px 66px rgba(0,0,0,.60),
    0 0 24px var(--hover-tint, rgba(255,255,255,.28)),
    0 0 68px var(--hover-tint, rgba(255,255,255,.22));
  border-color: rgba(231,234,243,.40);
  background:
    radial-gradient(280px 200px at var(--mx,50%) var(--my,40%), rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, var(--hover-tint, rgba(255,255,255,.18)) 0%, rgba(255,255,255,.12) 100%),
    rgba(255,255,255,.08);
  color: #fff;
}
html.dark .hc-card:hover .hc-title{ color:#fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.6), 0 0 20px var(--hover-tint, rgba(255,255,255,.25)); }
html.dark .hc-card::before{ background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 55%); }
html.dark .hc-card.selected{ border-color: rgba(231,234,243,.30); }

/* List view */
.lv{ display:flex; flex-direction: column; gap: 10px; }
.lv-item{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  background: transparent; border: none; padding: 6px 2px; cursor: default;
}
.lv-item:hover .lv-title{ text-decoration: underline; }
.lv-title{
  font-weight: 800;
  flex: 1;
  margin-right: 8px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lv-badges{ display:none; }
html.dark .lv-item{ background: transparent; border-color: transparent; }

/* Table view */
.tv{ width: 100%; border-collapse: collapse; background: transparent; border: none; border-radius: 0; box-shadow: none; }
.tv th, .tv td{ padding: 8px 6px; text-align: left; border-bottom: 1px dashed rgba(20,33,61,.18); font-size: 14pt; line-height: 1.6; }
.tv th{ background: transparent; font-weight: 900; }
.tv tr:hover{ background: transparent; }
.tv.minimal td{ display:flex; align-items:center; gap: 8px; }
.tv.minimal td > span{ flex: 1; word-break: break-word; overflow-wrap: anywhere; font-size: 14pt; }
html.dark .tv{ background: rgba(16,22,42,.92); border-color: rgba(231,234,243,.12); }
html.dark .tv th{ background: transparent; }
html.dark .tv th, html.dark .tv td{ border-bottom-color: rgba(231,234,243,.12); }

/* Modal overlay */
.modalOverlay[hidden]{ display:none; }
.modalOverlay{
  position: fixed; inset: 0; z-index: 60;
  display:grid; place-items:center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  animation: fadeIn .18s ease;
}
.modal{
  width: 70vw;
  height: 70vh;
  max-height: 70vh;
  background: rgba(14,20,38,.96);
  color: #fff;
  border: 1px solid rgba(231,234,243,.12);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display:flex; flex-direction: column;
  overflow: hidden;
  transform-origin: center;
  animation: popIn .18s ease;
}
.modalTop{ padding: 10px; display:flex; justify-content: flex-end; border-bottom: 1px solid rgba(231,234,243,.12); background: rgba(14,20,38,.92); flex: 0 0 auto; }
.modalTop #modalClose{
  width: 36px; height: 36px;
  border-radius: 999px;
  padding: 0;
  display: grid; place-items: center;
  font-size: 18px;
  line-height: 1;
  background: rgba(255,255,255,.10);
  border-color: rgba(231,234,243,.18);
  color: #fff;
}
.modalTop #modalClose:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.modalContent{
  width:100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  color:#fff;
  flex: 1 1 auto;
  min-height: 0; /* allow flex child to scroll within fixed modal height */
}
.modalContent .m-title{ font-weight: 900; font-size: 28px; line-height: 1.15; margin: 0 0 24px; }
.modalContent .m-overview{
  margin-top: 0;
  padding-top: 36px;
  padding-bottom: 36px;
  color: #fff;
  font-size: 16pt;
  line-height: 1.75;
  white-space: pre-wrap;
}
.modalContent .m-list{ color:#fff; font-size: 16pt; line-height: 1.75; margin-top: 12px; }
.modalContent .m-list{ margin-top: 14px; }
.modalContent .m-list b{ display:block; margin-bottom: 6px; }
.modalContent ul{ margin: 0; padding-left: 18px; }
.modalContent li{ margin: 6px 0; }
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes popIn{ from{ transform: scale(.98); opacity: .98; } to{ transform: scale(1); opacity: 1; } }
html.dark .modal{ background: rgba(14,20,38,.96); border-color: rgba(231,234,243,.12); }
html.dark .modalTop{ background: rgba(14,20,38,.92); border-bottom-color: rgba(231,234,243,.12); }

/* Fancy animated title and decorated content in modal */
.modalContent .m-title{
  font-size: clamp(22px, 4vw, 36px);
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan), var(--green), var(--yellow), var(--pink));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleFlow 10s ease-in-out infinite;
  text-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.modalContent .m-badges{ display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }
.modalContent .m-sep{
  height: 2px;
  margin: 12px 0 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,.0));
  border-radius: 999px;
}
.modalContent .m-overview{
  background: linear-gradient(135deg, rgba(255,0,110,.10), rgba(155,77,202,.10));
  border: 1px solid rgba(255,0,110,.24);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) inset, 0 8px 20px rgba(0,0,0,.20);
  padding: 18px;
}
.modalContent .m-list{
  background: linear-gradient(135deg, rgba(0,180,216,.10), rgba(6,255,165,.10));
  border: 1px solid rgba(0,180,216,.24);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) inset, 0 8px 20px rgba(0,0,0,.20);
  padding: 14px 18px 18px;
}
.modalContent .m-list ol{ list-style: none; margin: 0; padding: 0; }
.modalContent .m-list li{
  position: relative;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  animation: fadeUp .24s ease both;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.modalContent .m-list li .tick{ flex: 0 0 auto; font-size: 18px; line-height: 1.2; filter: saturate(120%); }
.modalContent .m-list li:nth-child(even){ background: rgba(255,255,255,.06); border: 1px solid rgba(231,234,243,.12); }
.modalContent .m-list ol li:nth-child(1){ animation-delay: .02s; }
.modalContent .m-list ol li:nth-child(2){ animation-delay: .04s; }
.modalContent .m-list ol li:nth-child(3){ animation-delay: .06s; }
.modalContent .m-list ol li:nth-child(4){ animation-delay: .08s; }
.modalContent .m-list ol li:nth-child(5){ animation-delay: .10s; }
.modalContent .m-list ol li:nth-child(6){ animation-delay: .12s; }
.modalContent .m-list ol li:nth-child(7){ animation-delay: .14s; }
.modalContent .m-list ol li:nth-child(8){ animation-delay: .16s; }
.modalContent .m-list ol li:nth-child(9){ animation-delay: .18s; }
.modalContent .m-list ol li:nth-child(10){ animation-delay: .20s; }

@keyframes fadeUp{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: translateY(0); } }
.badge{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(8px);
  text-shadow: 0 6px 14px rgba(0,0,0,.14);
  white-space: nowrap;
}
.badge.mono{
  font-family: var(--mono);
  font-size: 10px;
  padding: 6px 8px;
}
.tileMeta{
  position: relative;
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: rgba(255,255,255,.92);
  font-size: 12px;
}
.tileMeta .hint{
  opacity: .95;
}
.arrow{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.30);
  display:grid;
  place-items:center;
  backdrop-filter: blur(8px);
}
.arrow svg{ width: 18px; height: 18px; }

hr.sep{
  border: none;
  height: 1px;
  background: rgba(20,33,61,.10);
  margin: 18px 0;
}

/* Detail page */
.hero{
  border-radius: 26px;
  padding: 22px 22px 18px;
  color: white;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.70);
  overflow:hidden;
  position: relative;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(400px 180px at 15% 10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(460px 200px at 95% 40%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
  pointer-events:none;
}
.heroTop{
  position: relative;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.heroTitle{
  font-weight: 980;
  letter-spacing: .2px;
  font-size: 18px;
  line-height: 1.12;
  text-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.heroSub{
  margin-top: 8px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.heroActions{
  position: relative;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 18px;
  padding: 16px 16px;
  box-shadow: var(--shadow2);
}

.note{
  background: rgba(255,214,10,.22);
  border: 1px solid rgba(255,214,10,.40);
  border-radius: 16px;
  padding: 12px 12px;
  color: rgba(20,33,61,.90);
  font-size: 13px;
}

.progressRow{
  margin-top: 14px;
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap: wrap;
}
.progressBar{
  flex: 1;
  min-width: 220px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(255,255,255,.40);
  overflow:hidden;
}
.progressBar > div{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--green), var(--cyan), var(--purple), var(--pink));
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.progressText{
  font-weight: 850;
  color: rgba(255,255,255,.96);
  text-shadow: 0 10px 20px rgba(0,0,0,.16);
}

.sections{
  margin-top: 18px;
  display:flex;
  flex-direction: column;
  gap: 18px;
}

details.section{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
/* Alternate subtle backgrounds for sections */
details.section:nth-of-type(odd){
  background: linear-gradient(135deg, rgba(0,180,216,.06), rgba(6,255,165,.06));
}
details.section:nth-of-type(even){
  background: linear-gradient(135deg, rgba(255,0,110,.06), rgba(155,77,202,.06));
}
details.section > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
details.section > summary::-webkit-details-marker{ display:none; }

.secTitle{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.secTitle strong{
  font-size: 14px;
  letter-spacing: .15px;
}
.secTitle span{
  font-size: 14pt;
  color: var(--muted);
}
.secMeta{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.pill{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,33,61,.10);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow2);
  font-weight: 800;
  color: var(--ink);
}
.pill.pink{ background: rgba(255,0,110,.16); border-color: rgba(255,0,110,.26); }
.pill.purple{ background: rgba(155,77,202,.16); border-color: rgba(155,77,202,.26); }
.pill.cyan{ background: rgba(0,180,216,.16); border-color: rgba(0,180,216,.26); }
.pill.green{ background: rgba(6,255,165,.18); border-color: rgba(6,255,165,.28); }
.pill.yellow{ background: rgba(255,214,10,.22); border-color: rgba(255,214,10,.32); }

.items{
  padding: 0 16px 16px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border-radius: 16px;
  padding: 14px 14px;
  border: none;
  background: rgba(255,255,255,1);
  box-shadow: var(--shadow2);
}
.item:hover{ box-shadow: var(--shadow); }
.cb{
  margin-top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid rgba(20,33,61,.18);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  background: white;
}
.cb input{
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}
.itemBody{ flex:1; min-width: 0; }
.itemText{ font-weight: 850; color: var(--ink); line-height: 1.4; font-size: 14pt; }
.itemMeta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 14pt;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.itemMeta code{
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(0,180,216,.10);
  border: 1px solid rgba(0,180,216,.18);
  padding: 3px 6px;
  border-radius: 10px;
}

details.guidance{
  margin-top: 8px;
  border-radius: 14px;
  border: 1px dashed rgba(20,33,61,.14);
  background: rgba(255,255,255,.98);
  padding: 10px 10px;
}
details.guidance > summary{
  cursor:pointer;
  font-weight: 850;
  color: var(--ink2);
  font-size: 12px;
}
details.guidance p{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.rt-toolbar{ margin-top:10px; display:flex; flex-wrap: wrap; gap: 8px; align-items:center; }
.rt-toolbar .btn{ font-weight: 400; }
.rt-toolbar .btn b{ font-weight: 400; }
.rt-toolbar .btn i{ font-style: normal; }
.rt-toolbar .btn u{ text-decoration: none; }
.rt-toolbar .sep{ width: 1px; height: 22px; background: rgba(20,33,61,.12); display:inline-block; }
.rt-toolbar .colorPick{ display:inline-flex; align-items:center; gap:4px; border:1px solid rgba(20,33,61,.12); padding:4px 6px; border-radius:8px; background: rgba(255,255,255,.92); box-shadow: var(--shadow2); font-weight:400; }
.rt-toolbar .colorPick input{ appearance:none; border:none; background:transparent; width:20px; height:20px; padding:0; }
html.dark .rt-toolbar .colorPick{ background: rgba(14,20,38,.86); border-color: rgba(231,234,243,.12); color:#e7eaf3; }
.rt-toolbar .spacer{ flex: 1; }
.notes-editor{
  width: 100%;
  min-height: 280px; /* doubled height */
  border-radius: 18px;
  border: 1px solid rgba(20,33,61,.12);
  padding: 14px 14px;
  outline:none;
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.96);
  color: var(--ink);
  font-size: 14pt; /* per request */
  line-height: 1.6;
  resize: vertical;
  overflow: auto;
}
.notes-editor:focus{ border-color: rgba(0,180,216,.35); box-shadow: 0 0 0 3px rgba(0,180,216,.12), var(--shadow2); }
html.dark .notes-editor{ background: rgba(14,20,38,.90); color: #e7eaf3; border-color: rgba(231,234,243,.12); }

/* Larger RCCE Notes heading */
.notesTitle{ font-size: 18pt; }

.footer{
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

/* Go to top button */
.toTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  appearance: none;
  border: 1px solid rgba(20,33,61,.12);
  background: rgba(255,255,255,.96);
  color: var(--ink);
  border-radius: 999px;
  width: 44px; height: 44px;
  display:grid; place-items:center;
  padding: 0;
  box-shadow: var(--shadow2);
  cursor: pointer;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.toTop.show{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.toTop:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
html.dark .toTop{ background: rgba(14,20,38,.92); border-color: rgba(231,234,243,.12); color: #e7eaf3; }
.toTop svg{ width: 20px; height: 20px; display:block; }

/* Split layout */
.split{
  margin-top: 22px;
  display:flex;
  align-items:flex-start;
  gap: 22px;
}
.sidebar{
  position: sticky;
  top: 88px; /* under topbar */
  width: 340px;
  max-width: 40vw;
  background: #ffffff;
  border: 1px solid rgba(20,33,61,.08);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow2);
}
.list{
  display:flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding-right: 4px;
}
.listItem{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: var(--shadow2);
  cursor: pointer;
  position: relative;
}
.listItem:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.listItem.active{ border-color: rgba(255,255,255,.60); box-shadow: 0 12px 26px rgba(20,33,61,.16); }
.listItem.active::before{ display:none; }
.listItem.active .listTitle{ color: #fff; }
.listItem.active .badge{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.32);
  color: #fff;
  text-shadow: 0 6px 14px rgba(0,0,0,.24);
}
.listTitle{ font-weight: 900; font-size: 16px; line-height: 1.25; }
.listMeta{ margin-top: 6px; display:flex; gap: 8px; flex-wrap: wrap; }
.detail{ 
  flex: 1; 
  min-width: 0; 
  background: #ffffff;
  border: 1px solid rgba(20,33,61,.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow2);
}

/* Dark theme */
html.dark, body.dark{ background: #0b1020; }
html.dark body{
  color: #e7eaf3;
  background: linear-gradient(180deg, #0b1020, #0e1426);
}
html.dark .topbar{
  background: rgba(8,12,26,.60);
  border-bottom-color: rgba(231,234,243,.08);
}
html.dark .input{
  background: rgba(12,18,36,.86);
  border-color: rgba(231,234,243,.10);
}
html.dark .input input{ color:#e7eaf3; }
html.dark .btn{
  background: rgba(14,20,38,.86);
  border-color: rgba(231,234,243,.12);
  color: #e7eaf3;
}
html.dark .btn.primary{
  background: linear-gradient(135deg, rgba(255,0,110,.16), rgba(155,77,202,.12), rgba(0,180,216,.10));
  border-color: rgba(255,0,110,.22);
}
html.dark .chip{
  background: rgba(14,20,38,.86);
  border-color: rgba(231,234,243,.12);
  color: #e7eaf3;
}
html.dark .chip.active{ background: rgba(18,26,50,.94); border-color: rgba(231,234,243,.18); }
html.dark .badge{
  background: rgba(231,234,243,.10);
  border-color: rgba(231,234,243,.18);
}
html.dark .hero{
  border-color: rgba(231,234,243,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
html.dark .progressBar{ background: rgba(231,234,243,.14); border-color: rgba(231,234,243,.22); }
html.dark .progressText{ color: rgba(231,234,243,.96); }
html.dark .card{
  background: rgba(14,20,38,.86);
  border-color: rgba(231,234,243,.12);
}
html.dark .note{
  background: rgba(255,214,10,.18);
  border-color: rgba(255,214,10,.32);
  color: #f1f3f9;
}
html.dark details.section{
  background: rgba(14,20,38,.86);
  border-color: rgba(231,234,243,.12);
}
html.dark .pill{
  background: rgba(231,234,243,.10);
  border-color: rgba(231,234,243,.18);
  color: #e7eaf3;
}
html.dark .items .item{ background: rgba(16,22,42,.92); border-color: rgba(231,234,243,.10); }
html.dark .item:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.35); }
html.dark .itemText{ color: #e7eaf3; }
html.dark .itemMeta{ color: #a9b3cf; }
html.dark .itemMeta code{ background: rgba(0,180,216,.14); border-color: rgba(0,180,216,.22); }
html.dark .cb{ background: rgba(8,12,26,.90); border-color: rgba(231,234,243,.18); }
html.dark .cb input{ accent-color: var(--pink); }
html.dark details.guidance{ background: rgba(16,22,42,.92); border-color: rgba(231,234,243,.18); }
html.dark textarea.notes{ background: rgba(14,20,38,.86); border-color: rgba(231,234,243,.12); color:#e7eaf3; }
html.dark .sidebar .listItem{ background: rgba(16,22,42,.92); border-color: rgba(231,234,243,.12); }
html.dark .sidebar .listItem.active{ background: rgba(22,30,58,.94); border-color: rgba(231,234,243,.18); }
html.dark .footer{ color: #a9b3cf; }

/* Dark split pane accents */
html.dark .sidebar{
  background: linear-gradient(180deg, rgba(0,180,216,.12), rgba(6,255,165,.12));
  border-color: rgba(0,180,216,.28);
}
html.dark .detail{
  background: linear-gradient(180deg, rgba(155,77,202,.12), rgba(255,0,110,.10));
  border-color: rgba(155,77,202,.28);
}