/* ============================================================
   Cyber Majlis Members Portal 2.0 — shared design system
   Ported from design comps. Tokens + base + components.
   ============================================================ */

:root {
  /* palette */
  --cm-bg:        #FBFAF7;
  --cm-ink:       #17131f;
  --cm-primary:   #483183;
  --cm-primary-d: #2E1F55;
  --cm-lilac:     #d8c7e9;
  --cm-lilac-txt: #c3b8d6;
  --cm-muted:     #8a7cae;
  --cm-body:      #6b6478;
  --cm-border:    #E3DDD4;
  --cm-border-s:  #EDE8E0;
  --cm-cream:     #F5F1E9;
  --cm-gold:      #B08A3E;
  --cm-panel:     #fff;

  /* type */
  --cm-serif:  'Newsreader', Georgia, serif;
  --cm-disp:   'Wix Madefor Display', system-ui, sans-serif;
  --cm-ui:     'Inter Tight', system-ui, sans-serif;
  --cm-ar:     'Noto Kufi Arabic', sans-serif;

  --cm-maxw: 1280px;
  --cm-radius: 4px;
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cm-bg);
  color: var(--cm-ink);
  font-family: var(--cm-disp);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--cm-primary); text-decoration: none; transition: color .25s; }
a:hover { color: var(--cm-primary-d); }
img { max-width: 100%; display: block; }
h1,h2,h3 { margin: 0; }
::selection { background: var(--cm-lilac); }

/* ---------- keyframes ---------- */
@keyframes cmFadeUp { from { opacity:0; transform:translateY(16px);} to { opacity:1; transform:none;} }
@keyframes cmKenBurns { from { transform:scale(1);} to { transform:scale(1.09) translateX(-1.5%);} }
@keyframes cmWire { from { transform:translateX(0);} to { transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- layout ---------- */
.cm-wrap { max-width: var(--cm-maxw); margin: 0 auto; padding: 0 40px; }
.cm-main { max-width: var(--cm-maxw); margin: 0 auto; padding: 44px 40px 0; }
.cm-fade { animation: cmFadeUp .7s ease both; }

/* ---------- masthead + nav ---------- */
.cm-masthead { border-bottom: 1px solid var(--cm-border); background: var(--cm-bg); }
.cm-masthead__top {
  max-width: var(--cm-maxw); margin: 0 auto; padding: 26px 40px 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.cm-date { font-size: 12.5px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-logo { justify-self: center; }
.cm-logo img { height: 54px; }
.cm-mast-right { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
.cm-search-pill {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--cm-border);
  border-radius: 99px; padding: 7px 14px; color: var(--cm-muted); font-size: 12.5px;
  font-family: var(--cm-ui); background: #fff; cursor: pointer; transition: border-color .25s;
}
.cm-search-pill:hover { border-color: var(--cm-muted); }
.cm-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--cm-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  font-family: var(--cm-ui);
}
.cm-burger { display: none; background: none; border: 1px solid var(--cm-border); border-radius: 8px;
  width: 38px; height: 38px; cursor: pointer; align-items: center; justify-content: center; }
.cm-burger svg { stroke: var(--cm-ink); }

.cm-nav {
  max-width: var(--cm-maxw); margin: 0 auto; padding: 20px 40px 0;
  display: flex; justify-content: center; gap: 32px;
  font-size: 13.5px; color: #4a4356; font-family: var(--cm-ui); letter-spacing: .02em;
}
.cm-nav a { color: #4a4356; padding-bottom: 14px; }
.cm-nav a:hover { color: var(--cm-ink); }
.cm-nav a.is-active { color: var(--cm-primary); font-weight: 700; border-bottom: 2px solid var(--cm-primary); }
.cm-mast-rule { height: 3px; border-bottom: 1px solid var(--cm-border); margin-top: 1px; }

/* ---------- intelligence wire ---------- */
.cm-wire { background: var(--cm-ink); overflow: hidden; height: 36px; display: flex; align-items: center; }
.cm-wire__track { display: flex; width: max-content; animation: cmWire 46s linear infinite; align-items: center; }
.cm-wire:hover .cm-wire__track { animation-play-state: paused; }
.cm-wire__grp {
  display: flex; align-items: center; gap: 36px; padding-right: 36px;
  font-family: var(--cm-ui); font-size: 11.5px; letter-spacing: .04em; color: #EDE8E0; white-space: nowrap;
}
.cm-wire__tag { color: var(--cm-lilac); font-weight: 700; letter-spacing: .16em; font-size: 10px; }
.cm-wire__dot { color: var(--cm-primary); }
.cm-wire__note { color: #7d738f; font-size: 9.5px; }

/* ---------- buttons ---------- */
.cm-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cm-ui);
  font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 99px; cursor: pointer; border: 1px solid transparent; }
.cm-btn--light { background: #fff; color: var(--cm-primary-d); }
.cm-btn--light:hover { color: var(--cm-primary-d); background: #f3eef8; }
.cm-btn--dark { background: var(--cm-ink); color: #fff; }
.cm-btn--dark:hover { color: #fff; background: #000; }
.cm-btn--primary { background: var(--cm-primary); color: #fff; }
.cm-btn--primary:hover { color: #fff; background: var(--cm-primary-d); }
.cm-btn--ghost-light { border-color: rgba(255,255,255,.45); color: #fff; font-weight: 600; }
.cm-btn--ghost-light:hover { color: #fff; background: rgba(255,255,255,.12); }

/* ---------- sample badge ---------- */
.cm-sample {
  font-size: 9.5px; letter-spacing: .08em; font-weight: 600; color: #9a8fae;
  border: 1px dashed #C9BFD8; border-radius: 4px; padding: 2px 6px; font-family: var(--cm-ui);
  display: inline-block; white-space: nowrap;
}
.cm-sample--sm { padding: 1px 5px; }
.cm-sample--onDark { color: #cfc4e4; border-color: rgba(216,199,233,.5); }

/* eyebrow */
.cm-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cm-primary); font-weight: 700; font-family: var(--cm-disp); }
.cm-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; }
.cm-kicker--primary { color: var(--cm-primary); }
.cm-kicker--gold { color: var(--cm-gold); }
.cm-kicker--lilac { color: var(--cm-lilac); }

/* ---------- greeting ---------- */
.cm-greet { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: end; }
.cm-greet__h1 { font-family: var(--cm-serif); font-size: 50px; font-weight: 500; color: var(--cm-ink);
  line-height: 1.08; margin: 14px 0 0; letter-spacing: -.01em; text-wrap: pretty; animation: cmFadeUp .8s ease both; }
.cm-greet__ar { font-family: var(--cm-ar); font-size: 17px; color: var(--cm-muted); text-align: right; }
.cm-greet__side { padding-bottom: 6px; animation: cmFadeUp .8s .15s ease both; }
.cm-greet__desc { font-size: 13.5px; color: var(--cm-body); line-height: 1.65; margin-top: 10px;
  font-family: var(--cm-ui); border-top: 1px solid var(--cm-border); padding-top: 12px; }
.cm-greet__stats { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--cm-muted); font-family: var(--cm-ui); flex-wrap: wrap; }
.cm-greet__stats strong { color: var(--cm-ink); }

/* ---------- numbered brief ---------- */
.cm-brief { margin-top: 30px; border-top: 3px solid var(--cm-ink); }
.cm-brief__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.cm-brief__item { display: flex; gap: 20px; margin: 0 -14px; padding: 24px 14px;
  border-bottom: 1px solid var(--cm-border); border-radius: 4px; transition: background .35s; animation: cmFadeUp .6s ease both; }
.cm-brief__item:hover { background: var(--cm-cream); }
.cm-brief__num { font-family: var(--cm-serif); font-size: 30px; color: var(--cm-lilac-txt); line-height: 1; }
.cm-brief__ttl { font-family: var(--cm-serif); font-size: 21px; font-weight: 500; color: var(--cm-ink); line-height: 1.3; }
.cm-brief__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-brief__desc { font-size: 13px; color: var(--cm-body); margin-top: 6px; line-height: 1.55; font-family: var(--cm-ui); }
.cm-brief__desc .cta { color: var(--cm-primary); font-weight: 600; }
.cm-brief__also { display: flex; gap: 20px; padding: 24px 0; align-items: center; }
.cm-brief__also-txt { font-size: 12.5px; color: var(--cm-muted); font-family: var(--cm-ui); line-height: 1.6; }
.cm-brief__also-txt strong { color: var(--cm-ink); }

/* ---------- event feature ---------- */
.cm-event { margin-top: 36px; animation: cmFadeUp .7s ease both; }
.cm-event__frame { position: relative; border-radius: 4px; overflow: hidden; }
.cm-event__hero { position: relative; height: 330px; overflow: hidden; }
.cm-event__bg { position: absolute; inset: -3%; background-size: cover; background-position: center;
  animation: cmKenBurns 26s ease-in-out infinite alternate; }
.cm-event__scrim { position: absolute; inset: 0;
  background: linear-gradient(75deg, rgba(26,17,45,.93) 22%, rgba(26,17,45,.45) 62%, rgba(26,17,45,.15)); }
.cm-event__body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 44px; max-width: 540px; }
.cm-event__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cm-event__cd { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--cm-primary-d);
  background: var(--cm-lilac); padding: 3px 10px; border-radius: 99px; font-variant-numeric: tabular-nums; font-family: var(--cm-ui); }
.cm-event__ttl { font-family: var(--cm-serif); font-size: 33px; font-weight: 500; color: #fff; line-height: 1.15; margin-top: 12px; text-wrap: pretty; }
.cm-event__sub { font-size: 13.5px; color: #cfc4e4; margin-top: 10px; font-family: var(--cm-ui); line-height: 1.6; }
.cm-event__cta { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.cm-event__strip { background: var(--cm-primary-d); display: grid; grid-template-columns: repeat(4,1fr); font-family: var(--cm-ui); }
.cm-event__slot { padding: 16px 24px; border-right: 1px solid rgba(216,199,233,.16); }
.cm-event__slot:last-child { border-right: none; }
.cm-event__slot .t { font-size: 11px; color: #b7a8d6; font-weight: 600; }
.cm-event__slot .n { font-size: 13px; color: #fff; margin-top: 4px; font-weight: 500; }
.cm-event__slot .n span { color: #b7a8d6; }

/* ---------- section header ---------- */
.cm-sechead { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--cm-ink); padding-bottom: 12px; gap: 16px; flex-wrap: wrap; }
.cm-sechead h2 { font-family: var(--cm-serif); font-size: 26px; font-weight: 500; color: var(--cm-ink); }
.cm-sechead__note { font-size: 12px; color: var(--cm-muted); font-family: var(--cm-ui); }

/* ---------- new in portal ---------- */
.cm-new { margin-top: 44px; animation: cmFadeUp .7s ease both; }
.cm-new__grid { display: grid; grid-template-columns: repeat(3,1fr) 0.9fr; gap: 32px; padding-top: 24px; }
.cm-card__media { overflow: hidden; border-radius: 4px; position: relative; }
.cm-card__img { height: 158px; background-size: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.cm-card:hover .cm-card__img { transform: scale(1.05); }
.cm-card__k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--cm-primary); margin-top: 14px; }
.cm-card__ttl { font-family: var(--cm-serif); font-size: 19px; font-weight: 500; color: var(--cm-ink); margin-top: 6px; line-height: 1.3; }
.cm-card__meta { font-size: 12.5px; color: var(--cm-muted); margin-top: 6px; font-family: var(--cm-ui); }
.cm-card__meta .cta { color: var(--cm-primary); font-weight: 600; }
.cm-play { position: absolute; left: 12px; bottom: 12px; background: rgba(251,250,247,.95); border-radius: 99px;
  padding: 6px 12px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--cm-primary-d); font-family: var(--cm-ui); }
.cm-report-cover { height: 158px; border-radius: 4px; background: linear-gradient(150deg,var(--cm-primary),var(--cm-primary-d)); position: relative; overflow: hidden; }
.cm-report-cover__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .25; }
.cm-report-cover__in { position: relative; padding: 18px 20px; }
.cm-doclist { border-left: 1px solid var(--cm-border); padding-left: 28px; }
.cm-doclist a { display: block; padding: 12px 0; border-bottom: 1px solid var(--cm-border-s); }
.cm-doclist a:last-child { border-bottom: none; }
.cm-doclist .d-ttl { font-size: 14px; font-weight: 600; color: var(--cm-ink); font-family: var(--cm-ui); }
.cm-doclist .d-meta { font-size: 11.5px; color: var(--cm-muted); margin-top: 2px; font-family: var(--cm-ui); }

/* ---------- monthly brief band ---------- */
.cm-monthly { margin-top: 44px; background: linear-gradient(160deg,var(--cm-primary),var(--cm-primary-d));
  border-radius: 4px; padding: 36px 44px; animation: cmFadeUp .7s ease both; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; color: #fff; }
.cm-monthly__ttl { font-family: var(--cm-serif); font-size: 30px; font-weight: 500; line-height: 1.2; margin-top: 12px; }
.cm-monthly__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; font-family: var(--cm-ui); align-content: center; }
.cm-monthly__stat { display: flex; gap: 12px; align-items: baseline; }
.cm-monthly__stat .n { font-family: var(--cm-serif); font-size: 22px; color: var(--cm-lilac); }
.cm-monthly__stat .l { font-size: 13px; color: #e6dff2; }

/* ---------- learning row ---------- */
.cm-learn { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; animation: cmFadeUp .7s ease both; }
.cm-learn__col { border-top: 1px solid var(--cm-ink); padding-top: 16px; }
.cm-learn__ttl { font-family: var(--cm-serif); font-size: 23px; font-weight: 500; color: var(--cm-ink); margin-top: 10px; }
.cm-prog { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.cm-prog__bar { flex: 1; height: 4px; background: var(--cm-border-s); border-radius: 2px; }
.cm-prog__fill { height: 4px; background: var(--cm-primary); border-radius: 2px; }
.cm-prog__lbl { font-size: 12px; color: var(--cm-muted); font-family: var(--cm-ui); white-space: nowrap; }
.cm-learn__desc { font-size: 13px; color: var(--cm-body); margin-top: 12px; line-height: 1.6; font-family: var(--cm-ui); }
.cm-learn__desc strong { color: var(--cm-ink); }
.cm-book { display: flex; gap: 20px; margin-top: 10px; }
.cm-book__cov { width: 86px; height: 118px; flex: 0 0 auto; background: linear-gradient(160deg,var(--cm-primary-d),var(--cm-primary));
  border-radius: 3px; padding: 10px; display: flex; flex-direction: column; box-shadow: 4px 6px 16px rgba(35,22,70,.25); }
.cm-book__cov .s { font-size: 7px; letter-spacing: .14em; color: var(--cm-lilac); font-family: var(--cm-ui); }
.cm-book__cov .t { font-family: var(--cm-serif); font-size: 12px; color: #fff; margin-top: 6px; line-height: 1.3; }
.cm-book__links { display: flex; gap: 16px; margin-top: 12px; font-size: 13px; font-weight: 600; font-family: var(--cm-ui); }

/* ---------- footer ---------- */
.cm-foot { margin-top: 52px; border-top: 3px solid var(--cm-ink); padding: 24px 0 36px; }
.cm-foot__grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 20px; font-family: var(--cm-ui); }
.cm-foot__grid .f-ttl { font-size: 13px; font-weight: 700; color: var(--cm-ink); }
.cm-foot__grid .f-sub { font-size: 12px; color: var(--cm-muted); margin-top: 3px; }
.cm-foot__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 28px; border-top: 1px solid var(--cm-border); padding-top: 16px; font-size: 11.5px; color: var(--cm-muted); font-family: var(--cm-ui); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .cm-wrap, .cm-main { padding-left: 24px; padding-right: 24px; }
  .cm-masthead__top { padding: 18px 24px 0; }
  .cm-nav { padding: 16px 24px 0; }
  .cm-greet { grid-template-columns: 1fr; gap: 24px; }
  .cm-greet__side { padding-bottom: 0; }
  .cm-greet__ar { text-align: left; }
  .cm-greet__h1 { font-size: 38px; }
  .cm-brief__grid { grid-template-columns: 1fr; gap: 0; }
  .cm-new__grid { grid-template-columns: 1fr 1fr; }
  .cm-doclist { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--cm-border); padding-left: 0; padding-top: 16px; }
  .cm-monthly { grid-template-columns: 1fr; gap: 24px; }
  .cm-learn { grid-template-columns: 1fr; gap: 32px; }
  .cm-foot__grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 640px) {
  .cm-wrap, .cm-main { padding-left: 16px; padding-right: 16px; }
  .cm-main { padding-top: 28px; }
  /* masthead: logo left, burger + avatar right */
  .cm-masthead__top { grid-template-columns: auto 1fr auto; padding: 14px 16px; }
  .cm-date { display: none; }
  .cm-logo { justify-self: start; }
  .cm-logo img { height: 42px; }
  .cm-mast-right .cm-search-pill { display: none; }
  .cm-burger { display: inline-flex; }
  .cm-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px 8px; }
  .cm-nav.is-open { display: flex; }
  .cm-nav a { padding: 12px 0; border-bottom: 1px solid var(--cm-border-s); }
  .cm-nav a.is-active { border-bottom: 1px solid var(--cm-primary); }
  .cm-greet__h1 { font-size: 30px; }
  .cm-event__body { padding: 0 20px; }
  .cm-event__ttl { font-size: 24px; }
  .cm-event__strip { grid-template-columns: 1fr 1fr; }
  .cm-event__slot:nth-child(2) { border-right: none; }
  .cm-new__grid { grid-template-columns: 1fr; }
  .cm-monthly { padding: 24px 20px; }
  .cm-monthly__ttl { font-size: 24px; }
  .cm-book { flex-direction: column; }
  .cm-foot__grid { grid-template-columns: 1fr 1fr; }
  .cm-foot__bar { justify-content: flex-start; }
}

/* ============================================================
   Section pages: filters, Reports, Expert Interviews
   ============================================================ */

/* ---- filter bar / chips / tabs / search ---- */
.cm-filterbar { margin-top: 28px; border-top: 3px solid var(--cm-ink); padding: 16px 0 14px; border-bottom: 1px solid var(--cm-border); }
.cm-filterbar--sticky { position: sticky; top: 0; z-index: 60; background: rgba(251,250,247,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cm-filterbar__row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.cm-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.cm-chip { border: 1px solid #D9D2C6; background: #fff; color: #4a4356; font-size: 12.5px; font-weight: 600;
  font-family: var(--cm-ui); padding: 7px 14px; border-radius: 99px; cursor: pointer; transition: all .25s; white-space: nowrap; }
.cm-chip:hover { border-color: var(--cm-muted); }
.cm-chip.is-active { background: var(--cm-ink); color: var(--cm-bg); border-color: var(--cm-ink); }
.cm-result-note { font-size: 12px; color: var(--cm-muted); font-family: var(--cm-ui); flex: 0 0 auto; }
.cm-searchbox { flex: 0 0 320px; display: flex; align-items: center; gap: 10px; border: 1px solid #D9D2C6;
  border-radius: 99px; padding: 10px 16px; background: #fff; }
.cm-searchbox input { border: none; outline: none; background: transparent; font-family: var(--cm-ui);
  font-size: 13.5px; color: var(--cm-ink); width: 100%; }
.cm-searchbox input::placeholder { color: #9a8fae; }
.cm-formatrow { display: flex; gap: 20px; margin-top: 12px; align-items: baseline; font-family: var(--cm-ui); flex-wrap: wrap; }
.cm-formatrow__lbl { font-size: 10.5px; letter-spacing: .14em; color: var(--cm-muted); font-weight: 700; flex: 0 0 auto; }
.cm-tabs { display: flex; gap: 18px; flex-wrap: wrap; }
.cm-tab { border: none; background: transparent; color: var(--cm-muted); font-size: 12.5px; font-weight: 500;
  font-family: var(--cm-ui); padding: 2px 0; border-bottom: 2px solid transparent; cursor: pointer; transition: all .25s; white-space: nowrap; }
.cm-tab.is-active { color: var(--cm-ink); font-weight: 700; border-bottom-color: var(--cm-primary); }

/* ---- empty state ---- */
.cm-empty { margin-top: 36px; border: 1px dashed #D9D2C6; border-radius: 4px; padding: 56px 40px; text-align: center; }
.cm-empty__t { font-family: var(--cm-serif); font-size: 24px; color: var(--cm-ink); }
.cm-empty__s { font-size: 13px; color: var(--cm-muted); margin-top: 8px; font-family: var(--cm-ui); }

/* ---- Reports: featured lead ---- */
.cm-lead { display: grid; grid-template-columns: 300px 1fr; gap: 44px; padding: 30px 0 28px; border-bottom: 1px solid var(--cm-border-s); }
.cm-lead__coverwrap { display: block; position: relative; width: 264px; height: 348px; margin: 6px; }
.cm-lead__sheet { position: absolute; inset: 0; border-radius: 4px; transition: transform .55s cubic-bezier(.2,.65,.2,1); }
.cm-lead__sheet1 { background: #E6DFD3; transform: rotate(.9deg) translate(4px,4px); box-shadow: 4px 6px 18px rgba(35,22,70,.1); }
.cm-lead__sheet2 { background: #F2EDE3; transform: rotate(-.6deg) translate(2px,2px); transition-delay: .04s; }
.cm-lead__cover { position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
  box-shadow: 8px 12px 30px rgba(35,22,70,.2); transition: transform .55s cubic-bezier(.2,.65,.2,1), box-shadow .55s; }
.cm-lead__coverwrap:hover .cm-lead__sheet1 { transform: rotate(3.2deg) translate(16px,11px); }
.cm-lead__coverwrap:hover .cm-lead__sheet2 { transform: rotate(-2.6deg) translate(-11px,7px); }
.cm-lead__coverwrap:hover .cm-lead__cover { transform: translateY(-9px) rotate(-.7deg); box-shadow: 16px 30px 56px rgba(35,22,70,.32); }
.cm-lead__cover-in { position: relative; height: 100%; padding: 24px; display: flex; flex-direction: column; }
.cm-lead__cover-kicker { display: flex; align-items: center; gap: 8px; font-size: 8.5px; letter-spacing: .18em; font-weight: 700; font-family: var(--cm-ui); }
.cm-lead__cover-ttl { font-family: var(--cm-serif); font-size: 25px; margin-top: 40px; line-height: 1.22; }
.cm-lead__cover-foot { position: absolute; left: 24px; right: 24px; bottom: 18px; display: flex; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.25); padding-top: 12px; font-size: 10px; font-family: var(--cm-ui); }
.cm-lead__body { display: flex; flex-direction: column; }
.cm-lead__badge { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--cm-primary); background: #EFEAF7;
  padding: 4px 10px; border-radius: 99px; font-family: var(--cm-ui); align-self: flex-start; }
.cm-lead__ttl { font-family: var(--cm-serif); font-size: 31px; font-weight: 500; color: var(--cm-ink); margin-top: 12px; line-height: 1.2; text-wrap: pretty; }
.cm-lead__meta { font-size: 12.5px; color: var(--cm-muted); margin-top: 8px; font-family: var(--cm-ui); }
.cm-lead__sum { font-size: 14px; color: #4a4356; margin-top: 12px; line-height: 1.65; font-family: var(--cm-ui); max-width: 640px; }
.cm-findings { margin-top: 16px; }
.cm-findings__lbl { font-size: 10.5px; letter-spacing: .14em; color: var(--cm-muted); font-weight: 700; font-family: var(--cm-ui); }
.cm-findings__list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 640px; }
.cm-finding { display: flex; gap: 12px; align-items: baseline; }
.cm-finding__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cm-primary); flex: 0 0 auto; position: relative; top: -3px; }
.cm-finding__t { font-size: 13.5px; color: var(--cm-ink); line-height: 1.55; font-family: var(--cm-ui); }
.cm-lead__method { font-size: 12px; color: var(--cm-muted); margin-top: 14px; font-family: var(--cm-ui); font-style: italic; }
.cm-lead__cta { display: flex; gap: 12px; margin-top: auto; padding-top: 18px; align-items: center; flex-wrap: wrap; }

/* ---- Reports: compact rows ---- */
.cm-rrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; padding: 18px 14px; border-bottom: 1px solid var(--cm-border-s);
  align-items: center; transition: background .3s; margin: 0 -14px; border-radius: 4px; }
.cm-rrow:hover { background: var(--cm-cream); }
.cm-rrow__cover { height: 84px; border-radius: 3px; box-shadow: 3px 5px 14px rgba(35,22,70,.18); padding: 9px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.cm-rrow__cover-k { font-size: 6.5px; letter-spacing: .12em; font-weight: 700; font-family: var(--cm-ui); line-height: 1.5; overflow: hidden; max-height: 30px; }
.cm-rrow__cover-b { display: flex; justify-content: space-between; align-items: center; }
.cm-rrow__ttl { font-family: var(--cm-serif); font-size: 19px; font-weight: 500; color: var(--cm-ink); line-height: 1.3; }
.cm-rrow__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-rrow__meta { font-size: 12px; color: var(--cm-muted); margin-top: 4px; font-family: var(--cm-ui); }
.cm-rrow__sum { font-size: 13px; color: var(--cm-body); margin-top: 6px; line-height: 1.55; font-family: var(--cm-ui); max-width: 660px; }
.cm-rrow__cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cm-coming { font-size: 10px; font-weight: 700; color: #8a5a00; background: #F6EDDA; padding: 3px 9px; border-radius: 99px; font-family: var(--cm-ui); white-space: nowrap; }
.cm-coming-note { border: 1px dashed #D9D2C6; color: var(--cm-muted); font-size: 11.5px; font-weight: 600; padding: 8px 14px; border-radius: 99px; font-family: var(--cm-ui); white-space: nowrap; }
.cm-btn--xs { font-size: 12px; padding: 8px 16px; }
.cm-btn--outline { border: 1px solid #C9BFD8; color: var(--cm-primary); background: transparent; font-weight: 600; }
.cm-btn--outline:hover { border-color: var(--cm-primary); background: #f3eef8; }
.cm-link { color: var(--cm-primary); font-size: 12px; font-weight: 600; font-family: var(--cm-ui); }
.cm-link--muted { color: var(--cm-muted); }

/* ---- Reports: curated external cards ---- */
.cm-section-mt { margin-top: 40px; animation: cmFadeUp .7s ease both; }
.cm-ecards { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; padding-top: 20px; }
.cm-ecard { border-top: 2px solid var(--cm-border); padding-top: 16px; display: flex; flex-direction: column; transition: border-color .3s; }
.cm-ecard:hover { border-color: var(--cm-primary); }
.cm-ecard__src { display: flex; align-items: center; gap: 10px; }
.cm-mono { width: 34px; height: 34px; border-radius: 7px; background: var(--cm-ink); color: var(--cm-bg); display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 800; font-family: var(--cm-ui); flex: 0 0 auto; }
.cm-ecard__srcname { font-size: 12.5px; font-weight: 700; color: var(--cm-ink); font-family: var(--cm-ui); }
.cm-ecard__srctype { font-size: 11px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-ecard__ttl { font-family: var(--cm-serif); font-size: 19px; font-weight: 500; color: var(--cm-ink); margin-top: 14px; line-height: 1.3; }
.cm-ecard__sum { font-size: 12.5px; color: var(--cm-body); margin-top: 8px; line-height: 1.6; font-family: var(--cm-ui); }
.cm-ecard__why { font-size: 12px; color: #4a4356; margin-top: 8px; line-height: 1.55; font-family: var(--cm-ui); }
.cm-ecard__why strong { color: var(--cm-ink); }
.cm-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.cm-tag { font-size: 11px; color: var(--cm-body); background: #F1EDE4; padding: 3px 10px; border-radius: 99px; font-family: var(--cm-ui); }
.cm-ecard__cta { display: flex; gap: 12px; margin-top: auto; padding-top: 14px; align-items: center; flex-wrap: wrap; }

/* ---- Reports: Strategic Tech Intelligence (dark) ---- */
.cm-intel { margin-top: 40px; background: var(--cm-ink); border-radius: 4px; padding: 32px 40px 36px; animation: cmFadeUp .7s ease both; }
.cm-intel__head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid rgba(216,199,233,.25); padding-bottom: 14px; gap: 16px; flex-wrap: wrap; }
.cm-intel__head h2 { font-family: var(--cm-serif); font-size: 24px; font-weight: 500; color: var(--cm-bg); white-space: nowrap; }
.cm-intel__note { font-size: 12px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-intel__row { display: grid; grid-template-columns: 120px 1fr 150px 110px 80px; gap: 18px; padding: 15px 0;
  border-bottom: 1px solid rgba(216,199,233,.12); align-items: baseline; transition: background .3s; }
.cm-intel__row:hover { background: rgba(216,199,233,.05); }
.cm-intel__pri { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; font-family: var(--cm-ui); }
.cm-intel__ttl { font-size: 15px; font-weight: 600; color: #F2EFE9; font-family: var(--cm-ui); }
.cm-intel__sub { font-size: 12px; color: var(--cm-muted); margin-top: 3px; font-family: var(--cm-ui); }
.cm-intel__aud { font-size: 12px; color: #b7a8d6; font-family: var(--cm-ui); }
.cm-intel__region { font-size: 10.5px; font-weight: 700; color: var(--cm-lilac); border: 1px solid rgba(216,199,233,.3); padding: 3px 10px; border-radius: 99px; font-family: var(--cm-ui); }
.cm-intel__cta { font-size: 12px; color: var(--cm-lilac); font-weight: 700; font-family: var(--cm-ui); text-align: right; }
.cm-intel__foot { font-size: 11.5px; color: #7d738f; margin-top: 14px; font-family: var(--cm-ui); }

/* ---- Expert Interviews ---- */
.cm-ifeat { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: stretch; margin-top: 32px; animation: cmFadeUp .7s ease both; }
.cm-ifeat__media { display: block; position: relative; border-radius: 4px; overflow: hidden; min-height: 380px; }
.cm-ifeat__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s cubic-bezier(.2,.6,.2,1); }
.cm-ifeat__media:hover .cm-ifeat__bg { transform: scale(1.04); }
.cm-ifeat__scrim { position: absolute; inset: 0; background: linear-gradient(15deg, rgba(23,15,40,.82) 12%, rgba(23,15,40,.18) 55%, rgba(23,15,40,0)); }
.cm-ifeat__tag { position: absolute; left: 26px; top: 22px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cm-lilac); font-weight: 700; }
.cm-ifeat__play { position: absolute; left: 26px; bottom: 24px; right: 26px; display: flex; align-items: center; gap: 10px; }
.cm-ifeat__playbtn { width: 46px; height: 46px; border-radius: 50%; background: rgba(251,250,247,.96); display: flex; align-items: center; justify-content: center; transition: transform .4s; }
.cm-ifeat__media:hover .cm-ifeat__playbtn { transform: scale(1.08); }
.cm-ifeat__playlbl { font-size: 12px; font-weight: 700; color: #fff; font-family: var(--cm-ui); background: rgba(23,15,40,.55); padding: 6px 12px; border-radius: 99px; backdrop-filter: blur(4px); }
.cm-ifeat__body { display: flex; flex-direction: column; border-top: 3px solid var(--cm-ink); padding-top: 18px; }
.cm-ifeat__by { display: flex; align-items: center; gap: 14px; }
.cm-ifeat__by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.cm-ifeat__name { font-size: 15px; font-weight: 700; color: var(--cm-ink); font-family: var(--cm-ui); }
.cm-ifeat__role { font-size: 12.5px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-ifeat__ttl { font-family: var(--cm-serif); font-size: 29px; font-weight: 500; color: var(--cm-ink); line-height: 1.2; margin-top: 16px; text-wrap: pretty; }
.cm-ifeat__desc { font-size: 13.5px; color: var(--cm-body); margin-top: 12px; line-height: 1.65; font-family: var(--cm-ui); }
.cm-quote { margin-top: 14px; border-left: 2px solid var(--cm-lilac); padding: 2px 0 2px 14px; }
.cm-quote__lbl { font-size: 10.5px; letter-spacing: .14em; color: var(--cm-muted); font-weight: 700; font-family: var(--cm-ui); }
.cm-quote__t { font-family: var(--cm-serif); font-style: italic; font-size: 16px; color: var(--cm-ink); margin-top: 4px; line-height: 1.45; }
.cm-ifeat__cta { display: flex; gap: 12px; margin-top: auto; padding-top: 18px; flex-wrap: wrap; }

.cm-igrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; padding-top: 24px; }
.cm-icard { display: block; }
.cm-icard__media { overflow: hidden; border-radius: 4px; position: relative; }
.cm-icard__img { height: 170px; background-size: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.cm-icard:hover .cm-icard__img { transform: scale(1.05); }
.cm-icard__head { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cm-icard__ttl { font-family: var(--cm-serif); font-size: 19px; font-weight: 500; color: var(--cm-ink); margin-top: 6px; line-height: 1.3; }
.cm-icard__speaker { font-size: 12.5px; color: var(--cm-muted); margin-top: 5px; font-family: var(--cm-ui); }
.cm-icard__insight { font-size: 12.5px; color: #4a4356; margin-top: 8px; line-height: 1.55; font-family: var(--cm-ui); }
.cm-icard__insight strong { color: var(--cm-ink); }
.cm-icard__links { display: flex; gap: 14px; margin-top: 10px; font-size: 12.5px; font-weight: 600; font-family: var(--cm-ui); }
.cm-pending { font-size: 10px; font-weight: 700; color: #8a5a00; background: #F6EDDA; padding: 3px 9px; border-radius: 99px; font-family: var(--cm-ui); }

.cm-suggest { margin-top: 44px; background: #F1EDE4; border-radius: 4px; padding: 28px 36px; display: flex; align-items: center; justify-content: space-between; gap: 32px; animation: cmFadeUp .7s ease both; flex-wrap: wrap; }
.cm-suggest__t { font-family: var(--cm-serif); font-size: 22px; color: var(--cm-ink); }
.cm-suggest__s { font-size: 13px; color: var(--cm-body); margin-top: 6px; font-family: var(--cm-ui); }
.cm-btn--outline-dark { border: 1px solid var(--cm-ink); color: var(--cm-ink); background: transparent; }
.cm-btn--outline-dark:hover { background: var(--cm-ink); color: var(--cm-bg); }

/* ---- responsive for section pages ---- */
@media (max-width: 1024px) {
  .cm-searchbox { flex: 1 1 100%; }
  .cm-lead { grid-template-columns: 1fr; gap: 24px; }
  .cm-lead__coverwrap { margin: 0 auto; }
  .cm-ecards { grid-template-columns: 1fr 1fr; }
  .cm-igrid { grid-template-columns: 1fr 1fr; }
  .cm-ifeat { grid-template-columns: 1fr; }
  .cm-ifeat__media { min-height: 300px; }
  .cm-intel__row { grid-template-columns: 90px 1fr 90px; }
  .cm-intel__aud, .cm-intel__cta { display: none; }
}
@media (max-width: 640px) {
  .cm-ecards { grid-template-columns: 1fr; }
  .cm-igrid { grid-template-columns: 1fr; }
  .cm-rrow { grid-template-columns: 48px 1fr; }
  .cm-rrow__cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; padding-top: 4px; }
  .cm-intel { padding: 24px 20px; }
  .cm-intel__row { grid-template-columns: 1fr; gap: 4px; }
  .cm-intel__region { display: inline-block; margin-top: 4px; }
  .cm-suggest { flex-direction: column; align-items: flex-start; }
  .cm-lead__coverwrap { width: 220px; height: 290px; }
}

/* ============================================================
   Event Materials, Event Detail, Documentation
   ============================================================ */

/* ---- status badges (shared) ---- */
.cm-badge { font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 4px 10px; border-radius: 99px; font-family: var(--cm-ui); white-space: nowrap; }
.cm-badge--upcoming { color: var(--cm-primary-d); background: var(--cm-lilac); }
.cm-badge--prep { color: #8a5a00; background: #F6EDDA; }
.cm-badge--available { color: #1F6B3B; background: #E7F4EC; }

/* ---- Event Materials timeline ---- */
.cm-etl-sec { margin-top: 30px; border-top: 3px solid var(--cm-ink); animation: cmFadeUp .7s ease both; }
.cm-etl { display: grid; grid-template-columns: 120px 380px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--cm-border-s); }
.cm-etl:last-child { border-bottom: none; }
.cm-etl__q { font-family: var(--cm-serif); font-size: 30px; color: var(--cm-ink); line-height: 1; }
.cm-etl__date { font-size: 12px; color: var(--cm-muted); margin-top: 6px; font-family: var(--cm-ui); }
.cm-etl__imgwrap { overflow: hidden; border-radius: 4px; display: block; }
.cm-etl__img { height: 220px; background-size: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.cm-etl__imgwrap:hover .cm-etl__img { transform: scale(1.04); }
.cm-etl__body { display: flex; flex-direction: column; }
.cm-etl__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-etl__loc { font-size: 12px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-etl__ttl { font-family: var(--cm-serif); font-size: 26px; font-weight: 500; color: var(--cm-ink); margin-top: 10px; line-height: 1.25; }
.cm-etl__desc { font-size: 13.5px; color: var(--cm-body); margin-top: 8px; line-height: 1.6; font-family: var(--cm-ui); max-width: 620px; }
.cm-etl__stats { display: flex; gap: 16px; margin-top: 8px; font-size: 12.5px; color: var(--cm-muted); font-family: var(--cm-ui); flex-wrap: wrap; }
.cm-etl__stats strong { color: var(--cm-ink); }
.cm-etl__cta { display: flex; gap: 12px; margin-top: auto; padding-top: 16px; align-items: center; flex-wrap: wrap; }
.cm-btn--sm { font-size: 12.5px; padding: 9px 18px; }

/* ---- Event Detail ---- */
.cm-ehero { position: relative; overflow: hidden; height: 420px; }
.cm-ehero__bg { position: absolute; inset: -4%; background-size: cover; background-position: 50% 40%; animation: cmKenBurns 24s ease-in-out infinite alternate; }
.cm-ehero__scrim { position: absolute; inset: 0; background: linear-gradient(8deg, rgba(23,15,40,.94) 16%, rgba(23,15,40,.5) 55%, rgba(23,15,40,.15)); }
.cm-ehero__in { position: relative; max-width: var(--cm-maxw); margin: 0 auto; padding: 0 40px 34px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.cm-crumb { font-size: 12px; color: var(--cm-lilac); font-family: var(--cm-ui); }
.cm-crumb a { color: var(--cm-lilac); }
.cm-ehero__h1 { font-family: var(--cm-serif); font-size: 46px; font-weight: 500; color: #fff; line-height: 1.1; margin: 12px 0 0; letter-spacing: -.01em; max-width: 840px; text-wrap: pretty; }
.cm-ehero__sub { font-size: 14px; color: #cfc4e4; margin-top: 10px; font-family: var(--cm-ui); max-width: 660px; line-height: 1.6; }
.cm-etabs { position: sticky; top: 0; z-index: 60; background: rgba(251,250,247,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--cm-border); }
.cm-etabs__in { max-width: var(--cm-maxw); margin: 0 auto; padding: 0 40px; display: flex; gap: 28px; font-family: var(--cm-ui); overflow-x: auto; }
.cm-etab { font-size: 13px; font-weight: 500; color: var(--cm-muted); padding: 16px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.cm-etab:hover { color: var(--cm-ink); }
.cm-etab.is-active { color: var(--cm-ink); font-weight: 600; border-bottom-color: var(--cm-primary); }
.cm-anchor { scroll-margin-top: 64px; }
.cm-ov { display: grid; grid-template-columns: 1fr 300px; gap: 48px; animation: cmFadeUp .7s ease both; }
.cm-ov__lead { font-family: var(--cm-serif); font-size: 27px; font-weight: 500; color: var(--cm-ink); line-height: 1.3; margin-top: 12px; text-wrap: pretty; }
.cm-ov__p { font-size: 14px; color: var(--cm-body); line-height: 1.7; margin-top: 16px; font-family: var(--cm-ui); max-width: 640px; }
.cm-ov__side { border-left: 1px solid var(--cm-border); padding-left: 28px; display: flex; flex-direction: column; gap: 18px; }
.cm-stat__n { font-family: var(--cm-serif); font-size: 32px; color: var(--cm-ink); }
.cm-stat__l { font-size: 12px; color: var(--cm-muted); font-family: var(--cm-ui); line-height: 1.5; }
.cm-stat__l strong { color: var(--cm-ink); font-weight: 600; }
.cm-secmt { margin-top: 48px; animation: cmFadeUp .7s ease both; }
.cm-spk { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--cm-border-s); }
.cm-spk:last-child { border-bottom: none; }
.cm-spk__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.cm-spk__name { font-size: 14.5px; font-weight: 700; color: var(--cm-ink); margin-top: 12px; font-family: var(--cm-ui); }
.cm-spk__role { font-size: 12px; color: var(--cm-muted); margin-top: 3px; line-height: 1.5; font-family: var(--cm-ui); }
.cm-spk__tag { display: inline-flex; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--cm-primary); background: #EFEAF7; padding: 3px 9px; border-radius: 99px; font-family: var(--cm-ui); }
.cm-spk__ttl { font-family: var(--cm-serif); font-size: 21px; font-weight: 500; color: var(--cm-ink); line-height: 1.3; }
.cm-spk__blocks { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; font-family: var(--cm-ui); }
.cm-spk__lbl { font-size: 10.5px; letter-spacing: .1em; color: var(--cm-muted); font-weight: 700; }
.cm-spk__txt { font-size: 13.5px; color: #4a4356; margin-top: 4px; line-height: 1.6; }
.cm-spk__foot { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.cm-takeaways { margin-top: 48px; background: var(--cm-ink); border-radius: 4px; padding: 34px 40px; animation: cmFadeUp .7s ease both; }
.cm-takeaways h2 { font-family: var(--cm-serif); font-size: 26px; font-weight: 500; color: var(--cm-bg); }
.cm-takeaways__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; margin-top: 14px; }
.cm-takeaway { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(216,199,233,.14); }
.cm-takeaway__n { font-family: var(--cm-serif); font-size: 24px; color: var(--cm-muted); }
.cm-takeaway__t { font-size: 14px; color: #e6dff2; line-height: 1.6; font-family: var(--cm-ui); }
.cm-matgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-top: 22px; }
.cm-matcard { border: 1px solid var(--cm-border); border-radius: 4px; padding: 20px; display: flex; flex-direction: column; transition: border-color .3s; }
.cm-matcard:hover { border-color: var(--cm-primary); }
.cm-matcard--dashed { border-style: dashed; border-color: #D9D2C6; }
.cm-matcard__icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.cm-matcard__ttl { font-size: 14px; font-weight: 700; color: var(--cm-ink); margin-top: 12px; font-family: var(--cm-ui); }
.cm-matcard__desc { font-size: 12.5px; color: var(--cm-muted); margin-top: 4px; line-height: 1.5; font-family: var(--cm-ui); }
.cm-matcard__foot { margin-top: auto; padding-top: 12px; }
.cm-matcard__link { color: var(--cm-primary); font-size: 12.5px; font-weight: 700; margin-top: auto; padding-top: 12px; font-family: var(--cm-ui); }
.cm-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 180px; gap: 12px; padding-top: 22px; }
.cm-gcell { overflow: hidden; border-radius: 4px; }
.cm-gcell--tall { grid-row: span 2; }
.cm-gcell__img { width: 100%; height: 100%; background-size: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.cm-gcell:hover .cm-gcell__img { transform: scale(1.05); }
.cm-gwide { height: 220px; overflow: hidden; border-radius: 4px; margin-top: 12px; }
.cm-recommend { margin-top: 48px; background: #F1EDE4; border-radius: 4px; padding: 28px 36px; animation: cmFadeUp .7s ease both; }
.cm-recommend__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 16px; }
.cm-recommend__ttl { font-family: var(--cm-serif); font-size: 18px; color: var(--cm-ink); line-height: 1.3; }
.cm-recommend__sub { font-size: 12.5px; color: var(--cm-muted); margin-top: 5px; font-family: var(--cm-ui); }

/* ---- Documentation ---- */
.cm-docgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 28px; }
.cm-doc { border: 1px solid var(--cm-border); border-radius: 4px; padding: 22px; display: flex; flex-direction: column; transition: border-color .3s, transform .3s; background: #fff; }
.cm-doc:hover { border-color: var(--cm-primary); transform: translateY(-3px); }
.cm-doc__top { display: flex; align-items: center; justify-content: space-between; }
.cm-doc__icon { width: 42px; height: 42px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; font-family: var(--cm-ui); }
.cm-doc__cat { font-size: 10px; letter-spacing: .1em; color: var(--cm-muted); font-weight: 700; margin-top: 16px; font-family: var(--cm-ui); }
.cm-doc__ttl { font-family: var(--cm-serif); font-size: 19px; font-weight: 500; color: var(--cm-ink); margin-top: 6px; line-height: 1.3; }
.cm-doc__use { font-size: 12.5px; color: var(--cm-body); margin-top: 8px; line-height: 1.55; font-family: var(--cm-ui); }
.cm-doc__use strong { color: var(--cm-ink); }
.cm-doc__fmt { font-size: 11.5px; color: var(--cm-muted); margin-top: 10px; font-family: var(--cm-ui); }
.cm-doc__foot { display: flex; gap: 12px; margin-top: auto; padding-top: 16px; align-items: center; flex-wrap: wrap; }
.cm-doc__note { font-size: 11.5px; color: #9a8fae; margin-top: 16px; font-family: var(--cm-ui); }
.cm-pill-dark { background: var(--cm-ink); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 99px; font-family: var(--cm-ui); }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .cm-etl { grid-template-columns: 1fr; gap: 12px; }
  .cm-ov { grid-template-columns: 1fr; gap: 24px; }
  .cm-ov__side { border-left: none; border-top: 1px solid var(--cm-border); padding-left: 0; padding-top: 20px; }
  .cm-spk { grid-template-columns: 1fr; gap: 14px; }
  .cm-takeaways__grid { grid-template-columns: 1fr; }
  .cm-matgrid { grid-template-columns: 1fr 1fr; }
  .cm-gallery { grid-template-columns: 1fr 1fr; }
  .cm-recommend__grid { grid-template-columns: 1fr; }
  .cm-docgrid { grid-template-columns: 1fr 1fr; }
  .cm-ehero { height: 340px; }
  .cm-ehero__h1 { font-size: 34px; }
}
@media (max-width: 640px) {
  .cm-matgrid, .cm-gallery, .cm-docgrid { grid-template-columns: 1fr; }
  .cm-gallery { grid-auto-rows: 150px; }
  .cm-gcell--tall { grid-row: span 1; }
  .cm-ehero { height: 300px; }
  .cm-ehero__h1 { font-size: 27px; }
  .cm-ehero__in { padding: 0 16px 24px; }
}

/* ============================================================
   Training, Training Module, Agenda
   ============================================================ */
@keyframes cmPulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }

/* ---- Training: continue band ---- */
.cm-continue { background: linear-gradient(150deg,var(--cm-primary),var(--cm-primary-d)); border-radius: 4px; padding: 28px 32px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; color: #fff; margin-top: 22px; border-top: 3px solid var(--cm-ink); }
.cm-continue-wrap { margin-top: 30px; border-top: 3px solid var(--cm-ink); padding-top: 22px; animation: cmFadeUp .7s ease both; }
.cm-continue__ttl { font-family: var(--cm-serif); font-size: 28px; font-weight: 500; margin-top: 12px; line-height: 1.25; }
.cm-continue__sub { font-size: 13px; color: #cfc4e4; margin-top: 8px; font-family: var(--cm-ui); line-height: 1.6; }
.cm-continue__sub strong { color: #fff; }
.cm-continue__prog { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.cm-continue__bar { flex: 1; max-width: 320px; height: 6px; background: rgba(216,199,233,.24); border-radius: 3px; }
.cm-continue__fill { height: 6px; background: var(--cm-lilac); border-radius: 3px; }
.cm-continue__pct { font-size: 12px; color: var(--cm-lilac); font-family: var(--cm-ui); }
.cm-continue__side { border-left: 1px solid rgba(216,199,233,.2); padding-left: 36px; display: flex; flex-direction: column; justify-content: center; }
.cm-continue__lbl { font-size: 10.5px; letter-spacing: .14em; color: #b7a8d6; font-weight: 700; font-family: var(--cm-ui); }
.cm-continue__row { display: flex; justify-content: space-between; font-size: 13px; font-family: var(--cm-ui); }
.cm-continue__row span:first-child { color: #cfc4e4; }
.cm-continue__row strong { color: #fff; }

/* ---- Training: learning paths ---- */
.cm-paths { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; padding-top: 24px; }
.cm-path { display: block; border: 1px solid var(--cm-border); border-radius: 4px; padding: 24px; transition: border-color .3s, transform .3s; }
.cm-path:hover { border-color: var(--cm-primary); transform: translateY(-3px); }
.cm-path__top { display: flex; align-items: center; justify-content: space-between; }
.cm-lvl { font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 4px 10px; border-radius: 99px; font-family: var(--cm-ui); }
.cm-lvl--exec { color: var(--cm-primary); background: #EFEAF7; }
.cm-lvl--inter { color: var(--cm-body); background: #F1EDE4; }
.cm-path__dur { font-size: 12px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-path__ttl { font-family: var(--cm-serif); font-size: 23px; font-weight: 500; color: var(--cm-ink); margin-top: 14px; line-height: 1.25; }
.cm-path__desc { font-size: 13px; color: var(--cm-body); margin-top: 8px; line-height: 1.6; font-family: var(--cm-ui); }
.cm-path__prog { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.cm-path__bar { flex: 1; height: 5px; background: var(--cm-border-s); border-radius: 3px; }
.cm-path__fill { height: 5px; background: var(--cm-primary); border-radius: 3px; }
.cm-path__st { font-size: 11.5px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-path__link { color: var(--cm-primary); font-size: 13px; font-weight: 700; margin-top: 14px; font-family: var(--cm-ui); }

/* ---- Training: Book of the Month ---- */
.cm-botm { display: grid; grid-template-columns: 180px 1fr 260px; gap: 36px; padding-top: 24px; align-items: start; }
.cm-botm__cov { width: 150px; height: 210px; background: linear-gradient(160deg,var(--cm-primary-d),var(--cm-primary)); border-radius: 3px; padding: 16px; display: flex; flex-direction: column; box-shadow: 8px 12px 30px rgba(35,22,70,.24); }
.cm-botm__cov .s { font-size: 8px; letter-spacing: .16em; color: var(--cm-lilac); font-family: var(--cm-ui); }
.cm-botm__cov .t { font-family: var(--cm-serif); font-size: 19px; color: #fff; margin-top: 14px; line-height: 1.25; }
.cm-botm__cov .d { margin-top: auto; font-size: 9px; color: #b7a8d6; font-family: var(--cm-ui); }
.cm-botm__ttl { font-family: var(--cm-serif); font-size: 24px; font-weight: 500; color: var(--cm-ink); line-height: 1.25; }
.cm-botm__meta { font-size: 12.5px; color: var(--cm-muted); margin-top: 4px; font-family: var(--cm-ui); }
.cm-botm__desc { font-size: 14px; color: var(--cm-body); margin-top: 12px; line-height: 1.7; font-family: var(--cm-ui); }
.cm-botm__links { display: flex; gap: 16px; margin-top: 18px; font-size: 13px; font-weight: 700; font-family: var(--cm-ui); flex-wrap: wrap; }
.cm-botm__connect { border-left: 1px solid var(--cm-border); padding-left: 28px; }
.cm-botm__clist { display: flex; flex-direction: column; margin-top: 8px; font-family: var(--cm-ui); }
.cm-botm__clist a { font-size: 13px; color: var(--cm-ink); padding: 8px 0; border-bottom: 1px solid var(--cm-border-s); }
.cm-botm__clist a:last-child { border-bottom: none; }

/* ---- Training Module ---- */
.cm-crumb2 { font-size: 12.5px; color: var(--cm-muted); font-family: var(--cm-ui); animation: cmFadeUp .6s ease both; }
.cm-crumb2 a { color: var(--cm-primary); }
.cm-crumb2 .sep { margin: 0 6px; color: #C9BFD8; }
.cm-lbl { font-size: 10.5px; letter-spacing: .14em; color: var(--cm-muted); font-weight: 700; font-family: var(--cm-ui); }
.cm-tm__grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 320px; gap: 40px; animation: cmFadeUp .7s .05s ease both; }
.cm-player { position: relative; border-radius: 4px; overflow: hidden; height: 440px; }
.cm-player__poster { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cm-player__scrim { position: absolute; inset: 0; background: linear-gradient(10deg, rgba(23,15,40,.68), rgba(23,15,40,.1) 55%); }
.cm-player__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cm-player__play { width: 82px; height: 82px; border-radius: 50%; background: rgba(251,250,247,.96); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 40px rgba(23,15,40,.4); transition: transform .35s; }
.cm-player__center:hover .cm-player__play { transform: scale(1.08); }
.cm-player__lbl { position: absolute; left: 22px; bottom: 18px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(23,15,40,.55); padding: 6px 12px; border-radius: 99px; font-family: var(--cm-ui); backdrop-filter: blur(4px); }
.cm-player--dark { background: var(--cm-ink); }
.cm-player__msg { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
.cm-player__msg-in { max-width: 440px; padding: 0 24px; }
.cm-player__dots { display: flex; gap: 6px; justify-content: center; }
.cm-player__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--cm-lilac); animation: cmPulse 1.1s ease-in-out infinite; }
.cm-player__dots span:nth-child(2) { animation-delay: .18s; }
.cm-player__dots span:nth-child(3) { animation-delay: .36s; }
.cm-player__grey { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .14; filter: grayscale(60%); }
.cm-block3 { margin-top: 32px; border-top: 3px solid var(--cm-ink); padding-top: 18px; }
.cm-h3 { font-family: var(--cm-serif); font-size: 23px; font-weight: 500; color: var(--cm-ink); }
.cm-msum__p { font-size: 14px; color: #4a4356; margin-top: 12px; line-height: 1.7; font-family: var(--cm-ui); }
.cm-outcome { display: flex; gap: 12px; align-items: baseline; }
.cm-outcome__t { font-size: 14px; color: var(--cm-ink); line-height: 1.55; font-family: var(--cm-ui); }
.cm-exercise { margin-top: 28px; background: #F1EDE4; border-radius: 4px; padding: 22px 26px; }
.cm-exercise__ttl { font-family: var(--cm-serif); font-size: 19px; color: var(--cm-ink); margin-top: 8px; line-height: 1.3; }
.cm-exercise__p { font-size: 13px; color: var(--cm-body); margin-top: 8px; line-height: 1.6; font-family: var(--cm-ui); }
.cm-quiz__q { font-size: 14px; color: var(--cm-ink); margin-top: 14px; line-height: 1.5; font-family: var(--cm-ui); font-weight: 600; }
.cm-quiz__opts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cm-opt { text-align: left; border: 1px solid #D9D2C6; background: #fff; color: var(--cm-ink); font-size: 13.5px; font-family: var(--cm-ui); padding: 14px 18px; border-radius: 8px; cursor: pointer; transition: all .25s; display: flex; align-items: center; gap: 12px; width: 100%; }
.cm-opt__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C9BFD8; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #C9BFD8; }
.cm-opt.is-correct { border-color: #1F6B3B; background: #E7F4EC; }
.cm-opt.is-correct .cm-opt__dot { border-color: #1F6B3B; color: #1F6B3B; }
.cm-opt.is-wrong { border-color: #B3261E; background: #FBEAE9; }
.cm-opt.is-wrong .cm-opt__dot { border-color: #B3261E; color: #B3261E; }
.cm-quiz__fb { margin-top: 14px; border-radius: 8px; padding: 14px 18px; }
.cm-quiz__fb-t { font-size: 13px; font-weight: 700; font-family: var(--cm-ui); }
.cm-quiz__fb-tx { font-size: 13px; color: #4a4356; margin-top: 4px; line-height: 1.6; font-family: var(--cm-ui); }
.cm-modnav { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--cm-border); padding-top: 20px; gap: 12px; }
.cm-rail { display: flex; flex-direction: column; gap: 20px; }
.cm-railsec { border-top: 3px solid var(--cm-ink); padding-top: 16px; }
.cm-step { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cm-border-s); font-family: var(--cm-ui); }
.cm-step:last-child { border-bottom: none; }
.cm-step__n { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 auto; }
.cm-step__n--done, .cm-step__n--cur { background: var(--cm-primary); color: #fff; }
.cm-step__n--todo { border: 1px solid #C9BFD8; }
.cm-step__t { font-size: 13px; color: var(--cm-body); }
.cm-step__t--cur { color: var(--cm-ink); font-weight: 700; }
.cm-railcard { background: #F1EDE4; border-radius: 4px; padding: 18px 20px; }
.cm-railcard--bd { background: #fff; border: 1px solid var(--cm-border); padding: 16px 18px; }
.cm-railcard a { display: block; padding: 10px 0; border-bottom: 1px solid var(--cm-border); }
.cm-railcard a:last-child { border-bottom: none; }
.cm-railcard .r-t { font-size: 13px; font-weight: 600; color: var(--cm-ink); font-family: var(--cm-ui); line-height: 1.4; }
.cm-railcard .r-m { font-size: 11.5px; color: var(--cm-muted); margin-top: 2px; font-family: var(--cm-ui); }

/* ---- Agenda ---- */
.cm-ahero-wrap { margin-top: 30px; border-top: 3px solid var(--cm-ink); padding-top: 24px; animation: cmFadeUp .7s ease both; }
.cm-ahero__strip { background: var(--cm-primary-d); display: grid; grid-template-columns: 1fr 1fr; font-family: var(--cm-ui); }
.cm-ahero__slot { padding: 18px 42px; display: flex; align-items: center; gap: 14px; }
.cm-ahero__slot:first-child { border-right: 1px solid rgba(216,199,233,.16); }
.cm-ahero__slot .l { font-size: 11px; color: #b7a8d6; }
.cm-ahero__slot .v { font-size: 14px; color: #fff; font-weight: 600; margin-top: 2px; }
.cm-sched__row { display: grid; grid-template-columns: 130px 1fr 150px; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--cm-border-s); align-items: baseline; }
.cm-sched__time { font-family: var(--cm-ui); font-size: 14px; font-weight: 700; color: var(--cm-primary); }
.cm-sched__ttl { font-family: var(--cm-serif); font-size: 20px; font-weight: 500; color: var(--cm-ink); line-height: 1.3; }
.cm-sched__sp { font-size: 12.5px; color: var(--cm-body); margin-top: 5px; font-family: var(--cm-ui); }
.cm-sched__type { text-align: right; }
.cm-typebadge { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 99px; font-family: var(--cm-ui); white-space: nowrap; }
.cm-radar { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-top: 22px; }
.cm-rcard { border: 1px solid var(--cm-border); border-radius: 4px; padding: 22px; display: flex; flex-direction: column; background: #fff; transition: border-color .3s; }
.cm-rcard:hover { border-color: var(--cm-primary); }
.cm-rcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cm-rcard__scope { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--cm-body); background: #F1EDE4; padding: 4px 10px; border-radius: 99px; font-family: var(--cm-ui); }
.cm-rcard__pri { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-rcard__ttl { font-family: var(--cm-serif); font-size: 21px; font-weight: 500; color: var(--cm-ink); margin-top: 14px; line-height: 1.25; }
.cm-rcard__meta { font-size: 12px; color: var(--cm-muted); margin-top: 5px; font-family: var(--cm-ui); }
.cm-rcard__why { font-size: 12.5px; color: #4a4356; margin-top: 10px; line-height: 1.55; font-family: var(--cm-ui); }
.cm-rcard__why strong { color: var(--cm-ink); }
.cm-rcard__cta { display: flex; gap: 12px; margin-top: auto; padding-top: 16px; align-items: center; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .cm-continue { grid-template-columns: 1fr; gap: 24px; }
  .cm-continue__side { border-left: none; border-top: 1px solid rgba(216,199,233,.2); padding-left: 0; padding-top: 18px; }
  .cm-paths { grid-template-columns: 1fr; }
  .cm-botm { grid-template-columns: 150px 1fr; }
  .cm-botm__connect { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--cm-border); padding-left: 0; padding-top: 16px; }
  .cm-tm__grid { grid-template-columns: 1fr; }
  .cm-radar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cm-botm { grid-template-columns: 1fr; }
  .cm-botm__cov { margin: 0 auto; }
  .cm-radar { grid-template-columns: 1fr; }
  .cm-ahero__strip { grid-template-columns: 1fr; }
  .cm-ahero__slot:first-child { border-right: none; border-bottom: 1px solid rgba(216,199,233,.16); }
  .cm-ahero__slot { padding: 16px 20px; }
  .cm-sched__row { grid-template-columns: 1fr; gap: 6px; }
  .cm-sched__type { text-align: left; }
  .cm-player { height: 300px; }
}

/* ============================================================
   Auth (Login/OTP), Profile, Interview Detail
   ============================================================ */

/* ---- Auth split-screen ---- */
.cm-auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.cm-auth__brand { position: relative; overflow: hidden; }
.cm-auth__brand-bg { position: absolute; inset: -4%; background-size: cover; background-position: center; animation: cmKenBurns 30s ease-in-out infinite alternate; }
.cm-auth__brand-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,15,40,.82), rgba(23,15,40,.92)); }
.cm-auth__brand-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 52px; box-sizing: border-box; }
.cm-auth__brand-logo { height: 58px; filter: brightness(0) invert(1); align-self: flex-start; }
.cm-auth__ar { font-family: var(--cm-ar); font-size: 20px; color: #b7a8d6; }
.cm-auth__h { font-family: var(--cm-serif); font-size: 38px; font-weight: 500; color: #fff; line-height: 1.15; margin-top: 14px; max-width: 460px; text-wrap: pretty; }
.cm-auth__p { font-size: 14px; color: #cfc4e4; margin-top: 16px; line-height: 1.7; font-family: var(--cm-ui); max-width: 440px; }
.cm-auth__brnote { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(216,199,233,.2); padding-top: 20px; }
.cm-auth__brnote span { font-size: 12px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-auth__form { background: var(--cm-bg); display: flex; align-items: center; justify-content: center; padding: 48px; }
.cm-auth__card { width: 100%; max-width: 400px; animation: cmFadeUp .7s ease both; }
.cm-auth__h1 { font-family: var(--cm-serif); font-size: 34px; font-weight: 500; color: var(--cm-ink); line-height: 1.15; margin: 12px 0 0; }
.cm-auth__lead { font-size: 13.5px; color: var(--cm-body); margin-top: 8px; line-height: 1.6; font-family: var(--cm-ui); }
.cm-auth__lead strong { color: var(--cm-ink); }
.cm-field { margin-top: 28px; }
.cm-field__lbl { font-size: 12px; font-weight: 600; color: #4a4356; font-family: var(--cm-ui); }
.cm-input { display: flex; align-items: center; gap: 10px; border: 1px solid #D9D2C6; border-radius: 10px; padding: 12px 16px; margin-top: 8px; background: #fff; transition: border-color .25s; }
.cm-input.is-error { border-color: #B3261E; }
.cm-input input { border: none; outline: none; background: transparent; font-family: var(--cm-ui); font-size: 14px; color: var(--cm-ink); width: 100%; }
.cm-input input::placeholder { color: #7d738f; }
.cm-field__err { font-size: 12px; color: #B3261E; margin-top: 8px; font-family: var(--cm-ui); }
.cm-authbtn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; background: var(--cm-ink); color: #fff; font-size: 13.5px; font-weight: 700; padding: 14px; border-radius: 10px; font-family: var(--cm-ui); transition: background .25s; border: none; cursor: pointer; width: 100%; }
.cm-authbtn:hover { background: var(--cm-primary-d); color: #fff; }
.cm-authdiv { display: flex; align-items: center; gap: 12px; margin: 24px 0; }
.cm-authdiv__line { flex: 1; height: 1px; background: var(--cm-border); }
.cm-authdiv__t { font-size: 11px; color: #9a8fae; font-family: var(--cm-ui); }
.cm-authcheck { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--cm-body); font-family: var(--cm-ui); }
.cm-authcheck + .cm-authcheck { margin-top: 10px; }
.cm-authmeta { font-size: 12.5px; color: var(--cm-muted); margin-top: 28px; font-family: var(--cm-ui); }
.cm-authmeta a { color: var(--cm-primary); font-weight: 600; }
.cm-authsample { font-size: 11px; color: #b3aec0; margin-top: 24px; font-family: var(--cm-ui); }
.cm-otp { display: flex; gap: 10px; margin-top: 26px; }
.cm-otp__box { flex: 1; aspect-ratio: 1; border: 1.5px solid #E3DDD4; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--cm-serif); font-size: 26px; color: var(--cm-ink); background: #fff; }
.cm-otp__box.is-filled { border-color: #C9BFD8; }
.cm-otp__box.is-active { border-color: var(--cm-primary); }
.cm-authband { border: 1px solid var(--cm-border); border-radius: 10px; padding: 14px 16px; margin-top: 24px; display: flex; align-items: flex-start; gap: 10px; background: #F1EDE4; }
.cm-authband div { font-size: 12px; color: var(--cm-body); line-height: 1.55; font-family: var(--cm-ui); }

/* ---- Profile ---- */
.cm-prof-head { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; animation: cmFadeUp .7s ease both; }
.cm-prof__av { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(150deg,var(--cm-primary),var(--cm-primary-d)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--cm-serif); font-size: 34px; flex: 0 0 auto; }
.cm-prof__name { font-family: var(--cm-serif); font-size: 38px; font-weight: 500; color: var(--cm-ink); line-height: 1.1; margin: 8px 0 0; }
.cm-prof__role { font-size: 14px; color: var(--cm-body); margin-top: 6px; font-family: var(--cm-ui); }
.cm-prof-stats { margin-top: 30px; border-top: 3px solid var(--cm-ink); padding-top: 22px; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; animation: cmFadeUp .7s .04s ease both; }
.cm-prof-stat__n { font-family: var(--cm-serif); font-size: 38px; color: var(--cm-ink); }
.cm-prof-stat__n span { font-size: 20px; color: var(--cm-muted); }
.cm-prof-stat__l { font-size: 12.5px; color: var(--cm-muted); font-family: var(--cm-ui); }
.cm-prof-grid { margin-top: 44px; display: grid; grid-template-columns: 1fr 340px; gap: 44px; animation: cmFadeUp .7s .08s ease both; }
.cm-prof-block { border-top: 3px solid var(--cm-ink); padding-top: 16px; }
.cm-prof-block + .cm-prof-block { margin-top: 32px; }
.cm-prof-block__head { display: flex; align-items: baseline; justify-content: space-between; }
.cm-prof-block__head h2 { font-family: var(--cm-serif); font-size: 23px; font-weight: 500; color: var(--cm-ink); }
.cm-prof-block__edit { font-size: 12.5px; color: var(--cm-primary); font-weight: 600; font-family: var(--cm-ui); }
.cm-acct { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 12px; font-family: var(--cm-ui); }
.cm-acct__row { padding: 12px 0; border-bottom: 1px solid var(--cm-border-s); }
.cm-acct__k { font-size: 11px; color: var(--cm-muted); }
.cm-acct__v { font-size: 14px; color: var(--cm-ink); margin-top: 3px; }
.cm-chipset { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cm-ichip { font-size: 12.5px; font-weight: 600; color: var(--cm-primary); background: #EFEAF7; border: 1px solid var(--cm-lilac); padding: 7px 14px; border-radius: 99px; font-family: var(--cm-ui); }
.cm-ichip--add { color: var(--cm-muted); background: transparent; border: 1px dashed #C9BFD8; }
.cm-saved a { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--cm-border-s); font-family: var(--cm-ui); }
.cm-saved a:last-child { border-bottom: none; }
.cm-saved__tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--cm-primary); background: #EFEAF7; padding: 3px 8px; border-radius: 6px; flex: 0 0 auto; }
.cm-saved__tag--book { color: var(--cm-gold); background: #FBF3E2; }
.cm-saved__t { flex: 1; font-size: 13.5px; color: var(--cm-ink); font-weight: 600; }
.cm-saved__o { font-size: 12px; color: var(--cm-muted); }
.cm-prof-rail { display: flex; flex-direction: column; gap: 20px; }
.cm-railcard--dark { background: linear-gradient(150deg,var(--cm-primary),var(--cm-primary-d)); border-radius: 4px; padding: 22px; color: #fff; }
.cm-partrow { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--cm-border-s); font-size: 12.5px; font-family: var(--cm-ui); }
.cm-partrow:last-child { border-bottom: none; }

/* ---- Interview Detail ---- */
.cm-itake { display: flex; flex-direction: column; margin-top: 8px; }
.cm-itake__row { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--cm-border-s); }
.cm-itake__row:last-child { border-bottom: none; }
.cm-itake__n { font-family: var(--cm-serif); font-size: 24px; color: var(--cm-lilac-txt); line-height: 1; flex: 0 0 auto; }
.cm-itake__t { font-size: 14px; color: var(--cm-ink); line-height: 1.6; font-family: var(--cm-ui); }
.cm-transcript { margin-top: 32px; border: 1px dashed #D9D2C6; border-radius: 4px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cm-ispeaker { display: flex; align-items: center; gap: 14px; }
.cm-ispeaker img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.cm-chapter { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--cm-border); font-size: 12.5px; font-family: var(--cm-ui); }
.cm-chapter:last-child { border-bottom: none; }
.cm-more { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; padding-top: 22px; }
.cm-more__imgwrap { overflow: hidden; border-radius: 4px; }
.cm-more__img { height: 150px; background-size: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.cm-more a:hover .cm-more__img, .cm-more__imgwrap:hover .cm-more__img { transform: scale(1.05); }
.cm-more__ttl { font-family: var(--cm-serif); font-size: 17px; font-weight: 500; color: var(--cm-ink); margin-top: 12px; line-height: 1.35; }
.cm-more__meta { font-size: 12px; color: var(--cm-muted); margin-top: 4px; font-family: var(--cm-ui); }
.cm-savebtn { border: 1px solid #C9BFD8; background: #fff; color: var(--cm-primary); font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 99px; cursor: pointer; font-family: var(--cm-ui); transition: all .3s; white-space: nowrap; }
.cm-savebtn.is-saved { background: var(--cm-ink); color: var(--cm-bg); border-color: var(--cm-ink); }

@media (max-width: 1024px) {
  .cm-auth { grid-template-columns: 1fr; }
  .cm-auth__brand { min-height: 260px; }
  .cm-auth__brand-in { padding: 32px; }
  .cm-prof-grid { grid-template-columns: 1fr; }
  .cm-more { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cm-auth__form { padding: 32px 20px; }
  .cm-prof-head { grid-template-columns: auto 1fr; }
  .cm-prof-head__signout { grid-column: 1 / -1; justify-self: start; }
  .cm-prof-stats { grid-template-columns: 1fr 1fr; }
  .cm-prof__name { font-size: 30px; }
  .cm-acct { grid-template-columns: 1fr; }
  .cm-more { grid-template-columns: 1fr; }
}